fix(compiler): 用户管理新增需求

config/config.ts

@@ -72,5 +72,10 @@ export default defineConfig({
   nodeModulesTransform: { type: 'none' },
   mfsu: {},
   webpack5: {},
+  chainWebpack: (memo, { webpack }) => {
+    memo
+      .plugin('name')
+      .use(webpack.ProvidePlugin, [{ process: 'process/browser', Buffer: ['buffer', 'Buffer'] }]);
+  },
   exportStatic: {},
 });

config/proxy.ts

@@ -18,7 +18,7 @@ export default {
     },
     '/web/': {
       // 要代理的地址
-      target: 'http://yongxu.yehaoji.cn:8199', // 开发
+      target: 'http://192.168.0.224:8199', // 开发
       // target: 'https://app.yongxulvjian.com', // 生产
       changeOrigin: true,
     },

src/pages/document.ejs

@@ -18,6 +18,7 @@
       content="
       Out-of-the-box mid-stage front-end/design solution."
     />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>永续绿建管理平台</title>
     <link rel="icon" href="<%= context.config.publicPath +'favicon.ico'%>" type="image/x-icon" />
   </head>

src/pages/setting/UserManagement/edit.tsx

@@ -1,14 +1,15 @@
-import React, { useState } from 'react';
-import { Col, Form, Input, message, Modal, Row, Upload } from 'antd';
-import { createUser, editUser } from '@/services/setting';
-import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
+import React, { useEffect, useState } from 'react';
 import type { UploadProps } from 'antd';
+import { Checkbox, Col, Form, Input, message, Modal, Row, Select, Upload } from 'antd';
+import { createUser, editUser, queryUserList } from '@/services/setting';
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
 import md5 from 'js-md5';
