examcloud-admin-web/src/modules/questions/views/PropertyInfo.vue

<template>
  <section class="content">
    <LinkTitlesCustom :currentPaths="['属性结构']" />
    <!-- 正文信息 -->
    <div class="box-body">
      <el-form
        :inline="true"
        :model="courseProperty"
        label-position="right"
        label-width="90px"
      >
        <el-row :gutter="10">
          <el-col :xs="7" :sm="7" :md="7" :lg="8">
            <el-form-item label="属性名称" class="pull-left">
              <el-input
                placeholder="请输入课程名称"
                v-model="courseProperty.name"
                :disabled="true"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="7" :sm="7" :md="7" :lg="8">
            <el-form-item label="课程名称">
              <el-select
                v-model="courseProperty.courseId"
                class="form_width"
                filterable
                :remote-method="getCourses"
                remote
                clearable
                :disabled="true"
              >
                <el-option
                  v-for="item in courseInfoSelect"
                  :label="item.courseInfo"
                  :value="item.courseId"
                  :key="item.courseId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :xs="7" :sm="7" :md="7" :lg="8">
          <div style="margin-left: 20px;">
            <el-form-item>
              <el-button type="primary" @click="insertParent" size="small"
                ><i class="el-icon-plus"></i> 新增一级</el-button
              >

              <el-button
                type="primary"
                size="small"
                @click="insertSon"
                :disabled="showSonButtton"
                ><i class="el-icon-plus"></i> 新增二级</el-button
              >
              <el-button
                type="primary"
                size="small"
                @click="updateProperty"
                :disabled="showButton"
                ><i class="el-icon-edit"></i>编辑</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click="deleteProperty"
                :disabled="showButton"
                ><i class="el-icon-delete"></i> 删除</el-button
              >
              <el-button
                type="info"
                @click="moveUp"
                :disabled="showMoveButtton"
                size="small"
                ><i class="el-icon-arrow-up"></i> 上移</el-button
              >
              <el-button
                type="info"
                @click="moveDown"
                :disabled="showMoveButtton"
                size="small"
                ><i class="el-icon-arrow-down"></i> 下移</el-button
              >
              <el-button
                type="primary"
                icon="caret-left"
                @click="back"
                size="small"
                ><i class="el-icon-arrow-left"></i> 返 回</el-button
              >
            </el-form-item>
          </div>
        </el-row>
      </el-form>

      <el-tree
        :data="data"
        node-key="id"
        :props="defaultProps"
        :default-expanded-keys="ids"
        @node-click="handleNodeClick"
      ></el-tree>
    </div>
    <el-dialog :title="title" :visible.sync="propertyDialog">
      <el-form :model="propertyForm">
        <el-row v-show="parentName">
          <el-form-item label="一级名称">
            <el-input
              v-model="propertyForm.parentName"
              auto-complete="off"
              style="width: 220px;"
              @change="showTitle"
            ></el-input>
            <span style="color: red;" v-show="showParentName"
              >请输一级名称</span
            >
          </el-form-item>
        </el-row>
        <el-row v-show="sonName">
          <el-form-item label="二级名称">
            <el-input
              v-model="propertyForm.sonName"
              auto-complete="off"
              style="width: 220px;"
              @change="showTitle"
            ></el-input>
            <span style="color: red;" v-show="showSonName">请输二级名称</span>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="名称备注">
            <el-input
              v-model="propertyForm.remark"
              auto-complete="off"
              style="width: 220px;"
              @change="showTitle"
            ></el-input>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="propertyDialog = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import { CORE_API, QUESTION_API } from "@/constants/constants";
