union-question-web/src/modules/questions/views/PropertyInfo.vue

<template>
  <section class="property-info">
    <!-- 正文信息 -->
    <div class="part-box">
      <h2 class="part-box-title">属性结构</h2>
      <el-form
        class="part-filter-form"
        :inline="true"
        :model="courseProperty"
        label-position="right"
        label-width="100px"
      >
        <el-form-item label="属性名称">
          <el-input
            v-model="courseProperty.name"
            placeholder="请输入课程名称"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="课程名称">
          <el-select
            v-model="courseProperty.courseId"
            filterable
            :remote-method="getCourses"
            remote
            clearable
            :disabled="true"
          >
            <el-option
              v-for="item in courseInfoSelect"
              :key="item.courseId"
              :label="item.courseInfo"
              :value="item.courseId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item></el-form-item>
      </el-form>

      <div class="part-box-action">
        <div>
          <el-button
            type="primary"
            icon="icon icon-plus-white"
            @click="insertParent"
            >新增一级</el-button
          >
          <el-button
            type="primary"
            icon="icon icon-plus-white"
            :disabled="showSonButtton"
            @click="insertSon"
            >新增二级</el-button
          >
          <el-button
            type="primary"
            plain
            icon="icon icon-edit"
            :disabled="showButton"
            @click="updateProperty"
            >编辑</el-button
          >
          <el-button
            type="danger"
            plain
            icon="icon icon-delete"
            :disabled="showButton"
            @click="deleteProperty"
            >删除</el-button
          >
          <el-button
            type="primary"
            plain
            icon="icon icon-import"
            :disabled="showMoveButtton"
            @click="moveUp"
            >上移</el-button
          >
          <el-button
            type="primary"
            plain
            icon="icon icon-export"
            :disabled="showMoveButtton"
            @click="moveDown"
            >下移</el-button
          >
        </div>
        <div>
          <el-button type="danger" plain icon="icon icon-back" @click="back"
            >返回</el-button
          >
        </div>
      </div>
    </div>

    <div class="part-box property-box">
      <el-tree
        class="property-tree"
        :data="treeData"
        node-key="id"
        :props="defaultProps"
        :default-expanded-keys="ids"
        highlight-current
        @node-click="handleNodeClick"
        ><span
          slot-scope="{ data }"
          :class="{ 'node-level-one': !data.parentId }"
        >
          <span>{{ data.name }}({{ data.code }})</span>
        </span></el-tree
      >
    </div>

    <el-dialog
      :title="title"
      :visible.sync="propertyDialog"
      :modal="false"
      width="520px"
      append-to-body
      custom-class="side-dialog"
      @close="closeModel"
    >
      <el-form
        ref="propertyForm"
        :model="propertyForm"
        :inline="true"
        :rules="rules"
        inline-message
        class="form-tight"
        label-width="100px"
      >
        <el-row>
          <el-form-item label="编号" prop="code">
            <el-input
              v-model="propertyForm.code"
              auto-complete="off"
              class="dialog-input-width"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row v-if="isFirstLev()">
          <el-form-item label="一级名称" prop="name">
            <el-input
              v-model="propertyForm.name"
              auto-complete="off"
              class="dialog-input-width"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row v-if="isSecondLev()">
          <el-form-item label="二级名称" prop="name">
            <el-input
              v-model="propertyForm.name"
              auto-complete="off"
              class="dialog-input-width"
            ></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="名称备注">
            <el-input
              v-model="propertyForm.remark"
              auto-complete="off"
              class="dialog-input-width"
            ></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button type="danger" plain @click="closeModel">取消</el-button>
      </div>
    </el-dialog>
  </section>
</template>

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

