fix: query filter hidden

Author: cole

src/packages/form/layouts/query-filter/hooks/useQueryFilter.js

@@ -57,9 +57,13 @@ function useQueryFilter (size, props) {
     }
 
     function genColNodes (children, callback) {
+        //  添加计数 解决位置不对问题
+        let hiddenCount = 0
+
         const nodes = filterEmptyElement(children).map((child, index) => {
             const propsHidden = child.props && child.props.hidden || false
-            const colHidden = propsHidden || unref(collapsed) && (index > unref(showNumber) - 1)
+            propsHidden && (hiddenCount += 1)
+            const colHidden = propsHidden || unref(collapsed) && (index - hiddenCount > unref(showNumber) - 1)
             const hidden = showCollapse ? colHidden : propsHidden
             const key = (isValidElement(child) && child.key) || index
             return { key: key, child: child, hidden: hidden }

src/packages/table/compatible/search/Search.jsx

@@ -50,6 +50,7 @@ export default defineComponent({
                         }
                         const needFieldProps = {
                             ...pick(column, Object.keys(Field.props)),
+                            hidden: !!column.hideInSearch,
                             fieldProps: { ...fieldProps, style: { width: '100%' } },
                             formItemProps: needFormItemProps
                         }

src/packages/table/components/column-setting/index.jsx

@@ -75,13 +75,16 @@ export default defineComponent({
         return () => {
             const { checkable, draggable } = props
 
-            const unCheckedColumns = unref(columns).filter((item) => item.checked === false)
-            const indeterminate = unCheckedColumns.length > 0 && unCheckedColumns.length !== unref(columns).length
-            const checked = unCheckedColumns.length === 0 && unCheckedColumns.length !== unref(columns).length
+            // 不在 setting 中展示的
+            const needColumns = unref(columns).filter((item) => !item.hideInSetting)
 
-            const leftList = unref(columns).filter((item) => item.fixed === 'left')
-            const list = unref(columns).filter((item) => item.fixed === undefined)
-            const rightList = unref(columns).filter((item) => item.fixed === 'right')
+            const unCheckedColumns = needColumns.filter((item) => item.checked === false)
+            const indeterminate = unCheckedColumns.length > 0 && unCheckedColumns.length !== needColumns.length
+            const checked = unCheckedColumns.length === 0 && unCheckedColumns.length !== needColumns.length
+
+            const leftList = needColumns.filter((item) => item.fixed === 'left')
+            const list = needColumns.filter((item) => item.fixed === undefined)
+            const rightList = needColumns.filter((item) => item.fixed === 'right')
 
             const showTitle = leftList.length > 0 || rightList.length > 0
 

src/packages/table/editable-table/index.jsx

@@ -1,6 +1,7 @@
 import { defineComponent, reactive, watch } from 'vue'
-import { Form } from '@/packages/form'
+import { Field, Form } from '@/packages/form'
 import Table from '../table'
+import { pick } from 'lodash-es'
 
 const editable = {
     type: 'multiple', // 可编辑表格的类型，单行编辑或者多行编辑
@@ -33,17 +34,44 @@ export default defineComponent({
         const model = reactive(props.dataSource || [])
 
         watch(model, (value) => {
+            console.log(value)
             emit('update:value', value)
         }, { deep: true, immediate: true })
 
+        function customRender (text, record, index, column) {
+            const { fieldProps, formItemProps } = column
+            const namePath = column.key || column.dataIndex
+
+            const needFormItemProps = {
+                ...formItemProps,
+                name: [index, namePath]
+                // label: column.title
+            }
+            const needFieldProps = {
+                ...pick(column, Object.keys(Field.props)),
+                fieldProps: { ...fieldProps, style: { width: '100%' } },
+                formItemProps: needFormItemProps
+            }
+            return <Field {...needFieldProps}/>
+        }
+
         return () => {
+            const { columns: propsColumns } = props
+
+            const columns = propsColumns.map((column) => {
+                return { ...column, customRender }
+            })
+
+            const tableProps = {
+                ...pick(props, Object.keys(Table.props)),
+                columns: columns,
+                pagination: false,
+                search: false,
+                toolbar: false
+            }
             return (
                 <Form model={model} layout={'vertical'}>
-                    <Table
-                        search={false}
-                        options={false}
-                        pagination={false}
-                    />
+                    <Table {...tableProps}/>
                 </Form>
             )
         }

src/views/Home.jsx

@@ -22,7 +22,8 @@ export default defineComponent({
                     title: 'Tel',
                     search: true,
                     copyable: true,
-                    dataIndex: 'tel'
+                    dataIndex: 'tel',
+                    hideInSetting: true
                 },
                 {
                     title: 'Age',

src/views/table/EditableTable.jsx

@@ -4,9 +4,57 @@ import { EditableTable } from '@/packages/table'
 export default defineComponent({
     inheritAttrs: false,
     setup () {
+        const columns = [
+            {
+                title: 'Name',
+                dataIndex: 'name',
+                valueType: 'text',
+                formItemProps: {
+                    required: true
+                }
+            },
+            {
+                title: 'Age',
+                dataIndex: 'age',
+                valueType: 'select',
+                valueEnum: {
+                    '1': '选项一',
+                    '2': '选项二'
+                },
+                formItemProps: {
+                    required: true
+                }
+            },
+            {
+                title: 'Address',
+                dataIndex: 'address',
+                valueType: 'text'
+            }
+        ]
+
+        const dataSource = [
+            {
+                key: '1',
+                name: 'John Brown',
+                age: '1',
+                address: 'New York No. 1 Lake Park',
+            },
+            {
+                key: '2',
+                name: 'Jim Green',
+                age: '2',
+                address: 'London No. 1 Lake Park',
+            }
+        ]
+
         return () => {
+            const tableProps = {
+                columns: columns,
+                dataSource: dataSource
+            }
+
             return (
-                <EditableTable/>
+                <EditableTable {...tableProps}/>
             )
         }
     }