ioc-admin-ui/src/views/systemManagement/messageConfiguration/index.vue

<template>
  <div class="container">
    <div class="left-pane">
      <el-input
        placeholder="请输入关键字"
        suffix-icon="el-icon-search"
        v-model="filterText"
      ></el-input>
      <div class="tree_container">
        <el-tree
          ref="tree"
          :data="list"
          :props="defaultProps"
          node-key="id"
          default-expand-all
          :filter-node-method="filterNode"
          @node-click="handleNodeClick"
        >
          <span slot-scope="{node, data}">
            <el-image :src="data.url"></el-image>
            <span style="padding-left: 10px; vertical-align: text-bottom;">{{ node.label }}</span>
            <span class="operate_btns">
              <dropdown
                v-if="data.children==undefined"
                :events="subMenuEvents"
                :data="{ node, data }"
                @itemClick="dropDownClick"
              ></dropdown>
            </span>
          </span>
        </el-tree>
      </div>

      <el-button
        class="createNewMessageType"
        @click="createNewMessage"
      >
        <i class="el-icon-s-order"></i>
        新建消息模块
      </el-button>
    </div>
    <div class="right-pane">
      <commonMessage
        v-if="commonShow"
        v-bind="{selectedMessage:selectedMessage}"
      ></commonMessage>
    </div>
    <messageCreate
      ref="messageCreate"
      v-bind="{update:getMessageList}"
    ></messageCreate>
  </div>
</template>

<script>
import commonMessage from "./commonMessage";
import messageCreate from "./dialog/messageCreate";

import dropdown from "@/components/Dropdown/index";

import xiaoxi from "@/assets/tree/message/xiaoxi@2x.png";

import api from "@/api/message/api";

export default {
  components: {
    commonMessage,
    messageCreate,
    dropdown,
  },
  data() {
    return {
      commonShow: false,
      createSHow: false,
      remindShow: false,
      filterText: "",
      list: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      form: {},
      input: "",
      subMenuEvents: [{ label: "删除", funcName: "removeNode" }],
      selectedMessage: null,
    };
  },
  mounted() {
    this.getMessageList();
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    createNewMessage() {
      this.$refs.messageCreate.dialogVisible = true;
    },
    handleNodeClick(data) {
      if (!data.children) {
        this.commonShow = true;
        this.selectedMessage = data;
      }
    },
    getMessageList() {
      api
        .getMessageList()
        .then((result) => {
          let arr = [];
          let index = 1;
          for (const key in result.data.data) {
            if (Object.hasOwnProperty.call(result.data.data, key)) {
              const element = result.data.data[key].map((item) => {
                item.url = xiaoxi;
                item.label = item.name;
                return item;
              });
              let obj = {
                id: index,
                label: key,
                url: xiaoxi,
                children: element,
              };
              arr.push(obj);
              index++;
            }
          }
          this.list = arr;
        })
        .catch((err) => {});
    },
    dropDownClick(eventType, data) {
      let that = this;
      switch (eventType) {
        case "removeNode":
          // 删除
          this.$confirm(
            "此操作将删除 " + data.data.label + " , 是否继续?",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
            .then(() => {
              const loading = this.$loading({
                lock: true,
                text: "删除中，请稍后！",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)",
                customClass: "systemConfigLoading",
              });
              api
                .delMessage({
                  message_id: data.data.id,
                })
                .then((result) => {
                  loading.close();
                  if (result.data.code == 0) {
                    this.$message({
                      type: "success",
                      message: "删除成功!",
                    });
                    that.getMessageList();
                  } else {
                    this.$message({
                      type: "error",
                      message: "删除失败!",
                    });
                  }
                })
                .catch((err) => {
                  loading.close();
                  this.$message({
                    type: "error",
                    message: "删除失败!",
                  });
                });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  position: relative;
  height: 100%;
  line-height: 20px;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  display: flex;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.15);

  .left-pane {
    width: 300px;
    padding: 15px;
    height: calc(100% - 30px);
    .tree_container {
      height: calc(100% - 101px);
      margin-top: 10px;
      margin-bottom: 10px;
      overflow: hidden;
      overflow-y: auto;
      .el-tree {
        height: 100%;
        background-color: #fafafa;

        /deep/.el-tree-node__content {
          align-items: center;
          height: 30px;
          cursor: pointer;
          font-size: 16px;
          position: relative;
          color: #999999;
          padding-top: 10px;
          padding-left: 30px !important;

          .operate_btns {
            position: absolute;
            right: 20px;
            display: none;
          }

          &:hover,
          :focus-within {
            background-color: #f7fbff;

            .operate_btns {
              display: inline;
            }
          }
        }

        /deep/.el-tree-node__children {
          .el-tree-node__content {
            padding-left: 60px !important;
          }
        }
      }
    }
    .createNewMessageType {
      position: relative;
      width: 250px;
      text-align: center;
      font-size: 16px;
      color: #fff;
      background: #3da0d6;
      color: #fff;
    }
  }

  .right-pane {
    width: calc(100% - 330px);
  }
}
</style>