北斗启航科技教育平台管理系统

src/components/addNewData/SNForm/SNForm.vue

@@ -0,0 +1,155 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :show-close="false"
+    style="width: 80%"
+    center
+    align-center
+    :before-close="resetCheckForm"
+  >
+    <template #header="{ titleId, titleClass }">
+      <div
+        style="font-size: 2rem"
+        class="w-full font-bold"
+        :id="titleId"
+        :class="titleClass"
+      >
+        {{ title }}
+      </div>
+      <div
+        @click="resetCheckForm"
+        class="bg-gray-400 hover:bg-red-600 text-3xl absolute top-0 right-0 cursor-pointer flex justify-center items-center"
+      >
+        <el-icon>
+          <CloseBold />
+        </el-icon>
+      </div>
+    </template>
+    <FormTools @showTools="showTools" :dialogObj="SNActive" />
+    <SingleAdd ref="singleAddRef" v-if="dialogSingleVisible" @addSN="addSN" />
+    <MultipleAdd
+      ref="multipleAddRef"
+      v-if="dialogMultipleVisible"
+      :checkNeed="false"
+      @addSN="addSN"
+    />
+    <ExcleAdd ref="excleAddRef" v-if="dialogExcleVisible" @addSN="addSN" />
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button style="font-weight: bold" @click="resetCheckForm"> 取消 </el-button>
+        <el-button style="font-weight: bold" type="primary" @click="confirm">
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { CloseBold } from "@element-plus/icons-vue";
+import { ElMessage } from "element-plus";
+
+import FormTools from "../../operate/formTools.vue";
+import SingleAdd from "./singleAdd.vue";
+import MultipleAdd from "./multipleAdd.vue";
+import ExcleAdd from "./excleAdd.vue";
+
+import SNActiveStore from "../../../stores/SN";
+
+import $http from "../../../api/index";
+import $url from "../../../api/url";
+
+import { encrypt } from "../../../utils/aes";
+
+const SNActive = SNActiveStore();
+
+const dialogVisible = ref(false);
+const singleAddRef = ref(null);
+const multipleAddRef = ref(null);
+const excleAddRef = ref(null);
+const dialogSingleVisible = ref(true);
+const dialogMultipleVisible = ref(false);
+const dialogExcleVisible = ref(false);
+
+const props = defineProps({
+  title: String,
+});
+
+const emit = defineEmits(["reloadData"]);
+
+const showTools = (operateType) => {
+  switch (operateType) {
+    case "single":
+      dialogSingleVisible.value = true;
+      dialogMultipleVisible.value = false;
+      dialogExcleVisible.value = false;
+      SNActive.dialogSingleVisible = dialogSingleVisible.value;
+      SNActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      SNActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    case "multiple":
+      dialogSingleVisible.value = false;
+      dialogMultipleVisible.value = true;
+      dialogExcleVisible.value = false;
+      SNActive.dialogSingleVisible = dialogSingleVisible.value;
+      SNActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      SNActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    case "excle":
+      dialogSingleVisible.value = false;
+      dialogMultipleVisible.value = false;
+      dialogExcleVisible.value = true;
+      SNActive.dialogSingleVisible = dialogSingleVisible.value;
+      SNActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      SNActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    default:
+      break;
+  }
+};
+
+const resetCheckForm = () => {
+  if (dialogSingleVisible.value) {
+    singleAddRef.value.resetCheckForm();
+  } else if (dialogMultipleVisible.value) {
+    multipleAddRef.value.resetCheckForm();
+  } else if (dialogExcleVisible.value) {
+    excleAddRef.value.resetCheckForm();
+  }
+  dialogVisible.value = false;
+};
+
+const confirm = () => {
+  if (dialogSingleVisible.value) {
+    singleAddRef.value.confirm();
+  } else if (dialogMultipleVisible.value) {
+    multipleAddRef.value.confirm();
+  } else if (dialogExcleVisible.value) {
+    excleAddRef.value.confirm();
+  }
+};
+
+const addSN = (requestMsg) => {
+  requestMsg.forEach((element) => {
+    element.sn_number = encrypt(String(element.sn_number));
+  });
+  const data = { requestMsg };
+  $http.post($url.addSN, data).then((res) => {
+    if (res.data.code === 200) {
+      resetCheckForm();
+      ElMessage({
+        message: "新增SN号成功！",
+        type: "success",
+      });
+      emit("reloadData");
+    } else {
+      ElMessage.error("新增SN号失败！");
+    }
+  });
+};
+
+defineExpose({ dialogVisible });
+</script>
+
+<style scoped></style>

src/components/addNewData/SNForm/excleAdd.vue

@@ -0,0 +1,82 @@
+<template>
+  <UploadFile
+    ref="uploadFileRef"
+    :options="options"
+    :relatedRules="relatedRules"
+    :relatedOptions="relatedOptions"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { ElMessage } from "element-plus";
+
+import UploadFile from "../../operate/uploadFile.vue";
+
+const uploadFileRef = ref(null);
+const formClone = ref([]);
+
+const options = {
+  limit: 1,
+  accept: ".xlsx",
+  action: "",
+  multiple: false,
+  listType: "text",
+  autoUpload: false,
+};
+
+const relatedRules = {
+  sn_number: {
+    value: "",
+    label: "SN号",
+  }
+};
+
+const relatedOptions = [
+  {
+    value: "0",
+    label: "SN号",
+    disabled: false,
+  }
+];
+
+const emit = defineEmits(["addSN"]);
+
+const resetCheckForm = () => {
+  if (!uploadFileRef) return;
+  uploadFileRef.value.handleExceed();
+};
+
+const confirm = async () => {
+  if (!uploadFileRef) return;
+  formClone.value = [];
+  const length = uploadFileRef.value.loadData.length;
+  if (length == 0) return ElMessage.error("请先上传文件！");
+  const flag = await uploadFileRef.value.confirm();
+  if (!flag) return ElMessage.error("请先选择表格关联项！");
+  ElMessage({
+    message: `正在上传数据中，请稍等...`,
+    type: "success",
+  });
+  setTimeout(() => {
+    uploadFileRef.value.loadData.forEach((ExcleForm) => {
+      ExcleForm.forEach((worksheet) => {
+        let context = [...worksheet];
+        context.shift();
+        context.forEach((item) => {
+          if (item.length != 0) {
+            formClone.value.push({
+              sn_number: item[relatedRules.sn_number.value]
+            });
+          }
+        });
+      });
+    });
+    emit("addSN", formClone.value);
+  }, 3000);
+};
+
+defineExpose({ resetCheckForm, confirm, formClone });
+</script>
+
+<style scoped></style>

src/components/addNewData/SNForm/multipleAdd.vue

@@ -0,0 +1,113 @@
+<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-if="checkNeed"
+        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" />
+      </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: "SN号1" }]);
+const singleAddRef = ref(null);
+const formClone = ref([]);
+
+const props = defineProps({
+  checkNeed: Boolean,
+});
+
+const emit = defineEmits(["addSN"]);
+
+const initData = () => {
+  setTimeout(() => {
+    singleAddRef.value.forEach((item) => {});
+  }, 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("addSN", formClone.value);
+      singleAddRef.value.forEach((item) => {
+        item.resetCheckForm();
+      });
+      ElMessage({
+        message: `提交成功！`,
+        type: "success",
+      });
+    } else {
+      ElMessage.error("提交失败！");
+    }
+  }, 0);
+};
+
+defineExpose({ resetCheckForm, confirm, formClone });
+
+watch(checked, (value) => {
+  if (value) {
+    initData();
+  }
+});
+</script>
+
+<style scoped></style>

src/components/addNewData/SNForm/singleAdd.vue

