合同流程 前端优化

解决闪屏
解决不填写完整内容，点击保存草稿不应该校验内容
解决【项目标题】：项目编号+项目名称+申请人+申请日期，自动生成
预期：申请日期显示应去掉连接符号

src/main/resources/templates/admin/business/process-completed.ftl

@@ -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({

src/main/resources/templates/admin/business/process-edit.ftl

@@ -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(',')
+              const applyDeptId = process.applyDept.split(',')
-              this.initForm({ ...form, ...process, ...contract, applyDept })
+              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,

src/main/resources/templates/admin/business/process-new.ftl

@@ -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,123 +624,137 @@
         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) {
-        this.$refs["contractProcessForm"].validate((valid) => {
+        const processForm = this.processForm
-          if (valid) {
+        const processType = this.processType
-            const fileList = this.fileList
+        const fileList = this.fileList
-            if (fileList.length === 0) {
-              this.$message.error("未上传附件");
-              return false
-            }
 
-            // 采购合同需要验证 供应商比选材料
+        if (!processForm.projectId) {
-            const processType = this.processType
+          this.$message.error("未选择项目");
-            const processForm = this.processForm
+          return false
-            if (processType === 'procurement_contract') {
+        }
-              const { procurementMode } = processForm
+        let validStatus = !needValid
+        if (needValid) {
+          this.$refs["contractProcessForm"].validate((valid) => {
+            if (valid) {
+              if (fileList.length === 0) {
+                this.$message.error("未上传附件");
+                return false
+              }
 
-              // specify_purchase("指定采购"),
+              // 采购合同需要验证 供应商比选材料
-              // simple_price_comparison("简单比价"),
+              if (processType === 'procurement_contract') {
-              // price_comparison("比价"),
+                const { procurementMode } = processForm
-              // competitive_evaluation("竞争性评估");
-              // 当“采购模式”为“指定采购”“简单比价”时，本模块为非必填模块，当为“比价”“竞争性评估”时，本模块为必填项（“备注”除外）
-              if (procurementMode === 'price_comparison'
-                  || procurementMode === 'competitive_evaluation') {
 
-                if (isEmpty(this.supplierMaterialsForm)) {
+                // specify_purchase("指定采购"),
-                  this.$message.error("供应商比选材料未填写")
+                // simple_price_comparison("简单比价"),
-                  return false
+                // price_comparison("比价"),
-                }
+                // competitive_evaluation("竞争性评估");
-                for (const item in this.supplierMaterialsForm) {
+                // 当“采购模式”为“指定采购”“简单比价”时，本模块为非必填模块，当为“比价”“竞争性评估”时，本模块为必填项（“备注”除外）
-                  if (isEmpty(Object.keys(item))) {
+                if (procurementMode === 'price_comparison'
+                    || procurementMode === 'competitive_evaluation') {
+
+                  if (isEmpty(this.supplierMaterialsForm)) {
                     this.$message.error("供应商比选材料未填写")
                     return false
                   }
-                  for (const [key, value] of Object.entries(item)) {
+                  for (const item in this.supplierMaterialsForm) {
-                    if (value) {
+                    if (isEmpty(Object.keys(item))) {
-                      if (typeof value === 'string') {
+                      this.$message.error("供应商比选材料未填写")
-                        if (isBlank(value)) {
+                      return false
+                    }
+                    for (const [key, value] of Object.entries(item)) {
+                      if (value) {
+                        if (typeof value === 'string') {
+                          if (isBlank(value)) {
+                            this.$message.error("有未填写的表单,请检查表单");
+                            return false
+                          }
+                        }
+                      }
+                      else {
+                        // 没有值
+                        if (key !== 'remark') {
                           this.$message.error("有未填写的表单,请检查表单");
-                          return false
                         }
                       }
                     }
-                    else {
-                      // 没有值
-                      if (key !== 'remark') {
-                        this.$message.error("有未填写的表单,请检查表单");
-                      }
-                    }
-                  }
 
+                  }
                 }
               }
-            }
 
-            if (!processForm.applyDeptId) {
+              if (!processForm.applyDeptId) {
-              this.$message.error("申请部门还未选择");
+                this.$message.error("申请部门还未选择");
+                return false
+              }
+              validStatus = true
+              return true;
+            }
+            else {
               return false
             }
+          })
 
-            // 提交
+        }
-            const loading = this.$loading({
+
-              lock: true,
+        if (!validStatus) {
-              text: '正在提交',
+          return false
-              spinner: 'el-icon-loading',
+        }
-              background: 'rgba(0, 0, 0, 0.7)'
+        // 提交
+        const loading = this.$loading({
+          lock: true,
+          text: processForm.status === 'draft' ? '正在保存草稿' : "正在提交",
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)'
+        })
+
+        const applyDeptId = processForm.applyDeptId?.join(',') // (逗号分割)
+        const form = {
+          ...processForm,
+          processType,
+          applyDeptId,
+          projectTitle: this.projectTitle,
+          attachments: fileList.map(file => ({
+            uri: file.response.data.url,
+            name: file.response.data.originName
+          })),
+          supplierMaterials: this.supplierMaterialsForm,
+          incomeDetails: this.incomeDetails.map(detail => ({
+            id: detail.id, expirationDate: detail.expirationDate
+          }))
+        }
+
+        fetch("${base}/process", {
+          method: 'POST', // or 'PUT'
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(form),
+        }).then(response => {
+          if (response.ok) {
+            this.$message({
+              showClose: true,
+              message: '提交成功',
+              type: 'success'
             })
-
-            const applyDeptId = processForm.applyDeptId.map(level => level.id).join(',') // (逗号分割)
-            const form = {
-              ...processForm,
-              processType,
-              applyDeptId,
-              projectTitle: this.projectTitle,
-              attachments: fileList.map(file => ({
-                uri: file.response.data.url,
-                name: file.response.data.originName
-              })),
-              supplierMaterials: this.supplierMaterialsForm,
-              incomeDetails: this.incomeDetails.map(detail => ({
-                id: detail.id, expirationDate: detail.expirationDate
-              }))
-            }
-
-            fetch("${base}/process", {
-              method: 'POST', // or 'PUT'
-              headers: {
-                'Content-Type': 'application/json',
-              },
-              body: JSON.stringify(form),
-            }).then(response => {
-              if (response.ok) {
-                this.$message({
-                  showClose: true,
-                  message: '提交成功',
-                  type: 'success'
-                })
-              }
-              else {
-                return Promise.reject("失败")
-              }
-            }).catch(err => {
-              this.$message.error("项目提交失败");
-            }).finally(() => loading.close())
           }
           else {
-            return false;
+            return Promise.reject("失败")
           }
-        })
+        }).catch(err => {
+          this.$message.error("项目提交失败");
+        }).finally(() => loading.close())
       },
 
       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 ""
         },

src/main/resources/templates/admin/business/process-review.ftl

@@ -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({