报损记录审批列表与详情

src/views/modules/production/damage-details.vue

@@ -7,6 +7,27 @@
   <div>
     <div class="my-title">查看</div>
     <div style="margin-left: 20px;margin-right: 20px">
+      <!-- 工作流 -->
+      <div v-show="dataForm.workFlowBusinessExt">
+        <el-steps :active="dataForm.workFlowBusinessExt&&dataForm.workFlowBusinessExt.workFlowProcessStepList?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>
+      <div v-if="isFlow">
+        <approve-component ref="approve" @approveFinished="approveFinished"/>
+      </div>
       <e-desc title="基本信息" column="3">
         <e-desc-item label="产品名称">{{dataForm.productName}}</e-desc-item>
         <e-desc-item label="产品编号">{{dataForm.prodCode}}</e-desc-item>
@@ -36,6 +57,7 @@
   import {getDamageDetail} from '@/api/production'
   import EDesc from '../common/e-desc'
   import EDescItem from '../common/e-desc-item'
+  import { dealStepData, dealStepLogs } from '@/api/util'
   export default {
     name: 'damage-details',
     components: {
@@ -44,24 +66,38 @@
     data () {
       return {
         visible: false,
+        isFlow: false,
         id: 0,
-        dataForm: {}
+        dataForm: {},
+        stepList: [],
+        logList: []
       }
     },
     methods: {
       onChose () {
         this.$emit('onChose')
       },
-      async init (id) {
+      async init (id,businessType) {
         this.visible = true
+        this.isFlow = !!(businessType && businessType !== '')
         this.id = id || 0
-        this.dataForm = {}
-        this.getDetails()
+        this.dataForm = {
+          workFlowBusinessExt: null
+        }
+        this.stepList = []
+        this.logList = []
+        this.getDetails(businessType)
       },
-      getDetails () {
+      getDetails (businessType) {
         getDamageDetail(this.id).then(({data}) => {
           if (data && data.code === '200' && data.data) {
             this.dataForm = data.data
+             // 流程图展示
+            dealStepData(data.data.workFlowBusinessExt.workFlowProcessStepList, this.stepList)
+            dealStepLogs(data.data.workFlowBusinessExt.processLogList, this.logList)
+
+             // 初始化审批Form
+            this.showApproveForm(businessType, this.id)
           }
         })
       },
@@ -71,7 +107,20 @@
         if (Number(row.state) === 1) return '未重新排产'
         if (Number(row.state) === 2) return '已重新排产'
         return ''
-      }
+      },
+      // 初始化审批Form
+      showApproveForm (businessType, businessId) {
+        if (this.isFlow) {
+          this.$nextTick(() => {
+            this.$refs.approve.init(businessType, businessId)
+          })
+        }
+      },
+      // 审批完成
+      approveFinished () {
+        this.onChose()
+        this.$emit('approveFinished')
+      },
     }
   }
 </script>

src/views/modules/production/damage.vue

@@ -106,15 +106,24 @@
           min-width="120"
           label="状态">
         </el-table-column>
+        <el-table-column
+          prop="workFlowBusinessExt.state"
+          header-align="center"
+          align="center"
+          :formatter="formatWorkFlowState"
+          min-width="120"
+          label="审批状态">
+        </el-table-column>
         <el-table-column
           fixed="right"
           header-align="center"
           align="center"
-          width="140"
+          width="160"
           label="操作">
           <template slot-scope="scope">
             <el-button v-if="isAuth('prod:damage:info')" type="text" size="small" @click="detailHandle(scope.row.recordId)">查看</el-button>
-            <el-button v-if="isAuth('prod:damage:again') && Number(scope.row.state) !== 2" type="text" size="small" @click="reScheduleHandle(scope.row.recordId)">重新排产</el-button>
+            <el-button v-if="isAuth('prod:damage:again') && Number(scope.row.state) !== 2 && Number(scope.row.workFlowBusinessExt.state) == 3" type="text" size="small" @click="reScheduleHandle(scope.row.recordId)">重新排产</el-button>
+            <el-button v-if="isAuth('prod:damage:info') && Number(scope.row.workFlowBusinessExt.state) <= 2" type="text" size="small" @click="reScheduleHandle(scope.row.recordId)">审批</el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -221,6 +230,14 @@
         if (Number(row.state) === 2) return '已重新排产'
         return ''
       },
+      formatWorkFlowState (row) {
+        if (!row.workFlowBusinessExt.state) return ''
+        if (Number(row.workFlowBusinessExt.state) === 1) return '待审批'
+        if (Number(row.workFlowBusinessExt.state) === 2) return '审批中'
+        if (Number(row.workFlowBusinessExt.state) === 3) return '审批完成'
+        if (Number(row.workFlowBusinessExt.state) === 4) return '审批不通过'
+        return ''
+      },
       // 重新排产
       reScheduleHandle (id) {
         reSchedule(id).then(({data}) => {