import LinkTitlesCustom from "@/components/LinkTitlesCustom.vue";
export default {
  components: { LinkTitlesCustom },
  data() {
    return {
      courseProperty: {
        name: "",
        courseId: ""
      },
      courseList: [],
      ids: [],
      loading: false,
      parentName: false,
      sonName: false,
      propertyDialog: false,
      propertyForm: {
        parentName: "",
        sonName: "",
        remark: ""
      },
      property: {
        id: "",
        name: "",
        parentId: "",
        number: "",
        coursePropertyId: "",
        remark: ""
      },
      showButton: true,
      showSonButtton: true,
      showParentName: false,
      showSonName: false,
      data: [],
      defaultProps: {
        children: "propertyDtos",
        label: "name"
      },
      title: "新增属性",
      showMoveButtton: true
    };
  },
  methods: {
    //树形节点选中
    handleNodeClick(object) {
      //得到选中的节点
      console.log(object);
      this.showButton = false;
      //判断选中节点，如果是父节点，可以新增二级
      if (object.parentId === 0) {
        this.showSonButtton = false;
        this.showMoveButtton = false;
      } else {
        this.showSonButtton = true;
        this.showMoveButtton = true;
      }
      this.property.id = object.id;
      this.property.name = object.name;
      this.property.parentId = object.parentId;
      this.property.number = object.number;
      this.property.coursePropertyId = object.coursePropertyId;
      this.property.remark = object.remark;
    },
    //查询所有课程
    getCourses(query) {
      this.courseList = [];
      if (query) {
        this.courseLoading = true;
        this.$http.get(CORE_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.data = response.data;
          for (var i = 0; i < this.data.length; i++) {
            var property = this.data[i];
            this.ids.push(property.id);
          }
          this.loading = false;
        });
    },
    //新增一级
    insertParent() {
      this.title = "新增属性";
      this.showParentName = false;
      this.property = {
        id: "",
        name: "",
        parentId: 0,
        number: "",
        coursePropertyId: this.coursePropertyId,
        remark: ""
      };
      this.propertyForm.parentName = "";
      this.propertyForm.remark = "";
      this.sonName = false;
      this.parentName = true;
      this.propertyDialog = true;
    },
    //新增二级
    insertSon() {
      this.title = "新增属性";
      this.showSonName = false;
      //父对象id赋值
      this.property.parentId = this.property.id;
      this.property.id = "";
      this.property.name = "";
      this.property.remark = "";
      this.property.coursePropertyId = this.coursePropertyId;
      this.propertyForm.sonName = "";
      this.propertyForm.remark = "";
      this.parentName = false;
      this.sonName = true;
      this.propertyDialog = true;
    },
    //修改
    updateProperty() {
      this.title = "修改属性";
      //判断是父节点还是子节点
      if (this.property.parentId === 0) {
        this.propertyForm.parentName = this.property.name;
        this.propertyForm.remark = this.property.remark;
        this.sonName = false;
        this.parentName = true;
      } else {
        this.propertyForm.sonName = this.property.name;
        this.propertyForm.remark = this.property.remark;
        this.parentName = false;
        this.sonName = true;
      }
      this.propertyDialog = true;
    },
    //保存
    submit() {
      if (this.property.parentId === 0) {
        //非空判断
        if (!this.propertyForm.parentName) {
          this.showParentName = true;
          return 0;
        }
        this.property.name = this.propertyForm.parentName;
      } else {
        //非空判断
        if (!this.propertyForm.sonName) {
          this.showSonName = true;
          return 0;
        }
        this.property.name = this.propertyForm.sonName;
      }
      this.property.remark = this.propertyForm.remark;
      if (this.property.id) {
        this.$http
          .put(QUESTION_API + "/property/save", this.property)
          .then(() => {
            this.$notify({
              message: "修改成功",
              type: "success"
            });
            this.propertyDialog = false;
            this.searchProperty();
          })
          .catch(() => {
            this.$notify({
              type: "error",
              message: "名称重复，请重新命名"
            });
          });
      } else {
        this.$http
          .post(QUESTION_API + "/property/save", this.property)
          .then(() => {
            this.$notify({
              message: "新增成功",
              type: "success"
            });
            this.propertyDialog = false;
            this.searchProperty();
          })
          .catch(() => {
            this.$notify({
              type: "error",
              message: "名称重复，请重新命名"
            });
          });
      }
      this.showButton = true;
      this.showSonButtton = true;
    },
    //删除
    deleteProperty() {
      this.$confirm("确认删除试卷吗?", "提示", {
        type: "warning"
      }).then(() => {
        this.loading = true;
        this.$http
          .delete(
            QUESTION_API +
              "/property/delete/" +
              this.property.id +
              "/" +
              this.property.coursePropertyId
          )
          .then(() => {
            this.$notify({
              message: "删除成功",
              type: "success"
            });
            this.searchProperty();
          })
          .catch(() => {
            this.$notify({
              type: "error",
              message: "删除失败"
            });
          });
      });
      this.showButton = true;
      this.showSonButtton = true;
    },
    //效验
    showTitle() {
      if (this.propertyForm.parentName) {
        this.showParentName = false;
      }
      if (!this.propertyForm.parentName) {
        this.showParentName = true;
      }
      if (this.propertyForm.sonName) {
        this.showSonName = false;
      }
      if (!this.propertyForm.sonName) {
        this.showSonName = true;
      }
    },
    //返回
    back() {
      this.$router.push({
        path: "/questions/course_property/1"
      });
    },
    //上移
    moveUp() {
      this.$http
        .put(QUESTION_API + "/property/moveUp", this.property)
        .then(() => {
          this.searchProperty();
          this.showMoveButtton = true;
        })
        .catch(() => {
          this.$notify({
            type: "error",
            message: "无法上移"
          });
          this.showMoveButtton = true;
        });
    },
    //下移
    moveDown() {
      this.$http
        .put(QUESTION_API + "/property/moveDown", this.property)
        .then(() => {
          this.searchProperty();
          this.showMoveButtton = true;
        })
        .catch(() => {
          this.$notify({
            type: "error",
            message: "无法下移"
          });
          this.showMoveButtton = true;
        });
    }
  },
  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();
  }
};
</script>