优化 销售合同项目编号输入

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

@@ -56,6 +56,10 @@
       [v-cloak] {
           display: none;
       }
+
+      .supplierChoose .el-alert {
+          border-radius: unset;
+      }
   </style>
 
   <div class="admin-content" id="app">
@@ -78,19 +82,59 @@
 
         </div>
 
-          <#-- 业务采购流程 -->
-        <div class="am-modal am-modal-prompt" tabindex="-1" id="businessProcurementProcessModal">
-          <div class="am-modal-dialog">
-            <div class="am-modal-hd"><strong>项目编号</strong></div>
-            <div class="am-modal-bd">
-              <input type="text" class="am-modal-prompt-input" placeholder="请输入项目编号或名称，支持模糊查询"/>
-            </div>
-            <div class="am-modal-footer">
-              <span class="am-modal-btn" data-am-modal-cancel>取消</span>
-              <span class="am-modal-btn" data-am-modal-confirm>查询</span>
-            </div>
+          <#-- 业务采购流程项目选择 -->
+        <el-dialog title="请选择项目编号" :visible.sync="procurementProjectSelectorVisible" v-cloak width="40%">
+
+          <el-autocomplete v-model="processForm.projectNo" :fetch-suggestions="queryProject" clearable
+                           value-key="name" placeholder="请输入项目编号或名称，支持模糊查询" @select="handleSelectProject"
+                           @clear="clearProjectProcess" style="width: 100%;">
+            <template slot="prepend">项目编号</template>
+          </el-autocomplete>
+
+          <div slot="footer">
+            <el-button type="primary" @click="selectProcurementDetail">下一步</el-button>
           </div>
-        </div>
+        </el-dialog>
+
+        <el-dialog title="预算采购明细" :visible.sync="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>
+            <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="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="taxFee" label="税金（元）" width="110"></el-table-column>
+            <el-table-column prop="isUnderwritten" label="是否垫资"></el-table-column>
+            <el-table-column prop="payTime" label="支出时间"></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 size="mini" :precision="2" :step="0.1" :min="0"
+                                 v-model="scope.row.amountCurrent"></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>
+
+          <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="saveProcurementDetail">保存</el-button>
+          </div>
+
+        </el-dialog>
 
           <#-- 新增销售合同流程 -->
 
@@ -98,18 +142,25 @@
           <el-form :inline="true" ref="contractProcessForm" :model="processForm" label-position="right" label-width="110px">
 
             <div class="am-form-inline">
-              <el-tooltip :disabled="projectSelected" effect="light" content="项目编号或名称，支持模糊查询" placement="top-end">
+              <el-tooltip :disabled="projectSelected && hasText(processForm.projectNo)" effect="light" content="项目编号或名称，支持模糊查询"
+                          placement="top-end">
                 <el-form-item label="项目编号">
-                  <el-autocomplete v-model="processForm.projectNo" :fetch-suggestions="queryProject" clearable
-                                   value-key="name" placeholder="请输入项目编号或名称" @select="handleSelectProject"
-                                   @clear="clearProjectProcess">
+                  <el-autocomplete :disabled="projectSelected" clearable @clear="clearProjectProcess"
+                                   v-model="processForm.projectNo" :fetch-suggestions="queryProject"
+                                   value-key="name" placeholder="请输入项目编号或名称" @select="handleSelectProject">
+
+                    <el-popconfirm slot="append" title="确定重新选择项目吗？填写的表单将丢弃"
+                                   :disabled="!projectSelected" @confirm="clearProjectProcess">
+                      <el-button type="danger" slot="reference" icon="el-icon-delete" size="mini"></el-button>
+                    </el-popconfirm>
+
                   </el-autocomplete>
                 </el-form-item>
               </el-tooltip>
 
-              <el-tooltip :disabled="!projectSelected" effect="light" :content="projectTitle" placement="top-start">
+              <el-tooltip :disabled="!projectSelected" effect="light" :content="processForm.projectTitle" placement="top-start">
                 <el-form-item label="项目标题">
-                  <span v-if="projectSelected">{{projectTitle}}</span>
+                  <span v-if="projectSelected">{{processForm.projectTitle}}</span>
                   <span v-else>未选择项目</span>
                 </el-form-item>
               </el-tooltip>
@@ -180,7 +231,6 @@
                 <el-input placeholder="请输入采购合同名称" v-model="processForm.contractName"></el-input>
               </el-form-item>
 
-
               <el-form-item label="合同金额">
                 <span v-if="projectSelected">{{processForm.contractAmount}}元</span>
                 <span v-else>未选择项目</span>
@@ -485,16 +535,38 @@
         fileList: [],
         // 销售合同收入明细
         incomeDetails: [],
+        procurementDetails: [],
         processType: "",
