fix(ProForm): 导出ts类型

uiwjs · Apr 18, 2023 · c7fe37d · c7fe37d
1 parent 44481dc
commit c7fe37d
Show file tree

Hide file tree

Showing 7 changed files with 199 additions and 11 deletions.
diff --git a/examples/base/config/routes.json b/examples/base/config/routes.json
@@ -11,17 +11,23 @@
         "index": true,
         "redirect": "/tableList"
       },
+      {
+        "path": "/home",
+        "name": "首页",
+        "element": "@/pages/TableList",
+        "icon": "home"
+      },
       {
         "path": "/tableList",
         "name": "查询表格",
         "element": "@/pages/TableList",
         "icon": "search"
       },
       {
-        "path": "/home",
-        "name": "首页",
-        "element": "@/pages/TableList",
-        "icon": "home"
+        "path": "/form",
+        "name": "数据录入",
+        "element": "@/pages/Form",
+        "icon": "search"
       },
       {
         "path": "/:group/*",
@@ -58,7 +64,7 @@
       },
       {
         "path": "/dom/exceptions",
-        "name": "异常12",
+        "name": "异常",
         "icon": "warning-o",
         "side": false,
         "children": [
@@ -68,17 +74,17 @@
           },
           {
             "path": "/dom/exceptions/403",
-            "name": "403-1",
+            "name": "403",
             "element": "@uiw-admin/exceptions/esm/Exceptions/403"
           },
           {
             "path": "/dom/exceptions/500",
-            "name": "500-1",
+            "name": "500",
             "element": "@uiw-admin/exceptions/esm/Exceptions/500"
           },
           {
             "path": "/dom/exceptions/404",
-            "name": "404-1",
+            "name": "404",
             "element": "@uiw-admin/exceptions/esm/Exceptions/404"
           }
         ]

