fengdong777
2 years ago
4 changed files with 725 additions and 540 deletions
@ -0,0 +1,448 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<div class="tab-header webtop"> |
||||
|
<div>{{ viewTitle }}</div> |
||||
|
<div> |
||||
|
<el-button type="primary" size="small" @click="saveOrUpdate" |
||||
|
>保存</el-button |
||||
|
> |
||||
|
<el-button type="info" size="small" @click="handleReturn()" |
||||
|
>返回</el-button |
||||
|
> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="listconadd"> |
||||
|
<el-form ref="dataForm" :model="purchaseForm" label-position="top" label-width="190px" class="formadd"> |
||||
|
<div class="title" style="display: flex;align-items: center;justify-content: space-between;height:40px"> |
||||
|
<div style="margin-left: 15px;">主体信息</div> |
||||
|
</div> |
||||
|
<el-row> |
||||
|
<el-col :span="4" class="trightb"> |
||||
|
<el-form-item class="trightb_item"> |
||||
|
<span slot="label">订单编号：</span> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<el-form-item class="trightb_item" prop="no"> |
||||
|
<el-input :disabled="true" v-model="purchaseForm.no"></el-input> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
|
||||
|
<el-col :span="4" class="trightb"> |
||||
|
<el-form-item class="trightb_item"> |
||||
|
<span slot="label">订单日期：</span> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<el-form-item class="trightb_item"> |
||||
|
<!-- <span>{{temp.bankName}}</span> --> |
||||
|
<el-date-picker v-model="purchaseForm.applicationDate" type="date" style="width: 100%;" |
||||
|
format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择" /> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-row> |
||||
|
<el-col :span="4" class="trightb"> |
||||
|
<el-form-item class="trightb_item"> |
||||
|
<span slot="label">供货单位：</span> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<el-form-item prop="supplier" class="trightb_item"> |
||||
|
<el-select v-model="purchaseForm.custerSid" placeholder="请选择" > |
||||
|
<el-option |
||||
|
v-for="(supplier,i) in supplierList" |
||||
|
:key="i" |
||||
|
:label="supplier.name" |
||||
|
:value="supplier.id"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="4" class="trightb"> |
||||
|
<el-form-item class="trightb_item"> |
||||
|
<span slot="label">采购申请人：</span> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<el-form-item class="trightb_item"> |
||||
|
<el-input v-model="purchaseForm.creatorName" placeholder="采购申请人" clearable /> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-row> |
||||
|
<el-col :span="4" class="trightb"> |
||||
|
<el-form-item class="trightb_item"> |
||||
|
<span slot="label">出库仓库：</span> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<el-form-item class="trightb_item"> |
||||
|
<el-select v-model="purchaseForm.storeHouseSid" placeholder="请选择" > |
||||
|
<el-option |
||||
|
v-for="(storehouse,i) in storehouseList" |
||||
|
:key="i" |
||||
|
:label="storehouse.name" |
||||
|
:value="storehouse.sid"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="4" class="trightb"> |
||||
|
<el-form-item class="trightb_item"> |
||||
|
<span slot="label">出库日期：</span> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<el-form-item class="trightb_item"> |
||||
|
<el-date-picker v-model="purchaseForm.purchaseDate" type="date" style="width: 100%;" |
||||
|
format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择" /> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
|
||||
|
<el-collapse v-model="activeNames"> |
||||
|
<el-collapse-item name="1"> |
||||
|
<template slot="title" > |
||||
|
<span style="margin-left: 15px;">出库商品明细</span><span class="span" @click.stop="add()">添加</span> |
||||
|
</template> |
||||
|
<el-table :data="purchaseForm.list" border style="width: 100%;" |
||||
|
:row-style="{height: '40px'}"> |
||||
|
<el-table-column label="质物名称" width="120" prop="proName" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-select v-model="scope.row.proName" placeholder="请选择" > |
||||
|
<el-option |
||||
|
v-for="product in productList" |
||||
|
:key="product.name" |
||||
|
:label="product.name" |
||||
|
:value="product.name"> |
||||
|
</el-option> |
||||
|
</el-select> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="规格(型号)" width="120" prop="proModel" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input v-model="scope.row.proModel" placeholder="商品品类" clearable></el-input> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="成产厂家(产地)" width="150" prop="manufacturer" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input v-model="scope.row.manufacturer" placeholder="商品品牌" clearable></el-input> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="数量/重量" width="140" prop="estimateNum" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input v-model="scope.row.estimateNum" @input="limitInput2($event,scope.$index)" placeholder="" clearable></el-input> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="单价(元)" width="140" prop="estimateconfirmedPrice" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input v-model="scope.row.estimateconfirmedPrice" @input="limitInput1($event,scope.$index)" placeholder="" clearable></el-input> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="出库价值(元)" width="150px" prop="estimateCalculatedValue" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input v-model="scope.row.estimateCalculatedValue" :readonly="true" placeholder="" clearable></el-input> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="库存价值(元)" width="130" prop="realityCalculatedValue" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input v-model="scope.row.realityCalculatedValue" placeholder="" clearable></el-input> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="货位号" width="150" prop="locationNumber" align="center"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-input v-model="scope.row.locationNumber" placeholder="" clearable></el-input> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
|
||||
|
<el-table-column label="操作" fixed="right" align="center" width="150"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button type="primary" size="mini" @click="doCommoditylDel(scope.$index)">删除</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
</el-collapse-item> |
||||
|
</el-collapse> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
|
||||
|
export default { |
||||
|
name: "outListAdd", |
||||
|
components: { |
||||
|
|
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
viewTitle: "【新增】出库订单", |
||||
|
purchaseForm: { |
||||
|
purchaseId: '', |
||||
|
product: '', |
||||
|
barCode: '', |
||||
|
applicationDate:'', |
||||
|
no:'', |
||||
|
supplier: '', |
||||
|
creatorName:'', |
||||
|
storehouseName:'', |
||||
|
storeHouseSid:"", |
||||
|
custerName:'', |
||||
|
custerSid:'', |
||||
|
list:[] |
||||
|
}, |
||||
|
supplierList: [], |
||||
|
storehouseList: [], |
||||
|
productList: [], |
||||
|
productList2: [], |
||||
|
custList: [], |
||||
|
selectPurchaseList: [], |
||||
|
activeNames: ['1'], |
||||
|
rules: { |
||||
|
product: [ |
||||
|
{ required: true, message: '请输入商品名', trigger: 'blur' } |
||||
|
], |
||||
|
supplier: [ |
||||
|
{ required: true, message: '请输入供应商', trigger: 'blur' } |
||||
|
], |
||||
|
count: [ |
||||
|
{ required: true, message: '请输入商品数量', trigger: 'blur' } |
||||
|
], |
||||
|
storehouse: [ |
||||
|
{ required: true, message: '请输入所属仓库', trigger: 'blur' } |
||||
|
] |
||||
|
} |
||||
|
}; |
||||
|
}, |
||||
|
mounted() { |
||||
|
|
||||
|
}, |
||||
|
created() { |
||||
|
this.getProductList() |
||||
|
this.getSupplierList() |
||||
|
this.getStorehouseList() |
||||
|
this.getcustListList() |
||||
|
this.openAddPurchaseDialog() |
||||
|
}, |
||||
|
methods: { |
||||
|
handleReturn(isreload) { |
||||
|
if (isreload === "true") this.$emit("reloadlist"); |
||||
|
this.clearList() |
||||
|
this.$emit("doback"); |
||||
|
}, |
||||
|
clearList() { |
||||
|
this.purchaseForm={ |
||||
|
applicationDate:'', |
||||
|
no:'', |
||||
|
supplier: '', |
||||
|
storehouseName:'', |
||||
|
storeHouseSid:"", |
||||
|
custerName:'', |
||||
|
custerSid:'', |
||||
|
storehouse: '', |
||||
|
status: '', |
||||
|
list:[] |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
saveOrUpdate(){ |
||||
|
// this.storehouseList.forEach((v, i) => { |
||||
|
// if(v.sid == this.purchaseForm.storeHouseSid){ |
||||
|
// this.purchaseForm.storehouseName = v.name |
||||
|
// } |
||||
|
// }) |
||||
|
// this.supplierList.forEach((v, i) => { |
||||
|
// if(v.name == this.purchaseForm.custerSid){ |
||||
|
// this.purchaseForm.custerName = v.name |
||||
|
// this.purchaseForm.custerSid = v.id |
||||
|
// }else if(v.id == this.purchaseForm.custerSid){ |
||||
|
// this.purchaseForm.custerName = v.name |
||||
|
// } |
||||
|
// }) |
||||
|
if (this.viewTitle === "【新增】出库订单") return this.addStorehouse(); |
||||
|
if (this.viewTitle === "【修改】出库订单") { |
||||
|
this.addStorehouse(); |
||||
|
} |
||||
|
}, |
||||
|
showAdd() { |
||||
|
this.viewTitle = "【新增】出库订单"; |
||||
|
this.clearList() |
||||
|
this.openAddPurchaseDialog() |
||||
|
}, |
||||
|
async showEdit(row) { |
||||
|
this.viewTitle = "【修改】出库订单"; |
||||
|
const { data: res } = await this.$http.get(`/purchasenew/fetchDetailsBySid/${row.sid}`) |
||||
|
if (res.code==200) { |
||||
|
this.purchaseForm=res.data |
||||
|
|
||||
|
this.supplierList.forEach((v, i) => { |
||||
|
if(v.id == res.data.custerSid){ |
||||
|
this.purchaseForm.custerSid = res.data.custerName |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
addStorehouse(){ |
||||
|
this.$refs.dataForm.validate(async validate => { |
||||
|
if (!validate) return this.$message.error('请填写必填项') |
||||
|
// this.purchaseForm.status = '待审核' |
||||
|
const { data: result } = await this.$http.post('/output/addOutStorehouse', this.purchaseForm) |
||||
|
if (result.code == 200) { |
||||
|
this.$message({ type: 'success', message: result.msg, showClose: true }) |
||||
|
this.handleReturn('true') |
||||
|
this.clearList() |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
async getSupplierList () { |
||||
|
const { data: result } = await this.$http.get('/purchase/getSupplier') |
||||
|
if (result.status !== 200) return this.$message.error('获取列表失败') |
||||
|
this.supplierList = result.data |
||||
|
}, |
||||
|
async getStorehouseList () { |
||||
|
const { data: result } = await this.$http.get("/v1/shstorehouse/listAll") |
||||
|
if (result.code == 200){ |
||||
|
this.storehouseList = result.data |
||||
|
} |
||||
|
}, |
||||
|
async getProductList () { |
||||
|
const { data: result } = await this.$http.get('/purchase/getProductList', { params: { name: this.purchaseForm.product } }) |
||||
|
if (result.status !== 200) return this.$message.error('获取商品列表失败') |
||||
|
this.productList = result.data |
||||
|
this.purchaseForm.barCode = this.productList[0].barCode |
||||
|
}, |
||||
|
async getcustListList () { |
||||
|
const { data: result } = await this.$http.get('/v1/shstorehouse/fetchEntList') |
||||
|
if (result.code == 200){ |
||||
|
this.custList = result.data |
||||
|
} |
||||
|
}, |
||||
|
openAddPurchaseDialog () { |
||||
|
var now = new Date() |
||||
|
this.purchaseForm.no = 'IP' + now.getTime() |
||||
|
if (this.productList2.length == 0) this.productList2 = this.productList |
||||
|
this.add() |
||||
|
}, |
||||
|
add(){ |
||||
|
this.purchaseForm.list.push({ |
||||
|
|
||||
|
}) |
||||
|
}, |
||||
|
doCommoditylDel(index) { |
||||
|
|
||||
|
const tip = '请确认是否删除所选记录?' |
||||
|
this.$confirm(tip, '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning' |
||||
|
}).then(() => { |
||||
|
this.purchaseForm.list.splice(index, 1); |
||||
|
}) |
||||
|
}, |
||||
|
getLists(){ |
||||
|
let arrList=this.purchaseForm.list |
||||
|
for(let i=0;i<arrList.length;i++){ |
||||
|
if(arrList[i].estimateNum && arrList[i].estimateConfirmedPrice){ |
||||
|
let newValue=parseFloat(arrList[i].estimateNum) * parseFloat(arrList[i].estimateConfirmedPrice) || 0 |
||||
|
let getValue=Math.floor(newValue*100)/100 |
||||
|
this.$set(arrList[i], 'estimateCalculatedValue', getValue) |
||||
|
}else{ |
||||
|
this.$set(arrList[i], 'estimateCalculatedValue', '') |
||||
|
} |
||||
|
} |
||||
|
}, |
||||
|
limitInput1(value, index) { |
||||
|
this.purchaseForm.list[index].estimateConfirmedPrice = |
||||
|
("" + value) // 第一步：转成字符串 |
||||
|
.replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉 |
||||
|
.replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字 |
||||
|
.replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全 |
||||
|
.match(/^\d*(\.?\d{0,2})/g)[0] || ""; // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数 |
||||
|
this.getLists() |
||||
|
}, |
||||
|
limitInput2(value, index) { |
||||
|
this.purchaseForm.list[index].estimateNum = |
||||
|
("" + value) // 第一步：转成字符串 |
||||
|
.replace(/[^\d^\.]+/g, "") // 第二步：把不是数字，不是小数点的过滤掉 |
||||
|
.replace(/^0+(\d)/, "$1") // 第三步：第一位0开头，0后面为数字，则过滤掉，取后面的数字 |
||||
|
.replace(/^\./, "0.") // 第四步：如果输入的第一位为小数点，则替换成 0. 实现自动补全 |
||||
|
.match(/^\d*(\.?\d{0,2})/g)[0] || ""; // 第五步：最终匹配得到结果 以数字开头，只有一个小数点，而且小数点后面只能有0到2位小数 |
||||
|
this.getLists() |
||||
|
}, |
||||
|
}, |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped> |
||||
|
/deep/ .el-collapse-item__header { |
||||
|
height: 40px; |
||||
|
font-weight: bold; |
||||
|
font-size: 16px; |
||||
|
text-align: left; |
||||
|
color: #ffffff; |
||||
|
background-color: #0294d7; |
||||
|
} |
||||
|
|
||||
|
/deep/ .el-collapse-item__content { |
||||
|
padding-bottom: 0; |
||||
|
} |
||||
|
.trightb { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
text-align: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.trightb_item { |
||||
|
padding-top: 5px; |
||||
|
} |
||||
|
|
||||
|
.span { |
||||
|
margin-left: 50px; |
||||
|
font-size: 15px; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
.formadd { |
||||
|
padding: 10px 40px 0 40px; |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
.formadd .title { |
||||
|
font-weight: bold; |
||||
|
font-size: 16px; |
||||
|
background-color: #0294d7; |
||||
|
text-align: left; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
.first_row{ |
||||
|
border-top: 1px solid #e0e3eb; |
||||
|
} |
||||
|
.formadd .el-row { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
border-left: 1px solid #e0e3eb; |
||||
|
} |
||||
|
.formadd .el-row .el-col { |
||||
|
border-right: 1px solid #e0e3eb; |
||||
|
border-bottom: 1px solid #e0e3eb; |
||||
|
padding: 0 15px; |
||||
|
min-height: 42px; |
||||
|
line-height: 1; |
||||
|
} |
||||
|
.formadd .el-row .el-col .el-form-item { |
||||
|
margin-bottom: 0; |
||||
|
line-height: 42px; |
||||
|
} |
||||
|
.addinputw { |
||||
|
width: 80%; |
||||
|
line-height: 42px; |
||||
|
} |
||||
|
.el-input__inner { |
||||
|
height: 36px; |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
Loading…
Reference in new issue