功能：系统设置-成员管理-编辑客服弹窗

src/api/interface/systemManageType.ts

@@ -256,6 +256,8 @@ export type listCompanyMembersType = InterItemFunction<
       userAccountId: number;
     };
     userSex: number;
+    serviceAlias: string;
+    serviceImg: string;
   }[]
 >;
 //单位-成员绑定
@@ -480,3 +482,12 @@ export type systemMessageListByUserType = InterListFunction<
     subject: string;
   }
 >;
+// 修改添加客服别名客服头像
+export type updateAliasImgByUidType = InterFunction<
+  {
+    serviceAlias: string;
+    serviceImg: string;
+    userAccountId?: number;
+  },
+  NonNullable<unknown>
+>;

src/api/modules/systemManage.ts

@@ -28,6 +28,7 @@ import {
   systemMessageListByUserType,
   transferLeaderType,
   unbindCompanyMemberType,
+  updateAliasImgByUidType,
   updateBAccountType,
   updatePasswordType,
   updateRoleInfoType,
@@ -93,6 +94,9 @@ export class SystemManageAPI {
   //单位-管理员转让
   static transferLeader: transferLeaderType = (params) =>
     axios.get('/userapp/company/transferLeader', { params });
+  //修改添加客服别名客服头像
+  static updateAliasImgByUid: updateAliasImgByUidType = (params) =>
+    axios.post('/userapp/company/updateAliasImgByUid', params);
 
   //账号权限-列表
   static getListRoleInfoPage: listRoleInfoPageType = (data) =>

src/components/uploader/index.tsx

@@ -23,6 +23,7 @@ interface PropsType {
     }[],
   ) => void; // 上传文件改变时的状态
   defaultFileList?: { url: string }[]; // 默认文件列表
+  value?: { url: string }[]; // 默认文件列表
   disabled?: boolean; // 是否禁用
   showUploadList?: boolean;
 }
@@ -45,6 +46,7 @@ export const Uploader: React.FC<PropsType> = (props) => {
     fileLength,
     onChange,
     defaultFileList,
+    value,
     disabled,
   } = props;
   // 开始上传
