详情页改造

src/views/modules/common/upload-component.vue

@@ -1,7 +1,7 @@
 <template>
     <section>
       <el-col :span="24">
-        <div class="title"><span style="color: red">*</span> {{title}}</div>
+        <div v-show="displayTitle" class="title"><span style="color: red">*</span> {{title}}</div>
         <el-upload
           :disabled="display"
           class="upload-demo"
@@ -56,6 +56,10 @@
       fileObjList: {
         type: Array,
         default: () => []
+      },
+      displayTitle: {
+        type: Boolean,
+        default: true
       }
     },
     watch: {
@@ -108,9 +112,7 @@
           return
         }
         let ext = getFileExt(file.name)
-        console.log('ext = ' + ext)
         if (ext === 'jpg' || ext === 'jpeg' || ext === 'png' || ext === 'gif') {
-          console.log('ext is a picture ')
           this.previewPath = downloadUrl + file.url
           this.previewName = file.name
           this.previewVisible = true

src/views/modules/cus/communicate-detail.vue

@@ -12,6 +12,9 @@
         <e-desc-item label="沟通类别">{{dataForm.coType}}</e-desc-item>
         <e-desc-item label="备注说明" span="2">{{dataForm.notes}}</e-desc-item>
       </e-desc>
+      <e-desc title="沟通扫描件">
+        <upload-component :display="true" :display-title="false" :accept="'*'" :file-obj-list="fileList"/>
+      </e-desc>
       <e-desc title="订单产品明细">
         <el-table
           :data="cusRCommProductVOS"
@@ -80,10 +83,11 @@
   import EDesc from '../common/e-desc'
   import EDescItem from '../common/e-desc-item'
   import { getCoDetail } from '@/api/cus'
+  import uploadComponent from '../common/upload-component'
   export default {
     name: 'communicate-detail',
     components: {
-      EDesc, EDescItem
+      EDesc, EDescItem, uploadComponent
     },
     data () {
       return {
@@ -99,6 +103,7 @@
         this.visible = true
         this.id = id || 0
         this.cusRCommProductVOS = []
+        this.fileList = []
         this.getDetails()
       },
       getDetails () {

src/views/modules/cus/contract-detail.vue

@@ -0,0 +1,112 @@
+<template>
+  <el-dialog
+    title="查看"
+    width="70%"
+    :close-on-click-modal="false"
+    :visible.sync="visible">
+    <div style="margin-left: 20px;margin-right: 20px">
+      <!-- 工作流 -->
+      <div v-show="dataForm.workFlowBusinessExt">
+        <el-steps :active="dataForm.workFlowBusinessExt?dataForm.workFlowBusinessExt.workFlowProcessStepList.length + 2:0" align-center style="margin-bottom: 20px">
+          <template v-for="(item, i) in stepList">
+            <el-step :icon="item.icon" :title="item.title" :description="item.description"></el-step>
+          </template>
+        </el-steps>
+        <el-collapse style="margin-bottom: 20px">
+          <el-collapse-item>
+            <template slot="title">
+              <span style="color: red">审批日志（展开查看更多）：</span>
+            </template>
+            <template v-for="(item, i) in logList">
+              <div>{{++i}}：{{item.approverName}}  {{item.createTime}}  {{item.approvalValue}}</div>
+            </template>
+          </el-collapse-item>
+        </el-collapse>
+      </div>
+      <e-desc title="基本信息" column="3">
+        <e-desc-item label="评审编码">{{dataForm.reCode}}</e-desc-item>
+        <e-desc-item label="沟通编码">{{dataForm.coCode}}</e-desc-item>
+        <e-desc-item label="评审类别">{{dataForm.reType}}</e-desc-item>
+        <e-desc-item label="客户名称">{{dataForm.customerName}}</e-desc-item>
+        <e-desc-item label="联系人" span="2">{{dataForm.bizManagerName}}</e-desc-item>
+        <e-desc-item label="备注说明" span="3">{{dataForm.notes}}</e-desc-item>
+      </e-desc>
+      <e-desc title="沟通信息表附件">
+        <upload-component :display="true" :display-title="false" :accept="'*'" :file-obj-list="fileList1"/>
+      </e-desc>
+      <e-desc title="合同评审表">
+        <upload-component :display="true" :display-title="false" :accept="'*'" :file-obj-list="fileList"/>
+      </e-desc>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">返回</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+  import EDesc from '../common/e-desc'
+  import EDescItem from '../common/e-desc-item'
+  import { geTreDetail } from '@/api/cus'
+  import uploadComponent from '../common/upload-component'
+  import { dealStepData, dealStepLogs } from '@/api/util'
+  export default {
+    name: 'contract-detail',
+    components: {
+      EDesc, EDescItem, uploadComponent
+    },
+    data () {
+      return {
+        visible: false,
+        id: 0,
+        dataForm: {},
+        cusRCommProductVOS: [],
+        fileList: [],
+        fileList1: [],
+        stepList: [],
+        logList: []
+      }
+    },
+    methods: {
+      async init (id) {
+        this.visible = true
+        this.id = id || 0
+        this.cusRCommProductVOS = []
+        this.fileList = []
+        this.fileList1 = []
+        this.stepList = []
+        this.logList = []
+        this.getDetails()
+      },
+      getDetails () {
+        geTreDetail(this.id).then(({data}) => {
+          if (data && data.code === '200') {
+            this.dataForm = data.data
+            // 流程图展示
+            dealStepData(data.data.workFlowBusinessExt.workFlowProcessStepList, this.stepList)
+            dealStepLogs(data.data.workFlowBusinessExt.processLogList, this.logList)
+            // 附件显示
+            this.fileList = []
+            data.data.attachList.forEach((item) => {
+              this.fileList.push({
+                name: item.fileName,
+                url: item.url,
+                id: item.url
+              })
+            })
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+.my-line{
+  border-bottom: 1px solid #c0c4cc;
+  margin-bottom: 10px;
+}
+.title{
+  padding: 10px 0 ;
+}
+</style>

src/views/modules/cus/contract.vue

@@ -92,7 +92,7 @@
         width="150"
         label="操作">
         <template slot-scope="scope">
-          <el-button v-if="isAuth('cus:contract:info')" type="text" size="small" @click="addOrUpdateHandle(scope.row.reId, true)">查看</el-button>
+          <el-button v-if="isAuth('cus:contract:info')" type="text" size="small" @click="detailHandle(scope.row.reId)">查看</el-button>
           <el-button v-if="isAuth('cus:contract:revoke') && (scope.row.state === '1' || scope.row.state === '2')" type="text" size="small" @click="cancelContract(scope.row)">撤回</el-button>
           <el-button v-if="isAuth('cus:contract:submit') && (scope.row.state === '0')" type="text" size="small" @click="addOrUpdateHandle(scope.row.reId, false)">编辑</el-button>
         </template>
@@ -109,21 +109,24 @@
     </el-pagination>
     <!-- 弹窗, 新增 / 修改 -->
     <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    <detail v-if="detailVisible" ref="detail"/>
   </div>
 </template>
 
 <script>
   import AddOrUpdate from './contract-add-or-update'
+  import Detail from './contract-detail'
   import { getDictList } from '@/api/dict'
   import { revoke } from '@/api/cus'
   export default {
     name: 'contract',
     components: {
-      AddOrUpdate
+      AddOrUpdate, Detail
     },
     data () {
       return {
         addOrUpdateVisible: false,
+        detailVisible: false,
         dataForm: {},
         dataList: [],
         pageIndex: 1,
@@ -256,6 +259,12 @@
             }
           }
         }
+      },
+      detailHandle (id) {
+        this.detailVisible = true
+        this.$nextTick(() => {
+          this.$refs.detail.init(id)
+        })
       }
     }
   }