工艺详情页面分离

src/views/modules/tech/crafts-detail.vue

@@ -0,0 +1,108 @@
+<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.techName}}</e-desc-item>
+        <e-desc-item label="工艺版本">{{dataForm.techVersion}}</e-desc-item>
+        <e-desc-item label="产品">{{dataForm.productId}}</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="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 { dealStepData, dealStepLogs } from '@/api/util'
+  import uploadComponent from '../common/upload-component'
+  import { getInfo } from '@/api/crafts'
+  export default {
+    name: 'crafts-detail',
+    components: {
+      EDesc, EDescItem, uploadComponent
+    },
+    data () {
+      return {
+        visible: false,
+        id: 0,
+        dataForm: {},
+        stepList: [],
+        logList: [],
+        fileList: []
+      }
+    },
+    methods: {
+      async init (id) {
+        this.visible = true
+        this.id = id || 0
+        this.dataForm = {}
+        this.stepList = []
+        this.logList = []
+        this.fileList = []
+        this.getDetails()
+      },
+      getDetails () {
+        getInfo(this.id).then(({data}) => {
+          if (data && data.code === '200') {
+            this.dataForm = data.data
+            // 流程图展示
+            if (data.data.workFlowBusinessExt) {
+              dealStepData(data.data.workFlowBusinessExt.workFlowProcessStepList, this.stepList)
+              dealStepLogs(data.data.workFlowBusinessExt.processLogList, this.logList)
+            }
+            // 附件
+            if (data.data.attachList) {
+              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/tech/crafts-management.vue

@@ -108,7 +108,7 @@
         min-width="100"
         label="当前状态">
         <template slot-scope="scope">
-          <span>{{ scope.row.techState == -1 ? '停用' : '启用'  }}</span>
+          <span>{{ scope.row.techState === -1 ? '停用' : '启用'  }}</span>
         </template>
       </el-table-column>
       <el-table-column
@@ -118,9 +118,9 @@
         width="100"
         label="操作">
         <template slot-scope="scope">
-          <el-button v-if="isAuth('pro:technology:update') && scope.row.techState == -1" type="text" size="small" @click="addOrUpdateHandle1(scope.row.techId, 0)">启用</el-button>
-          <el-button v-if="isAuth('pro:technology:update') && scope.row.techState == 0" type="text" size="small" @click="addOrUpdateHandle1(scope.row.techId, -1)">停用</el-button>
-          <el-button v-if="isAuth('pro:technology:info')" type="text" size="small" @click="addOrUpdateHandle(scope.row.techId, true)">查看</el-button>
+          <el-button v-if="isAuth('pro:technology:update') && scope.row.techState === -1" type="text" size="small" @click="addOrUpdateHandle1(scope.row.techId, 0)">启用</el-button>
+          <el-button v-if="isAuth('pro:technology:update') && scope.row.techState === 0" type="text" size="small" @click="addOrUpdateHandle1(scope.row.techId, -1)">停用</el-button>
+          <el-button v-if="isAuth('pro:technology:info')" type="text" size="small" @click="detailHandle(scope.row.techId)">查看</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -135,16 +135,18 @@
     </el-pagination>
     <!-- 弹窗, 新增 / 修改 -->
     <ctafts-add-or-detail v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getTechnology" />
+    <detail v-if="detailVisible" ref="detail"/>
   </div>
 </template>
 
 <script>
   import { getTechnology, update } from '@/api/crafts'
   import ctaftsAddOrDetail from './ctafts-add-or-detail'
+  import Detail from './crafts-detail'
   export default {
     name: 'order',
     components: {
-      ctaftsAddOrDetail
+      ctaftsAddOrDetail, Detail
     },
     created () {
       this.queryData()
@@ -153,6 +155,7 @@
       return {
         addOrUpdateVisible: false,
         addOrUpdateVisible1: false,
+        detailVisible: false,
         dataForm: {},
         dataList: [],
         pageIndex: 1,
@@ -230,6 +233,13 @@
             this.getTechnology()
           }
         })
+      },
+      // 详情
+      detailHandle (id) {
+        this.detailVisible = true
+        this.$nextTick(() => {
+          this.$refs.detail.init(id)
+        })
       }
     }
   }