526互联

avue-crud字段之间的动态交互效果以及接口数据的获取赋值

发布时间 2023-08-11 14:56:10作者: 小金子J

一、form表单下拉表单类型字段数据获取

　　1.通过配置系统字典接口获取数据并渲染

      {
        label: "经纪人",
        prop: "broker",
        type: "select",
        dicUrl: "/blade-system/dict/dictionary?code=broker",
        props: {
          label: "dictValue",
          value: "dictKey",
        },
        dataType: "number",
      },

　　2.通过后台开发接口获取一级字段数据并赋值

     {
        label: "经纪人",
        prop: "broker",
        type: "select",
        dicData: [],
        props: {
          label: "name",
          value: "id"
        },
      },

    import {brokerGetlist} from "@/api/property/presalecontracts";   
    beforeOpen(done, type) {
            let current = 1
            let size = 10
            // '经纪人'下拉表单字段数据
            brokerGetlist(current, size,Object.assign({},{})).then(res => {
              const column = this.findObject(this.option.column, "broker");
              column.dicData = res.data.data.records;
            })
        },

　　3.通过后台开发接口获取二级字段数据并赋值

      {
        label: "复合图层",
        prop: "layerResourceRelations",
        type: "dynamic",
        span: 12,
        hide:true,
        display:false,
        children: {
          align: "center",
          addBtn:true,
          column: [
            {
              label: "图层",
              prop: "compositionRelationLandLayerId",
              type: "select",
              dicData: [],
              props: {
              label: "layerName",
              value: "id"
              },
            }
          ]
        }
      }
    beforeOpen(done, type) {
            listByLayer().then(res => {
                const column = this.findObject(this.option.column, "layerResourceRelations");
                const column1 = this.findObject(column.children.column, "compositionRelationLandLayerId");
                column1.dicData = res.data.data;
            })
    }

二、动态控制字段之间的联动

　　1.动态赋值

　　　　　column: [
            {
                type: "select",
                label:"编码",
                prop: "Number",
                dicData: [
                  {
                    label: "出让",
                    value: 12345645132,
                  },
                  {
                    label: "签约",
                    value: 19546561231,
                  }
                ]
            }, {
                type: "input",
                label: "描述1",
                prop: "desc1",
            }, {
                type: "input",
                label: "描述2",
                prop: "desc2",
            },
        ]

        watch: {
            // 监听'编码'字段选择之后动态赋值给其他form数据
            'form.Number'(){
                let id = this.form.Number
                //当'编码'选择数据之后开始调接口
                pregetDetail(id).then(res => {
                    this.form = res.data.data;
                    this.form.desc1 = data.desc1         
                    this.form.desc2 = data.desc2
                });
            }
        },

　　2.动态显隐

        column: [
            {
                label: "图层类型",
                prop: "layerType",
                type: "select",
                dicData: [
                  {
                    label: "出让",
                    value: 1,
                  },
                  {
                    label: "签约",
                    value: 2,
                  }
                ]
            },
            {
                label: "图层名称",
                prop: "layerName",
                display:false,                                 //是否显示默认值
            },
            {
                label: "元数据类型",
                prop: "metadataCode",
                display:false,                                 //是否显示默认值
            },
        ]
                
        watch: {
            'form.layerType'(val) {
                let layerName= this.findObject(this.option.column,'layerName');
                let metadataCode = this.findObject(this.option.column,'metadataCode');
                if(val == 1){
                  layerName.display = true;                     //图层名称
                  metadataCode.display = true;                  //元数据类型
                }else if(val == 2){
                  layerName.display = false;                    //图层名称
                  metadataCode.display = false;                 //元数据类型
                }
            },
        },

　　3.动态禁止

　　　　column: [
            {
                label: "图层类型",
                prop: "layerType",
                type: "select",
                dicData: [
                  {
                    label: "出让",
                    value: 1,
                  },
                  {
                    label: "签约",
                    value: 2,
                  }
                ]
            },
            {
                label: "图层名称",
                prop: "layerName",
                disabled:false,                                 //是否禁止默认值
            },
            {
                label: "元数据类型",
                prop: "metadataCode",
                disabled:false,                                    //是否禁止默认值
            },
        ]
                
        watch: {
            'form.layerType'(val) {
                let layerName= this.findObject(this.option.column,'layerName');
                let metadataCode = this.findObject(this.option.column,'metadataCode');
                if(val == 1){
                  layerName.disabled = true;                     //图层名称
                  metadataCode.disabled = true;                  //元数据类型
                }else if(val == 2){
                  layerName.disabled = false;                    //图层名称
                  metadataCode.disabled = false;                 //元数据类型
                }
            },
        },

三、监听（区分判断新增或编辑弹窗）字段改变时赋值或者改变其他字段的值

        {
            label: "图层类型",
            prop: "layerType",
            type: "select",
            dataType: "number",
            dicUrl: "/api/blade-system/dict/dictionary?code=layerType",
            props: {
                label: "dictValue",
                value: "dictKey"
            },
            change:(val) =>{
                if(val.column.boxType == 'add'){
                    //新增弹窗改变下拉表单数值的时候
                    this.form.switchDataSource = ''
                    this.form.dataLandLayerId = ''
                }else if(val.column.boxType == 'edit'){
                    //编辑弹窗改变下拉表单数值的时候
                    this.form.switchDataSource = ''
                }
            }
        },

四、avue-crud限制子表单类型dynamic最多添加几条数据

　　需求：限制子表单type: "dynamic"最多可添加几条数据，超过限制条数则隐藏添加按钮但能正常删除，删除后还能继续添加

        {
            label: "复合图层",
            prop: "layerResourceAddresses",
            type: "dynamic",
            span: 12,
            hide:true,
            children: {
              align: "center",
              addBtn:true,                      //添加按钮显示
              column: [
                {
                label: "图层",
                prop: "layerResource",
                type: "select",
                dicData: [],
                props: {
                  label: "name",
                  value: "id"
                },
              }]
            }
          },
      
        //监听子表单总数据
        watch: {
            'form.layerResourceAddresses'(val) {
                let layerResourceAddresses = this.findObject(this.option.column,'layerResourceAddresses');   //绑定子表单属性
                if(val.length > 3){
                    this.$message.warning("最多可添加四条图层！");
                    layerResourceAddresses.children.addBtn = false                   //隐藏添加按钮
                }else{
                    layerResourceAddresses.children.addBtn = true                   //显示添加按钮
                }
            }
        },