paper-library-client/src/components/SecSelect.vue

<template>
  <div :class="['sec-select', { inline: inline }]">
    <el-form-item v-if="filterProps.includes('semesterId')" label="学期：">
      <semester-select
        v-model.trim="filter.semesterId"
        placeholder="学期"
        default-select
        :clearable="!defaultSelectExam"
        @default-selected="semesterDefaultSelect"
        @change="semesterChange"
      ></semester-select>
    </el-form-item>
    <el-form-item v-if="filterProps.includes('examId')" label="考试：">
      <exam-select
        v-model="filter.examId"
        :semester-id="filter.semesterId"
        :clearable="!defaultSelectExam || !defaultSelectCourse"
        :default-select="defaultSelectExam || defaultSelectCourse"
        @default-selected="examDefaultSelect"
        @change="examChange"
      ></exam-select>
    </el-form-item>
    <el-form-item
      v-if="filterProps.includes('courseCode')"
      label="课程（代码）："
      label-width="110px"
    >
      <course-select
        v-model.trim="filter.courseCode"
        :filter-data="{ semesterId: filter.semesterId, examId: filter.examId }"
        placeholder="课程（代码）"
        clearable
        :default-select="defaultSelectCourse"
        @default-selected="courseDefaultSelect"
        @change="courseChange"
      ></course-select>
    </el-form-item>
  </div>
</template>

<script>
import SemesterSelect from "./base/SemesterSelect.vue";
import ExamSelect from "./base/ExamSelect.vue";
import CourseSelect from "./base/CourseSelect.vue";

const fullProps = ["semesterId", "examId", "courseCode"];

export default {
  name: "sec-select",
  components: { SemesterSelect, ExamSelect, CourseSelect },
  props: {
    value: {
      type: Object,
      default() {
        return {};
      },
    },
    inline: {
      type: Boolean,
      default: true,
    },
    defaultSelectExam: { type: Boolean, default: false },
    defaultSelectCourse: { type: Boolean, default: false },
  },
  data() {
    return {
      filter: {},
      filterProps: [],
      selectData: {},
    };
  },
  watch: {
    filter: {
      deep: true,
      handler() {
        this.emitChange();
      },
    },
  },
  created() {
    this.initData();
    this.filter = this.$objAssign(this.filter, this.value);
  },
  methods: {
    initData() {
      this.filterProps = fullProps.filter((field) =>
        Object.prototype.hasOwnProperty.call(this.value, field)
      );
      let filter = {};
      this.filterProps.forEach((field) => {
        filter[field] = "";
      });
      this.filter = filter;
    },
    getFilterData() {
      return Object.assign({}, this.value, this.filter);
    },
    emitChange() {
      const data = this.getFilterData();
      this.$emit("input", data);
    },
    semesterDefaultSelect() {
      if (this.defaultSelectExam) return;
      this.emitChange();
      this.$emit("semester-default", this.getFilterData());
    },
    examDefaultSelect() {
      if (this.defaultSelectCourse) return;
      this.emitChange();
      this.$emit("exam-default", this.getFilterData());
    },
    courseDefaultSelect() {
      this.emitChange();
      this.$emit("course-default", this.getFilterData());
    },
    semesterChange(val) {
      this.selectData.semester = val || {};
      this.$emit("change", this.selectData);
    },
    examChange(val) {
      this.selectData.exam = val || {};
      this.$emit("change", this.selectData);
    },
    courseChange(val) {
      this.selectData.course = val || {};
      this.$emit("change", this.selectData);
    },
  },
};
</script>

<style scoped>
.sec-select.inline {
  display: inline;
}
</style>