@@ -0,0 +1,96 @@
+<template>
+  <el-form
+    ref="ruleFormRef"
+    style="max-width: 600px"
+    :model="ruleForm"
+    :rules="rules"
+    label-width="auto"
+    size="default"
+    status-icon
+    class="mx-auto"
+  >
+    <el-form-item class="mx-1 font-bold" label="SN号" prop="sn_number">
+      <el-input
+        clearable
+        placeholder="请输入卡号"
+        minlength="8"
+        maxlength="8"
+        v-model="ruleForm.sn_number"
+        @input="filter(ruleForm.sn_number, 'sn_number')"
+      />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import { ElMessage } from "element-plus";
+
+const ruleFormRef = ref(null);
+
+const ruleForm = reactive({
+  sn_number: ""
+});
+
+const formClone = ref({});
+
+const checkLength = (length) => {
+  return (rule, value) => {
+    if (!value) return new Error(`请输入${length}位数字`);
+    else if (value.length !== length) return new Error(`请输入${length}位数字`);
+    else return true;
+  };
+};
+
+const rules = reactive({
+  sn_number: [
+    { required: true, message: "请输入卡号", trigger: "blur" },
+    { validator: checkLength(8), trigger: "blur" },
+  ]
+});
+
+const emit = defineEmits(["addSN"]);
+
+const filter = (value, label) => {
+  if (/[=\s"'+-]/.test(value)) {
+    if (ruleForm[label]) {
+      ruleForm[label] = value.replace(/[=\s"'+-]/g, "");
+    }
+  }
+};
+
+const resetCheckForm = () => {
+  if (!ruleFormRef) return;
+  ruleFormRef.value.resetFields();
+};
+
+const confirm = async () => {
+  if (!ruleFormRef) return;
+  await ruleFormRef.value.validate((valid) => {
+    if (valid) {
+      formClone.value = { ...ruleForm };
+      emit("addSN", [formClone.value]);
+      ruleFormRef.value.resetFields();
+      ElMessage({
+        message: `提交成功！`,
+        type: "success",
+      });
+    } else {
+      ElMessage.error("提交失败！");
+    }
+  });
+};
+
+const validate = () => {
+  if (!ruleFormRef) return Promise.resolve(false);
+  return new Promise((resolve) => {
+    ruleFormRef.value.validate((valid) => {
+      resolve(valid);
+    });
+  });
+};
+
+defineExpose({ resetCheckForm, confirm, validate, ruleForm, formClone });
+</script>
+
+<style scoped></style>

src/components/addNewData/bdCardForm/bdCardForm.vue

@@ -0,0 +1,156 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :show-close="false"
+    style="width: 80%"
+    center
+    align-center
+    :before-close="resetCheckForm"
+  >
+    <template #header="{ titleId, titleClass }">
+      <div
+        style="font-size: 2rem"
+        class="w-full font-bold"
+        :id="titleId"
+        :class="titleClass"
+      >
+        {{ title }}
+      </div>
+      <div
+        @click="resetCheckForm"
+        class="bg-gray-400 hover:bg-red-600 text-3xl absolute top-0 right-0 cursor-pointer flex justify-center items-center"
+      >
+        <el-icon>
+          <CloseBold />
+        </el-icon>
+      </div>
+    </template>
+    <FormTools @showTools="showTools" :dialogObj="bdCardMsgActive" />
+    <SingleAdd ref="singleAddRef" v-if="dialogSingleVisible" @addBdCard="addBdCard" />
+    <MultipleAdd
+      ref="multipleAddRef"
+      v-if="dialogMultipleVisible"
+      :checkNeed="false"
+      @addBdCard="addBdCard"
+    />
+    <ExcleAdd ref="excleAddRef" v-if="dialogExcleVisible" @addBdCard="addBdCard" />
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button style="font-weight: bold" @click="resetCheckForm"> 取消 </el-button>
+        <el-button style="font-weight: bold" type="primary" @click="confirm">
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { CloseBold } from "@element-plus/icons-vue";
+import { ElMessage } from "element-plus";
+
+import FormTools from "../../operate/formTools.vue";
+import SingleAdd from "./singleAdd.vue";
+import MultipleAdd from "./multipleAdd.vue";
+import ExcleAdd from "./excleAdd.vue";
+
+import bdCardActiveStore from "../../../stores/bdCard";
+
+import $http from "../../../api/index";
+import $url from "../../../api/url";
+
+import { encrypt } from "../../../utils/aes";
+
+const bdCardMsgActive = bdCardActiveStore();
+
+const dialogVisible = ref(false);
+const singleAddRef = ref(null);
+const multipleAddRef = ref(null);
+const excleAddRef = ref(null);
+const dialogSingleVisible = ref(true);
+const dialogMultipleVisible = ref(false);
+const dialogExcleVisible = ref(false);
+
+const props = defineProps({
+  title: String,
+});
+
+const emit = defineEmits(["reloadData"]);
+
+const showTools = (operateType) => {
+  switch (operateType) {
+    case "single":
+      dialogSingleVisible.value = true;
+      dialogMultipleVisible.value = false;
+      dialogExcleVisible.value = false;
+      bdCardMsgActive.dialogSingleVisible = dialogSingleVisible.value;
+      bdCardMsgActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      bdCardMsgActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    case "multiple":
+      dialogSingleVisible.value = false;
+      dialogMultipleVisible.value = true;
+      dialogExcleVisible.value = false;
+      bdCardMsgActive.dialogSingleVisible = dialogSingleVisible.value;
+      bdCardMsgActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      bdCardMsgActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    case "excle":
+      dialogSingleVisible.value = false;
+      dialogMultipleVisible.value = false;
+      dialogExcleVisible.value = true;
+      bdCardMsgActive.dialogSingleVisible = dialogSingleVisible.value;
+      bdCardMsgActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      bdCardMsgActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    default:
+      break;
+  }
+};
+
+const resetCheckForm = () => {
+  if (dialogSingleVisible.value) {
+    singleAddRef.value.resetCheckForm();
+  } else if (dialogMultipleVisible.value) {
+    multipleAddRef.value.resetCheckForm();
+  } else if (dialogExcleVisible.value) {
+    excleAddRef.value.resetCheckForm();
+  }
+  dialogVisible.value = false;
+};
+
+const confirm = () => {
+  if (dialogSingleVisible.value) {
+    singleAddRef.value.confirm();
+  } else if (dialogMultipleVisible.value) {
+    multipleAddRef.value.confirm();
+  } else if (dialogExcleVisible.value) {
+    excleAddRef.value.confirm();
+  }
+};
+
+const addBdCard = (requestMsg) => {
+  requestMsg.forEach((element) => {
+    element.card_id = encrypt(String(element.card_id));
+    element.card_imsi = encrypt(String(element.card_imsi));
+  });
+  const data = { requestMsg };
+  $http.post($url.addBdCard, data).then((res) => {
+    if (res.data.code === 200) {
+      resetCheckForm();
+      ElMessage({
+        message: "新增北斗卡成功！",
+        type: "success",
+      });
+      emit("reloadData");
+    } else {
+      ElMessage.error("新增北斗卡失败！");
+    }
+  });
+};
+
+defineExpose({ dialogVisible });
+</script>
+
+<style scoped></style>

src/components/addNewData/bdCardForm/excleAdd.vue

@@ -0,0 +1,92 @@
+<template>
+  <UploadFile
+    ref="uploadFileRef"
+    :options="options"
+    :relatedRules="relatedRules"
+    :relatedOptions="relatedOptions"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { ElMessage } from "element-plus";
+
+import UploadFile from "../../operate/uploadFile.vue";
+
+const uploadFileRef = ref(null);
+const formClone = ref([]);
+
+const options = {
+  limit: 1,
+  accept: ".xlsx",
+  action: "",
+  multiple: false,
+  listType: "text",
+  autoUpload: false,
+};
+
+const relatedRules = {
+  card_id: {
+    value: "",
+    label: "卡号",
+  },
+  card_imsi: {
+    value: "",
+    label: "IMSI号",
+  },
+};
+
+const relatedOptions = [
+  {
+    value: "0",
+    label: "卡号",
+    disabled: false,
+  },
+  {
+    value: "1",
+    label: "IMSI号",
+    disabled: false,
+  },
+];
+
+const emit = defineEmits(["addBdCard"]);
+
+const resetCheckForm = () => {
+  if (!uploadFileRef) return;
+  uploadFileRef.value.handleExceed();
+};
+
+const confirm = async () => {
+  if (!uploadFileRef) return;
+  formClone.value = [];
+  const length = uploadFileRef.value.loadData.length;
+  if (length == 0) return ElMessage.error("请先上传文件！");
+  const flag = await uploadFileRef.value.confirm();
+  if (!flag) return ElMessage.error("请先选择表格关联项！");
+  ElMessage({
+    message: `正在上传数据中，请稍等...`,
+    type: "success",
+  });
+  setTimeout(() => {
+    uploadFileRef.value.loadData.forEach((ExcleForm) => {
+      ExcleForm.forEach((worksheet) => {
+        let context = [...worksheet];
+        context.shift();
+        context.forEach((item) => {
+          if (item.length != 0) {
+            formClone.value.push({
+              card_id: item[relatedRules.card_id.value],
+              card_imsi: item[relatedRules.card_imsi.value],
+            });
+          }
+        });
+      });
+    });
+    emit("addBdCard", formClone.value);
+  }, 3000);
+};
+
+defineExpose({ resetCheckForm, confirm, formClone });
+</script>
+
+<style scoped></style>

src/components/addNewData/bdCardForm/multipleAdd.vue

@@ -0,0 +1,113 @@
+<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-if="checkNeed"
+        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" />
+      </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({
+  checkNeed: Boolean,
+});
+
+const emit = defineEmits(["addBdCard"]);
+
+const initData = () => {
+  setTimeout(() => {
+    singleAddRef.value.forEach((item) => {});
+  }, 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("addBdCard", formClone.value);
+      singleAddRef.value.forEach((item) => {
+        item.resetCheckForm();
+      });
+      ElMessage({
+        message: `提交成功！`,
+        type: "success",
+      });
+    } else {
+      ElMessage.error("提交失败！");
+    }
+  }, 0);
+};
+
+defineExpose({ resetCheckForm, confirm, formClone });
+
+watch(checked, (value) => {
+  if (value) {
+    initData();
+  }
+});
+</script>
+
+<style scoped></style>

src/components/addNewData/bdCardForm/singleAdd.vue

@@ -0,0 +1,111 @@
+<template>
+  <el-form
+    ref="ruleFormRef"
+    style="max-width: 600px"
+    :model="ruleForm"
+    :rules="rules"
+    label-width="auto"
+    size="default"
+    status-icon
+    class="mx-auto"
+  >
+    <el-form-item class="mx-1 font-bold" label="卡号" prop="card_id">
+      <el-input
+        clearable
+        placeholder="请输入卡号"
+        minlength="8"
+        maxlength="8"
+        v-model="ruleForm.card_id"
+        @input="filter(ruleForm.card_id, 'card_id')"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="IMSI号" prop="card_imsi">
+      <el-input
+        clearable
+        placeholder="请输入IMSI号"
+        minlength="18"
+        maxlength="18"
+        v-model="ruleForm.card_imsi"
+        @input="filter(ruleForm.card_imsi, 'card_imsi')"
+      />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import { ElMessage } from "element-plus";
+
+const ruleFormRef = ref(null);
+
+const ruleForm = reactive({
+  card_id: "",
+  card_imsi: "",
+});
+
+const formClone = ref({});
+
+const checkLength = (length) => {
+  return (rule, value) => {
+    if (!value) return new Error(`请输入${length}位数字`);
+    else if (value.length !== length) return new Error(`请输入${length}位数字`);
+    else return true;
+  };
+};
+
+const rules = reactive({
+  card_id: [
+    { required: true, message: "请输入卡号", trigger: "blur" },
+    { validator: checkLength(8), trigger: "blur" },
+  ],
+  card_imsi: [
+    { required: true, message: "请输入IMSI号", trigger: "blur" },
+    { validator: checkLength(18), trigger: "blur" },
+  ],
+});
+
+const emit = defineEmits(["addBdCard"]);
+
+const filter = (value, label) => {
+  if (/[=\s"'+-]/.test(value)) {
+    if (ruleForm[label]) {
+      ruleForm[label] = value.replace(/[=\s"'+-]/g, "");
+    }
+  }
+};
+
+const resetCheckForm = () => {
+  if (!ruleFormRef) return;
+  ruleFormRef.value.resetFields();
+};
+
+const confirm = async () => {
+  if (!ruleFormRef) return;
+  await ruleFormRef.value.validate((valid) => {
+    if (valid) {
+      formClone.value = { ...ruleForm };
+      emit("addBdCard", [formClone.value]);
+      ruleFormRef.value.resetFields();
+      ElMessage({
+        message: `提交成功！`,
+        type: "success",
+      });
+    } else {
+      ElMessage.error("提交失败！");
+    }
+  });
+};
+
+const validate = () => {
+  if (!ruleFormRef) return Promise.resolve(false);
+  return new Promise((resolve) => {
+    ruleFormRef.value.validate((valid) => {
+      resolve(valid);
+    });
+  });
+};
+
+defineExpose({ resetCheckForm, confirm, validate, ruleForm, formClone });
+</script>
+
+<style scoped></style>

src/components/addNewData/bsideForm/bsideForm.vue

@@ -0,0 +1,177 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :show-close="false"
+    style="width: 80%"
+    center
+    align-center
+    :before-close="resetCheckForm"
+  >
+    <template #header="{ titleId, titleClass }">
+      <div
+        style="font-size: 2rem"
+        class="w-full font-bold"
+        :id="titleId"
+        :class="titleClass"
+      >
+        {{ title }}
+      </div>
+      <div
+        @click="resetCheckForm"
+        class="bg-gray-400 hover:bg-red-600 text-3xl absolute top-0 right-0 cursor-pointer flex justify-center items-center"
+      >
+        <el-icon>
+          <CloseBold />
+        </el-icon>
+      </div>
+    </template>
+    <FormTools @showTools="showTools" :dialogObj="bsideMsgActive" />
+    <SingleAdd
+      ref="singleAddRef"
+      v-if="dialogSingleVisible"
+      :addData="addData"
+      :createdAt="createdAt"
+      @addBside="addBside"
+      @remoteSearch="remoteSearch"
+    />
+    <MultipleAdd
+      ref="multipleAddRef"
+      v-if="dialogMultipleVisible"
+      :addData="addData"
+      :checkNeed="true"
+      :createdAt="createdAt"
+      @addBside="addBside"
+      @remoteSearch="remoteSearch"
+    />
+    <ExcleAdd ref="excleAddRef" v-if="dialogExcleVisible" @addBside="addBside" />
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button style="font-weight: bold" @click="resetCheckForm"> 取消 </el-button>
+        <el-button style="font-weight: bold" type="primary" @click="confirm">
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { CloseBold } from "@element-plus/icons-vue";
+import { ElMessage } from "element-plus";
+
+import FormTools from "../../operate/formTools.vue";
+import SingleAdd from "./singleAdd.vue";
+import MultipleAdd from "./multipleAdd.vue";
+import ExcleAdd from "./excleAdd.vue";
+
+import bsideActiveStore from "../../../stores/bside";
+
+import $http from "../../../api/index";
+import $url from "../../../api/url";
+
+import { encrypt } from "../../../utils/aes";
+
+const bsideMsgActive = bsideActiveStore();
+
+const dialogVisible = ref(false);
+const singleAddRef = ref(null);
+const multipleAddRef = ref(null);
+const excleAddRef = ref(null);
+const dialogSingleVisible = ref(true);
+const dialogMultipleVisible = ref(false);
+const dialogExcleVisible = ref(false);
+
+const props = defineProps({
+  title: String,
+  addData: Object,
+  createdAt: String,
+});
+
+const emit = defineEmits(["reloadData", "remoteSearch"]);
+
+const remoteSearch = (data, searchKey, timeBefor, operateType) => {
+  emit("remoteSearch", data, searchKey, timeBefor, "add", operateType);
+};
+
+const showTools = (operateType) => {
+  switch (operateType) {
+    case "single":
+      dialogSingleVisible.value = true;
+      dialogMultipleVisible.value = false;
+      dialogExcleVisible.value = false;
+      bsideMsgActive.dialogSingleVisible = dialogSingleVisible.value;
+      bsideMsgActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      bsideMsgActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    case "multiple":
+      dialogSingleVisible.value = false;
+      dialogMultipleVisible.value = true;
+      dialogExcleVisible.value = false;
+      bsideMsgActive.dialogSingleVisible = dialogSingleVisible.value;
+      bsideMsgActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      bsideMsgActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    case "excle":
+      dialogSingleVisible.value = false;
+      dialogMultipleVisible.value = false;
+      dialogExcleVisible.value = true;
+      bsideMsgActive.dialogSingleVisible = dialogSingleVisible.value;
+      bsideMsgActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      bsideMsgActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    default:
+      break;
+  }
+};
+
+const resetCheckForm = () => {
+  if (dialogSingleVisible.value) {
+    singleAddRef.value.resetCheckForm();
+  } else if (dialogMultipleVisible.value) {
+    multipleAddRef.value.resetCheckForm();
+  } else if (dialogExcleVisible.value) {
+    excleAddRef.value.resetCheckForm();
+  }
+  dialogVisible.value = false;
+};
+
+const confirm = () => {
+  if (dialogSingleVisible.value) {
+    singleAddRef.value.confirm();
+  } else if (dialogMultipleVisible.value) {
+    multipleAddRef.value.confirm();
+  } else if (dialogExcleVisible.value) {
+    excleAddRef.value.confirm();
+  }
+};
+
+const addBside = (requestMsg) => {
+  requestMsg.forEach((element) => {
+    element.role = encrypt(String(element.role));
+    element.account_name = encrypt(String(element.account_name));
+    element.organization =
+      element.organization == "" ? "" : encrypt(String(element.organization));
+    element.user_name = element.user_name == "" ? "" : encrypt(String(element.user_name));
+    element.phone = element.phone == "" ? "" : encrypt(String(element.phone));
+    element.msg = element.msg == "" ? "" : encrypt(String(element.msg));
+  });
+  const data = { requestMsg };
+  $http.post($url.addBSide, data).then((res) => {
+    if (res.data.code === 200) {
+      resetCheckForm();
+      ElMessage({
+        message: "新增B端用户成功！",
+        type: "success",
+      });
+      emit("reloadData");
+    } else {
+      ElMessage.error("新增B端用户失败！");
+    }
+  });
+};
+
+defineExpose({ dialogVisible, singleAddRef, multipleAddRef });
+</script>
+
+<style scoped></style>

src/components/addNewData/bsideForm/excleAdd.vue

@@ -0,0 +1,132 @@
+<template>
+  <UploadFile
+    ref="uploadFileRef"
+    :options="options"
+    :relatedRules="relatedRules"
+    :relatedOptions="relatedOptions"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { ElMessage } from "element-plus";
+
+import UploadFile from "../../operate/uploadFile.vue";
+
+const uploadFileRef = ref(null);
+const formClone = ref([]);
+
+const options = {
+  limit: 1,
+  accept: ".xlsx",
+  action: "",
+  multiple: false,
+  listType: "text",
+  autoUpload: false,
+};
+
+const relatedRules = {
+  role: {
+    value: "",
+    label: "账号角色",
+  },
+  account_name: {
+    value: "",
+    label: "账号名称",
+  },
+  organization: {
+    value: "",
+    label: "单位uid",
+  },
+  user_name: {
+    value: "",
+    label: "用户姓名",
+  },
+  phone: {
+    value: "",
+    label: "用户手机号码",
+  },
+  msg: {
+    value: "",
+    label: "用户基本信息",
+  },
+};
+
+const relatedOptions = [
+  {
+    value: "0",
+    label: "账号角色",
+    disabled: false,
+  },
+  {
+    value: "1",
+    label: "账号名称",
+    disabled: false,
+  },
+  {
+    value: "2",
+    label: "单位uid",
+    disabled: false,
+  },
+  {
+    value: "3",
+    label: "用户姓名",
+    disabled: false,
+  },
+  {
+    value: "4",
+    label: "用户手机号码",
+    disabled: false,
+  },
+  {
+    value: "5",
+    label: "用户基本信息",
+    disabled: false,
+  },
+];
+
+const emit = defineEmits(["addBside"]);
+
+const resetCheckForm = () => {
+  if (!uploadFileRef) return;
+  uploadFileRef.value.handleExceed();
+};
+
+const confirm = async () => {
+  if (!uploadFileRef) return;
+  formClone.value = [];
+  const length = uploadFileRef.value.loadData.length;
+  if (length == 0) return ElMessage.error("请先上传文件！");
+  const flag = await uploadFileRef.value.confirm();
+  if (!flag) return ElMessage.error("请先选择表格关联项！");
+  ElMessage({
+    message: `正在上传数据中，请稍等...`,
+    type: "success",
+  });
+  setTimeout(() => {
+    uploadFileRef.value.loadData.forEach((ExcleForm) => {
+      ExcleForm.forEach((worksheet) => {
+        let context = [...worksheet];
+        context.shift();
+        context.forEach((item) => {
+          if (item.length != 0) {
+            formClone.value.push({
+              role: item[relatedRules.role.value],
+              account_name: item[relatedRules.account_name.value],
+              organization: item[relatedRules.organization.value],
+              user_name: item[relatedRules.user_name.value],
+              phone: item[relatedRules.phone.value],
+              msg: item[relatedRules.msg.value],
+            });
+          }
+        });
+      });
+    });
+    emit("addBside", formClone.value);
+  }, 3000);
+};
+
+defineExpose({ resetCheckForm, confirm, formClone });
+</script>
+
+<style scoped></style>

src/components/addNewData/bsideForm/multipleAdd.vue

@@ -0,0 +1,121 @@
+<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>

src/components/addNewData/bsideForm/singleAdd.vue

@@ -0,0 +1,165 @@
+<template>
+  <el-form
+    ref="ruleFormRef"
+    style="max-width: 600px"
+    :model="ruleForm"
+    :rules="rules"
+    label-width="auto"
+    size="default"
+    status-icon
+    class="mx-auto"
+  >
+    <el-form-item class="mx-1 font-bold" label="账号角色" prop="role">
+      <el-select
+        clearable
+        size="small"
+        placeholder="请选择账号角色"
+        autocomplete="off"
+        v-model="ruleForm.role"
+        style="width: 100%; font-size: 1rem"
+      >
+        <el-option
+          v-for="item in addData.roleOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+          class="text-center"
+          :style="item.style"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="账号名称" prop="account_name">
+      <el-input
+        clearable
+        placeholder="请输入账号名称"
+        minlength="8"
+        maxlength="12"
+        v-model="ruleForm.account_name"
+        @input="filter(ruleForm.account_name, 'account_name')"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="用户单位" prop="organization">
+      <RemoteSearch
+        ref="remoteSearchRef"
+        @searchResult="searchResult"
+        :disabled="false"
+        searchKey="organization_name"
+        :timeBefor="createdAt"
+        @handleSelect="handleSelect"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="用户姓名" prop="user_name">
+      <el-input
+        clearable
+        placeholder="请输入用户姓名"
+        maxlength="10"
+        v-model="ruleForm.user_name"
+        @input="filter(ruleForm.user_name, 'user_name')"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="用户手机号码" prop="phone">
+      <el-input
+        clearable
+        placeholder="请输入用户手机号码"
+        maxlength="11"
+        v-model="ruleForm.phone"
+        @input="filter(ruleForm.phone, 'phone')"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="用户基本信息" prop="msg">
+      <el-input
+        clearable
+        placeholder="请输入用户基本信息"
+        maxlength="200"
+        v-model="ruleForm.msg"
+        @input="filter(ruleForm.msg, 'msg')"
+      />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import { ElMessage } from "element-plus";
+
+import RemoteSearch from "../../search/remoteSearch.vue";
+
+const ruleFormRef = ref(null);
+const remoteSearchRef = ref(null);
+
+const ruleForm = reactive({
+  role: "",
+  account_name: "",
+  organization: "",
+  user_name: "",
+  phone: "",
+  msg: "",
+});
+
+const props = defineProps({
+  addData: Object,
+  createdAt: String,
+});
+
+const formClone = ref({});
+
+const rules = reactive({
+  role: [{ required: true, message: "请选择账号角色", trigger: "blur" }],
+  account_name: [{ required: true, message: "请输入账号名称", trigger: "blur" }],
+});
+
+const emit = defineEmits(["addBside", "remoteSearch"]);
+
+const searchResult = (data, searchKey, timeBefor) => {
+  emit("remoteSearch", data, searchKey, timeBefor, "single");
+};
+
+const filter = (value, label) => {
+  if (/[=\s"'+-]/.test(value)) {
+    if (ruleForm[label]) {
+      ruleForm[label] = value.replace(/[=\s"'+-]/g, "");
+    }
+  }
+};
+
+const resetCheckForm = () => {
+  if (!ruleFormRef) return;
+  ruleFormRef.value.resetFields();
+  remoteSearchRef.value.clearValue();
+};
+
+const handleSelect = () => {
+  ruleForm.organization = remoteSearchRef.value.keyValue;
+};
+
+const confirm = async () => {
+  if (!ruleFormRef) return;
+  await ruleFormRef.value.validate((valid) => {
+    if (valid) {
+      formClone.value = { ...ruleForm };
+      emit("addBside", [formClone.value]);
+      ruleFormRef.value.resetFields();
+      remoteSearchRef.value.clearValue();
+      ElMessage({
+        message: `提交成功！`,
+        type: "success",
+      });
+    } else {
+      ElMessage.error("提交失败！");
+    }
+  });
+};
+
+const validate = () => {
+  if (!ruleFormRef) return Promise.resolve(false);
+  return new Promise((resolve) => {
+    ruleFormRef.value.validate((valid) => {
+      resolve(valid);
+    });
+  });
+};
+
+defineExpose({ remoteSearchRef, resetCheckForm, confirm, validate, ruleForm, formClone });
+</script>
+
+<style scoped></style>

src/components/addNewData/businessForm/businessForm.vue

@@ -0,0 +1,179 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :show-close="false"
+    style="width: 80%"
+    center
+    align-center
+    :before-close="resetCheckForm"
+  >
+    <template #header="{ titleId, titleClass }">
+      <div
+        style="font-size: 2rem"
+        class="w-full font-bold"
+        :id="titleId"
+        :class="titleClass"
+      >
+        {{ title }}
+      </div>
+      <div
+        @click="resetCheckForm"
+        class="bg-gray-400 hover:bg-red-600 text-3xl absolute top-0 right-0 cursor-pointer flex justify-center items-center"
+      >
+        <el-icon>
+          <CloseBold />
+        </el-icon>
+      </div>
+    </template>
+    <FormTools @showTools="showTools" :dialogObj="businessMsgActive" />
+    <SingleAdd
+      ref="singleAddRef"
+      v-if="dialogSingleVisible"
+      :addData="addData"
+      :createdAt="createdAt"
+      @addBusiness="addBusiness"
+      @remoteSearch="remoteSearch"
+    />
+    <MultipleAdd
+      ref="multipleAddRef"
+      v-if="dialogMultipleVisible"
+      :addData="addData"
+      :checkNeed="true"
+      :createdAt="createdAt"
+      @addBusiness="addBusiness"
+      @remoteSearch="remoteSearch"
+    />
+    <ExcleAdd ref="excleAddRef" v-if="dialogExcleVisible" @addBusiness="addBusiness" />
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button style="font-weight: bold" @click="resetCheckForm"> 取消 </el-button>
+        <el-button style="font-weight: bold" type="primary" @click="confirm">
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { CloseBold } from "@element-plus/icons-vue";
+import { ElMessage } from "element-plus";
+
+import FormTools from "../../operate/formTools.vue";
+import SingleAdd from "./singleAdd.vue";
+import MultipleAdd from "./multipleAdd.vue";
+import ExcleAdd from "./excleAdd.vue";
+
+import businessActiveStore from "../../../stores/business";
+
+import $http from "../../../api/index";
+import $url from "../../../api/url";
+
+import { encrypt } from "../../../utils/aes";
+
+const businessMsgActive = businessActiveStore();
+
+const dialogVisible = ref(false);
+const singleAddRef = ref(null);
+const multipleAddRef = ref(null);
+const excleAddRef = ref(null);
+const dialogSingleVisible = ref(true);
+const dialogMultipleVisible = ref(false);
+const dialogExcleVisible = ref(false);
+
+const props = defineProps({
+  title: String,
+  addData: Object,
+  createdAt: String,
+});
+
+const emit = defineEmits(["reloadData", "remoteSearch"]);
+
+const remoteSearch = (data, searchKey, timeBefor, operateType) => {
+  emit("remoteSearch", data, searchKey, timeBefor, "add", operateType);
+};
+
+const showTools = (operateType) => {
+  switch (operateType) {
+    case "single":
+      dialogSingleVisible.value = true;
+      dialogMultipleVisible.value = false;
+      dialogExcleVisible.value = false;
+      businessMsgActive.dialogSingleVisible = dialogSingleVisible.value;
+      businessMsgActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      businessMsgActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    case "multiple":
+      dialogSingleVisible.value = false;
+      dialogMultipleVisible.value = true;
+      dialogExcleVisible.value = false;
+      businessMsgActive.dialogSingleVisible = dialogSingleVisible.value;
+      businessMsgActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      businessMsgActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    case "excle":
+      dialogSingleVisible.value = false;
+      dialogMultipleVisible.value = false;
+      dialogExcleVisible.value = true;
+      businessMsgActive.dialogSingleVisible = dialogSingleVisible.value;
+      businessMsgActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      businessMsgActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    default:
+      break;
+  }
+};
+
+const resetCheckForm = () => {
+  if (dialogSingleVisible.value) {
+    singleAddRef.value.resetCheckForm();
+  } else if (dialogMultipleVisible.value) {
+    multipleAddRef.value.resetCheckForm();
+  } else if (dialogExcleVisible.value) {
+    excleAddRef.value.resetCheckForm();
+  }
+  dialogVisible.value = false;
+};
+
+const confirm = () => {
+  if (dialogSingleVisible.value) {
+    singleAddRef.value.confirm();
+  } else if (dialogMultipleVisible.value) {
+    multipleAddRef.value.confirm();
+  } else if (dialogExcleVisible.value) {
+    excleAddRef.value.confirm();
+  }
+};
+
+const addBusiness = (requestMsg) => {
+  requestMsg.forEach((element) => {
+    element.login_url = encrypt(String(element.login_url));
+    element.client_url = encrypt(String(element.client_url));
+    element.temporary_id = encrypt(
+      element.temporary_id === true ? "true" : String(element.temporary_id)
+    );
+    element.name = encrypt(String(element.name));
+    element.type = encrypt(String(element.type));
+    element.level = encrypt(String(element.level));
+    element.status = encrypt(String(element.status));
+  });
+  const data = { requestMsg };
+  $http.post($url.addBusiness, data).then((res) => {
+    if (res.data.code === 200) {
+      resetCheckForm();
+      ElMessage({
+        message: "新增公司业务成功！",
+        type: "success",
+      });
+      emit("reloadData");
+    } else {
+      ElMessage.error("新增公司业务失败！");
+    }
+  });
+};
+
+defineExpose({ dialogVisible, singleAddRef, multipleAddRef });
+</script>
+
+<style scoped></style>

src/components/addNewData/businessForm/excleAdd.vue

@@ -0,0 +1,132 @@
+<template>
+  <UploadFile
+    ref="uploadFileRef"
+    :options="options"
+    :relatedRules="relatedRules"
+    :relatedOptions="relatedOptions"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { ElMessage } from "element-plus";
+
+import UploadFile from "../../operate/uploadFile.vue";
+
+const uploadFileRef = ref(null);
+const formClone = ref([]);
+
+const options = {
+  limit: 1,
+  accept: ".xlsx",
+  action: "",
+  multiple: false,
+  listType: "text",
+  autoUpload: false,
+};
+
+const relatedRules = {
+  login_url: {
+    value: "",
+    label: "业务登录网址",
+  },
+  client_url: {
+    value: "",
+    label: "业务网址",
+  },
+  name: {
+    value: "",
+    label: "业务名称",
+  },
+  type: {
+    value: "",
+    label: "业务类型",
+  },
+  level: {
+    value: "",
+    label: "业务等级",
+  },
+  status: {
+    value: "",
+    label: "业务状态",
+  },
+};
+
+const relatedOptions = [
+  {
+    value: "0",
+    label: "业务登录网址",
+    disabled: false,
+  },
+  {
+    value: "1",
+    label: "业务网址",
+    disabled: false,
+  },
+  {
+    value: "2",
+    label: "业务名称",
+    disabled: false,
+  },
+  {
+    value: "3",
+    label: "业务类型",
+    disabled: false,
+  },
+  {
+    value: "4",
+    label: "业务等级",
+    disabled: false,
+  },
+  {
+    value: "5",
+    label: "业务状态",
+    disabled: false,
+  },
+];
+
+const emit = defineEmits(["addBusiness"]);
+
+const resetCheckForm = () => {
+  if (!uploadFileRef) return;
+  uploadFileRef.value.handleExceed();
+};
+
+const confirm = async () => {
+  if (!uploadFileRef) return;
+  formClone.value = [];
+  const length = uploadFileRef.value.loadData.length;
+  if (length == 0) return ElMessage.error("请先上传文件！");
+  const flag = await uploadFileRef.value.confirm();
+  if (!flag) return ElMessage.error("请先选择表格关联项！");
+  ElMessage({
+    message: `正在上传数据中，请稍等...`,
+    type: "success",
+  });
+  setTimeout(() => {
+    uploadFileRef.value.loadData.forEach((ExcleForm) => {
+      ExcleForm.forEach((worksheet) => {
+        let context = [...worksheet];
+        context.shift();
+        context.forEach((item) => {
+          if (item.length != 0) {
+            formClone.value.push({
+              login_url: item[relatedRules.login_url.value],
+              client_url: item[relatedRules.client_url.value],
+              name: item[relatedRules.name.value],
+              type: item[relatedRules.type.value],
+              level: item[relatedRules.level.value],
+              status: item[relatedRules.status.value],
+            });
+          }
+        });
+      });
+    });
+    emit("addBusiness", formClone.value);
+  }, 3000);
+};
+
+defineExpose({ resetCheckForm, confirm, formClone });
+</script>
+
+<style scoped></style>

src/components/addNewData/businessForm/multipleAdd.vue

@@ -0,0 +1,137 @@
+<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-if="checkNeed"
+        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(["addBusiness", "remoteSearch"]);
+
+const remoteSearch = (data, searchKey, timeBefor) => {
+  emit("remoteSearch", data, searchKey, timeBefor, "multiple");
+};
+
+const initData = () => {
+  setTimeout(() => {
+    singleAddRef.value.forEach((item) => {
+      item.ruleForm.type = singleAddRef.value[0].ruleForm.type;
+      item.ruleForm.level = singleAddRef.value[0].ruleForm.level;
+      item.ruleForm.status = singleAddRef.value[0].ruleForm.status;
+    });
+  }, 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 (!element.switchChecked) {
+        if (
+          element.ruleForm.temporary_id == true ||
+          element.ruleForm.temporary_id == undefined
+        ) {
+          result = false;
+          element.checkedText = true;
+        }
+      }
+      if (result) {
+        formClone.value.push({ ...element.ruleForm });
+      } else {
+        valid = result;
+      }
+    });
+  });
+  setTimeout(() => {
+    if (valid) {
+      emit("addBusiness", 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>

src/components/addNewData/businessForm/singleAdd.vue

@@ -0,0 +1,254 @@
+<template>
+  <el-form
+    ref="ruleFormRef"
+    style="max-width: 600px"
+    :model="ruleForm"
+    :rules="rules"
+    label-width="auto"
+    size="default"
+    status-icon
+    class="mx-auto"
+  >
+    <el-form-item class="mx-1 font-bold" label="业务登录网址" prop="login_url">
+      <el-input
+        clearable
+        placeholder="请输入业务登录网址"
+        v-model="ruleForm.login_url"
+        @input="filter(ruleForm.login_url, 'login_url')"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="业务网址" prop="client_url">
+      <el-input
+        clearable
+        placeholder="请输入业务网址"
+        v-model="ruleForm.client_url"
+        @input="filter(ruleForm.client_url, 'client_url')"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="业务临时标识" prop="temporary_id">
+      <el-switch
+        v-model="switchChecked"
+        class="ml-2"
+        inline-prompt
+        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
+        active-text="随机生成业务临时标识"
+        inactive-text="使用已有业务临时标识"
+      />
+      <div v-if="checkedText">&nbsp;&nbsp;&nbsp;&nbsp;</div>
+      <div v-if="checkedText" class="text-red-500 font-black">
+        请搜索并使用业务临时标识
+      </div>
+      <RemoteSearch
+        ref="remoteSearchRef"
+        @searchResult="searchResult"
+        :disabled="switchChecked"
+        searchKey="name"
+        :timeBefor="createdAt"
+        @handleSelect="handleSelect"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="业务名称" prop="name">
+      <el-input
+        clearable
+        placeholder="请输入业务名称"
+        v-model="ruleForm.name"
+        @input="filter(ruleForm.name, 'name')"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="业务类型" prop="type">
+      <el-select
+        clearable
+        size="small"
+        placeholder="请选择业务类型"
+        autocomplete="off"
+        v-model="ruleForm.type"
+        style="width: 100%; font-size: 1rem"
+      >
+        <el-option
+          v-for="item in addData.typeOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+          class="text-center"
+          :style="item.style"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="业务等级" prop="level">
+      <el-select
+        clearable
+        size="small"
+        placeholder="请选择业务等级"
+        autocomplete="off"
+        v-model="ruleForm.level"
+        style="width: 100%; font-size: 1rem"
+      >
+        <el-option
+          v-for="item in addData.levelOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+          class="text-center"
+          :style="item.style"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="业务状态" prop="status">
+      <el-select
+        clearable
+        size="small"
+        placeholder="请选择业务状态"
+        autocomplete="off"
+        v-model="ruleForm.status"
+        style="width: 100%; font-size: 1rem"
+      >
+        <el-option
+          v-for="item in addData.statusOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+          class="text-center"
+          :style="item.style"
+        />
+      </el-select>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+import { ref, reactive, watch } from "vue";
+import { ElMessage } from "element-plus";
+
+import RemoteSearch from "../../search/remoteSearch.vue";
+
+const ruleFormRef = ref(null);
+const switchChecked = ref(true);
+const checkedText = ref(false);
+const remoteSearchRef = ref(null);
+
+const ruleForm = reactive({
+  login_url: "",
+  client_url: "",
+  temporary_id: true,
+  name: "",
+  type: "",
+  level: "",
+  status: "",
+});
+
+const props = defineProps({
+  addData: Object,
+  createdAt: String,
+});
+
+const formClone = ref({});
+
+const rules = reactive({
+  login_url: [{ required: true, message: "请输入业务登录网址", trigger: "blur" }],
+  client_url: [{ required: true, message: "请输入业务网址", trigger: "blur" }],
+  name: [{ required: true, message: "请输入业务名称", trigger: "blur" }],
+});
+
+const emit = defineEmits(["addBusiness", "remoteSearch"]);
+
+const searchResult = (data, searchKey, timeBefor) => {
+  emit("remoteSearch", data, searchKey, timeBefor, "single");
+};
+
+const filter = (value, label) => {
+  if (/[=\s"'+-]/.test(value)) {
+    if (ruleForm[label]) {
+      ruleForm[label] = value.replace(/[=\s"'+-]/g, "");
+    }
+  }
+};
+
+const handleSelect = () => {
+  ruleForm.temporary_id = remoteSearchRef.value.keyValue;
+  checkedText.value = false;
+  remoteSearchRef.value.selectStyle = "";
+  remoteSearchRef.value.statusHolder = false;
+};
+
+const resetCheckForm = () => {
+  if (!ruleFormRef) return;
+  ruleFormRef.value.resetFields();
+  remoteSearchRef.value.clearValue();
+  switchChecked.value = true;
+};
+
+const confirm = async () => {
+  if (!ruleFormRef) return;
+  await ruleFormRef.value.validate((valid) => {
+    if (!switchChecked.value) {
+      if (ruleForm.temporary_id == true || ruleForm.temporary_id == undefined) {
+        valid = false;
+        checkedText.value = true;
+        remoteSearchRef.value.selectStyle = "border-width: 2px; border-color: rgb(239 68 68);";
+        remoteSearchRef.value.statusHolder = true;
+      }
+    }
+    if (valid) {
+      formClone.value = { ...ruleForm };
+      emit("addBusiness", [formClone.value]);
+      ruleFormRef.value.resetFields();
+      remoteSearchRef.value.clearValue();
+      switchChecked.value = true;
+      ElMessage({
+        message: `提交成功！`,
+        type: "success",
+      });
+    } else {
+      ElMessage.error("提交失败！");
+    }
+  });
+};
+
+const validate = () => {
+  if (!ruleFormRef) return Promise.resolve(false);
+  return new Promise((resolve) => {
+    ruleFormRef.value.validate((valid) => {
+      resolve(valid);
+    });
+  });
+};
+
+defineExpose({
+  remoteSearchRef,
+  resetCheckForm,
+  confirm,
+  validate,
+  ruleForm,
+  formClone,
+  switchChecked,
+  checkedText,
+});
+
+watch(switchChecked, (value) => {
+  if (value) {
+    checkedText.value = false;
+    remoteSearchRef.value.selectStyle = "";
+    ruleForm.temporary_id = true;
+    remoteSearchRef.value.clearValue();
+  } else {
+    if (remoteSearchRef.value.statusHolder) {
+      checkedText.value = true;
+      remoteSearchRef.value.selectStyle = "border-width: 2px; border-color: rgb(239 68 68);";
+    }
+  }
+});
+
+watch(ruleForm, (value) => {
+  if (!switchChecked.value) {
+    checkedText.value = true;
+    remoteSearchRef.value.selectStyle = "border-width: 2px; border-color: rgb(239 68 68);";
+    remoteSearchRef.value.statusHolder = true;
+  }
+  if (value.temporary_id !== true && value.temporary_id !== undefined) {
+    checkedText.value = false;
+    remoteSearchRef.value.selectStyle = "";
+  }
+});
+</script>
+
+<style scoped></style>

src/components/addNewData/contest/accountForm/accountForm.vue

@@ -0,0 +1,156 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :show-close="false"
+    style="width: 80%"
+    center
+    align-center
+    :before-close="resetCheckForm"
+  >
+    <template #header="{ titleId, titleClass }">
+      <div
+        style="font-size: 2rem"
+        class="w-full font-bold"
+        :id="titleId"
+        :class="titleClass"
+      >
+        {{ title }}
+      </div>
+      <div
+        @click="resetCheckForm"
+        class="bg-gray-400 hover:bg-red-600 text-3xl absolute top-0 right-0 cursor-pointer flex justify-center items-center"
+      >
+        <el-icon>
+          <CloseBold />
+        </el-icon>
+      </div>
+    </template>
+    <FormTools @showTools="showTools" :dialogObj="accountMsgActive" />
+    <SingleAdd ref="singleAddRef" v-if="dialogSingleVisible" @addAccount="addAccount" />
+    <MultipleAdd
+      ref="multipleAddRef"
+      v-if="dialogMultipleVisible"
+      :checkNeed="false"
+      @addAccount="addAccount"
+    />
+    <ExcleAdd ref="excleAddRef" v-if="dialogExcleVisible" @addAccount="addAccount" />
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button style="font-weight: bold" @click="resetCheckForm"> 取消 </el-button>
+        <el-button style="font-weight: bold" type="primary" @click="confirm">
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { CloseBold } from "@element-plus/icons-vue";
+import { ElMessage } from "element-plus";
+
+import FormTools from "../../../operate/formTools.vue";
+import SingleAdd from "./singleAdd.vue";
+import MultipleAdd from "./multipleAdd.vue";
+import ExcleAdd from "./excleAdd.vue";
+
+import accountActiveStore from "../../../../stores/contest/account";
+
+import $http from "../../../../api/index";
+import $url from "../../../../api/url";
+
+import { encrypt } from "../../../../utils/aes";
+
+const accountMsgActive = accountActiveStore();
+
+const dialogVisible = ref(false);
+const singleAddRef = ref(null);
+const multipleAddRef = ref(null);
+const excleAddRef = ref(null);
+const dialogSingleVisible = ref(true);
+const dialogMultipleVisible = ref(false);
+const dialogExcleVisible = ref(false);
+
+const props = defineProps({
+  title: String,
+});
+
+const emit = defineEmits(["reloadData"]);
+
+const showTools = (operateType) => {
+  switch (operateType) {
+    case "single":
+      dialogSingleVisible.value = true;
+      dialogMultipleVisible.value = false;
+      dialogExcleVisible.value = false;
+      accountMsgActive.dialogSingleVisible = dialogSingleVisible.value;
+      accountMsgActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      accountMsgActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    case "multiple":
+      dialogSingleVisible.value = false;
+      dialogMultipleVisible.value = true;
+      dialogExcleVisible.value = false;
+      accountMsgActive.dialogSingleVisible = dialogSingleVisible.value;
+      accountMsgActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      accountMsgActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    case "excle":
+      dialogSingleVisible.value = false;
+      dialogMultipleVisible.value = false;
+      dialogExcleVisible.value = true;
+      accountMsgActive.dialogSingleVisible = dialogSingleVisible.value;
+      accountMsgActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      accountMsgActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    default:
+      break;
+  }
+};
+
+const resetCheckForm = () => {
+  if (dialogSingleVisible.value) {
+    singleAddRef.value.resetCheckForm();
+  } else if (dialogMultipleVisible.value) {
+    multipleAddRef.value.resetCheckForm();
+  } else if (dialogExcleVisible.value) {
+    excleAddRef.value.resetCheckForm();
+  }
+  dialogVisible.value = false;
+};
+
+const confirm = () => {
+  if (dialogSingleVisible.value) {
+    singleAddRef.value.confirm();
+  } else if (dialogMultipleVisible.value) {
+    multipleAddRef.value.confirm();
+  } else if (dialogExcleVisible.value) {
+    excleAddRef.value.confirm();
+  }
+};
+
+const addAccount = (requestMsg) => {
+  requestMsg.forEach((element) => {
+    element.contest_uid = encrypt(String(element.contest_uid));
+    element.account_name = encrypt(String(element.account_name));
+  });
+  const data = { requestMsg };
+  $http.post($url.addAccount, data).then((res) => {
+    if (res.data.code === 200) {
+      resetCheckForm();
+      ElMessage({
+        message: "新增竞赛账号成功！",
+        type: "success",
+      });
+      emit("reloadData");
+    } else {
+      ElMessage.error("新增竞赛账号失败！");
+    }
+  });
+};
+
+defineExpose({ dialogVisible });
+</script>
+
+<style scoped></style>

src/components/addNewData/contest/accountForm/excleAdd.vue

@@ -0,0 +1,82 @@
+<template>
+  <UploadFile
+    ref="uploadFileRef"
+    :options="options"
+    :relatedRules="relatedRules"
+    :relatedOptions="relatedOptions"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { ElMessage } from "element-plus";
+
+import UploadFile from "../../../operate/uploadFile.vue";
+
+const uploadFileRef = ref(null);
+const formClone = ref([]);
+
+const options = {
+  limit: 1,
+  accept: ".xlsx",
+  action: "",
+  multiple: false,
+  listType: "text",
+  autoUpload: false,
+};
+
+const relatedRules = {
+  account_name: {
+    value: "",
+    label: "账号名称",
+  },
+};
+
+const relatedOptions = [
+  {
+    value: "0",
+    label: "账号名称",
+    disabled: false,
+  },
+];
+
+const emit = defineEmits(["addAccount"]);
+
+const resetCheckForm = () => {
+  if (!uploadFileRef) return;
+  uploadFileRef.value.handleExceed();
+};
+
+const confirm = async () => {
+  if (!uploadFileRef) return;
+  formClone.value = [];
+  const length = uploadFileRef.value.loadData.length;
+  if (length == 0) return ElMessage.error("请先上传文件！");
+  const flag = await uploadFileRef.value.confirm();
+  if (!flag) return ElMessage.error("请先选择表格关联项！");
+  ElMessage({
+    message: `正在上传数据中，请稍等...`,
+    type: "success",
+  });
+  setTimeout(() => {
+    uploadFileRef.value.loadData.forEach((ExcleForm) => {
+      ExcleForm.forEach((worksheet) => {
+        let context = [...worksheet];
+        context.shift();
+        context.forEach((item) => {
+          if (item.length != 0) {
+            formClone.value.push({
+              account_name: item[relatedRules.account_name.value],
+            });
+          }
+        });
+      });
+    });
+    emit("addAccount", formClone.value);
+  }, 3000);
+};
+
+defineExpose({ resetCheckForm, confirm, formClone });
+</script>
+
+<style scoped></style>

src/components/addNewData/contest/accountForm/multipleAdd.vue

@@ -0,0 +1,113 @@
+<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-if="checkNeed"
+        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" />
+      </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({
+  checkNeed: Boolean,
+});
+
+const emit = defineEmits(["addAccount"]);
+
+const initData = () => {
+  setTimeout(() => {
+    singleAddRef.value.forEach((item) => {});
+  }, 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("addAccount", formClone.value);
+      singleAddRef.value.forEach((item) => {
+        item.resetCheckForm();
+      });
+      ElMessage({
+        message: `提交成功！`,
+        type: "success",
+      });
+    } else {
+      ElMessage.error("提交失败！");
+    }
+  }, 0);
+};
+
+defineExpose({ resetCheckForm, confirm, formClone });
+
+watch(checked, (value) => {
+  if (value) {
+    initData();
+  }
+});
+</script>
+
+<style scoped></style>

src/components/addNewData/contest/accountForm/singleAdd.vue

@@ -0,0 +1,111 @@
+<template>
+  <el-form
+    ref="ruleFormRef"
+    style="max-width: 600px"
+    :model="ruleForm"
+    :rules="rules"
+    label-width="auto"
+    size="default"
+    status-icon
+    class="mx-auto"
+  >
+    <el-form-item class="mx-1 font-bold" label="竞赛uid" prop="contest_uid">
+      <el-autocomplete
+        :fetch-suggestions="searchContestUid"
+        clearable
+        placeholder="请输入竞赛uid"
+        v-model="ruleForm.contest_uid"
+        @input="filter(ruleForm.contest_uid, 'contest_uid')"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="账号名称" prop="account_name">
+      <el-input
+        clearable
+        placeholder="请输入账号名称"
+        maxlength="20"
+        v-model="ruleForm.account_name"
+        @input="filter(ruleForm.account_name, 'account_name')"
+      />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import { ElMessage } from "element-plus";
+
+import $http from "../../../../api/index";
+import $url from "../../../../api/url";
+
+const ruleFormRef = ref(null);
+
+const ruleForm = reactive({
+  contest_uid: "",
+  account_name: "",
+});
+
+const formClone = ref({});
+
+const searchContestUid = (value, cb) => {
+  const data = {
+    contest_uid: value,
+  };
+  $http.post($url.searchContestUid, data).then((res) => {
+    if (res.data.code === 200) {
+      cb(res.data.data);
+    } else {
+      cb([]);
+    }
+  });
+};
+
+const rules = reactive({
+  contest_uid: [{ required: true, message: "请输入竞赛uid", trigger: "blur" }],
+  account_name: [{ required: true, message: "请输入账号名称", trigger: "blur" }],
+});
+
+const emit = defineEmits(["addAccount"]);
+
+const filter = (value, label) => {
+  if (/[=\s"'+-]/.test(value)) {
+    if (ruleForm[label]) {
+      ruleForm[label] = value.replace(/[=\s"'+-]/g, "");
+    }
+  }
+};
+
+const resetCheckForm = () => {
+  if (!ruleFormRef) return;
+  ruleFormRef.value.resetFields();
+};
+
+const confirm = async () => {
+  if (!ruleFormRef) return;
+  await ruleFormRef.value.validate((valid) => {
+    if (valid) {
+      formClone.value = { ...ruleForm };
+      emit("addAccount", [formClone.value]);
+      ruleFormRef.value.resetFields();
+      ElMessage({
+        message: `提交成功！`,
+        type: "success",
+      });
+    } else {
+      ElMessage.error("提交失败！");
+    }
+  });
+};
+
+const validate = () => {
+  if (!ruleFormRef) return Promise.resolve(false);
+  return new Promise((resolve) => {
+    ruleFormRef.value.validate((valid) => {
+      resolve(valid);
+    });
+  });
+};
+
+defineExpose({ resetCheckForm, confirm, validate, ruleForm, formClone });
+</script>
+
+<style scoped></style>

src/components/addNewData/contest/choiceTopicForm/choiceTopicForm.vue

@@ -0,0 +1,168 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :show-close="false"
+    style="width: 80%"
+    center
+    align-center
+    :before-close="resetCheckForm"
+  >
+    <template #header="{ titleId, titleClass }">
+      <div
+        style="font-size: 2rem"
+        class="w-full font-bold"
+        :id="titleId"
+        :class="titleClass"
+      >
+        {{ title }}
+      </div>
+      <div
+        @click="resetCheckForm"
+        class="bg-gray-400 hover:bg-red-600 text-3xl absolute top-0 right-0 cursor-pointer flex justify-center items-center"
+      >
+        <el-icon>
+          <CloseBold />
+        </el-icon>
+      </div>
+    </template>
+    <FormTools @showTools="showTools" :dialogObj="choiceTopicMsgActive" />
+    <SingleAdd
+      ref="singleAddRef"
+      v-if="dialogSingleVisible"
+      @addChoiceTopic="addChoiceTopic"
+    />
+    <MultipleAdd
+      ref="multipleAddRef"
+      v-if="dialogMultipleVisible"
+      :checkNeed="false"
+      @addChoiceTopic="addChoiceTopic"
+    />
+    <ExcleAdd
+      ref="excleAddRef"
+      v-if="dialogExcleVisible"
+      @addChoiceTopic="addChoiceTopic"
+    />
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button style="font-weight: bold" @click="resetCheckForm"> 取消 </el-button>
+        <el-button style="font-weight: bold" type="primary" @click="confirm">
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { CloseBold } from "@element-plus/icons-vue";
+import { ElMessage } from "element-plus";
+
+import FormTools from "../../../operate/formTools.vue";
+import SingleAdd from "./singleAdd.vue";
+import MultipleAdd from "./multipleAdd.vue";
+import ExcleAdd from "./excleAdd.vue";
+
+import choiceTopicActiveStore from "../../../../stores/contest/choiceTopic";
+
+import $http from "../../../../api/index";
+import $url from "../../../../api/url";
+
+import { encrypt } from "../../../../utils/aes";
+
+const choiceTopicMsgActive = choiceTopicActiveStore();
+
+const dialogVisible = ref(false);
+const singleAddRef = ref(null);
+const multipleAddRef = ref(null);
+const excleAddRef = ref(null);
+const dialogSingleVisible = ref(true);
+const dialogMultipleVisible = ref(false);
+const dialogExcleVisible = ref(false);
+
+const props = defineProps({
+  title: String,
+});
+
+const emit = defineEmits(["reloadData"]);
+
+const showTools = (operateType) => {
+  switch (operateType) {
+    case "single":
+      dialogSingleVisible.value = true;
+      dialogMultipleVisible.value = false;
+      dialogExcleVisible.value = false;
+      choiceTopicMsgActive.dialogSingleVisible = dialogSingleVisible.value;
+      choiceTopicMsgActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      choiceTopicMsgActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    case "multiple":
+      dialogSingleVisible.value = false;
+      dialogMultipleVisible.value = true;
+      dialogExcleVisible.value = false;
+      choiceTopicMsgActive.dialogSingleVisible = dialogSingleVisible.value;
+      choiceTopicMsgActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      choiceTopicMsgActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    case "excle":
+      dialogSingleVisible.value = false;
+      dialogMultipleVisible.value = false;
+      dialogExcleVisible.value = true;
+      choiceTopicMsgActive.dialogSingleVisible = dialogSingleVisible.value;
+      choiceTopicMsgActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      choiceTopicMsgActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    default:
+      break;
+  }
+};
+
+const resetCheckForm = () => {
+  if (dialogSingleVisible.value) {
+    singleAddRef.value.resetCheckForm();
+  } else if (dialogMultipleVisible.value) {
+    multipleAddRef.value.resetCheckForm();
+  } else if (dialogExcleVisible.value) {
+    excleAddRef.value.resetCheckForm();
+  }
+  dialogVisible.value = false;
+};
+
+const confirm = () => {
+  if (dialogSingleVisible.value) {
+    singleAddRef.value.confirm();
+  } else if (dialogMultipleVisible.value) {
+    multipleAddRef.value.confirm();
+  } else if (dialogExcleVisible.value) {
+    excleAddRef.value.confirm();
+  }
+};
+
+const addChoiceTopic = (requestMsg) => {
+  requestMsg.forEach((element) => {
+    element.topic = encrypt(String(element.topic));
+    element.options_a = encrypt(String(element.options_a));
+    element.options_b = encrypt(String(element.options_b));
+    element.options_c = encrypt(String(element.options_c));
+    element.options_d = encrypt(String(element.options_d));
+    element.answer = encrypt(String(element.answer));
+  });
+  const data = { requestMsg };
+  $http.post($url.addChoiceTopic, data).then((res) => {
+    if (res.data.code === 200) {
+      resetCheckForm();
+      ElMessage({
+        message: "新增单选题成功！",
+        type: "success",
+      });
+      emit("reloadData");
+    } else {
+      ElMessage.error("新增单选题失败！");
+    }
+  });
+};
+
+defineExpose({ dialogVisible });
+</script>
+
+<style scoped></style>

src/components/addNewData/contest/choiceTopicForm/excleAdd.vue

@@ -0,0 +1,132 @@
+<template>
+  <UploadFile
+    ref="uploadFileRef"
+    :options="options"
+    :relatedRules="relatedRules"
+    :relatedOptions="relatedOptions"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { ElMessage } from "element-plus";
+
+import UploadFile from "../../../operate/uploadFile.vue";
+
+const uploadFileRef = ref(null);
+const formClone = ref([]);
+
+const options = {
+  limit: 1,
+  accept: ".xlsx",
+  action: "",
+  multiple: false,
+  listType: "text",
+  autoUpload: false,
+};
+
+const relatedRules = {
+  topic: {
+    value: "",
+    label: "题目",
+  },
+  options_a: {
+    value: "",
+    label: "选项A",
+  },
+  options_b: {
+    value: "",
+    label: "选项B",
+  },
+  options_c: {
+    value: "",
+    label: "选项C",
+  },
+  options_d: {
+    value: "",
+    label: "选项D",
+  },
+  answer: {
+    value: "",
+    label: "答案",
+  },
+};
+
+const relatedOptions = [
+  {
+    value: "0",
+    label: "题目",
+    disabled: false,
+  },
+  {
+    value: "1",
+    label: "选项A",
+    disabled: false,
+  },
+  {
+    value: "1",
+    label: "选项B",
+    disabled: false,
+  },
+  {
+    value: "1",
+    label: "选项C",
+    disabled: false,
+  },
+  {
+    value: "1",
+    label: "选项D",
+    disabled: false,
+  },
+  {
+    value: "1",
+    label: "答案",
+    disabled: false,
+  },
+];
+
+const emit = defineEmits(["addChoiceTopic"]);
+
+const resetCheckForm = () => {
+  if (!uploadFileRef) return;
+  uploadFileRef.value.handleExceed();
+};
+
+const confirm = async () => {
+  if (!uploadFileRef) return;
+  formClone.value = [];
+  const length = uploadFileRef.value.loadData.length;
+  if (length == 0) return ElMessage.error("请先上传文件！");
+  const flag = await uploadFileRef.value.confirm();
+  if (!flag) return ElMessage.error("请先选择表格关联项！");
+  ElMessage({
+    message: `正在上传数据中，请稍等...`,
+    type: "success",
+  });
+  setTimeout(() => {
+    uploadFileRef.value.loadData.forEach((ExcleForm) => {
+      ExcleForm.forEach((worksheet) => {
+        let context = [...worksheet];
+        context.shift();
+        context.forEach((item) => {
+          if (item.length != 0) {
+            formClone.value.push({
+              topic: item[relatedRules.topic.value],
+              options_a: item[relatedRules.options_a.value],
+              options_b: item[relatedRules.options_b.value],
+              options_c: item[relatedRules.options_c.value],
+              options_d: item[relatedRules.options_d.value],
+              answer: item[relatedRules.answer.value],
+            });
+          }
+        });
+      });
+    });
+    emit("addChoiceTopic", formClone.value);
+  }, 3000);
+};
+
+defineExpose({ resetCheckForm, confirm, formClone });
+</script>
+
+<style scoped></style>

src/components/addNewData/contest/choiceTopicForm/multipleAdd.vue

@@ -0,0 +1,113 @@
+<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-if="checkNeed"
+        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" />
+      </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({
+  checkNeed: Boolean,
+});
+
+const emit = defineEmits(["addChoiceTopic"]);
+
+const initData = () => {
+  setTimeout(() => {
+    singleAddRef.value.forEach((item) => {});
+  }, 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("addChoiceTopic", formClone.value);
+      singleAddRef.value.forEach((item) => {
+        item.resetCheckForm();
+      });
+      ElMessage({
+        message: `提交成功！`,
+        type: "success",
+      });
+    } else {
+      ElMessage.error("提交失败！");
+    }
+  }, 0);
+};
+
+defineExpose({ resetCheckForm, confirm, formClone });
+
+watch(checked, (value) => {
+  if (value) {
+    initData();
+  }
+});
+</script>
+
+<style scoped></style>

src/components/addNewData/contest/choiceTopicForm/singleAdd.vue

@@ -0,0 +1,133 @@
+<template>
+  <el-form
+    ref="ruleFormRef"
+    style="max-width: 600px"
+    :model="ruleForm"
+    :rules="rules"
+    label-width="auto"
+    size="default"
+    status-icon
+    class="mx-auto"
+  >
+    <el-form-item class="mx-1 font-bold" label="题目" prop="topic">
+      <el-input
+        clearable
+        placeholder="请输入题目"
+        v-model="ruleForm.topic"
+        @input="filter(ruleForm.topic, 'topic')"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="选项A" prop="options_a">
+      <el-input
+        clearable
+        placeholder="请输入选项A"
+        v-model="ruleForm.options_a"
+        @input="filter(ruleForm.options_a, 'options_a')"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="选项B" prop="options_b">
+      <el-input
+        clearable
+        placeholder="请输入选项B"
+        v-model="ruleForm.options_b"
+        @input="filter(ruleForm.options_b, 'options_b')"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="选项C" prop="options_c">
+      <el-input
+        clearable
+        placeholder="请输入选项C"
+        v-model="ruleForm.options_c"
+        @input="filter(ruleForm.options_c, 'options_c')"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="选项D" prop="options_d">
+      <el-input
+        clearable
+        placeholder="请输入选项D"
+        v-model="ruleForm.options_d"
+        @input="filter(ruleForm.options_d, 'options_d')"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="答案" prop="answer">
+      <el-input
+        clearable
+        placeholder="请输入答案"
+        v-model="ruleForm.answer"
+        @input="filter(ruleForm.answer, 'answer')"
+      />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import { ElMessage } from "element-plus";
+
+const ruleFormRef = ref(null);
+
+const ruleForm = reactive({
+  topic: "",
+  options_a: "",
+  options_b: "",
+  options_c: "",
+  options_d: "",
+  answer: "",
+});
+
+const formClone = ref({});
+
+const rules = reactive({
+  topic: [{ required: true, message: "请输入题目", trigger: "blur" }],
+  options_a: [{ required: true, message: "请输入选项A", trigger: "blur" }],
+  options_b: [{ required: true, message: "请输入选项B", trigger: "blur" }],
+  options_c: [{ required: true, message: "请输入选项C", trigger: "blur" }],
+  options_d: [{ required: true, message: "请输入选项D", trigger: "blur" }],
+  answer: [{ required: true, message: "请输入答案", trigger: "blur" }],
+});
+
+const emit = defineEmits(["addChoiceTopic"]);
+
+const filter = (value, label) => {
+  if (/[=\s"'+-]/.test(value)) {
+    if (ruleForm[label]) {
+      ruleForm[label] = value.replace(/[=\s"'+-]/g, "");
+    }
+  }
+};
+
+const resetCheckForm = () => {
+  if (!ruleFormRef) return;
+  ruleFormRef.value.resetFields();
+};
+
+const confirm = async () => {
+  if (!ruleFormRef) return;
+  await ruleFormRef.value.validate((valid) => {
+    if (valid) {
+      formClone.value = { ...ruleForm };
+      emit("addChoiceTopic", [formClone.value]);
+      ruleFormRef.value.resetFields();
+      ElMessage({
+        message: `提交成功！`,
+        type: "success",
+      });
+    } else {
+      ElMessage.error("提交失败！");
+    }
+  });
+};
+
+const validate = () => {
+  if (!ruleFormRef) return Promise.resolve(false);
+  return new Promise((resolve) => {
+    ruleFormRef.value.validate((valid) => {
+      resolve(valid);
+    });
+  });
+};
+
+defineExpose({ resetCheckForm, confirm, validate, ruleForm, formClone });
+</script>
+
+<style scoped></style>

src/components/addNewData/contest/contestForm/contestForm.vue

@@ -0,0 +1,164 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :show-close="false"
+    style="width: 80%"
+    center
+    align-center
+    :before-close="resetCheckForm"
+  >
+    <template #header="{ titleId, titleClass }">
+      <div
+        style="font-size: 2rem"
+        class="w-full font-bold"
+        :id="titleId"
+        :class="titleClass"
+      >
+        {{ title }}
+      </div>
+      <div
+        @click="resetCheckForm"
+        class="bg-gray-400 hover:bg-red-600 text-3xl absolute top-0 right-0 cursor-pointer flex justify-center items-center"
+      >
+        <el-icon>
+          <CloseBold />
+        </el-icon>
+      </div>
+    </template>
+    <FormTools @showTools="showTools" :dialogObj="contestMsgActive" />
+    <SingleAdd
+      ref="singleAddRef"
+      v-if="dialogSingleVisible"
+      :addData="addData"
+      @addContest="addContest"
+    />
+    <MultipleAdd
+      ref="multipleAddRef"
+      v-if="dialogMultipleVisible"
+      :checkNeed="false"
+      :addData="addData"
+      @addContest="addContest"
+    />
+    <ExcleAdd ref="excleAddRef" v-if="dialogExcleVisible" @addContest="addContest" />
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button style="font-weight: bold" @click="resetCheckForm"> 取消 </el-button>
+        <el-button style="font-weight: bold" type="primary" @click="confirm">
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { CloseBold } from "@element-plus/icons-vue";
+import { ElMessage } from "element-plus";
+
+import FormTools from "../../../operate/formTools.vue";
+import SingleAdd from "./singleAdd.vue";
+import MultipleAdd from "./multipleAdd.vue";
+import ExcleAdd from "./excleAdd.vue";
+
+import contestActiveStore from "../../../../stores/contest/contest";
+
+import $http from "../../../../api/index";
+import $url from "../../../../api/url";
+
+import { encrypt } from "../../../../utils/aes";
+
+const contestMsgActive = contestActiveStore();
+
+const dialogVisible = ref(false);
+const singleAddRef = ref(null);
+const multipleAddRef = ref(null);
+const excleAddRef = ref(null);
+const dialogSingleVisible = ref(true);
+const dialogMultipleVisible = ref(false);
+const dialogExcleVisible = ref(false);
+
+const props = defineProps({
+  title: String,
+  addData: Object,
+});
+
+const emit = defineEmits(["reloadData"]);
+
+const showTools = (operateType) => {
+  switch (operateType) {
+    case "single":
+      dialogSingleVisible.value = true;
+      dialogMultipleVisible.value = false;
+      dialogExcleVisible.value = false;
+      contestMsgActive.dialogSingleVisible = dialogSingleVisible.value;
+      contestMsgActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      contestMsgActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    case "multiple":
+      dialogSingleVisible.value = false;
+      dialogMultipleVisible.value = true;
+      dialogExcleVisible.value = false;
+      contestMsgActive.dialogSingleVisible = dialogSingleVisible.value;
+      contestMsgActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      contestMsgActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    case "excle":
+      dialogSingleVisible.value = false;
+      dialogMultipleVisible.value = false;
+      dialogExcleVisible.value = true;
+      contestMsgActive.dialogSingleVisible = dialogSingleVisible.value;
+      contestMsgActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      contestMsgActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    default:
+      break;
+  }
+};
+
+const resetCheckForm = () => {
+  if (dialogSingleVisible.value) {
+    singleAddRef.value.resetCheckForm();
+  } else if (dialogMultipleVisible.value) {
+    multipleAddRef.value.resetCheckForm();
+  } else if (dialogExcleVisible.value) {
+    excleAddRef.value.resetCheckForm();
+  }
+  dialogVisible.value = false;
+};
+
+const confirm = () => {
+  if (dialogSingleVisible.value) {
+    singleAddRef.value.confirm();
+  } else if (dialogMultipleVisible.value) {
+    multipleAddRef.value.confirm();
+  } else if (dialogExcleVisible.value) {
+    excleAddRef.value.confirm();
+  }
+};
+
+const addContest = (requestMsg) => {
+  requestMsg.forEach((element) => {
+    element.contest_name = encrypt(String(element.contest_name));
+    element.contest_organizers = encrypt(String(element.contest_organizers));
+    element.contest_term = encrypt(String(element.contest_term));
+  });
+  const data = { requestMsg };
+  $http.post($url.addContest, data).then((res) => {
+    if (res.data.code === 200) {
+      resetCheckForm();
+      ElMessage({
+        message: "新增竞赛成功！",
+        type: "success",
+      });
+      emit("reloadData");
+    } else {
+      ElMessage.error("新增竞赛失败！");
+    }
+  });
+};
+
+defineExpose({ dialogVisible });
+</script>
+
+<style scoped></style>

src/components/addNewData/contest/contestForm/excleAdd.vue

@@ -0,0 +1,172 @@
+<template>
+  <UploadFile
+    ref="uploadFileRef"
+    :options="options"
+    :relatedRules="relatedRules"
+    :relatedOptions="relatedOptions"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { ElMessage } from "element-plus";
+
+import UploadFile from "../../../operate/uploadFile.vue";
+
+const uploadFileRef = ref(null);
+const formClone = ref([]);
+
+const options = {
+  limit: 1,
+  accept: ".xlsx",
+  action: "",
+  multiple: false,
+  listType: "text",
+  autoUpload: false,
+};
+
+const relatedRules = {
+  contest_name: {
+    value: "",
+    label: "竞赛名称",
+  },
+  contest_organizers: {
+    value: "",
+    label: "竞赛主办方",
+  },
+  contest_term: {
+    value: "",
+    label: "竞赛届数",
+  },
+  type: {
+    value: "",
+    label: "竞赛类型",
+  },
+  online_start: {
+    value: "",
+    label: "线上赛开始时间",
+  },
+  online_end: {
+    value: "",
+    label: "线上赛结束时间",
+  },
+  offline_start: {
+    value: "",
+    label: "线下赛开始时间",
+  },
+  offline_end: {
+    value: "",
+    label: "线下赛结束时间",
+  },
+  contest_start: {
+    value: "",
+    label: "竞赛开始时间",
+  },
+  contest_end: {
+    value: "",
+    label: "竞赛结束时间",
+  },
+};
+
+const relatedOptions = [
+  {
+    value: "0",
+    label: "竞赛名称",
+    disabled: false,
+  },
+  {
+    value: "1",
+    label: "竞赛主办方",
+    disabled: false,
+  },
+  {
+    value: "2",
+    label: "竞赛届数",
+    disabled: false,
+  },
+  {
+    value: "3",
+    label: "竞赛类型",
+    disabled: false,
+  },
+  {
+    value: "4",
+    label: "线上赛开始时间",
+    disabled: false,
+  },
+  {
+    value: "5",
+    label: "线上赛结束时间",
+    disabled: false,
+  },
+  {
+    value: "6",
+    label: "线下赛开始时间",
+    disabled: false,
+  },
+  {
+    value: "7",
+    label: "线下赛结束时间",
+    disabled: false,
+  },
+  {
+    value: "8",
+    label: "竞赛开始时间",
+    disabled: false,
+  },
+  {
+    value: "9",
+    label: "竞赛结束时间",
+    disabled: false,
+  },
+];
+
+const emit = defineEmits(["addContest"]);
+
+const resetCheckForm = () => {
+  if (!uploadFileRef) return;
+  uploadFileRef.value.handleExceed();
+};
+
+const confirm = async () => {
+  if (!uploadFileRef) return;
+  formClone.value = [];
+  const length = uploadFileRef.value.loadData.length;
+  if (length == 0) return ElMessage.error("请先上传文件！");
+  const flag = await uploadFileRef.value.confirm();
+  if (!flag) return ElMessage.error("请先选择表格关联项！");
+  ElMessage({
+    message: `正在上传数据中，请稍等...`,
+    type: "success",
+  });
+  setTimeout(() => {
+    uploadFileRef.value.loadData.forEach((ExcleForm) => {
+      ExcleForm.forEach((worksheet) => {
+        let context = [...worksheet];
+        context.shift();
+        context.forEach((item) => {
+          if (item.length != 0) {
+            formClone.value.push({
+              contest_name: item[relatedRules.contest_name.value],
+              contest_organizers: item[relatedRules.contest_organizers.value],
+              contest_term: item[relatedRules.contest_term.value],
+              type: item[relatedRules.type.value],
+              online_start: item[relatedRules.online_start.value],
+              online_end: item[relatedRules.online_end.value],
+              offline_start: item[relatedRules.offline_start.value],
+              offline_end: item[relatedRules.offline_end.value],
+              contest_start: item[relatedRules.contest_start.value],
+              contest_end: item[relatedRules.contest_end.value],
+            });
+          }
+        });
+      });
+    });
+    emit("addContest", formClone.value);
+  }, 3000);
+};
+
+defineExpose({ resetCheckForm, confirm, formClone });
+</script>
+
+<style scoped></style>

src/components/addNewData/contest/contestForm/multipleAdd.vue

@@ -0,0 +1,114 @@
+<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-if="checkNeed"
+        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" />
+      </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({
+  checkNeed: Boolean,
+  addData: Object,
+});
+
+const emit = defineEmits(["addContest"]);
+
+const initData = () => {
+  setTimeout(() => {
+    singleAddRef.value.forEach((item) => {});
+  }, 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("addContest", formClone.value);
+      singleAddRef.value.forEach((item) => {
+        item.resetCheckForm();
+      });
+      ElMessage({
+        message: `提交成功！`,
+        type: "success",
+      });
+    } else {
+      ElMessage.error("提交失败！");
+    }
+  }, 0);
+};
+
+defineExpose({ resetCheckForm, confirm, formClone });
+
+watch(checked, (value) => {
+  if (value) {
+    initData();
+  }
+});
+</script>
+
+<style scoped></style>

src/components/addNewData/contest/contestForm/singleAdd.vue

@@ -0,0 +1,227 @@
+<template>
+  <el-form
+    ref="ruleFormRef"
+    style="max-width: 600px"
+    :model="ruleForm"
+    :rules="rules"
+    label-width="auto"
+    size="default"
+    status-icon
+    class="mx-auto"
+  >
+    <el-form-item class="mx-1 font-bold" label="竞赛名称" prop="contest_name">
+      <el-input
+        clearable
+        placeholder="请输入竞赛名称"
+        v-model="ruleForm.contest_name"
+        @input="filter(ruleForm.contest_name, 'contest_name')"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="竞赛主办方" prop="contest_organizers">
+      <el-input
+        clearable
+        placeholder="请输入竞赛主办方"
+        v-model="ruleForm.contest_organizers"
+        @input="filter(ruleForm.contest_organizers, 'contest_organizers')"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="竞赛届数" prop="contest_term">
+      <el-input
+        clearable
+        placeholder="请输入竞赛届数"
+        v-model="ruleForm.contest_term"
+        @input="filter(ruleForm.contest_term, 'contest_term')"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="竞赛类型" prop="type">
+      <el-select
+        clearable
+        size="small"
+        placeholder="请选择竞赛类型"
+        autocomplete="off"
+        v-model="ruleForm.type"
+        style="width: 100%; font-size: 1rem"
+      >
+        <el-option
+          v-for="item in addData.typeOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+          class="text-center"
+          :style="item.style"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item label="线上赛起止时间">
+      <el-col :span="11">
+        <el-form-item prop="online_start">
+          <el-date-picker
+            v-model="ruleForm.online_start"
+            type="datetime"
+            placeholder="请选择线上赛开始时间"
+            style="width: 100%"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="2" class="text-center">
+        <span class="text-gray-500">-</span>
+      </el-col>
+      <el-col :span="11">
+        <el-form-item prop="online_end">
+          <el-date-picker
+            v-model="ruleForm.online_end"
+            type="datetime"
+            placeholder="请选择线上赛结束时间"
+            style="width: 100%"
+          />
+        </el-form-item>
+      </el-col>
+    </el-form-item>
+    <el-form-item label="线下赛起止时间">
+      <el-col :span="11">
+        <el-form-item prop="offline_start">
+          <el-date-picker
+            v-model="ruleForm.offline_start"
+            type="datetime"
+            placeholder="请选择线下赛开始时间"
+            style="width: 100%"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="2" class="text-center">
+        <span class="text-gray-500">-</span>
+      </el-col>
+      <el-col :span="11">
+        <el-form-item prop="offline_end">
+          <el-date-picker
+            v-model="ruleForm.offline_end"
+            type="datetime"
+            placeholder="请选择线下赛结束时间"
+            style="width: 100%"
+          />
+        </el-form-item>
+      </el-col>
+    </el-form-item>
+    <el-form-item label="竞赛起止时间">
+      <el-col :span="11">
+        <el-form-item prop="contest_start">
+          <el-date-picker
+            v-model="ruleForm.contest_start"
+            type="datetime"
+            placeholder="请选择竞赛开始时间"
+            style="width: 100%"
+          />
+        </el-form-item>
+      </el-col>
+      <el-col :span="2" class="text-center">
+        <span class="text-gray-500">-</span>
+      </el-col>
+      <el-col :span="11">
+        <el-form-item prop="contest_end">
+          <el-date-picker
+            v-model="ruleForm.contest_end"
+            type="datetime"
+            placeholder="请选择竞赛结束时间"
+            style="width: 100%"
+          />
+        </el-form-item>
+      </el-col>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import { ElMessage } from "element-plus";
+
+const props = defineProps({
+  addData: Object,
+});
+
+const ruleFormRef = ref(null);
+
+const ruleForm = reactive({
+  contest_name: "",
+  contest_organizers: "",
+  contest_term: "",
+  type: "",
+  online_start: "",
+  online_end: "",
+  offline_start: "",
+  offline_end: "",
+  contest_start: "",
+  contest_end: "",
+});
+
+const formClone = ref({});
+
+const rules = reactive({
+  contest_name: [{ required: true, message: "请输入竞赛名称", trigger: "blur" }],
+  contest_organizers: [{ required: true, message: "请输入竞赛主办方", trigger: "blur" }],
+  contest_term: [{ required: true, message: "请输入竞赛届数", trigger: "blur" }],
+  type: [{ required: true, message: "请选择竞赛类型", trigger: "change" }],
+  online_start: [
+    { type: "date", required: true, message: "线上赛开始时间", trigger: "change" },
+  ],
+  online_end: [
+    { type: "date", required: true, message: "线上赛结束时间", trigger: "change" },
+  ],
+  offline_start: [
+    { type: "date", required: true, message: "线下赛开始时间", trigger: "change" },
+  ],
+  offline_end: [
+    { type: "date", required: true, message: "线下赛结束时间", trigger: "change" },
+  ],
+  contest_start: [
+    { type: "date", required: true, message: "竞赛开始时间", trigger: "change" },
+  ],
+  contest_end: [
+    { type: "date", required: true, message: "竞赛结束时间", trigger: "change" },
+  ],
+});
+
+const emit = defineEmits(["addContest"]);
+
+const filter = (value, label) => {
+  if (/[=\s"'+-]/.test(value)) {
+    if (ruleForm[label]) {
+      ruleForm[label] = value.replace(/[=\s"'+-]/g, "");
+    }
+  }
+};
+
+const resetCheckForm = () => {
+  if (!ruleFormRef) return;
+  ruleFormRef.value.resetFields();
+};
+
+const confirm = async () => {
+  if (!ruleFormRef) return;
+  await ruleFormRef.value.validate((valid) => {
+    if (valid) {
+      formClone.value = { ...ruleForm };
+      emit("addContest", [formClone.value]);
+      ruleFormRef.value.resetFields();
+      ElMessage({
+        message: `提交成功！`,
+        type: "success",
+      });
+    } else {
+      ElMessage.error("提交失败！");
+    }
+  });
+};
+
+const validate = () => {
+  if (!ruleFormRef) return Promise.resolve(false);
+  return new Promise((resolve) => {
+    ruleFormRef.value.validate((valid) => {
+      resolve(valid);
+    });
+  });
+};
+
+defineExpose({ resetCheckForm, confirm, validate, ruleForm, formClone });
+</script>
+
+<style scoped></style>

src/components/addNewData/insidersForm/excleAdd.vue

@@ -0,0 +1,112 @@
+<template>
+  <UploadFile
+    ref="uploadFileRef"
+    :options="options"
+    :relatedRules="relatedRules"
+    :relatedOptions="relatedOptions"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { ElMessage } from "element-plus";
+
+import UploadFile from "../../operate/uploadFile.vue";
+
+const uploadFileRef = ref(null);
+const formClone = ref([]);
+
+const options = {
+  limit: 1,
+  accept: ".xlsx",
+  action: "",
+  multiple: false,
+  listType: "text",
+  autoUpload: false,
+};
+
+const relatedRules = {
+  role: {
+    value: "",
+    label: "账号角色",
+  },
+  name: {
+    value: "",
+    label: "员工姓名",
+  },
+  department: {
+    value: "",
+    label: "所属部门",
+  },
+  change: {
+    value: "",
+    label: "账号信息变更描述",
+  },
+};
+
+const relatedOptions = [
+  {
+    value: "0",
+    label: "账号角色",
+    disabled: false,
+  },
+  {
+    value: "1",
+    label: "员工姓名",
+    disabled: false,
+  },
+  {
+    value: "2",
+    label: "所属部门",
+    disabled: false,
+  },
+  {
+    value: "3",
+    label: "账号信息变更描述",
+    disabled: false,
+  },
+];
+
+const emit = defineEmits(["addInsiders"]);
+
+const resetCheckForm = () => {
+  if (!uploadFileRef) return;
+  uploadFileRef.value.handleExceed();
+};
+
+const confirm = async () => {
+  if (!uploadFileRef) return;
+  formClone.value = [];
+  const length = uploadFileRef.value.loadData.length;
+  if (length == 0) return ElMessage.error("请先上传文件！");
+  const flag = await uploadFileRef.value.confirm();
+  if (!flag) return ElMessage.error("请先选择表格关联项！");
+  ElMessage({
+    message: `正在上传数据中，请稍等...`,
+    type: "success",
+  });
+  setTimeout(() => {
+    uploadFileRef.value.loadData.forEach((ExcleForm) => {
+      ExcleForm.forEach((worksheet) => {
+        let context = [...worksheet];
+        context.shift();
+        context.forEach((item) => {
+          if (item.length != 0) {
+            formClone.value.push({
+              role: item[relatedRules.role.value],
+              name: item[relatedRules.name.value],
+              department: item[relatedRules.department.value],
+              change: item[relatedRules.change.value],
+            });
+          }
+        });
+      });
+    });
+    emit("addInsiders", formClone.value);
+  }, 3000);
+};
+
+defineExpose({ resetCheckForm, confirm, formClone });
+</script>
+
+<style scoped></style>

src/components/addNewData/insidersForm/insidersForm.vue

@@ -0,0 +1,166 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :show-close="false"
+    style="width: 80%"
+    center
+    align-center
+    :before-close="resetCheckForm"
+  >
+    <template #header="{ titleId, titleClass }">
+      <div
+        style="font-size: 2rem"
+        class="w-full font-bold"
+        :id="titleId"
+        :class="titleClass"
+      >
+        {{ title }}
+      </div>
+      <div
+        @click="resetCheckForm"
+        class="bg-gray-400 hover:bg-red-600 text-3xl absolute top-0 right-0 cursor-pointer flex justify-center items-center"
+      >
+        <el-icon>
+          <CloseBold />
+        </el-icon>
+      </div>
+    </template>
+    <FormTools @showTools="showTools" :dialogObj="insidersMsgActive" />
+    <SingleAdd
+      ref="singleAddRef"
+      v-if="dialogSingleVisible"
+      :addData="addData"
+      @addInsiders="addInsiders"
+    />
+    <MultipleAdd
+      ref="multipleAddRef"
+      v-if="dialogMultipleVisible"
+      :addData="addData"
+      :checkNeed="true"
+      @addInsiders="addInsiders"
+    />
+    <ExcleAdd ref="excleAddRef" v-if="dialogExcleVisible" @addInsiders="addInsiders" />
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button style="font-weight: bold" @click="resetCheckForm"> 取消 </el-button>
+        <el-button style="font-weight: bold" type="primary" @click="confirm">
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { CloseBold } from "@element-plus/icons-vue";
+import { ElMessage } from "element-plus";
+
+import FormTools from "../../operate/formTools.vue";
+import SingleAdd from "./singleAdd.vue";
+import MultipleAdd from "./multipleAdd.vue";
+import ExcleAdd from "./excleAdd.vue";
+
+import insidersActiveStore from "../../../stores/insiders";
+
+import $http from "../../../api/index";
+import $url from "../../../api/url";
+
+import { encrypt } from "../../../utils/aes";
+
+const insidersMsgActive = insidersActiveStore();
+
+const dialogVisible = ref(false);
+const singleAddRef = ref(null);
+const multipleAddRef = ref(null);
+const excleAddRef = ref(null);
+const dialogSingleVisible = ref(true);
+const dialogMultipleVisible = ref(false);
+const dialogExcleVisible = ref(false);
+
+const props = defineProps({
+  title: String,
+  addData: Object,
+});
+
+const emit = defineEmits(["reloadData"]);
+
+const showTools = (operateType) => {
+  switch (operateType) {
+    case "single":
+      dialogSingleVisible.value = true;
+      dialogMultipleVisible.value = false;
+      dialogExcleVisible.value = false;
+      insidersMsgActive.dialogSingleVisible = dialogSingleVisible.value;
+      insidersMsgActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      insidersMsgActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    case "multiple":
+      dialogSingleVisible.value = false;
+      dialogMultipleVisible.value = true;
+      dialogExcleVisible.value = false;
+      insidersMsgActive.dialogSingleVisible = dialogSingleVisible.value;
+      insidersMsgActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      insidersMsgActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    case "excle":
+      dialogSingleVisible.value = false;
+      dialogMultipleVisible.value = false;
+      dialogExcleVisible.value = true;
+      insidersMsgActive.dialogSingleVisible = dialogSingleVisible.value;
+      insidersMsgActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      insidersMsgActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    default:
+      break;
+  }
+};
+
+const resetCheckForm = () => {
+  if (dialogSingleVisible.value) {
+    singleAddRef.value.resetCheckForm();
+  } else if (dialogMultipleVisible.value) {
+    multipleAddRef.value.resetCheckForm();
+  } else if (dialogExcleVisible.value) {
+    excleAddRef.value.resetCheckForm();
+  }
+  dialogVisible.value = false;
+};
+
+const confirm = () => {
+  if (dialogSingleVisible.value) {
+    singleAddRef.value.confirm();
+  } else if (dialogMultipleVisible.value) {
+    multipleAddRef.value.confirm();
+  } else if (dialogExcleVisible.value) {
+    excleAddRef.value.confirm();
+  }
+};
+
+const addInsiders = (requestMsg) => {
+  requestMsg.forEach((element) => {
+    element.role = encrypt(String(element.role));
+    element.name = encrypt(String(element.name));
+    element.department =
+      element.department == "" ? "" : encrypt(String(element.department));
+    element.change = encrypt(String(element.change));
+  });
+  const data = { requestMsg };
+  $http.post($url.addInsiders, data).then((res) => {
+    if (res.data.code === 200) {
+      resetCheckForm();
+      ElMessage({
+        message: "新增公司员工成功！",
+        type: "success",
+      });
+      emit("reloadData");
+    } else {
+      ElMessage.error("新增公司员工失败！");
+    }
+  });
+};
+
+defineExpose({ dialogVisible });
+</script>
+
+<style scoped></style>

src/components/addNewData/insidersForm/multipleAdd.vue

@@ -0,0 +1,116 @@
+<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-if="checkNeed"
+        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" />
+      </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,
+});
+
+const emit = defineEmits(["addInsiders"]);
+
+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("addInsiders", formClone.value);
+      singleAddRef.value.forEach((item) => {
+        item.resetCheckForm();
+      });
+      ElMessage({
+        message: `提交成功！`,
+        type: "success",
+      });
+    } else {
+      ElMessage.error("提交失败！");
+    }
+  }, 0);
+};
+
+defineExpose({ resetCheckForm, confirm, formClone });
+
+watch(checked, (value) => {
+  if (value) {
+    initData();
+  }
+});
+</script>
+
+<style scoped></style>

src/components/addNewData/insidersForm/singleAdd.vue

@@ -0,0 +1,127 @@
+<template>
+  <el-form
+    ref="ruleFormRef"
+    style="max-width: 600px"
+    :model="ruleForm"
+    :rules="rules"
+    label-width="auto"
+    size="default"
+    status-icon
+    class="mx-auto"
+  >
+    <el-form-item class="mx-1 font-bold" label="账号角色" prop="role">
+      <el-select
+        clearable
+        size="small"
+        placeholder="请选择账号角色"
+        autocomplete="off"
+        v-model="ruleForm.role"
+        style="width: 100%; font-size: 1rem"
+      >
+        <el-option
+          v-for="item in addData.roleOptions"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+          class="text-center"
+          :style="item.style"
+        />
+      </el-select>
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="员工姓名" prop="name">
+      <el-input
+        clearable
+        placeholder="请输入员工姓名"
+        v-model="ruleForm.name"
+        @input="filter(ruleForm.name, 'name')"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="员工所属部门" prop="department">
+      <el-input
+        clearable
+        placeholder="请输入员工所属部门"
+        v-model="ruleForm.department"
+        @input="filter(ruleForm.department, 'department')"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="账号信息变更描述" prop="change">
+      <el-input
+        clearable
+        placeholder="请输入账号信息变更描述"
+        v-model="ruleForm.change"
+        @input="filter(ruleForm.change, 'change')"
+      />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import { ElMessage } from "element-plus";
+
+const ruleFormRef = ref(null);
+
+const ruleForm = reactive({
+  role: "",
+  name: "",
+  department: "",
+  change: "",
+});
+
+const props = defineProps({
+  addData: Object,
+});
+
+const formClone = ref({});
+
+const rules = reactive({
+  role: [{ required: true, message: "请选择账号角色", trigger: "blur" }],
+  name: [{ required: true, message: "请输入员工姓名", trigger: "blur" }],
+  change: [{ required: true, message: "请输入账号信息变更描述", trigger: "blur" }],
+});
+
+const emit = defineEmits(["addInsiders"]);
+
+const filter = (value, label) => {
+  if (/[=\s"'+-]/.test(value)) {
+    if (ruleForm[label]) {
+      ruleForm[label] = value.replace(/[=\s"'+-]/g, "");
+    }
+  }
+};
+
+const resetCheckForm = () => {
+  if (!ruleFormRef) return;
+  ruleFormRef.value.resetFields();
+};
+
+const confirm = async () => {
+  if (!ruleFormRef) return;
+  await ruleFormRef.value.validate((valid) => {
+    if (valid) {
+      formClone.value = { ...ruleForm };
+      emit("addInsiders", [formClone.value]);
+      ruleFormRef.value.resetFields();
+      ElMessage({
+        message: `提交成功！`,
+        type: "success",
+      });
+    } else {
+      ElMessage.error("提交失败！");
+    }
+  });
+};
+
+const validate = () => {
+  if (!ruleFormRef) return Promise.resolve(false);
+  return new Promise((resolve) => {
+    ruleFormRef.value.validate((valid) => {
+      resolve(valid);
+    });
+  });
+};
+
+defineExpose({ resetCheckForm, confirm, validate, ruleForm, formClone });
+</script>
+
+<style scoped></style>

src/components/addNewData/organizationForm/excleAdd.vue

@@ -0,0 +1,142 @@
+<template>
+  <UploadFile
+    ref="uploadFileRef"
+    :options="options"
+    :relatedRules="relatedRules"
+    :relatedOptions="relatedOptions"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { ElMessage } from "element-plus";
+
+import UploadFile from "../../operate/uploadFile.vue";
+
+const uploadFileRef = ref(null);
+const formClone = ref([]);
+
+const options = {
+  limit: 1,
+  accept: ".xlsx",
+  action: "",
+  multiple: false,
+  listType: "text",
+  autoUpload: false,
+};
+
+const relatedRules = {
+  organization_name: {
+    value: "",
+    label: "单位名称",
+  },
+  address: {
+    value: "",
+    label: "通信地址",
+  },
+  liaison_name: {
+    value: "",
+    label: "单位联系人姓名",
+  },
+  phone: {
+    value: "",
+    label: "联系人手机号码",
+  },
+  email: {
+    value: "",
+    label: "单位电子邮箱地址",
+  },
+  other_information: {
+    value: "",
+    label: "其他信息",
+  },
+  post_code: {
+    value: "",
+    label: "邮政编码",
+  },
+};
+
+const relatedOptions = [
+  {
+    value: "0",
+    label: "单位名称",
+    disabled: false,
+  },
+  {
+    value: "1",
+    label: "通信地址",
+    disabled: false,
+  },
+  {
+    value: "2",
+    label: "单位联系人姓名",
+    disabled: false,
+  },
+  {
+    value: "3",
+    label: "联系人手机号码",
+    disabled: false,
+  },
+  {
+    value: "4",
+    label: "单位电子邮箱地址",
+    disabled: false,
+  },
+  {
+    value: "5",
+    label: "其他信息",
+    disabled: false,
+  },
+  {
+    value: "6",
+    label: "邮政编码",
+    disabled: false,
+  },
+];
+
+const emit = defineEmits(["addOrganization"]);
+
+const resetCheckForm = () => {
+  if (!uploadFileRef) return;
+  uploadFileRef.value.handleExceed();
+};
+
+const confirm = async () => {
+  if (!uploadFileRef) return;
+  formClone.value = [];
+  const length = uploadFileRef.value.loadData.length;
+  if (length == 0) return ElMessage.error("请先上传文件！");
+  const flag = await uploadFileRef.value.confirm();
+  if (!flag) return ElMessage.error("请先选择表格关联项！");
+  ElMessage({
+    message: `正在上传数据中，请稍等...`,
+    type: "success",
+  });
+  setTimeout(() => {
+    uploadFileRef.value.loadData.forEach((ExcleForm) => {
+      ExcleForm.forEach((worksheet) => {
+        let context = [...worksheet];
+        context.shift();
+        context.forEach((item) => {
+          if (item.length != 0) {
+            formClone.value.push({
+              organization_name: item[relatedRules.organization_name.value],
+              address: item[relatedRules.address.value],
+              liaison_name: item[relatedRules.liaison_name.value],
+              phone: item[relatedRules.phone.value],
+              email: item[relatedRules.email.value],
+              other_information: item[relatedRules.other_information.value],
+              post_code: item[relatedRules.post_code.value],
+            });
+          }
+        });
+      });
+    });
+    emit("addOrganization", formClone.value);
+  }, 3000);
+};
+
+defineExpose({ resetCheckForm, confirm, formClone });
+</script>
+
+<style scoped></style>

src/components/addNewData/organizationForm/multipleAdd.vue

@@ -0,0 +1,111 @@
+<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-if="checkNeed" 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"
+      />
+    </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({
+  checkNeed: Boolean
+});
+
+const emit = defineEmits(["addOrganization"]);
+
+const initData = () => {
+  setTimeout(() => {
+    singleAddRef.value.forEach((item) => {
+    });
+  }, 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("addOrganization", formClone.value);
+      singleAddRef.value.forEach((item) => {
+        item.resetCheckForm();
+      });
+      ElMessage({
+        message: `提交成功！`,
+        type: "success",
+      });
+    } else {
+      ElMessage.error("提交失败！");
+    }
+  }, 0);
+};
+
+defineExpose({ resetCheckForm, confirm, formClone });
+
+watch(checked, (value) => {
+  if(value) {
+    initData();
+  }
+});
+</script>
+
+<style scoped></style>

src/components/addNewData/organizationForm/organizationForm.vue

@@ -0,0 +1,171 @@
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :show-close="false"
+    style="width: 80%"
+    center
+    align-center
+    :before-close="resetCheckForm"
+  >
+    <template #header="{ titleId, titleClass }">
+      <div
+        style="font-size: 2rem"
+        class="w-full font-bold"
+        :id="titleId"
+        :class="titleClass"
+      >
+        {{ title }}
+      </div>
+      <div
+        @click="resetCheckForm"
+        class="bg-gray-400 hover:bg-red-600 text-3xl absolute top-0 right-0 cursor-pointer flex justify-center items-center"
+      >
+        <el-icon>
+          <CloseBold />
+        </el-icon>
+      </div>
+    </template>
+    <FormTools @showTools="showTools" :dialogObj="organizationMsgActive" />
+    <SingleAdd
+      ref="singleAddRef"
+      v-if="dialogSingleVisible"
+      @addOrganization="addOrganization"
+    />
+    <MultipleAdd
+      ref="multipleAddRef"
+      v-if="dialogMultipleVisible"
+      :checkNeed="false"
+      @addOrganization="addOrganization"
+    />
+    <ExcleAdd
+      ref="excleAddRef"
+      v-if="dialogExcleVisible"
+      @addOrganization="addOrganization"
+    />
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button style="font-weight: bold" @click="resetCheckForm"> 取消 </el-button>
+        <el-button style="font-weight: bold" type="primary" @click="confirm">
+          确定
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { CloseBold } from "@element-plus/icons-vue";
+import { ElMessage } from "element-plus";
+
+import FormTools from "../../operate/formTools.vue";
+import SingleAdd from "./singleAdd.vue";
+import MultipleAdd from "./multipleAdd.vue";
+import ExcleAdd from "./excleAdd.vue";
+
+import organizationActiveStore from "../../../stores/organization";
+
+import $http from "../../../api/index";
+import $url from "../../../api/url";
+
+import { encrypt } from "../../../utils/aes";
+
+const organizationMsgActive = organizationActiveStore();
+
+const dialogVisible = ref(false);
+const singleAddRef = ref(null);
+const multipleAddRef = ref(null);
+const excleAddRef = ref(null);
+const dialogSingleVisible = ref(true);
+const dialogMultipleVisible = ref(false);
+const dialogExcleVisible = ref(false);
+
+const props = defineProps({
+  title: String,
+});
+
+const emit = defineEmits(["reloadData"]);
+
+const showTools = (operateType) => {
+  switch (operateType) {
+    case "single":
+      dialogSingleVisible.value = true;
+      dialogMultipleVisible.value = false;
+      dialogExcleVisible.value = false;
+      organizationMsgActive.dialogSingleVisible = dialogSingleVisible.value;
+      organizationMsgActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      organizationMsgActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    case "multiple":
+      dialogSingleVisible.value = false;
+      dialogMultipleVisible.value = true;
+      dialogExcleVisible.value = false;
+      organizationMsgActive.dialogSingleVisible = dialogSingleVisible.value;
+      organizationMsgActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      organizationMsgActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    case "excle":
+      dialogSingleVisible.value = false;
+      dialogMultipleVisible.value = false;
+      dialogExcleVisible.value = true;
+      organizationMsgActive.dialogSingleVisible = dialogSingleVisible.value;
+      organizationMsgActive.dialogMultipleVisible = dialogMultipleVisible.value;
+      organizationMsgActive.dialogExcleVisible = dialogExcleVisible.value;
+      break;
+    default:
+      break;
+  }
+};
+
+const resetCheckForm = () => {
+  if (dialogSingleVisible.value) {
+    singleAddRef.value.resetCheckForm();
+  } else if (dialogMultipleVisible.value) {
+    multipleAddRef.value.resetCheckForm();
+  } else if (dialogExcleVisible.value) {
+    excleAddRef.value.resetCheckForm();
+  }
+  dialogVisible.value = false;
+};
+
+const confirm = () => {
+  if (dialogSingleVisible.value) {
+    singleAddRef.value.confirm();
+  } else if (dialogMultipleVisible.value) {
+    multipleAddRef.value.confirm();
+  } else if (dialogExcleVisible.value) {
+    excleAddRef.value.confirm();
+  }
+};
+
+const addOrganization = (requestMsg) => {
+  requestMsg.forEach((element) => {
+    element.organization_name = encrypt(String(element.organization_name));
+    element.address = element.address == "" ? "" : encrypt(String(element.address));
+    element.liaison_name =
+      element.liaison_name == "" ? "" : encrypt(String(element.liaison_name));
+    element.phone = element.phone == "" ? "" : encrypt(String(element.phone));
+    element.email = element.email == "" ? "" : encrypt(String(element.email));
+    element.other_information =
+      element.other_information == "" ? "" : encrypt(String(element.other_information));
+    element.post_code = element.post_code == "" ? "" : encrypt(String(element.post_code));
+  });
+  const data = { requestMsg };
+  $http.post($url.addOrganization, data).then((res) => {
+    if (res.data.code === 200) {
+      resetCheckForm();
+      ElMessage({
+        message: "新增B端单位成功！",
+        type: "success",
+      });
+      emit("reloadData");
+    } else {
+      ElMessage.error("新增B端单位失败！");
+    }
+  });
+};
+
+defineExpose({ dialogVisible });
+</script>
+
+<style scoped></style>

src/components/addNewData/organizationForm/singleAdd.vue

@@ -0,0 +1,137 @@
+<template>
+  <el-form
+    ref="ruleFormRef"
+    style="max-width: 600px"
+    :model="ruleForm"
+    :rules="rules"
+    label-width="auto"
+    size="default"
+    status-icon
+    class="mx-auto"
+  >
+    <el-form-item class="mx-1 font-bold" label="单位名称" prop="organization_name">
+      <el-input
+        clearable
+        placeholder="请输入单位名称"
+        v-model="ruleForm.organization_name"
+        @input="filter(ruleForm.organization_name, 'organization_name')"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="通信地址" prop="address">
+      <el-input
+        clearable
+        placeholder="请输入通信地址"
+        v-model="ruleForm.address"
+        @input="filter(ruleForm.address, 'address')"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="单位联系人姓名" prop="liaison_name">
+      <el-input
+        clearable
+        placeholder="请输入单位联系人姓名"
+        v-model="ruleForm.liaison_name"
+        @input="filter(ruleForm.liaison_name, 'liaison_name')"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="联系人电话号码" prop="phone">
+      <el-input
+        clearable
+        placeholder="请输入联系人电话号码"
+        v-model="ruleForm.phone"
+        @input="filter(ruleForm.phone, 'phone')"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="单位电子邮箱" prop="email">
+      <el-input
+        clearable
+        placeholder="请输入单位电子邮箱"
+        v-model="ruleForm.email"
+        @input="filter(ruleForm.email, 'email')"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="其他信息" prop="other_information">
+      <el-input
+        clearable
+        placeholder="请输入其他信息"
+        v-model="ruleForm.other_information"
+        @input="filter(ruleForm.other_information, 'other_information')"
+      />
+    </el-form-item>
+    <el-form-item class="mx-1 font-bold" label="邮政编码" prop="post_code">
+      <el-input
+        clearable
+        placeholder="请输入邮政编码"
+        v-model="ruleForm.post_code"
+        @input="filter(ruleForm.post_code, 'post_code')"
+      />
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue";
+import { ElMessage } from "element-plus";
+
+const ruleFormRef = ref(null);
+
+const ruleForm = reactive({
+  organization_name: "",
+  address: "",
+  liaison_name: "",
+  phone: "",
+  email: "",
+  other_information: "",
+  post_code: "",
+});
+
+const formClone = ref({});
+
+const rules = reactive({
+  organization_name: [{ required: true, message: "请输入单位名称", trigger: "blur" }],
+});
+
+const emit = defineEmits(["addOrganization"]);
+
+const filter = (value, label) => {
+  if (/[=\s"'+-]/.test(value)) {
+    if (ruleForm[label]) {
+      ruleForm[label] = value.replace(/[=\s"'+-]/g, "");
+    }
+  }
+};
+
+const resetCheckForm = () => {
+  if (!ruleFormRef) return;
+  ruleFormRef.value.resetFields();
+};
+
+const confirm = async () => {
+  if (!ruleFormRef) return;
+  await ruleFormRef.value.validate((valid) => {
+    if (valid) {
+      formClone.value = { ...ruleForm };
+      emit("addOrganization", [formClone.value]);
+      ruleFormRef.value.resetFields();
+      ElMessage({
+        message: `提交成功！`,
+        type: "success",
+      });
+    } else {
+      ElMessage.error("提交失败！");
+    }
+  });
+};
+
+const validate = () => {
+  if (!ruleFormRef) return Promise.resolve(false);
+  return new Promise((resolve) => {
+    ruleFormRef.value.validate((valid) => {
+      resolve(valid);
+    });
+  });
+};
+
+defineExpose({ resetCheckForm, confirm, validate, ruleForm, formClone });
+</script>
+
+<style scoped></style>