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, updateAdminState } from '@/api/user';
import { h } from 'vue';
import { Switch, Tag } 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: 'auditState',
    hideInSearch: true,
    customRender: ({ record }) => {
      const text = record.auditState === 0 ? '未审核' : '审核通过',
        color = record.auditState === 0 ? 'red' : 'green';
      return <Tag color={color}>{text}</Tag>;
    },
  },
  {
    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 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;
        updateAdminState({
          id: record.id!,
          adminState: newState,
        })
          .then(() => {
            record.isAdmin = newState;
          })
          .catch(() => {})
          .finally(() => {
            record.pendingStatus = false;
          });
      };

      // 渲染函数写法
      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',
    },
  },
];