boss

src/views/boss/orderTracking/columns.js

@@ -54,63 +54,44 @@ export const getColumns = (vm) => {
       showOverflowTooltip: true
     },
     {
-      prop: 'productionPlanNo',
-      label: '生产计划编号',
+      prop: 'preSaleOrderNo',
+      label: '预销售订单号',
       width: 170,
       align: 'center',
       showOverflowTooltip: true
     },
     {
-      prop: 'productionWorkOrderNo',
-      label: '生产工单号',
+      prop: 'productionPlanNo',
+      label: '生产计划编号',
       width: 170,
       align: 'center',
       showOverflowTooltip: true
     },
     {
-      prop: 'processProgress',
-      label: '工序进度',
-      width: 120,
-      align: 'center',
-      showOverflowTooltip: true
-    },
-    {
-      prop: 'productionNo',
-      label: '生产编号',
-      width: 120,
-      align: 'center',
-      showOverflowTooltip: true
-    },
-    {
-      prop: 'preSaleOrderNo',
-      label: '预销售订单号',
+      prop: 'productionWorkOrderNo',
+      label: '生产工单号',
       width: 170,
       align: 'center',
       showOverflowTooltip: true
     },
     {
-      prop: 'orderStatus',
-      label: '订单状态',
-      width: 120,
-      align: 'center',
-      showOverflowTooltip: true,
-      formatter: (row) => {
-        return vm.orderObj[row.orderStatus] || '';
-      }
-    },
-    {
-      prop: 'productionStatus',
-      label: '生产状态',
-      width: 120,
+      prop: 'materialProductionOrderNo',
+      label: '生产订单号 \n（编码+图号）',
+      width: 180,
       align: 'center',
       showOverflowTooltip: true,
       formatter: (row) => {
-        if (!row.productionStatus) {
-          return '';
+        if (row.imgCode && row.materialCode) {
+          return row.materialCode + '-' + row.imgCode;
         }
-        return vm.productionStatus[row.productionStatus][row.productionStatus];
+
+        if (row.materialCode) {
+          return row.materialCode;
+        }
+        return '';
       }
     },
+
     {
       prop: 'customerCode',
       label: '客户代号',
@@ -126,41 +107,78 @@ export const getColumns = (vm) => {
       showOverflowTooltip: true
     },
     {
-      prop: 'productName',
-      label: '产品描述',
+      prop: 'productCode',
+      label: '主机编码',
       width: 150,
       align: 'center',
-      showOverflowTooltip: true,
-      height: 50
+      showOverflowTooltip: true
     },
     {
-      prop: 'productCode',
-      label: '产品编码',
+      prop: 'productName',
+      label: '主机名称',
       width: 150,
       align: 'center',
-      showOverflowTooltip: true
+      showOverflowTooltip: true,
+      height: 50
     },
     {
       prop: 'productQuantity',
-      label: '订单数量',
+      label: '主机\n订单数量',
       width: 80,
       align: 'center',
       showOverflowTooltip: true
     },
     {
       prop: 'productUnitName',
-      label: '单位',
+      label: '主机单位',
       width: 80,
       align: 'center',
       showOverflowTooltip: true
     },
     {
-      prop: 'productWeight',
-      label: '重量（kg）',
+      prop: 'materialWeight',
+      label: '主机\n重量（kg）',
       width: 100,
       align: 'center',
       showOverflowTooltip: true
     },
+    {
+      prop: 'processProgress',
+      label: '工序进度',
+      width: 120,
+      align: 'center',
+      showOverflowTooltip: true
+    },
+    {
+      prop: 'productionNo',
+      label: '生产编号',
+      width: 120,
+      align: 'center',
+      showOverflowTooltip: true
+    },
+    {
+      prop: 'orderStatus',
+      label: '订单状态',
+      width: 120,
+      align: 'center',
+      showOverflowTooltip: true,
+      formatter: (row) => {
+        return vm.orderObj[row.orderStatus] || '';
+      }
+    },
+    {
+      prop: 'productionStatus',
+      label: '生产状态',
+      width: 120,
+      align: 'center',
+      showOverflowTooltip: true,
+      formatter: (row) => {
+        if (!row.productionStatus) {
+          return '';
+        }
+        return vm.productionStatus[row.productionStatus][row.productionStatus];
+      }
+    },
     {
       prop: 'customerExpectDeliveryDate',
       label: '客户期望交期',
@@ -170,42 +188,32 @@ export const getColumns = (vm) => {
     },
     {
       prop: 'productionDeliveryDate',
-      label: '生产计划完成交期',
+      label: '生产计划交期',
       width: 150,
       align: 'center',
       showOverflowTooltip: true
     },
+    {
+      prop: 'productionCycle',
+      label: '生产周期（天）',
+      width: 120,
+      align: 'center',
+      showOverflowTooltip: true
+    },
     {
       prop: 'materialCode',
-      label: '材料编码',
+      label: '编码',
       width: 170,
       align: 'center',
       showOverflowTooltip: true
     },
     {
       prop: 'materialName',
-      label: '材料描述',
+      label: '名称',
       width: 200,
       align: 'center',
       showOverflowTooltip: true
     },
-    {
-      prop: 'materialProductionOrderNo',
-      label: '生产订单号（图号 + 编码）',
-      width: 180,
-      align: 'center',
-      showOverflowTooltip: true,
-      formatter: (row) => {
-        if (row.imgCode && row.materialCode) {
-          return row.materialCode + '-' + row.imgCode;
-        }
-
-        if (row.materialCode) {
-          return row.materialCode;
-        }
-        return '';
-      }
-    },
     {
       prop: 'materialQuantity',
       label: '数量',
@@ -221,44 +229,37 @@ export const getColumns = (vm) => {
       showOverflowTooltip: true
     },
     {
-      prop: 'materialWeight',
+      prop: 'productWeight',
       label: '重量（kg）',
       width: 100,
       align: 'center',
       showOverflowTooltip: true
     },
-    {
-      prop: 'productionCycle',
-      label: '生产周期（天）',
-      width: 120,
-      align: 'center',
-      showOverflowTooltip: true
-    },
     {
       slot: 'firstProcessDeliveryTime',
       prop: 'firstProcessDeliveryTime',
-      label: '首工序实际下达时间',
+      label: '首工序\n预计完成时间',
       width: 160,
       align: 'center',
       showOverflowTooltip: true
     },
     {
       prop: 'firstProcessCompleteTime',
-      label: '首工序预计完成时间',
+      label: '首工序\n实际下达时间',
       width: 160,
       align: 'center',
       showOverflowTooltip: true
     },
     {
       prop: 'productEstimatedCompletionTime',
-      label: '成品预计完成时间',
+      label: '成品\n预计完成时间',
       width: 160,
       align: 'center',
       showOverflowTooltip: true
     },
     {
       prop: 'productActualCompletionTime',
-      label: '成品实际完成时间',
+      label: '成品\n实际完成时间',
       width: 160,
       align: 'center',
       showOverflowTooltip: true

src/views/boss/orderTracking/components/produceRouting.vue

@@ -12,6 +12,15 @@
         >
       </div>
 
+      <el-steps :active="process.length" align-center style="margin: 18px 0">
+        <el-step
+          class="text"
+          v-for="(item, index) in process"
+          :key="index"
+          :title="item.name"
+        ></el-step>
+      </el-steps>
+
       <div class="ele-table-container" style="height: 100%">
         <ele-pro-table
           :loading="loading"
@@ -20,7 +29,7 @@
           :datasource="datasource"
           :pageSizes="[10, 20, 50, 100]"
           :pageSize="20"
-          height="calc(100% - 100px )"
+          height="calc(100% - 120px )"
           :needPage="false"
         >
         </ele-pro-table>
@@ -82,15 +91,15 @@
           }
         }));
 
-        this.columns.unshift({
-          prop: 'index',
-          type: 'index',
-          label: '序号',
-          width: 55,
-          align: 'center',
-          showOverflowTooltip: true,
-          fixed: 'left'
-        });
+        // this.columns.unshift({
+        //   prop: 'index',
+        //   type: 'index',
+        //   label: '序号',
+        //   width: 55,
+        //   align: 'center',
+        //   showOverflowTooltip: true,
+        //   fixed: 'left'
+        // });
         this.getList();
       },
       async getList() {
@@ -137,6 +146,28 @@
     }
   }
 
