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

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>