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

<template>
  <el-dialog
    custom-class="side-dialog"
    :visible.sync="modalIsShow"
    :title="title"
    width="600px"
    :modal="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
  >
    <question-folder
      v-if="modalIsShow"
      ref="QuestionFolder"
      :is-edit="isEdit"
      @selected="nodeSelected"
    ></question-folder>
    <div slot="footer" class="box-justify">
      <div></div>
      <div>
        <el-button v-if="!isEdit" type="primary" @click="confirm"
          >确定</el-button
        >
        <el-button @click="cancel">取消</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import QuestionFolder from "./QuestionFolder.vue";

export default {
  name: "QuestionFolderDialog",
  components: { QuestionFolder },
  props: {
    isEdit: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      modalIsShow: false,
      curNodeData: {},
    };
  },
  computed: {
    title() {
      return this.isEdit ? "新建文件夹" : "选择文件夹";
    },
  },
  methods: {
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    },
    nodeSelected(node) {
      this.curNodeData = node || {};
    },
    confirm() {
      if (!this.curNodeData.id && this.curNodeData.id !== 0) {
        this.$message.error("请选择文件夹！");
        return;
      }
      this.$emit("selected", this.curNodeData);
      this.cancel();
    },
  },
};
</script>