Skip to content

Commit 74e29d2

Browse files
wocwinwocwin
committed
refactor:TForm组件新增单独重置某一项的demo示例
1 parent 96bc329 commit 74e29d2

File tree

7 files changed

+352
-133
lines changed

7 files changed

+352
-133
lines changed

‎docs/.vuepress/components/docsComponents/TForm/allRef.vue

+198
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
<template>
2+
<t-layout-page>
3+
<t-layout-page-item>
4+
<t-form
5+
:ref-obj.sync="formOpts.ref"
6+
:formOpts="formOpts"
7+
:widthSize="2"
8+
ref="formAllRefs"
9+
:all-ref.sync="allRefs"
10+
/>
11+
</t-layout-page-item>
12+
</t-layout-page>
13+
</template>
14+
15+
<script>
16+
import cascaderData from './cascaderData.json'
17+
export default {
18+
name: 'dhFormDemo',
19+
data() {
20+
return {
21+
hobbyList: [],
22+
sexList: [],
23+
statusList: [],
24+
// form表单
25+
formOpts: {
26+
ref: null,
27+
formData: {
28+
sex: null, // *性别: 0:男 1:女
29+
hobby: null, // *爱好: 0:男 1:女
30+
createDate: null, // 年份
31+
valDate1: null, // 月份范围
32+
valDate2: null, // 日期范围
33+
valDate3: null, // 时间范围
34+
desc: null, // 描述
35+
deptCode: null,
36+
deptCode1: null,
37+
deptCode2: null,
38+
status1: null,
39+
status: null // *状态: 0：停用，1：启用(默认为1)',
40+
},
41+
fieldList: [
42+
{
43+
label: '性别', value: 'sex', placeholder: 'TSelect单选', ref: 'sexRef', comp: 't-select', isSelfCom: true, bind: { optionSource: [] }, eventHandle: {
44+
change: (val, scope) => this.changeSex(val, scope),
45+
}
46+
},
47+
{ label: '状态(继承list)', value: 'status1', placeholder: 'TSelect继承list方式', ref: 'status1Ref', type: 'select-arr', comp: 't-select', list: 'statusList', arrLabel: 'label', arrKey: 'key', bind: {} },
48+
{ label: '状态', value: 'status', placeholder: 'TSelect单选', comp: 't-select', ref: 'statusRef', isSelfCom: true, bind: { optionSource: [] } },
49+
{ label: '爱好', value: 'hobby', placeholder: 'TSelect多选', comp: 't-select', ref: 'hobbyRef', isSelfCom: true, bind: { multiple: true, optionSource: [] } },
50+
{ label: '部门', value: 'deptCode', placeholder: 'TCascader使用', comp: 't-cascader', ref: 'TCascaderRef', isSelfCom: true, bind: { props: { emitPath: false, children: 'children', label: 'deptName', value: 'deptNum', checkStrictly: true, }, options: [] } },
51+
{ label: '部门1', value: 'deptCode1', placeholder: 'el-cascader使用', comp: 'el-cascader', ref: 'ElCascaderRef', isSelfCom: true, bind: { props: { emitPath: false, children: 'children', label: 'deptName', value: 'deptNum', checkStrictly: true, }, options: [] } },
52+
{
53+
label: '下拉选择表格', value: 'deptCode2', placeholder: 't-select-table使用', comp: 't-select-table', ref: 'selectTableRef-deptCode2', isSelfCom: true, bind: {
54+
isKeyup: true,
55+
maxHeight: 400,
56+
keywords: { label: 'name', value: 'id' },
57+
table: { data: [] },
58+
columns: [
59+
{ label: '物料编号', width: '100px', prop: 'code', align: 'left' },
60+
{ label: '物料名称', width: '149px', prop: 'name' },
61+
{ label: '规格', width: '149px', prop: 'spec' },
62+
{ label: '单位', width: '110px', prop: 'unitName' },
63+
{ label: '物料编号1', width: '149px', prop: 'code' },
64+
{ label: '物料名称1', width: '149px', prop: 'name' },
65+
],
66+
},
67+
eventHandle: {
68+
radioChange: (val) => this.radioChange(val)
69+
}
70+
},
71+
{ label: '年份', value: 'createDate', placeholder: 'TDatePicker选择年份', type: 'year', ref: 'createDateRef', bind: { type: 'year' }, comp: 't-date-picker' },
72+
{ label: '月份范围', value: 'valDate1', comp: 't-date-picker', ref: 'valDate1Ref', bind: { type: 'monthrange', isPickerOptions: true } },
73+
{ label: '日期范围', value: 'valDate2', comp: 't-date-picker', ref: 'valDate2Ref', bind: { type: 'daterange', isPickerOptions: true } },
74+
{ label: '时间范围', value: 'valDate3', comp: 't-date-picker', ref: 'valDate3Ref', bind: { type: 'datetimerange', isPickerOptions: true } },
75+
{ label: '描述', value: 'desc', type: 'textarea', ref: 'descRef', comp: 'el-input', widthSize: 1 }
76+
],
77+
operatorList: [
78+
{ label: '提交', type: 'danger', fun: this.submitForm },
79+
{ label: '重置', type: 'primary', fun: this.resetForm },
80+
{
81+
label: "重置下拉表格",
82+
bind: { type: "primary" },
83+
fun: () => this.resetValue("selectTableRef-deptCode2")
84+
},
85+
{ label: "重置性别", bind: { type: "primary" }, fun: () => this.resetValue("sexRef") },
86+
{ label: "重置状态1", bind: { type: "primary" }, fun: () => this.resetValue("status1Ref") },
87+
{ label: "重置状态", bind: { type: "primary" }, fun: () => this.resetValue("statusRef") },
88+
{ label: "重置爱好", bind: { type: "primary" }, fun: () => this.resetValue("hobbyRef") },
89+
{ label: "重置TCascader", bind: { type: "primary" }, fun: () => this.resetValue("TCascaderRef", 'deptCode') },
90+
{ label: "重置elCascader", bind: { type: "primary" }, fun: () => this.resetValue("ElCascaderRef", 'deptCode1') },
91+
{ label: "重置年份", bind: { type: "primary" }, fun: () => this.resetValue("createDateRef") },
92+
{ label: "重置月份范围", bind: { type: "primary" }, fun: () => this.resetValue("valDate1Ref") },
93+
{ label: "重置日期范围", bind: { type: "primary" }, fun: () => this.resetValue("valDate2Ref") },
94+
{ label: "重置时间范围", bind: { type: "primary" }, fun: () => this.resetValue("valDate3Ref") },
95+
{ label: "重置描述", bind: { type: "primary" }, fun: () => this.resetValue("descRef") },
96+
],
97+
listTypeInfo: {
98+
statusList: [],
99+
}
100+
},
101+
allRefs: {}
102+
}
103+
},
104+
async created() {
105+
await this.getSelectList()
106+
},
107+
mounted() {
108+
console.log('所有refs', this.allRefs)
109+
},
110+
methods: {
111+
getSelectList() {
112+
this.hobbyList = [
113+
{ label: '吉他', key: '0' },
114+
{ label: '看书', key: '1' },
115+
{ label: '美剧', key: '2' },
116+
{ label: '旅游', key: '3' },
117+
{ label: '音乐', key: '4' }
118+
]
119+
this.sexList = [
120+
{ label: '女', key: 1 },
121+
{ label: '男', key: 0 }
122+
]
123+
this.formOpts.listTypeInfo.statusList = [
124+
{ label: '启用', key: 1 },
125+
{ label: '停用', key: 0 }
126+
]
127+
this.statusList = [
128+
{ label: '启用', key: 1 },
129+
{ label: '停用', key: 0 }
130+
]
131+
const tableData = [
132+
{ id: 1, code: 1, name: '物料名称1', spec: '物料规格1', unitName: '吨' },
133+
{ id: 2, code: 2, name: '物料名称2', spec: '物料规格2', unitName: '吨' },
134+
{ id: 3, code: 3, name: '物料名称3', spec: '物料规格3', unitName: '吨' },
135+
{ id: 4, code: 4, name: '物料名称4', spec: '物料规格4', unitName: '吨' },
136+
{ id: 5, code: 5, name: '物料名称5', spec: '物料规格5', unitName: '吨' },
137+
{ id: 6, code: 6, name: '物料名称6', spec: '物料规格6', unitName: '吨' },
138+
{ id: 7, code: 7, name: '物料名称7', spec: '物料规格7', unitName: '吨' },
139+
{ id: 8, code: 8, name: '物料名称8', spec: '物料规格8', unitName: '吨' },
140+
{ id: 9, code: 9, name: '物料名称9', spec: '物料规格9', unitName: '吨' }
141+
]
142+
const res = cascaderData
143+
this.formOpts.fieldList.map(val => {
144+
switch (val.value) {
145+
case 'sex':
146+
val.bind.optionSource = this.sexList
147+
break
148+
case 'status':
149+
val.bind.optionSource = this.statusList
150+
break
151+
case 'hobby':
152+
val.bind.optionSource = this.hobbyList
153+
break
154+
case 'deptCode':
155+
case 'deptCode1':
156+
val.bind.options = res.data
157+
break
158+
case 'deptCode2':
159+
val.bind.table.data = tableData
160+
// console.log('11--', val)
161+
break
162+
}
163+
})
164+
},
165+
changeSex(val, scope) {
166+
console.log('选择性别change事件', val, scope)
167+
},
168+
// 下拉选择表格组件赋值
169+
radioChange(val) {
170+
console.log('下拉选择表格组件赋值', val)
171+
this.formOpts.formData.deptCode2 = val.name
172+
},
173+
// 提交form表单
174+
submitForm() {
175+
this.formOpts.ref.validate((valid) => {
176+
console.log(88, valid)
177+
console.log(77, this.formOpts.formData)
178+
if (!valid) return
179+
console.log('最终数据', this.formOpts.formData)
180+
})
181+
},
182+
// 重置单个表单项的Ref
183+
resetValue(type, val) {
184+
if (type.includes('Cascader')) {
185+
this.formOpts.formData[val] = []
186+
} else if (type == 'descRef') {
187+
this.formOpts.formData.desc = ''
188+
} else {
189+
this.allRefs[type][0].clear()
190+
}
191+
},
192+
// 重置form表单
193+
resetForm() {
194+
this.$refs.formAllRefs.resetFieldsSelf()
195+
}
196+
}
197+
}
198+
</script>

