feat: drawerList、tableList 增加列隐藏操作

alibaba · Mar 23, 2024 · 785257f · 785257f
1 parent 3091520
commit 785257f
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 11 deletions.
diff --git a/docs/form-render/index.md b/docs/form-render/index.md
@@ -42,7 +42,92 @@ npm i form-render --save
  */
 import React from 'react';
 import FormRender, { useForm } from 'form-render';
-import schema from './schema/simple';
+// import schema from './schema/simple';
+
+
+const schema = {
+"type":"object",
+"title":"质检报告配置类目维度",
+"properties":{
+"zzConfigList":{
+"type":"array",
+"title":"配置信息",
+"required":true,
+"rules":[
+{
+"required":true,
+"message":"必填"
+}
+],
+"widget":"drawerList",
+"items":{
+"type":"object",
+"widget":"lineTitle",
+"properties":{
+"cateId":{
+"type":"string",
+
+            "title":"末级类目ID",
+            "required":true,
+            "width":"50%",
+            "rules":[
+              {
+                "message":"长度超限，请确认",
+                "max":11
+              },
+              {
+                "message":"只允许填写数字",
+                "pattern":"^[0-9]+$"
+              },
+              {
+                "required":true,
+                "message":"[末级类目ID]必填"
+              }
+            ],
+            "default":""
+          },
+          "configs":{
+            "type":"array",
+            "title":"二级项",
+            "required":false,
+            "columnHidden": true,
+            "widget":"drawerList",
+            "items":{
+              "widget":"lineTitle",
+              "type":"object",
+              "properties":{
+                "firstId":{
+                  "type":"string",
+
+                  "title":"一级质检项ID",
+                  "required":true,
+                  "width":"50%",
+                  "rules":[
+                    {
+                      "message":"长度超限，请确认",
+                      "max":11
+                    },
+                    {
+                      "message":"只允许填写数字",
+                      "pattern":"^[0-9]+$"
+                    },
+                    {
+                      "required":true,
+                      "message":"[一级质检项ID]必填"
+                    }
+                  ],
+                  "default":""
+                },
+
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "displayType":"row"
+}
 
 export default () => {
   const form = useForm();
@@ -63,7 +148,7 @@ export default () => {
 }
 ```
 
-**类组件**
+<!-- **类组件**
 
 对于使用类组件的同学，可以使用 `connectForm` 替代 `useForm` hooks。
 
@@ -106,4 +191,4 @@ export default connectForm(Demo);
 
 <div>
   <img src="https://gw.alipayobjects.com/mdn/rms_e18934/afts/img/A*4QYNTbKU6xAAAAAAAAAAAABkARQnAQ?raw=true" width="80%"/>
-</div>
+</div> -->
diff --git a/packages/form-render/src/widgets/listDrawer/index.tsx b/packages/form-render/src/widgets/listDrawer/index.tsx
@@ -6,6 +6,7 @@ import React, { useState, useRef } from 'react';
 import { Space, Table, Form, Button, Popconfirm, Tooltip, Divider } from 'antd';
 import { ArrowDownOutlined, ArrowUpOutlined, PlusOutlined, InfoCircleOutlined, CloseOutlined, CopyOutlined } from '@ant-design/icons';
 import type { FormListFieldData, FormListOperation, TableColumnsType } from 'antd';
+import sortProperties from '../../models/sortProperties';
 import FormDrawer from './drawerForm';
 import FButton from '../components/FButton';
 import './index.less';
@@ -54,6 +55,7 @@ const TableList: React.FC<Props> = (props: any) => {
     actionColumnProps,
     editorBtnProps,
 
+    hideOperate,
     hideDelete,
     hideCopy,
     hideMove,
@@ -105,15 +107,19 @@ const TableList: React.FC<Props> = (props: any) => {
     indexRef.current = null;
   };
 
-  const columns: TableColumnsType<FormListFieldData> = Object.keys(columnSchema).map(dataIndex => {
-    const { title, tooltip, width } = columnSchema[dataIndex];
-    const tooltipProps = getTooltip(tooltip);
+  const columns: any = sortProperties(Object.entries(columnSchema)).map(([dataIndex, item]) => {
+    const { required, title, tooltip, width, columnHidden } = item;
+    if (columnHidden) {
+      return null;
+    }
 
+    const tooltipProps = getTooltip(tooltip);
     return {
       dataIndex,
       width,
       title: (
         <>
+          {required && <span style={{ color: 'red', marginRight: '3px' }}>*</span>}
           <span>{title}</span>
           {tooltipProps && (
             <Tooltip placement='top' {...tooltipProps}>
@@ -136,9 +142,9 @@ const TableList: React.FC<Props> = (props: any) => {
         return renderCore({ schema: fieldSchema, parentPath: [field.name], rootPath: [...rootPath, field.name] });
       }
     }
-  });
+  }).filter(item => item);
 
-  if (!readOnly) {
+  if (!readOnly && !hideOperate) {
     columns.push({
       title: colHeaderText,
       width: '190px',

diff --git a/packages/form-render/src/widgets/listTable/index.tsx b/packages/form-render/src/widgets/listTable/index.tsx
@@ -88,8 +88,12 @@ const TableList: React.FC<ListTableProps> = (props) => {
     copyItem(value);
   };
 
-  const columns: TableColumnsType<FormListFieldData> = sortProperties(Object.entries(itemSchema)).map(([dataIndex, item]) => {
-    const { required, title, width, tooltip } = item;
+  const columns: any = sortProperties(Object.entries(itemSchema)).map(([dataIndex, item]) => {
+    const { required, title, width, tooltip, columnHidden } = item;
+    if (columnHidden) {
+      return null;
+    }
+
     const tooltipProps = getTooltip(tooltip);
     return {
       dataIndex,
@@ -135,7 +139,7 @@ const TableList: React.FC<ListTableProps> = (props) => {
         );
       }
     };
-  });
+  }).filter(item => item);
 
   if (!readOnly && !hideOperate) {
     columns.push({