新增合同流程界面优化

添加校验销售合同清单明细
添加申请人手机号验证
添加 业务采购清单明细 表单填写
master
Harry Yang 2022-12-29 11:31:32 +08:00
parent 4740f30d08
commit 7d3a8bef70
1 changed files with 120 additions and 47 deletions

View File

@ -83,7 +83,8 @@
</div>
<#-- 业务采购流程项目选择 -->
<el-dialog title="请选择项目编号" :visible.sync="procurementProjectSelectorVisible" v-cloak width="40%">
<el-dialog title="请选择项目编号" :visible.sync="procurementProjectSelectorVisible"
destroy-on-close v-cloak width="40%">
<el-autocomplete v-model="processForm.projectNo" :fetch-suggestions="queryProject" clearable
value-key="projectNo" placeholder="请输入项目编号或名称,支持模糊查询" @select="handleSelectProject"
@ -100,7 +101,7 @@
</div>
</el-dialog>
<el-dialog title="预算采购明细" :visible.sync="procurementDetailSelectorVisible" v-cloak width="90%" :close-on-click-modal="false">
<el-dialog title="预算采购明细" :visible="procurementDetailSelectorVisible" v-cloak width="90%" :close-on-click-modal="false">
<el-table border :data="procurementDetails">
<el-table-column type="index" :index="1" label="序号" fixed></el-table-column>
@ -112,7 +113,7 @@
<el-table-column prop="unit" label="单位"></el-table-column>
<el-table-column prop="price" label="预算单价" width="100"></el-table-column>
<el-table-column prop="taxRate" label="税率(%"></el-table-column>
<el-table-column prop="totalTaxInclude" label="含税总金额(元)" width="120"></el-table-column>
<el-table-column prop="totalTaxInclude_" label="含税总金额(元)" width="120"></el-table-column>
<el-table-column prop="totalTaxExclude" label="不含税金额(元)" width="120"></el-table-column>
<el-table-column prop="totalTax" label="税金(元)" width="110"></el-table-column>
<el-table-column prop="isUnderwritten" label="是否垫资"></el-table-column>
@ -121,9 +122,10 @@
<el-table-column prop="amountAlready" label="已采购数量" width="100"></el-table-column>
<el-table-column prop="amountCurrent" label="本次采购数量" width="180">
<template slot-scope="scope">
<el-input-number size="mini" :precision="2" :step="0.1" :min="0"
:max="scope.row.amount - scope.row.amountAlready"
v-model="scope.row.amountCurrent"></el-input-number>
<el-input-number :precision="2" :step="0.1" :min="0" v-model="scope.row.amountCurrent"
:disabled="scope.row.amount - scope.row.amountAlready===0" size="mini"
:max="scope.row.amount - scope.row.amountAlready" controls-position="right">
</el-input-number>
</template>
</el-table-column>
@ -136,7 +138,7 @@
</el-table>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="saveProcurementDetail">保存</el-button>
<el-button type="primary" @click="saveProcurementDetail">下一步</el-button>
</div>
</el-dialog>
@ -220,7 +222,8 @@
</el-form-item>
<el-form-item v-if="isSalesContractMode" label="申请人电话" prop="applyPersonPhone"
:rules="[{ required: true, message: '申请人电话不能为空'}]">
:rules="[{ required: true, message: '申请人电话不能为空'},
{ pattern:/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入合法手机号', trigger: 'blur' }]">
<el-input placeholder="请输入内容" v-model="processForm.applyPersonPhone"></el-input>
</el-form-item>
@ -305,20 +308,20 @@
<div>
<el-form-item v-if="isSalesContractMode" label="收款条件" :rules="[{ required: true, message: '收款条件不能为空'}]"
prop="paymentTerms">
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}" cols="90" maxlength="5000" show-word-limit
<el-input type="textarea" :autosize="{ minRows: 5, maxRows: 10}" cols="90" maxlength="5000" show-word-limit
v-model="processForm.paymentTerms" placeholder="请输入收款条件限制5000字"></el-input>
</el-form-item>
<el-form-item v-if="isProcurementContractMode" label="付款条件" :rules="[{ required: true, message: '付款条件不能为空'}]"
prop="paymentTerms">
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}" cols="90" maxlength="5000" show-word-limit
<el-input type="textarea" :autosize="{ minRows: 5, maxRows: 10}" cols="90" maxlength="5000" show-word-limit
v-model="processForm.paymentTerms" placeholder="请输入付款条件限制5000字"></el-input>
</el-form-item>
</div>
<div>
<el-form-item label="备注">
<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}" maxlength="5000" show-word-limit
<el-input type="textarea" :autosize="{ minRows: 5, maxRows: 10}" maxlength="5000" show-word-limit
v-model="processForm.remark" placeholder="请输入备注限制5000字" cols="90"></el-input>
</el-form-item>
</div>
@ -435,17 +438,17 @@
<el-table-column prop="type" label="类别"></el-table-column>
<el-table-column prop="spec" label="规格型号"></el-table-column>
<el-table-column prop="param" label="参数"></el-table-column>
<el-table-column prop="unit" label="单位"></el-table-column>
<el-table-column prop="amount" label="数量"></el-table-column>
<el-table-column prop="price" label="单价" width="120"></el-table-column>
<el-table-column prop="taxRate" label="税率"></el-table-column>
<el-table-column prop="totalTaxInclude" label="含税金额" width="120"></el-table-column>
<el-table-column prop="totalTaxExclude" label="不含税金额" width="120"></el-table-column>
<el-table-column prop="totalTax" label="税金"></el-table-column>
<el-table-column prop="unit" label="单位"></el-table-column>
<el-table-column prop="price" label="单价(元)" width="120"></el-table-column>
<el-table-column prop="taxRate" label="税率(%"></el-table-column>
<el-table-column prop="totalTaxInclude" label="含税金额(元)" width="120"></el-table-column>
<el-table-column prop="totalTaxExclude" label="不含税金额(元)" width="120"></el-table-column>
<el-table-column prop="totalTax" label="税金(元)" width="120"></el-table-column>
<el-table-column prop="expirationDate" label="质保期" fixed="right" width="150">
<template slot-scope="scope">
<el-input maxlength="5" size="mini" placeholder="请输入质保期"
<el-input maxlength="5" size="mini" placeholder="请输入质保期" show-word-limit
v-model="scope.row.expirationDate"></el-input>
</template>
</el-table-column>
@ -464,33 +467,76 @@
<#-- 选择 业务采购清单明细 -->
<div v-cloak class="am-u-sm-12 am-u-md-12" v-if="isProcurementContractDetailMode">
<el-table style="width: 100%" border>
<el-table style="width: 100%" border :data="procurementDetails">
<el-table-column type="index" :index="1" label="序号" fixed></el-table-column>
<el-table-column prop="feeType" label="费用项目" fixed width="80"></el-table-column>
<el-table-column prop="name" label="产品名称" fixed></el-table-column>
<el-table-column prop="category" label="采购类别" fixed></el-table-column>
<el-table-column prop="fee" label="费用项目" width="180"></el-table-column>
<el-table-column prop="fee" label="采购类别" width="180"></el-table-column>
<el-table-column prop="fee" label="产品名称" width="180"></el-table-column>
<el-table-column prop="fee" label="单位" width="180"></el-table-column>
<el-table-column prop="fee" label="数量" width="180"></el-table-column>
<el-table-column prop="fee" label="预算单价" width="180"></el-table-column>
<el-table-column prop="fee" label="税率(%" width="180"></el-table-column>
<el-table-column prop="fee" label="含税总金额(元)" width="180"></el-table-column>
<el-table-column prop="fee" label="不含税金额(元)" width="180"></el-table-column>
<el-table-column prop="fee" label="税金(元)" width="180"></el-table-column>
<el-table-column prop="fee" label="是否垫资" width="180"></el-table-column>
<el-table-column prop="fee" label="支出时间" width="180"></el-table-column>
<el-table-column prop="fee" label="支出金额(元)" width="180"></el-table-column>
<el-table-column prop="fee" label="已采购数量" width="180"></el-table-column>
<el-table-column prop="fee" label="本次采购数量" width="180"></el-table-column>
<el-table-column prop="fee" label="未采购数量" width="180"></el-table-column>
<el-table-column prop="amount" label="数量"></el-table-column>
<el-table-column prop="unit" label="单位"></el-table-column>
<el-table-column prop="price" label="预算单价" width="100"></el-table-column>
<el-table-column prop="taxRate" label="税率(%"></el-table-column>
<el-table-column prop="totalTaxInclude_" label="含税总金额(元)" width="120"></el-table-column>
<el-table-column prop="totalTaxExclude" label="不含税金额(元)" width="120"></el-table-column>
<el-table-column prop="totalTax" label="税金(元)" width="110"></el-table-column>
<el-table-column prop="isUnderwritten" label="是否垫资"></el-table-column>
<el-table-column prop="payTime" label="支出时间" width="160"></el-table-column>
<el-table-column prop="payAmount" label="支出金额(元)" width="120"></el-table-column>
<el-table-column prop="amountAlready" label="已采购数量" width="100"></el-table-column>
<el-table-column prop="amountCurrent" label="本次采购数量" width="180">
<template slot-scope="scope">
<el-input-number :precision="2" :step="0.1" :min="0" v-model="scope.row.amountCurrent"
:disabled="scope.row.amount - scope.row.amountAlready===0" size="mini"
:max="scope.row.amount - scope.row.amountAlready" controls-position="right">
</el-input-number>
</template>
</el-table-column>
<el-table-column prop="amountLeft" label="未采购数量" width="100">
<template slot-scope="scope">
<span>{{scope.row.amount - scope.row.amountAlready}}</span>
</template>
</el-table-column>
<el-table-column prop="fee" label="供应商名称"></el-table-column>
<el-table-column prop="fee" label="设备厂商名称"></el-table-column>
<el-table-column prop="fee" label="对应采购清单"></el-table-column>
<el-table-column prop="fee" label="规格型号"></el-table-column>
<el-table-column prop="fee" label="对应采购数目"></el-table-column>
<el-table-column prop="fee" label="采购单价"></el-table-column>
<el-table-column prop="fee" label="含税总金额(元)"></el-table-column>
<el-table-column prop="supplierName" label="供应商名称" width="200">
<template slot-scope="scope">
<el-input size="mini" placeholder="请输入供应商名称" v-model="scope.row.supplierName"></el-input>
</template>
</el-table-column>
<el-table-column prop="manufacturerName" label="设备厂商名称" width="200">
<template slot-scope="scope">
<el-input size="mini" placeholder="请输入设备厂商名称" v-model="scope.row.manufacturerName"></el-input>
</template>
</el-table-column>
<el-table-column prop="purchaseList" label="对应采购清单" width="200">
<template slot-scope="scope">
<el-input size="mini" placeholder="请输入对应采购清单" v-model="scope.row.purchaseList"></el-input>
</template>
</el-table-column>
<el-table-column prop="spec" label="规格型号" width="200">
<template slot-scope="scope">
<el-input size="mini" placeholder="请输入规格型号" v-model="scope.row.spec"></el-input>
</template>
</el-table-column>
<el-table-column prop="procurementAmount" label="对应采购数目" width="200">
<template slot-scope="scope">
<el-input-number size="mini" :precision="2" :step="0.1" :min="0"
v-model="scope.row.procurementAmount" controls-position="right"></el-input-number>
</template>
</el-table-column>
<el-table-column prop="procurementPrice" label="采购单价" width="200">
<template slot-scope="scope">
<el-input-number size="mini" :precision="2" :step="1" :min="0"
v-model="scope.row.procurementPrice" controls-position="right"></el-input-number>
</template>
</el-table-column>
<el-table-column prop="totalTaxInclude" label="含税总金额(元)" width="200">
<template slot-scope="scope">
<el-input-number size="mini" :precision="2" :step="0.1" :min="0"
v-model="scope.row.totalTaxInclude" controls-position="right"></el-input-number>
</template>
</el-table-column>
</el-table>
@ -517,6 +563,8 @@
const saleContractProcess = "saleContractProcess"
const saleContractDetail = "saleContractDetail"
const BUTTON = "btn"
const saleContract = "sale_contract"
const procurementContract = "procurement_contract"
const isEmpty = (obj) => {
return !obj || (obj.length && obj.length === 0)
@ -579,7 +627,14 @@
saveProcurementDetail() {
this.procurementDetailSelectorVisible = false
this.changeMode(procurementContractProcess)
this.processType = 'procurement_contract'
this.processType = procurementContract
this.procurementDetails = this.procurementDetails.filter(detail => {
if (detail.amountCurrent) {
return detail.amountCurrent !== 0;
}
return false
})
},
goToHome() {
@ -607,12 +662,12 @@
goToSaleContractProcess() {
this.changeMode(saleContractProcess)
this.processType = 'sale_contract'
this.processType = saleContract
},
goToProcurementContract() {
this.changeMode(procurementContractProcess)
this.processType = 'procurement_contract'
this.processType = procurementContract
},
goToContractDetail() {
@ -712,6 +767,7 @@
this.procurementDetails = procurementDetails.map(detail => ({
...detail, feeType: computeFeeType(detail.type),
totalTaxInclude_: detail.totalTaxInclude, totalTaxInclude: null, // 存在相同字段转换一下
isUnderwritten: detail.isUnderwritten === 1 ? "是" : "否"
}))
@ -764,9 +820,12 @@
this.$message.error("未上传附件");
return false
}
if (processType === saleContract) {
this.checkExpirationDate()
}
// 采购合同需要验证 供应商比选材料
if (processType === 'procurement_contract') {
if (processType === procurementContract) {
const { procurementMode } = processForm
// specify_purchase("指定采购"),
@ -869,8 +928,20 @@
}).finally(() => loading.close())
},
checkExpirationDate() {
const emptyRows = this.incomeDetails.filter(detail => isBlank(detail.expirationDate))
if (isNotEmpty(emptyRows)) {
const row = emptyRows[0]
this.$message.error("名称为:'" + row.name + "' 类别为:'" + row.type + "' 的质保期未填写")
return false
}
return true
},
submitToSaleContractProcess() {
this.goToSaleContractProcess()
// 做校验
if (this.checkExpirationDate()) {
this.goToSaleContractProcess()
}
},
handleRemove(file, fileList) {
@ -969,6 +1040,8 @@
return "新增销售合同流程"
case saleContractDetail:
return "销售合同清单明细"
case procurementContractDetail:
return "业务采购合同清单明细"
case procurementContractProcess:
return "新增业务采购合同流程"
}