ioc-admin-ui/src/views/systemManagement/infoConfiguration/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="data"
          :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">
              <!-- v-if="data.children" -->
              <dropdown
                :events="data.id?menuEvents:subMenuEvents"
                :data="{ node, data }"
                @itemClick="dropDownClick"
              ></dropdown>
            </span>
          </span>
        </el-tree>
      </div>
      <!-- <el-button class="createNewInfoMessageType"><i class="el-icon-s-order"></i>新建信息配置模块</el-button> -->
    </div>
    <div class="right-pane">
      <floorInfo
        v-if="winType == 1"
        v-bind="{
          itemInfo:itemInfo
        }"
      ></floorInfo>
      <SecuritystaffInfo
        v-if="winType == 2"
        v-bind="{
          itemInfo:itemInfo
        }"
      ></SecuritystaffInfo>
    </div>
    <createFloor ref="createFloor"></createFloor>
    <createInfo ref="createInfo"></createInfo>
  </div>
</template>

<script>
import dropdown from "@/components/Dropdown/index";
import floorInfo from "./floorInfo";
import SecuritystaffInfo from "./securitystaffInfo";

import createFloor from "./dailog/createFloor.vue";
import createInfo from "./dailog/createInfo.vue";

import louceng from "@/assets/tree/strategy/louceng@3x.png";
import huiyishi from "@/assets/tree/strategy/huiyishi@3x.png";
import { isArray } from "@/utils/validate";

export default {
  components: {
    floorInfo,
    dropdown,
    SecuritystaffInfo,
    createFloor,
    createInfo,
  },
  data() {
    return {
      floorShow: true,
      infoShow: false,
      filterText: "",
      winType: 0,
      itemInfo: null,
      data: [
        {
          id: 1,
          url: louceng,
          type: "floor",
          label: "楼层地图信息配置",
          children: [
            {
              url: huiyishi,
              label: "1F",
            },
            {
              url: huiyishi,
              label: "15F",
            },
            {
              url: huiyishi,
              label: "20F",
            },
            {
              url: huiyishi,
              label: "21F",
            },
            {
              url: huiyishi,
              label: "B1",
            },
            {
              url: huiyishi,
              label: "B3",
            },
          ],
        },
        {
          id: 2,
          url: louceng,
          label: "安保人员信息",
          children: [
            {
              url: huiyishi,
              label: "前台人员排班信息",
            },
            {
              url: huiyishi,
              label: "安防人员排班信息",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      menuEvents: [{ label: "新建", funcName: "addNode" }],
      subMenuEvents: [
        // { label: "新建", funcName: "addNode" },
        // { label: "上移", funcName: "moveUp" },
        // { label: "下移", funcName: "moveDown" },
        // { label: "编辑", funcName: "editNode" },
        { label: "删除", funcName: "removeNode" },
      ],
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(data, node) {
      if (!isArray(node.parent.data)) {
        switch (node.parent.data.type) {
          case "floor":
            this.winType = 1;
            break;
          default:
            this.winType = 2;
            break;
        }
        this.itemInfo = {
          data: JSON.parse(JSON.stringify(data)),
          parentData: JSON.parse(JSON.stringify(node.parent.data)),
        };
      }
    },
    dropDownClick(eventType, data) {
      switch (eventType) {
        case "addNode":
          if (data.data.type != "floor") {
            this.$refs.createInfo.dialogVisible = true;
          } else {
            this.$refs.createFloor.dialogVisible = true;
          }
          break;
        case "removeNode":
          // 删除楼层
          this.$confirm(
            "此操作将删除 " + data.data.label + " , 是否继续?",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
            .then(() => {
              this.$message({
                type: "success",
                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% - 50px);
      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;
          }
        }
      }
    }
    .createNewInfoMessageType {
      position: relative;
      width: 250px;
      text-align: center;
      font-size: 16px;
      color: #fff;
      background: #3da0d6;
      color: #fff;
    }
  }

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

  //   .el-button {
  //     position: absolute;
  //     left: 40px;
  //     bottom: 15px;
  //     width: 250px;
  //     text-align: center;
  //     font-size: 16px;
  //     color: #fff;
  //     background: #3da0d6;
  //   }
}

// .el-tag {
//   position: absolute;
//   background-color: transparent;
//   border-color: transparent;
//   font-size: 25px;
//   color: #000;
//   top: 20px;
//   left: 20px;
// }

// .el-button--text {
//   position: absolute;
//   top: 70px;
//   right: 20px;
// }
</style>