+import { queryRole } from '@/services/role';
 
 interface userEditPros {
   visible: boolean;
   editCallback: () => void;
-  params: any;
+  detailData: any;
 }
 
 /**
@@ -17,11 +18,15 @@ interface userEditPros {
  * @constructor
  */
 const Edit: React.FC<userEditPros> = (props) => {
-  const { visible, editCallback, params } = props;
+  const { visible, editCallback, detailData } = props;
   const [form] = Form.useForm();
   const uploadHeaders = { Authorization: `${localStorage.getItem('token')}` };
-  const [fileUrl, setFileUrl] = useState(params && params.photo ? params.photo : '');
+  const [fileUrl, setFileUrl]: any = useState(
+    detailData && detailData.photo ? detailData.photo : '',
+  );
   const [loading, setLoading] = useState(false);
+  const [roleList, setRoleList] = useState([]);
+  const [selectList, setSelectList] = useState([]);
 
   const getBase64 = (img: any) => {
     const reader = new FileReader();
@@ -32,6 +37,63 @@ const Edit: React.FC<userEditPros> = (props) => {
     };
   };
 
+  useEffect(() => {
+    // 编辑时
+    if (detailData) {
+      const data = [...detailData?.user_role].sort((a: any, b: any) => b.level - a.level);
+      if (data && data.length) {
+        const param = {
+          q: 'list',
+          role_id: data[0].role_parent_id,
+        };
+        // 根据角色id请求用户列表接口 保证所属名称字段编辑时回显
+        queryUserList(param).then((res) => {
+          if (res.code === 0) {
+            setSelectList(res?.data || []);
+          }
+        });
+      }
+    }
+
+    queryRole({ q: 'list' }).then((res) => {
+      if (res.code === 0) {
+        // 去掉超级管理员的角色
+        const arr = res.data.list.filter(
+          (item: { record_id: string }) => item.record_id !== '1t7svi01izqcoog3mtdyxdq1008mws8u',
+        );
+        setRoleList(arr);
+      }
+    });
+  }, []);
+
+  const handleLevel = (values: any) => {
+    const data: any = roleList.filter((option: { record_id: string }) =>
+      values.includes(option.record_id),
+    );
+    return [...data].sort((a: any, b: any) => b.level - a.level);
+  };
+
+  // 角色选择
+  const onRoleChange = (selectedValues: any) => {
+    // 切换角色时，所属名称要清空重新选择
+    form.setFieldsValue({ parent_id: '' });
+    const sortedData = handleLevel(selectedValues);
+    if (sortedData && sortedData.length > 0) {
+      const maxLevelObject = sortedData[0];
+      const param = {
+        q: 'list',
+        role_id: maxLevelObject.parent_id,
+      };
+      queryUserList(param).then((res) => {
+        if (res.code === 0) {
+          setSelectList(res?.data || []);
+        }
+      });
+    } else {
+      setSelectList([]);
+    }
+  };
+
   const filesProps: UploadProps = {
     maxCount: 1,
     action: '/web/v1/files',
@@ -66,8 +128,19 @@ const Edit: React.FC<userEditPros> = (props) => {
         if (values?.password) {
           data.password = md5(values.password);
         }
-        if (params) {
-          data.record_id = params.record_id;
+        if (values?.role_id) {
+          const user_role: { role_id: any }[] = [];
+          values?.role_id.forEach((el: any) => {
+            user_role.push({ role_id: el });
+          });
+          data.user_role = user_role;
+          delete data.role_id;
+        }
+        if (values?.parent_id) {
+          data.parent_id = values?.parent_id;
+        }
+        if (detailData) {
+          data.record_id = detailData.record_id;
           //  编辑
           editUser(data)
             .then((res) => {
@@ -120,6 +193,15 @@ const Edit: React.FC<userEditPros> = (props) => {
     },
   };
 
+  const formItemLayoutTwo = {
+    labelCol: {
+      span: 3,
+    },
+    wrapperCol: {
+      span: 21,
+    },
+  };
+
   const uploadButton = (
     <div>
       {loading ? <LoadingOutlined /> : <PlusOutlined />}
@@ -129,7 +211,7 @@ const Edit: React.FC<userEditPros> = (props) => {
 
   return (
     <Modal
-      title={`${params ? '编辑' : '新增'}`}
+      title={`${detailData ? '编辑' : '新增'}`}
       open={visible}
       onOk={onOk}
       onCancel={onCancel}
@@ -143,32 +225,16 @@ const Edit: React.FC<userEditPros> = (props) => {
               name="user_name"
               label="用户姓名"
               rules={[{ required: true, message: '请输入用户姓名' }]}
-              initialValue={params?.user_name}
+              initialValue={detailData?.user_name || ''}
             >
               <Input placeholder="请输入用户姓名" />
             </Form.Item>
           </Col>
           <Col span={12}>
-            <Form.Item
-              {...formItemLayout}
-              name="password"
-              label="密码"
-              // initialValue={params?.password}
-            >
+            <Form.Item {...formItemLayout} name="password" label="密码">
               <Input type="password" placeholder="请输入密码" />
             </Form.Item>
           </Col>
-          {/*<Col span={12}>*/}
-          {/*  <Form.Item*/}
-          {/*    {...formItemLayout}*/}
-          {/*    name="real_name"*/}
-          {/*    label="真实姓名"*/}
-          {/*    rules={[{ required: true, message: '请输入真实姓名' }]}*/}
-          {/*    initialValue={params?.real_name}*/}
-          {/*  >*/}
-          {/*    <Input placeholder="请输入真实姓名" />*/}
-          {/*  </Form.Item>*/}
-          {/*</Col>*/}
           <Col span={12}>
             <Form.Item
               {...formItemLayout}
@@ -182,11 +248,67 @@ const Edit: React.FC<userEditPros> = (props) => {
                   message: '请输入正确的手机号',
                 },
               ]}
-              initialValue={params?.phone}
+              initialValue={detailData?.phone || ''}
             >
               <Input placeholder="请输入手机号" />
             </Form.Item>
           </Col>
+          <Col span={12}>
+            <Form.Item
+              {...formItemLayout}
+              name="company"
+              label="公司名称"
+              rules={[{ required: true, message: '请输入公司名称' }]}
+              initialValue={detailData?.company || ''}
+            >
+              <Input placeholder="请输入公司名称" />
+            </Form.Item>
+          </Col>
+          <Col span={24}>
+            <Form.Item
+              {...formItemLayoutTwo}
+              name="role_id"
+              label="角色名称"
+              rules={[{ required: true, message: '请选择角色名称' }]}
+              initialValue={
+                detailData && detailData?.user_role && detailData?.user_role.length
+                  ? detailData?.user_role?.map((item: any) => item.role_id)
+                  : []
+              }
+            >
+              <Checkbox.Group
+                options={roleList.map((option: { record_id: string; name: string }) => ({
+                  label: option.name,
+                  value: option.record_id,
+                  record_id: option.record_id,
+                }))}
+                onChange={onRoleChange}
+              />
+            </Form.Item>
+          </Col>
+          <Col span={24}>
+            <Form.Item
+              {...formItemLayoutTwo}
+              name="parent_id"
+              label="所属名称"
+              rules={[{ required: true, message: '请选择所属名称' }]}
+              initialValue={detailData?.parent_name || ''}
+            >
+              <Select placeholder="请选择所属名称">
+                {selectList && selectList.length
+                  ? selectList.map(
+                      (res: { user_name: string; record_id: string; parent_id: string }) => {
+                        return (
+                          <Select.Option key={res.record_id} value={res.record_id}>
+                            {res?.user_name}
+                          </Select.Option>
+                        );
+                      },
+                    )
+                  : null}
+              </Select>
+            </Form.Item>
+          </Col>
           <Col span={12}>
             <Form.Item {...formItemLayout} name="photo" label="头像" initialValue={[]}>
               <Upload {...filesProps}>

src/pages/setting/UserManagement/index.tsx

@@ -4,7 +4,7 @@ import { PlusCircleOutlined, ReloadOutlined, SearchOutlined } from '@ant-design/
 import type { ColumnsType } from 'antd/es/table';
 import moment from 'moment';
 import Edit from '@/pages/setting/UserManagement/edit';
-import { disableUser, enableUser, queryUserList } from '@/services/setting';
+import { disableUser, enableUser, queryUserDetail, queryUserList } from '@/services/setting';
 import { PageContainer } from '@ant-design/pro-components';
 import Check from '@/pages/setting/UserManagement/check';
 
@@ -26,7 +26,7 @@ interface DataType {
 const UserManagement: React.FC = () => {
   const [form] = Form.useForm();
   const [visible, setVisible] = useState(false);
-  const [editData, setEditData] = useState<object | null>({});
+  const [detailData, setDetailData] = useState<object | null>({});
   const [searchData, setSearchData] = useState<object | null>({});
   const [dataList, setDataList] = useState([]);
   const [pagination, setPagination] = useState({ total: 0, current: 1, pageSize: 10 });
@@ -59,13 +59,18 @@ const UserManagement: React.FC = () => {
   // 新增弹框
   const onAdd = () => {
     setVisible(true);
-    setEditData(null);
+    setDetailData(null);
   };
 
   // 编辑弹框
-  const toEdit = (data: object) => {
-    setVisible(true);
-    setEditData(data);
+  const toEdit = (data: any) => {
+    // 获取详情信息
+    queryUserDetail(data.record_id).then((res) => {
+      if (res?.code === 0) {
+        setDetailData(res?.data || null);
+        setVisible(true);
+      }
+    });
   };
 
   // 新增编辑弹框回调
@@ -175,11 +180,6 @@ const UserManagement: React.FC = () => {
       dataIndex: 'user_name',
       key: 'user_name',
     },
-    // {
-    //   title: '真实姓名',
-    //   dataIndex: 'real_name',
-    //   key: 'real_name',
-    // },
     {
       title: '手机号',
       dataIndex: 'phone',
@@ -303,7 +303,7 @@ const UserManagement: React.FC = () => {
           loading={loading}
           onChange={tableChange}
         />
-        {visible && <Edit visible={visible} editCallback={editCallback} params={editData} />}
+        {visible && <Edit visible={visible} editCallback={editCallback} detailData={detailData} />}
         {checkVisible && <Check visible={checkVisible} id={checkId} onCallback={checkCallback} />}
       </Card>
     </PageContainer>