|
|
@@ -0,0 +1,266 @@
|
|
|
+<!--
|
|
|
+ * @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>
|
