IssueSupportManage/src/views/system/user/columns.tsx

import { debounce } from 'lodash-es';
import type { TableColumn } from '@/components/core/dynamic-table';
import { formatToDateTime } from '@/utils/dateUtil';
import { updateUser, updateState } from '@/api/user';
import { h } from 'vue';
import { Switch } from 'ant-design-vue';
import { sexTypeList } from './data';
export type TableListItem = API.UserInfoType;
export type TableColumnItem = TableColumn<TableListItem>;
// 数据项类型
// export type ListItemType = typeof tableData[number];
// 使用TableColumn<ListItemType> 将会限制dataIndex的类型，但换来的是dataIndex有类型提示
export const baseColumns: TableColumnItem[] = [
  {
    title: '账号',
    align: 'center',
    dataIndex: 'account',
    // sorter: true,
    width: 150,
    resizable: true,
    formItemProps: {
      defaultValue: '',
      required: false,
    },
  },
  {
    title: '姓名',
    align: 'center',
    dataIndex: 'username',
    width: 150,
    resizable: true,
    formItemProps: {
      defaultValue: '',
      required: false,
    },
  },
  {
    title: '手机号码',
    align: 'center',
    dataIndex: 'mobile',
    width: 150,
    formItemProps: {
      defaultValue: '',
      required: false,
    },
  },
  {
    title: '邮箱',
    align: 'center',
    dataIndex: 'email',
    width: 150,
    formItemProps: {
      defaultValue: '',
      required: false,
    },
  },
  {
    title: '性别',
    align: 'center',
    dataIndex: 'sex',
    width: 100,
    formItemProps: {
      defaultValue: '',
      required: false,
      component: 'Select',
      label: '性别',
      componentProps: {
        mode: 'single',
        request: async () => {
          // const data = await getSexList();
          return sexTypeList;
        },
      },
    },
    customRender: ({ record }) => {
      const text = sexTypeList.find((e) => e.value === record.sex)?.label;
      return <div>{text}</div>;
    },
  },
  {
    title: '帐号状态',
    align: 'center',
    width: 100,
    dataIndex: 'state',
    hideInSearch: true,
    formItemProps: {
      component: 'Select',
      componentProps: {
        options: [
          {
            label: '启用',
            value: 0,
          },
          {
            label: '禁用',
            value: 1,
          },
        ],
      },
    },
    customRender: ({ record }) => {
      const onChange = (checked: boolean) => {
        console.log('checked: ', checked);
        record.pendingStatus = true;
        const newState = checked ? 0 : 1;
        record.state = newState;
        updateState({
          id: record.id!,
          state: newState,
        })
          .then(() => {
            record.state = newState;
          })
          .catch(() => {})
          .finally(() => {
            record.pendingStatus = false;
          });
      };
      // return (
      //   <a-switch
      //     v-model:checked={record.state}
      //     v-model:loading={record.pendingStatus}
      //     onChange={onChange}
      //   ></a-switch>
      // );
      // 渲染函数写法
      return h(Switch, {
        checked: record.state === 0 ? true : false,
        loading: record.pendingStatus,
        onChange,
      });
    },
  },
  {
    title: '是否管理员',
    align: 'center',
    width: 100,
    dataIndex: 'isAdmin',
    hideInSearch: true,
    formItemProps: {
      component: 'Select',
      componentProps: {
        options: [
          {
            label: '是',
            value: 1,
          },
          {
            label: '否',
            value: 0,
          },
        ],
      },
    },
    customRender: ({ record }) => {
      const onChange = (checked: boolean) => {
        console.log('checked: ', checked);
        record.pendingStatus = true;
        const newState = checked ? 1 : 0;
        record.isAdmin = newState;
        updateUser(record)
          .then(() => {
            record.isAdmin = newState;
          })
          .catch(() => {})
          .finally(() => {
            record.pendingStatus = false;
          });
      };
      // return (
      //   <a-switch
      //     v-model:checked={record.state}
      //     v-model:loading={record.pendingStatus}
      //     onChange={onChange}
      //   ></a-switch>
      // );
      // 渲染函数写法
      return h(Switch, {
        checked: record.isAdmin === 1 ? true : false,
        loading: record.pendingStatus,
        onChange,
      });
    },
  },
  {
    title: '创建时间',
    align: 'center',
    width: 200,
    dataIndex: 'createTime',
    formItemProps: {
      defaultValue: '',
      required: false,
      component: 'RangePicker',
    },
  },
];