refactor(saleOderAftersalesList): 统一售后工单组件参数命名，优化数据查询逻辑

src/views/saleManage/contact/components/darwerComponents/saleOderAftersalesList.vue

@@ -1,218 +1,223 @@
 <template>
-  <div class="ele-body" style="width:100%">
+  <div class="ele-body" style="width: 100%">
     <ele-pro-table
       ref="table"
-      style="width:100%"
+      style="width: 100%"
       :columns="columns"
       :datasource="datasource"
       cache-key="systemRoleTable"
       :pageSize="20"
-      :needPage="false"
     >
-   
     </ele-pro-table>
   </div>
 </template>
 
 <script>
-import {
-  getSalesWorkOrder,
-  getSalesWorkOrderById
-} from '@/api/salesServiceManagement/index';
-import { getByCode } from '@/api/system/dictionary-data';
+  import {
+    getSalesWorkOrder,
+    getSalesWorkOrderById
+  } from '@/api/salesServiceManagement/index';
+  import { getByCode } from '@/api/system/dictionary-data';
 
-export default {
-  props: {
-    saleOrderData: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    return {
-      columns: [
-        {
-          columnKey: 'index',
-          label: '序号',
-          type: 'index',
-          width: 55,
-          align: 'center',
-          showOverflowTooltip: true,
-          fixed: 'left'
-        },
-        {
-          prop: 'code',
-          slot: 'code',
-          label: '工单编号',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 150
-        },
-        {
-          prop: 'planCode',
-          label: '计划单号',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 110
-        },
-        {
-          prop: 'planName',
-          label: '计划名称',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 110
-        },
-        {
-          prop: 'executeUserName',
-          label: '报工人',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 110
-        },
-        {
-          prop: 'accepterUserName',
-          label: '验收人',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 110
-        },
-        {
-          slot: 'faultLevel',
-          prop: 'faultLevel',
-          label: '故障等级',
-          align: 'center',
-          showOverflowTooltip: true,
-          formatter: (row) => this.levelData[row.faultLevel] || ''
-        },
-        {
-          prop: 'contactName',
-          label: '客户名称',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 110
-        },
-        {
-          prop: 'categoryName',
-          label: '设备名称',
-          align: 'center',
-          minWidth: 110,
-          showOverflowTooltip: true,
-          formatter: (row) => {
-            if (!row.deviceDetails) return '';
-            let str = '';
-            row.deviceDetails.map((el, idx) => {
-              str += idx + 1 === row.deviceDetails.length 
-                ? el.categoryName 
-                : `${el.categoryName},`;
-            });
-            return str;
-          }
-        },
-        {
-          prop: 'accepterTime',
-          label: '验收时间',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 110
-        },
-        {
-          prop: 'acceptTime',
-          label: '开始时间',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 110
-        },
-        {
-          prop: 'finishTime',
-          label: '结束时间',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 110
-        },
-        {
-          prop: 'planFinishTime',
-          label: '计划完成时间',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 110
-        },
-        {
-          prop: 'totalCost',
-          label: '费用( 元 )',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 110
-        },
-        {
-          columnKey: 'inFactDuration',
-          label: '工时',
-          align: 'center',
-          resizable: false,
-          showOverflowTooltip: true,
-          minWidth: 120,
-          formatter: (row) => {
-            if (row.inFactDuration || row.inFactDuration === 0) {
-              return `${((row.inFactDuration - 0) / 60).toFixed(1)} 小时`;
+  export default {
+    props: {
+      contactData: {
+        type: Object,
+        default: () => ({})
+      }
+    },
+    data() {
+      return {
+        columns: [
+          {
+            columnKey: 'index',
+            label: '序号',
+            type: 'index',
+            width: 55,
+            align: 'center',
+            showOverflowTooltip: true,
+            fixed: 'left'
+          },
+          {
+            prop: 'code',
+            slot: 'code',
+            label: '工单编号',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 150
+          },
+          {
+            prop: 'planCode',
+            label: '计划单号',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'planName',
+            label: '计划名称',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'executeUserName',
+            label: '报工人',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'accepterUserName',
+            label: '验收人',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            slot: 'faultLevel',
+            prop: 'faultLevel',
+            label: '故障等级',
+            align: 'center',
+            showOverflowTooltip: true,
+            formatter: (row) => this.levelData[row.faultLevel] || ''
+          },
+          {
+            prop: 'contactName',
+            label: '客户名称',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'categoryName',
+            label: '设备名称',
+            align: 'center',
+            minWidth: 110,
+            showOverflowTooltip: true,
+            formatter: (row) => {
+              if (!row.deviceDetails) return '';
+              let str = '';
+              row.deviceDetails.map((el, idx) => {
+                str +=
+                  idx + 1 === row.deviceDetails.length
+                    ? el.categoryName
+                    : `${el.categoryName},`;
+              });
+              return str;
+            }
+          },
+          {
+            prop: 'accepterTime',
+            label: '验收时间',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'acceptTime',
+            label: '开始时间',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'finishTime',
+            label: '结束时间',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'planFinishTime',
+            label: '计划完成时间',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'totalCost',
+            label: '费用( 元 )',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            columnKey: 'inFactDuration',
+            label: '工时',
+            align: 'center',
+            resizable: false,
+            showOverflowTooltip: true,
+            minWidth: 120,
+            formatter: (row) => {
+              if (row.inFactDuration || row.inFactDuration === 0) {
+                return `${((row.inFactDuration - 0) / 60).toFixed(1)} 小时`;
+              }
+            }
+          },
+          {
+            prop: 'orderStatus',
+            label: '状态',
+            align: 'center',
+            showOverflowTooltip: true,
+            formatter: (row) => {
+              return this.workOrderStatus.find(
+                (item) => item.code === row.orderStatus
+              )?.label;
             }
           }
-        },
-        {
-          prop: 'orderStatus',
-          label: '状态',
-          align: 'center',
-          showOverflowTooltip: true,
-          formatter: (row) => {
-            return this.workOrderStatus.find(item => item.code === row.orderStatus)?.label;
-          }
+        ],
+        workOrderStatus: [
+          { code: 0, label: '待执行' },
+          { code: 1, label: '已接收' },
+          { code: 2, label: '执行中' },
+          { code: 3, label: '待验收' },
+          { code: 4, label: '待评价' },
+          { code: 5, label: '已完成' },
+          { code: 6, label: '验收不通过' }
+        ],
+        levelData: {}
+      };
+    },
+    created() {
+      this.getLevelCode('fault_level');
+    },
+    methods: {
+      async getLevelCode(code) {
+        const res = await getByCode(code);
+        if (res?.code === '0') {
+          const obj = {};
+          res.data.forEach((el) => {
+            const key = Object.keys(el)[0];
+            const value = Object.values(el)[0];
+            obj[key] = value;
+          });
+          this.levelData = obj;
         }
-      ],
-      workOrderStatus: [
-        { code: 0, label: '待执行' },
-        { code: 1, label: '已接收' },
-        { code: 2, label: '执行中' },
-        { code: 3, label: '待验收' },
-        { code: 4, label: '待评价' },
-        { code: 5, label: '已完成' },
-        { code: 6, label: '验收不通过' }
-      ],
-      levelData: {}
-    };
-  },
-  created() {
-    this.getLevelCode('fault_level');
-  },
-  methods: {
-    async getLevelCode(code) {
-      const res = await getByCode(code);
-      if (res?.code === '0') {
-        const obj = {};
-        res.data.forEach(el => {
-          const key = Object.keys(el)[0];
-          const value = Object.values(el)[0];
-          obj[key] = value;
+      },
+      datasource({ page, limit, where, order }) {
+        // let isDispatch = '1';
+        return getSalesWorkOrder({
+          pageNum: page,
+          size: limit,
+          ...where,
+          contactId: this.contactData.id
         });
-        this.levelData = obj;
       }
-    },
-    datasource({ page, limit, where, order }) {
-      
-      // let isDispatch = '1';
-      return getSalesWorkOrder({ orderid: this.saleOrderData.id, });
-    },
-    // async declarationForm(row, type) {
-    //   if (type === 'view') {
-    //     const detailRes = await getSalesWorkOrderById(row.id);
-    //     console.log('工单详情数据：', detailRes);
-    //   }
-    // }
-  }
-};
+      // async declarationForm(row, type) {
+      //   if (type === 'view') {
+      //     const detailRes = await getSalesWorkOrderById(row.id);
+      //     console.log('工单详情数据：', detailRes);
+      //   }
+      // }
+    }
+  };
 </script>
 
 <style lang="scss" scoped>
-::v-deep .ele-pro-table {
-  .el-link {
-    cursor: pointer;
+  ::v-deep .ele-pro-table {
+    .el-link {
+      cursor: pointer;
+    }
   }
-}
-</style>
+</style>

src/views/saleManage/contact/components/drawer.vue

@@ -154,7 +154,7 @@
           <el-tab-pane label="售后工单" name="售后工单">
             
           <saleOderAftersalesList
-          :saleOrderData="row"
+          :contactData="row.base"
           ref="saleOderAftersalesListRef"
           ></saleOderAftersalesList>
           </el-tab-pane>

src/views/saleManage/saleOrder/components/darwerComponents/saleOderAftersalesList.vue

@@ -7,213 +7,217 @@
       :datasource="datasource"
       cache-key="systemRoleTable"
       :pageSize="20"
-      :needPage="false"
     >
     </ele-pro-table>
   </div>
 </template>
 
 <script>
-import {
-  getSalesWorkOrder,
-  getSalesWorkOrderById
-} from '@/api/salesServiceManagement/index';
-import { getByCode } from '@/api/system/dictionary-data';
+  import {
+    getSalesWorkOrder,
+    getSalesWorkOrderById
+  } from '@/api/salesServiceManagement/index';
+  import { getByCode } from '@/api/system/dictionary-data';
 
-export default {
-  props: {
-    saleOrderData: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    return {
-      columns: [
-        {
-          columnKey: 'index',
-          label: '序号',
-          type: 'index',
-          width: 55,
-          align: 'center',
-          showOverflowTooltip: true,
-          fixed: 'left'
-        },
-        {
-          prop: 'code',
-          slot: 'code',
-          label: '工单编号',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 150
-        },
-        {
-          prop: 'planCode',
-          label: '计划单号',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 110
-        },
-        {
-          prop: 'planName',
-          label: '计划名称',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 110
-        },
-        {
-          prop: 'executeUserName',
-          label: '报工人',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 110
-        },
-        {
-          prop: 'accepterUserName',
-          label: '验收人',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 110
-        },
-        {
-          slot: 'faultLevel',
-          prop: 'faultLevel',
-          label: '故障等级',
-          align: 'center',
-          showOverflowTooltip: true,
-          formatter: (row) => this.levelData[row.faultLevel] || ''
-        },
-        {
-          prop: 'contactName',
-          label: '客户名称',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 110
-        },
-        {
-          prop: 'categoryName',
-          label: '设备名称',
-          align: 'center',
-          minWidth: 110,
-          showOverflowTooltip: true,
-          formatter: (row) => {
-            if (!row.deviceDetails) return '';
-            let str = '';
-            row.deviceDetails.map((el, idx) => {
-              str +=
-                idx + 1 === row.deviceDetails.length
-                  ? el.categoryName
-                  : `${el.categoryName},`;
-            });
-            return str;
-          }
-        },
-        {
-          prop: 'accepterTime',
-          label: '验收时间',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 110
-        },
-        {
-          prop: 'acceptTime',
-          label: '开始时间',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 110
-        },
-        {
-          prop: 'finishTime',
-          label: '结束时间',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 110
-        },
-        {
-          prop: 'planFinishTime',
-          label: '计划完成时间',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 110
-        },
-        {
-          prop: 'totalCost',
-          label: '费用( 元 )',
-          align: 'center',
-          showOverflowTooltip: true,
-          minWidth: 110
-        },
-        {
-          columnKey: 'inFactDuration',
-          label: '工时',
-          align: 'center',
-          resizable: false,
-          showOverflowTooltip: true,
-          minWidth: 120,
-          formatter: (row) => {
-            if (row.inFactDuration || row.inFactDuration === 0) {
-              return `${((row.inFactDuration - 0) / 60).toFixed(1)} 小时`;
+  export default {
+    props: {
+      saleOrderData: {
+        type: Object,
+        default: () => ({})
+      }
+    },
+    data() {
+      return {
+        columns: [
+          {
+            columnKey: 'index',
+            label: '序号',
+            type: 'index',
+            width: 55,
+            align: 'center',
+            showOverflowTooltip: true,
+            fixed: 'left'
+          },
+          {
+            prop: 'code',
+            slot: 'code',
+            label: '工单编号',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 150
+          },
+          {
+            prop: 'planCode',
+            label: '计划单号',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'planName',
+            label: '计划名称',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'executeUserName',
+            label: '报工人',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'accepterUserName',
+            label: '验收人',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            slot: 'faultLevel',
+            prop: 'faultLevel',
+            label: '故障等级',
+            align: 'center',
+            showOverflowTooltip: true,
+            formatter: (row) => this.levelData[row.faultLevel] || ''
+          },
+          {
+            prop: 'contactName',
+            label: '客户名称',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'categoryName',
+            label: '设备名称',
+            align: 'center',
+            minWidth: 110,
+            showOverflowTooltip: true,
+            formatter: (row) => {
+              if (!row.deviceDetails) return '';
+              let str = '';
+              row.deviceDetails.map((el, idx) => {
+                str +=
+                  idx + 1 === row.deviceDetails.length
+                    ? el.categoryName
+                    : `${el.categoryName},`;
+              });
+              return str;
+            }
+          },
+          {
+            prop: 'accepterTime',
+            label: '验收时间',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'acceptTime',
+            label: '开始时间',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'finishTime',
+            label: '结束时间',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'planFinishTime',
+            label: '计划完成时间',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            prop: 'totalCost',
+            label: '费用( 元 )',
+            align: 'center',
+            showOverflowTooltip: true,
+            minWidth: 110
+          },
+          {
+            columnKey: 'inFactDuration',
+            label: '工时',
+            align: 'center',
+            resizable: false,
+            showOverflowTooltip: true,
+            minWidth: 120,
+            formatter: (row) => {
+              if (row.inFactDuration || row.inFactDuration === 0) {
+                return `${((row.inFactDuration - 0) / 60).toFixed(1)} 小时`;
+              }
+            }
+          },
+          {
+            prop: 'orderStatus',
+            label: '状态',
+            align: 'center',
+            showOverflowTooltip: true,
+            formatter: (row) => {
+              return this.workOrderStatus.find(
+                (item) => item.code === row.orderStatus
+              )?.label;
             }
           }
-        },
-        {
-          prop: 'orderStatus',
-          label: '状态',
-          align: 'center',
-          showOverflowTooltip: true,
-          formatter: (row) => {
-            return this.workOrderStatus.find(
-              (item) => item.code === row.orderStatus
-            )?.label;
-          }
+        ],
+        workOrderStatus: [
+          { code: 0, label: '待执行' },
+          { code: 1, label: '已接收' },
+          { code: 2, label: '执行中' },
+          { code: 3, label: '待验收' },
+          { code: 4, label: '待评价' },
+          { code: 5, label: '已完成' },
+          { code: 6, label: '验收不通过' }
+        ],
+        levelData: {}
+      };
+    },
+    created() {
+      this.getLevelCode('fault_level');
+    },
+    methods: {
+      async getLevelCode(code) {
+        const res = await getByCode(code);
+        if (res?.code === '0') {
+          const obj = {};
+          res.data.forEach((el) => {
+            const key = Object.keys(el)[0];
+            const value = Object.values(el)[0];
+            obj[key] = value;
+          });
+          this.levelData = obj;
         }
-      ],
-      workOrderStatus: [
-        { code: 0, label: '待执行' },
-        { code: 1, label: '已接收' },
-        { code: 2, label: '执行中' },
-        { code: 3, label: '待验收' },
-        { code: 4, label: '待评价' },
-        { code: 5, label: '已完成' },
-        { code: 6, label: '验收不通过' }
-      ],
-      levelData: {}
-    };
-  },
-  created() {
-    this.getLevelCode('fault_level');
-  },
-  methods: {
-    async getLevelCode(code) {
-      const res = await getByCode(code);
-      if (res?.code === '0') {
-        const obj = {};
-        res.data.forEach((el) => {
-          const key = Object.keys(el)[0];
-          const value = Object.values(el)[0];
-          obj[key] = value;
+      },
+      datasource({ page, limit, where, order }) {
+        // let isDispatch = '1';
+        return getSalesWorkOrder({
+          pageNum: page,
+          size: limit,
+          ...where,
+          orderId: this.saleOrderData.id
         });
-        this.levelData = obj;
       }
-    },
-    datasource({ page, limit, where, order }) {
-      // let isDispatch = '1';
-      return getSalesWorkOrder({ orderid: this.saleOrderData.id,});
+      // async declarationForm(row, type) {
+      //   if (type === 'view') {
+      //     const detailRes = await getSalesWorkOrderById(row.id);
+      //     console.log('工单详情数据：', detailRes);
+      //   }
+      // }
     }
-    // async declarationForm(row, type) {
-    //   if (type === 'view') {
-    //     const detailRes = await getSalesWorkOrderById(row.id);
-    //     console.log('工单详情数据：', detailRes);
-    //   }
-    // }
-  }
-};
+  };
 </script>
 
 <style lang="scss" scoped>
-::v-deep .ele-pro-table {
-  .el-link {
-    cursor: pointer;
+  ::v-deep .ele-pro-table {
+    .el-link {
+      cursor: pointer;
+    }
   }
-}
-</style>
+</style>