xaboy / form-create

:fire::fire::fire: 强大的低代码动态表单组件,通过数据驱动表单渲染,适配移动端,支持可视化设计。提高开发者对表单的开发效率。目前在政务系统、OA系统、ERP系统、电商系统、流程管理等系统中已稳定应用。
https://www.form-create.com/
MIT License
5.97k stars 960 forks source link

control规则控制后使用resetFields() 无法清空上一次数据 #707

Open yangyaq opened 2 months ago

yangyaq commented 2 months ago

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时候,框内文本为空

xaboy commented 2 months ago

给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": ""
        }
    ]
}
yangyaq commented 2 months ago

还是不行 @xaboy https://github.com/xaboy/form-create/assets/43380084/113017f2-c67f-4f40-8a82-e63dce3ef887