合同流程 前端优化

解决闪屏
解决不填写完整内容,点击保存草稿不应该校验内容
解决【项目标题】:项目编号+项目名称+申请人+申请日期,自动生成
预期:申请日期显示应去掉连接符号
master
Harry Yang 2022-12-27 18:08:57 +08:00
parent b87cc40094
commit f08212289e
4 changed files with 153 additions and 114 deletions

View File

@ -23,6 +23,10 @@
.el-radio-button__inner, .el-radio-group {
line-height: unset;
}
[v-cloak] {
display: none;
}
</style>
<div class="admin-content" id="app">
@ -32,9 +36,9 @@
<small>已办流程</small></div>
</div>
<div class="am-g">
<div class="am-g" v-cloak>
<div class="am-u-sm-12 am-u-md-12">
<el-form :inline="true" ref="queryForm" :model="queryForm" label-position="right">
<el-form :inline="true" ref="queryForm" :model="queryForm" label-position="right" @change="resetPageParams">
<div>
<el-form-item label="标题">
@ -126,7 +130,7 @@
</div>
</div>
<el-dialog title="审核详情" :visible.sync="auditDetailVisible">
<el-dialog title="审核详情" :visible.sync="auditDetailVisible" v-cloak>
<el-timeline>
<el-timeline-item
v-for="(item, index) in auditDetails"
@ -371,6 +375,10 @@
this.queryTable()
},
resetPageParams() {
// 表单条件变了,如果分页参数不变,可能查询不到数据
this.page.current = 1
}
}
new Vue({

View File

@ -112,7 +112,8 @@
<span>{{processForm.applyDeptLeaderName}}</span>
</el-form-item>
<el-form-item label="申请人电话" :rules="[{ required: true, message: '申请人电话不能为空'}]" prop="applyPersonPhone">
<el-form-item v-if="isSalesContractMode" label="申请人电话" prop="applyPersonPhone"
:rules="[{ required: true, message: '申请人电话不能为空'}]">
<el-input placeholder="请输入内容" v-model="processForm.applyPersonPhone"></el-input>
</el-form-item>
@ -500,8 +501,8 @@
}
// @formatter:on
const applyDept = process.applyDept.split(',')
this.initForm({ ...form, ...process, ...contract, applyDept })
const applyDeptId = process.applyDept.split(',')
this.initForm({ ...form, ...process, ...contract, applyDeptId })
this.projectSelected = true
this.processType = process.processType
this.incomeDetails = incomeDetails.map(detail => ({
@ -532,26 +533,26 @@
saveDraft() {
this.processForm.status = 'draft'
this.submit()
this.submit(false)
},
submitForm() {
this.processForm.status = 'to_be_audit'
this.submit()
this.submit(true)
},
submit() {
submit(needValid) {
this.$refs["contractProcessForm"].validate((valid) => {
if (valid) {
if (valid || !needValid) {
const fileList = this.fileList
if (fileList.length === 0) {
if (needValid && fileList.length === 0) {
this.$message.error("未上传附件");
return false
}
const processType = this.processType
const processForm = this.processForm
if (processType === 'procurement_contract') {
if (needValid && processType === 'procurement_contract') {
const { procurementMode } = processForm
// specify_purchase("指定采购"),
@ -562,7 +563,15 @@
if (procurementMode === 'price_comparison'
|| procurementMode === 'competitive_evaluation') {
if (isEmpty(this.supplierMaterialsForm)) {
this.$message.error("供应商比选材料未填写")
return false
}
for (const item in this.supplierMaterialsForm) {
if (isEmpty(Object.keys(item))) {
this.$message.error("供应商比选材料未填写")
return false
}
for (const [key, value] of Object.entries(item)) {
if (value) {
if (typeof value === 'string') {
@ -584,19 +593,19 @@
}
}
if (!processForm.applyDeptId) {
if (needValid && !processForm.applyDeptId) {
this.$message.error("申请部门还未选择");
return false
}
const loading = this.$loading({
lock: true,
text: '正在提交',
text: processForm.status === 'draft' ? '正在保存草稿' : "正在提交",
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
const applyDeptId = processForm.applyDeptId.map(level => level.id).join(',') // (逗号分割)
const applyDeptId = processForm.applyDeptId.join(',') // (逗号分割)
const form = {
...this.processForm,

View File

@ -157,7 +157,8 @@
<span v-else>未选择部门</span>
</el-form-item>
<el-form-item label="申请人电话" :rules="[{ required: true, message: '申请人电话不能为空'}]" prop="applyPersonPhone">
<el-form-item v-if="isSalesContractMode" label="申请人电话" prop="applyPersonPhone"
:rules="[{ required: true, message: '申请人电话不能为空'}]">
<el-input placeholder="请输入内容" v-model="processForm.applyPersonPhone"></el-input>
</el-form-item>
@ -297,7 +298,7 @@
<el-input size="mini" placeholder="请输入公司名称" v-model="scope.row.companyName"></el-input>
</template>
</el-table-column>
<el-table-column prop="totalAmount" label="合计金额" width="180" align="center">
<el-table-column prop="totalAmount" label="合计金额" width="160" align="center">
<template slot-scope="scope">
<el-input-number size="mini" :precision="2" :step="0.1" :max="100" :min="0"
v-model="scope.row.totalAmount"></el-input-number>
@ -313,7 +314,7 @@
<el-input size="mini" placeholder="请输入付款条件" v-model="scope.row.paymentTerms"></el-input>
</template>
</el-table-column>
<el-table-column prop="taxRate" label="税率(%" width="180" align="center">
<el-table-column prop="taxRate" label="税率(%" width="160" align="center">
<template slot-scope="scope">
<el-input-number size="mini" :precision="2" :step="0.1" :max="100" :min="0"
v-model="scope.row.taxRate"></el-input-number>
@ -401,7 +402,7 @@
<#-- 选择 业务采购清单明细 -->
<div class="am-u-sm-12 am-u-md-12" v-if="isProcurementContractDetailMode">
<div v-cloak class="am-u-sm-12 am-u-md-12" v-if="isProcurementContractDetailMode">
<el-table style="width: 100%" border>
<el-table-column prop="fee" label="费用项目" width="180"></el-table-column>
@ -623,28 +624,35 @@
this.incomeDetails = []
},
saveDraft() {
async saveDraft() {
this.processForm.status = 'draft'
this.submit()
await this.submit(false)
},
submitForm() {
async submitForm() {
this.processForm.status = 'to_be_audit'
this.submit()
await this.submit(true)
},
submit() {
async submit(needValid) {
const processForm = this.processForm
const processType = this.processType
const fileList = this.fileList
if (!processForm.projectId) {
this.$message.error("未选择项目");
return false
}
let validStatus = !needValid
if (needValid) {
this.$refs["contractProcessForm"].validate((valid) => {
if (valid) {
const fileList = this.fileList
if (fileList.length === 0) {
this.$message.error("未上传附件");
return false
}
// 采购合同需要验证 供应商比选材料
const processType = this.processType
const processForm = this.processForm
if (processType === 'procurement_contract') {
const { procurementMode } = processForm
@ -690,16 +698,28 @@
this.$message.error("申请部门还未选择");
return false
}
validStatus = true
return true;
}
else {
return false
}
})
}
if (!validStatus) {
return false
}
// 提交
const loading = this.$loading({
lock: true,
text: '正在提交',
text: processForm.status === 'draft' ? '正在保存草稿' : "正在提交",
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
})
const applyDeptId = processForm.applyDeptId.map(level => level.id).join(',') // (逗号分割)
const applyDeptId = processForm.applyDeptId?.join(',') // (逗号分割)
const form = {
...processForm,
processType,
@ -735,11 +755,6 @@
}).catch(err => {
this.$message.error("项目提交失败");
}).finally(() => loading.close())
}
else {
return false;
}
})
},
submitToSaleContractProcess() {
@ -822,7 +837,7 @@
projectTitle() {
const { projectNo, projectName, applyPersonName, applyDate } = this.processForm
if (projectNo && projectName) {
return projectNo.trim() + "-" + projectName.trim() + "-" + applyPersonName + "-" + applyDate
return projectNo.trim() + "-" + projectName.trim() + "-" + applyPersonName + "-" + applyDate.split('-').join('')
}
return ""
},

View File

@ -23,6 +23,10 @@
.el-radio-button__inner, .el-radio-group {
line-height: unset;
}
[v-cloak] {
display: none;
}
</style>
<div class="admin-content" id="app">
@ -32,9 +36,9 @@
<small>待我审核</small></div>
</div>
<div class="am-g">
<div class="am-g" v-cloak>
<div class="am-u-sm-12 am-u-md-12">
<el-form :inline="true" ref="queryForm" :model="queryForm" label-position="right">
<el-form :inline="true" ref="queryForm" :model="queryForm" label-position="right" @change="resetPageParams">
<div>
<el-form-item label="标题">
@ -105,7 +109,7 @@
</div>
</div>
<el-dialog title="审核" :visible.sync="auditFormVisible">
<el-dialog title="审核" :visible.sync="auditFormVisible" v-cloak>
<el-form ref="auditForm" :model="auditForm" label-width="80px">
<el-form-item prop="processStatus" label="审核" :rules="[{ required: true, message: '还没审核'}]">
@ -277,7 +281,10 @@
this.page.current = val
this.queryTable()
},
resetPageParams() {
// 表单条件变了,如果分页参数不变,可能查询不到数据
this.page.current = 1
}
}
new Vue({