33

src/views/pick/pickApply/components/selfDetailed.vue

@@ -0,0 +1,210 @@
+<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>
+
+      
+        <ele-pro-table
+          ref="table"
+          :columns="columns"
+          max-height="320px"
+          :datasource="dataObj.detailList"
+          cache-key="detailed"
+          highlight-current-row
+          :need-page="false"
+        >
+  
+          <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>
+     
+    </el-dialog>
+  </div>
+</template>
+<script>
+  export default {
+    components: {},
+    props: {
+      detailedObj: {}
+    },
+    data() {
+      return {
+        visible: true,
+        dataObj: null
+      };
+    },
+
+    computed: {
+      // 表格列配置
+      columns() {
+        return [
+          {
+            columnKey: 'index',
+            label: '序号',
+            type: 'index',
+            width: 120,
+            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'
+          },
+
+          {
+            prop: 'brandNo',
+            label: '牌号',
+            align: 'center'
+          },
+          {
+            prop: 'model',
+            label: '型号',
+            align: 'center'
+          },
+          {
+            prop: 'specification',
+            label: '规格',
+            align: 'center'
+          }
+        ];
+      }
+    },
+
+    methods: {
+      handleClose() {
+        this.$emit('detailedClose');
+      }
+    },
+
+    created() {
+      let obj = JSON.parse(this.detailedObj);
+      console.log(obj, 'obj');
+
+      this.dataObj = obj;
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .tableZ_box {
+    border: 1px solid #e3e5e5;
+    margin: 6px 0;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .row {
+      width: 100%;
+      display: flex;
+    }
+
+    .col {
+      width: calc(100% / 5);
+      display: flex;
+      align-items: center;
+      min-width: 200px;
+      min-height: 32px;
+      border-bottom: 1px solid #e3e5e5;
+      border-right: 1px solid #e3e5e5;
+
+      &:last-child {
+        border-right: none;
+      }
+
+      .name {
+        display: flex;
+        align-items: center;
+        padding: 4px;
+        width: 80px;
+        height: 100%;
+        background-color: #d0e4d5;
+        color: #000;
+      }
+
+      .content {
+        padding: 4px 6px;
+        color: #000;
+      }
+    }
+
+    .pd6 {
+      padding: 0 6px;
+    }
+  }
+  .tableZ_box {
+    .col {
+      width: calc(100% / 3);
+    }
+  }
+
+  .tag_box {
+    span {
+      display: inline-block;
+      padding: 2px 4px;
+      background: #e6f7ff;
+      margin: 0 4px;
+    }
+  }
+</style>

src/views/pick/pickApply/index.vue

@@ -22,11 +22,10 @@
             >自建领料单</el-button
           >
         </template>
-         
-        <template v-slot:joinWorkOrderCode="{ row }">
-          <el-tag type="warning" v-if="row.type == 1" >自建领料单</el-tag>
-          <div v-else>{{ row.joinWorkOrderCode}}</div>
 
+        <template v-slot:joinWorkOrderCode="{ row }">
+          <el-tag type="warning" v-if="row.type == 1">自建领料单</el-tag>
+          <div v-else>{{ row.joinWorkOrderCode }}</div>
         </template>
 
         <template v-slot:status="{ row }">
@@ -63,6 +62,12 @@
       v-if="detailedShow"
       :detailedObj="detailedObj"
     ></detailed>
+
+    <selfDetailed
+      @detailedClose="detailedClose"
+      v-if="selfDetailedShow"
+      :detailedObj="detailedObj"
+    ></selfDetailed>
   </div>
 </template>
 
@@ -75,13 +80,15 @@
   import selfBuildPick from './components/selfBuildPick.vue';
 
   import detailed from '@/views/produce/components/picking/detailed.vue';
+  import selfDetailed from './components/selfDetailed.vue';
 
   export default {
     components: {
       pickSearch,
       addPick,
       selfBuildPick,
-      detailed
+      detailed,
+      selfDetailed
     },
     data() {
       return {
@@ -93,7 +100,9 @@
         selfBuildPickShow: false,
 
         detailedShow: false,
-        detailedObj: null
+        detailedObj: null,
+
+        selfDetailedShow: false
       };
     },
     computed: {
@@ -207,11 +216,16 @@
 
       handDetailed(row) {
         this.detailedObj = JSON.stringify(row);
-        this.detailedShow = true;
+        if (row.type == 1) {
+          this.selfDetailedShow = true;
+        } else {
+          this.detailedShow = true;
+        }
       },
 
       detailedClose() {
         this.detailedShow = false;
+        this.selfDetailedShow = false;
       },
 
       /* 刷新表格 */