feat: 群认证

config/proxy.ts

@@ -11,16 +11,16 @@
  */
 export default {
   // 如果需要自定义本地开发服务器  请取消注释按需调整
-  // dev: {
+  dev: {
     // localhost:8000/api/** -> https://preview.pro.ant.design/api/**
-  //   '/api/': {
-  //     // 要代理的地址
-  //     target: 'http://10.147.18.100:8082',
-  //     // 配置了这个可以从 http 代理到 https
-  //     // 依赖 origin 的功能可能需要这个，比如 cookie
-  //     changeOrigin: true,
-  //   },
-  // },
+    '/api/': {
+      // 要代理的地址
+      target: 'https://dev.neighbourhood.cn',
+      // 配置了这个可以从 http 代理到 https
+      // 依赖 origin 的功能可能需要这个，比如 cookie
+      changeOrigin: true,
+    },
+  },
   mako: {},
   /**
    * @name 详细的代理配置

config/routes.ts

@@ -11,6 +11,8 @@ export default [
   { name: '用户管理', icon: 'table', path: '/list/anchor', component: './table-list/anchor' },
   { name: '主播报单管理', icon: 'table', path: '/list/declaration', component: './table-list/declaration' },
   { name: '模卡管理', icon: 'table', path: '/list/resume', component: './table-list/material' },
+  { name: '运营二维码管理', icon: 'table', path: '/list/staff-qrcode', component: './table-list/staff-qrcode' },
+  { name: '城市运营管理', icon: 'table', path: '/list/city-operation', component: './table-list/city-operation' },
   { path: '/', redirect: '/list/job' },
   { path: '*', layout: false, component: './404' },
 ];

package.json

@@ -96,5 +96,6 @@
   },
   "engines": {
     "node": ">=12.0.0"
-  }
+  },
+  "packageManager": "pnpm@10.12.4+sha512.5ea8b0deed94ed68691c9bad4c955492705c5eeb8a87ef86bc62c74a26b037b08ff9570f108b2e4dbd1dd1a9186fea925e527f141c648e85af45631074680184"
 }

src/constants/api.ts

@@ -25,4 +25,16 @@ export enum AdminAPI {
   // 模卡
   MATERIAL_LIST = '/api/bo/resume/list',
   MATERIAL_UPDATE = '/api/bo/resume/update',
+  // 七牛
+  UPLOAD_FILE = '/api/backend/file/upload',
+  // 运营人员
+  STAFF_LIST = '/api/staff/getStaffPageList',
+  STAFF_ALL = '/api/staff/getAllStaff',
+  STAFF_UPDATE = '/api/staff/addOrEdit',
+  STAFF_DELETE = '/api/staff/{id}',
+  STAFF_SET_DEFAULT = '/api/staff/setAsDefault/{id}',
+  // 城市运营
+  CITY_OPERATOR_LIST = '/api/cityOperator/getStaffPageList',
+  CITY_OPERATOR_UPDATE = '/api/cityOperator/addOrEdit',
+  CITY_OPERATOR_DELETE = '/api/cityOperator/{id}',
 }

src/pages/table-list/city-operation/index.tsx

@@ -0,0 +1,206 @@
+import { PlusOutlined } from '@ant-design/icons';
+import { ActionType, ProColumns, ProFormInstance, ProFormSelect, ProFormText } from '@ant-design/pro-components';
+import { ModalForm, PageContainer, ProTable } from '@ant-design/pro-components';
+import '@umijs/max';
+import { Button, message } from 'antd';
+import { Select } from 'antd';
+import { createStyles } from 'antd-style';
+import dayjs from 'dayjs';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+
+import { CITY_OPTIONS } from '@/constants/city';
+import { TIME_FORMAT } from '@/constants/global';
+import { deleteCityOperator, getAllStaffList, getCityOpratorList, updateCityOperator } 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.CityOperatorListItem>();
+  const actionRef = useRef<ActionType>();
+  const formRef = useRef<ProFormInstance>();
+  const [staffOptions, setStaffOptions] = useState<Array<{ label: string; value: number; isDefault: boolean }>>([]);
+  const defaultStaff = useMemo(() => {
+    return staffOptions.find(it => it.isDefault) || staffOptions[0];
+  }, [staffOptions]);
+  const { styles } = useStyles();
+
+  const getAllStaffOptions = async () => {
+    try {
+      const results = await getAllStaffList();
+      setStaffOptions(
+        results.map(it => ({
+          label: it.staffName,
+          isDefault: Boolean(it.isDefault),
+          value: it.id,
+        })),
+      );
+    } catch (e) {
+    } finally {
+    }
+  };
+
+  const handleDelete = async (id: number) => {
+    await deleteCityOperator(id);
+    message.success('操作成功');
+    actionRef.current?.reload();
+  };
+
+  useEffect(() => {
+    getAllStaffOptions();
+  }, []);
+
+  const columns: ProColumns<API.CityOperatorListItem>[] = [
+    {
+      title: '城市',
+      dataIndex: 'cityCode',
+      valueType: 'textarea',
+      render: (_text, record) => record.cityName,
+      renderFormItem() {
+        return (
+          <Select
+            showSearch
+            allowClear
+            options={CITY_OPTIONS}
+            filterOption={(input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase())}
+          />
+        );
+      },
+    },
+    {
+      title: '运营',
+      dataIndex: 'staffName',
+      valueType: 'textarea',
+      search: false,
+    },
+    {
+      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,
+                staff: {
+                  label: record.staffName,
+                  value: record.staffId,
+                },
+                city: {
+                  label: record.cityName,
+                  value: record.cityCode,
+                },
+              });
+            }}
+          >
+            修改
+          </a>
+          <a key="delete" className={styles.delete} onClick={() => handleDelete(record.id)}>
+            删除
+          </a>
+        </>
+      ),
+    },
+  ];
+  return (
+    <PageContainer>
+      <ProTable<API.CityOperatorListItem, API.PageParams>
+        headerTitle="查询表格"
+        actionRef={actionRef}
+        rowKey="key"
+        search={{ labelWidth: 120, collapsed: false, collapseRender: false }}
+        request={getCityOpratorList}
+        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}
+        initialValues={{ staff: defaultStaff }}
+        open={updateModalOpen}
+        onOpenChange={handleUpdateModalOpen}
+        onFinish={async formData => {
+          const params: API.UpdateCityOperator = {
+            id: currentRow?.id,
+            staffId: formData.staff.value,
+            staffName: formData.staff.label,
+            cityCode: formData.city.value,
+            cityName: formData.city.label,
+            groupLink: formData.groupLink,
+          };
+          console.log('update confirm', formData, params);
+          try {
+            await updateCityOperator(params);
+            actionRef.current?.reload();
+            formRef.current?.resetFields();
+          } catch (e) {}
+          handleUpdateModalOpen(false);
+        }}
+      >
+        <ProFormSelect.SearchSelect
+          name="city"
+          mode="single"
+          label="所属城市"
+          options={CITY_OPTIONS}
+          rules={[{ required: true, message: '必填项' }]}
+        />
+        <ProFormSelect.SearchSelect
+          mode="single"
+          name="staff"
+          label="运营"
+          options={staffOptions}
+          rules={[{ required: true, message: '必填项' }]}
+        />
+        <ProFormText
+          name="groupLink"
+          label="进群链接"
+          rules={[
+            { required: true, message: '必填项' },
+            { message: '请输入链接', type: 'url' },
+          ]}
+        />
+      </ModalForm>
+    </PageContainer>
+  );
+};
+export default TableList;

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;

src/services/file.ts

@@ -0,0 +1,13 @@
+import { request } from '@@/exports';
+
+import { AdminAPI } from '@/constants/api';
+
+export async function uploadFile(options: { file: File; type: 'VIDEO' | 'IMAGE' }): Promise<API.UploadFile> {
+  return request<API.UploadFile>(AdminAPI.UPLOAD_FILE, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+    data: options,
+  });
+}

src/services/list.ts

@@ -4,6 +4,7 @@ import { AdminAPI } from '@/constants/api';
 import { EmployType, JobType } from '@/constants/job';
 import { request } from '@umijs/max';
 import { SortOrder } from 'antd/es/table/interface';
+import { buildUrl } from '@/services/utils';
 
 function transformPageParams(params: API.PageParams & Record<string, any>) {
   params.page = params.current;
@@ -229,3 +230,71 @@ export async function updateDeclarationInfo(options: API.UpdateDeclarationParams
     },
   });
 }
+
+export async function getStaffList(
+  params: API.PageParams & Partial<API.StaffListItem>,
+  options?: { [key: string]: any },
+) {
+  const result = await request<API.TableList<API.StaffListItem>>(AdminAPI.STAFF_LIST, {
+    method: 'GET',
+    params: {
+      ...transformPageParams(params),
+      ...(options || {}),
+    },
+  });
+  return result;
+}
+
+export async function getAllStaffList() {
+  return await request<API.StaffListItem[]>(AdminAPI.STAFF_ALL, { method: 'GET' });
+}
+
+export async function updateStaff(options: API.UpdateStaffParams) {
+  return request(AdminAPI.STAFF_UPDATE, {
+    method: 'POST',
+    data: {
+      ...(options || {}),
+    },
+  });
+}
+
+export async function deleteStaff(id: number) {
+  return request(buildUrl(AdminAPI.STAFF_DELETE, { id }), {
+    method: 'DELETE',
+  });
+}
+
+export async function setDefaultStaff(id: number) {
+  return request(buildUrl(AdminAPI.STAFF_SET_DEFAULT, { id }), {
+    method: 'PUT',
+  });
+}
+
+export async function getCityOpratorList(
+  params: API.PageParams & Partial<API.CityOperatorListItem>,
+  options?: { [key: string]: any },
+) {
+  const result = await request<API.TableList<API.CityOperatorListItem>>(AdminAPI.CITY_OPERATOR_LIST, {
+    method: 'GET',
+    params: {
+      ...transformPageParams(params),
+      ...(options || {}),
+    },
+  });
+  return result;
+}
+
+export async function updateCityOperator(options: API.UpdateCityOperator) {
+  return request<API.GroupListItem>(AdminAPI.CITY_OPERATOR_UPDATE, {
+    method: 'POST',
+    data: {
+      ...(options || {}),
+    },
+  });
+}
+
+export async function deleteCityOperator(id: number) {
+  return request(buildUrl(AdminAPI.CITY_OPERATOR_DELETE, { id }), {
+    method: 'DELETE',
+  });
+}

src/services/typings.d.ts

@@ -322,4 +322,50 @@ declare namespace API {
   type UpdateDeclarationParams = Pick<DeclarationListItem, 'id' | 'weComStatus'>;
 
   type UpdateMaterialParams = Pick<MaterialListItem, 'id'> & { adminOpen: number };
+
+  interface UploadFile {
+    id: string;
+    url: string;
+    coverUrl: string;
+  }
+
+  interface StaffListItem {
+    id: number;
+    staffName: string;
+    staffQrCode: string;
+    isDefault: 1 | 0;
+    created: string;
+    updated: string;
+  }
+
+  interface UpdateStaffParams {
+    id?: number;
+    staffName: string;
+    staffQrCode: string;
+    isDefault: 1 | 0;
+    created?: string;
+    updated?: string;
+  }
+
+  interface CityOperatorListItem {
+    cityName: string;
+    staffName: string;
+    created: string;
+    updated: string;
+    staffId: number;
+    cityCode: string;
+    groupLink: string;
+    id: number;
+  }
+
+  interface UpdateCityOperator {
+    id?: number;
+    staffId: number;
+    staffName?: string;
+    cityName?: string;
+    cityCode: string;
+    groupLink: string;
+    created?: string;
+    updated?: string;
+  }
 }

src/services/utils.ts

@@ -0,0 +1,5 @@
+export function buildUrl(url: string, params: Record<string, string | number>): string {
+  return Object.entries(params).reduce((result, [key, value]) => {
+    return result.replace(new RegExp(`\\{${key}\\}`, 'g'), String(value));
+  }, url);
+}