spfm-market-front/src/pages/main/itknowledgetop/addKnowledge.vue

<template>
  <fullscreen class="mc-container">
    <div class="container-box">
      <h2>新增知识库</h2>
      <el-row :gutter="20" style="margin-top: 15px">
        <el-col :span="24"
          ><el-form
            :model="formData"
            :rules="rules"
            ref="ruleForm"
            label-width="50px"
            class="demo-ruleForm"
          >
            <el-col :span="10">
              <el-form-item label="标题" prop="title">
                <el-input
                  v-model="formData.title"
                  placeholder="请输入标题"
                ></el-input>
              </el-form-item>
              <el-form-item prop="pubType" label="类型">
                <el-select
                  style="width: 100%"
                  :popper-append-to-body="false"
                  v-model="formData.pubType"
                  placeholder="发布类型"
                  clearable
                >
                  <el-option
                    v-for="item in knowledgeType"
                    :key="item.id"
                    :label="item.pubType"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="目录" prop="catalogDesc">
                <div style="display: flex">
                  <el-input
                    v-model="formData.catalogDesc"
                    readonly
                    placeholder="请选择目录"
                  ></el-input>
                  <el-button @click="selectCatalogs">选择</el-button>
                </div>
              </el-form-item>
              <el-form-item label="附件" prop="catalog">
                <myUpload
                  @uploadBack="uploadBack"
                  :fileInfo="fileInfo"
                  :fileList="fileInfo.fileList"
                >
                </myUpload>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')"
                  >立即创建</el-button
                >
                <el-button @click="resetForm('ruleForm')">取消</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label="内容" prop="content">
                <p-editor-tiny
                  imgType="upload"
                  v-model="formData.content"
                ></p-editor-tiny
              ></el-form-item>
            </el-col> </el-form
        ></el-col>
      </el-row>
    </div>
    <el-dialog
      title="目录树"
      :visible.sync="catalogDialogVisible"
      width="45%"
      :modal-append-to-body="false"
    >
      <el-tree
        class="filter-tree"
        :data="treeData"
        node-key="catalog"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        @node-click="nodeClick"
        ref="tree"
      >
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clearCatalog">取 消</el-button>
        <el-button type="primary" @click="trueCatalog">确 定</el-button>
      </span>
    </el-dialog>
  </fullscreen>
</template><script>
import myUpload from "../../../components/upload";
export default {
  data() {
    return {
      catalogDialogVisible: false,
      departmentDialogVisible: false,
      formData: {
        title: "",
        catalog: "",
        catalogDesc: "",
        content: "",
        pubType: "",
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        catalogDesc: [
          { required: true, message: "请选择目录", trigger: "change" },
        ],
        pubType: [{ required: true, message: "请选择类型", trigger: "change" }],
        content: [
          {
            required: true,
            message: "请输入内容",
            trigger: "change",
          },
        ],
      },
      filterText: "",
      treeData: [],
      defaultProps: {
        children: "children",
        label: "title",
      },
      knowledgeType: [],
      fileInfo: {
        limit: 5,
        url: "/market/cknowledgenetatt/upload",
        fileList: [],
      },
    };
  },
  components: {
    PEditorTiny: () =>
      import(
        /* webpackChunkName: "peditor-tiny" */ "../../../components/p-editor-tiny"
      ),
    myUpload,
  },
  methods: {
    uploadBack(v) {
      this.attList = v;
    },
    // 选择完目录清空
    clearCatalog() {
      this.formData.catalogDesc = "";
      this.formData.catalog = "";
      this.catalogDialogVisible = false;
    },
    // 选择完目录确认
    trueCatalog() {
      this.catalogDialogVisible = false;
    },
    // 选择目录弹出
    selectCatalogs() {
      this.catalogDialogVisible = true;
    },
    // 选择部门弹出
    selectDepartment() {
      this.departmentDialogVisible = true;
    },
    //字典类型
    getListype(v) {
      this.$http({
        url: "/market/mkKnowledgePubMsgType/queryList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          dictCode: "pubType",
        },
      }).then((res) => {
        this.knowledgeType = res.data;
      });
    },
    // 树筛选
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    async submitForm(formName) {
      let valid = await this.$refs[formName].validate().catch((err) => err);
      if (valid) {
        alert("submit!");
      } else {
        console.log("error submit!!");
        return false;
      }
    }, // 树点击
    nodeClick(index, data, node) {
      this.formData.catalogDesc = data.data.title;
      this.formData.catalog = data.data.id;
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    getData() {
      this.$http({
        url: "/market/mkKnowledgeCatalog/queryList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {},
      }).then((res) => {
        this.treeData = res.data;
      });
    },
  },
  mounted() {
    this.getData();
    this.getListype();
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
};
</script>
<style>
.mc-container {
  margin: 15px;
  background: #fff;
  border-radius: 5px;
  height: calc(100vh - 150px);
  margin-bottom: 0;
}
.mc-container .container-box {
  width: 100%;
  height: 100%;
  max-height: 96vh;
  margin-top: 20px;
  padding: 0 20px 0 20px;
  overflow-x: hidden !important;
  padding-top: 20px;
}
.tinymce-editor {
  height: 300px;
}
.mc-container .el-upload{
  width:100%
}
.mc-container .el-upload-dragger{
  width: 100%;
}
</style>