style(pick): 优化样式格式和状态显示逻辑

src/views/saleManage/saleOrder/components/darwerComponents/pick/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="ele-body">
-    <el-card shadow="never" v-loading="loading" style="width:100%">
+    <el-card shadow="never" v-loading="loading" style="width: 100%">
       <pick-search @search="reload" ref="searchRef"> </pick-search>
 
       <!-- 数据表格 -->
@@ -31,132 +31,137 @@
     ></selfDetailed>
   </div>
 </template>
-  
-  <script>
-import { getPage } from '@/api/mes/pickApply';
-import pickSearch from './pick-search.vue';
-import detailed from './detailed.vue';
-import selfDetailed from './selfDetailed.vue';
-export default {
-  components: {
-    pickSearch,
-    detailed,
-    selfDetailed
-  },
-  props: {
-    saleOrderData: {
-      type: Object,
-      default: () => {
-        return {};
+
+<script>
+  import { getPage } from '@/api/mes/pickApply';
+  import pickSearch from './pick-search.vue';
+  import detailed from './detailed.vue';
+  import selfDetailed from './selfDetailed.vue';
+  export default {
+    components: {
+      pickSearch,
+      detailed,
+      selfDetailed
+    },
+    props: {
+      saleOrderData: {
+        type: Object,
+        default: () => {
+          return {};
+        }
       }
-    }
-  },
-  data() {
-    return {
-      // 加载状态
-      loading: false,
+    },
+    data() {
+      return {
+        // 加载状态
+        loading: false,
 
-      detailedShow: false,
-      detailedObj: null,
+        detailedShow: false,
+        detailedObj: null,
 
-      selfDetailedShow: false,
+        selfDetailedShow: false,
 
-      statusList: ['未领料', '领料中', '已出库', '已驳回']
-    };
-  },
-  computed: {
-    columns() {
-      return [
-        {
-          prop: 'code',
-          label: '领料单编号',
-          align: 'center',
-          align: 'left'
-        },
+        statusList: ['未领料', '领料中', '已出库', '已驳回']
+      };
+    },
+    computed: {
+      columns() {
+        return [
+          {
+            prop: 'code',
+            label: '领料单编号',
+            align: 'center',
+            align: 'left'
+          },
 
-        {
-          prop: 'joinWorkOrderCode',
-          slot: 'joinWorkOrderCode',
-          label: '关联工单编号',
-          align: 'center'
-        },
+          {
+            prop: 'joinWorkOrderCode',
+            slot: 'joinWorkOrderCode',
+            label: '关联工单编号',
+            align: 'center'
+          },
 
-        {
-          prop: 'joinWarehouseName',
-          label: '领料仓库名称',
-          align: 'center'
-        },
+          {
+            prop: 'joinWarehouseName',
+            label: '领料仓库名称',
+            align: 'center'
+          },
 
-        {
-          prop: 'joinReviewerName',
-          label: '关联审核人',
-          align: 'center'
-        },
+          {
+            prop: 'joinReviewerName',
+            label: '关联审核人',
+            align: 'center'
+          },
 
-        {
-          prop: 'executorName',
-          label: '领料人',
-          align: 'center'
-        },
+          {
+            prop: 'executorName',
+            label: '领料人',
+            align: 'center'
+          },
 
-        {
-          prop: 'createTime',
-          label: '领料时间',
-          align: 'center'
-        },
-        {
-          prop: 'status',
-          slot: 'status',
-          label: '状态',
-          align: 'center'
-        },
+          {
+            prop: 'createTime',
+            label: '领料时间',
+            align: 'center'
+          },
+          {
+            prop: 'status',
+            formatter: (_row, _column, cellValue) => {
+              return cellValue == 1
+                ? '领料中'
+                : cellValue == 2
+                ? '已出库'
+                : '未领料';
+            },
+            label: '状态',
+            align: 'center'
+          },
 
-        {
-          prop: '',
-          label: '操作',
-          width: 80,
-          align: 'center',
-          resizable: false,
-          fixed: 'right',
-          slot: 'action'
-        }
-      ];
-    }
-  },
-  created() {},
-  methods: {
-    /* 表格数据源 */
-    async datasource({ page, limit, where }) {
-      if (this.saleOrderData.id) {
-        where['saleOrderCode'] = this.saleOrderData.orderNo;
-      }
-      let parma = {
-        ...where,
-        pageNum: page,
-        size: limit
-      };
-      let res = await getPage(parma);
-      return res;
-    },
-    handDetailed(row) {
-      this.detailedObj = JSON.stringify(row);
-      if (row.type == 1) {
-        this.selfDetailedShow = true;
-      } else {
-        this.detailedShow = true;
+          {
+            prop: '',
+            label: '操作',
+            width: 80,
+            align: 'center',
+            resizable: false,
+            fixed: 'right',
+            slot: 'action'
+          }
+        ];
       }
     },
+    created() {},
+    methods: {
+      /* 表格数据源 */
+      async datasource({ page, limit, where }) {
+        if (this.saleOrderData.id) {
+          where['saleOrderCode'] = this.saleOrderData.orderNo;
+        }
+        let parma = {
+          ...where,
+          pageNum: page,
+          size: limit
+        };
+        let res = await getPage(parma);
+        return res;
+      },
+      handDetailed(row) {
+        this.detailedObj = JSON.stringify(row);
+        if (row.type == 1) {
+          this.selfDetailedShow = true;
+        } else {
+          this.detailedShow = true;
+        }
+      },
 
-    detailedClose() {
-      this.detailedShow = false;
-      this.selfDetailedShow = false;
-    },
+      detailedClose() {
+        this.detailedShow = false;
+        this.selfDetailedShow = false;
+      },
 
-    /* 刷新表格 */
-    reload(where = {}) {
-      this.$refs.table.reload({ page: 1, where });
+      /* 刷新表格 */
+      reload(where = {}) {
+        this.$refs.table.reload({ page: 1, where });
+      }
     }
-  }
-};
+  };
 </script>
-