export default {
  data() {
    return {
      courseProperty: {
        name: "",
        courseId: "",
      },
      courseList: [],
      ids: [],
      loading: false,
      propertyDialog: false,
      propertyForm: {
        id: "",
        code: "",
        name: "",
        parentId: "",
        number: "",
        coursePropertyId: "",
        remark: "",
      },
      curProperty: {
        id: "",
        code: "",
        name: "",
        parentId: "",
        number: "",
        coursePropertyId: "",
        remark: "",
      },
      showButton: true,
      showSonButtton: true,
      showMoveButtton: true,
      treeData: [],
      defaultProps: {
        children: "propertyList",
      },
      title: "新增属性",
      rules: {
        code: [
          {
            required: true,
            message: "请输入编码",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    courseInfoSelect() {
      var courseList = [];
      for (var i = 0; i < this.courseList.length; i++) {
        var courseInfo = {
          courseInfo:
            this.courseList[i].name + "(" + this.courseList[i].code + ")",
          courseId: this.courseList[i].id,
        };
        courseList.push(courseInfo);
      }
      return courseList;
    },
  },
  created() {
    this.coursePropertyId = this.$route.params.id;
    this.searchProperty();
  },
  mounted() {
    setTimeout(() => {
      this.$store.commit("UPDATE_CURRENT_PATHS", [
        "课程管理",
        "课程属性",
        "属性结构",
      ]);
    }, 200);
  },
  methods: {
    disAllBtn() {
      this.showButton = true;
      this.showSonButtton = true;
      this.showMoveButtton = true;
    },
    isFirstLev() {
      if (this.propertyForm.parentId == "0") {
        return true;
      } else {
        return false;
      }
    },
    isSecondLev() {
      if (this.propertyForm.parentId && this.propertyForm.parentId != "0") {
        return true;
      } else {
        return false;
      }
    },
    closeModel() {
      this.propertyDialog = false;
      this.$refs.propertyForm.resetFields();
    },
    //树形节点选中
    handleNodeClick(object) {
      this.showButton = false;
      //判断选中节点，如果是父节点，可以新增二级
      if (object.parentId == "0") {
        this.showSonButtton = false;
      } else {
        this.showSonButtton = true;
      }
      this.showMoveButtton = false;
      this.curProperty = Object.assign({}, object);
    },
    //查询所有课程
    getCourses(query) {
      this.courseList = [];
      if (query) {
        this.courseLoading = true;
        this.$http.get(QUESTION_API + "/course/" + query).then((response) => {
          var courseBean = response.data;
          this.courseList.push(courseBean);
        });
      } else {
        this.courseList = [];
      }
    },
    //查询
    searchProperty() {
      this.loading = true;
      var coursePropertyStorge = sessionStorage.getItem("courseProperty");
      if (typeof coursePropertyStorge == "string") {
        this.courseProperty = JSON.parse(coursePropertyStorge);
        this.getCourses(this.courseProperty.courseId);
      }
      this.$http
        .get(QUESTION_API + "/property/all/" + this.coursePropertyId)
        .then((response) => {
          this.treeData = response.data;
          for (var i = 0; i < this.treeData.length; i++) {
            var property = this.treeData[i];
            this.ids.push(property.id);
          }
          this.loading = false;
        });
    },
    //新增一级
    insertParent() {
      this.disAllBtn();
      this.title = "新增属性";
      this.propertyForm = {
        id: "",
        code: "",
        name: "",
        parentId: "0",
        number: "",
        coursePropertyId: this.coursePropertyId,
        remark: "",
      };
      this.propertyDialog = true;
    },
    //新增二级
    insertSon() {
      this.disAllBtn();
      this.title = "新增属性";
      //父对象id赋值
      this.propertyForm = {
        id: "",
        code: "",
        name: "",
        parentId: this.curProperty.id,
        number: "",
        coursePropertyId: this.coursePropertyId,
        remark: "",
      };
      this.propertyDialog = true;
    },
    //修改
    updateProperty() {
      this.disAllBtn();
      this.title = "修改属性";
      this.propertyForm = Object.assign({}, this.curProperty);
      this.propertyDialog = true;
    },
    //保存
    async submit() {
      const res = await this.$refs.propertyForm.validate();
      if (res === false) {
        return;
      }
      this.$http
        .post(QUESTION_API + "/property/save", this.propertyForm)
        .then(() => {
          this.$notify({
            message: this.propertyForm.id ? "修改成功" : "新增成功",
            type: "success",
          });
          this.propertyDialog = false;
          this.searchProperty();
        })
        .catch((error) => {
          this.$notify({
            type: "error",
            message: error.response.data.desc,
          });
        });
      this.showButton = true;
      this.showSonButtton = true;
    },
    //删除
    deleteProperty() {
      this.disAllBtn();
      this.$confirm("确认删除属性吗?", "提示", {
        type: "warning",
      }).then(() => {
        this.loading = true;
        this.$http
          .delete(
            QUESTION_API +
              "/property/delete/" +
              this.curProperty.id +
              "/" +
              this.curProperty.coursePropertyId
          )
          .then(() => {
            this.$notify({
              message: "删除成功",
              type: "success",
            });
            this.searchProperty();
          })
          .catch((error) => {
            this.$notify({
              type: "error",
              message: error.response.data.desc,
            });
          });
      });
      this.showButton = true;
      this.showSonButtton = true;
    },
    //返回
    back() {
      this.$router.push({
        path: "/questions/course_property/1",
      });
    },
    //上移
    moveUp() {
      this.disAllBtn();
      this.$http
        .put(QUESTION_API + "/property/moveUp", this.curProperty)
        .then(() => {
          this.searchProperty();
          this.showMoveButtton = true;
        })
        .catch((error) => {
          this.$notify({
            type: "error",
            message: error.response.data.desc,
          });
          this.showMoveButtton = true;
        });
    },
    //下移
    moveDown() {
      this.disAllBtn();
      this.$http
        .put(QUESTION_API + "/property/moveDown", this.curProperty)
        .then(() => {
          this.searchProperty();
          this.showMoveButtton = true;
        })
        .catch((error) => {
          this.$notify({
            type: "error",
            message: error.response.data.desc,
          });
          this.showMoveButtton = true;
        });
    },
  },
};
</script>