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

<template>
  <div class="question-info-edit">
    <el-form label-width="100px">
      <el-form-item label="难度">
        <el-select
          v-model="modelForm.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 prop="quesProperties" label="属性名">
        <div class="box-flex">
          <property-select
            v-model="properties.coursePropertyId"
            :course-id="modelForm.courseId"
            @change="coursePropertyChange"
          ></property-select>
          <span>一级</span>
          <property-sub-select
            v-model="properties.firstPropertyId"
            :parent-id="properties.coursePropertyId"
            data-type="first"
            @change="firstPropertyChange"
          ></property-sub-select>
          <span>二级</span>
          <property-sub-select
            v-model="properties.secondPropertyId"
            :parent-id="properties.firstPropertyId"
            data-type="second"
            @change="secondPropertyChange"
          ></property-sub-select>
          <el-button
            type="primary"
            icon="icon icon-plus-white"
            :disabled="!propSelected"
            @click="addProperty"
            >新增属性</el-button
          >
        </div>
      </el-form-item>
      <el-form-item label="属性列表">
        <el-tag
          v-for="item in modelForm.quesProperties"
          :key="item.id"
          style="margin-right: 5px"
          closable
          effect="dark"
          type="primary"
          @close="removeProperty(item)"
        >
          {{ item.name }}
        </el-tag>
      </el-form-item>
    </el-form>
  </div>
</template>

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

const initModalForm = {
  courseId: "",
  difficulty: "易",
  quesProperties: [],
};

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