From 2bfdffd1a43399cb9e38b87c3b9fe9126e6e2444 Mon Sep 17 00:00:00 2001
From: Harry Yang <i.take.today@gmail.com>
Date: Fri, 30 Dec 2022 10:26:38 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BC=96=E8=BE=91=E6=B5=81=E7=A8=8B=E5=89=8D?=
 =?UTF-8?q?=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../templates/admin/business/process-edit.ftl | 262 ++++++++++++++----
 1 file changed, 212 insertions(+), 50 deletions(-)

diff --git a/src/main/resources/templates/admin/business/process-edit.ftl b/src/main/resources/templates/admin/business/process-edit.ftl
index 043e07c..c4775ce 100644
--- a/src/main/resources/templates/admin/business/process-edit.ftl
+++ b/src/main/resources/templates/admin/business/process-edit.ftl
@@ -48,6 +48,14 @@
           display: none;
       }
 
+      .el-table .warning-row {
+          background: oldlace;
+      }
+
+      .el-table .child-row {
+          background: #f0f9eb;
+      }
+
   </style>
 
   <div class="admin-content" id="app">
@@ -87,18 +95,18 @@
               </el-form-item>
 
               <el-form-item label="项目类型" v-if="isSalesContractMode">
-                <span>{{processForm.projectType}}</span>
+                <span>{{processForm.projectTypeDesc}}</span>
               </el-form-item>
 
               <el-form-item label="合作类型">
-                <span>{{processForm.cooperationType}}</span>
+                <span>{{processForm.cooperationTypeDesc}}</span>
               </el-form-item>
 
             </div>
 
             <div>
 
-              <el-form-item label="申请部门" :rules="[{ required: true, message: '申请部门不能为空'}]" prop="applyDept">
+              <el-form-item label="申请部门" :rules="[{ required: true, message: '申请部门不能为空'}]" prop="applyDeptId">
                 <el-cascader :options="applyDeptSectorOptions" clearable v-model="processForm.applyDeptId"
                              :props="{ expandTrigger: 'hover', label:'name', value: 'id'}" @change="applyDeptSelected"></el-cascader>
               </el-form-item>
@@ -189,14 +197,14 @@
             </div>
 
             <div>
-              <el-form-item v-if="isSalesContractMode" label="收款条件" :rules="[{ required: true, message: '收款条件不能为空'}]"
-                            prop="paymentTerms">
+              <el-form-item v-if="isSalesContractMode" label="收款条件" prop="paymentTerms"
+                            :rules="[{ required: true, message: '收款条件不能为空'}]">
                 <el-input type="textarea" :autosize="{ minRows: 3, 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-form-item v-if="isProcurementContractMode" label="付款条件" prop="paymentTerms"
+                            :rules="[{ required: true, message: '付款条件不能为空'}]">
                 <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 10}" cols="90" maxlength="5000" show-word-limit
                           v-model="processForm.paymentTerms" placeholder="请输入付款条件（限制5000字）"></el-input>
               </el-form-item>
@@ -245,7 +253,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>
@@ -261,7 +269,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>
@@ -322,13 +330,13 @@
             <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">
@@ -346,42 +354,98 @@
 
         </div>
 
-          <#-- 选择 业务采购清单明细 -->
+          <#-- 业务采购清单明细 -->
 
-        <div class="am-u-sm-12 am-u-md-12" v-if="isProcurementContractDetailMode">
-          <el-table style="width: 100%" border>
+        <div v-cloak class="am-u-sm-12 am-u-md-12" v-if="isProcurementContractDetailMode">
+          <el-table border :data="procurementDetails" row-key="rowKey" default-expand-all :row-class-name="procurementDetailRowClassName">
+            <el-table-column type="index" :index="1" label="序号" fixed></el-table-column>
+            <el-table-column prop="feeType" label="费用项目" width="100" fixed></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">
+                <span v-if="scope.row.newRow">{{scope.row.parent.amountCurrent}}</span>
+                <el-input-number v-else :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-column width="49" fixed="right">
+              <template slot-scope="scope">
+
+                <el-popconfirm v-if="scope.row.newRow" title="确定删除吗？填写的表单将丢弃" @confirm="removeProcurementDetailRow(scope)">
+                  <el-button slot="reference" type="danger" icon="el-icon-delete" circle size="mini"></el-button>
+                </el-popconfirm>
+
+                <el-button v-else type="primary" icon="el-icon-plus" circle size="mini"
+                           @click="addProcurementDetailRow(scope)"></el-button>
+
+              </template>
+            </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-button type="primary" @click="saveProcurementContractDetail">保存并返回上一级</el-button>
           </el-row>
 
         </div>
@@ -433,6 +497,9 @@
         // 销售合同收入明细
         incomeDetails: [],
         supplierMaterialsForm: [],
+        procurementDetailsRowKey: 0,
+        procurementDetails: [],
+        filteredProcurementDetails: [],
       }
     }
 
@@ -450,8 +517,36 @@
       },
 
       goToProcurementContract() {
-        this.changeMode(saleContractProcess)
+        this.changeMode(procurementContractProcess)
+        this.processType = procurementContract
       },
