account-manager/src/components/addNewData/bsideForm/multipleAdd.vue

<template>
  <div>
    <div
      style="font-size: 2rem"
      class="flex flex-warp justify-center items-center font-bold"
    >
      <div style="font-size: 1rem">请输入要导入的数据数量：</div>
      <el-input-number v-model="singleFormNum" :min="1" :max="10" @change="createForm" />
      <div v-if="checkNeed">&nbsp;&nbsp;</div>
      <el-checkbox v-model="checked" label="为所有表单进行相同操作" size="large" />
    </div>
    <el-scrollbar max-height="40rem">
      <div class="mt-2 border-2 border-gray-300" v-for="item in input">
        <div style="font-size: 1.2rem" class="w-full text-center font-bold">
          {{ item.label }}
        </div>
        <SingleAdd
          ref="singleAddRef"
          :addData="addData"
          :createdAt="createdAt"
          @remoteSearch="remoteSearch"
        />
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { ElMessage } from "element-plus";

import SingleAdd from "./singleAdd.vue";

const singleFormNum = ref(1);
const checked = ref(true);
const input = ref([{ label: "账号1" }]);
const singleAddRef = ref(null);
const formClone = ref([]);

const props = defineProps({
  addData: Object,
  checkNeed: Boolean,
  createdAt: String,
});

const emit = defineEmits(["addBside", "remoteSearch"]);

const remoteSearch = (data, searchKey, timeBefor) => {
  emit("remoteSearch", data, searchKey, timeBefor, "multiple");
};

const initData = () => {
  setTimeout(() => {
    singleAddRef.value.forEach((item) => {
      item.ruleForm.role = singleAddRef.value[0].ruleForm.role;
    });
  }, 0);
};

const createForm = () => {
  let difference = Math.abs(singleFormNum.value - input.value.length);
  for (let i = 0; i < difference; i++) {
    if (singleFormNum.value > input.value.length) {
      input.value.push({ label: `账号${input.value.length + 1}` });
    } else if (singleFormNum.value < input.value.length) {
      input.value.pop();
    }
  }
  if (checked.value) {
    initData();
  }
};

const resetCheckForm = () => {
  if (!singleAddRef) return;
  singleAddRef.value.forEach((element) => {
    element.resetCheckForm();
  });
  singleFormNum.value = 1;
  createForm();
};

const confirm = () => {
  if (!singleAddRef) return;
  let valid = true;
  formClone.value = [];
  singleAddRef.value.forEach((element) => {
    element.validate().then((result) => {
      if (result) {
        formClone.value.push({ ...element.ruleForm });
      } else {
        valid = result;
      }
    });
  });
  setTimeout(() => {
    if (valid) {
      emit("addBside", formClone.value);
      singleAddRef.value.forEach((item) => {
        item.resetCheckForm();
      });
      ElMessage({
        message: `提交成功！`,
        type: "success",
      });
    } else {
      ElMessage.error("提交失败！");
    }
  }, 0);
};

defineExpose({ singleAddRef, resetCheckForm, confirm, formClone });

watch(checked, (value) => {
  if (value) {
    initData();
  }
});
</script>

<style scoped></style>