800行代码写了个表单

<template>
  <div>
    <div class="funcs-box func-set"
         v-for="(item, key) in actions"
         :key="key">
      <div class="header">
        <h4 class="title">功能{{key+1}}</h4>
        <div class="handle">
          <Button type="error"
                  size="small"
                  @click="deleteFunc(key)"
                  style="float:right;">删除功能
          </Button>
        </div>
      </div>
      <Form :model="item"
            :rules="ruleValidate"
            :label-width="50"
            style="width:300px"
            ref="funcForm"
            >
        <FormItem prop="name"
                  label="名称">
          <Input type="text"
                 v-model="item.name"
                 placeholder="名称" />
        </FormItem>
        <FormItem label="标题"
                  prop="title">
          <Input type="text"
                 v-model="item.title"
                 placeholder="标题" />
        </FormItem>
        <FormItem label="类型"
                  prop="type">
          <Select v-model="item.type"
                  >
            <Option v-for="inner in item.typeArray"
                    :value="inner.value"
                    :key="inner.value">{{ inner.label }}</Option>
          </Select>
        </FormItem>
      </Form>
      <div v-for="(inner, index) in item.content"
           class="params-item"
           :key="index">
        <row>
           <Button type="error"
                  size="small"
                  @click="deleFuncAttr(key,index)"
                  style="float:right;">删除该参数
          </Button>
        </row>
        <p class="title">参数{{index + 1}}：</p>
        <Form :model="inner"
              :label-width="80"
              :rules="innerRuleValidate"
              ref="funcFormParams"
              style="width:300px"
              >
          <FormItem label="名称"
                    prop="name">
            <Input type="text"
                   v-model="inner.name"
                   placeholder="请输入名称" />
          </FormItem>
          <FormItem label="关联属性"
                    :label-width="80">
            <Select v-model="inner.relateName"
                    >
              <Option v-for="innerItem in associatedProperty"
                      :value="innerItem.value"
                      :key="innerItem.value">{{ innerItem.label }}
              </Option>
            </Select>
          </FormItem>
        </Form>
      </div>
        <row class="add-func">
          <i-col :span='4'>
            <Button icon="plus-round"
                    @click="addNewFuncParam(key)">引用属性</Button>
          </i-col>
        </row>
    </div>
    <template>
      <row class="add-func">
        <i-col :span='4'>
          <Button icon="plus-round"
                  @click="addNewFunc">增加新功能</Button>
        </i-col>
      </row>
    </template>
  </div>
</template>
<script>
export default {
  name: 'funcs',
  props: {
    actions: Array,
    associatedProperty: Array
  },
  data() {
    return {
      funcs: [
        {
          name: '启动服务',
          attrID: 'func_start',
          type: '指令下发',
          params: [
            {
              name: '启动类别',
              attrID: 'start_type',
              type: '整数',
              length: '2',
              default: '1',
              required: '是'
            }
          ]
        }
      ],
      ruleValidate: {
        name: [
          {
            required: true,
            message: '请填写英文功能名称!',
            trigger: 'blur',
            type: 'string',
            pattern: /[a-zA-Z]/
          }
        ],
        title: [
          {
            required: true,
            message: '请填写功能标题!',
            trigger: 'blur',
            type: 'string'
          }
        ],
        type: [{ required: true, message: '请选择类型!', trigger: 'change' }]
      },
      innerRuleValidate: {
        name: [
          {
            required: true,
            message: '请填写英文参数名称!',
            trigger: 'blur',
            type: 'string',
            pattern: /[a-zA-Z]/
          }
        ]
      }
    }
  },
  mounted() {
  },
  methods: {
    addNewFunc() {
      this.$store.commit('templateManage/addActions')
    },
    typeChange(key, index) {
      this.actions[key].content[index].defaultValue = ''
    },
    addNewFuncParam(index) {
      for (let i = 0; i < this.actions.length; i++) {
        if (i === index) {
          this.actions[i].content.push({
            name: '',
            relateName: ''
          })
        }
      }
      this.$store.commit('templateManage/setActions', this.actions)
    },
    deleteFunc(index) {
      for (let i = 0; i < this.actions.length; i++) {
        if (i === index) {
          this.actions.splice(index, 1)
        }
      }
      this.$store.commit('templateManage/setActions', this.actions)
    },
    deleFuncAttr(parentIndex, index) {
      for (let i = 0; i < this.actions.length; i++) {
        if (parentIndex === i) {
          this.actions[i].content.splice(index, 1)
        }
      }
      this.$store.commit('templateManage/setActions', this.actions)
    },
    checkFuncName() {
      let self = this
      if (this.actions.length > 0) {
        this.$refs.funcForm.forEach(item => {
          item.validate(valid => {
            if (valid) {
              self.checkFuncParams()
            } else {
              this.$emit('checkSuccess', false)
            }
          })
        })
      } else {
        this.$emit('checkSuccess', true)
      }
    },
    checkFuncParams() {
      this.$refs.funcFormParams.forEach(item => {
        item.validate(valid => {
          if (valid) {
            this.$emit('checkSuccess', true)
          } else {
            this.$emit('checkSuccess', false)
          }
        })
      })
    },
    checkForm() {
      return this.checkFuncName()
    }
  },
  watch: {
    actions: {
      handler(curVal, oldVal) {
        this.$store.commit('templateManage/setActions', curVal)
      },
      deep: true
    }
  }
}
</script>