后台管理

src/pages/Staff/List/components/AdminEditModal.tsx

@@ -4,8 +4,11 @@ import type React from 'react';
 import { useImperativeHandle, useState } from 'react';
 import ModalPlugin from '@/components/ModalPlugin';
 import { statusOptions } from '@/configs/adminConfig';
+import { AdminDepartmentServices } from '@/services/AdminDepartmentServices';
+import { AdminGroupServices } from '@/services/AdminGroupServices';
 import { AdminServices } from '@/services/AdminServices';
-import type { IRef } from '@/utils/type';
+import { toArray } from '@/utils/common';
+import type { IOption, IRef } from '@/utils/type';
 import { useRequest } from '@/utils/useRequest';
 
 interface IProps extends IRef {
@@ -21,6 +24,23 @@ export const AdminEditModal: React.FC<IProps> = (props) => {
   const [title, setTitle] = useState('');
   const [form] = Form.useForm();
   const [data, setData] = useState<any>(null);
+  const [department, setDepartment] = useState<IOption[]>([]);
+  const [group, setGroup] = useState<IOption[]>([]);
+
+  const { request: getAdminDepartmentAjaxListRequest } = useRequest(
+    AdminDepartmentServices.getAdminDepartmentAjaxList,
+    {
+      onSuccessCodeZero: (res) => {
+        setDepartment(toArray(res.data).map((el) => ({ value: el.department_id, label: el.department_name })));
+      },
+    },
+  );
+
+  const { request: getAdminGroupAjaxListRequest } = useRequest(AdminGroupServices.getAdminGroupAjaxList, {
+    onSuccessCodeZero: (res) => {
+      setGroup(toArray(res.data).map((el) => ({ value: el.group_id, label: el.name })));
+    },
+  });
 
   // 请求成功回调
   const success = (res: any) => {
@@ -38,6 +58,7 @@ export const AdminEditModal: React.FC<IProps> = (props) => {
   const save = async () => {
     try {
       const values = await form.validateFields();
+      //values.group_id = values.group_id?.join(',') ?? '';
       // 编辑场景带上主键
       if (data?.admin_id) {
         values.admin_id = data.admin_id;
@@ -51,12 +72,19 @@ export const AdminEditModal: React.FC<IProps> = (props) => {
   };
 
   useImperativeHandle(props.ref, () => ({
-    show: (data?: any) => {
+    show: async (data?: any) => {
       setTitle(data ? `${data.username} 编辑` : '新增');
       setOpen(true);
       setData(data);
 
+      await getAdminDepartmentAjaxListRequest();
+      await getAdminGroupAjaxListRequest();
+
       if (data) {
+        console.log(data.group_id);
+        console.log(data.group_id.split(','));
+        console.log(data.group_id.split(',').map(Number));
+
         // 编辑场景初始化表单
         form.setFieldsValue({
           username: data.username,
@@ -65,11 +93,14 @@ export const AdminEditModal: React.FC<IProps> = (props) => {
           nickname: data.nickname,
           password: '', // 密码编辑可选
           status: String(data.status),
+          department_id: data.department_id,
+          group_id: data.group_id ? data.group_id.split(',').map(Number) : [],
         });
       } else {
         form.resetFields();
         form.setFieldsValue({
           status: '1',
+          group_id: [],
         });
       }
     },
@@ -90,6 +121,18 @@ export const AdminEditModal: React.FC<IProps> = (props) => {
       ]}
     >
       <Form form={form} labelCol={{ style: { width: window?.dfConfig?.language === 'zh-cn' ? 80 : 120 } }}>
+        <Form.Item label='岗位角色' name='group_id' required rules={[{ required: true, message: '请选择岗位角色' }]}>
+          <Select options={group} mode='multiple' allowClear placeholder='请选择岗位角色' />
+        </Form.Item>
+        <Form.Item
+          label='组织架构'
+          name='department_id'
+          required
+          rules={[{ required: true, message: '请选择组织架构' }]}
+        >
+          <Select options={department} allowClear placeholder='请选择组织架构' />
+        </Form.Item>
+
         <Form.Item
           label='用户名'
           name='username'