zsjz-ai/ai-frontend/packages/plat/views/tpl/tpl.vue

<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="default" @click="handleImport()">
          <Icon icon="i-ant-design:import-outlined" /> {{ '导入' }}
        </a-button>
        <a-button type="primary" @click="handleForm({ op: 'add' })" v-auth="'sys:empUser:edit'">
          <Icon icon="i-fluent:add-12-filled" /> {{ '新增' }}
        </a-button>
      </template>
    </BasicTable>
  </div>
</template>
<script lang="ts" setup name="ViewsCaseDataTemplateList">
  import { ref, onMounted } from 'vue';
  import { Icon } from '@jeesite/core/components/Icon';
  import { BasicTable, BasicColumn, useTable } from '@jeesite/core/components/Table';
  import { TableInfo } from '../../api/tpl/types/dto';
  import { FormProps } from '@jeesite/core/components/Form';
  import { tplPage } from '@jeesite/plat/api/tpl/tplApi';
  const loading = ref(false);

  const searchForm: FormProps<TableInfo> = {
    baseColProps: { md: 8, lg: 6 },
    labelWidth: 100,
    showAdvancedButton: true,

    schemas: [
      {
        label: '模板名称',
        field: 'tableNameCn',
        component: 'Input',
      },
      {
        label: '表类别',
        field: 'classify',
        component: 'Select',
        componentProps: {
          options: [
            { label: '话单数据库', value: '话单数据库' },
            { label: '金融数据库', value: '金融数据库' },
            { label: '基本信息数据库', value: '基本信息数据库' },
            { label: '轨迹数据库', value: '轨迹数据库' },
          ],
          allowClear: true,
          onChange: handleSuccess,
        },
      },
    ],
    resetFunc: async () => {},
  };
  const ctrlPermi = ref('');
  const tableColumns: BasicColumn<TableInfo>[] = [
    { title: '表类别', dataIndex: 'classify', key: 'a.classify', width: 100 },
    { title: '表中文名称', dataIndex: 'tableNameCn', key: 'a.tableNameCn', width: 150 },
    { title: '检测表头', dataIndex: 'headers', key: 'a.headers' },
  ];
  const actionColumn: BasicColumn<TableInfo> = {
    width: 180,
    actions: (record: TableInfo) => [
      {
        icon: 'i-clarity:note-edit-line',
        title: '编辑模板',
        onClick: handleForm.bind(this, { id: record.id, op: 'edit' }),
      },
      {
        icon: 'i-ant-design:delete-outlined',
        color: 'error',
        title: '删除模板',
        popConfirm: {
          title: '是否确认删除模板',
          confirm: handleDelete.bind(this, { id: record.id }),
        },
      },
    ],
    dropDownActions: () => [],
  };

  const [registerTable, { reload, getForm }] = useTable<TableInfo>({
    api: tplPage,
    beforeFetch: (params) => {
      params.ctrlPermi = ctrlPermi.value;
      return params;
    },
    immediate: false,
    columns: tableColumns,
    actionColumn: actionColumn,
    formConfig: searchForm,
    showTableSetting: true,
    useSearchForm: true,
    showSearchForm: true,
    canResize: true,
    // pagination: { defaultPageSize: 10 },
    // defaultRowSelection: {
    //   onChange: (selectedRowKeys: string[], _selectedRows: Recordable[]) => {
    //     selectedRowKeysRef.value = selectedRowKeys;
    //   },
    // },
  });
  onMounted(async () => {
    await reload();
  });
  async function handleImport() {
    loading.value = true;
    try {
      const params = getForm();

      loading.value = false;
    } catch (error) {
      loading.value = false;
    }
  }
  async function handleForm(record: Recordable) {
    loading.value = true;
    try {
      const params = getForm();

      loading.value = false;
    } catch (error) {
      loading.value = false;
    }
  }
  async function handleRule(record: Recordable) {}
  async function handleDelete(record: Recordable) {
    handleSuccess(record);
  }
  function handleSuccess(_record: Recordable) {
    reload();
  }
</script>