test: custom search

ColeWang · Jul 8, 2024 · 2ea19f6 · 2ea19f6
1 parent 6556bcf
commit 2ea19f6
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 26 deletions.
diff --git a/src/packages/base-field/components/Checkbox.jsx b/src/packages/base-field/components/Checkbox.jsx
@@ -5,11 +5,6 @@ import { optionsToValueEnum, valueEnumToOptions, valueEnumToText } from '../util
 import { getSlotVNode } from '@/utils/props-util'
 import { isUndefined } from 'lodash-es'
 
-/**
- * @todo 待优化
- * validateStatus 变化应该使组件颜色变化
- * 组件库没有对外暴露 Form.Item 的 Status
- */
 export default defineComponent({
     inheritAttrs: false,
     props: { ...baseFieldProps },

diff --git a/src/packages/base-field/components/Radio.jsx b/src/packages/base-field/components/Radio.jsx
@@ -5,11 +5,6 @@ import { optionsToValueEnum, valueEnumToOptions, valueEnumToText } from '../util
 import { getSlotVNode } from '@/utils/props-util'
 import { isUndefined } from 'lodash-es'
 
-/**
- * @todo 待优化
- * validateStatus 变化应该使组件颜色变化
- * 组件库没有对外暴露 Form.Item 的 Status
- */
 export default defineComponent({
     inheritAttrs: false,
     props: { ...baseFieldProps },

diff --git a/src/packages/table/editable-table/index.jsx b/src/packages/table/editable-table/index.jsx
@@ -2,7 +2,7 @@ import { defineComponent, reactive, watch } from 'vue'
 import { Field, Form } from '@/packages/form'
 import Table from '../table'
 import InlineError from './components/inline-error'
-import { omit, pick } from 'lodash-es'
+import { get, pick, set, unset } from 'lodash-es'
 
 const editable = {
     type: 'multiple', // 可编辑表格的类型，单行编辑或者多行编辑
@@ -33,35 +33,44 @@ export default defineComponent({
     emits: ['update:value'],
     setup (props, { emit, slots }) {
         const model = reactive(props.dataSource || [])
+        const validateErrors = reactive([])
 
         watch(model, (value) => {
-            console.log(value)
             emit('update:value', value)
         }, { deep: true, immediate: true })
 
-        function onValidate (name, status, errors) {
-            console.log(name, status, errors)
+        function onValidate (namePath, status, errors) {
+            if (!status && errors) {
+                set(validateErrors, namePath, errors)
+            } else {
+                unset(validateErrors, namePath)
+            }
         }
 
         function customRender ({ text, record, index, column }) {
             const { fieldProps, formItemProps } = column
-            const namePath = column.key || column.dataIndex
+            const namePath = [index, column.key || column.dataIndex]
 
             const needFormItemProps = {
-                ...omit(formItemProps, ['label']),
-                name: [index, namePath],
+                ...formItemProps,
+                name: namePath,
+                label: column.title,
                 noStyle: true
             }
             const needFieldProps = {
                 ...pick(column, Object.keys(Field.props)),
                 fieldProps: { ...fieldProps, style: { width: '100%' } },
                 formItemProps: needFormItemProps
             }
-            return (
-                <InlineError errors={['此项为必填项']}>
-                    <Field {...needFieldProps}/>
-                </InlineError>
-            )
+            if (needFormItemProps.required || needFormItemProps.rules) {
+                const errors = get(validateErrors, namePath)
+                return (
+                    <InlineError errors={errors}>
+                        <Field {...needFieldProps}/>
+                    </InlineError>
+                )
+            }
+            return <Field {...needFieldProps}/>
         }
 
         return () => {
@@ -71,6 +80,12 @@ export default defineComponent({
                 return { ...column, customRender }
             })
 
+            const formProps = {
+                model: model,
+                layout: 'vertical',
+                onValidate: onValidate
+            }
+
             const tableProps = {
                 ...pick(props, Object.keys(Table.props)),
                 columns: columns,
@@ -79,7 +94,7 @@ export default defineComponent({
                 toolbar: false
             }
             return (
-                <Form model={model} onValidate={onValidate} layout={'vertical'}>
+                <Form {...formProps}>
                     <Table {...tableProps}/>
                 </Form>
             )

diff --git a/src/views/table/CustomSearch.jsx b/src/views/table/CustomSearch.jsx
@@ -1,6 +1,6 @@
 import { defineComponent, ref, unref } from 'vue'
 import { CustomFields } from '@/packages/base-field'
-import { HocField, Radio, Select } from '@/packages/form'
+import { HocField, Radio, Select, Checkbox, Switch, Slider } from '@/packages/form'
 import { Action, ActionGroup, BaseSearch, Table } from '@/packages/table'
 
 const Test = HocField('test')
@@ -9,7 +9,7 @@ export default defineComponent({
     name: 'TableCustomSearch',
     setup () {
         const model = ref({
-            radio: '1'
+            // radio: '1'
         })
 
         const columns = [
@@ -84,7 +84,7 @@ export default defineComponent({
                     }}>
                         <Table {...tableProps} v-slots={{
                             search: (slotScope) => (
-                                <BaseSearch {...slotScope} span={12} model={unref(model)}>
+                                <BaseSearch {...slotScope} labelWidth={100} span={12} model={unref(model)}>
                                     <Select
                                         label={'Age'}
                                         name={['data', 'age']}
@@ -104,6 +104,25 @@ export default defineComponent({
                                             '2': '选项二',
                                         }}
                                     />
+                                    <Checkbox
+                                        label={'Checkbox'}
+                                        name={'checkbox'}
+                                        required={true}
+                                        valueEnum={{
+                                            '1': '选项一',
+                                            '2': '选项二',
+                                        }}
+                                    />
+                                    <Switch
+                                        label={'Switch'}
+                                        name={'switch'}
+                                        required={true}
+                                    />
+                                    <Slider
+                                        label={'Slider'}
+                                        name={'slider'}
+                                        required={true}
+                                    />
                                     <Test
                                         label={'Test'}
                                         labelWidth={150}