合同流程 优化表单填写和编辑表单

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

@@ -40,20 +40,29 @@
       .el-checkbox {
           margin-right: 10px;
       }
+
+      .supplierChoose {
+          margin-bottom: 20px;
+      }
+
+      [v-cloak] {
+          display: none;
+      }
+
   </style>
 
   <div class="admin-content" id="app">
     <div class="admin-content-body">
       <div class="am-cf am-padding">
         <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">业务应用</strong> /
-          <small>{{subTitle}}</small></div>
+          <small v-cloak>{{subTitle}}</small></div>
       </div>
 
-      <div class="am-g">
+      <div class="am-g" v-cloak>
           <#-- 新增销售合同流程 -->
 
-        <div class="am-u-sm-12 am-u-md-12" v-if="isSalesContractMode">
-          <el-form :inline="true" ref="saleContractProcessForm" :model="processForm" label-position="right" label-width="100px">
+        <div class="am-u-sm-12 am-u-md-12" v-if="isSalesContractMode || isProcurementContractMode">
+          <el-form :inline="true" ref="contractProcessForm" :model="processForm" label-position="right" label-width="110px">
 
             <div class="am-form-inline">
               <el-form-item label="项目编号">
@@ -218,30 +227,82 @@
 
             <div>
               <el-form-item label="合同清单明细">
-                <el-button type="text" @click="goToSaleContractDetail">详细清单</el-button>
+                <el-button type="text" @click="goToContractDetail">详细清单</el-button>
               </el-form-item>
             </div>
 
-            <div v-if="isProcurementContractMode">
-              供应商比选材料
-              <div class="am-u-sm-12 am-u-md-12" v-if="isProcurementContractMode">
-                <el-table style="width: 100%" border>
-                  <el-table-column type="index" :index="1" 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="备注"></el-table-column>
-                  <el-table-column prop="fee" label="附件"></el-table-column>
-
-                </el-table>
-              </div>
-            </div>
-
           </el-form>
 
+            <#-- 供应商比选材料 -->
+          <div class="am-u-sm-12 am-u-md-12 supplierChoose" v-if="isProcurementContractMode">
+            <el-alert title="供应商比选材料" type="success" center :closable="false"></el-alert>
+
+            <el-table style="width: 100%" border :data="supplierMaterialsForm" v-model="supplierMaterialsForm" empty-text="暂无">
+              <el-table-column type="index" :index="1" label="序号" fixed></el-table-column>
+
+              <el-table-column prop="companyName" label="公司名称" width="180" align="center">
+                <template slot-scope="scope">
+                  <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">
+                <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>
+                </template>
+              </el-table-column>
+              <el-table-column prop="serviceTerms" label="服务条款" width="180" align="center">
+                <template slot-scope="scope">
+                  <el-input size="mini" placeholder="请输入服务条款" v-model="scope.row.serviceTerms"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="paymentTerms" label="付款条件" align="center">
+                <template slot-scope="scope">
+                  <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">
+                <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>
+                </template>
+              </el-table-column>
+              <el-table-column prop="remark" label="备注" align="center">
+                <template slot-scope="scope">
+                    <#--
+                        <el-input type="textarea" size="mini" maxlength="100"
+                                       v-model="scope.row.remark" placeholder="请输入备注（限制100字）" cols="90"></el-input>
+                     -->
+                  <el-input size="mini" placeholder="请输入备注"
+                            v-model="scope.row.remark"></el-input>
+                </template>
+              </el-table-column>
+              <el-table-column prop="attachment" label="附件" align="center" width="150">
+                <template slot-scope="scope">
+                  <el-tag size="small" v-if="scope.row.attachment">
+                    <a :href="scope.row.attachment.uri">
+                      <i class="el-icon-document"></i> {{scope.row.attachment.name}}
+                    </a>
+                  </el-tag>
+                  <el-upload v-else class="upload-demo"
+                             action="${base}/file/upload"
+                             name="files[]"
+                             :on-remove="handleRemove"
+                             :before-remove="beforeRemove"
+                             :on-success="handleFileUploaded"
+                             :limit="1"
+                             size="mini">
+                    <el-button size="small" type="text">上传附件</el-button>
+                  </el-upload>
+
+                </template>
+              </el-table-column>
+
+            </el-table>
+
+            <el-button type="primary" icon="el-icon-plus" circle size="mini" @click="addSupplierRow"
+                       style="float: right;margin-top: 10px;"></el-button>
+          </div>
 
           <el-row>
             <el-button type="info" @click="backLastPage">返回上一级</el-button>
@@ -287,7 +348,7 @@
 
           <#-- 选择 业务采购清单明细 -->
 
-        <div class="am-u-sm-12 am-u-md-12" v-if="isProcurementContractMode">
+        <div 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>
@@ -317,6 +378,12 @@
             <el-table-column prop="fee" label="含税总金额（元）"></el-table-column>
 
           </el-table>
+
+          <el-row style="margin: 20px 0">
+            <el-button type="info" @click="goToProcurementContract">返回上一级</el-button>
+            <el-button type="primary" @click="goToProcurementContract">保存并返回上一级</el-button>
+          </el-row>
+
         </div>
 
       </div>
@@ -331,7 +398,8 @@
   <script>
 
     const newBusinessProcurementContractProcess = "newBusinessProcurementContractProcess"
-    const newBusinessProcurementContractDetail = "newBusinessProcurementContractDetail"
+    const procurementContractDetail = "procurementContractDetail"
+
     const saleContractProcess = "saleContractProcess"
     const saleContractDetail = "saleContractDetail"
     const BUTTON = "btn"
