feat: 基础字段管理

src/modules/base/api.js

@@ -198,6 +198,24 @@ export const updateSystemSetting = (datas, isSystem) => {
   return $post("/api/admin/sys/setting/save", datas);
 };
 
+// field-manage
+export const fieldListQuery = () => {
+  return $postParam("/api/admin/basic/exam/page", {});
+};
+export const saveFieldList = (datas) => {
+  return $post("/api/admin/basic/exam/page", datas);
+};
+
+// file-type-manage
+export const fileTypeListQuery = (datas) => {
+  return $postParam("/api/admin/basic/exam/page", datas);
+};
+export const saveFileType = (datas) => {
+  return $post("/api/admin/basic/exam/page", datas);
+};
+export const deleteFileType = (id) => {
+  return $postParam("/api/admin/basic/semester/delete", { id });
+};
 // common
 export const uploadFile = (datas) => {
   return $post("/api/admin/common/file/upload", datas);

src/modules/base/components/ModifyField.vue

@@ -0,0 +1,100 @@
+<template>
+  <el-dialog
+    class="modify-field"
+    :visible.sync="modalIsShow"
+    title="新增扩展字段"
+    top="10vh"
+    width="448px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    @opened="visibleChange"
+  >
+    <el-form
+      ref="modalFormComp"
+      :model="modalForm"
+      :rules="rules"
+      label-width="110px"
+    >
+      <el-form-item prop="name" label="字段名称：">
+        <el-input
+          v-model.trim="modalForm.name"
+          placeholder="请输入字段名称"
+          clearable
+        ></el-input>
+      </el-form-item>
+      <el-form-item prop="code" label="字段变量名：">
+        <el-input
+          v-model.trim="modalForm.code"
+          placeholder="请输入字段变量名"
+          clearable
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button type="primary" @click="submit">确认</el-button>
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+const initModalForm = {
+  name: "",
+  code: "",
+  enable: false,
+};
+
+export default {
+  name: "modify-field",
+  data() {
+    return {
+      modalIsShow: false,
+      modalForm: {},
+      rules: {
+        name: [
+          {
+            required: true,
+            message: "请输入字段名称",
+            trigger: "change",
+          },
+          {
+            max: 20,
+            message: "字段名称不能超过20",
+            trigger: "change",
+          },
+        ],
+        code: [
+          {
+            required: true,
+            pattern: /^[a-zA-Z]{3,30}$/,
+            message: "字段变量名只能由字母组成，长度在3-30之间",
+            trigger: "change",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    visibleChange() {
+      this.modalForm = { ...initModalForm };
+      this.$nextTick(() => {
+        this.$refs.modalFormComp.clearValidate();
+      });
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    async submit() {
+      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
+      if (!valid) return;
+
+      this.$emit("confirm", this.modalForm);
+      this.cancel();
+    },
+  },
+};
+</script>

src/modules/base/components/ModifyFileType.vue

@@ -0,0 +1,113 @@
+<template>
+  <el-dialog
+    class="modify-semester"
+    :visible.sync="modalIsShow"
+    :title="title"
+    top="10vh"
+    width="700px"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    append-to-body
+    @open="visibleChange"
+  >
+    <el-form
+      ref="modalFormComp"
+      :model="modalForm"
+      :rules="rules"
+      label-width="100px"
+    >
+      <el-form-item prop="evaluation" label="类型名称：">
+        <el-input
+          v-model.trim="modalForm.evaluation"
+          placeholder="请输入类型名称"
+          clearable
+        ></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer">
+      <el-button type="primary" :disabled="isSubmit" @click="submit"
+        >确认</el-button
+      >
+      <el-button @click="cancel">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { saveFileType } from "../api";
+
+const initModalForm = {
+  id: null,
+  name: "",
+  type: "CUSTOM",
+};
+
+export default {
+  name: "modify-file-type",
+  props: {
+    instance: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+  },
+  computed: {
+    isEdit() {
+      return !!this.instance.id;
+    },
+    title() {
+      return (this.isEdit ? "编辑" : "新增") + "文件类型";
+    },
+  },
+  data() {
+    return {
+      modalIsShow: false,
+      isSubmit: false,
+      modalForm: { ...initModalForm },
+      rules: {
+        evaluation: [
+          {
+            required: true,
+            message: "请输入类型名称",
+            trigger: "change",
+          },
+          {
+            message: "类型名称不能超过30个字",
+            max: 30,
+            trigger: "change",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    initData(val) {
+      this.modalForm = this.$objAssign(initModalForm, val);
+    },
+    visibleChange() {
+      this.initData(this.instance);
+    },
+    cancel() {
+      this.modalIsShow = false;
+    },
+    open() {
+      this.modalIsShow = true;
+    },
+    async submit() {
+      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
+      if (!valid) return;
+
+      if (this.isSubmit) return;
+      this.isSubmit = true;
+      const res = await saveFileType(this.modalForm).catch(() => {});
+      this.isSubmit = false;
+
+      if (!res) return;
+      this.$message.success(this.title + "成功！");
+      this.$emit("modified");
+      this.cancel();
+    },
+  },
+};
+</script>

src/modules/base/views/FieldManage.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="field-manage part-box part-box-pad">
+    <h4 class="part-box-tips">考生字段管理</h4>
+    <el-form ref="modalFormComp" label-width="100px">
+      <el-form-item label="基础字段：" required>
+        <el-checkbox
+          v-for="field in modalForm.requiredFields"
+          :key="field.code"
+          v-model="field.enable"
+          :disabled="field.disabled"
+          >{{ field.name }}</el-checkbox
+        >
+      </el-form-item>
+      <el-form-item label="扩展字段：">
+        <div class="part-box part-box-pad part-box-border">
+          <div class="label-edit">
+            <div
+              v-for="field in modalForm.extendFields"
+              :key="field.code"
+              class="label-item"
+            >
+              <el-checkbox
+                v-model="field.enable"
+                class="label-item-content"
+                @change="checkRuleChange"
+                >{{ field.name }}</el-checkbox
+              >
+              <i
+                class="label-item-delete el-icon-error"
+                @click="deleteField(field)"
+              ></i>
+            </div>
+            <div class="label-add" @click="toAddField">
+              <i class="el-icon-plus"></i><i>添加</i>
+            </div>
+          </div>
+        </div>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          :disabled="isSubmit"
+          style="width: 140px"
+          @click="submit"
+          >保存</el-button
+        >
+        <span v-if="ruleChanged" class="tips-info tips-error">（有修改）</span>
+      </el-form-item>
+    </el-form>
+
+    <!-- ModifyField -->
+    <modify-field ref="ModifyField" @confirm="addField"></modify-field>
+  </div>
+</template>
+
+<script>
+import ModifyField from "../components/ModifyField";
+import { fieldListQuery, saveFieldList } from "../api";
+
+const initModalForm = {
+  id: null,
+  requiredFields: [],
+  extendFields: [],
+};
+
+export default {
+  name: "field-manage",
+  components: { ModifyField },
+  data() {
+    return {
+      modalForm: { ...initModalForm },
+      isSubmit: false,
+      examRule: {},
+      ruleChanged: false,
+      prevModalFrom: "",
+    };
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    async getData() {
+      const res = await fieldListQuery();
+      const field = res || { ...initModalForm };
+      this.modalForm.requiredFields = JSON.parse(field.requiredFields);
+      if (this.modalForm.extendFields)
+        this.modalForm.extendFields = JSON.parse(field.extendFields);
+      this.modalForm.id = field.id;
+
+      this.prevModalFrom = JSON.stringify(this.modalForm);
+    },
+    checkRuleChange() {
+      this.ruleChanged = this.prevModalFrom !== JSON.stringify(this.modalForm);
+    },
+    toAddField() {
+      this.$refs.ModifyField.open();
+    },
+    addField(field) {
+      this.modalForm.extendFields.push({ ...field });
+      this.checkRuleChange();
+    },
+    deleteField(field) {
+      const index = this.modalForm.extendFields.findIndex(
+        (item) => item.code === field.code
+      );
+      if (index !== -1) this.modalForm.extendFields.splice(index, 1);
+      this.checkRuleChange();
+    },
+    async submit() {
+      const valid = await this.$refs.modalFormComp.validate().catch(() => {});
+      if (!valid) return;
+
+      if (this.isSubmit) return;
+      this.isSubmit = true;
+      let datas = {
+        id: this.modalForm.id,
+        requiredFields: JSON.stringify(datas.requiredFields),
+        extendFields: JSON.stringify(datas.extendFields),
+      };
+      const data = await saveFieldList(datas).catch(() => {});
+      this.isSubmit = false;
+      if (!data) return;
+
+      this.modalForm.id = data;
+      this.prevModalFrom = JSON.stringify(this.modalForm);
+      this.checkRuleChange();
+      this.$message.success("保存成功！");
+    },
+  },
+};
+</script>

src/modules/base/views/FileTypeManage.vue

@@ -0,0 +1,103 @@
+<template>
+  <div>
+    <div class="part-box part-box-pad box-justify">
+      <p></p>
+      <div>
+        <el-button type="primary" @click="toAdd">新增文件类型</el-button>
+      </div>
+    </div>
+    <div class="part-box part-box-pad">
+      <el-table :data="dataList">
+        <el-table-column type="index" label="序号" width="70"></el-table-column>
+        <el-table-column prop="name" label="其他文件类型"></el-table-column>
+        <el-table-column class-name="action-column" label="操作" width="100px">
+          <template slot-scope="scope">
+            <el-button
+              v-if="scope.row.type === 'CUSTOM'"
+              class="btn-danger"
+              type="text"
+              @click="toDelete(scope.row)"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="part-page">
+        <el-pagination
+          background
+          layout="total,prev, pager, next"
+          :current-page="current"
+          :total="total"
+          :page-size="size"
+          @current-change="toPage"
+        >
+        </el-pagination>
+      </div>
+    </div>
+
+    <!-- ModifyFileType -->
+    <modify-file-type
+      ref="ModifyFileType"
+      :instance="curRow"
+      @modified="getList"
+    ></modify-file-type>
+  </div>
+</template>
+
+<script>
+import { fileTypeListQuery, deleteFileType } from "../api";
+import ModifyFileType from "../components/ModifyFileType.vue";
+
+export default {
+  name: "file-type-manage",
+  components: { ModifyFileType },
+  data() {
+    return {
+      size: this.GLOBAL.pageSize,
+      current: 1,
+      total: 0,
+      dataList: [],
+      curRow: {},
+    };
+  },
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    async getList() {
+      const data = await fileTypeListQuery({
+        pageNumber: this.current,
+        pageSize: this.size,
+      });
+      this.dataList = data.records;
+      this.total = data.total;
+    },
+    toPage(page) {
+      this.current = page;
+      this.getList();
+    },
+    toAdd() {
+      this.curRow = {};
+      this.$refs.ModifyFileType.open();
+    },
+    toEdit(row) {
+      this.curRow = row;
+      this.$refs.ModifyFileType.open();
+    },
+    async toDelete(row) {
+      const confirm = await this.$confirm(
+        `确定要删除其他文件类型【${row.name}】吗?`,
+        "提示",
+        {
+          type: "warning",
+        }
+      ).catch(() => {});
+      if (confirm !== "confirm") return;
+
+      await deleteFileType(row.id);
+      this.$message.success("删除成功！");
+      this.deletePageLastItem();
+    },
+  },
+};
+</script>