feat: 分班阅选择班级调整

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

@@ -459,6 +459,23 @@
     background-color: $--color-primary;
   }
 }
+.block-checkbox-group {
+  .el-checkbox {
+    display: block;
+    overflow: hidden;
+    margin-bottom: 5px;
+  }
+  .el-checkbox__input {
+    display: block;
+    float: left;
+    margin-top: 3px;
+  }
+  .el-checkbox__label {
+    display: block;
+    margin-left: 15px;
+    white-space: normal;
+  }
+}
 
 .el-radio {
   .el-radio__label {

src/modules/mark/components/markParam/SelectClassByCourse.vue

@@ -3,20 +3,54 @@
     :visible.sync="modalIsShow"
     append-to-body
     top="20px"
-    width="100%"
+    width="900px"
     title="选择班级"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
     :show-close="false"
     @opened="visibleChange"
   >
-    <el-transfer
-      v-model="classIds"
-      :data="dataList"
-      :titles="['班级列表', '已选班级']"
-      filterable
-      :props="dataProps"
-    ></el-transfer>
+    <el-row :gutter="20">
+      <el-col :span="12">
+        <div class="class-part-title">班级列表</div>
+        <div class="class-part-filter">
+          <el-input
+            v-model.trim="filterLabel"
+            placeholder="请输入班级名称"
+            clearable
+            size="mini"
+            prefix-icon="el-icon-search"
+            @input="labelChange"
+          ></el-input>
+        </div>
+        <div class="class-part-body">
+          <el-checkbox-group
+            v-model="classIds"
+            class="block-checkbox-group"
+            @change="classChange"
+          >
+            <div v-for="item in classDataList" :key="item.id">
+              <el-checkbox :label="item.name" :disabled="item.disabled">{{
+                item.name
+              }}</el-checkbox>
+            </div>
+          </el-checkbox-group>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="class-part-title">已选班级</div>
+        <div class="class-part-body">
+          <el-tag
+            v-for="item in classIds"
+            :key="item"
+            class="tag-spin tag-wrap"
+            style="display: block"
+            size="medium"
+            >{{ item }}</el-tag
+          >
+        </div>
+      </el-col>
+    </el-row>
 
     <div slot="footer">
       <el-button type="primary" @click="confirm">确认</el-button>
@@ -56,11 +90,9 @@ export default {
     return {
       modalIsShow: false,
       dataList: [],
+      classDataList: [],
       classIds: [],
-      dataProps: {
-        key: "id",
-        label: "name",
-      },
+      filterLabel: "",
     };
   },
   methods: {
@@ -76,6 +108,28 @@ export default {
       this.dataList.forEach((item) => {
         item.disabled = this.disableIds.includes(item.id);
       });
+
+      this.classDataList = this.dataList;
+
+      for (let i = 0; i < 20; i++) {
+        this.dataList.push({
+          id: i,
+          name: "班级" + i,
+          disabled: false,
+        });
+      }
+    },
+    labelChange() {
+      if (!this.filterLabel) {
+        this.classDataList = this.dataList;
+        return;
+      }
+
+      const escapeRegexpString = (value = "") =>
+        String(value).replace(/[|\\{}()[\]^$+*?.]/g, "\\$&");
+      const reg = new RegExp(escapeRegexpString(this.filterLabel), "i");
+
+      this.classDataList = this.dataList.filter((item) => reg.test(item.name));
     },
     cancel() {
       this.modalIsShow = false;
@@ -83,6 +137,9 @@ export default {
     open() {
       this.modalIsShow = true;
     },
+    classChange() {
+      this.$emit("change", this.classIds);
+    },
     // confirm
     confirm() {
       if (this.required && !this.classIds.length) {
@@ -95,3 +152,33 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.class-part {
+  &-title {
+    height: 28px;
+    line-height: 26px;
+    border-radius: 5px;
+    background-color: #f0f0f0;
+    border: 1px solid #e0e0e0;
+    text-align: center;
+    margin-bottom: 5px;
+  }
+
+  &-body {
+    height: 400px;
+    overflow-y: auto;
+    border: 1px solid #e0e0e0;
+    padding: 5px 10px;
+    border-radius: 3px;
+  }
+  &-filter {
+    height: 28px;
+    margin-bottom: 5px;
+
+    + .class-part-body {
+      height: 367px;
+    }
+  }
+}
+</style>