spfm-market-front/src/pages/main/knowledge/catalog.vue

<template>
  <div class="container">
    <div class="main-box container-box">
      <div class="inner-left" style="overflow: hidden">
        <div class="button-list">
          <el-button type="primary" @click="firstMenu" plain
            >添加一级目录</el-button
          >
          <el-button type="primary" @click="addMenu" plain
            >添加子目录</el-button
          >
          <el-button type="primary" @click="delMenu" plain>删除</el-button>
          <el-dropdown
            @command="treeAction"
            trigger="click"
            style="margin-left: 15px"
          >
            <el-button type="primary" plain>
              树操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="1">全部展开</el-dropdown-item>
              <el-dropdown-item :command="2">全部关闭</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="choice-style">
          <div class="ant-alert-info ant-alert">
            <i style="color: #1890ff" class="el-icon-warning"></i>当前选择：{{
              actionName
            }}
            <span class="canel-style" @click="canelChoice" v-show="actionName"
              >取消选择</span
            >
          </div>
        </div>
        <div style="margin: 10px 0">
          <el-input
            placeholder="请输入内容"
            v-model="filterText"
            class="input-with-select"
            clearable
            @change="
              () => {
                if (!filterText) {
                  searchMenu();
                }
              }
            "
          >
            <el-button
              slot="append"
              @click="searchMenu"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </div>
        <div
          v-loading="loading"
          style="height: calc(100% - 200px); overflow-y: scroll"
        >
          <el-tree
            ref="catalogTree"
            class="tree-line"
            :expand-on-click-node="true"
            :auto-expand-parent="true"
            :default-expand-all="true"
            :props="defaultProps"
            :data="menuList"
            @node-click="nodeClick"
            :filter-node-method="filterNode"
            node-key="id"
          >
            <span class="custom-tree-node" slot-scope="{ node }">
              <span>
                <span style="color: #009cff" class="iconfont icon-wenjianjia"></span>
                <!-- <span
                  v-if="
                    node.data.hasOwnProperty('children') &&
                    node.data.children.length > 0
                  "
                  style="color: #009cff"
                  class="iconfont icon-wenjianjia"
                ></span> -->
                <!-- <span
                  v-else
                  style="color: #fdb441"
                  class="iconfont icon-wenjian"
                ></span> -->
                <span
                  :style="
                    node.data.hasOwnProperty('parent')
                      ? 'font-size:14px;padding-left:5px'
                      : 'font-size:12px;padding-left:5px'
                  "
                  >{{ node.data.title }}</span
                >
              </span>
            </span>
          </el-tree>
        </div>
        <div class="tree-action"></div>
      </div>
      <div class="inner-right">
        <div v-if="actionName">
          <div class="choice-style" style="width: 80%; margin: 15px auto">
            <div class="ant-alert-info ant-alert">
              <i style="color: #1890ff" class="el-icon-warning"></i>请编辑信息
            </div>
          </div>
          <el-form
            :model="formData"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
            style="width: 80%; margin: 50px auto"
          >
            <el-form-item label="目录名称" prop="title">
              <el-input
                v-model="formData.title"
                placeholder="请输入标题"
              ></el-input>
            </el-form-item>
            <el-form-item
              prop="parentId"
              v-if="actionName != 'add'"
              label="父级编码"
            >
              <el-input
                disabled
                v-model="formData.parentId"
                placeholder="请输入父级编码"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="父级名称"
              v-if="actionName != 'add'"
              prop="parentName"
            >
              <el-input
                disabled
                v-model="formData.parentName"
                readonly
                placeholder="请输入父级名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="操作人" prop="createName">
              <el-input
                v-model="formData.createName"
                readonly
                placeholder="请输入操作人"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">{{
                subType
              }}</el-button>
              <el-button @click="resetForm('ruleForm')">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-else style="text-align: center">
          <img src="../../../assets/404.png" alt="" />
          <div>请先选择一个目录</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loading: false,
      defaultExpand: true,
      functionCode: "",
      filterText: "", // tree搜索value
      actionName: "", // 当前选择节点名称
      menuList: [], // tree数据源
      checkedMenu: [], // 选中节点的functionCode
      checkedNodes: [], // 选中节点的node值
      roleData: "", // 某一条数据
      formData: {
        id: "",
        title: "",
        createName: JSON.parse(sessionStorage.userInfo).loginName,
        createId: JSON.parse(sessionStorage.userInfo).loginNo,
        orgName: JSON.parse(sessionStorage.userInfo).groupName,
        orgId: JSON.parse(sessionStorage.userInfo).groupId,
        parentId: "",
        parentName: "",
      },
      defaultProps: {
        children: "children",
        label: "title",
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "change" }],
        parentId: [
          { required: false, message: "请选择父级编码", trigger: "change" },
        ],
      },
      subType: "",
    };
  },
  methods: {
    async submitForm(formName) {
      let valid = await this.$refs[formName].validate().catch((err) => err);
      if (valid) {
        this.$http({
          url:
            this.subType == "保存"
              ? "/satisfy/qacatalog/add"
              : "/satisfy/qacatalog/update",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: this.formData,
        }).then((res) => {
          if (res.data.result == 0) {
            this.$message({
              type: "success",
              message: res.data.desc,
            });
            this.actionName = "";
            this.getData();
          }
        });
      } else {
        console.log("error submit!!");
        return false;
      }
    },
    resetForm(formName) {
      this.actionName = "";
      this.$refs[formName].resetFields();
    },
    addMenu() {
      if (!this.actionName) {
        this.$message("请先点击选中要增加菜单的位置");
      } else {
        this.subType = "保存";
        this.formData.parentId = this.formData.id;
        this.formData.parentName = this.formData.title;
        this.formData.title = "";
        this.formData.id = "";
      }
    },
    treeAction(val) {
      val == 1 ? (this.defaultExpand = true) : (this.defaultExpand = false);
      for (let i = 0; i < this.$refs.catalogTree.store._getAllNodes().length; i++) {
        this.$refs.catalogTree.store._getAllNodes()[i].expanded = this.defaultExpand;
      }
    },
    canelChoice() {
      this.actionName = "";
      this.formData.title = "";
    },
    delMenu() {
      if (!this.formData.id) {
        this.$message("请先点击选中要删除的菜单");
      } else {
        this.$confirm("即将删除此条数据, 是否删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.$http({
              url: "/satisfy/qacatalog/del",
              method: "post",
              headers: {
                "Content-Type": "application/json",
              },
              data: {
                id: this.formData.id,
              },
            }).then((res) => {
              if (res.data.result == 0) {
                this.$notify({
                  title: "成功",
                  message: res.data.desc,
                  type: "success",
                });
                this.actionName = "";
                this.getData();
              }
            });
          })
          .catch(() => {});
      }
    },
    // 添加一级菜单
    firstMenu() {
      this.actionName = "add";
      this.subType = "保存";
      this.formData.title = "";
      this.formData.parentId = "";
      this.formData.parentName = "";
      this.formData.id = "";
    },
    // 搜索按钮事件
    searchMenu() {
      this.$refs.tree.filter(this.filterText);
    },
    // tree过滤方法
    filterNode(value, data) {
      if (!value) return true;
      return data.functionName.indexOf(value) !== -1;
    },
    // 点击树节点事件
    nodeClick(a, b, c, d) {
      let nodeData = JSON.parse(JSON.stringify(b.data));
      this.formData.title = nodeData.title;
      this.formData.parentId = nodeData.parentId;
      this.formData.parentName = nodeData.parentName;
      this.formData.id = nodeData.id;
      delete Object["children"];
      this.actionName = nodeData.title;
      this.subType = "修改";
    },
    closeDialog() {
      this.actionName = "";
      this.getTreeData({});
    },
    // 树形图 复选框监听事件
    checkChange(a, b, c, d) {
      this.checkedNodes = b.checkedNodes;
    },
    getData() {
      this.$http({
        url: "/satisfy/qacatalog/queryList",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {},
      }).then((res) => {
        this.menuList = res.data;
      });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>
<style lang="scss" scoped>
.container {
  background-color: #f0f2f5;

  .el-col {
    background-color: white;
    padding: 0 20px;
  }

  .container-box {
    padding: 0;
    margin-top: 0;
    height: 100%;
  }

  .main-box {
    overflow: hidden;
    display: flex;

    > div {
      background-color: white;
    }

    .inner-left {
      width: 40%;
      padding: 0 20px;

      .canel-style {
        color: #1890ff;
        cursor: pointer;
        padding-left: 10px;
      }
    }

    .inner-right {
      width: 58%;
      margin-left: 2%;
      overflow-y: auto;
    }
  }
}

.el-button + .el-button {
  margin-left: 20px;
}

.button-list {
  padding: 30px 0 10px 0;
}

.choice-style {
  background: rgb(255, 255, 255);
}

.tree-action {
  bottom: 0;
  width: 100%;
  // border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: left;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}

.tree-line {
  .el-tree-node__content {
    padding-left: 0 !important;
  }

  .el-tree-node__expand-icon.is-leaf {
    display: none !important;
  }

  .el-tree-node {
    position: relative;
    padding-left: 16px; // 缩进量
  }

  .el-tree-node__children {
    padding-left: 16px; // 缩进量
  }

  // 竖线
  .el-tree-node::before {
    content: "";
    height: 100%;
    width: 1px;
    position: absolute;
    left: -3px;
    top: -17px;
    border-width: 1px;
    border-left: 1px dashed #52627c;
  }

  // 当前层最后一个节点的竖线高度固定
  .el-tree-node:last-child::before {
    height: 38px; // 可以自己调节到合适数值
  }

  // 横线
  .el-tree-node::after {
    content: "";
    width: 24px;
    height: 20px;
    position: absolute;
    left: -3px;
    top: 20px;
    border-width: 1px;
    border-top: 1px dashed #52627c;
  }

  // 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
  & > .el-tree-node::after {
    border-top: none;
  }

  & > .el-tree-node::before {
    border-left: none;
  }

  // 展开关闭的icon
  .el-tree-node__expand-icon {
    font-size: 16px;

    // 叶子节点（无子节点）
    &.is-leaf {
      color: transparent;
      // display: none; // 也可以去掉
    }
  }
}

.ant-alert-info {
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
}

.ant-alert {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: rgb(0, 0, 0);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: "tnum";
  position: relative;
  padding: 8px 15px 8px 37px;
  word-wrap: break-word;
  border-radius: 4px;
}
</style>