@@ -354,7 +422,7 @@
 
     const data = () => {
       return {
-        mode: "btn", // btn , newBusinessProcurementContractProcess
+        mode: "btn", // btn
         processForm: {
           sealTypes: [],
         },
@@ -364,7 +432,7 @@
         fileList: [],
         // 销售合同收入明细
         incomeDetails: [],
-        selectedDepts: []
+        supplierMaterialsForm: [],
       }
     }
 
@@ -373,10 +441,6 @@
         this.mode = mode
       },
 
-      businessProcurementProcessClick() {
-        const that = this
-      },
-
       backLastPage() {
         window.history.back();
       },
@@ -384,11 +448,21 @@
       goToSaleContractProcess() {
         this.changeMode(saleContractProcess)
       },
-      goToSaleContractDetail() {
+
+      goToProcurementContract() {
+        this.changeMode(saleContractProcess)
+      },
+      goToContractDetail() {
         const { projectId } = this.processForm
         if (projectId) {
+          // 选择了才能编辑详情
+          if (this.isSalesContractMode) {
             this.changeMode(saleContractDetail)
           }
+          else if (this.isProcurementContractMode) {
+            this.changeMode(procurementContractDetail)
+          }
+        }
         else {
           this.$message.warning("项目还未选择")
         }
@@ -400,7 +474,6 @@
 
       initForm(form) {
         this.processForm = { ...form }
-        console.log(form)
       },
 
       loadProject(id) {
@@ -438,11 +511,10 @@
                 name: item.name, url: item.uri
               }))
 
-
               if (process.processType === 'sale_contract') {
                 this.changeMode(saleContractProcess)
               }
-              else if (process.processType === 'business_procurement') {
+              else if (process.processType === 'procurement_contract') {
                 this.changeMode(newBusinessProcurementContractProcess)
               }
 
@@ -469,7 +541,7 @@
       },
 
       submit() {
-        this.$refs["saleContractProcessForm"].validate((valid) => {
+        this.$refs["contractProcessForm"].validate((valid) => {
           if (valid) {
             const fileList = this.fileList
             if (fileList.length === 0) {
@@ -603,6 +675,10 @@
         return index * 1;
       },
 
+      addSupplierRow() {
+        this.supplierMaterialsForm.push({})
+      },
+
       applyDeptSelected(value) {
         if (value.length === 0) {
           this.processForm['applyDept'] = null
@@ -634,9 +710,8 @@
           }
         }
 
-        this.selectedDepts = leveled.map(level => level.id)
+        // applyDeptId 提交时处理
         this.processForm['applyDept'] = leveled.map(level => level.name).join(',') // (逗号分割)
-        this.processForm['applyDeptId'] = leveled.map(level => level.id).join(',') // (逗号分割)
         this.processForm['applyDeptLeaderId'] = selected.leaderId
         this.processForm['applyDeptLeaderName'] = selected.leaderName
       },
@@ -660,6 +735,9 @@
         isProcurementContractMode() {
           return this.mode === newBusinessProcurementContractProcess
         },
+        isProcurementContractDetailMode() {
+          return this.mode === procurementContractDetail
+        },
         isSalesContractMode() {
           return this.mode === saleContractProcess
         },
@@ -669,7 +747,7 @@
         subTitle() {
           switch (this.mode) {
             case BUTTON:
-              return "新增流程"
+              return "编辑流程"
             case saleContractProcess:
               return "编辑销售合同流程"
             case saleContractDetail:

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

@@ -401,7 +401,7 @@
 
           <#-- 选择 业务采购清单明细 -->
 
-        <div v-cloak class="am-u-sm-12 am-u-md-12" v-if="isProcurementContractDetailMode">
+        <div 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>
@@ -431,6 +431,12 @@
             <el-table-column prop="fee" label="含税总金额（元）"></el-table-column>
 
           </el-table>
+
+          <el-row style="margin: 20px 0">
+            <el-button type="info" @click="goToProcurementContract">返回上一级</el-button>
+            <el-button type="primary" @click="goToProcurementContract">保存并返回上一级</el-button>
+          </el-row>
+
         </div>
 
       </div>
@@ -493,20 +499,47 @@
       },
 
       goToHome() {
+        // 判断是否已填写了
+        if (Object.keys(this.processForm).length > 1) {
+          this.$confirm('您确认要返回上一级吗 返回后填写的表单将重置', '返回上一级', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(() => {
+            this.projectSelected = false
+            this.initForm({})
             this.changeMode(BUTTON)
+          }).catch(() => {
+            this.$message({
+              type: 'info',
+              message: '已取消'
+            });
+          });
+        }
+        else {
+          this.changeMode(BUTTON)
+        }
       },
 
       goToSaleContractProcess() {
         this.changeMode(saleContractProcess)
         this.processType = 'sale_contract'
       },
+      goToProcurementContract() {
+        this.changeMode(saleContractProcess)
+      },
 
       goToContractDetail() {
-        // TODO 分情况展示
         const { projectId } = this.processForm
         if (projectId) {
+          // 选择了才能编辑详情
+          if (this.isSalesContractMode) {
             this.changeMode(saleContractDetail)
           }
+          else if (this.isProcurementContractMode) {
+            this.changeMode(procurementContractDetail)
+          }
+        }
         else {
           this.$message.warning("项目还未选择")
         }
@@ -623,7 +656,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') {