详情页改造

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

@@ -118,7 +118,7 @@
           this.previewVisible = true
         } else {
           // 弹出新页面显示下载文件
-          window.open(downloadUrl + file.url)
+          window.open(downloadUrl + file.url, '_blank')
         }
       },
       // 改变上传内容

src/views/modules/cus/communicate.vue

@@ -69,7 +69,7 @@
         min-width="200"
         label="附件">
         <template slot-scope="scope">
-          <a v-for="(item, index) in scope.row.attachList" :key="item.fileName + index" type="primary" :href="downloadUrl + item.url">{{ item.fileName }}</a>
+          <a v-for="(item, index) in scope.row.attachList" :key="item.fileName + index" type="primary" :href="downloadUrl + item.url" target="_blank">{{ item.fileName }}</a>
         </template>
       </el-table-column>
       <el-table-column

src/views/modules/msg-center/announcement-detail.vue

@@ -12,7 +12,7 @@
       </e-desc>
       <e-desc title="详细信息" column="2">
         <e-desc-item span="2" label="附件">
-          <a v-for="(item, index) in dataForm.attachList" :key="item.fileName + index" type="primary" :href="downloadUrl + item.url">{{ item.fileName }}</a>
+          <a v-for="(item, index) in dataForm.attachList" :key="item.fileName + index" type="primary" :href="downloadUrl + item.url" target="_blank">{{ item.fileName }}</a>
         </e-desc-item>
         <e-desc-item span="2" style="min-height: 80px" label="备注说明">{{dataForm.notes}}</e-desc-item>
       </e-desc>

src/views/modules/msg-center/announcement.vue

@@ -50,7 +50,7 @@
         min-width="200"
         label="附件">
         <template slot-scope="scope">
-          <a v-for="(item, index) in scope.row.attachList" :key="item.fileName + index" type="primary" :href="downloadUrl + item.url">{{ item.fileName }}</a>
+          <a v-for="(item, index) in scope.row.attachList" :key="item.fileName + index" type="primary" :href="downloadUrl + item.url" target="_blank">{{ item.fileName }}</a>
         </template>
       </el-table-column>
       <el-table-column

src/views/modules/notice/notice-detail.vue

@@ -0,0 +1,110 @@
+<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.title}}</e-desc-item>
+        <e-desc-item label="级别">{{dataForm.levelDesc}}</e-desc-item>
+        <e-desc-item label="发布人">{{dataForm.publisherName}}</e-desc-item>
+        <e-desc-item label="公告内容" span="3">{{dataForm.content}}</e-desc-item>
+      </e-desc>
+      <e-desc title="公告附件" column="3">
+        <upload-component :display="true" :display-title="false" :accept="'*'" :file-obj-list="fileList"/>
+      </e-desc>
+      <e-desc title="接收对象信息" column="3">
+        <e-desc-item label="接收对象" span="3">{{dataForm.receiverList?dataForm.receiverList.toString():''}}</e-desc-item>
+        <e-desc-item label="已读" span="3">{{dataForm.readReceiverList?dataForm.readReceiverList.toString():''}}</e-desc-item>
+      </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 { getNoticeDetail } from '@/api/notice'
+  export default {
+    name: 'notice-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 () {
+        getNoticeDetail(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)
+            }
+            // 附件显示
+            this.fileList = []
+            data.data.attaches.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/notice/notice.vue

@@ -59,7 +59,7 @@
         :show-tooltip-when-overflow="true"
         label="附件">
         <template slot-scope="scope">
-          <a v-for="(item, index) in scope.row.attaches" :key="item.fileName + index" type="primary" :href="downloadUrl + item.url">{{ item.fileName }}</a>
+          <a v-for="(item, index) in scope.row.attaches" :key="item.fileName + index" type="primary" :href="downloadUrl + item.url" target="_blank">{{ item.fileName }}</a>
         </template>
       </el-table-column>
       <el-table-column
@@ -108,7 +108,7 @@
         width="150"
         label="操作">
         <template slot-scope="scope">
