班级选择组件

src/assets/styles/element-ui-costom.scss

@@ -157,6 +157,22 @@
     }
   }
 }
+.el-select-dropdown {
+  &.popper-filter {
+    .el-scrollbar {
+      display: block !important;
+      padding-top: 52px;
+    }
+    .el-select-filter {
+      padding: 0 10px;
+      position: absolute;
+      width: 100%;
+      top: 10px;
+      left: 0;
+      z-index: 9;
+    }
+  }
+}
 // upload
 .el-upload,
 .el-upload-dragger {

src/components/MultipleFilterSelect.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="multiple-filter-select">
-    multiple-filter-select
-  </div>
-</template>
-
-<script>
-export default {
-  name: "multiple-filter-select",
-  data() {
-    return {};
-  },
-  methods: {}
-};
-</script>

src/components/base/ClazzSelect.vue

@@ -0,0 +1,109 @@
+<template>
+  <el-select
+    v-model="selected"
+    class="clazz-select"
+    popper-class="popper-filter"
+    :placeholder="placeholder"
+    :style="styles"
+    :clearable="clearable"
+    :disabled="disabled"
+    :multiple="multiple"
+    @change="select"
+  >
+    <div class="el-select-filter">
+      <el-input
+        v-model="filterLabel"
+        placeholder="请输入"
+        clearable
+        @input="labelChange"
+      ></el-input>
+    </div>
+    <el-option
+      v-for="item in filterOptionList"
+      :key="item.id"
+      :value="item.id"
+      :label="item.name"
+    >
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+import { clazzQuery } from "../../modules/base/api";
+
+export default {
+  name: "clazz-select",
+  props: {
+    disabled: { type: Boolean, default: false },
+    placeholder: { type: String, default: "请选择" },
+    value: { type: [Number, String, Array], default: "" },
+    styles: { type: String, default: "" },
+    clearable: { type: Boolean, default: true },
+    multiple: { type: Boolean, default: false },
+    datas: {
+      type: Array,
+      default() {
+        return [];
+      }
+    }
+  },
+  data() {
+    return {
+      optionList: [],
+      filterOptionList: [],
+      selected: "",
+      filterLabel: ""
+    };
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler(val) {
+        this.selected = val;
+      }
+    }
+  },
+  created() {
+    this.search();
+  },
+  methods: {
+    async search() {
+      if (this.datas && this.datas.length) {
+        this.optionList = this.datas.map(item => {
+          return { ...item };
+        });
+        this.labelChange();
+        return;
+      }
+
+      const res = await clazzQuery();
+      this.optionList = res || [];
+      this.labelChange();
+    },
+    labelChange() {
+      const escapeRegexpString = (value = "") =>
+        String(value).replace(/[|\\{}()[\]^$+*?.]/g, "\\$&");
+      const reg = new RegExp(escapeRegexpString(this.filterLabel), "i");
+
+      this.filterOptionList = this.optionList.filter(item =>
+        reg.test(item.name)
+      );
+    },
+    select() {
+      this.$emit("input", this.selected);
+
+      if (this.multiple) {
+        this.$emit(
+          "change",
+          this.optionList.filter(item => this.selected.includes(item.id))
+        );
+      } else {
+        this.$emit(
+          "change",
+          this.optionList.find(item => item.id === this.selected)
+        );
+      }
+    }
+  }
+};
+</script>

src/components/base/PrintPlanSelect.vue

@@ -57,10 +57,18 @@ export default {
     },
     select() {
       this.$emit("input", this.selected);
-      this.$emit(
-        "change",
-        this.optionList.find(item => item.id === this.selected)
-      );
+
+      if (this.multiple) {
+        this.$emit(
+          "change",
+          this.optionList.filter(item => this.selected.includes(item.id))
+        );
+      } else {
+        this.$emit(
+          "change",
+          this.optionList.find(item => item.id === this.selected)
+        );
+      }
     }
   }
 };

src/modules/base/api.js