‎docs/.vuepress/components/docsComponents/TForm/comUse.vue

+9-8
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<t-layout-page>
33
<t-layout-page-item>
4-
<t-form :ref-obj.sync="formOpts.ref" :formOpts="formOpts" :widthSize="1" />
4+
<t-form :ref-obj.sync="formOpts.ref" ref="TFormRef" :formOpts="formOpts" :widthSize="1" />
55
</t-layout-page-item>
66
</t-layout-page>
77
</template>
@@ -34,7 +34,7 @@ export default {
3434
},
3535
fieldList: [
3636
{
37-
label: '性别', value: 'sex', placeholder: 'TSelect单选', comp: 't-select', isSelfCom: true, bind: { optionSource: [] }, eventHandle: {
37+
label: '性别', value: 'sex', placeholder: 'TSelect单选', ref: 'sexRef', comp: 't-select', isSelfCom: true, bind: { optionSource: [] }, eventHandle: {
3838
change: (val, scope) => this.changeSex(val, scope),
3939
}
4040
},
@@ -75,13 +75,12 @@ export default {
7575
listTypeInfo: {
7676
statusList: [],
7777
}
78-
},
78+
}
7979
}
8080
},
8181
async created() {
8282
await this.getSelectList()
8383
},
84-
// 方法
8584
methods: {
8685
getSelectList() {
8786
this.hobbyList = [
@@ -156,10 +155,12 @@ export default {
156155
},
157156
// 重置form表单
158157
resetForm() {
159-
Object.assign(
160-
this.$data.formOpts.formData,
161-
this.$options.data().formOpts.formData
162-
)
158+
this.$refs.TFormRef.resetFieldsSelf()
159+
// console.log('重置form表单', this.formOpts.ref)
160+
// Object.assign(
161+
// this.$data.formOpts.formData,
162+
// this.$options.data().formOpts.formData
163+
// )
163164
}
164165
}
165166
}

‎docs/.vuepress/config.js

+1
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ module.exports = {
128128
'TForm/btnisHide', // 操作按钮动态显示&隐藏
129129
'TForm/btnRender', // 操作按钮render渲染
130130
'TForm/btnSlotName', // 操作按钮插槽显示
131+
'TForm/allRef', // 获取单个表单项的ref
131132
'TForm/help' // 使用帮助(Attributes)
132133
]
133134
},

