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

<template>
  <div class="question-info-edit">
    <el-form :label-width="labelWidth">
      <el-form-item v-if="IS_PAPER_MODE" label="分值">
        <el-input-number
          v-model="modalForm.score"
          placeholder="分值"
          :precision="1"
          :min="0"
          :max="999"
          :step="0.1"
          step-strictly
          :controls="false"
          @change="emitChange"
        ></el-input-number>
      </el-form-item>

      <el-form-item label="难度" class="question-info-inline">
        <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
        label="时长"
        class="question-info-inline"
        label-width="60px"
      >
        <el-input-number
          v-model="modalForm.control.maxAnswerTime"
          :precision="0"
          :min="0"
          :max="999"
          :step="1"
          step-strictly
          :controls="false"
          @change="emitChange"
        ></el-input-number>
      </el-form-item>
      <el-form-item
        label="公开度"
        class="question-info-inline"
        label-width="60px"
      >
        <el-select
          v-model="modalForm.publicity"
          placeholder="请选择"
          @change="emitChange"
        >
          <el-option
            v-for="item in publicityList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <!-- <el-form-item
        class="question-info-prop"
        prop="quesProperties"
        label="属性名"
      > -->
      <el-form-item
        class="question-info-prop"
        prop="quesProperties"
        label="知识点"
      >
        <div class="box-flex">
          <KnowledgePoints
            :courseId="modalForm.courseId"
            @change="addProperty"
            :checkedProperties="modalForm.quesProperties"
          ></KnowledgePoints>
          <!-- <property-select
            v-model="properties.coursePropertyId"
            :course-id="modalForm.courseId"
            :use-cache="useCoursePropertyCache"
            @change="coursePropertyChange"
          ></property-select>
          <span class="prop-label">一级</span>
          <property-sub-select
            v-model="properties.firstPropertyId"
            :parent-id="properties.coursePropertyId"
            data-type="first"
            @change="firstPropertyChange"
          ></property-sub-select>
          <span class="prop-label">二级</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>
      <!-- <el-form-item v-if="modalForm.quesProperties.length" label="知识点列表"> -->
      <el-form-item v-if="modalForm.quesProperties.length" 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 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";
import KnowledgePoints from "./KnowledgePoints.vue";
import { cloneDeep } from "lodash";

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

export default {
  name: "QuestionInfoEdit",
  components: { KnowledgePoints },
  props: {
    question: {
      type: Object,
      default() {
        return {};
      },
    },
    labelWidth: {
      type: String,
      default: "100px",
    },
    useCoursePropertyCache: { type: Boolean, default: false },
  },
  data() {
    return {
      DIFFICULTY_LIST,
      modalForm: {
        ...initModalForm,
      },
      properties: {
        // coursePropertyId: "",
        firstPropertyId: "",
        secondPropertyId: "",
      },
      selection: {
        // courseProperty: {},
        firstProperty: {},
        secondProperty: {},
      },
      publicityList: [
        { label: "公开", value: true },
        { label: "非公开", value: false },
      ],
    };
  },
  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];
          let ids = [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();
    // },
    addProperty(arr) {
      this.modalForm.quesProperties = arr;
      this.emitChange();
    },
    emitChange() {
      // this.$emit("change", this.modalForm);
      let modalFormCopy = cloneDeep(this.modalForm);
      if (modalFormCopy.quesProperties?.length) {
        modalFormCopy.quesProperties = modalFormCopy.quesProperties.map(
          (item) => {
            if (item.firstProperty) {
              item.firstProperty = {
                id: item.firstProperty.id,
                name: item.firstProperty.name,
              };
            }
            if (item.secondProperty) {
              item.secondProperty = {
                id: item.secondProperty.id,
                name: item.secondProperty.name,
              };
            }
            return item;
          }
        );
      }
      console.log("modalFormCopy", modalFormCopy);
      this.$emit("change", modalFormCopy);
    },
  },
};
</script>