web/src/views/service-unit/service-unit-manage/range-manage/add-range-dialog.vue

<template>
  <my-drawer
    :visible="visible"
    size="80%"
    :header="false"
    :footer="false"
    attach="body"
    class="add-range-dialog"
  >
    <div class="add-range">
      <div class="page-action">
        <t-button
          theme="primary"
          :disabled="!selectedRowKeys.length"
          @click="handlerBatchBind"
        >
          <template #icon><SaveIcon /></template>
          批量划定
        </t-button>
        <t-button variant="text" @click="handleClose">
          <template #icon><CloseIcon /></template>
        </t-button>
      </div>
      <SearchForm :fields="fields" :params="params">
        <template #user="{ item, params }">
          <select-type-user
            v-model="params[item.prop]"
            type="ACCOUNT_MANAGER"
          ></select-type-user>
        </template>
      </SearchForm>

      <div class="flex-1 page-wrap">
        <div class="btn-group"> </div>
        <t-table
          size="small"
          row-key="crmId"
          :columns="columns"
          :data="tableData"
          bordered
          :pagination="{
            defaultCurrent: 1,
            defaultPageSize: 10,
            onChange,
            showJumper: true,
            showPageSize: false,
            current: pagination.pageNumber,
          }"
          v-loading="tableLoading"
          :selected-row-keys="selectedRowKeys"
          @select-change="selectChange"
        >
          <template #type="{ col, row }">
            {{ customerTypeFilter(row[col.colKey]) }}
          </template>
          <template #begin-time="{ col, row }">
            {{ timestampFilter(row[col.colKey]) }}
          </template>
          <template #exam-start-time="{ col, row }">
            {{ timestampFilter(row[col.colKey]) }}
          </template>
          <template #exam-end-time="{ col, row }">
            {{ timestampFilter(row[col.colKey]) }}
          </template>
          <template #create-time="{ col, row }">
            {{ timestampFilter(row[col.colKey]) }}
          </template>
        </t-table>
      </div>
    </div>
  </my-drawer>

  <!-- MultDelineationDialog -->
  <mult-delineation-dialog
    v-model:visible="showMultDelineationDialog"
    :crm-ids="selectedRowKeys"
    dialog-title="保存划定"
    @success="search"
  >
    <p style="color: #595959; margin-bottom: 28px"
      >请选择您要需要将这些派单划定的服务单元！</p
    >
  </mult-delineation-dialog>
</template>

<script setup name="AddRangeDialog">
import { reactive, ref, computed } from 'vue';
import { omit } from 'lodash';
import { MessagePlugin } from 'tdesign-vue-next';
import { SaveIcon, CloseIcon } from 'tdesign-icons-vue-next';
import { serviceScopeUnbindCrmQueryApi } from '@/api/service-unit';
import useFetchTable from '@/hooks/useFetchTable';
import { CUSTOMER_TYPE } from '@/config/constants';
import { customerTypeFilter, timestampFilter } from '@/utils/filter';
import MultDelineationDialog from '../../dispatch/dispatch-manage/mult-delineation-dialog.vue';
import { dictToOptionList } from '@/utils/tool';

const emit = defineEmits(['update:visible', 'success']);
const props = defineProps({
  visible: Boolean,
});
let showMultDelineationDialog = ref(false);

const fields = ref([
  {
    prop: 'crmUserId',
    label: '客户经理',
    type: 'select',
    labelWidth: 80,
    colSpan: 5,
    cell: 'user',
  },
  {
    prop: 'productType',
    label: '客户类型',
    type: 'select',
    labelWidth: 80,
    colSpan: 5,
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'customName',
    label: '客户名称',
    labelWidth: 80,
    colSpan: 5,
    options: dictToOptionList(CUSTOMER_TYPE),
    attrs: {
      clearable: true,
    },
  },
  {
    prop: 'crmNo',
    label: '项目单号',
    labelWidth: 80,
    colSpan: 5,
    attrs: {
      clearable: true,
    },
  },
  {
    type: 'buttons',
    colSpan: 2,
    children: [
      {
        type: 'button',
        text: '搜索',
        onClick: () => {
          search();
        },
      },
    ],
  },
  {
    prop: 'crmTime',
    label: '派单时间',
    type: 'daterange',
    labelWidth: 80,
    colSpan: 10,
    attrs: {
      clearable: true,
      valueType: 'time-stamp',
    },
  },
]);
const params = reactive({
  crmUserId: '',
  productType: '',
  customName: '',
  crmNo: '',
  crmTime: [],
});
const computedParams = computed(() => {
  let data = omit(params, ['crmTime']);
  data.startTime = params.crmTime[0];
  data.endTime = params.crmTime[1];
  return data;
});

const selectedRowKeys = ref([]);
const selectChange = (value) => {
  selectedRowKeys.value = value;
};
const columns = [
  {
    colKey: 'row-select',
    type: 'multiple',
    width: 50,
    fixed: 'left',
  },
  { colKey: 'crmNo', title: '项目单号', minWidth: 80 },
  { colKey: 'beginTime', title: '派单时间', width: 180, cell: 'begin-time' },
  { colKey: 'crmUserName', title: '客户经理', minWidth: 80 },
  { colKey: 'productType', title: '客户类型', width: 90, cell: 'type' },
  { colKey: 'customName', title: '客户名称', minWidth: 100 },
  { colKey: 'productName', title: '项目名称', minWidth: 80 },
  { colKey: 'productName', title: '实施产品', minWidth: 80 },
  {
    colKey: 'examStartTime',
    title: '考试开始时间',
    width: 180,
    cell: 'exam-start-time',
  },
  {
    colKey: 'examEndTime',
    title: '考试结束时间',
    width: 180,
    cell: 'exam-end-time',
  },
  { colKey: 'creatorName', title: '提交人', minWidth: 80 },
  { colKey: 'createTime', title: '提交时间', width: 180, cell: 'create-time' },
];
const {
  loading: tableLoading,
  pagination,
  tableData,
  search,
  onChange,
} = useFetchTable(serviceScopeUnbindCrmQueryApi, {
  fetchDataHandle: () => {
    selectedRowKeys.value = [];
  },
  params: computedParams,
});

const handlerBatchBind = () => {
  if (!selectedRowKeys.value.length) {
    MessagePlugin.error('您还没有选择任何派单！');
    return;
  }
  showMultDelineationDialog.value = true;
};

const handleClose = () => {
  emit('update:visible', false);
};
</script>

<style lang="less">
.add-range-dialog {
  .t-drawer__body {
    background-color: #f2f3f5;
    padding: 0;
  }
  .page-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>