+  :deep(.el-drawer__header) {
+    height: 60px;
+  }
+
+  :deep(.el-steps) {
+    height: 60px;
+  }
+
+  :deep(
+      .el-step__head.is-finish .el-step__icon.is-text .el-step__icon-inner
+    )::before {
+    content: '';
+  }
+
+  :deep(.el-step__head.is-finish .el-step__icon.is-text .el-step__icon-inner) {
+    font-size: 12px !important;
+  }
+
+  :deep(.el-step__title) {
+    color: #1890ff !important;
+  }
+
   .box {
     display: flex;
     text-align: left !important;
@@ -171,4 +202,10 @@
       // font-size: 0.62vw;
     }
   }
+
+  ::v-deep .active .is-text {
+    background: #ffa929; /* 背景色 */
+    border-color: #ffa929;
+    color: #ffffff; /* 图标文字颜色 */
+  }
 </style>

src/views/boss/orderTracking/index.vue

@@ -10,7 +10,7 @@
         >
           <el-row :gutter="15">
             <el-col v-bind="styleResponsive ? { lg: 5, md: 12 } : { span: 5 }">
-              <el-form-item label="订单编号：" prop="orderNo">
+              <el-form-item label="销售订单号：" prop="orderNo">
                 <el-input v-model="params.orderNo" clearable></el-input>
               </el-form-item>
             </el-col>