-          <el-button v-if="isAuth('sys:notice:info')" type="text" size="small" @click="addOrUpdateHandle(scope.row.noticeId, true)">查看</el-button>
+          <el-button v-if="isAuth('sys:notice:info')" type="text" size="small" @click="detailHandle(scope.row.noticeId)">查看</el-button>
           <el-button v-if="false" style="color: red" type="text" size="small" @click="cancel(scope.row.noticeId, false)">撤回</el-button>
         </template>
       </el-table-column>
@@ -124,20 +124,23 @@
     </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 './notice-add-or-update'
+  import Detail from './notice-detail'
   import { downloadUrl } from '@/api/file'
   export default {
-    name: 'notice.vue',
+    name: 'notice',
     components: {
-      AddOrUpdate
+      AddOrUpdate, Detail
     },
     data () {
       return {
         addOrUpdateVisible: false,
+        detailVisible: false,
         dataForm: {
           cusName: ''
         },
@@ -202,6 +205,13 @@
           this.$refs.addOrUpdate.init(id, display)
         })
       },
+      // 详情
+      detailHandle (id) {
+        this.detailVisible = true
+        this.$nextTick(() => {
+          this.$refs.detail.init(id)
+        })
+      },
       // 删除
       deleteHandle (id) {
         if (!id) return

src/views/modules/order/order-detail.vue

@@ -0,0 +1,184 @@
+<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.orderCode}}</e-desc-item>
+        <e-desc-item label="客户订单编码">{{dataForm.cusOrderCode}}</e-desc-item>
+        <e-desc-item label="客户名称">{{dataForm.customerName}}</e-desc-item>
+
+        <e-desc-item label="业务员">{{dataForm.salesmanName}}</e-desc-item>
+        <e-desc-item label="合同交期" span="2">{{dataForm.contactDate}}</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>
+      <e-desc title="订单产品明细">
+        <el-table
+          :data="productDetails"
+          border
+          style="width: 100%;">
+          <el-table-column
+            label="序号"
+            type="index"
+            width="50"
+            align="center">
+          </el-table-column>
+          <el-table-column
+            prop="productName"
+            header-align="center"
+            align="center"
+            min-width="140"
+            :show-tooltip-when-overflow="true"
+            label="产品名称">
+          </el-table-column>
+          <el-table-column
+            prop="cnt"
+            header-align="center"
+            align="center"
+            width="80"
+            label="数量">
+          </el-table-column>
+          <el-table-column
+            prop="productNumber"
+            header-align="center"
+            align="center"
+            min-width="120"
+            :show-tooltip-when-overflow="true"
+            label="订单编号">
+          </el-table-column>
+          <el-table-column
+            prop="price"
+            header-align="center"
+            align="center"
+            label="含税单价">
+          </el-table-column>
+          <el-table-column
+            prop="amount"
+            header-align="center"
+            align="center"
+            width="80"
+            label="含税总价">
+            <template slot-scope="scope">
+              <span>{{ (scope.row.cnt*scope.row.price).toFixed(2) }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="rate"
+            header-align="center"
+            align="center"
+            label="税率">
+            <template slot-scope="scope">
+              <span>{{scope.row.rate?(Number(scope.row.rate * 100)).toFixed(0):''}}</span>%
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="notes"
+            header-align="center"
+            align="center"
+            width="120"
+            :show-overflow-tooltip="true"
+            label="备注">
+          </el-table-column>
+        </el-table>
+      </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 { getOrderDetail } from '@/api/sale'
+  import uploadComponent from '../common/upload-component'
+  export default {
+    name: 'order-detail',
+    components: {
+      EDesc, EDescItem, uploadComponent
+    },
+    data () {
+      return {
+        visible: false,
+        id: 0,
+        dataForm: {},
+        productDetails: [],
+        stepList: [],
+        logList: [],
+        fileList: []
+      }
+    },
+    methods: {
+      async init (id) {
+        this.visible = true
+        this.id = id || 0
+        this.dataForm = {}
+        this.productDetails = []
+        this.stepList = []
+        this.logList = []
+        this.fileList = []
+        this.getDetails()
+      },
+      getDetails () {
+        getOrderDetail(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)
+            // 附件
+            if (data.data.attachList) {
+              data.data.attachList.forEach((item) => {
+                this.fileList.push({
+                  name: item.fileName,
+                  url: item.url,
+                  id: item.url
+                })
+              })
+            }
+            // 订单产品明细
+            if (data.data.saleROrderProductList) {
+              this.productDetails = data.data.saleROrderProductList
+            }
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+.my-line{
+  border-bottom: 1px solid #c0c4cc;
+  margin-bottom: 10px;
+}
+.title{
+  padding: 10px 0 ;
+}
+</style>

src/views/modules/order/order.vue

@@ -117,7 +117,7 @@
         width="150"
         label="操作">
         <template slot-scope="scope">
-          <el-button v-if="isAuth('order:ctl:info')" type="text" size="small" @click="addOrUpdateHandle(scope.row.orderId, true)">查看</el-button>
+          <el-button v-if="isAuth('order:ctl:info')" type="text" size="small" @click="detailHandle(scope.row.orderId)">查看</el-button>
           <el-button v-if="isAuth('order:ctl:editor')" type="text" size="small" @click="addOrUpdateHandle(scope.row.orderId,false)">编辑</el-button>
         </template>
       </el-table-column>
@@ -133,17 +133,19 @@
     </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 './order-add-or-update'
+  import Detail from './order-detail'
   import { getOrderList } from '@/api/sale'
   import { getCusList } from '@/api/cus'
   export default {
     name: 'order',
     components: {
-      AddOrUpdate
+      AddOrUpdate, Detail
     },
     created () {
       this.queryData()
@@ -151,6 +153,7 @@
     data () {
       return {
         addOrUpdateVisible: false,
+        detailVisible: false,
         dataForm: {},
         dataList: [],
         pageIndex: 1,
@@ -253,6 +256,13 @@
         if (!row.state) return ''
         const item1 = this.optionsState.find((item) => item.code === row.state.toString())
         return item1 ? item1.value : ''
+      },
+      // 详情
+      detailHandle (id) {
+        this.detailVisible = true
+        this.$nextTick(() => {
+          this.$refs.detail.init(id)
+        })
       }
     }
   }

src/views/modules/sale/purchase-detail.vue

@@ -130,7 +130,7 @@
   import { dealStepData, dealStepLogs } from '@/api/util'
   import { getPurchaseDetail } from '@/api/sale'
   export default {
-    name: 'contract-detail',
+    name: 'purchase-detail',
     components: {
       EDesc, EDescItem
     },

src/views/modules/sale/purchase.vue

@@ -291,6 +291,7 @@
         const item1 = this.optionsState.find((item) => item.code === row.purchaseState.toString())
         return item1 ? item1.value : ''
       },
+      // 详情
       detailHandle (id) {
         this.detailVisible = true
         this.$nextTick(() => {

src/views/modules/tech/draw-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.drawingCode}}</e-desc-item>
+        <e-desc-item label="图纸名称">{{dataForm.drawingName}}</e-desc-item>
+        <e-desc-item label="图纸来源">{{dataForm.source}}</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 { getDrawingDetail } from '@/api/product'
+  export default {
+    name: 'draw-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 () {
+        getDrawingDetail(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/draw-management.vue

@@ -88,7 +88,7 @@
         width="150"
         label="操作">
         <template slot-scope="scope">
-          <el-button v-if="isAuth('pro:drawing:info')" type="text" size="small" @click="addOrUpdateHandle(scope.row.drawingId, true)">查看</el-button>
+          <el-button v-if="isAuth('pro:drawing:info')" type="text" size="small" @click="detailHandle(scope.row.drawingId)">查看</el-button>
           <el-button v-if="isAuth('pro:drawing:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.drawingId, false)">编辑</el-button>
         </template>
       </el-table-column>
@@ -104,20 +104,23 @@
     </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 './draw-add-or-update'
+  import Detail from './draw-detail'
   import { getDrawList } from '@/api/product'
   export default {
     name: 'draw-management',
     components: {
-      AddOrUpdate
+      AddOrUpdate, Detail
     },
     data () {
       return {
         addOrUpdateVisible: false,
+        detailVisible: false,
         dataForm: {
           keyword: ''
         },
@@ -212,6 +215,13 @@
             }
           })
         }).catch(() => {})
+      },
+      // 详情
+      detailHandle (id) {
+        this.detailVisible = true
+        this.$nextTick(() => {
+          this.$refs.detail.init(id)
+        })
       }
     }
   }

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

@@ -0,0 +1,206 @@
+<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.productName}}</e-desc-item>
+        <e-desc-item label="产品规格">{{dataForm.productSpec}}</e-desc-item>
+        <e-desc-item label="产品类别">{{dataForm.productType}}</e-desc-item>
+
+        <e-desc-item label="产品来源">{{dataForm.sourceName}}</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="productDetails"
+          border
+          style="width: 100%;">
+          <el-table-column
+            label="序号"
+            type="index"
+            width="50"
+            align="center">
+          </el-table-column>
+          <el-table-column
+            prop="productName"
+            header-align="center"
+            align="center"
+            label="产品名称">
+          </el-table-column>
+          <el-table-column
+            prop="specifications"
+            header-align="center"
+            align="center"
+            label="规格">
+          </el-table-column>
+          <el-table-column
+            prop="cnt"
+            header-align="center"
+            align="center"
+            label="数量">
+          </el-table-column>
+          <el-table-column
+            prop="notes"
+            header-align="center"
+            align="center"
+            label="备注">
+          </el-table-column>
+        </el-table>
+      </e-desc>
+      <e-desc title="产品配料清单">
+        <el-table
+          :data="materialList"
+          border
+          style="width: 100%;">
+          <el-table-column
+            label="序号"
+            type="index"
+            width="50"
+            align="center">
+          </el-table-column>
+          <el-table-column
+            prop="materialName"
+            header-align="center"
+            align="center"
+            label="物品名称">
+          </el-table-column>
+          <el-table-column
+            prop="specifications"
+            header-align="center"
+            align="center"
+            label="规格">
+          </el-table-column>
+          <el-table-column
+            prop="cnt"
+            header-align="center"
+            align="center"
+            label="数量">
+          </el-table-column>
+          <el-table-column
+            prop="unitName"
+            header-align="center"
+            align="center"
+            label="单位">
+          </el-table-column>
+          <el-table-column
+            prop="notes"
+            header-align="center"
+            align="center"
+            label="备注">
+          </el-table-column>
+        </el-table>
+      </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 { getProductDetail } from '@/api/product'
+  export default {
+    name: 'product-detail',
+    components: {
+      EDesc, EDescItem, uploadComponent
+    },
+    data () {
+      return {
+        visible: false,
+        id: 0,
+        dataForm: {},
+        materialList: [],
+        productDetails: [],
+        stepList: [],
+        logList: [],
+        fileList: []
+      }
+    },
+    methods: {
+      async init (id) {
+        this.visible = true
+        this.id = id || 0
+        this.dataForm = {}
+        this.materialList = []
+        this.productDetails = []
+        this.stepList = []
+        this.logList = []
+        this.fileList = []
+        this.getDetails()
+      },
+      getDetails () {
+        getProductDetail(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)
+            }
+            // 组合小产品
+            data.data.composeProductMaterialList.forEach((item) => {
+              this.productDetails.push(item)
+            })
+            // 产品配料清单
+            data.data.productMaterialList.forEach((item) => {
+              this.materialList.push(item)
+            })
+            // 产品图纸
+            if (data.data.proDrawings) {
+              this.dataForm.drawingIdList = []
+              data.data.proDrawings.forEach((item) => {
+                if (item.attachList) {
+                  item.attachList.forEach((item1) => {
+                    this.fileList.push({
+                      name: item1.fileName,
+                      url: item1.url,
+                      id: item1.url
+                    })
+                  })
+                }
+              })
+            }
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+.my-line{
+  border-bottom: 1px solid #c0c4cc;
+  margin-bottom: 10px;
+}
+.title{
+  padding: 10px 0 ;
+}
+</style>

src/views/modules/tech/product-management.vue

@@ -123,7 +123,7 @@
         width="150"
         label="操作">
         <template slot-scope="scope">
-          <el-button v-if="isAuth('pro:product:info')" type="text" size="small" @click="addOrUpdateHandle(scope.row.productId, true)">查看</el-button>
+          <el-button v-if="isAuth('pro:product:info')" type="text" size="small" @click="detailHandle(scope.row.productId)">查看</el-button>
           <el-button v-if="isAuth('pro:product:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.productId, false)">编辑</el-button>
         </template>
       </el-table-column>
@@ -139,21 +139,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 './product-add-or-update'
+  import Detail from './product-detail'
   import { getDictList } from '@/api/dict'
   import { getProductList } from '@/api/product'
   export default {
     name: 'product-management',
     components: {
-      AddOrUpdate
+      AddOrUpdate, Detail
     },
     data () {
       return {
         addOrUpdateVisible: false,
+        detailVisible: false,
         dataForm: {},
         dataList: [],
         pageIndex: 1,
@@ -270,6 +273,13 @@
         if (row.isCompose === 1) {
           return '是'
         } else return '否'
+      },
+      // 详情
+      detailHandle (id) {
+        this.detailVisible = true
+        this.$nextTick(() => {
+          this.$refs.detail.init(id)
+        })
       }
     }
   }

src/views/modules/tech/work-type-detail.vue

@@ -0,0 +1,94 @@
+<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.code}}</e-desc-item>
+        <e-desc-item label="工种名称">{{dataForm.name}}</e-desc-item>
+        <e-desc-item label="工种级别">{{dataForm.level}}</e-desc-item>
+        <e-desc-item label="工种要求" span="3">{{dataForm.requirement}}</e-desc-item>
+        <e-desc-item label="备注" span="3">{{dataForm.notes}}</e-desc-item>
+        <e-desc-item label="掌握人" span="3">{{dataForm.masterNames?dataForm.masterNames.toString():''}}</e-desc-item>
+      </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 { getWorkTypeDetail } from '@/api/product'
+  export default {
+    name: 'work-type-detail',
+    components: {
+      EDesc, EDescItem, uploadComponent
+    },
+    data () {
+      return {
+        visible: false,
+        id: 0,
+        dataForm: {},
+        stepList: [],
+        logList: []
+      }
+    },
+    methods: {
+      async init (id) {
+        this.visible = true
+        this.id = id || 0
+        this.dataForm = {}
+        this.stepList = []
+        this.logList = []
+        this.getDetails()
+      },
+      getDetails () {
+        getWorkTypeDetail(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)
+            }
+          }
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+.my-line{
+  border-bottom: 1px solid #c0c4cc;
+  margin-bottom: 10px;
+}
+.title{
+  padding: 10px 0 ;
+}
+</style>

src/views/modules/tech/work-type.vue

@@ -85,7 +85,7 @@
         width="150"
         label="操作">
         <template slot-scope="scope">
-          <el-button v-if="isAuth('pro:worktype:info')" type="text" size="small" @click="addOrUpdateHandle(scope.row.typeId, true)">查看</el-button>
+          <el-button v-if="isAuth('pro:worktype:info')" type="text" size="small" @click="detailHandle(scope.row.typeId)">查看</el-button>
           <el-button v-if="isAuth('pro:worktype:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.typeId, false)">编辑</el-button>
         </template>
       </el-table-column>
@@ -101,21 +101,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 './work-type-add-or-update'
+  import Detail from './work-type-detail'
   import { getDictList } from '@/api/dict'
   import { getWorkTypeList } from '@/api/product'
   export default {
     name: 'work-type',
     components: {
-      AddOrUpdate
+      AddOrUpdate, Detail
     },
     data () {
       return {
         addOrUpdateVisible: false,
+        detailVisible: false,
         dataForm: {},
         dataList: [],
         pageIndex: 1,
@@ -199,6 +202,13 @@
         if (row.masterNames && row.masterNames.length > 0) {
           return row.masterNames.toString()
         } else { return '' }
+      },
+      // 详情
+      detailHandle (id) {
+        this.detailVisible = true
+        this.$nextTick(() => {
+          this.$refs.detail.init(id)
+        })
       }
     }
   }