boluo-admin-main/src/pages/table-list/staff-qrcode/index.tsx

import { PlusOutlined } from '@ant-design/icons';
import { ActionType, ProColumns, ProFormInstance, ProFormText, ProFormUploadButton } from '@ant-design/pro-components';
import { ModalForm, PageContainer, ProTable } from '@ant-design/pro-components';
import '@umijs/max';
import { Button, message } from 'antd';
import { createStyles } from 'antd-style';
import dayjs from 'dayjs';
import React, { useRef, useState } from 'react';

import { TIME_FORMAT } from '@/constants/global';
import { uploadFile } from '@/services/file';
import { deleteStaff, getStaffList, setDefaultStaff, updateStaff } from '@/services/list';

const useStyles = createStyles(({ token }) => {
  return {
    img: {
      width: 100,
      height: 100,
    },
    delete: {
      color: token.colorError,
    },
    button: {
      marginRight: '8px',
    },
  };
});

const TableList: React.FC = () => {
  const [updateModalOpen, handleUpdateModalOpen] = useState<boolean>(false);
  const [currentRow, setCurrentRow] = useState<API.StaffListItem>();
  const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();
  const { styles } = useStyles();

  const handleDefault = async (id: number) => {
    await setDefaultStaff(id);
    actionRef.current?.reload();
    message.success('操作成功');
  };

  const handleDelete = async (id: number) => {
    await deleteStaff(id);
    actionRef.current?.reload();
    message.success('操作成功');
  };

  const handleUpload = async (file: File) => {
    const { url } = await uploadFile({ file, type: 'IMAGE' });
    return url;
  };

  const columns: ProColumns<API.StaffListItem>[] = [
    {
      title: '昵称',
      dataIndex: 'staffName',
      valueType: 'textarea',
    },
    {
      title: '二维码',
      dataIndex: 'staffQrCode',
      valueType: 'textarea',
      copyable: true,
      search: false,
      render(_dom, { staffQrCode }) {
        return <img className={styles.img} src={staffQrCode} alt="" />;
      },
    },
    {
      title: '默认',
      dataIndex: 'isDefault',
      valueType: 'textarea',
      search: false,
      renderText(isDefault) {
        return isDefault ? '是' : '否';
      },
    },
    {
      title: '添加时间',
      dataIndex: 'created',
      valueType: 'dateTime',
      renderText(created: string) {
        return dayjs(created).format(TIME_FORMAT);
      },
      search: false,
    },
    {
      title: '操作',
      valueType: 'option',
      render: (_, record) => (
        <>
          <a
            key="config"
            className={styles.button}
            onClick={() => {
              handleUpdateModalOpen(true);
              setCurrentRow(record);
              formRef.current?.setFieldsValue({
                ...record,
                qrCode: [
                  {
                    uid: `${record.id}_qrCode`,
                    name: `${record.staffName}_qrCode`,
                    status: 'done',
                    url: record.staffQrCode,
                  },
                ],
              });
            }}
          >
            修改
          </a>
          <a key="default" className={styles.button} onClick={() => handleDefault(record.id)}>
            设为默认
          </a>
          <a key="delete" className={styles.delete} onClick={() => handleDelete(record.id)}>
            删除
          </a>
        </>
      ),
    },
  ];
  return (
    <PageContainer>
      <ProTable<API.StaffListItem, API.PageParams>
        headerTitle="查询表格"
        actionRef={actionRef}
        rowKey="key"
        search={{ labelWidth: 120, collapsed: false, collapseRender: false }}
        request={getStaffList}
        columns={columns}
        toolBarRender={() => [
          <Button
            type="primary"
            key="add"
            icon={<PlusOutlined />}
            onClick={() => {
              handleUpdateModalOpen(true);
              setCurrentRow(undefined);
              formRef.current?.resetFields();
            }}
          >
            新增
          </Button>,
        ]}
      />
      <ModalForm
        title={`${currentRow ? '修改' : '新增'}运营`}
        width="400px"
        formRef={formRef}
        open={updateModalOpen}
        onOpenChange={handleUpdateModalOpen}
        onFinish={async formData => {
          const params: API.UpdateStaffParams = {
            id: currentRow?.id,
            isDefault: currentRow?.isDefault || 0,
            staffName: formData?.staffName,
            staffQrCode: formData.qrCode[0].xhr.responseURL,
          };
          console.log('update confirm', formData, params);
          try {
            await updateStaff(params);
            actionRef.current?.reload();
            formRef.current?.resetFields();
          } catch (e) {}
          handleUpdateModalOpen(false);
        }}
      >
        <ProFormText name="staffName" label="昵称" rules={[{ required: true, message: '必填项' }]} />
        <ProFormUploadButton
          name="qrCode"
          label="上传"
          max={1}
          accept="image/*"
          rules={[{ required: true, message: '必填项' }]}
          fieldProps={{
            name: 'file',
          }}
          action={handleUpload}
        />
      </ModalForm>
    </PageContainer>
  );
};
export default TableList;