+        procurementProjectSelectorVisible: false,
+        procurementDetailSelectorVisible: false
       }
     }
 
     const methods = {
+      isEmpty,
+      isBlank,
+      hasText,
       changeMode(mode) {
         this.mode = mode
       },
 
       newProcurementContractClick() {
+        // 先选择 项目 (打开对话框)
+        this.procurementProjectSelectorVisible = true
+      },
+      selectProcurementDetail() {
+        if (this.processForm.projectId) {
+          // 预算采购明细表 (打开对话框)
+          this.procurementProjectSelectorVisible = false
+          this.procurementDetailSelectorVisible = true
+        }
+        else {
+          this.$message.warning("项目还未选择")
+        }
+      },
+
+      saveProcurementDetail() {
+        this.procurementDetailSelectorVisible = false
         this.changeMode(procurementContractProcess)
         this.processType = 'procurement_contract'
       },
@@ -526,8 +598,10 @@
         this.changeMode(saleContractProcess)
         this.processType = 'sale_contract'
       },
+
       goToProcurementContract() {
-        this.changeMode(saleContractProcess)
+        this.changeMode(procurementContractProcess)
+        this.processType = 'procurement_contract'
       },
 
       goToContractDetail() {
@@ -549,22 +623,28 @@
       render(obj) {
         console.log(obj)
       },
-
+      computeProjectTitle(processForm) {
+        const { projectNo, projectName, applyPersonName, applyDate } = processForm
+        if (projectNo && projectName) {
+          return projectNo.trim() + "-" + projectName.trim() + "-" + applyPersonName + "-" + applyDate.split('-').join('')
+        }
+        return ""
+      },
       initForm(form) {
-        this.processForm = { ...form, sealTypes: [] }
+        this.processForm = { ...form, sealTypes: [], projectTitle: this.computeProjectTitle(form) }
       },
 
       queryProject(q, callback) {
         if (isBlank(q)) {
+          callback([])
           return
         }
         fetch("${base}/process/projects?q=" + q)
             .then(res => res.json())
             .then(data => {
               if (data.length === 0) {
-                callback([{
-                  name: '未搜索到结果'
-                }])
+                callback([])
+                this.$message.info('未搜索到结果');
               }
               else {
                 callback(data)
@@ -577,7 +657,7 @@
       handleSelectProject(selected) {
         const { id, name } = selected
         if (!id) {
-          this.initForm({})
+          this.initForm(this.processForm)
           return
         }
         const loading = this.$loading({
@@ -590,7 +670,7 @@
         fetch("${base}/process/projects/" + id)
             .then(res => res.json())
             .then(data => {
-              const { incomeDetails, ...form } = data
+              const { incomeDetails, procurementDetails, ...form } = data
               // 转换数据
               // @formatter:off
               const computeType = (type) => {
@@ -601,7 +681,17 @@
                   default: return '未知'
                 }
               }
-              // @formatter:on
+
+              const computeFeeType = (type) => {
+                switch (type) {
+                  case 1: return '设备'
+                  case 2: return '施工'
+                  case 3: return '服务'
+                  case 4: return '其他'
+                  default: return '未知'
+                }
+              }
+                  // @formatter:on
 
               this.initForm(form)
               this.projectSelected = true
@@ -609,6 +699,11 @@
                 ...detail, type: computeType(detail.type)
               }))
 
+              this.procurementDetails = procurementDetails.map(detail => ({
+                ...detail, feeType: computeFeeType(detail.type),
+                isUnderwritten: detail.isUnderwritten === 1 ? "是" : "否"
+              }))
+
               if (!form.projectNo || !form.projectName) {
                 this.$message.warning("当前选择的项目没有编号或者名称");
               }
@@ -622,6 +717,7 @@
         this.projectSelected = false
         this.initForm({})
         this.incomeDetails = []
+        this.procurementDetails = []
       },
 
       async saveDraft() {
@@ -724,7 +820,6 @@
           ...processForm,
           processType,
           applyDeptId,
-          projectTitle: this.projectTitle,
           attachments: fileList.map(file => ({
             uri: file.response.data.url,
             name: file.response.data.originName
@@ -834,13 +929,6 @@
       el: '#app',
       data,
       computed: {
-        projectTitle() {
-          const { projectNo, projectName, applyPersonName, applyDate } = this.processForm
-          if (projectNo && projectName) {
-            return projectNo.trim() + "-" + projectName.trim() + "-" + applyPersonName + "-" + applyDate.split('-').join('')
-          }
-          return ""
-        },
         isButtonMode() {
           return this.mode === BUTTON
         },
@@ -873,6 +961,7 @@
       methods,
 
       mounted() {
+        this.handleSelectProject({ id: 135 })
         this.applyDeptSectorOptions = JSON.parse('${applyDeptSectorOptions}')
       },
     })