@@ -133,6 +133,9 @@ export const flowPublish = id => {
 export const flowEnd = flowId => {
   return $post("/api/admin/flow/end", { flowId });
 };
+export const flowDelete = ({ flowId, enable }) => {
+  return $post("/api/admin/flow/approve/enable", { flowId, enable });
+};
 export const flowRegister = (datas, headers) => {
   return $post("/api/admin/flow/register", datas, { headers });
 };

src/modules/base/components/ModifyCourse.vue

@@ -39,22 +39,13 @@
         ></teaching-room-select>
       </el-form-item>
       <el-form-item prop="clazzIdList" label="授课班级：">
-        <el-select
+        <clazz-select
           v-model="modalForm.clazzIdList"
           placeholder="请选择授课班级"
           multiple
-          filterable
           clearable
           style="width:100%;"
-        >
-          <el-option
-            v-for="item in classList"
-            :key="item.id"
-            :value="item.id"
-            :label="item.name"
-          >
-          </el-option>
-        </el-select>
+        ></clazz-select>
       </el-form-item>
     </el-form>
     <div slot="footer">
@@ -67,7 +58,7 @@
 </template>
 
 <script>
-import { updateCourse, getCode, clazzQuery } from "../api";
+import { updateCourse, getCode } from "../api";
 
 const initModalForm = {
   id: null,
@@ -99,7 +90,6 @@ export default {
     return {
       modalIsShow: false,
       isSubmit: false,
-      classList: [],
       modalForm: { ...initModalForm },
       rules: {
         courseName: [
@@ -143,9 +133,6 @@ export default {
       }
     };
   },
-  created() {
-    this.getClassList();
-  },
   methods: {
     initData(val) {
       if (val.id) {
@@ -156,10 +143,6 @@ export default {
         this.createCode();
       }
     },
-    async getClassList() {
-      const data = await clazzQuery();
-      this.classList = data || [];
-    },
     async createCode() {
       this.modalForm.courseCode = await getCode("COURSE_CODE");
     },

src/modules/base/views/FlowManage.vue

@@ -73,7 +73,7 @@
 </template>
 
 <script>
-import { flowListPage, flowPublish, flowEnd } from "../api";
+import { flowListPage, flowPublish, flowDelete } from "../api";
 import RegistFlowDialog from "../components/RegistFlowDialog";
 
 export default {
@@ -135,7 +135,7 @@ export default {
         type: "warning"
       })
         .then(async () => {
-          await flowEnd(row.id);
+          await flowDelete({ flowId: row.id, enable: false });
           this.$message.success("操作成功！");
           this.getList();
         })

src/modules/exam/components/CreatePrintTask.vue

@@ -38,21 +38,16 @@
         ></el-input>
       </el-form-item>
       <el-form-item prop="classId" label="考试对象：">
-        <el-select
+        <clazz-select
+          v-if="classList.length"
           v-model="classIds"
           placeholder="请选择"
           multiple
           clearable
-          style="width: 100%"
+          :datas="classList"
+          style="width:100%;"
           @change="classChange"
-        >
-          <el-option
-            v-for="clazz in classList"
-            :key="clazz.classId"
-            :value="clazz.classId"
-            :label="clazz.className"
-          ></el-option>
-        </el-select>
+        ></clazz-select>
       </el-form-item>
       <el-form-item prop="studentCount" label="人数：">
         <el-input-number
@@ -251,7 +246,18 @@ export default {
         paperNumber: this.instance.paperNumber,
         examTaskPrintId: this.instance.id
       });
-      this.classList = data || [];
+      if (!data) {
+        this.classList = [];
+        return;
+      }
+
+      this.classList = data.map(item => {
+        return {
+          id: item.classId,
+          name: item.className,
+          studentCount: item.studentCount
+        };
+      });
     },
     visibleChange() {
       this.getClazzs();
@@ -276,15 +282,13 @@ export default {
     open() {
       this.modalIsShow = true;
     },
-    classChange(vals) {
-      const classes = this.classList.filter(item =>
-        vals.includes(item.classId)
-      );
-      this.modalForm.className = classes.map(item => item.className).join(",");
-      this.modalForm.classId = this.classIds.join(",");
+    classChange(classes) {
+      this.modalForm.className = classes.map(item => item.name).join();
+      this.modalForm.classId = this.classIds.join();
       this.modalForm.studentCount = calcSum(
         classes.map(item => item.studentCount)
       );
+      this.$refs.modalFormComp.validateField("classId", () => {});
     },
     campusChange(val) {
       this.modalForm.printHouseId = val.printHouseId;

src/plugins/globalVuePlugins.js

@@ -16,6 +16,7 @@ import SchoolSelect from "../components/base/SchoolSelect.vue";
 import CampusSelect from "../components/base/CampusSelect.vue";
 import PrintRoomSelect from "../components/base/PrintRoomSelect.vue";
 import TeachingRoomSelect from "../components/base/TeachingRoomSelect.vue";
+import ClazzSelect from "../components/base/ClazzSelect.vue";
 
 const components = {
   ViewFooter,
@@ -30,7 +31,8 @@ const components = {
   SchoolSelect,
   CampusSelect,
   PrintRoomSelect,
-  TeachingRoomSelect
+  TeachingRoomSelect,
+  ClazzSelect
 };
 
 export default {