feat: 新增小程序权限过滤处理&&优化系统管理页面细节

src/models/menu.js

 import { getMenuData } from '@/services/menu';
+import { APPLETS_PERMISSION_IDENTIFIER } from '@/utils/constants';
 
 export const filterPermission = list => {
   const permissionData = {};
@@ -46,7 +47,12 @@ const MenuModel = {
         const value = [];
         const data = [...tableData];
         data
-          .filter(item => item.node && item.node.type.value < 3)
+          .filter(
+            item =>
+              item.node &&
+              item.node.code !== APPLETS_PERMISSION_IDENTIFIER &&
+              item.node.type.value < 3,
+          )
           .forEach(item => {
             let obj = {};
             obj = { ...item.node };

src/pages/systemManage/Account/UserInfo/index.jsx

 import React, { useRef, useState, useEffect } from 'react';
-import { Input, Checkbox, Button, notification } from 'antd';
+import { Input, Checkbox, Button, notification, Spin } from 'antd';
 import { Form } from '@ant-design/compatible';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 
 import RolePermissionsModal from '../components/RolePermissionsModal';
 
 import style from './index.less';
-import { getRoleList, addUser } from '../../service';
+import { getRoleList, addUser, getUserDetail } from '../../service';
 import { shopGetBySupplierId } from '@/pages/ServiceGoods/service';
 
 const AddUser = props => {
-  const { getFieldDecorator, validateFields, getFieldValue } = props.form;
+  const { getFieldDecorator, validateFields, getFieldValue, setFieldsValue } = props.form;
   const { id } = props.location.query;
   const [title, setTitle] = useState('新增用户');
   const [inputType, setInputType] = useState('text');
   const [confirmInputType, setConfirmInputType] = useState('text');
   const [roleList, setRoleList] = useState([]);
   const [supplierList, setSupplierList] = useState([]);
+  const [detailInfo, setDetailInfo] = useState({});
+  const [loading, setLoading] = useState(false);
 
   const rolePermissionsModalRef = useRef();
 
@@ -51,7 +53,7 @@ const AddUser = props => {
       { required: true, message: '请确认登录密码' },
       { validator: handleConfirmPassword, message: '两次密码不一致' },
     ],
-    role: [{ required: true, type: 'array', message: '请选择用户角色' }],
+    roleId: [{ required: true, type: 'array', message: '请选择用户角色' }],
   };
 
   // 角色权限 modal
@@ -60,10 +62,8 @@ const AddUser = props => {
   };
 
   // 获取所有门店列表
-  const getAllSupplier = async () => {
-    const res = await shopGetBySupplierId();
-    console.log(res);
-    if (res.code !== 2000) {
+  const getAllSupplier = res => {
+    if (res.code !== '0000') {
       notification.warning({
         message: res.detail,
       });
@@ -73,13 +73,7 @@ const AddUser = props => {
   };
 
   // 获取所有角色列表
-  const getAllRoleList = async () => {
-    const params = {
-      page: 1,
-      size: 1000,
-    };
-    const res = await getRoleList(params);
-
+  const getAllRoleList = res => {
     if (res.code !== 2000) {
       notification.warning({ message: res.detail });
       return;
@@ -89,6 +83,25 @@ const AddUser = props => {
     setRoleList(content);
   };
 
+  // 获取账户详情
+  const getAccountDetail = res => {
+    setLoading(false);
+    if (res.code !== 2000) {
+      notification.warning({ message: res.detail });
+      return;
+    }
+    console.log(res);
+    setDetailInfo(res.data);
+    const { account, name, password } = res.data;
+    setFieldsValue({
+      account,
+      name,
+      password,
+      confirmPassword: password,
+      roleId: [],
+    });
+  };
+
   // 用户角色多选框
   const userRoleCheckbox = () =>
     roleList.map(item => (
@@ -135,9 +148,26 @@ const AddUser = props => {
     }
   };
 
+  const initData = async () => {
+    const roleListParams = {
+      page: 1,
+      size: 1000,
+    };
+    setLoading(true);
+    const roleListRes = await getRoleList(roleListParams);
+    const supplierListRes = await shopGetBySupplierId();
+    let accountDetailRes = null;
+    if (id) {
+      accountDetailRes = await getUserDetail({ id });
+      getAccountDetail(accountDetailRes);
+    }
+    setLoading(false);
+
+    getAllRoleList(roleListRes);
+    getAllSupplier(supplierListRes);
+  };
   useEffect(() => {
-    getAllRoleList();
-    getAllSupplier();
+    initData();
     if (id) {
       setTitle('编辑用户');
     }
@@ -146,62 +176,66 @@ const AddUser = props => {
   return (
     <PageHeaderWrapper title={title}>
       <div className={style['user-info']}>
-        <Form className={style['user-info--form']} {...formLayout}>
-          <Form.Item label="用户名" extra="限35字符以内，限英文/数字/“@”“ .”">
-            {getFieldDecorator('account', rulesHandler('account'))(
-              <Input placeholder="请输入用户名" maxLength={35} />,
-            )}
-          </Form.Item>
-          <Form.Item label="姓名" extra="限10字符以内">
-            {getFieldDecorator('name', rulesHandler('name'))(
-              <Input placeholder="请输入用户姓名" />,
-            )}
-          </Form.Item>
-          <Form.Item label="初始密码" extra="限13-18字符，包含大小写字母、数字和特殊字符">
-            {getFieldDecorator('password', rulesHandler('password'))(
-              <Input
-                type={inputType}
-                onChange={e => handlePasswordChange(e, setInputType)}
-                placeholder="请设置登录密码"
-              />,
-            )}
-          </Form.Item>
-          <Form.Item label="确认密码">
-            {getFieldDecorator('confirmPassword', rulesHandler('confirmPassword'))(
-              <Input
-                type={confirmInputType}
-                onChange={e => handlePasswordChange(e, setConfirmInputType)}
-                placeholder="请确认登录密码"
-              />,
-            )}
-          </Form.Item>
-          <Form.Item label="选择门店" extra="仅限POP商家设置">
-            {getFieldDecorator('store', rulesHandler('store', []))(
-              supplierList.length ? (
-                <Checkbox.Group style={{ width: '100%' }}>
-                  <Checkbox value="1">门店1</Checkbox>
-                  <Checkbox value="2">门店2</Checkbox>
-                </Checkbox.Group>
-              ) : (
-                <div>暂无门店信息</div>
-              ),
-            )}
-          </Form.Item>
-          <Form.Item label="用户角色">
-            {getFieldDecorator('organization', rulesHandler('organization'))(
-              <Checkbox.Group style={{ width: '100%' }}>{userRoleCheckbox()}</Checkbox.Group>,
-            )}
-          </Form.Item>
-
-          <Form.Item {...btnLayout}>
-            <Button type="default" onClick={() => window.history.back()}>
-              返回
-            </Button>
-            <Button className={style['submit-button']} type="primary" onClick={onSubmit}>
-              提交
-            </Button>
-          </Form.Item>
-        </Form>
+        <Spin spinning={loading}>
+          <Form className={style['user-info--form']} {...formLayout}>
+            <Form.Item label="用户名" extra="限35字符以内，限英文/数字/“@”“ .”">
+              {getFieldDecorator('account', rulesHandler('account'))(
+                <Input disabled={!!id} placeholder="请输入用户名" maxLength={35} />,
+              )}
+            </Form.Item>
+            <Form.Item label="姓名" extra="限10字符以内">
+              {getFieldDecorator('name', rulesHandler('name'))(
+                <Input placeholder="请输入用户姓名" />,
+              )}
+            </Form.Item>
+            <Form.Item label="初始密码" extra="限13-18字符，包含大小写字母、数字和特殊字符">
+              {getFieldDecorator('password', rulesHandler('password'))(
+                <Input
+                  disabled={!!id}
+                  type={inputType}
+                  onChange={e => handlePasswordChange(e, setInputType)}
+                  placeholder="请设置登录密码"
+                />,
+              )}
+            </Form.Item>
+            <Form.Item label="确认密码">
+              {getFieldDecorator('confirmPassword', rulesHandler('confirmPassword'))(
+                <Input
+                  disabled={!!id}
+                  type={confirmInputType}
+                  onChange={e => handlePasswordChange(e, setConfirmInputType)}
+                  placeholder="请确认登录密码"
+                />,
+              )}
+            </Form.Item>
+            <Form.Item label="选择门店" extra="仅限POP商家设置">
+              {getFieldDecorator('store', rulesHandler('store', []))(
+                supplierList.length ? (
+                  <Checkbox.Group disabled={!!id} style={{ width: '100%' }}>
+                    <Checkbox value="1">门店1</Checkbox>
+                    <Checkbox value="2">门店2</Checkbox>
+                  </Checkbox.Group>
+                ) : (
+                  <div>暂无门店信息</div>
+                ),
+              )}
+            </Form.Item>
+            <Form.Item label="用户角色">
+              {getFieldDecorator('roleId', rulesHandler('roleId'))(
+                <Checkbox.Group style={{ width: '100%' }}>{userRoleCheckbox()}</Checkbox.Group>,
+              )}
+            </Form.Item>
+
+            <Form.Item {...btnLayout}>
+              <Button type="default" onClick={() => window.history.back()}>
+                返回
+              </Button>
+              <Button className={style['submit-button']} type="primary" onClick={onSubmit}>
+                提交
+              </Button>
+            </Form.Item>
+          </Form>
+        </Spin>
       </div>
       <RolePermissionsModal ref={rolePermissionsModalRef} />
     </PageHeaderWrapper>

src/pages/systemManage/Account/components/ResetPasswordModal/index.jsx

 import React, { forwardRef, useImperativeHandle, useState, useRef, useEffect } from 'react';
-import { Modal, Input } from 'antd';
+import { Modal, Input, notification } from 'antd';
 import { Form } from '@ant-design/compatible';
 
 import { resetPassword } from '../../../service';
@@ -101,6 +101,7 @@ const ResetPasswordModal = (props, ref) => {
 
   const onCancel = () => {
     setVisible(false);
+    setConfirmLoading(false);
     formRef.current.resetFields();
   };
 
@@ -111,16 +112,24 @@ const ResetPasswordModal = (props, ref) => {
         return;
       }
       setConfirmLoading(true);
+      const { password } = fieldsValue;
       const params = {
         id: record.id,
-        ...fieldsValue,
+        password,
       };
-      const res = await resetPassword();
-
-      setTimeout(() => {
-        setConfirmLoading(false);
-        onCancel();
-      }, 2000);
+      const res = await resetPassword(params);
+      setConfirmLoading(false);
+      if (res.code !== 2000) {
+        notification.warning({
+          message: res.detail,
+        });
+        return;
+      }
+      notification.success({
+        message: '重置成功',
+      });
+      setConfirmLoading(false);
+      onCancel();
     });
   };
 

src/pages/systemManage/Account/components/RolePermissionsModal/index.jsx

@@ -21,6 +21,7 @@ const RolePermissionsModal = (props, ref) => {
   }));
 
   const modalProps = {
+    width: 600,
     title: '查看角色',
     visible,
     footer: null,
@@ -31,6 +32,9 @@ const RolePermissionsModal = (props, ref) => {
     id: roleInfo.id,
     submittable: false,
     readyonly: true,
+    wrapperCol: {
+      span: 18,
+    },
   };
 
   console.log(roleProps);

src/pages/systemManage/Account/data.js

@@ -40,12 +40,11 @@ export const getColumns = props => {
       title: '状态',
       dataIndex: 'status',
       width: 150,
-      initialValue: 'all',
+      initialValue: '3',
       valueEnum: {
         all: { text: '全部', status: '' },
-        close: { text: '使用中', status: 0 },
-        running: { text: '已禁用', status: 1 },
-        online: { text: '已删除', status: 2 },
+        close: { text: '使用中', status: 2 },
+        running: { text: '已禁用', status: 3 },
       },
       render: value => value.name,
     },

src/pages/systemManage/Account/index.jsx

@@ -27,19 +27,17 @@ const Account = props => {
   const resetPasswordModal = useRef();
 
   // 新增编辑
-  const toUserInfo = (record = {}) => {
-    const { id } = record;
+  const toUserInfo = ({ id } = {}) => {
+    const query = id ? { id } : {};
     history.push({
       pathname: '/systemManage/account/userInfo',
-      query: {
-        id: 1,
-      },
+      query,
     });
   };
 
   // 角色权限 modal
   const openRolePermissionsModal = record => {
-    rolePermissionsModalRef.current.open();
+    rolePermissionsModalRef.current.open(record);
   };
 
   // 修改状态 modal

src/pages/systemManage/Role/RoleInfo/index.jsx

 import React, { forwardRef, useImperativeHandle, useState, useEffect } from 'react';
-import { Input, Checkbox, Button, Tree, notification } from 'antd';
+import { Input, Checkbox, Button, Tree, notification, Spin } from 'antd';
 import { Form } from '@ant-design/compatible';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { getUserPermissions } from '@/services/user';
@@ -22,7 +22,15 @@ const { TreeNode } = Tree;
  * @param {boolean} props.readyonly 是否全部为只读(查看操作)
  */
 const RoleInfo = props => {
-  const { id, submittable = true, readyonly = false, defaultExpandAll = true } = props;
+  const {
+    id,
+    submittable = true,
+    readyonly = false,
+    defaultExpandAll = true,
+    height,
+    labelCol = { span: 4 },
+    wrapperCol = { span: 12 },
+  } = props;
   const { getFieldDecorator, getFieldValue, validateFields, setFieldsValue } = props.form;
 
   // 可选的权限数据
@@ -30,11 +38,12 @@ const RoleInfo = props => {
   // 当前选中的权限-仅提交时使用
   const [selectedPermissions, setSelectedPermissions] = useState([]);
   const [detailInfo, setDetailInfo] = useState({});
+  const [loading, setLoading] = useState(false);
 
   // 表单布局
   const formLayout = {
-    labelCol: { span: 4 },
-    wrapperCol: { span: 12 },
+    labelCol,
+    wrapperCol,
   };
   const btnLayout = {
     wrapperCol: { offset: 4, span: 12 },
@@ -109,9 +118,7 @@ const RoleInfo = props => {
   };
 
   // 初始化权限数据
-  const initPermissions = async () => {
-    const roleId = id || null;
-    const res = await getUserPermissions(roleId);
+  const initPermissions = (res, roleId) => {
     let resource = [];
     let selected = [];
     if (roleId) {
@@ -130,9 +137,7 @@ const RoleInfo = props => {
   };
 
   // 初始化当前角色数据
-  const initRoleData = async () => {
-    const res = await getRoleDetail({ id });
-
+  const initRoleData = res => {
     if (res.code !== 2000) {
       notification.warning({ message: res.detail });
       return;
@@ -149,11 +154,20 @@ const RoleInfo = props => {
     });
   };
 
-  useEffect(() => {
-    initPermissions();
+  const initData = async () => {
+    const roleId = id || null;
+    setLoading(true);
+    const permissionsRes = await getUserPermissions(roleId);
     if (id) {
-      initRoleData();
+      const roleDetailRes = await getRoleDetail({ id });
+      initRoleData(roleDetailRes);
     }
+    setLoading(false);
+    initPermissions(permissionsRes, roleId);
+  };
+
+  useEffect(() => {
+    initData();
   }, []);
 
   const renderTreeNodes = data =>
@@ -170,52 +184,56 @@ const RoleInfo = props => {
 
   return (
     <div className={style['info-box']}>
-      <Form className={style['info-box--form']} {...formLayout}>
-        <Form.Item label="角色名称">
-          {readyonly
-            ? detailInfo.name
-            : getFieldDecorator('name', rulesHandler('name'))(
-                <Input maxLength={10} placeholder="10个字以内" />,
-              )}
-        </Form.Item>
-        <Form.Item label="角色描述">
-          {readyonly
-            ? detailInfo.description
-            : getFieldDecorator('description', rulesHandler('description'))(
-                <TextArea placeholder="30个字以内"></TextArea>,
-              )}
-        </Form.Item>
-        <Form.Item label="权限">
-          {getFieldDecorator('selected', rulesHandler('selected'))(
-            permissionsData.length ? (
-              <Tree
-                checkable
-                selectable={false}
-                defaultExpandAll
-                onCheck={onPermissionsCheck}
-                checkedKeys={selectedPermissions}
-              >
-                {renderTreeNodes(permissionsData)}
-              </Tree>
-            ) : (
-              <></>
-            ),
-          )}
-        </Form.Item>
-
-        {submittable ? (
-          <Form.Item {...btnLayout}>
-            <Button type="default" onClick={() => window.history.back()}>
-              返回
-            </Button>
-            <Button className={style['submit-button']} type="primary" onClick={onSubmit}>
-              提交
-            </Button>
+      <Spin spinning={loading}>
+        <Form className={style['info-box--form']} {...formLayout}>
+          <Form.Item label="角色名称">
+            {readyonly
+              ? detailInfo.name
+              : getFieldDecorator('name', rulesHandler('name'))(
+                  <Input maxLength={10} placeholder="10个字以内" />,
+                )}
+          </Form.Item>
+          <Form.Item label="角色描述">
+            {readyonly
+              ? detailInfo.description
+              : getFieldDecorator('description', rulesHandler('description'))(
+                  <TextArea placeholder="30个字以内"></TextArea>,
+                )}
           </Form.Item>
-        ) : (
-          ''
-        )}
-      </Form>
+          <Form.Item label="权限">
+            {getFieldDecorator('selected', rulesHandler('selected'))(
+              <div className={style.tree} style={{ height }}>
+                {permissionsData.length ? (
+                  <Tree
+                    checkable
+                    selectable={false}
+                    defaultExpandAll
+                    onCheck={onPermissionsCheck}
+                    checkedKeys={selectedPermissions}
+                  >
+                    {renderTreeNodes(permissionsData)}
+                  </Tree>
+                ) : (
+                  ''
+                )}
+              </div>,
+            )}
+          </Form.Item>
+
+          {submittable ? (
+            <Form.Item {...btnLayout}>
+              <Button type="default" onClick={() => window.history.back()}>
+                返回
+              </Button>
+              <Button className={style['submit-button']} type="primary" onClick={onSubmit}>
+                提交
+              </Button>
+            </Form.Item>
+          ) : (
+            ''
+          )}
+        </Form>
+      </Spin>
     </div>
   );
 };

src/pages/systemManage/Role/RoleInfo/index.less

@@ -9,3 +9,10 @@
     margin-left: 20px;
   }
 }
+
+.tree {
+  min-height: 500px;
+  padding: 20px 30px;
+  overflow: auto;
+  border: 1px solid #efefef;
+}

src/pages/systemManage/Role/data.js

@@ -32,7 +32,6 @@ export const getColumns = props => {
       title: '创建人',
       dataIndex: 'creator',
       hideInSearch: true,
-      render: value => <a>{value}</a>,
     },
     {
       title: '创建日期',

src/pages/systemManage/service.js

@@ -70,12 +70,13 @@ export function userDelete({ id }) {
 /**
  * @name 重置/修改密码
  * @param {Object} params
- * @param {string} params.newPassword 新密码
  * @param {string} params.password 确认密码
- * @see http://yapi.quantgroups.com/project/509/interface/api/41800
+ * @see http://yapi.quantgroups.com/project/509/interface/api/43128
  */
 export function resetPassword(params) {
-  return request.post('/v2/user/password/reset', params);
+  return request.post('/v2/user/password/resetpassword', {
+    data: params,
+  });
 }
 
 /**

src/utils/constants.js

 export const APP_CODE = 'APP013';
 export const TENANT_ID = 560761;
+// 小程序权限标识符
+export const APPLETS_PERMISSION_IDENTIFIER = 'applets';