form-create
form-create copied to clipboard
xaboy
control规则控制后使用resetFields() 无法清空上一次数据
vue2
<div id="app">
<div>
<form-create :rule="rule" v-model="fApi" :option="options" value.sync="value"/>
</div>
<div>
<el-button @click="updateData1">设置1</el-button>
<el-button @click="updateData2">设置2</el-button>
</div>
</div>
new Vue({
el: '#app',
data(){
return {
fApi:{},
options:{
onSubmit:(formData)=>{
alert(JSON.stringify(formData))
}
},
value: {},
rule: [
{
"type": "radio",
"field": "d_rule_type",
"title": "方式",
"info": "当选择“条件下发”选项，但未选择规则，则代表为全部产品下发",
"options": [
{
"value": "condition",
"label": "条件下发"
},
{
"value": "device",
"label": "指定MAC"
},
],
"value": "condition",
"$required": "",
"control": [
{
handle(val){
return val === 'condition'
},
rule: [
{
"type": "object",
"field": "d_rule",
// "title": "规则",
"props": {
"rule": [
{
"type": "object",
"field": "product",
"props": {
"rule": [
{
"type": "select",
"name": "product-op",
"title": "产品",
"field": "op",
"value": "",
"props": {
"placeholder": "请选择包含/不包含",
"clearable": true
},
"options": [
{
"value": "contain",
"label": "包含"
},
{
"value": "not_contain",
"label": "不包含"
}
],
col:{
span:10
},
"_fc_drag_tag": "select",
"hidden": false,
"display": true
},
{
"type": "select",
"field": "value",
"name": "product-value",
"title": "",
"info": "",
"effect": {
"fetch": ""
},
"props": {
"placeholder": "请选择产品名称",
"collapseTags": false,
"multiple": true,
"clearable": true,
"filterable": true,
"reserve-keyword": true,
},
col:{
span:14
},
"options": [
{
"value": "alita",
"label": "Alita"
},
{
"value": "mulan",
"label": "mulan"
}
],
"hidden": false,
"display": true
}
],
},
"hidden": false,
"display": true
},
{
"type": "object",
"field": "mn",
"props": {
"rule": [
{
"type": "select",
"name": "mn-op",
"title": "机型",
"field": "op",
"value": "",
"props": {
"placeholder": "请选择包含/不包含",
"clearable": true
},
"options": [
{
"value": "contain",
"label": "包含"
},
{
"value": "not_contain",
"label": "不包含"
}
],
col:{
span:10
},
"_fc_drag_tag": "select",
"hidden": false,
"display": true
},
{
"type": "select",
"field": "value",
"name": "mn-value",
"props": {
"placeholder": "请选择产品型号",
"collapseTags": false,
"multiple": true,
"clearable": true,
"filterable": true,
"reserve-keyword": true,
},
col:{
span:14
},
"options": [
{
"value": "1234",
"label": "DZ1C"
},
{
"value": "5678",
"label": "DZ7C"
}
],
"hidden": false,
"display": true
}
],
},
"hidden": false,
"display": true
},
{
"type": "object",
"field": "android_ver",
"props": {
"rule": [
{
"type": "select",
"name": "android_ver-op",
"title": "安卓版本",
"field": "op",
"props": {
"placeholder": "请选择包含/不包含",
"clearable": true
},
"value": "",
"options": [
{
"value": "contain",
"label": "包含"
},
{
"value": "not_contain",
"label": "不包含"
}
],
col:{
span: 10
},
"_fc_drag_tag": "select",
"hidden": false,
"display": true
},
{
"type": "select",
"field": "value",
"name": "android_ver-value",
"props": {
"placeholder": "请选择安卓版本",
"collapseTags": false,
"multiple": true,
"clearable": true,
"filterable": true,
"reserve-keyword": true,
},
col:{
span: 14
},
"options": [
{
"value": 28,
"label": "Pie"
},
{
"value": 29,
"label": "Android 10"
}
],
"hidden": false,
"display": true
}
],
},
"hidden": false,
"display": true
},
{
"type": "el-alert",
"props": {
"title": "提示",
"description": "上述规则之间是与的关系，若选择产品为 包含alita、机型不包括ABCD， 则下发范围是 alita产品下的非ABCD机型的其他机型",
"type": "success",
"effect": "light",
"closable": true
},
"_fc_drag_tag": "el-alert",
"hidden": false,
"display": true
},
]
},
},
]
},
{
handle(val){
return val === 'device'
},
rule: [
{
"type": "object",
"field": "d_rule",
// "title": "规则",
"props" : {
"rule": [
{
"type": "input",
"field": "mac",
"title": "mac",
"info": "mac数据格式为 大写且带‘:’，并按照‘,’分割",
"props": {
"rows": 15,
"type": "textarea",
"placeholder": "mac数据格式为 小写且带‘:’（aa:bb:cc:dd:ee:ff）多个按照‘,’分割"
},
"_fc_drag_tag": "input",
"validate": [{type: String, required: true}],
"col": {
span: 24
},
"value": ""
}
]
},
},
]
}
],
"props": {
},
"col":{
"span":24
},
},
]
}
},
methods:{
updateData1(){
let data = {
"id": 2,
"m_key": "resolution_control_action",
"d_remark": "测试JSON数据",
"m_data_type": "json",
"m_package_name": "com.mitv.tvhome",
"d_data": {
"bb": 1,
"aaa": 1
},
"d_rule_type": "device",
"d_rule": {
"mac": "aa:bb:cc:dd:e3:ff,aa:bb:cc:dd:e4:ff"
},
}
this.initFormValue(data)
},
updateData2(){
this.fApi.resetFields()
let data = {
"id": 1,
"m_key": "test",
"d_remark": "",
"m_data_type": "file",
"m_package_name": "com.test.test",
"d_data": {
"file_name": "ccc.xml",
"fds_object_name": "tmp/f4258b42067e6c42053437b148144182_ccc.xml"
},
"d_rule_type": "condition",
"d_rule": {
"mn": {
"op": "contain",
"value": [
"RM1K"
]
},
"product": {
"op": "",
"value": []
},
"android_ver": {
"op": "",
"value": []
}
},
}
this.initFormValue(data)
},
initFormValue(newValue){
console.log('new second data,', newValue)
this.rule.forEach(ele=>{
let field = ele.field
this.fApi.setValue(field, newValue[field])
})
this.fApi.setValue('d_rule', newValue['d_rule'])
}
}
})
复现步骤：
1.点击 “设置1“
2 点击“设置2“
3 选择“指定mac”
未正常清空mac中的值
期望 resetFields() 可以清空所有值，点击“设置2” 后，选择指定mac时候，框内文本为空
给ojbect定义默认值"value": {"mac": ""}可以避免 @yangyaq
{
"type": "object",
"field": "d_rule",
"value": {"mac": ""},
"props" : {
"rule": [
{
"type": "input",
"field": "mac",
"title": "mac",
"info": "mac数据格式为 大写且带‘:’，并按照‘,’分割",
"props": {
"rows": 15,
"type": "textarea",
"placeholder": "mac数据格式为 小写且带‘:’（aa:bb:cc:dd:ee:ff）多个按照‘,’分割"
},
"_fc_drag_tag": "input",
"validate": [{type: String, required: true}],
"col": {
span: 24
},
"value": ""
}
]
}
还是不行 @xaboy https://github.com/xaboy/form-create/assets/43380084/113017f2-c67f-4f40-8a82-e63dce3ef887