kd-aiot-frontend-eom/src/views/salesServiceManagement/vehiclerecord/index.vue

<template>
  <div class="ele-body">
    <el-card shadow="never" v-loading="loading">
      <search
        class="seep-search"
        @search="reload"
        @pass-pietype-list="handlePietypeList"
      ></search>
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        cache-key="systemRoleTable"
        :pageSize="20"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar></template>
      </ele-pro-table>
    </el-card>
  </div>
</template>

<script>
import search from './components/search.vue';
import { pageByDispatchRecord } from '@/api/salesServiceManagement/index';
import dictMixins from '@/mixins/dictMixins';

export default {
  mixins: [dictMixins],
  components: {
    search
  },
  data() {
    return {
      pietypeList: [],
      deptResList: [], // 部门
      deptIdToNameMap: {},
      // 加载状态
      loading: false
    };
  },
  computed: {
    columns() {
      return [
        {
          columnKey: 'index',
          label: '序号',
          type: 'index',
          width: 55,
          align: 'center',
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          slot: 'demandCode',
          prop: 'demandCode',
          label: '售后需求编码',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 200
        },
        {
          prop: 'pieCarType',
          label: '派车类型',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 200,
          formatter: (row) => this.getPieTypeLabel(row.pieCarType)
        },
        {
          prop: 'createUserName',
          label: '申请人',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 200,
        },
        {
          prop: 'department',
          label: '所属部门',
          align: 'center',
          minWidth: 300,
          showOverflowTooltip: true,
          formatter: (row) => {
            const deptIds = row.valueJson?.department || [];
            return this.getDeptNames(deptIds);
          }
        },
        {
          prop: 'subject_matter',
          label: '出差事由',
          align: 'center',
          minWidth: 200,
          showOverflowTooltip: true,
          formatter: (row) => row.valueJson?.subject_matter || ''
        },
        {
          prop: 'estimated_duration',
          label: '预计出差时长',
          align: 'center',
          minWidth: 200,
          showOverflowTooltip: true,
          formatter: (row) => row.valueJson?.estimated_duration || ''
        },
        {
          prop: 'travel_time',
          label: '出差时间',
          align: 'center',
          minWidth: 200,
          showOverflowTooltip: true,
          formatter: (row) => row.valueJson?.travel_time || ''
        },
        {
          prop: 'return_time',
          label: '返回时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 200,
          formatter: (row) => row.valueJson?.return_time || ''
        },
        {
          prop: 'car_number',
          label: '车牌号',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 200,
          formatter: (row) => row.valueJson?.car_number || ''
        },
        {
          prop: 'vehicle_user',
          label: '用车人',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 200,
          formatter: (row) => row.valueJson?.vehicle_user || ''
        },
        {
          prop: 'vehicle_mileage',
          label: '出差里程数',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 200,
          formatter: (row) => row.valueJson?.vehicle_mileage || ''
        },
        {
          prop: 'return_mileage_to_factory',
          label: '返厂里程数',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 200,
          formatter: (row) => row.valueJson?.return_mileage_to_factory || ''
        },
        {
          prop: 'status',
          label: '状态',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 200,
        },
        {
          prop: 'createTime',
          label: '创建时间',
          align: 'center',
          showOverflowTooltip: true,
          minWidth: 200,
        }
      ];
    }
  },
  methods: {
    getDeptNames(deptIdArr) {
      if (!deptIdArr || !Array.isArray(deptIdArr) || deptIdArr.length === 0) {
        return "-";
      }
      const deptNames = deptIdArr.map(deptId => 
        this.deptIdToNameMap[deptId] || ''
      );
      return deptNames.join("、");
    },
    getPieTypeLabel(value) {
      if (!value) return '';
      const target = this.pietypeList.find(item => item.value === String(value));
      return target ? target.label : value;
    },
    handlePietypeList(list, deptRes) {
      this.pietypeList = list;
      this.deptResList = deptRes;
      this.deptIdToNameMap = deptRes.reduce((map, dept) => {
        map[dept.id] = dept.name;
        return map;
      }, {});
    },
    datasource({ page, limit, where }) {
      const dataPromise = pageByDispatchRecord({
        pageNum: page,
        size: limit,
        ...where
      });
      dataPromise
        .then(response => console.log(response))
        .catch(error => console.error('获取数据失败：', error));
      return dataPromise;
    },
    /* 刷新表格 */
    reload(where) {
      this.$refs.table.reload({ page: 1, where });
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner::placeholder {
  font-size: 13px;
}
::v-deep .seep-search {
  .el-input__inner {
    padding: 0 5px 0 10px;
  }
}
</style>