teachcloud-print-web/src/modules/mark/components/markParam/SelectClassByCourse.vue

<template>
  <el-dialog
    :visible.sync="modalIsShow"
    append-to-body
    top="20px"
    width="900px"
    title="选择班级"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    @opened="visibleChange"
  >
    <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>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "select-class-by-course",
  props: {
    classList: {
      type: Array,
      default() {
        return [];
      },
    },
    selectedIds: {
      type: Array,
      default() {
        return [];
      },
    },
    disableIds: {
      type: Array,
      default() {
        return [];
      },
    },
    required: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      modalIsShow: false,
      dataList: [],
      classDataList: [],
      classIds: [],
      filterLabel: "",
    };
  },
  methods: {
    visibleChange() {
      this.classIds = [...this.selectedIds];
      this.dataList = this.classList.map((item) => {
        return {
          id: item,
          name: item,
          disabled: false,
        };
      });
      this.dataList.forEach((item) => {
        item.disabled = this.disableIds.includes(item.id);
      });

      this.classDataList = this.dataList;
    },
    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;
    },
    open() {
      this.modalIsShow = true;
    },
    classChange() {
      this.$emit("change", this.classIds);
    },
    // confirm
    confirm() {
      if (this.required && !this.classIds.length) {
        this.$message.error("请选择班级");
        return;
      }
      this.$emit("confirm", this.classIds);
      this.cancel();
    },
  },
};
</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>