From 5bf7dfb7915ef5a1bd57382c8c3a32fdfcfc0e5e Mon Sep 17 00:00:00 2001
From: cp3hnu <cp3hnu@gmail.com>
Date: Wed, 7 Aug 2024 09:43:54 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 react-ui/src/pages/Monitor/Job/edit.tsx       | 10 +++-
 react-ui/src/pages/System/Dept/edit.tsx       | 28 +++++++++--
 react-ui/src/pages/System/Dict/edit.tsx       | 11 +++--
 react-ui/src/pages/System/Post/edit.tsx       | 13 +++--
 react-ui/src/pages/System/Role/edit.tsx       | 20 ++++----
 .../pages/System/User/components/DeptTree.tsx | 24 +++++----
 react-ui/src/pages/System/User/edit.tsx       | 49 ++++++++++++++++---
 react-ui/src/pages/System/User/index.tsx      |  2 +
 8 files changed, 116 insertions(+), 41 deletions(-)

diff --git a/react-ui/src/pages/Monitor/Job/edit.tsx b/react-ui/src/pages/Monitor/Job/edit.tsx
index 7a7e5e24..218b985e 100644
--- a/react-ui/src/pages/Monitor/Job/edit.tsx
+++ b/react-ui/src/pages/Monitor/Job/edit.tsx
@@ -33,6 +33,10 @@ export type JobFormProps = {
 const JobForm: React.FC<JobFormProps> = (props) => {
   const [form] = Form.useForm();
   const { jobGroupOptions, statusOptions } = props;
+  const formLayout = {
+    labelCol: { span: 5 },
+    wrapperCol: { span: 19 },
+  };
 
   useEffect(() => {
     form.resetFields();
@@ -44,7 +48,7 @@ const JobForm: React.FC<JobFormProps> = (props) => {
       cronExpression: props.values.cronExpression,
       misfirePolicy: props.values.misfirePolicy,
       concurrent: props.values.concurrent,
-      status: props.values.status,
+      status: props.values.status ?? Object.keys(statusOptions)[0],
       createBy: props.values.createBy,
       createTime: props.values.createTime,
       updateBy: props.values.updateBy,
@@ -67,7 +71,7 @@ const JobForm: React.FC<JobFormProps> = (props) => {
 
   return (
     <KFModal
-      width={640}
+      width={680}
       title={intl.formatMessage({
         id: 'monitor.job.title',
         defaultMessage: '编辑定时任务调度',
@@ -84,6 +88,8 @@ const JobForm: React.FC<JobFormProps> = (props) => {
         submitter={false}
         layout="horizontal"
         onFinish={handleFinish}
+        {...formLayout}
+        size="large"
       >
         <ProFormDigit
           name="jobId"
diff --git a/react-ui/src/pages/System/Dept/edit.tsx b/react-ui/src/pages/System/Dept/edit.tsx
index 8a04deaa..90310d86 100644
--- a/react-ui/src/pages/System/Dept/edit.tsx
+++ b/react-ui/src/pages/System/Dept/edit.tsx
@@ -24,8 +24,16 @@ export type DeptFormProps = {
 
 const DeptForm: React.FC<DeptFormProps> = (props) => {
   const [form] = Form.useForm();
-
   const { statusOptions, deptTree } = props;
+  const formLayout = {
+    labelCol: { span: 8 },
+    wrapperCol: { span: 16 },
+  };
+
+  const formItemLayout = {
+    labelCol: { span: 4 },
+    wrapperCol: { span: 20 },
+  };
 
   useEffect(() => {
     form.resetFields();
@@ -34,11 +42,11 @@ const DeptForm: React.FC<DeptFormProps> = (props) => {
       parentId: props.values.parentId,
       ancestors: props.values.ancestors,
       deptName: props.values.deptName,
-      orderNum: props.values.orderNum,
+      orderNum: props.values.orderNum ?? 1,
       leader: props.values.leader,
       phone: props.values.phone,
       email: props.values.email,
-      status: props.values.status,
+      status: props.values.status ?? Object.keys(statusOptions)[0],
       delFlag: props.values.delFlag,
       createBy: props.values.createBy,
       createTime: props.values.createTime,
@@ -60,7 +68,7 @@ const DeptForm: React.FC<DeptFormProps> = (props) => {
 
   return (
     <KFModal
-      width={640}
+      width={680}
       title={intl.formatMessage({
         id: 'system.dept.title',
         defaultMessage: '编辑部门',
@@ -77,6 +85,8 @@ const DeptForm: React.FC<DeptFormProps> = (props) => {
         submitter={false}
         layout="horizontal"
         onFinish={handleFinish}
+        {...formLayout}
+        size="large"
       >
         <ProFormDigit
           name="deptId"
@@ -104,6 +114,7 @@ const DeptForm: React.FC<DeptFormProps> = (props) => {
           request={async () => {
             return deptTree;
           }}
+          {...formItemLayout}
           placeholder="请选择上级部门"
           rules={[
             {
@@ -185,6 +196,15 @@ const DeptForm: React.FC<DeptFormProps> = (props) => {
               required: false,
               message: <FormattedMessage id="请输入邮箱！" defaultMessage="请输入邮箱！" />,
             },
+            {
+              type: 'email',
+              message: (
+                <FormattedMessage
+                  id="请输入正确的邮箱格式！"
+                  defaultMessage="请输入正确的邮箱格式！"
+                />
+              ),
+            },
           ]}
         />
         <ProFormRadio.Group
diff --git a/react-ui/src/pages/System/Dict/edit.tsx b/react-ui/src/pages/System/Dict/edit.tsx
index 9593cddb..decb5628 100644
--- a/react-ui/src/pages/System/Dict/edit.tsx
+++ b/react-ui/src/pages/System/Dict/edit.tsx
@@ -22,8 +22,11 @@ export type DictTypeFormProps = {
 
 const DictTypeForm: React.FC<DictTypeFormProps> = (props) => {
   const [form] = Form.useForm();
-
   const { statusOptions } = props;
+  const formLayout = {
+    labelCol: { span: 4 },
+    wrapperCol: { span: 20 },
+  };
 
   useEffect(() => {
     form.resetFields();
@@ -31,7 +34,7 @@ const DictTypeForm: React.FC<DictTypeFormProps> = (props) => {
       dictId: props.values.dictId,
       dictName: props.values.dictName,
       dictType: props.values.dictType,
-      status: props.values.status,
+      status: props.values.status ?? Object.keys(statusOptions)[0],
       createBy: props.values.createBy,
       createTime: props.values.createTime,
       updateBy: props.values.updateBy,
@@ -53,7 +56,7 @@ const DictTypeForm: React.FC<DictTypeFormProps> = (props) => {
 
   return (
     <KFModal
-      width={640}
+      width={680}
       title={intl.formatMessage({
         id: 'system.dict.title',
         defaultMessage: '编辑字典类型',
@@ -70,6 +73,8 @@ const DictTypeForm: React.FC<DictTypeFormProps> = (props) => {
         submitter={false}
         layout="horizontal"
         onFinish={handleFinish}
+        {...formLayout}
+        size="large"
       >
         <ProFormDigit
           name="dictId"
diff --git a/react-ui/src/pages/System/Post/edit.tsx b/react-ui/src/pages/System/Post/edit.tsx
index abf5a87e..b89dc737 100644
--- a/react-ui/src/pages/System/Post/edit.tsx
+++ b/react-ui/src/pages/System/Post/edit.tsx
@@ -22,8 +22,11 @@ export type PostFormProps = {
 
 const PostForm: React.FC<PostFormProps> = (props) => {
   const [form] = Form.useForm();
-
   const { statusOptions } = props;
+  const formLayout = {
+    labelCol: { span: 4 },
+    wrapperCol: { span: 20 },
+  };
 
   useEffect(() => {
     form.resetFields();
@@ -31,8 +34,8 @@ const PostForm: React.FC<PostFormProps> = (props) => {
       postId: props.values.postId,
       postCode: props.values.postCode,
       postName: props.values.postName,
-      postSort: props.values.postSort,
-      status: props.values.status,
+      postSort: props.values.postSort ?? 1,
+      status: props.values.status ?? Object.keys(statusOptions)[0],
       createBy: props.values.createBy,
       createTime: props.values.createTime,
       updateBy: props.values.updateBy,
@@ -54,7 +57,7 @@ const PostForm: React.FC<PostFormProps> = (props) => {
 
   return (
     <KFModal
-      width={640}
+      width={680}
       title={intl.formatMessage({
         id: 'system.post.title',
         defaultMessage: '编辑岗位信息',
@@ -71,6 +74,8 @@ const PostForm: React.FC<PostFormProps> = (props) => {
         submitter={false}
         layout="horizontal"
         onFinish={handleFinish}
+        {...formLayout}
+        size="large"
       >
         <ProFormDigit
           name="postId"
diff --git a/react-ui/src/pages/System/Role/edit.tsx b/react-ui/src/pages/System/Role/edit.tsx
index 00c64247..ce4a7f15 100644
--- a/react-ui/src/pages/System/Role/edit.tsx
+++ b/react-ui/src/pages/System/Role/edit.tsx
@@ -29,17 +29,22 @@ const RoleForm: React.FC<RoleFormProps> = (props) => {
   const [menuIds, setMenuIds] = useState<string[]>([]);
   const { statusOptions } = props;
 
+  const formLayout = {
+    labelCol: { span: 4 },
+    wrapperCol: { span: 20 },
+  };
+
   useEffect(() => {
     form.resetFields();
     form.setFieldsValue({
       roleId: props.values.roleId,
       roleName: props.values.roleName,
       roleKey: props.values.roleKey,
-      roleSort: props.values.roleSort,
+      roleSort: props.values.roleSort ?? 1,
       dataScope: props.values.dataScope,
       menuCheckStrictly: props.values.menuCheckStrictly,
       deptCheckStrictly: props.values.deptCheckStrictly,
-      status: props.values.status,
+      status: props.values.status ?? Object.keys(statusOptions)[0],
       delFlag: props.values.delFlag,
       createBy: props.values.createBy,
       createTime: props.values.createTime,
@@ -62,7 +67,7 @@ const RoleForm: React.FC<RoleFormProps> = (props) => {
 
   return (
     <KFModal
-      width={640}
+      width={680}
       title={intl.formatMessage({
         id: 'system.role.title',
         defaultMessage: '编辑角色信息',
@@ -79,6 +84,8 @@ const RoleForm: React.FC<RoleFormProps> = (props) => {
         layout="horizontal"
         submitter={false}
         onFinish={handleFinish}
+        {...formLayout}
+        size="large"
       >
         <ProFormDigit
           name="roleId"
@@ -142,9 +149,6 @@ const RoleForm: React.FC<RoleFormProps> = (props) => {
               message: <FormattedMessage id="请输入显示顺序！" defaultMessage="请输入显示顺序！" />,
             },
           ]}
-          fieldProps={{
-            defaultValue: 1,
-          }}
         />
         <ProFormRadio.Group
           valueEnum={statusOptions}
@@ -160,9 +164,6 @@ const RoleForm: React.FC<RoleFormProps> = (props) => {
               message: <FormattedMessage id="请输入角色状态！" defaultMessage="请输入角色状态！" />,
             },
           ]}
-          fieldProps={{
-            defaultValue: '0',
-          }}
         />
         <ProForm.Item
           name="menuIds"
@@ -170,6 +171,7 @@ const RoleForm: React.FC<RoleFormProps> = (props) => {
             id: 'system.role.auth',
             defaultMessage: '菜单权限',
           })}
+          style={{ width: '100%' }}
         >
           <Tree
             checkable={true}
diff --git a/react-ui/src/pages/System/User/components/DeptTree.tsx b/react-ui/src/pages/System/User/components/DeptTree.tsx
index d6264cb1..f839651c 100644
--- a/react-ui/src/pages/System/User/components/DeptTree.tsx
+++ b/react-ui/src/pages/System/User/components/DeptTree.tsx
@@ -18,19 +18,17 @@ export type TreeProps = {
 const DeptTree: React.FC<TreeProps> = (props) => {
   const [treeData, setTreeData] = useState<any>([]);
   const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);
-  const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);
+  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);
 
   const fetchDeptList = async () => {
     const hide = message.loading('正在查询');
     try {
-      await getDeptTree({}).then((res: any) => {
-        const exKeys = [];
-        exKeys.push('1');
-        setTreeData(res);
-        exKeys.push(res[0].children[0].id);
-        setExpandedKeys(exKeys);
-        props.onSelect(res[0].children[0]);
-      });
+      const res = await getDeptTree({});
+      const treeData = res.map((item: any) => ({ ...item, key: item.id }));
+      setTreeData(treeData);
+      props.onSelect(treeData[0]);
+      setExpandedKeys([treeData[0].key]);
+      setSelectedKeys([treeData[0].key]);
       hide();
       return true;
     } catch (error) {
@@ -44,12 +42,12 @@ const DeptTree: React.FC<TreeProps> = (props) => {
   }, []);
 
   const onSelect = (keys: React.Key[], info: any) => {
+    setSelectedKeys(keys);
     props.onSelect(info.node);
   };
 
-  const onExpand = (expandedKeysValue: React.Key[]) => {
-    setExpandedKeys(expandedKeysValue);
-    setAutoExpandParent(false);
+  const onExpand = (keys: React.Key[]) => {
+    setExpandedKeys(keys);
   };
 
   return (
@@ -58,7 +56,7 @@ const DeptTree: React.FC<TreeProps> = (props) => {
       defaultExpandAll
       onExpand={onExpand}
       expandedKeys={expandedKeys}
-      autoExpandParent={autoExpandParent}
+      selectedKeys={selectedKeys}
       onSelect={onSelect}
       treeData={treeData}
     />
diff --git a/react-ui/src/pages/System/User/edit.tsx b/react-ui/src/pages/System/User/edit.tsx
index 101ec96c..e5253ca3 100644
--- a/react-ui/src/pages/System/User/edit.tsx
+++ b/react-ui/src/pages/System/User/edit.tsx
@@ -34,6 +34,15 @@ const UserForm: React.FC<UserFormProps> = (props) => {
   const userId = Form.useWatch('userId', form);
   const { sexOptions, statusOptions } = props;
   const { roles, posts, depts } = props;
+  const formLayout = {
+    labelCol: { span: 8 },
+    wrapperCol: { span: 16 },
+  };
+
+  const formItemLayout = {
+    labelCol: { span: 4 },
+    wrapperCol: { span: 20 },
+  };
 
   useEffect(() => {
     form.resetFields();
@@ -42,13 +51,13 @@ const UserForm: React.FC<UserFormProps> = (props) => {
       deptId: props.values.deptId,
       postIds: props.postIds,
       roleIds: props.roleIds,
-      userName: props.values.userName,
+      userName: props.values.userName ?? '',
       nickName: props.values.nickName,
       email: props.values.email,
       phonenumber: props.values.phonenumber,
-      sex: props.values.sex,
+      sex: props.values.sex || '0',
       avatar: props.values.avatar,
-      status: props.values.status,
+      status: props.values.status || Object.keys(statusOptions)[0],
       delFlag: props.values.delFlag,
       loginIp: props.values.loginIp,
       loginDate: props.values.loginDate,
@@ -69,7 +78,7 @@ const UserForm: React.FC<UserFormProps> = (props) => {
 
   return (
     <KFModal
-      width={640}
+      width={680}
       title={intl.formatMessage({
         id: 'system.user.title',
         defaultMessage: '编辑用户信息',
@@ -85,6 +94,10 @@ const UserForm: React.FC<UserFormProps> = (props) => {
         layout="horizontal"
         submitter={false}
         onFinish={handleFinish}
+        {...formLayout}
+        size="large"
+        labelAlign="right"
+        autoComplete="off"
       >
         <ProFormText
           name="nickName"
@@ -132,6 +145,15 @@ const UserForm: React.FC<UserFormProps> = (props) => {
               required: false,
               message: <FormattedMessage id="请输入手机号码！" defaultMessage="请输入手机号码！" />,
             },
+            {
+              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+              message: (
+                <FormattedMessage
+                  id="请输入正确的手机号码！"
+                  defaultMessage="请输入正确的手机号码！"
+                />
+              ),
+            },
           ]}
         />
         <ProFormText
@@ -147,6 +169,15 @@ const UserForm: React.FC<UserFormProps> = (props) => {
               required: false,
               message: <FormattedMessage id="请输入用户邮箱！" defaultMessage="请输入用户邮箱！" />,
             },
+            {
+              type: 'email',
+              message: (
+                <FormattedMessage
+                  id="请输入正确的邮箱地址！"
+                  defaultMessage="请输入正确的邮箱地址！"
+                />
+              ),
+            },
           ]}
         />
         <ProFormText
@@ -158,6 +189,9 @@ const UserForm: React.FC<UserFormProps> = (props) => {
           hidden={userId}
           placeholder="请输入用户账号"
           colProps={{ md: 12, xl: 12 }}
+          fieldProps={{
+            autoComplete: 'off',
+          }}
           rules={[
             {
               required: true,
@@ -173,6 +207,10 @@ const UserForm: React.FC<UserFormProps> = (props) => {
           hidden={userId}
           placeholder="请输入密码"
           colProps={{ md: 12, xl: 12 }}
+          fieldProps={{
+            autoComplete: 'new-password',
+          }}
+          allowClear
           rules={[
             {
               required: false,
@@ -187,7 +225,6 @@ const UserForm: React.FC<UserFormProps> = (props) => {
             id: 'system.user.sex',
             defaultMessage: '用户性别',
           })}
-          initialValue={'0'}
           placeholder="请输入用户性别"
           colProps={{ md: 12, xl: 12 }}
           rules={[
@@ -204,7 +241,6 @@ const UserForm: React.FC<UserFormProps> = (props) => {
             id: 'system.user.status',
             defaultMessage: '帐号状态',
           })}
-          initialValue={'0'}
           placeholder="请输入帐号状态"
           colProps={{ md: 12, xl: 12 }}
           rules={[
@@ -246,6 +282,7 @@ const UserForm: React.FC<UserFormProps> = (props) => {
           })}
           placeholder="请输入备注"
           colProps={{ md: 24, xl: 24 }}
+          {...formItemLayout}
           rules={[
             {
               required: false,
diff --git a/react-ui/src/pages/System/User/index.tsx b/react-ui/src/pages/System/User/index.tsx
index 73cd0984..e4e65596 100644
--- a/react-ui/src/pages/System/User/index.tsx
+++ b/react-ui/src/pages/System/User/index.tsx
@@ -429,6 +429,8 @@ const UserTableList: React.FC = () => {
                     );
                   }
                   setCurrentRow(undefined);
+                  setPostIds([]);
+                  setRoleIds([]);
                   setModalVisible(true);
                 }}
               >