<template>
<div id="contents">
<div class="top">
<div class="top_inline">
<p>供应商：</p>
<el-select v-model="valuetype" placeholder="请选择">
<el-option v-for="item in options" :key="item.id" :label="item.supplier_name" :value="item.id">
</el-option>
</el-select>
</div>
<div class="top_inline" style="margin-left: 20px">
<p>采购单名称：</p>
<el-input v-model="shoptxt" placeholder="请输入采购单名称"></el-input>
</div>
<div class="top_inline" style="margin-left: 20px">
<p>创建人：</p>
<el-input v-model="people" placeholder="请输入创建人名称"></el-input>
</div>
<div class="top_inline" style="margin-left: 20px;padding-top: 0">
<p> </p>
<el-button type="success" width="40%" @click="addDemo">+添加商品</el-button>
<el-button type="success" width="40%" @click="holdAll">保存</el-button>
</div>
</div>
<div class="content_table">
<div class="btn_search" style="margin-bottom: 20px">
<div style="padding-right: 0">
<!--<el-input-->
<!--placeholder="请输入内容"-->
<!--small-->
<!--v-model="searchValue">-->
<!--<i slot="prefix" class="el-input__icon el-icon-search"></i>-->
<!--</el-input>-->
</div>
</div>
<div class="btn_content">
<el-table :data="tableData" highlight-current-row border style="width: 100%" class="el-tb-edit" @current-change="handleCurrentChange" ref="demoTable">
<el-table-column type="index" width="50" label="序号">
</el-table-column>
<el-table-column prop="productNumber" label="商品编号">
<template slot-scope="scope">
<el-autocomplete
v-model="scope.row.productNumber"
:fetch-suggestions="goodsNumber"
placeholder="请输入内容"
@select="handlexx"
@focus="getThisList(scope.row)">
</el-autocomplete>
<span>{{scope.row.productNumber}}</span>
</template>
</el-table-column>
<el-table-column prop="barCode" label="商品条形码">
<template slot-scope="scope">
<el-autocomplete
v-model="scope.row.barCode"
:fetch-suggestions="barCodeSearch"
placeholder="请输入内容"
@select="handleSelectB"
@focus="getThisListB(scope.row)"
>
</el-autocomplete>
<span>{{scope.row.barCode}}</span>
</template>
</el-table-column>
<el-table-column prop="goodName" label="货名">
<template slot-scope="scope">
<el-autocomplete
v-model="scope.row.goodName"
:fetch-suggestions="goodNameSearch"
placeholder="请输入内容"
@select="handleSelectC"
@focus="getThisListC(scope.row)"
>
</el-autocomplete>
<span>{{scope.row.goodName}}</span>
</template>
</el-table-column>
<el-table-column prop="skuPurchaseProductDto" label="数量">
<template slot-scope="scope">
<el-input type="number" v-model="scope.row.skuPurchaseProductDto.amount" placeholder="请输入内容" :min="0"></el-input>
<span>{{scope.row.skuPurchaseProductDto.amount}}</span>
</template>
</el-table-column>
<el-table-column prop="skuPurchaseProductDto" label="采购价(元)">
<template slot-scope="scope">
<el-input type="number" v-model="scope.row.skuPurchaseProductDto.purchasePrice" placeholder="请输入内容" :min="0"></el-input>
<span>{{scope.row.skuPurchaseProductDto.purchasePrice}}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<!--{{JSON.stringify(tableData)}}-->
</div>
<!--//弹出的部分------------------------------------------------------------------>
</div>
</template>
<script>
import pages from '../../component/pagination/pagination'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
import { API } from '../../lib/api'
import { LINK } from '../../lib/api'
import Qs from 'qs'
export default {
data() {
return {
shoptxt:'',
people:'',
valuetype:'',
tableData: [],
currentRow: null,
restaurants: [],
formLabelWidth: '80px',
showFlag: false,
resizable: false,
input9: '',
value5: '',
options: [],
value1: "请选择",
value2: '2',
value3: '1',
input: '',
htmlTitle: '表格数据',
searchValue: '',
total: null,
value4: '',
currentPage: 1,
excelData: [],
value: '',
cont:{},
contB:{},
contC:{},
build:'',
showcode:false,
showid:1,
}
},
created() {
this.databuild();
this.axios({
method: 'get',
url: `${LINK}/sku/purchase-order/supplier/query-all/do?supState=0`,
headers: {
'Content-Type': 'multipart/form-data'
},
}).then( res=>{
this.options = res.data.data
})
},
components: {
pages
},
methods: {
databuild(){
//传递两个参数 其中一个参数判断是不是编辑或者新增
this.build = this.$route.query.id;
this.value1 = this.$route.query.dataObj;//0为编辑 1为新增
if(this.value1 ==='0'){
this.axios({
method: 'get',
url: `${LINK}/sku/purchase-order/product/byid/do`+"?id="+this.build,
headers: {
'Content-Type': 'multipart/form-data'
},
}).then( res=>{
if(res.data.code =='200'){
this.tableData = res.data.data.skuProductPoolList;
this.shoptxt = res.data.data.purchaseName;
this.people = res.data.data.operator;
this.valuetype = res.data.data.supplierDto.supplier_name;
}else{
this.$message.error('获取数据出错');
}
})
}else if(this.value1 ==='1'){
//console.log("不需要做处理")
}
},
//商品编号获取值
getThisList(item){
this.cont=item;
console.log(item)
},
handlexx(item){
this.cont.barCode = item.barCode;
this.cont.goodName = item.goodName;//货名
this.cont.id = item.id;//货名
},
goodsNumber(queryString, callback) {
var that = this;
console.log(this.tableData.productNumber)
var list = [];
this.tableData.productNumber = queryString;
let formData = new FormData()
formData.append('productNumber', queryString)
this.axios({
method: 'POST',
url: `${LINK}/sku/o-product/search/by-parameter/do`,
headers: {
'Content-Type': 'multipart/form-data'
},
data:formData,
}).then(function(response) {
if(response.data.data.length===0){
that.showcode = true;
that.$message({
type: 'error',
message: "商品编号不存在！"
});
}else{
for(var i = 0; i < response.data.data.length; i++) {
response.data.data[i].value = response.data.data[i].productNumber; //将想要展示的数据作为value
}
list = response.data.data;
callback(list);
}
})
},
//商品条形码
getThisListB(item){
this.contB=item;
},
handleSelectB(item){
this.contB.barCode = item.barCode;
this.contB.goodName = item.goodName;//货名
this.contB.productNumber =item.productNumber;
this.contB.id = item.id;//货名
},
barCodeSearch(queryString, callback) {
var that = this;
var list = [];
this.tableData.barCode = queryString;
let formData = new FormData()
formData.append('barCode', queryString)
this.axios({
method: 'POST',
url: `${LINK}/sku/o-product/search/by-parameter/do`,
headers: {
'Content-Type': 'multipart/form-data'
},
data:formData,
}).then(function(response) {
if(response.data.data.length===0){
that.showcode = true;
that.$message({
type: 'error',
message: "商品条码不存在！"
});
}else{
for(var i = 0; i < response.data.data.length; i++) {
response.data.data[i].value = response.data.data[i].barCode; //将想要展示的数据作为value
}
list = response.data.data;
callback(list);
}
})
},
//货名搜索
getThisListC(item){
this.contC=item;
},
handleSelectC(item){
this.contC.barCode = item.barCode;
this.contC.goodName = item.goodName;//货名
this.contC.productNumber =item.productNumber;
this.contC.id = item.id;//货名
},
goodNameSearch(queryString, callback) {
var that = this;
var list = [];
this.tableData.goodName = queryString;
let formData = new FormData()
formData.append('goodName', queryString)
this.axios({
method: 'POST',
url: `${LINK}/sku/o-product/search/by-parameter/do`,
headers: {
'Content-Type': 'multipart/form-data'
},
data:formData,
}).then(function(response) {
if(response.data.data.length===0){
that.showcode = true;
that.$message({
type: 'error',
message: "货名不存在！"
});
}else{
for(var i = 0; i < response.data.data.length; i++) {
response.data.data[i].value = response.data.data[i].goodName; //将想要展示的数据作为value
}
list = response.data.data;
callback(list);
}
})
},
//保存事件
holdAll() {
if(this.valuetype==""|| this.shoptxt=="" ||this.people ==""){
this.$message.error('供应商 采购单名称 创建人必须填写');
return false;
}
if(this.value1 ==='0'){ //0为编辑 1为新增
var svaluetype = String(this.valuetype);
var obj = {
purchaseProduct: '',
};
obj.purchaseProduct ={
supplierId:svaluetype,
operator:String(this.people),
purchaseName:String(this.shoptxt),
purchaseId:String(this.build),
products :[]
};
this.tableData.map((item)=> {
obj.purchaseProduct.products.push({
"productId":String(item.id),
"purchasePrice":String(item.skuPurchaseProductDto.purchasePrice),
"amount":String(item.skuPurchaseProductDto.amount),
})
})
var findsame = false;
for (var i = 0; i < this.tableData.length; i++) {
for (var j = i + 1; j < this.tableData.length; j++) {
if (this.tableData[i].productNumber == this.tableData[j].productNumber ){findsame = true; break;}
}
if (findsame) break;
}
if(findsame){
this.$message({
type: 'error',
message: "新建商品的商品编号必须不一样且请确保提交信息的完整性！"
});
return false;
}
if(this.tableData.length === 0){
this.$message({
type: 'error',
message: "商品不可为空！"
});
return false;
}
var svaluetype = String(this.valuetype);
let formData = new FormData();
formData.append('purchaseProductObjct', JSON.stringify(obj))// 权限类型 系统 模块 菜单选择
this.axios({
method: 'POST',
url:`${LINK}/sku/purchase-order/update/do`,
data:formData,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then( res=>{
if(res.data.code == 200){
setTimeout(() => {
this.$message({
type: 'success',
message: res.data.msg
});
this.$router.push({
path: 'buyList',
name: 'buyList',
});
}, 2000);
}else{
this.$message.error('请确保提交信息的完整性！');
return false;
}
}).catch((err)=>{
});
}else if(this.value1 ==='1'){
let setDATA =[]; //0为编辑 1为新增
this.tableData.map((item)=> {
setDATA.push({
"id":String(item.id),
"purchasePrice":String(item.skuPurchaseProductDto.purchasePrice),
"amount":String(item.skuPurchaseProductDto.amount),
})
})
console.log(this.tableData)
var findsame = false;
for (var i = 0; i < this.tableData.length; i++) {
for (var j = i + 1; j < this.tableData.length; j++) {
if (this.tableData[i].productNumber == this.tableData[j].productNumber ){findsame = true; break;}
}
if (findsame) break;
}
if(findsame){
this.$message({
type: 'error',
message: "新建商品的商品编号必须不一样！"
});
return false;
}
if(this.tableData.length === 0){
this.$message({
type: 'error',
message: "商品不可为空！"
});
return false;
}
var svaluetype = String(this.valuetype);
let formData = new FormData()
formData.append('productPoolArray', JSON.stringify(setDATA))// 权限类型 系统 模块 菜单选择
formData.append('supplierId', svaluetype)//
formData.append('operator', String(this.people))//
formData.append('purchaseName', String(this.shoptxt))//
this.axios({
method: 'POST',
url:`${LINK}/sku/purchase-order/add/do`,
data:formData,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then( res=>{
if(res.data.code==200){
setTimeout(() => {
this.$message({
type: 'success',
message: res.data.msg
});
this.$router.push({
path: 'buyList',
name: 'buyList',
});
}, 2000);
}else{
this.$message({
type: 'error',
message: "请填写完整信息后，再次保存",
// message: res.data.msg,
});
return false;
}
}).catch((err)=>{
//console.log(err);
});
}
},
handleIconClick(ev) {
//console.log(ev);
},
addDemo() { //添加
var d = {
productNumber:"",
barCode:"",
goodName:"",
skuPurchaseProductDto: '',
};
d.skuPurchaseProductDto = {
amount:'',
purchasePrice:''
}
this.tableData.push(d);
},
handleCurrentChange(val) {
this.currentRow = val;
},
handleDelete(index, r) {
this.$confirm('是否要删除此数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.tableData.splice(index, 1)
this.$message({
type: 'success',
message: '删除成功'
});
this.getList(1);
}).catch(() => {
this.$message({
type: 'info',
message: '已取消'
});
});
/*
this.$confirm('是否要删除此数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.axios({
method: 'POST',
url: `${LINK}/sku/purchase-order/delete/do`,
data: Qs.stringify({
id: r.id
}),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res=>{
if(res.data.code==200){
this.$message({
type: 'success',
message: '删除成功'
});
this.getList(1);
}else{
this.$message({
type: 'warning',
message: '删除失败'
});
}
})
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
*/
},
handleEdit(index, row) {
//console.log(index, row);
},
del(index) {
this.formData.splice(index, 1)
},
handleEdit() {
this.dialogFormVisible = true
},
update() {
this.dialogFormVisible = false
},
cancel() {
this.dialogFormVisible = false
},
radioEvent() {
this.showFlag = false;
},
changepages(a) {
this.currentPage = a
},
reset() {
this.value1 = -1
this.input = ''
this.getList(1);
},
getList(a) {
let myData = Qs.stringify({
page: a,
productName: this.input,
max: 10,
uuid: localStorage.getItem('uuid')
});
this.axios({
method: 'get',
url: `http://localhost:8080/data/buyTurn.json`,
data: myData,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
}).then(res => {
if(res.data.msg === 'success') {
this.excelData = res.data.data;
}
})
},
printContent() {
let wpt = document.getElementById('mytable');
let newContent = wpt.innerHTML;
let oldContent = document.body.innerHTML;
document.body.innerHTML = newContent;
window.print(); //打印方法
window.localtion.reload();
document.body.innerHTML = oldContent
},
},
computed: {
tableDatas: function() {
var search = this.searchValue;
if(search) {
return this.excelData.filter(function(product) {
return Object.keys(product).some(function(key) {
return String(product[key]).toLowerCase().indexOf(search) > -1
})
})
}
return this.excelData;
}
},
watch: {
currentPage: function() {
this.getList(this.currentPage)
},
},
mounted() {
}
}
</script>
<style scoped="">
.el-table td,
.el-table th {
text-align: center!important;
}
.deleach i {
margin: 22px 2px;
display: inline-block;
color: #f56c6c;
}
.deleach {
cursor: pointer;
}
/*.el-tb-edit .el-autocomplete,
.el-tb-edit .el-input .input,
.el-tb-edit .el-input,
.el-tb-edit .el-input-number,
.el-tb-edit .el-select {
display: none;
width: 100%;
}
.el-tb-edit .current-row .el-input,
.el-tb-edit .current-row .el-autocomplete,
.el-tb-edit .current-row .el-input-number,
.el-tb-edit .current-row .el-select {
display: inherit;
}
.el-tb-edit .current-row .el-autocomplete+span,
.el-tb-edit .current-row .el-input+span,
.el-tb-edit .current-row .el-input-number+span,
.el-tb-edit .current-row .el-select+span {
display: none;
}*/
.el-tb-edit .el-autocomplete,
.el-tb-edit .el-input .input,
.el-tb-edit .el-input,
.el-tb-edit .el-input-number,
.el-tb-edit .el-select
{
display: none;
width: 100%;
}
.el-tb-edit .current-row .el-input,
.el-tb-edit .current-row .el-autocomplete,
.el-tb-edit .current-row .el-input-number,
.el-tb-edit .current-row .el-select {
display: inherit;
}
.el-tb-edit .current-row .el-autocomplete+span,
.el-tb-edit .current-row .el-input+span,
.el-tb-edit .current-row .el-input-number+span,
.el-tb-edit .current-row .el-select+span {
display: none;
}
</style>
网友评论