‎docs/baseComponents/TForm/allRef.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# 获取单个表单项的Ref
2+
3+
---
4+
5+
<common-code-format>
6+
<docsComponents-TForm-allRef slot="source"></docsComponents-TForm-allRef>
7+
注意：设置`t-select-table`组件的ref,必须是以`selectTableRef-`开头，加上对应的`value`值
8+
9+
<<< @/docs/.vuepress/components/docsComponents/TForm/allRef.vue
10+
</common-code-format>

‎docs/baseComponents/TForm/help.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,8 @@
1515

1616
| 参数 | 说明 | 类型 | 默认值 |
1717
| :----------------------------------- | :------------------------------------------------------------------------------------------------------ | :--------------- | :---------- |
18-
| refObj | form 表单校验规则方法 （可以参考 elementUI Form 表单方法中的 validate） | obj | - |
18+
| refObj | form 表单校验规则方法 （可以参考 elementUI Form 表单方法中的 validate） （组件使用必须加上修饰符.sync） | obj | - |
19+
| allRef | TForm组件的所有ref （组件使用必须加上修饰符.sync） | obj | - |
1920
| className | 自定义类名 | String | - |
2021
| labelPosition | 改变表单项 label 与输入框的布局方式(默认：right) /top | String | 'right' |
2122
| widthSize | 每行显示几个输入项（默认两项） | Number | 2 |

‎packages/date-picker/src/index.vue

+4
Original file line numberDiff line numberDiff line change
@@ -291,6 +291,10 @@ export default {
291291
} else {
292292
this.$emit('change', val)
293293
}
294+
},
295+
// 清空时间
296+
clear() {
297+
this.time = null
294298
}
295299
}
296300
}

0 commit comments

Comments
 (0)