union-question-web/src/modules/question/components/QuestionInfoEdit.vue

<template>
  <div class="question-info-edit">
    <el-form label-width="100px" inline>
      <el-form-item label="难度">
        <el-select
          v-model="modalForm.difficulty"
          placeholder="请选择难度"
          @change="emitChange"
        >
          <el-option
            v-for="item in DIFFICULTY_LIST"
            :key="item.code"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="IS_PAPER_MODE" label="分值" label-width="50px">
        <el-input-number
          v-model="modalForm.score"
          placeholder="分值"
          :precision="1"
          :min="0"
          :max="999"
          :step="0.1"
          step-strictly
          :controls="false"
        ></el-input-number>
      </el-form-item>
      <el-form-item v-if="IS_PAPER_MODE" label="时长" label-width="50px">
        <el-input-number
          v-model="modalForm.control.maxAnswerTime"
          :precision="0"
          :min="1"
          :max="999"
          :step="1"
          step-strictly
          :controls="false"
        ></el-input-number>
      </el-form-item>
      <br />
      <el-form-item prop="quesProperties" label="属性名">
        <div class="box-flex">
          <property-select
            v-model="properties.coursePropertyId"
            :course-id="modalForm.courseId"
            @change="coursePropertyChange"
          ></property-select>
          <span style="margin: 0 12px 0 18px">一级</span>
          <property-sub-select
            v-model="properties.firstPropertyId"
            :parent-id="properties.coursePropertyId"
            data-type="first"
            @change="firstPropertyChange"
          ></property-sub-select>
          <span style="margin: 0 12px 0 18px">二级</span>
          <property-sub-select
            v-model="properties.secondPropertyId"
            :parent-id="properties.firstPropertyId"
            data-type="second"
            @change="secondPropertyChange"
          ></property-sub-select>
          <el-button
            class="margin-lr-10"
            type="primary"
            icon="icon icon-plus-white"
            :disabled="!propSelected"
            @click="addProperty"
            >新增属性</el-button
          >
        </div>
      </el-form-item>
      <br />
      <el-form-item label="属性列表">
        <el-tag
          v-for="content in modalForm.quesProperties"
          :key="content.key"
          closable
          effect="dark"
          type="primary"
          style="margin-right: 5px; margin-bottom: 5px"
          @close="removeProperty(content)"
        >
          {{ content.courseProperty && content.courseProperty.name }}
          <span style="margin: 0 3px">/</span>
          {{ content.firstProperty && content.firstProperty.name }}
          <span
            v-if="content.secondProperty && content.secondProperty.name"
            style="margin: 0 3px"
            >/</span
          >
          {{ content.secondProperty && content.secondProperty.name }}
        </el-tag>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { DIFFICULTY_LIST } from "@/constants/constants";

const initModalForm = {
  editMode: "question",
  courseId: "",
  difficulty: "易",
  quesProperties: [],
  score: 0,
  control: { maxAnswerTime: 0 },
};

export default {
  name: "QuestionInfoEdit",
  props: {
    question: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      DIFFICULTY_LIST,
      modalForm: {
        ...initModalForm,
      },
      properties: {
        coursePropertyId: "",
        firstPropertyId: "",
        secondPropertyId: "",
      },
      selection: {
        courseProperty: {},
        firstProperty: {},
        secondProperty: {},
      },
    };
  },
  computed: {
    propSelected() {
      return (
        this.properties.coursePropertyId && this.properties.firstPropertyId
      );
    },
    IS_PAPER_MODE() {
      return this.modalForm.editMode === "paper";
    },
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      let modalForm = this.$objAssign(initModalForm, this.question);
      if (modalForm.editMode === "paper" && this.question.control) {
        modalForm.control = this.$objAssign(
          initModalForm.control,
          this.question.control
        );
      }
      if (modalForm.quesProperties && modalForm.quesProperties.length) {
        modalForm.quesProperties.forEach((item) => {
          let ids = [item.courseProperty.id, item.firstProperty.id];
          if (item.secondProperty && item.secondProperty.id) {
            ids.push(item.secondProperty.id);
          }
          item.key = ids.join("_");
        });
      } else {
        modalForm.quesProperties = [];
      }
      this.modalForm = modalForm;
    },
    coursePropertyChange(val) {
      this.selection.courseProperty = val || {};
    },
    firstPropertyChange(val) {
      this.selection.firstProperty = val || {};
    },
    secondPropertyChange(val) {
      this.selection.secondProperty = val || {};
    },
    removeProperty(property) {
      this.modalForm.quesProperties = this.modalForm.quesProperties.filter(
        (item) => property.key !== item.key
      );
      this.emitChange();
    },
    addProperty() {
      if (!this.propSelected) return;
      let ids = [
        this.properties.coursePropertyId,
        this.properties.firstPropertyId,
      ];
      if (this.properties.secondPropertyId) {
        ids.push(this.properties.secondPropertyId);
      }
      const newProperty = {
        key: ids.join("_"),
        ...this.selection,
      };
      const propertyExist = this.modalForm.quesProperties.find(
        (item) => item.key === newProperty.key
      );
      if (propertyExist) {
        this.$message.error("属性已存在！");
        return;
      }
      this.modalForm.quesProperties.push(newProperty);
      this.emitChange();
    },
    emitChange() {
      this.$emit("change", this.modalForm);
    },
  },
};
</script>