详情界面可以审核

src/main/java/cn/palmte/work/controller/backend/ProcessController.java

@@ -175,7 +175,7 @@ public class ProcessController {
   }
 
   @GetMapping("/detail/{id}")
-  public String detail(@PathVariable int id, Model model) {
+  public String detail(@PathVariable int id, Model model, @RequestParam(defaultValue = "false") boolean forAudit) {
     model.addAttribute("processId", id);
 
     ProjectProcess process = repository.findOne(id);
@@ -190,6 +190,7 @@ public class ProcessController {
     model.addAttribute("isPrepaid", isPrepaid(project));
     BigDecimal repaidAmount = getRepaidAmount(id);
     model.addAttribute("repaidAmount", repaidAmount);
+    model.addAttribute("forAudit", forAudit);
 
     if (process.getProcessType() != null) {
       switch (process.getProcessType()) {
@@ -494,6 +495,8 @@ public class ProcessController {
     entity.setSealTypes(SealTypeArray.of(form.getSealTypes()));
     entity.setAttachmentUri(JSON.toJSONString(form.getAttachments()));
 
+    entity.setRemark(form.getRemark());
+    entity.setStatus(form.getStatus());
     entity.setApplyDept(form.getApplyDept());
     entity.setApplyDeptId(form.getApplyDeptId());
     entity.setApplyDeptLeaderId(form.getApplyDeptLeaderId());

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

@@ -86,8 +86,24 @@
           <el-table border :data="page.data">
             <el-table-column type="index" :index="1" label="序号" fixed></el-table-column>
             <el-table-column prop="projectNo" label="项目编号" fixed width="80"></el-table-column>
-            <el-table-column prop="projectTitle" label="标题" width="350"></el-table-column>
-            <el-table-column prop="contractNo" label="合同编号" width="80"></el-table-column>
+            <el-table-column prop="projectTitle" label="标题" width="350">
+              <template slot-scope="scope">
+                <el-popover placement="top-start" title="项目标题" width="380" trigger="hover">
+                  <el-button slot="reference" type="text" @click="showDetail(scope.row, scope)">
+                    {{scope.row.projectTitle|ellipsis(25)}}
+                  </el-button>
+                  <span>{{scope.row.projectTitle}}</span>
+                </el-popover>
+              </template>
+            </el-table-column>
+            <el-table-column prop="contractNo" label="合同编号" width="80">
+              <template slot-scope="scope">
+                <el-popover placement="top-end" title="合同编号" width="200" trigger="hover">
+                  <span slot="reference">{{scope.row.contractNo|ellipsis}}</span>
+                  <span>{{scope.row.contractNo}}</span>
+                </el-popover>
+              </template>
+            </el-table-column>
             <el-table-column prop="processType" label="流程类型" width="100">
               <template slot-scope="scope">
                 <span>{{scope.row.processType | processType}}</span>
@@ -424,6 +440,13 @@
         this.queryTable()
       },
       filters: {
+        ellipsis(value, limit = 5) {
+          if (!value) return ''
+          if (value.length > limit) {
+            return value.slice(0, limit) + '...'
+          }
+          return value
+        },
         processStatus: function (val) {
           switch (val) {
             case 'draft':

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

@@ -20,6 +20,10 @@
           height: 60px !important;
       }
 
+      .el-radio-button__inner, .el-radio-group {
+          line-height: unset;
+      }
+
       .el-upload-list__item-name [class^="el-icon"] {
           height: unset;
       }
@@ -32,6 +36,10 @@
           display: none;
       }
 
+      .popover-overflow {
+          overflow-y: scroll;
+          max-height: 400px
+      }
   </style>
 
   <div class="admin-content" id="app" v-cloak>
@@ -44,7 +52,7 @@
 
       <div class="am-u-sm-12 am-u-md-12">
 
-        <el-descriptions title="${process.processType.description}详情">
+        <el-descriptions title="${process.processType.description}详情" v-cloak>
           <el-descriptions-item label="项目编号">{{process.projectNo}}</el-descriptions-item>
           <el-descriptions-item label="项目标题">{{process.projectTitle}}</el-descriptions-item>
           <el-descriptions-item label="申请时间">{{process.applyDate}}</el-descriptions-item>
@@ -56,18 +64,32 @@
           <el-descriptions-item label="申请部门领导">{{process.applyDeptLeaderName}}</el-descriptions-item>
           <el-descriptions-item label="申请人电话" v-if="isSaleContract">{{contract.applyPersonPhone}}</el-descriptions-item>
 
-          <el-descriptions-item label="合同编号">{{process.contractNo}}</el-descriptions-item>
-          <el-descriptions-item label="合同名称">{{process.contractName}}</el-descriptions-item>
+          <el-descriptions-item label="合同编号">
+            <el-popover placement="top-start" title="合同编号" width="400" trigger="hover" :content="process.contractNo">
+              <span slot="reference">{{process.contractNo|ellipsis}}</span>
+            </el-popover>
+          </el-descriptions-item>
+          <el-descriptions-item label="合同名称">
+            <el-popover placement="top-start" title="合同名称" width="400" trigger="hover" :content="process.contractName">
+              <span slot="reference">{{process.contractName|ellipsis}}</span>
+            </el-popover>
+          </el-descriptions-item>
           <el-descriptions-item label="合同金额">{{project.contractAmount}}</el-descriptions-item>
 
-          <el-descriptions-item label="客户名称" v-if="isSaleContract">{{contract.clientName}}</el-descriptions-item>
+          <el-descriptions-item label="客户名称" v-if="isSaleContract">
+            <el-popover placement="top-start" title="备客户名称注" width="400" trigger="hover" :content="contract.clientName">
+              <span slot="reference">{{contract.clientName|ellipsis}}</span>
+            </el-popover>
+          </el-descriptions-item>
           <el-descriptions-item label="供应商" v-if="isProcurementContract">{{contract.supplierName}}</el-descriptions-item>
           <el-descriptions-item label="最终用户名称">{{project.terminalCustomer}}</el-descriptions-item>
 
           <el-descriptions-item label="用印类型">
-              <#list process.sealTypes.list as item>
-                <el-tag size="small">${item.description}</el-tag>
-              </#list>
+            <div style="overflow-x: auto;max-width: 400px; display:flex;">
+                <#list process.sealTypes.list as item>
+                  <el-tag size="small">${item.description}</el-tag>
+                </#list>
+            </div>
           </el-descriptions-item>
 
           <el-descriptions-item label="税率">{{process.taxRate}}%</el-descriptions-item>
@@ -75,9 +97,24 @@
           <el-descriptions-item label="垫资金额">${repaidAmount}元</el-descriptions-item>
           <el-descriptions-item label="预算毛利率">${project.grossProfitMargin}</el-descriptions-item>
 
-          <el-descriptions-item label="收款条件" v-if="isSaleContract">{{contract.paymentTerms}}</el-descriptions-item>
-          <el-descriptions-item label="付款条件" v-if="isProcurementContract">{{contract.paymentTerms}}</el-descriptions-item>
-          <el-descriptions-item label="备注">{{process.remark}}</el-descriptions-item>
+          <el-descriptions-item label="收款条件" v-if="isSaleContract">
+            <el-popover placement="top-start" title="收款条件" width="400" trigger="hover">
+              <span slot="reference">{{contract.paymentTerms|ellipsis}}</span>
+              <div class="popover-overflow">{{contract.paymentTerms}}</div>
+            </el-popover>
+          </el-descriptions-item>
+          <el-descriptions-item label="付款条件" v-if="isProcurementContract">
+            <el-popover placement="top-start" title="付款条件" width="400" trigger="hover">
+              <span slot="reference">{{contract.paymentTerms|ellipsis}}</span>
+              <div class="popover-overflow">{{contract.paymentTerms}}</div>
+            </el-popover>
+          </el-descriptions-item>
+          <el-descriptions-item label="备注">
+            <el-popover placement="top-end" title="备注" width="400" trigger="hover">
+              <span slot="reference">{{process.remark|ellipsis}}</span>
+              <div class="popover-overflow">{{process.remark}}</div>
+            </el-popover>
+          </el-descriptions-item>
           <el-descriptions-item label="附件">
             <el-tag size="small" v-for="attachment in attachments">
               <a :href="attachment.uri">
@@ -174,11 +211,37 @@
 
         </div>
 
-
-        <el-row>
-          <el-button style="margin-top: 30px" type="info" @click="backLastPage">返回上一级</el-button>
+        <el-row style="margin-top: 30px">
+          <el-button type="info" @click="backLastPage">返回上一级</el-button>
+            <#if forAudit>
+              <el-button type="primary" @click="auditProcess">审核</el-button>
+            </#if>
         </el-row>
 
+        <el-dialog title="审核" :visible.sync="auditFormVisible" v-cloak destroy-on-close>
+          <el-form ref="auditForm" :model="auditForm" label-width="80px">
+
+            <el-form-item prop="processStatus" label="审核" :rules="[{ required: true, message: '还没审核'}]">
+              <el-radio-group v-model="auditForm.processStatus">
+                <el-radio label="audit_passed">审核通过</el-radio>
+                <el-radio label="audit_not_passed">审核不通过</el-radio>
+              </el-radio-group>
+            </el-form-item>
+
+            <el-form-item prop="auditOpinion" label="审核意见" :rules="[{ required: true, message: '审核意见不能为空'}]">
+              <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 10}"
+                        maxlength="5000" v-model="auditForm.auditOpinion"
+                        placeholder="请输入审核意见" cols="90"></el-input>
+            </el-form-item>
+
+          </el-form>
+
+          <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="submitAudit">提交</el-button>
+          </div>
+
+        </el-dialog>
+
       </div>
 
     </div>
@@ -208,10 +271,29 @@
       return !isBlank(obj)
     }
 
+    function checkStatus(response) {
+      if (response.status >= 200 && response.status < 300) {
+        return response
+      }
+      else {
+        const error = new Error(response.statusText);
+        error.response = response
+        throw error
+      }
+    }
+
+    function parseJSON(response) {
+      return response.json()
+    }
+
     const data = () => {
       return {
         process: {},
         project: {},
+        auditForm: {
+          processStatus: null
+        },
+        auditFormVisible: false,
         supplierMaterials: []
       }
     }
@@ -229,7 +311,8 @@
         })
 
         fetch("${base}/process/" + id)
-            .then(res => res.json())
+            .then(checkStatus)
+            .then(parseJSON)
             .then(data => {
               const {
                 attachments, processId, isPrepaid, repaidAmount,
@@ -273,19 +356,81 @@
               this.processId = processId
               this.projectType = projectType
               this.cooperationType = cooperationType
-              this.supplierMaterials = supplierMaterials.map(item => ({
+              this.supplierMaterials = supplierMaterials && supplierMaterials.map(item => ({
                 ...item, attachment: mapAttachment(item.attachment)
               }))
               this.procurementDetails = procurementDetails
 
               this.attachments = attachments
             })
-            .catch(err => {
-              this.$message.error("项目加载失败");
+            .catch(({ response }) => {
+              if (response) {
+                parseJSON(response)
+                    .then(json => {
+                      this.$message.error(json.message || "项目加载失败")
+                    })
+              }
+              else {
+                this.$message.error("项目加载失败");
+              }
             })
             .finally(() => loading.close())
       },
 
+      auditProcess(row, scope) {
+        this.auditForm = {
+          processId: row.id,
+          processStatus: null
+        }
+        this.auditFormVisible = true
+      },
+
+      submitAudit() {
+        this.$refs["auditForm"].validate((valid) => {
+          if (valid) {
+            const loading = this.$loading({
+              lock: true,
+              text: '正在审核',
+              spinner: 'el-icon-loading',
+              background: 'rgba(0, 0, 0, 0.7)'
+            })
+
+            const form = this.auditForm
+
+            fetch("${base}/process/audit", {
+              method: 'POST', // or 'PUT'
+              headers: {
+                'Content-Type': 'application/json',
+              },
+              body: JSON.stringify(form),
+            }).then(checkStatus).then(parseJSON).then(data => {
+              // 关闭对话框
+              this.auditFormVisible = false
+              this.queryTable()
+              this.$message({
+                showClose: true,
+                message: '审核成功',
+                type: 'success'
+              })
+            }).catch(({ response }) => {
+              if (response) {
+                parseJSON(response)
+                    .then(json => {
+                      this.$message.error(json.message || "审核失败")
+                    })
+              }
+              else {
+                this.$message.error("审核失败")
+              }
+            }).finally(() => loading.close())
+          }
+          else {
+            return false;
+          }
+        })
+
+      },
+
     }
 
     new Vue({
@@ -304,6 +449,16 @@
         const processId = ${processId}
         this.loadProject(processId)
       },
+      filters: {
+        ellipsis(value, limit = 25) {
+          if (!value) return ''
+          if (value.length > limit) {
+            return value.slice(0, limit) + '...'
+          }
+          return value
+        },
+
+      }
     })
 
   </script>

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

@@ -76,8 +76,26 @@
           <el-table border :data="page.data">
             <el-table-column type="index" :index="1" label="序号" fixed></el-table-column>
             <el-table-column prop="projectNo" label="项目编号" fixed width="80"></el-table-column>
-            <el-table-column prop="projectTitle" label="标题" width="350"></el-table-column>
-            <el-table-column prop="contractNo" label="合同编号" width="80"></el-table-column>
+            <el-table-column prop="projectTitle" label="标题" width="350">
+              <template slot-scope="scope">
+                <el-popover placement="top-start" title="项目标题" width="380" trigger="hover">
+                  <el-button slot="reference" type="text" @click="showDetail(scope.row, scope)">
+                    {{scope.row.projectTitle|ellipsis(25)}}
+                  </el-button>
+                  <span>{{scope.row.projectTitle}}</span>
+                </el-popover>
+              </template>
+            </el-table-column>
+
+            <el-table-column prop="contractNo" label="合同编号" width="80">
+              <template slot-scope="scope">
+                <el-popover placement="top-end" title="合同编号" width="200" trigger="hover">
+                  <span slot="reference">{{scope.row.contractNo|ellipsis}}</span>
+                  <span>{{scope.row.contractNo}}</span>
+                </el-popover>
+              </template>
+            </el-table-column>
+
             <el-table-column prop="processType" label="流程类型" width="100">
               <template slot-scope="scope">
                 <span>{{scope.row.processType | processType}}</span>
@@ -194,7 +212,7 @@
       showDetail(row, scope) {
         console.log(row)
         console.log(scope)
-        window.location = "${base}/process/detail/" + row.id;
+        window.location = "${base}/process/detail/" + row.id + "?forAudit=true";
       },
       auditProcess(row, scope) {
         this.auditForm = {
@@ -346,6 +364,13 @@
         this.queryTable()
       },
       filters: {
+        ellipsis(value, limit = 5) {
+          if (!value) return ''
+          if (value.length > limit) {
+            return value.slice(0, limit) + '...'
+          }
+          return value
+        },
         processStatus: function (val) {
           switch (val) {
             case 'draft':