Nested forms and tables at the same time in avue subform

 

 

 {
      label: '价格项目',
      prop: 'savePriceItemDtos',
      type: 'dynamic',
      span: 24,
      // rules: [
      //   {
      //     required: true,
      //     message: '请录入价格项目信息',
      //     trigger: 'blur'
      //   }
      // ],
      children: {
        index: false,
        align: 'center',
        type: 'form',
        headerAlign: 'center',
        rowAdd: done => {
          // this.$message.success('新增回调')
          done({
            input: '默认值'
          })
        },
        rowDel: (row, done) => {
          // this.$message.success('删除回调' + JSON.stringify(row))
          done()
        },
        column: [
          {
            label: '价格名称',
            prop:'priceName',
            rules: [
              {
                required: true,
                message: '请输入价格名称',
                trigger: 'blur'
              }
            ],
          },
          {
            label: '用水性质',
            prop: 'waterUseCategoryId',
            type: 'select',
            dicUrl:'/api/blade-system/dict-biz/dictionary?code=useWaterProperty',
            props:{
              label:"dictValue",
              value:"dictKey"
            },
            rules: [
              {
                required: true,
                message: '请选择用水性质',
                trigger: 'change'
              }
            ],
          },
          {
            label: '供水方式',
            prop: 'supplyWaterWay',
            type: 'select',
            dicUrl:'/api/blade-system/dict-biz/dictionary?code=supplyWaterWay',
            props:{
              label:"dictValue",
              value:"dictKey"
            },
            rules: [
              {
                required: true,
                message: '请选择供水方式',
                trigger: 'change'
              }
            ],
          },
          {
            label: '水源类型',
            prop: 'headwatersType',
            type: 'select',
            dicUrl:'/api/blade-system/dict-biz/dictionary?code=headwatersType',
            props:{
              label:"dictValue",
              value:"dictKey"
            },
            rules: [
              {
                required: true,
                message: '请选择水源类型',
                trigger: 'change'
              }
            ],
          },
          {
            label: '水库类型',
            prop: 'reservoirType',
            type: 'select',
            dicUrl:'/api/blade-system/dict-biz/dictionary?code=reservoirLevel',
            props:{
              label:"dictValue",
              value:"dictKey"
            },
            rules: [
              {
                required: true,
                message: '请选择水库类型',
                trigger: 'change'
              }
            ],
          },
          {
            label: '作物类型',
            prop: 'cropType',
            type: 'select',
            dicUrl:'/api/blade-system/dict-biz/dictionary?code=cropType',
            props:{
              label:"dictValue",
              value:"dictKey"
            },
            rules: [
              {
                required: true,
                message: '请选择作物类型',
                trigger: 'change'
              }
            ],
          },
          {
            label: '有无阶梯水价',
            prop: 'isLadderPrice',
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=isLadderPrice',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            type: 'select',
            labelWidth: '120',
            value: '0',
            hide: true,
            rules: [
              {
                required: true,
                message: '请选择 有无阶梯水价',
                trigger: 'blur'
              }
            ],
            change :function(data) {
              console.log('44444');
              let flag = data.value == '0' ? false : true
              if (!flag) {
               
                // 过滤掉所有的 水价
                safe.form.savePriceItemDtos.saveLadderPriceDto = safe.form.savePriceItemDtos.saveLadderPriceDto.filter(
                  item => item.feeType !== safe.$const.priceItemTypeValue.WATER_FEE
                )
                // 增加唯一一条 无 阶梯的水价项目
                let data = {
                  priceProjectName: '水费',
                  ladder: 0,
                  disabled: true,
                  feeType: safe.$const.priceItemTypeValue.WATER_FEE,
                  end: 0,
                  perPersonValue: 0
                }
                safe.form.savePriceItemDtos.saveLadderPriceDto.unshift(data)
              }
            }
          },
          {
            label: '结算类型',
            prop: 'settleType',
            display: true,
            // span: 8,
            // width: 70,
            type: 'select',
            // dicData: safe.$const.settleTypeValue,
            // value: safe.$const.settleTypeValue.NONE,
            // value: safe.$const.settleTypeValue.YEARLY, //默认选择年
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=settleType',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            clearable: false,
            rules: [
              {
                required: true,
                message: '请选择 结算类型',
                trigger: 'blur'
              }
            ],
            change (data) {
              // if (data.value == 'NONE') {
              //   // 过滤掉所有的 水价
              //   safe.form.saveLadderPriceDto = safe.form.saveLadderPriceDto.filter(
              //     item => item.feeType !== safe.$const.priceItemTypeValue.WATER_FEE
              //   )
              //   // 增加唯一一条 无 阶梯的水价项目
              //   let data = {
              //     priceProjectName: '水费',
              //     ladder: 0,
              //     disabled: true,
              //     feeType: safe.$const.priceItemTypeValue.WATER_FEE,
              //     end: 0,
              //     perPersonValue: 0
              //   }
              //   safe.form.saveLadderPriceDto.unshift(data)
              // } else {
              //   let data = safe.form.saveLadderPriceDto.filter(item => {
              //     if (item.feeType == safe.$const.priceItemTypeValue.WATER_FEE) {
              //       return item
              //     }
              //   })
              //   if (data && data.length < 3) {
              //     // 过滤掉所有的 水价
              //     safe.form.saveLadderPriceDto = safe.form.saveLadderPriceDto.filter(
              //       item => item.feeType !== safe.$const.priceItemTypeValue.WATER_FEE
              //     )
              //     // 插入 新的水价项目
              //     for (let i = 3; i > 0; i--) {
              //       let data = {
              //         priceProjectName: '水费',
              //         ladder: i,
              //         disabled: true,
              //         feeType: safe.$const.priceItemTypeValue.WATER_FEE
              //       }
              //       if (i == 3) {
              //         data.end = 0
              //         data.perPersonValue = 0
              //       }
              //       safe.form.saveLadderPriceDto.unshift(data)
              //     }
              //   }
              // }
            }
          },
          {
            label: '阶梯数',
            display: true,
            clearable: false,
            // width: 80,
            prop: 'ladderNum',
            // dicData: [
            //   { label: '3阶梯', value: 3 },
            //   { label: '4阶梯', value: 4 }
            // ],
            dicUrl: '/api/blade-system/dict-biz/dictionary?code=ladderNum',
            props: {
              label: 'dictValue',
              value: 'dictKey'
            },
            row: true,
            span: 8,
            // value: 3,
            type: 'select',
            change (col) {
              let data = safe.form.saveLadderPriceDto.filter(item => {
                if (item.feeType == safe.$const.priceItemTypeValue.WATER_FEE) {
                  return item
                }
              })
              if (data && data.length != col.value) {
                // 过滤掉所有的 水价
                safe.form.saveLadderPriceDto = safe.form.saveLadderPriceDto.filter(
                  item => item.feeType !== safe.$const.priceItemTypeValue.WATER_FEE
                )
                // 插入 新的水价项目
                for (let i = col.value; i > 0; i--) {
                  let tmp = {
                    priceProjectName: '水费',
                    ladder: i,
                    disabled: true,
                    feeType: safe.$const.priceItemTypeValue.WATER_FEE
                  }
                  if (i == col.value) {
                    tmp.end = 0
                    tmp.perPersonValue = 0
                  }
                  safe.form.saveLadderPriceDto.unshift(tmp)
                }
              }
            }
          },
          {
            label: '价格项目',
            hide: true,
            prop: 'saveLadderPriceDto',
            type: 'dynamic',
            span: 24,
            // rules: [
            //   {
            //     required: true,
            //     message: '请录入价格项目信息',
            //     trigger: 'blur'
            //   }
            // ],
            children: {
              align: 'center',
              headerAlign: 'center',
              addBtn: false,
              delBtn: false,
              rowAdd: done => {
                done({
                  ladder: 0,
                  end: 0,
                  perPersonValue: 0,
                  feeType: safe.$const.priceItemTypeValue.OTHER
                })
              },
              rowDel: (row, done) => {
                if (row.feeType === safe.$const.priceItemTypeValue.WATER_FEE) {
                  safe.$message('阶梯水价,不能删除。')
                } else {
                  done()
                }
              },
              column: [
                {
                  label: '价格项目名称',
                  prop: 'priceProjectName',
                  maxlength: 20,
                  // showWordLimit: true,
                  placeholder: '价格项目名称',
                  formslot: true,
                  rules: [
                    {
                      required: true,
                      message: '请输入 价格项目名称',
                      trigger: 'blur'
                    }
                  ]
                },
                {
                  label: '阶梯',
                  prop: 'ladder',
                  width: 80,
                  formslot: true
                },
                {
                  label: '价格(元/m³)',
                  prop: 'price',
                  type: 'number',
                  minRows: 0.0,
                  maxRows: 100.0,
                  precision: 2,
                  step: 0.1,
                  rules: [
                    { required: true, message: '价格 不能为空' },
                    { type: 'number', message: '价格 必须为数字' }
                  ]
                },
                {
                  label: '截止量(m³)',
                  prop: 'end',
                  type: 'number',
                  disabled: false,
                  formslot: true,
                  rules: [{ required: true, message: '截止量 不能为空' }]
                },
                {
                  label: '人均核增量(m³)',
                  prop: 'perPersonValue',
                  type: 'number',
                  disabled: false,
                  formslot: true,
                  hide: true,
                  rules: []
                }
              ]
            }
          },
        ]
      }
    },

Guess you like

Origin blog.csdn.net/killerdoubie/article/details/130751422