领料详情

src/views/produce/components/picking/detailed.vue

@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <el-dialog
+      title="领料列表"
+      :visible.sync="visible"
+      :before-close="handleClose"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      append-to-body
+      width="80%"
+    >
+      <div class="tableZ_box">
+        <div class="row">
+          <div class="col">
+            <div class="name">领料时间</div>
+            <div class="content">{{ dataObj.createTime }}</div>
+          </div>
+          <div class="col">
+            <div class="name">领料单号</div>
+            <div class="content">{{ dataObj.code }}</div>
+          </div>
+
+          <div class="col">
+            <div class="name">领料人</div>
+            <div class="content">{{ dataObj.executorName }}</div>
+          </div>
+        </div>
+      </div>
+
+      <div v-for="(item, index) in dataObj.orderInfoList" :key="index">
+        <ele-pro-table
+          ref="table"
+          :columns="columns"
+          max-height="320px"
+          :datasource="item.arr"
+          cache-key="detailed"
+          highlight-current-row
+          :need-page="false"
+        >
+          <template v-slot:toolbar>
+            <div class="c_title"> 领料单号： {{ item.code }} </div>
+          </template>
+
+          <template v-slot:empty>
+            <div class="empty">暂无领料数据</div>
+          </template>
+
+          <template v-slot:index="{ row , $index}">
+            {{ $index}} <el-tag>{{ row.rootCategoryLevelName }}</el-tag>
+          </template>
+
+          <template v-slot:demandQuantity="{ row }">
+            {{ row.demandQuantity }} {{ row.unit }}
+          </template>
+        </ele-pro-table>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  export default {
+    props: {
+      detailedObj: {}
+    },
+    data() {
+      return {
+        visible: true,
+        dataObj: null
+      };
+    },
+
+    computed: {
+      // 表格列配置
+      columns() {
+        return [
+          {
+            columnKey: 'index',
+            label: '序号',
+            type: 'index',
+            width: 80,
+            align: 'center',
+            showOverflowTooltip: true,
+                slot: 'index'
+          },
+
+          {
+            prop: 'categoryCode',
+            label: '编码',
+            align: 'center'
+          },
+
+          {
+            prop: 'categoryName',
+            label: '名称',
+            align: 'center'
+          },
+
+          {
+            prop: 'demandQuantity',
+            label: '数量',
+            align: 'center',
+            slot: 'demandQuantity'
+          },
+
+          {
+            prop: 'warehouseName',
+            label: '领料仓库',
+            align: 'center'
+          },
+
+          {
+            prop: 'warehouseLeaderName',
+            label: '审核人',
+            align: 'center'
+          }
+        ];
+      },
+
+      taskObj() {
+        return this.$store.state.user.taskObj;
+      }
+    },
+
+    methods: {
+      handleClose() {
+        this.$emit('detailedClose');
+      }
+    },
+
+    created() {
+      let obj = JSON.parse(this.detailedObj);
+
+      obj.orderInfoList.forEach((o) => {
+        let _arr = [];
+        _arr = [...o.bomDetailDTOS, ...o.instanceList];
+        _arr = _arr.sort(
+          (a, b) => a.rootCategoryLevelId - b.rootCategoryLevelId
+        );
+        o['arr'] = _arr;
+      });
+
+      this.dataObj = obj;
+      // console.log(this.dataObj);
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .tableZ_box {
+    .col {
+      width: calc(100% / 3);
+    }
+  }
+</style>

src/views/produce/components/picking/details.vue

@@ -1,32 +1,47 @@
 <template>
-  <ele-pro-table
-    ref="table"
-    :columns="columns"
-    max-height="68vh"
-    :datasource="dataList"
-    cache-key="pickingDetails"
-    highlight-current-row
-    @row-click="rowClick"
-    :need-page="false"
-    @refresh="refresh"
-  >
-    <template v-slot:toolbar>
-      <div class="c_title">领料详情 </div>
-    </template>
+  <div>
+    <ele-pro-table
+      ref="table"
+      :columns="columns"
+      max-height="68vh"
+      :datasource="dataList"
+      cache-key="pickingDetails"
+      highlight-current-row
+      @row-click="rowClick"
+      :need-page="false"
+      @refresh="refresh"
+    >
+      <template v-slot:toolbar>
+        <div class="c_title">领料详情 </div>
+      </template>
 
-    <template v-slot:action="{ row }">
-      <el-button type="text" size="mini">详情</el-button>
-    </template>
-  </ele-pro-table>
+      <template v-slot:action="{ row }">
+        <el-button type="text" size="mini" @click="handDetailed(row)"
+          >详情</el-button
+        >
+      </template>
+    </ele-pro-table>
+
+    <detailed
+
+      @detailedClose="detailedClose"
+      v-if="detailedShow"
+      :detailedObj="detailedObj"
+    ></detailed>
+  </div>
 </template>
 
 <script>
   import { pickDetails } from '@/api/produce/picking';
+  import detailed from './detailed.vue';
   export default {
     name: 'picking-details',
+    components: { detailed },
     data() {
       return {
-        dataList: []
+        dataList: [],
+        detailedShow: false,
+        detailedObj: null
       };
     },
 
@@ -91,6 +106,15 @@
 
       refresh() {
         this.getList(this.workListIds);
+      },
+
+      handDetailed(row) {
+        this.detailedObj = JSON.stringify(row);
+        this.detailedShow = true;
+      },
+
+      detailedClose() {
+        this.detailedShow = false;
       }
     },
     created() {}