web/src/views/report/dispatch-analysis/dispatch-statistics-drill-dialog.vue

<template>
  <my-dialog
    :visible="visible"
    :header="`项目派单完成率`"
    :width="1200"
    :closeOnOverlayClick="false"
    @close="emit('update:visible', false)"
  >
    <div class="drill-search-box">
      <div class="field">
        <div class="label">服务单元：</div>
        <div class="value">{{ props.data?.serviceName }}</div>
      </div>
      <div class="field">
        <div class="label">时间：</div>
        <div class="value"
          >{{ dateFormat(props.timeParams?.startTime, 'yyyy-MM-dd') }} -
          {{ dateFormat(props.timeParams?.endTime, 'yyyy-MM-dd') }}</div
        >
      </div>
    </div>
    <t-table
      ref="tableRef"
      size="small"
      row-key="key"
      :columns="tableColumns"
      :data="tableData"
      bordered
      :pagination="{
        defaultCurrent: 1,
        defaultPageSize: 10,
        onChange,
        showJumper: true,
        showPageSize: false,
        total: pagination.total,
        current: pagination.pageNumber,
      }"
      v-loading="loading"
    >
      <template #custom-type="{ col, row }">
        {{ customerTypeFilter(row[col.colKey]) }}
      </template>
      <template #begin-time="{ col, row }">
        {{ timestampFilter(row[col.colKey]) }}
      </template>
    </t-table>
  </my-dialog>
</template>
<script setup name="DispatchStatisticsDrillDialog">
import { ref, computed, reactive, watch } from 'vue';
import { CUSTOMER_TYPE } from '@/config/constants';
import { dateFormat } from '@/utils/tool';
import useFetchTable from '@/hooks/useFetchTable';
import { dispatchStatisticsDrill } from '@/api/report';
import {customerTypeFilter, timestampFilter} from "@/utils/filter";
const tableColumns = [
  { colKey: 'service', title: '服务单元' },
  { colKey: 'crmNo', title: '项目单号' },
  { colKey: 'beginTime', title: '派单时间' , cell: 'begin-time'},
  { colKey: 'crmUserName', title: '客户经理' },
  { colKey: 'customType', title: '客户类型' , cell: 'custom-type'},
  { colKey: 'custom', title: '客户名称' },
  { colKey: 'name', title: '项目名称' },
  { colKey: 'product', title: '实施产品' },
];
const props = defineProps({
  visible: Boolean,
  data: Object,
  timeParams: Array,
});
const emit = defineEmits(['close']);

watch(
  () => props.visible,
  () => {
    search();
  }
);
const transParams = computed(() => {
  return {
    serviceId: props.data?.serviceId,
    startTime: props.timeParams.startTime,
    endTime: props.timeParams.endTime,
  };
});

const { loading, pagination, tableData, search, onChange } = useFetchTable(
  dispatchStatisticsDrill,
  {
    params: transParams,
  },
  false
);
</script>