任务单列表：添加字段、物料清单

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

@@ -336,7 +336,7 @@
   import { downloadUrl } from '@/api/file'
   import CraftsDetailDialog from '@/views/modules/tech/crafts-detail-dialog'
   import {optionsMaterialState} from '@/utils/enums'
-  import ProdManagementDetailsDialog from '@/views/modules/production/prod-management-details-dialog'
+  import ProdManagementDetailsDialog from '@/views/modules/production/prod-list-dialog'
 export default {
     name: 'order-detail',
     components: {

src/views/modules/production/prod-list-dialog.vue

@@ -0,0 +1,141 @@
+<template>
+  <el-dialog
+    title="查看"
+    width="70%"
+    :close-on-click-modal="false"
+    :visible.sync="visible"
+    @close="onChose"
+  >
+  <div class="production">
+    <el-table
+      :data="dataList"
+      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="120"
+        :show-tooltip-when-overflow="true"
+        label="物料名称"/>
+      <el-table-column
+        prop="productSpec"
+        header-align="center"
+        align="center"
+        min-width="120"
+        :show-tooltip-when-overflow="true"
+        label="物料规格"/>
+      <el-table-column
+        prop="productNumber"
+        header-align="center"
+        align="center"
+        min-width="120"
+        :show-tooltip-when-overflow="true"
+        label="物料编号"/>
+      <el-table-column
+        prop="batchNumber"
+        header-align="center"
+        align="center"
+        min-width="120"
+        :show-tooltip-when-overflow="true"
+        label="批次号"/>
+      <el-table-column
+        prop="startTime"
+        header-align="center"
+        align="center"
+        min-width="120"
+        :show-tooltip-when-overflow="true"
+        label="开始时间"/>
+      <el-table-column
+        prop="endTime"
+        header-align="center"
+        align="center"
+        min-width="120"
+        :show-tooltip-when-overflow="true"
+        label="结束时间"/>
+      <el-table-column
+        header-align="center"
+        align="center"
+        fixed="right"
+        min-width="80"
+        :show-tooltip-when-overflow="true"
+        label="状态">
+        <template slot-scope="scope">{{stateFormat(scope.row)}}</template>
+      </el-table-column>
+      <el-table-column
+        fixed="right"
+        header-align="center"
+        align="center"
+        width="100"
+        label="操作">
+        <template slot-scope="scope">
+          <el-button type="text" size="small" @click="detail(scope.row.id)">查看</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+    <prod-management-details-dialog v-if="detailVisible" ref="detail"/>
+    <span slot="footer">
+        <el-button @click="onChose">返回</el-button>
+      </span>
+  </el-dialog>
+</template>
+
+<script>
+import AttachDetail from '@/views/modules/common/attach-detail'
+import AttachDetailDialog from '@/views/modules/common/attach-detail-dialog'
+import InspectTypeDialog from '@/views/modules/production/inspect-type-dialog'
+import {optionsMaterialState} from '@/utils/enums'
+import ProdManagementDetailsDialog from '@/views/modules/production/prod-management-details-dialog'
+export default {
+  name: 'prod-list-dialog',
+  components: {ProdManagementDetailsDialog, InspectTypeDialog, AttachDetailDialog, AttachDetail},
+  data () {
+    return {
+      visible: false,
+      dataList: [],
+      optionsState: optionsMaterialState,
+      detailVisible: false
+    }
+  },
+  methods: {
+    onChose () {
+      this.visible = false
+    },
+    // 初始化表单
+    async init (productList) {
+      this.dataList = productList
+      this.visible = true
+    },
+    // 转换属性“状态”
+    stateFormat (row) {
+      if (this.optionsState) {
+        for (let i = 0; i < this.optionsState.length; i++) {
+          if (this.optionsState[i].code === row.prodState) {
+            return this.optionsState[i].value
+          }
+        }
+      }
+    },
+    detail (id) {
+      this.detailVisible = true
+      this.$nextTick(() => {
+        this.$refs.detail.init(id, 1)
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+/deep/ .my-row .super-flow__node {
+  width: 180px;
+  height: 80px;
+}
+</style>

src/views/modules/production/prod-management-details-dialog.vue

@@ -3,72 +3,136 @@
     title="查看"
     width="70%"
     :close-on-click-modal="false"
+    :append-to-body="true"
     :visible.sync="visible"
     @close="onChose"
   >
   <div class="production">
-    <el-table
-      :data="dataList"
-      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="120"
-        :show-tooltip-when-overflow="true"
-        label="物料名称"/>
-      <el-table-column
-        prop="productSpec"
-        header-align="center"
-        align="center"
-        min-width="120"
-        :show-tooltip-when-overflow="true"
-        label="物料规格"/>
-      <el-table-column
-        prop="productNumber"
-        header-align="center"
-        align="center"
-        min-width="120"
-        :show-tooltip-when-overflow="true"
-        label="物料编号"/>
-      <el-table-column
-        prop="batchNumber"
-        header-align="center"
-        align="center"
-        min-width="120"
-        :show-tooltip-when-overflow="true"
-        label="批次号"/>
-      <el-table-column
-        prop="startTime"
-        header-align="center"
-        align="center"
-        min-width="120"
-        :show-tooltip-when-overflow="true"
-        label="开始时间"/>
-      <el-table-column
-        prop="endTime"
-        header-align="center"
-        align="center"
-        min-width="120"
-        :show-tooltip-when-overflow="true"
-        label="结束时间"/>
-      <el-table-column
-        header-align="center"
-        align="center"
-        fixed="right"
-        min-width="80"
-        :show-tooltip-when-overflow="true"
-        label="状态">
-        <template slot-scope="scope">{{stateFormat(scope.row)}}</template>
-      </el-table-column>
-    </el-table>
+      <div class="my-title">详情</div>
+    <div v-for="(item, index) in dataList">
+      <el-table
+        :data="item.nodeList"
+        border
+        style="width: 100%;">
+        <el-table-column
+          label="序号"
+          type="index"
+          width="50"
+          align="center">
+        </el-table-column>
+        <el-table-column
+          prop="nodeName"
+          header-align="center"
+          align="center"
+          min-width="120"
+          :show-tooltip-when-overflow="true"
+          label="工序名称"/>
+        <el-table-column
+          prop="require"
+          header-align="center"
+          align="center"
+          min-width="120"
+          :show-tooltip-when-overflow="true"
+          label="工序要求"/>
+        <el-table-column
+          prop="explain"
+          header-align="center"
+          align="center"
+          min-width="120"
+          :show-tooltip-when-overflow="true"
+          label="工序说明"/>
+        <el-table-column
+          prop="process"
+          header-align="center"
+          align="center"
+          min-width="120"
+          :show-tooltip-when-overflow="true"
+          label="工序特性"/>
+        <el-table-column
+          prop="workTypeName"
+          header-align="center"
+          align="center"
+          min-width="120"
+          :show-tooltip-when-overflow="true"
+          label="工种"/>
+        <el-table-column
+          header-align="center"
+          align="center"
+          label="参考附件">
+          <template slot-scope="scope">
+            <el-button :disabled="!scope.row.attachList || scope.row.attachList.length === 0" type="text" size="small" @click="attachDetails(scope.row.attachList)">查看</el-button>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="operatorName"
+          header-align="center"
+          align="center"
+          min-width="80"
+          :show-tooltip-when-overflow="true"
+          label="操作人"/>
+        <el-table-column
+          prop="state"
+          header-align="center"
+          align="center"
+          min-width="80"
+          :show-tooltip-when-overflow="true"
+          label="完成状态">
+          <template slot-scope="scope">{{stateFormat(scope.row)}}</template>
+        </el-table-column>
+        <el-table-column
+          prop="planCompletionTime"
+          header-align="center"
+          align="center"
+          min-width="160"
+          :show-tooltip-when-overflow="true"
+          label="要求完成时间"/>
+        <el-table-column
+          prop="completionTime"
+          header-align="center"
+          align="center"
+          min-width="160"
+          :show-tooltip-when-overflow="true"
+          label="实际完成时间"/>
+        <el-table-column
+          prop="preTaskTime"
+          header-align="center"
+          align="center"
+          min-width="100"
+          :show-tooltip-when-overflow="true"
+          label="工艺预估工时"/>
+        <el-table-column
+          prop="actualTime"
+          header-align="center"
+          align="center"
+          min-width="100"
+          :show-tooltip-when-overflow="true"
+          label="实际完成工时"/>
+        <el-table-column
+          prop="operationRecords"
+          header-align="center"
+          align="center"
+          min-width="140"
+          :show-tooltip-when-overflow="true"
+          label="完成记录"/>
+        <el-table-column
+          prop="notes"
+          header-align="center"
+          align="center"
+          min-width="160"
+          :show-tooltip-when-overflow="true"
+          label="备注"/>
+        <el-table-column
+          header-align="center"
+          align="center"
+          label="总检记录">
+          <template slot-scope="scope">
+            <el-button :disabled="!scope.row.prodProductionRequireList || scope.row.prodProductionRequireList.length === 0" type="text" size="small" @click="inspectDetails(scope.row.prodProductionRequireList)">查看</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <attach-detail-dialog v-if="attachVisible" ref="attachDetail" @onChose="onChose"/>
+    <inspect-type-dialog v-if="inspectVisible" ref="inspectDetail" @onChose="onChose"/>
   </div>
     <span slot="footer">
         <el-button @click="onChose">返回</el-button>
@@ -77,38 +141,100 @@
 </template>
 
 <script>
+import {getMonitoringDetail, getRecordingDetail} from '@/api/production'
+import { getProductionDetail } from '@/api/sale'
 import AttachDetail from '@/views/modules/common/attach-detail'
 import AttachDetailDialog from '@/views/modules/common/attach-detail-dialog'
 import InspectTypeDialog from '@/views/modules/production/inspect-type-dialog'
-import {optionsMaterialState} from '@/utils/enums'
+import {getProdInfoById} from '@/api/trace'
 export default {
-  name: 'prod-management-details-dialog',
+  name: 'prod-management-details',
   components: {InspectTypeDialog, AttachDetailDialog, AttachDetail},
   data () {
     return {
       visible: false,
+      attachVisible: false,
+      inspectVisible: false,
       dataList: [],
-      optionsState: optionsMaterialState
+      optionsState: [
+        {
+          code: '0', value: '已完成'
+        },
+        {
+          code: '1', value: '未完成'
+        }
+      ]
     }
   },
   methods: {
     onChose () {
+      this.attachVisible = false
+      this.inspectVisible = false
       this.visible = false
     },
     // 初始化表单
-    async init (productList) {
-      this.dataList = productList
+    async init (id, type) {
+      // type: 详情来源，1: 生产监控；2：生产记录；3：发货管理；4：追溯中心
+      if (type === 1) {
+        await getMonitoringDetail(id).then(async ({ data }) => {
+          if (data && data.code === '200') {
+            this.dataList = data.data
+          } else {
+            this.$message.error(data.msg)
+            this.onChose()
+          }
+        })
+      } else if (type === 2) {
+        await getRecordingDetail(id).then(async ({data}) => {
+          if (data && data.code === '200') {
+            this.dataList = data.data
+          } else {
+            this.$message.error(data.msg)
+            this.onChose()
+          }
+        })
+      } else if (type === 3) {
+        await getProductionDetail(id).then(async ({data}) => {
+          if (data && data.code === '200') {
+            this.dataList = data.data
+          } else {
+            this.$message.error(data.msg)
+            this.onChose()
+          }
+        })
+      } else if (type === 4) {
+        await getProdInfoById(id).then(async ({data}) => {
+          if (data && data.code === '200') {
+            this.dataList = data.data
+          } else {
+            this.$message.error(data.msg)
+            this.onChose()
+          }
+        })
+      }
       this.visible = true
     },
     // 转换属性“状态”
     stateFormat (row) {
       if (this.optionsState) {
         for (let i = 0; i < this.optionsState.length; i++) {
-          if (this.optionsState[i].code === row.prodState) {
+          if (this.optionsState[i].code === row.state) {
             return this.optionsState[i].value
           }
         }
       }
+    },
+    attachDetails (attachList) {
+      this.attachVisible = true
+      this.$nextTick(() => {
+        this.$refs.attachDetail.init(attachList)
+      })
+    },
+    inspectDetails (inspectList) {
+      this.inspectVisible = true
+      this.$nextTick(() => {
+        this.$refs.inspectDetail.init(inspectList)
+      })
     }
   }
 }