@@ -67,26 +67,29 @@
         :pageSizes="[10, 20, 50, 100]"
         :pageSize="20"
         height="calc(100% - 80px)"
-        :key="tableKey"
+        @columns-change="handleColumnChange"
+        :cache-key="cacheKeyUrl"
       >
-        <template v-slot:firstProcessDeliveryTime="{ row }">
+        <template v-slot:firstProcessDeliveryTime="{ row, $index }">
           <el-date-picker
-            v-if="!row.isEdit && !row.firstProcessDeliveryTime"
-            v-model="firstTime"
+            style="width: 100%"
+            v-if="row.isEdit"
+            v-model="row.firstProcessDeliveryTime"
             type="date"
             value-format="yyyy-MM-dd"
             placeholder="选择日期"
-            @change="handleDateChange($event, row)"
+            @change="handleDateChange($event, row, $index)"
+            :ref="`date${$index}`"
           >
           </el-date-picker>
 
-          <span> {{ row.firstProcessDeliveryTime || '请选择' }}</span>
+          <span v-else> {{ row.firstProcessDeliveryTime }}</span>
 
-          <i
+          <!-- <i
             v-if="!row.firstProcessDeliveryTime"
             class="xiada el-icon-edit"
             @click="editFirstTime(row)"
-          ></i>
+          ></i> -->
         </template>
 
         <template v-slot:produceRoutingName="{ row }">
@@ -128,6 +131,7 @@
   </div>
 </template>
 <script>
+  import tabMixins from '@/mixins/tableColumnsMixin';
   import produceRouting from './components/produceRouting.vue';
   import {
     getList,
@@ -140,13 +144,14 @@
   import { getRecords } from '@/utils/util';
   import { getByCode } from '@/api/system/dictionary-data';
   export default {
+    mixins: [tabMixins],
     components: {
       produceRouting
     },
     data() {
       return {
-        tableKey: '',
-        datasss: datasss,
+        columnsVersion: 1,
+        cacheKeyUrl: 'wt-views-boss-orderTracking',
         timeSearch: null,
         params: {
           startDate: '',
@@ -157,7 +162,7 @@
           customerName: '',
           projectName: ''
         },
-        columns: [],
+        // columns: [],
         orderObj: {
           0: '未提交',
           1: '审核中',
@@ -170,7 +175,6 @@
           1: '部分发货',
           2: '全部发货'
         },
-
         firstTime: '',
         records: []
       };
@@ -180,6 +184,10 @@
       // 是否开启响应式布局
       styleResponsive() {
         return this.$store.state.theme.styleResponsive;
+      },
+      columns() {
+        let columnsVersion = this.columnsVersion;
+        return getColumns(this);
       }
     },
 
@@ -212,11 +220,13 @@
         row.isEdit = !row.isEdit;
       },
       //   选择首工序的时间
-      async handleDateChange(e, item) {
+      async handleDateChange(e, item, index) {
+        item.firstProcessDeliveryTime = e;
         await updateFirstProcessDeliveryTime({
           id: item.saleOrderMaterialId,
           processDeliveryTime: e
         });
+
         this.$refs.table.reload({ where: this.params });
       },
 
@@ -243,9 +253,9 @@
       this.$store.dispatch('theme/setBodyFullscreen', false);
     },
     async created() {
+      console.log(this, window);
       const res1 = await getByCode('production_status');
       this.productionStatus = res1.data;
-      this.columns = getColumns(this);
     },
     beforeUpdate() {
       console.log('更新');
@@ -281,9 +291,6 @@
     // display: flex;
     // align-items: center;
   }
-  .outlineBox .outline:last-child {
-    border-bottom: none;
-  }
 
   .xiada {
     position: absolute;
@@ -292,10 +299,6 @@
     transform: translateY(-50%);
   }
 
-  .records {
-    display: flex;
-  }
-
   //
   :deep(.spanbox) {
     display: flex;
@@ -357,4 +360,19 @@
     display: flex;
     justify-content: space-around;
   }
+
+  :deep(.ele-pro-table-header-ellipsis > .el-table th.el-table__cell > .cell) {
+    white-space: pre;
+  }
+
+  :deep(
+      .el-date-editor
+        el-input
+        el-input--medium
+        el-input--prefix
+        el-input--suffix
+        el-date-editor--date
+    ) {
+    width: 100%;
+  }
 </style>