feat: 群认证

2025-10-13 23:33:58 +08:00
parent 11f2624889
commit 4991720abb
10 changed files with 549 additions and 10 deletions
--- a/src/pages/table-list/staff-qrcode/index.tsx
+++ b/src/pages/table-list/staff-qrcode/index.tsx
@ -0,0 +1,185 @@
+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;