Merge pull request #199 from yaob421123/master

fix(ProForm): 调整表单效验逻辑
uiwjs · Apr 7, 2023 · 92a3218 · 92a3218
2 parents 604d9f0 + c1c936e
commit 92a3218
Show file tree

Hide file tree

Showing 11 changed files with 96 additions and 64 deletions.
diff --git a/examples/base/src/pages/TableList/index.tsx b/examples/base/src/pages/TableList/index.tsx
@@ -83,7 +83,7 @@ export default function Demo() {
         pageSizeOptions: [10, 20, 30],
         pageSize: 10,
         onShowSizeChange: (current, pageSize) => {
-          console.log(current, pageSize)
+          // console.log(current, pageSize)
         },
       }}
       columns={[

diff --git a/examples/website/src/components/BaseLayout/index.tsx b/examples/website/src/components/BaseLayout/index.tsx
@@ -1,7 +1,7 @@
 import { Outlet, Link } from 'react-router-dom';
 import { Layout, Affix } from 'uiw';
 import GitHubCorners from '@uiw/react-github-corners';
-import * as pkg from 'uiw-admin/package.json';
+import pkg from 'uiw-admin/package.json';
 import styles from './index.module.less';
 import SiderMenu from '../SideMenu';
 

diff --git a/examples/website/src/components/SideMenu/index.tsx b/examples/website/src/components/SideMenu/index.tsx
@@ -1,6 +1,6 @@
 import { NavLink } from 'react-router-dom';
 import DomainVerify from '@uiw/react-domain-verify';
-import * as menus from '../../menus.json';
+import menus from '../../menus.json';
 import styles from './index.module.less';
 import React from 'react';
 

diff --git a/package.json b/package.json
@@ -10,48 +10,48 @@
     "initi": "npm run clean && npm install",
     "prepare": "husky install",
     "-----authorized-----": "----------",
-    "build:authorized": "lerna exec --scope @uiw-admin/authorized -- tsbb build",
-    "watch:authorized": "lerna exec --scope @uiw-admin/authorized -- tsbb watch",
+    "build:authorized": "lerna exec --scope @uiw-admin/authorized -- tsbb build src/*.tsx --use-babel",
+    "watch:authorized": "lerna exec --scope @uiw-admin/authorized -- tsbb watch src/*.tsx --use-babel",
     "-----layout-----": "----------",
-    "build:layout:ui": "lerna exec --scope @uiw-admin/basic-layouts -- tsbb build",
-    "watch:layout:ui": "lerna exec --scope @uiw-admin/basic-layouts -- tsbb watch",
+    "build:layout:ui": "lerna exec --scope @uiw-admin/basic-layouts -- tsbb build src/*.tsx --use-babel",
+    "watch:layout:ui": "lerna exec --scope @uiw-admin/basic-layouts -- tsbb watch src/*.tsx --use-babel",
     "-----router-----": "----------",
-    "build:router:ui": "lerna exec --scope @uiw-admin/router-control -- tsbb build",
-    "watch:router:ui": "lerna exec --scope @uiw-admin/router-control -- tsbb watch",
+    "build:router:ui": "lerna exec --scope @uiw-admin/router-control -- tsbb build src/*.ts --use-babel",
+    "watch:router:ui": "lerna exec --scope @uiw-admin/router-control -- tsbb watch src/*.ts --use-babel",
     "-----tabs-----": "----------",
-    "build:tabs:ui": "lerna exec --scope @uiw-admin/layout-tabs -- tsbb build",
-    "watch:tabs:ui": "lerna exec --scope @uiw-admin/layout-tabs -- tsbb watch",
+    "build:tabs:ui": "lerna exec --scope @uiw-admin/layout-tabs -- tsbb build src/*.tsx --use-babel",
+    "watch:tabs:ui": "lerna exec --scope @uiw-admin/layout-tabs -- tsbb watch src/*.tsx --use-babel",
     "-----components-----": "----------",
-    "build:components:ui": "lerna exec --scope @uiw-admin/components -- tsbb build",
-    "watch:components:ui": "lerna exec --scope @uiw-admin/components -- tsbb watch",
+    "build:components:ui": "lerna exec --scope @uiw-admin/components -- tsbb build  src/*.tsx --use-babel",
+    "watch:components:ui": "lerna exec --scope @uiw-admin/components -- tsbb watch src/*.tsx --use-babel",
     "-----markdown-navbar-----": "----------",
-    "build:markdown-navbar": "lerna exec --scope @uiw-admin/markdown-navbar -- tsbb build",
-    "watch:markdown-navbar": "lerna exec --scope @uiw-admin/markdown-navbar -- tsbb watch",
+    "build:markdown-navbar": "lerna exec --scope @uiw-admin/markdown-navbar -- tsbb build src/*.tsx --use-babel",
+    "watch:markdown-navbar": "lerna exec --scope @uiw-admin/markdown-navbar -- tsbb watch src/*.tsx --use-babel",
     "-----login-----": "----------",
-    "build:login:ui": "lerna exec --scope  @uiw-admin/user-login -- tsbb build",
-    "watch:login:ui": "lerna exec --scope  @uiw-admin/user-login -- tsbb watch",
+    "build:login:ui": "lerna exec --scope  @uiw-admin/user-login -- tsbb build src/*.tsx --use-babel",
+    "watch:login:ui": "lerna exec --scope  @uiw-admin/user-login -- tsbb watch src/*.tsx --use-babel",
     "-----models-----": "----------",
-    "build:models": "lerna exec --scope @uiw-admin/models -- tsbb build",
-    "watch:models": "lerna exec --scope @uiw-admin/models -- tsbb watch",
+    "build:models": "lerna exec --scope @uiw-admin/models -- tsbb build src/*.ts --use-babel",
+    "watch:models": "lerna exec --scope @uiw-admin/models -- tsbb watch  src/*.ts --use-babel",
     "-----plugins-----": "----------",
-    "build:plugins": "lerna exec --scope @uiw-admin/plugins -- tsbb build --no-esm",
-    "watch:plugins": "lerna exec --scope @uiw-admin/plugins -- tsbb watch",
+    "build:plugins": "lerna exec --scope @uiw-admin/plugins -- tsbb build --no-esm  src/*.ts --use-babel",
+    "watch:plugins": "lerna exec --scope @uiw-admin/plugins -- tsbb watch  src/*.ts --use-babel",
     "-----config-----": "----------",
-    "build:config": "lerna exec --scope @uiw-admin/config -- tsbb build",
-    "watch:config": "lerna exec --scope @uiw-admin/config -- tsbb watch",
+    "build:config": "lerna exec --scope @uiw-admin/config -- tsbb build  src/*.ts --use-babel",
+    "watch:config": "lerna exec --scope @uiw-admin/config -- tsbb watch  src/*.ts --use-babel",
     "-----create-uiw-admin-----": "----------",
-    "build:create": "lerna exec --scope create-uiw-admin -- npm run build",
+    "build:create": "lerna exec --scope create-uiw-admin -- npm run build  src/*.tsx --use-babel",
     "-----------": "--------------",
-    "build:utils": "lerna exec --scope @uiw-admin/utils -- tsbb build",
-    "watch:utils": "lerna exec --scope @uiw-admin/utils -- tsbb watch",
-    "build": "lerna exec --scope @uiw-admin/* -- tsbb build src/*.{ts,tsx,js,jsx} --use-babel",
-    "watch": "lerna exec --scope @uiw-admin/* -- tsbb watch",
-    "build:website": "lerna exec --scope @examples/base -- npm run build",
+    "build:utils": "lerna exec --scope @uiw-admin/utils -- tsbb build  src/*.ts --use-babel",
+    "watch:utils": "lerna exec --scope @uiw-admin/utils -- tsbb watch  src/*.ts --use-babel",
+    "build": "lerna exec --scope @uiw-admin/* -- tsbb build src/*.{ts,tsx} --use-babel",
+    "watch": "lerna exec --scope @uiw-admin/* -- tsbb watch  src/*.{ts,tsx} --use-babel",
+    "build:website": "lerna exec --scope @examples/base -- npm run build  src/*.tsx --use-babel",
     "----": "----",
     "build:js": "node ./script/copy",
     "----------": "-------------",
     "www": "lerna exec --scope website -- npm run start",
-    "www:build": "lerna exec --scope website -- npm run build",
+    "www:build": "lerna exec --scope website -- npm run build  src/*.tsx --use-babel",
     "-----www-doc-end-----": "-------website-doc------",
     "version": "lerna version --exact --force-publish --no-push --no-git-tag-version",
     "publish": "npm run build && lerna publish from-package",
@@ -88,6 +88,7 @@
   "dependencies": {
     "@babel/preset-typescript": "~7.21.0",
     "@babel/core": "~7.21.3",
+    "recursive-readdir-files": "^2.3.0",
     "ajv": "^8.9.0",
     "husky": "~7.0.4",
     "lerna": "~5.1.0",

diff --git a/packages/components/src/ProForm/README.md b/packages/components/src/ProForm/README.md
@@ -314,7 +314,9 @@ const Demo = () => {
                initialValue: '',
                widgetProps: {},
                help:"input不能为空",
-               required:true,
+               rules: [
+                 { required:true, message: 'input不能为空' }
+               ]
              },
              {
               label: 'textarea',
@@ -504,8 +506,8 @@ const Demo = () => {
                initialValue: state.input,
                widgetProps: {},
                span:"24",
-               required:true,
                rules: [
+                { required:true, message: 'input不能为空' },
                 { pattern: new RegExp(/[1][3][0-9]{9}$/), message: "请输入正确手机号" },
                ]
              },
@@ -596,7 +598,6 @@ const Demo = () => {
                initialValue: '',
                widgetProps: {},
                span:"24",
-               required:true,
                rules: [
                 { required: true, message: '请输入' },
                 { pattern: new RegExp(/[1][3][0-9]{9}$/), message: "请输入正确手机号" },
@@ -618,7 +619,6 @@ const Demo = () => {
                initialValue: '',
                widgetProps: {},
                span:"24",
-               required:true,
                rules: [
                 { 
                   validator: (value = '') => {
@@ -636,7 +636,6 @@ const Demo = () => {
                initialValue: '',
                widgetProps: {},
                span:"24",
-               required:true,
                rules: [
                 { 
                   validator: (value = '') => {
@@ -712,7 +711,6 @@ const Demo = () => {
                initialValue: '',
                widgetProps: {},
                span:"24",
-               required:true,
                rules: [
                 { required: true, message: '请输入' },
                 { pattern: new RegExp(/[1][3][0-9]{9}$/), message: "请输入正确手机号" },
@@ -734,7 +732,6 @@ const Demo = () => {
                initialValue: '',
                widgetProps: {},
                span:"24",
-               required:true,
                rules: [
                 { 
                   validator: (value = '') => {
@@ -850,7 +847,6 @@ const Demo = () => {
     const validateList = formList.map(itm=>itm.validateFieldsAndGetValue()) || []
     const values = await asyncAwaitFormList(validateList)
     setState(values)
-    console.log("values",values)
     // 调用接口
   }
 
@@ -936,7 +932,6 @@ const Demo = () => {
       key: 'phone',
       widget: 'input',
       initialValue: '',
-      required:true,
       rules: [
         { required: true, message: '请输入' },
       ]
@@ -987,7 +982,6 @@ const Demo = () => {
     const validateList = formList.map(itm=>itm.validateFieldsAndGetValue()) || []
     const values = await asyncAwaitFormList(validateList)
     setState(values)
-    console.log("values",values)
     // 调用接口
   }
 
@@ -1259,7 +1253,6 @@ export default Demo
 | hide         | 是否显示                                                      | boolean                 | true   |
 | span         | 非只读模式下,可以通过指定 24 列中每列的宽度来创建基本网格系统 | string                  | '8'    |
 | readSpan     | 只读模式下包含列的数量 参考Descriptions.Item                  | number                  | 1      |
-| required     | 是否必填                                                      | boolean                 | -      |
 | rules     | 验证规则                                                      | RulesProps[]                 | -      |
 | colstyle     | Col(uiw/Grid)样式                                         | React.CSSProperties                | -      |
 

diff --git a/packages/components/src/ProForm/formdom.tsx b/packages/components/src/ProForm/formdom.tsx
@@ -46,25 +46,21 @@ function FormDom({
       resetOnSubmit={false}
       onSubmit={({ initial, current }) => {
         // 如果传入了onSubmit走onSubmit,否则主动验证
-        if (onSubmit) {
-          onSubmit?.(initial, current);
-        } else {
-          const filterFormDatas = formDatas.filter(
-            (item) => item.hide !== true,
-          );
-          const validateList =
-            filterFormDatas.map((item) => ({
-              key: item.key,
-              value: current[item.key],
-              rules: item.rules,
-            })) || [];
-          const errorObj = fromValidate(validateList);
-          if (Object.keys(errorObj).length > 0) {
-            const err: any = new Error();
-            err.filed = errorObj;
-            throw err;
-          }
+        const filterFormDatas = formDatas.filter((item) => item.hide !== true);
+        const validateList =
+          filterFormDatas.map((item) => ({
+            key: item.key,
+            value: current[item.key],
+            rules: item.rules,
+            required: item.required,
+          })) || [];
+        const errorObj = fromValidate(validateList);
+        if (Object.keys(errorObj).length > 0) {
+          const err: any = new Error();
+          err.filed = errorObj;
+          throw err;
         }
+        onSubmit?.(initial, current);
       }}
       onChange={({ initial, current }) => onChange?.(initial, current)}
       onSubmitError={(error) => {

diff --git a/packages/components/src/ProForm/index.tsx b/packages/components/src/ProForm/index.tsx
@@ -85,7 +85,7 @@ function ProForm(
     );
   } else if (formType === 'collapse') {
     children = (
-      <Collapse title={renderTitle} activeKey={['1']} {...collapseProps}>
+      <Collapse title={renderTitle} activeKey="1" {...collapseProps}>
         <Collapse.Panel header={title} key={'1'} {...collapsePanelProps}>
           {child}
         </Collapse.Panel>

diff --git a/packages/components/src/ProForm/style/form-item.css b/packages/components/src/ProForm/style/form-item.css
@@ -3,3 +3,27 @@
   align-items: center;
   justify-content: flex-end;
 }
+
+.w-switch,
+.w-checkbox,
+.w-radio
+ {
+  height: 30px;
+  display: inline-flex;
+  align-items: center;
+  margin-right: 5px;
+}
+
+.w-proform-label {
+  position: relative;
+  padding-left: 7px;
+  display: inline-block;
+}
+.w-proform-label::before {
+  content: '*';
+  position: absolute;
+  left: 0;
+  top: 3px;
+  transform: translateX(-50%);
+  color: red;
+}
diff --git a/packages/components/src/ProForm/utils/index.tsx b/packages/components/src/ProForm/utils/index.tsx
@@ -88,6 +88,7 @@ interface FromValidateProps {
   key: string;
   rules?: RulesProps[];
   value?: any[] | any;
+  required?: boolean;
 }
 
 //判断是否是arrary
@@ -112,14 +113,26 @@ export function isObjectEmpty(obj: any) {
   return true;
 }
 
+const getKeyMsg = (key: string) => {
+  if (['input', 'textarea'].includes(key)) {
+    return '请填写字段';
+  }
+  return '请选择字短';
+};
+
 /**
  * form表单提交验证
  * @param rules FromValidateProps[]
  * @returns { [key: string]: string }
  */
 export const fromValidate = (rules: FromValidateProps[] = []) => {
   let errorObj: { [key: string]: string } = {};
-  rules.forEach(({ rules, key, value }) => {
+  rules.forEach(({ rules, key, value, required }) => {
+    if (required) {
+      if (!value || (Array.isArray(value) && value.length === 0)) {
+        errorObj[key] = getKeyMsg(key);
+      }
+    }
     if (rules && rules.length > 0) {
       rules.forEach(
         ({ validator = null, message = '', required, pattern = null }) => {

diff --git a/packages/components/src/ProForm/widgets/index.tsx b/packages/components/src/ProForm/widgets/index.tsx
@@ -55,13 +55,19 @@ export function getFormFields(
         widget,
         label,
         initialValue,
+        required,
         ...otherProps
       } = col;
       if (!hide) {
         const name = key;
         const Widget = widgetsList[widget];
         fields[name] = {
-          label: label,
+          label:
+            otherProps.rules && otherProps.rules.length > 0 ? (
+              <span className="w-proform-label">{label}</span>
+            ) : (
+              label
+            ),
           children: <Widget {...widgetProps} />,
           ...otherProps,
           initialValue,

diff --git a/packages/components/src/ProTable/README.md b/packages/components/src/ProTable/README.md
@@ -11,6 +11,7 @@
 ```jsx mdx:preview
 import React from 'react';
 import { ProTable, useTable } from '@uiw-admin/components';
+import { Icon } from 'uiw';
 
 function Demo1() {
   const table = useTable('https://randomuser.me/api', {
@@ -63,7 +64,6 @@ function Demo1() {
             widget: 'input',
             initialValue: '',
             widgetProps: {
-              preIcon: 'user',
               placeholder: '输入用户名',
             },
           },
@@ -493,7 +493,6 @@ function Demo5() {
     },
     requestOptions: {method: 'GET'}
   });
-  console.log(table)
   return (
     <ProTable
        // 搜索栏按钮