Ver Fonte

修复用户弹框手机号提示问题

pm há 3 meses atrás
pai
commit
802c2c27a6
4 ficheiros alterados com 84 adições e 9 exclusões
  1. 72 9
      src/components/user/UserForm.tsx
  2. 2 0
      src/locales/en.json
  3. 2 0
      src/locales/zh.json
  4. 8 0
      src/utils/dict.ts

+ 72 - 9
src/components/user/UserForm.tsx

@@ -4,9 +4,10 @@ import { userApi } from '../../api/user';
 import { deptApi } from '../../api/dept';
 import { postApi, PostVO } from '../../api/Post';
 import { UserVO, WorkstationNode } from '../../types';
-import { getIntDictOptions, DICT_TYPE } from '../../utils/dict';
+import { getIntDictOptions, DICT_TYPE, setDictOptions, DictDataType } from '../../utils/dict';
 import { handleTree } from '../../utils/tree';
 import { useTranslation } from 'react-i18next';
+import { dictDataApi } from '../../api/DictData';
 
 const { TextArea } = Input;
 
@@ -38,16 +39,59 @@ const UserForm = forwardRef<UserFormRef, UserFormProps>(({ onSuccess }, ref) =>
     setFormType(type as 'create' | 'update');
     form.resetFields();
 
-    // 加载字典数据
+    // 加载性别字典数据
+    let sexDictOptions: Array<{ label: string; value: number }> = [];
+    
     try {
-      const sexDict = getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX);
-      setSexOptions(sexDict.map(item => ({ label: item.label, value: item.value })));
+      // 先从缓存获取
+      const cachedOptions = getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX);
+      if (cachedOptions && cachedOptions.length > 0) {
+        sexDictOptions = cachedOptions.map(item => ({ label: item.label, value: item.value }));
+        setSexOptions(sexDictOptions);
+      } else {
+        // 如果缓存中没有,从 API 获取
+        const response = await dictDataApi.getDictDataPage({
+          pageNo: 1,
+          pageSize: -1,
+          dictType: DICT_TYPE.SYSTEM_USER_SEX,
+        });
+        
+        const data = (response as any)?.data || response;
+        const dictList = data?.list || [];
+        
+        if (Array.isArray(dictList) && dictList.length > 0) {
+          const dictOptions: DictDataType[] = dictList.map((item: any) => ({
+            dictType: item.dictType,
+            label: item.label,
+            value: item.value,
+            colorType: item.colorType || '',
+            cssClass: item.cssClass || '',
+          }));
+          
+          // 缓存字典数据
+          setDictOptions(DICT_TYPE.SYSTEM_USER_SEX, dictOptions);
+          
+          // 转换为选项格式
+          sexDictOptions = getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX).map(item => ({
+            label: item.label,
+            value: item.value,
+          }));
+          
+          setSexOptions(sexDictOptions);
+          console.log('UserForm: 获取性别字典成功', sexDictOptions);
+        } else {
+          // 如果 API 没有数据,使用默认选项
+          throw new Error('API 返回空数据');
+        }
+      }
     } catch (error) {
       console.error('加载性别字典失败:', error);
-      setSexOptions([
+      // 使用默认选项
+      sexDictOptions = [
         { label: '男', value: 1 },
         { label: '女', value: 2 },
-      ]);
+      ];
+      setSexOptions(sexDictOptions);
     }
 
     // 加载部门列表
@@ -81,10 +125,29 @@ const UserForm = forwardRef<UserFormRef, UserFormProps>(({ onSuccess }, ref) =>
         const userData = await userApi.getUser(id);
         // 保存原始用户数据,以便提交时包含所有字段
         setOriginalUserData(userData);
+        
+        // 处理性别字段:确保转换为数字类型,并且值在字典选项中存在
+        let sexValue: number | undefined = undefined;
+        if (userData.sex !== undefined && userData.sex !== null) {
+          const sexNum = typeof userData.sex === 'string' ? parseInt(userData.sex, 10) : Number(userData.sex);
+          // 检查值是否在字典选项中
+          const isValidSex = sexDictOptions.some(option => option.value === sexNum);
+          if (isValidSex && !isNaN(sexNum)) {
+            sexValue = sexNum;
+          }
+        }
+        
         form.setFieldsValue({
           ...userData,
           workstationIds: userData.workstationIds || [],
           deptId: userData.deptId,
+          sex: sexValue, // 使用处理后的性别值
+        });
+        
+        console.log('设置表单值 - 性别:', { 
+          original: userData.sex, 
+          converted: sexValue,
+          sexOptions: sexDictOptions 
         });
       } catch (error: any) {
         message.error(error.message || t('form.getUserInfoFailed'));
@@ -294,8 +357,8 @@ const UserForm = forwardRef<UserFormRef, UserFormProps>(({ onSuccess }, ref) =>
               name="mobile"
               rules={[
                 {
-                  pattern: /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/,
-                  message: t('form.mobilePhoneError'),
+                  pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
+                  message: t('form.mobilePhoneError') || '请输入正确的手机号码',
                 },
               ]}
             >
@@ -312,7 +375,7 @@ const UserForm = forwardRef<UserFormRef, UserFormProps>(({ onSuccess }, ref) =>
               rules={[
                 {
                   type: 'email',
-                  message: t('form.emailError'),
+                  message: t('form.emailError') || '请输入正确的邮箱地址',
                 },
               ]}
             >

+ 2 - 0
src/locales/en.json

@@ -528,6 +528,8 @@
     "usernamePlaceholder": "Please enter username",
     "mobile": "Mobile",
     "mobilePlaceholder": "Please enter mobile number",
+    "mobilePhoneError": "Please enter a valid mobile number",
+    "emailError": "Please enter a valid email address",
     "selectDept": "Please select department",
     "selectPosition": "Select position",
     "userSex": "Gender",

+ 2 - 0
src/locales/zh.json

@@ -530,6 +530,8 @@
     "usernamePlaceholder": "请输入账号",
     "mobile": "手机号码",
     "mobilePlaceholder": "请输入手机号码",
+    "mobilePhoneError": "请输入正确的手机号码",
+    "emailError": "请输入正确的邮箱地址",
     "selectDept": "请选择归属部门",
     "selectPosition": "选择岗位",
     "userSex": "用户性别",

+ 8 - 0
src/utils/dict.ts

@@ -95,6 +95,14 @@ export const getDictOptions = (dictType: string): DictDataType[] => {
     ];
   }
 
+  // 用户性别
+  if (dictType === DICT_TYPE.SYSTEM_USER_SEX) {
+    return [
+      { dictType, label: '男', value: 1, colorType: 'blue', cssClass: '' },
+      { dictType, label: '女', value: 2, colorType: 'pink', cssClass: '' },
+    ];
+  }
+
   // 其他类型返回空数组
   // 实际项目中可以在这里调用 API 获取字典数据
   return [];