fix: field text

ColeWang · Jun 14, 2024 · 59ed132 · 59ed132
1 parent eaab6d7
commit 59ed132
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 27 deletions.
diff --git a/src/packages/base-field/BaseField.jsx b/src/packages/base-field/BaseField.jsx
@@ -175,7 +175,6 @@ export default defineComponent({
             const { model = {}, name: namePath } = formItemProps
 
             const inputValue = get(model, namePath, undefined)
-            const dataValue = mode === 'edit' ? (inputValue ?? text ?? '') : (text ?? inputValue ?? '')
 
             const needFieldProps = {
                 ...fieldProps,
@@ -186,7 +185,7 @@ export default defineComponent({
             const fieldRenderProps = {
                 ...props,
                 ...attrs,
-                text: dataValue,
+                text: mode === 'edit' ? (inputValue ?? text) : (text ?? inputValue),
                 fieldProps: needFieldProps
             }
 

diff --git a/src/packages/base-field/__tests__/index.test.js b/src/packages/base-field/__tests__/index.test.js
diff --git a/src/packages/base-field/__tests__/index.test.jsx b/src/packages/base-field/__tests__/index.test.jsx
@@ -0,0 +1,47 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import BaseField from '../index'
+import { DatePicker, RangePicker } from 'ant-design-vue'
+import { formatDate } from '../utils'
+import dayjs from 'dayjs'
+
+describe('BaseField', () => {
+    it('render', () => {
+        const wrapper = mount(() => <BaseField/>)
+        expect(wrapper.exists()).toBeTruthy()
+    })
+    it('props valueType date', async () => {
+        const wrapper = mount(BaseField, {
+            props: {
+                valueType: 'date'
+            }
+        })
+        const datePicker = wrapper.findComponent(DatePicker)
+        expect(datePicker.exists()).toBe(true)
+        // 只读
+        await wrapper.setProps({ mode: 'read' })
+        const emptyText = wrapper.props('emptyText')
+        expect(wrapper.text()).toBe(emptyText)
+        // text
+        const text = dayjs()
+        await wrapper.setProps({ mode: 'read', text: text })
+        expect(wrapper.text()).toBe(formatDate(text))
+    })
+    it('props valueType dateRange', async () => {
+        const wrapper = mount(BaseField, {
+            props: {
+                valueType: 'dateRange'
+            }
+        })
+        const rangePicker = wrapper.findComponent(RangePicker)
+        expect(rangePicker.exists()).toBe(true)
+        // 只读
+        await wrapper.setProps({ mode: 'read' })
+        const emptyText = wrapper.props('emptyText')
+        expect(wrapper.text()).toBe(emptyText + '~' + emptyText)
+        // text
+        const text = [dayjs(), dayjs()]
+        await wrapper.setProps({ mode: 'read', text: text })
+        expect(wrapper.text()).toBe(formatDate(text[0]) + '~' + formatDate(text[1]))
+    })
+})
diff --git a/src/views/Test.jsx b/src/views/Test.jsx
@@ -30,20 +30,20 @@ export default defineComponent({
         return () => {
             return (
                 <Form layout={'inline'}>
-                    <Date width={'md'}/>
-                    <DateRange width={'md'}/>
-                    <DateWeek width={'md'}/>
-                    <DateWeekRange width={'md'}/>
-                    <DateMonth width={'md'}/>
-                    <DateMonthRange width={'md'}/>
-                    <DateQuarter width={'md'}/>
-                    <DateQuarterRange width={'md'}/>
-                    <DateYear width={'md'}/>
-                    <DateYearRange width={'md'}/>
-                    <DateTime width={'md'}/>
-                    <DateTimeRange width={'md'}/>
-                    <Time width={'md'}/>
-                    <TimeRange width={'md'}/>
+                    <Date mode={'read'} width={'md'}/>
+                    {/*<DateRange width={'md'}/>*/}
+                    {/*<DateWeek width={'md'}/>*/}
+                    {/*<DateWeekRange width={'md'}/>*/}
+                    {/*<DateMonth width={'md'}/>*/}
+                    {/*<DateMonthRange width={'md'}/>*/}
+                    {/*<DateQuarter width={'md'}/>*/}
+                    {/*<DateQuarterRange width={'md'}/>*/}
+                    {/*<DateYear width={'md'}/>*/}
+                    {/*<DateYearRange width={'md'}/>*/}
+                    {/*<DateTime width={'md'}/>*/}
+                    {/*<DateTimeRange width={'md'}/>*/}
+                    {/*<Time width={'md'}/>*/}
+                    {/*<TimeRange width={'md'}/>*/}
                 </Form>
             )
         }

diff --git a/src/views/descriptions/index.jsx b/src/views/descriptions/index.jsx
@@ -56,7 +56,7 @@ export default defineComponent({
                         checkbox: '1',
                         switch: true,
                         slider: [10, 90],
-                        number: 9010,
+                        number: 0,
                         textarea: '这是一段很长很长很长很长的长长的文本',
                         password: '19203',
                         text: '文本',