diff --git a/examples/base/src/pages/Form/index.tsx b/examples/base/src/pages/Form/index.tsx
@@ -0,0 +1,162 @@
+import { ProForm } from '@uiw-admin/components'
+import { Slider } from 'uiw'
+
+const option = [
+  { value: 1, label: '苹果' },
+  { value: 2, label: '西瓜' },
+  { value: 3, label: '香蕉' },
+  { value: 4, label: '东北大冻梨' },
+  { value: 5, label: '香蕉' },
+  { value: 6, label: '葡萄' },
+  { value: 6, label: '哈密瓜' },
+]
+
+const Page = () => {
+  return (
+    <ProForm
+      // 表单类型
+      formType="card"
+      title="基本使用(与uiw/form使用保持一致)"
+      // 自定义组件
+      customWidgetsList={{
+        slider: Slider,
+      }}
+      cardProps={{
+        noHover: true,
+      }}
+      // 是否展示uiw/form提交按钮
+      showSaveButton
+      // 是否展示uiw/form重置按钮
+      showResetButton
+      // 提交后验证
+      onSubmit={(initial, current) => {
+        console.log(111, initial, current)
+      }}
+      formDatas={[
+        {
+          label: 'input',
+          key: 'input',
+          widget: 'input',
+          initialValue: '',
+          widgetProps: {},
+          help: 'input不能为空',
+          rules: [{ required: true, message: 'input不能为空' }],
+        },
+        {
+          label: 'textarea',
+          key: 'textarea',
+          widget: 'textarea',
+          span: '24',
+          colstyle: { maxWidth: 800 },
+        },
+        {
+          label: 'select',
+          key: 'select',
+          widget: 'select',
+          option: [
+            { value: 1, label: '苹果' },
+            { value: 2, label: '西瓜' },
+            { value: 3, label: '香蕉' },
+            { value: 4, label: '东北大冻梨' },
+          ],
+        },
+        {
+          label: 'switch',
+          key: 'switch',
+          widget: 'switch',
+        },
+        {
+          label: 'radio',
+          widget: 'radio',
+          key: 'radio',
+          option: [
+            { label: '男', value: 'man' },
+            { label: '女', value: 'girl' },
+          ],
+        },
+        {
+          label: '多选框',
+          widget: 'checkbox',
+          key: 'checkbox',
+          option: [
+            { label: '四川菜', value: 'sichuan' },
+            { label: '湖北菜', value: 'hubei' },
+          ],
+        },
+        {
+          label: '年月日时分秒',
+          key: 'dateInputsecond',
+          widget: 'dateInput',
+          widgetProps: {
+            format: 'YYYY-MM-DD HH:mm:ss',
+          },
+        },
+        {
+          label: '年月日',
+          key: 'dateInput',
+          widget: 'dateInput',
+          widgetProps: {
+            format: 'YYYY-MM-DD',
+          },
+        },
+        {
+          label: '年月',
+          key: 'monthPicker',
+          widget: 'monthPicker',
+          widgetProps: {
+            format: 'YYYY-MM',
+          },
+        },
+        {
+          label: '时分秒',
+          key: 'timePicker',
+          widget: 'timePicker',
+        },
+        {
+          label: 'searchSelect',
+          key: 'searchSelect',
+          widget: 'searchSelect',
+          option: option,
+          widgetProps: {
+            mode: 'multiple',
+            allowClear: true,
+            showSearch: true,
+            style: { width: '100%' },
+          },
+        },
+        {
+          label: '评分',
+          key: 'rate',
+          widget: 'rate',
+          span: '8',
+        },
+        // 只读模式下支持读取React.ReactNode
+        {
+          label: '自定义组件',
+          key: 'slider',
+          widget: 'slider',
+          readSpan: 2,
+          span: '16',
+        },
+        {
+          label: '上传组件',
+          key: 'upload',
+          widget: 'upload',
+          span: '24',
+          readSpan: 3,
+          widgetProps: {
+            uploadType: 'card',
+            multiple: true,
+            maxNumber: 2,
+            showFileIcon: {
+              showPreviewIcon: true,
+              showRemoveIcon: true,
+            },
+          },
+        },
+      ]}
+    />
+  )
+}
+
+export default Page
diff --git a/packages/components/src/ProForm/formdom.tsx b/packages/components/src/ProForm/formdom.tsx
@@ -46,7 +46,6 @@ function FormDom({
   const styles: React.CSSProperties = {
     background: '#fff',
     paddingBottom: 10,
-    marginBottom: 14,
     ...style,
   };
 

diff --git a/packages/components/src/ProForm/index.tsx b/packages/components/src/ProForm/index.tsx
@@ -8,6 +8,8 @@ import { StoreCtx, ColPropsContext } from './hooks/store';
 import { isObjectEmpty } from './utils';
 import './style/form-item.css';
 
+export * from './type';
+
 function ProForm(
   props: ProFormProps,
   ref: React.ForwardedRef<
@@ -103,7 +105,7 @@ function ProForm(
   return (
     <StoreCtx.Provider value={store}>
       <ColPropsContext.Provider value={colProps || {}}>
-        {children}
+        <div className="uiw-admin-proform">{children}</div>
       </ColPropsContext.Provider>
     </StoreCtx.Provider>
   );

diff --git a/packages/components/src/ProForm/style/form-item.css b/packages/components/src/ProForm/style/form-item.css
@@ -26,4 +26,17 @@
   top: 3px;
   transform: translateX(-50%);
   color: red;
+}
+
+.uiw-admin-proform .w-form-label {
+  font-weight: normal;
+  color: rgba(0, 0, 0, .7);
+}
+.uiw-admin-proform .w-select {
+  background-color: transparent;
+}
+
+.uiw-admin-proform .w-card-head {
+  height: 50px;
+  line-height: 50px;
 }
diff --git a/packages/components/src/ProTable/index.css b/packages/components/src/ProTable/index.css
@@ -19,5 +19,5 @@
 }
 
 .uiw-protable-form .w-select {
-  background-color: #fff;
+  background-color: transparent;
 }
diff --git a/packages/components/src/index.tsx b/packages/components/src/index.tsx
@@ -1,9 +1,15 @@
 export { default as ProTable } from './ProTable';
+export * from './ProTable';
 export { default as useTable } from './ProTable/useTable';
+export * from './ProTable/useTable';
 export { default as Skeleton } from './Skeleton';
+export * from './Skeleton';
 export { default as ProDrawer } from './ProDrawer';
+export * from './ProDrawer';
 export { default as ProForm } from './ProForm';
+export * from './ProForm';
 export { default as useForm } from './ProForm/hooks/useForm';
+export * from './ProForm';
 
 export * from './form';
 export { default as Form } from './form';