web/src/views/service-unit-manage/dispatch/dispatch-manage/index.vue

<template>
  <div class="dispatch-manage flex flex-col">
    <SearchForm :fields="fields" :params="params"></SearchForm>
    <div class="flex-1 page-wrap">
      <div class="btn-group">
        <t-button theme="success" @click="handleAdd">新增</t-button>
        <t-button theme="success">作废</t-button>
        <t-button theme="success">批量划定</t-button>
      </div>
      <t-table
        size="small"
        row-key="id"
        :columns="columns"
        :data="tableData"
        bordered
        :pagination="{
          defaultCurrent: 1,
          defaultPageSize: 10,
          onChange,
          total: pagination.total,
        }"
        :selected-row-keys="selectedRowKeys"
        select-on-row-click
        @select-change="selectChange"
      >
      </t-table>
    </div>

    <AddDispatchDialog
      v-model:visible="showAddDispatchDialog"
      :title="title"
      :type="type"
      :handleSave="handleSave"
      :formData="formData"
      ref="formDialogRef"
    ></AddDispatchDialog>
  </div>
</template>

<script setup lang="jsx" name="DispatchManage">
import { reactive, ref } from 'vue';
import { useRequest } from 'vue-request';
import { getTableData } from '@/api/test';
import useFetchTable from '@/hooks/useFetchTable';
import useTableCrud from '@/hooks/useTableCrud';
import AddDispatchDialog from './add-dispatch-dialog.vue';

const formDialogRef = ref(null);
const selectedRowKeys = ref([]);
const selectChange = (value, { selectedRowData }) => {
  selectedRowKeys.value = value;
};
const columns = [
  {
    colKey: 'row-select',
    type: 'multiple',
    width: 50,
    fixed: 'left',
  },
  { colKey: 'a', title: '服务单元', width: 80 },
  { colKey: 'b', title: '项目单号', width: 80 },
  { colKey: 'c', title: '派单时间', width: 80 },
  { colKey: 'd', title: '派单人', width: 70 },
  { colKey: 'e', title: '客户类型', width: 80 },
  { colKey: 'f', title: '客户名称', width: 80 },
  { colKey: 'g', title: '项目名称', width: 80 },
  { colKey: 'h', title: '实施产品', width: 80 },
  { colKey: 'i', title: '考试开始时间', width: 140 },
  { colKey: 'j', title: '考试结束时间', width: 140 },
  { colKey: 'k', title: '大区经理', width: 80 },
  { colKey: 'l', title: '提交人', width: 70 },
  { colKey: 'm', title: '提交时间', width: 140 },
  {
    title: '操作',
    colKey: 'operate',
    fixed: 'right',
    width: 200,
    cell: (h, { row }) => {
      return (
        <div class="table-operations">
          <t-link theme="primary" hover="color">
            划定
          </t-link>
          <t-link
            theme="primary"
            hover="color"
            onClick={(e) => {
              e.stopPropagation();
              handleEdit(row);
            }}
          >
            修改
          </t-link>
          <t-link theme="primary" hover="color">
            重新划定
          </t-link>
        </div>
      );
    },
  },
];

const fields = ref([
  {
    prop: 'a',
    label: '服务单元',
    type: 'select',
    labelWidth: '80px',
    colSpan: 5,
  },
  {
    prop: 'b',
    label: '大区经理',
    type: 'select',
    labelWidth: '80px',
    colSpan: 5,
  },
  {
    prop: 'c',
    label: '派单人',
    type: 'select',
    labelWidth: '80px',
    colSpan: 5,
  },
  {
    prop: 'd',
    label: '客户类型',
    type: 'select',
    labelWidth: '80px',
    colSpan: 5,
  },
  {
    type: 'buttons',
    colSpan: 3,
    children: [
      {
        type: 'button',
        text: '查询',
      },
    ],
  },
  {
    prop: 'e',
    label: '客户名称',
    labelWidth: '80px',
    colSpan: 5,
  },
  {
    prop: 'f',
    label: '项目单号',
    labelWidth: '80px',
    colSpan: 5,
  },
  {
    prop: 'g',
    label: '派单时间',
    type: 'daterange',
    labelWidth: '80px',
    colSpan: 10,
  },
]);
const params = reactive({
  a: '',
  b: '',
  c: '',
  d: '',
  e: '',
  f: '',
  g: [],
});

const {
  loading: tableLoading,
  pagination,
  tableData,
  fetchData,
  onChange,
} = useFetchTable(getTableData);

const add = async () => {
  await 1;
  alert(1);
};
const update = async () => {};
const refresh = async () => {};

const {
  visible: showAddDispatchDialog,
  type,
  title,
  loading: dialogLoading,
  handleAdd,
  handleEdit,
  handleSave,
  formData,
  formRef,
} = useTableCrud(
  {
    name: '派单',
    doCreate: add,
    doUpdate: update,
    refresh: refresh,
    initForm: {
      a: '',
      b: '',
      c: '',
      d: '',
      e: '',
      f: '',
      g: '',
      h: '',
      i: '',
      j: '',
      k: '',
    },
  },
  formDialogRef
);
</script>

<style></style>