+
+      /**
+       * 校验不通过提示
+       * @returns {boolean} 校验通过否
+       */
+      checkProcurementDetails() {
+        const emptyRows = this.procurementDetails.filter(detail => {
+          return isNotEmpty(procurementDetailProperties.filter(property => isBlank(detail[property])))
+        })
+        console.log(emptyRows)
+        if (isNotEmpty(emptyRows)) {
+          const row = emptyRows[0]
+          this.$message.error("合同清单明细 费用项目为：'" + row.feeType + "' 采购类别为：'" + row.category + "' 的数据未填写")
+          return false
+        }
+        return true
+      },
+      /**
+       * 保存 业务采购合同清单明细，并验证表单是否填写完整，
+       * 如果完整就到流程表单界面
+       */
+      saveProcurementContractDetail() {
+        if (this.checkProcurementDetails()) {
+          this.goToProcurementContract()
+        }
+      },
+
       goToContractDetail() {
         const { projectId } = this.processForm
         if (projectId) {
@@ -487,10 +582,10 @@
         fetch("${base}/process/" + id)
             .then(res => res.json())
             .then(data => {
-              const { incomeDetails, process, contract, ...form } = data
+              const { incomeDetails, process, contract, procurementDetails, attachments, ...form } = data
               // 转换数据
               // @formatter:off
-              const computeType = (type) => {
+              const computeType = type => {
                 switch (type) {
                   case 1: return '设备'
                   case 2: return '工程'
@@ -498,19 +593,49 @@
                   default: return '未知'
                 }
               }
+              const computeFeeType = type => {
+                switch (type) {
+                  case 1: return '设备'
+                  case 2: return '施工'
+                  case 3: return '服务'
+                  case 4: return '其他'
+                  default: return '未知'
+                }
+              }
               // @formatter:on
 
-              const applyDeptId = process.applyDept.split(',')
+              const applyDeptId = process.applyDeptId.split(',')
               this.initForm({ ...form, ...process, ...contract, applyDeptId })
               this.projectSelected = true
               this.processType = process.processType
-              this.incomeDetails = incomeDetails.map(detail => ({
+              this.incomeDetails = incomeDetails && incomeDetails.map(detail => ({
                 ...detail, type: computeType(detail.type)
               }))
-              this.fileList = JSON.parse(process.attachmentUri).map(item => ({
+
+              this.fileList = attachments.map(item => ({
                 name: item.name, url: item.uri
               }))
 
+              let rowKey = 0
+
+              function mapChildren(detail) {
+                const { purchaseDetails } = detail
+                return (purchaseDetails || []).map(purchase => ({
+                  ...purchase, ...detail, rowKey: rowKey++, feeType: computeFeeType(detail.type),
+                  totalTaxInclude_: detail.totalTaxInclude, totalTaxInclude: undefined, // 存在相同字段转换一下
+                  isUnderwritten: detail.isUnderwritten === 1 ? "是" : "否",
+                }))
+              }
+
+              this.procurementDetails = procurementDetails && procurementDetails.map(detail => ({
+                ...detail, feeType: computeFeeType(detail.type),
+                totalTaxInclude_: detail.totalTaxInclude, totalTaxInclude: undefined, // 存在相同字段转换一下
+                isUnderwritten: detail.isUnderwritten === 1 ? "是" : "否",
+                rowKey: rowKey++, children: mapChildren(detail)
+              }))
+
+              this.procurementDetailsRowKey = rowKey
+
               if (process.processType === 'sale_contract') {
                 this.changeMode(saleContractProcess)
               }
@@ -520,7 +645,7 @@
 
             })
             .catch(err => {
-              this.$message.error("项目'" + name + "'加载失败");
+              this.$message.error("项目加载失败");
             })
             .finally(() => loading.close())
       },
@@ -687,6 +812,41 @@
         this.supplierMaterialsForm.push({})
       },
 
+      addProcurementDetailRow(scope) {
+        const { row } = scope
+        const { children } = row
+        const newRow = {
+          ...row,
+          rowKey: this.procurementDetailsRowKey++,
+          newRow: true,
+          parent: row // 记录上一级元素，在删除的时候使用
+        }
+
+        delete newRow['children']
+        if (children) {
+          row['children'].push(newRow)
+        }
+        else {
+          row['children'] = [newRow]
+        }
+
+        scope.store.table.toggleRowExpansion(row, true)
+      },
+
+      removeProcurementDetailRow(scope) {
+        const { rowKey, parent } = scope.row
+        parent.children = parent.children.filter(child => child.rowKey !== rowKey)
+      },
+
+      // 区别子项
+      procurementDetailRowClassName({ row, rowIndex }) {
+        if (row.parent) {
+          // 有父项说明就是子项
+          return 'child-row';
+        }
+        return '';
+      },
+
       applyDeptSelected(value) {
         if (value.length === 0) {
           this.processForm['applyDept'] = null
@@ -759,7 +919,9 @@
             case saleContractProcess:
               return "编辑销售合同流程"
             case saleContractDetail:
-              return "销售合同清单明细"
+              return "编辑销售合同清单明细"
+            case procurementContractDetail:
+              return "编辑业务采购合同清单明细"
             case newBusinessProcurementContractProcess:
               return "编辑业务采购合同流程"
           }