cd_form_editor_web/packages/KBatch/batch2.vue

<!--
 * @Description: 动态表格 用于批量填入数据
 * @Author: kcz
 * @Date: 2020-03-27 18:36:56
 * @LastEditors: kcz
 * @LastEditTime: 2021-05-14 14:04:14
 -->
<template>
  <a-form-model
    ref="dynamicValidateForm"
    layout="inline"
    :model="dynamicValidateForm"
  >
  <a-card v-for="(d,index) in dynamicValidateForm.domains" :key="d.key">
    <a-row :gutter="24">
    <a-col :md="12" :sm="12">
      <div v-for="c in columns" :key="c.title">{{c.title}}</div>
    </a-col>
    <a-col :md="12" :sm="12">
      <!-- <div v-for="(d,index) in dynamicValidateForm.domains" :key="d.key"> -->
        <div v-for="item in d.recordList" :key="item.key">
          <KFormModelItem
            :key="item.key + '1'"
            :record="item"
            :config="config"
            :parentDisabled="disabled"
            :index="index"
            :domains="dynamicValidateForm.domains"
            :dynamicData="dynamicData"
            v-model="d[item.model]"
            @input="handleInput"
          />
        </div>
      <!-- </div> -->
      
    </a-col>
    </a-row>
  </a-card>

    <a-table
      class="batch-table"
      :pagination="false"
      :rowKey="record => record.key"
      :columns="columns"
      :dataSource="dynamicValidateForm.domains"
      bordered
      :scroll="{
        x: listLength * 190 + 80 + (!record.options.hideSequence ? 60 : 0),
        y: record.options.scrollY
      }"
    >
      <template
        v-for="item in record.list"
        :slot="item.key"
        slot-scope="text, record, index"
      >
        <KFormModelItem
          :key="item.key + '1'"
          :record="item"
          :config="config"
          :parentDisabled="disabled"
          :index="index"
          :domains="dynamicValidateForm.domains"
          :dynamicData="dynamicData"
          v-model="record[item.model]"
          @input="handleInput"
        />
      </template>
      <template slot="dynamic-opr-button" slot-scope="text, record">
        <a-icon
          title="删除改行"
          v-if="!disabled"
          class="dynamic-opr-button"
          type="minus-circle-o"
          @click="removeDomain(record)"
        />
        <a-icon
          title="复制添加"
          v-if="!disabled"
          type="copy-o"
          class="dynamic-opr-button"
          @click="copyDomain(record)"
        />
      </template>
    </a-table>
    <a-button type="dashed" :disabled="disabled" @click="addDomain">
      <a-icon type="plus" />增加
    </a-button>
  </a-form-model>
</template>

<script>
import KFormModelItem from "./module/KFormModelItem";
export default {
  name: "KBatch",
  props: ["record", "value", "dynamicData", "config", "parentDisabled"],

  components: {
    KFormModelItem
  },
  watch: {
    value: {
      // value 需要深度监听及默认先执行handler函数
      handler(val) {
        this.dynamicValidateForm.domains = val || [];
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      dynamicValidateForm: {
        domains: []
      }
    };
  },
  created(){
  },
  computed: {
    listLength() {
      return this.record.list.filter(item => !item.options.hidden).length;
    },
    columns() {
      const columns = [];
      if (!this.record.options.hideSequence) {
        columns.push({
          title: "序号",
          dataIndex: "sequence_index_number",
          width: "60px",
          align: "center",
          customRender: (text, record, index) => {
            return index + 1;
          }
        });
      }

      columns.push(
        ...this.record.list
          .filter(item => !item.options.hidden)
          .map((item, index) => {
            return {
              title: item.label,
              dataIndex: item.key,
              width: index === this.record.list.length - 1 ? "" : "190px",
              scopedSlots: { customRender: item.key }
            };
          })
      );

      columns.push({
        title: "操作",
        dataIndex: "dynamic-opr-button",
        fixed: "right",
        width: "80px",
        align: "center",
        scopedSlots: { customRender: "dynamic-opr-button" }
      });

      return columns;
    },
    disabled() {
      return this.record.options.disabled || this.parentDisabled;
    }
  },
  methods: {
    validationSubform() {
      let verification;
      this.$refs.dynamicValidateForm.validate(valid => {
        verification = valid;
      });
      return verification;
    },
    resetForm() {
      this.$refs.dynamicValidateForm.resetFields();
    },
    removeDomain(item) {
      const index = this.dynamicValidateForm.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1);
      }
    },
    copyDomain(record) {
      const data = {};
      this.record.list.forEach(item => {
        data[item.model] = record[item.model];
      });
      this.dynamicValidateForm.domains.push({
        ...data,
        key: Date.now()
      });
      this.handleInput();
    },
    addDomain() {
      const data = {};
      this.record.list.forEach(item => {
        data[item.model] = item.options.defaultValue;
      });

      this.dynamicValidateForm.domains.push({
        ...data,
        key: Date.now()
      });
      //循环字段数据复制字段形成唯一
      this.dynamicValidateForm.domains.forEach((element,index) => {
        //组件数组
        const recordList=[]
        //循环原始组件获取字段生成流水字段
        this.record.list.forEach(item => {
          data[item.model] = item.options.defaultValue;
          let m=item.model;
          m=m+index;
          if(!element[m]){
            element[m]=""
          }
          
          //根据流水字段形成对应组件
          const r=JSON.parse(JSON.stringify(item));
          r.model=m;
          recordList.push(r)
        });
        if(!element.recordList){
          element.recordList=recordList;
        }
      });

      this.handleInput();
    },
    handleInput() {
      this.dynamicValidateForm.domains.forEach((element,index) => {
        console.log("element",element)
        this.record.list.forEach(item => {
          let m=item.model;
          m=m+index;
          element[item.model]=element[m];
        });
        
        console.log("element",element)
      });
  
      this.$emit("change", this.dynamicValidateForm.domains);
    }
  }
};
</script>
<style scoped>
.dynamic-opr-button:last {
  margin-left: 0px;
}
.dynamic-opr-button {
  cursor: pointer;
  position: relative;
  top: 4px;
  font-size: 16px;
  color: #999;
  transition: all 0.3s;
  margin-left: 6px;
}
.dynamic-opr-button:hover {
  color: #e89;
}
.dynamic-opr-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>