@@ -145,13 +147,19 @@ export const Uploader: React.FC<PropsType> = (props) => {
       .map((v) => fileTypeList.find((i) => i.value === v)?.label)
       .filter((v) => !!v)
       .join(',');
+
+  // 组件挂载
   useEffect(() => {
     // 如果有默认文件列表
     if (defaultFileList?.length) {
       setFileList(defaultFileList);
-    } else {
-      setFileList([]);
+      return;
+    }
+    if (value?.length) {
+      setFileList(value);
+      return;
     }
+    setFileList([]);
   }, [defaultFileList]);
   return (
     <div className='uploader-view'>

src/pages/systemManage/companyManage/companyMember/comp/editMemberModal/index.tsx

+import React, { useEffect } from 'react';
+import { Form, Input, message, Modal, ModalProps } from 'antd';
+import { listCompanyMembersType, updateAliasImgByUidType } from '~/api/interface/systemManageType';
+import { InterListType, InterReqType } from '~/api/interface';
+import { Uploader } from '~/components/uploader';
+import { UploadOutlined } from '@ant-design/icons';
+import { SystemManageAPI } from '~/api';
+
+// 单位-成员列表返回类型
+type MembersType = InterListType<listCompanyMembersType>[0];
+// 请求类型
+type ReqType = InterReqType<updateAliasImgByUidType>;
+
+const EditMemberModalView: React.FC<ModalProps & { data?: MembersType; onCancel: () => void }> = ({
+  open,
+  onCancel,
+  title,
+  data,
+}) => {
+  // 表单钩子
+  const [form] = Form.useForm<ReqType & { serviceImg: { url: string }[] }>();
+  // 关闭弹窗事件
+  const handleCancel = () => {
+    onCancel?.();
+  };
+  // 确认事件
+  const handleOk = () => {
+    form.validateFields().then(async (values) => {
+      const res = await SystemManageAPI.updateAliasImgByUid({
+        serviceAlias: values.serviceAlias,
+        serviceImg: values.serviceImg?.[0].url,
+        userAccountId: data?.id,
+      });
+      if (res && res.code === '200') {
+        message.success('操作成功');
+        onCancel?.();
+      }
+    });
+  };
+  // 组件挂载
+  useEffect(() => {
+    if (!open) return;
+    form.setFieldsValue({
+      serviceAlias: data?.serviceAlias || data?.userName || data?.nickName,
+      serviceImg: [{ url: data?.serviceImg || data?.userImg }],
+    });
+    // console.log('组件挂载 --->', data);
+  }, [open]);
+  return (
+    <Modal open={open} title={title} onCancel={handleCancel} onOk={handleOk}>
+      <Form form={form} wrapperCol={{ span: 10 }}>
+        <Form.Item
+          label='客服昵称'
+          name='serviceAlias'
+          rules={[{ required: true, message: '请输入客服昵称' }]}
+        >
+          <Input placeholder='请输入客服昵称' maxLength={25} />
+        </Form.Item>
+        <Form.Item
+          label='客服头像'
+          name='serviceImg'
+          rules={[{ required: true, message: '请上传客服头像' }]}
+        >
+          <Uploader fileUpload={true}>
+            <UploadOutlined />
+          </Uploader>
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default EditMemberModalView;

src/pages/systemManage/companyManage/companyMember/index.tsx

@@ -2,13 +2,14 @@ import { useEffect, useState } from 'react';
 import { SystemManageAPI } from '~/api';
 import { InterDataType, PaginationProps } from '~/api/interface';
 import { listCompanyMembersType } from '~/api/interface/systemManageType';
-import { Button, message, Modal, SelectProps, Table } from 'antd';
+import { Button, message, Modal, SelectProps, Table, Image } from 'antd';
 import '~/pages/systemManage/companyManage/companyDetail/index.scss';
 import { ColumnsType } from 'antd/es/table';
 import { PlusOutlined } from '@ant-design/icons';
 import AddPeopleModal from '~/pages/systemManage/companyManage/companyDetail/components/addPeopleModal';
 import { useSelector } from 'react-redux';
 import TransferLeaderModal from '~/pages/systemManage/companyManage/companyDetail/components/transferLeaderModal';
+import EditMemberModalView from '~/pages/systemManage/companyManage/companyMember/comp/editMemberModal';
 
 //单位-成员列表返回类型
 type companyMembersType = InterDataType<listCompanyMembersType>['list'];
@@ -27,6 +28,8 @@ const CompanyMemberView = () => {
   const [currentCompanyMembers, setCurrentCompanyMembers] = useState<companyMembersType[0]>();
   const [addPeopleModalShow, setAddPeopleModalShow] = useState<boolean>(false);
   const [transferLeaderModalShow, setTransferLeaderModalShow] = useState<boolean>(false);
+  // 编辑弹窗是否开启
+  const [editModalShow, setEditModalShow] = useState<boolean>(false);
   //单位成员列表
   const getListCompanyMembers = (companyInfoId: number) => {
     SystemManageAPI.getListCompanyMembers({
@@ -120,23 +123,45 @@ const CompanyMemberView = () => {
       render: (text, record) => text || record?.nickName,
     },
     {
+      title: '手机号',
+      align: 'center',
+      dataIndex: 'phoneNum',
+    },
+    {
       title: '角色',
       align: 'center',
       dataIndex: 'leader',
       render: (text) => roleList?.find((i) => i?.value === text)?.label || text,
     },
     {
-      title: '手机号',
+      title: '客服昵称',
       align: 'center',
-      dataIndex: 'phoneNum',
+      dataIndex: 'serviceAlias',
+      render: (text, record) => text || record?.nickName || record?.userName || '无',
+    },
+    {
+      title: '客服头像',
+      align: 'center',
+      dataIndex: 'serviceImg',
+      render: (text, record) => <Image src={text || record?.userImg} width={35} />,
     },
     {
       title: '操作',
       width: '15%',
       align: 'center',
+      fixed: 'right',
       render: (_text: string, record) => (
         <>
-          {/*userInfo.companyInfoVO.leader === record.leader*/}
+          <Button
+            type='link'
+            disabled={userInfo.companyInfoVO.leader !== 1 || record.leader === 2}
+            onClick={() => {
+              setCurrentCompanyMembers(record);
+              setEditModalShow(true);
+            }}
+          >
+            编辑
+          </Button>
           <Button
             type='link'
             disabled={userInfo.companyInfoVO.leader !== 1}
@@ -150,6 +175,7 @@ const CompanyMemberView = () => {
               userInfo.companyInfoVO.leader !== 1 || userInfo.companyInfoVO.leader === record.leader
             }
             onClick={() => unbindCompanyClick(record)}
+            danger={true}
           >
             解绑
           </Button>
@@ -176,6 +202,7 @@ const CompanyMemberView = () => {
           columns={tableColumns}
           dataSource={listCompanyMembers}
           size={'small'}
+          scroll={{ x: 1000 }}
           pagination={{
             total: pagination.totalCount,
             pageSize: pagination.pageSize,
@@ -202,6 +229,16 @@ const CompanyMemberView = () => {
         companyInfoId={companyId}
         currentCompanyMembers={currentCompanyMembers}
       />
+      {/*编辑客服弹窗*/}
+      <EditMemberModalView
+        open={editModalShow}
+        data={currentCompanyMembers}
+        title={'编辑客服'}
+        onCancel={() => {
+          setEditModalShow(false);
+          getListCompanyMembers(companyId);
+        }}
+      />
     </div>
   );
 };