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