hbte-saas-ui 0.0.1

package/packages/nav-menu/src/main.vue

@@ -0,0 +1,277 @@
+<template>
+  <div
+    class="hb-navmenu"
+    :class="[
+      isAbsolute ? (isCollapse ? 'hb-navmenu--open' : '') : '',
+      isTransition ? 'hb-navmenu--transition' : '',
+    ]"
+  >
+    <nav class="hb-navmenu-main">
+      <slot name="logo"></slot>
+      <div
+        :class="
+          isActive(index)
+            ? 'hb-navmenu-main__item hb-navmenu-main__item--isactive'
+            : 'hb-navmenu-main__item'
+        "
+        v-for="(item, index) in data"
+        :key="index"
+        @click="navigatToPath(item)"
+      >
+        <i :class="item[props.icon]"></i>
+        <p class="hb-navmenu-main__explain">
+          {{ item[props.label] }}
+        </p>
+      </div>
+    </nav>
+    <div
+      :class="[
+        isCollapse ? 'hb-navmenu-sub' : 'hb-navmenu-sub hb-navmenu-sub--closed',
+        isTransition ? 'hb-navmenu-sub--transition' : '',
+      ]"
+    >
+      <i
+        class="hbui-shouqi hb-navmenu--collapse"
+        v-if="isCollapseShowIcon"
+        @click="changecollapse"
+      ></i>
+      <i
+        class="hbui-zhankai hb-navmenu--collapse-closed"
+        v-else
+        @click="changecollapse"
+      ></i>
+      <div class="hb-navmenu-sub-hide">
+        <div class="hb-navmenu-sub-content">
+          <p class="hb-navmenu-sub-content__title">
+            {{ navMenuTitle }}
+          </p>
+          <div
+            :class="
+              subIsActive(index)
+                ? 'hb-navmenu-sub-content--active hb-navmenu-sub-item'
+                : 'hb-navmenu-sub-item'
+            "
+            v-for="(item, index) in subNnavMenuList"
+            :key="index"
+            @click="navigatToPath(item, false)"
+          >
+            <i :class="item[props.icon]"></i>
+            {{ item[props.label] }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+//用props传数据！！！！
+export default {
+  name: "HbNavmenu",
+  componentName: "HbNavmenu",
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+    /**
+     * 菜单id用于当前选中高亮，不传时采用path字段来判断，需要每个path都存在且不重复
+     */
+    props: {
+      type: Object,
+      default: () => ({
+        icon: "icon",
+        label: "label",
+        path: "path",
+        children: "children",
+        id: "",
+      }),
+    },
+    //路由跳转方式path或name
+    pushWay: {
+      type: String,
+      default: "path",
+    },
+    // 路由base
+    baseUrl: {
+      type: String,
+    },
+    //子菜单是否占用组件宽度
+    isAbsolute: {
+      type: Boolean,
+      default: true,
+    },
+    isTransition: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      isCollapse: true,
+      isCollapseShowIcon: true,
+      navMenuTitle: "",
+      subNnavMenuList: [],
+      checked: [],
+    };
+  },
+  created() {
+    this.selectPath();
+  },
+  watch: {
+    data: {
+      deep: true,
+      immediate: true,
+      handler(newRouter, oldRouter) {
+        if (newRouter != oldRouter) {
+          this.selectPath();
+        }
+      },
+    },
+    currentPath: {
+      immediate: true,
+      handler(newRouter, oldRouter) {
+        if (newRouter != oldRouter) {
+          this.selectPath();
+        }
+      },
+    },
+    //抛出菜单宽度更改
+    isCollapse(newV) {
+      this.$emit("changeWidth", newV);
+    },
+  },
+  computed: {
+    // 当前系统路由跳转Key
+    routerKey() {
+      return this.props.path;
+    },
+    currentPath() {
+      if (this.baseUrl) {
+        return (this.$route[this.pushWay] || "").split(this.baseUrl)[1] || "/";
+      } else {
+        // 适应于不属于微服务的情况下  处理高亮
+        return this.$route[this.pushWay];
+      }
+    },
+  },
+  methods: {
+    isActive(index) {
+      return index == this.checked[0];
+    },
+    subIsActive(index) {
+      return this.checked[1] == index;
+    },
+    // 导航栏展开与关闭
+    changecollapse() {
+      this.isCollapse = !this.isCollapse;
+      if (!this.isTransition) {
+        this.isCollapseShowIcon = this.isCollapse;
+      } else {
+        setTimeout(() => {
+          this.isCollapseShowIcon = this.isCollapse;
+        }, 100);
+      }
+      this.$emit("changeCollapse", this.isCollapse);
+    },
+    // 获取路由地址，设置一二级导航高亮
+    selectPath() {
+      if (!this.data.length) return;
+      let Fn = (list, parent = [], checked = []) => {
+        for (let index = 0; index < list.length; index++) {
+          const current = list[index];
+          let Path = current[this.routerKey];
+          let match = Path?.match(/\/:(.)*/g);
+          let newPath = Path?.replace(/\/:(.)*/g, "");
+          if (match?.length && this.currentPath.indexOf(newPath) == 0) {
+            return {
+              parent: [...parent, current],
+              checked: [...checked, index],
+            };
+          }
+          if (Path == this.currentPath) {
+            return {
+              parent: [...parent, current],
+              checked: [...checked, index],
+            };
+          } else {
+            let result = Fn(
+              current[this.props.children] || [],
+              [...parent, current],
+              [...checked, index]
+            );
+            if (result) {
+              return result;
+            }
+          }
+        }
+      };
+      const routeObj = Fn(this.data);
+      if (routeObj) {
+        this.navMenuTitle = routeObj.parent[0][this.props.label];
+        this.subNnavMenuList = routeObj.parent[0][this.props.children] || [];
+        //取消三级高亮判断
+        this.checked = routeObj.checked;
+        this.changecollapseCreated();
+      } else {
+        this.navMenuTitle = "";
+        this.checked = [];
+        this.subNnavMenuList = [];
+        this.changecollapseCreated();
+      }
+    },
+    // 侧边导航栏路由跳转
+    navigatToPath(item, flag = true) {
+      let addBase = this.pushWay != "name";
+      if (flag) {
+        this.navMenuTitle = item[this.props.label];
+        this.subNnavMenuList = item[this.props.children] || [];
+        if (!this.subNnavMenuList.length) {
+          this.$router.push({
+            [this.pushWay]: `${addBase ? this.baseUrl : ""}${
+              item[this.routerKey]
+            }`,
+          });
+        } else {
+          this.$router.push({
+            [this.pushWay]: `${addBase ? this.baseUrl : ""}${
+              this.subNnavMenuList[0][this.routerKey]
+            }`,
+          });
+        }
+        this.checked = [];
+      } else {
+        if (this.currentPath === item[this.routerKey]) {
+          this.selectPath();
+        }
+        this.$router.push({
+          [this.pushWay]: `${addBase ? this.baseUrl : ""}${
+            item[this.routerKey]
+          }`,
+        });
+      }
+      this.changecollapseCreated();
+      // 抛出事件传递一个布尔值，false表示子导航收起，true表示子导航展开
+    },
+
+    // 判断子导航展开与否
+    changecollapseCreated() {
+      if (this.subNnavMenuList.length <= 0) {
+        this.isCollapse = false;
+      } else {
+        this.isCollapse = true;
+      }
+
+      if (!this.isTransition) {
+        this.isCollapseShowIcon = this.isCollapse;
+      } else {
+        setTimeout(() => {
+          this.isCollapseShowIcon = this.isCollapse;
+        }, 100);
+      }
+      this.$emit("changeCollapse", this.isCollapse);
+    },
+  },
+};
+</script>
+

package/packages/organize-dialog/index.js

@@ -0,0 +1,5 @@
+import HbOrganizeDialog from "./src/main.vue";
+HbOrganizeDialog.install = function (Vue) {
+  Vue.component(HbOrganizeDialog.name, HbOrganizeDialog);
+};
+export default HbOrganizeDialog;

package/packages/organize-dialog/src/main.vue

@@ -0,0 +1,427 @@
+<template>
+  <div class="hb-organizedialog">
+    <el-dialog
+      :title="deptOnly ? '选择部门' : '选择部门和人员'"
+      v-bind="$attrs"
+      :visible.sync="visible"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      width="700px"
+      @closed="clear"
+    >
+      <div v-if="loading" class="hb-organizedialog__loading">数据加载中...</div>
+      <div v-else class="content hb-organizedialog__wrapper">
+        <!-- 左侧已选择 -->
+        <div class="hb-organizedialog__part hb-organizedialog__choosed">
+          <div class="hb-organizedialog__choosed-wrapper">
+            <div class="hb-organizedialog__choosed-list">
+              <!-- 远程已选择 -->
+              <div
+                class="hb-organizedialog__choosed-list--origin item"
+                :class="{ allowed: cancelAble }"
+                v-for="item in checkedData.originChecked"
+                :key="item.id + item.isDept"
+              >
+                {{ item.name }}
+                <i
+                  class="el-icon-close"
+                  v-if="cancelAble"
+                  @click="removecheckedData(item)"
+                ></i>
+              </div>
+              <!-- 本地已选择 -->
+              <div
+                class="hb-organizedialog__choosed-list--local item"
+                v-for="item in checkedData.localChecked"
+                :key="item.id + item.isDept"
+              >
+                {{ item.name }}
+                <i class="el-icon-close" @click="removecheckedData(item)"></i>
+              </div>
+            </div>
+          </div>
+          <!-- 搜索 -->
+          <div class="hb-organizedialog__search">
+            <el-input
+              size="small"
+              @focus="keywordsChange($event.target.value)"
+              @input="keywordsChange"
+              v-model="keyWords"
+              placeholder="支持全拼或首拼检索"
+            />
+            <el-dropdown
+              trigger="click"
+              ref="searchBox"
+              @command="chooseSearchResult"
+            >
+              <span></span>
+              <el-dropdown-menu
+                slot="dropdown"
+                class="hb-organizedialog__organization"
+              >
+                <template v-if="searchData.length">
+                  <el-dropdown-item
+                    v-for="item in searchData"
+                    :key="item.id"
+                    :command="item"
+                    :disabled="item.checked"
+                  >
+                    <span><img class="avatar" :src="item.logo" alt="" /></span>
+                    <span v-html="item.html"></span>
+                  </el-dropdown-item>
+                </template>
+                <template v-else>
+                  <el-dropdown-item
+                    ><span>没有搜到任何结果</span></el-dropdown-item
+                  >
+                </template>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+          <!-- 底部按钮 -->
+          <div class="hb-organizedialog__foot">
+            <el-button
+              type="primary"
+              @click="confirm"
+              :disabled="!checkedNodesNumber"
+              size="small"
+            >
+              确定
+              <span v-if="!deptOnly">
+                {{
+                  "( " +
+                  checkedNodesNumber +
+                  " / " +
+                  countMembers(fullTreeData) +
+                  " )"
+                }}
+              </span>
+            </el-button>
+            <el-button size="small" @click="close">取消</el-button>
+          </div>
+        </div>
+
+        <!-- 右侧tree -->
+        <div class="hb-organizedialog__part hb-organizedialog__tree">
+          <!-- 公司 -->
+          <div class="hb-organizedialog__tree-company">{{ company }}</div>
+          <!-- 组织路径 -->
+          <div class="hb-organizedialog__nav">
+            <div
+              class="hb-organizedialog__nav-item"
+              v-for="(item, index) in navPathData"
+              :key="item.id"
+              :class="{ 'not-allow': item.active }"
+              @click="positionDept(index)"
+            >
+              {{ item.name }}
+            </div>
+          </div>
+          <!-- 组织树 -->
+          <div class="hb-organizedialog__tree-wrapper">
+            <el-checkbox v-model="allChecked" @change="chooseAll"
+              >全选</el-checkbox
+            >
+            <div
+              class="hb-organizedialog__tree-item"
+              v-for="item in renderData"
+              :key="item.id + item.isDept"
+            >
+              <el-checkbox
+                v-model="item.checked"
+                :disabled="item.disabled && !cancelAble"
+                @change="
+                  (boolean) => {
+                    chooseMember(item, fullTreeData, boolean);
+                    isAllChecked();
+                  }
+                "
+              >
+                <!-- 头像 -->
+                <span v-if="item.isDept === '0'"
+                  ><img :src="item.logo" class="avatar" alt=""
+                /></span>
+                <!-- 名称 -->
+                <span>{{ item.name }}</span>
+                <!-- 人数 -->
+                <span v-if="item.isDept === '1' && !deptOnly">{{
+                  " (" + item.members + ") "
+                }}</span>
+              </el-checkbox>
+              <el-button
+                class="subordinate-btn"
+                v-if="item.isDept === '1' && item.children.length"
+                @click="unfold(item)"
+                :disabled="item.checked"
+                :class="{ 'not-allow': item.checked }"
+              >
+                下级
+              </el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import { cloneDeep } from "lodash";
+import pinyinMatch from "pinyin-match";
+export default {
+  name: "HbOrganizeDialog",
+  componentName: "HbOrganizeDialog",
+  data() {
+    return {
+      visible: false,
+      loading: true,
+      company: "",
+      fullTreeData: [], //完整的已加工的树形数据
+      disableData: [], //远程已选中的项（禁用状态）
+      renderData: [], //当前渲染的项
+      navPathData: [], //组织树路径
+      searchData: [], //搜索结果项集合
+      keyWords: "",
+      allChecked: false,
+      timer: null, //模糊搜索节流
+    };
+  },
+  computed: {
+    checkedData() {
+      let originChecked = [];
+      let localChecked = [];
+      chooseNodes(this.fullTreeData, this);
+      function chooseNodes(nodes, _this) {
+        nodes.forEach((node) => {
+          if (node.checked && node.disabled) {
+            let isSameNode = originChecked.some((i) =>
+              _this.isSameNode(i, node)
+            );
+            !isSameNode && originChecked.push(node);
+          } else if (node.checked && !node.disabled) {
+            let isSameNode = localChecked.some((i) =>
+              _this.isSameNode(i, node)
+            );
+            !isSameNode && localChecked.push(node);
+          }
+          chooseNodes(node.children, _this);
+        });
+      }
+      return {
+        originChecked,
+        localChecked,
+      };
+    },
+    checkedNodesNumber() {
+      return (
+        this.checkedData.localChecked.length +
+        (this.cancelAble ? this.checkedData.originChecked.length : 0)
+      );
+    },
+  },
+  methods: {
+    open() {
+      this.visible = true;
+    },
+    close() {
+      this.visible = false;
+    },
+    clear() {
+      this.loading = true;
+      this.company = "";
+      this.disableData = [];
+      this.renderData = [];
+      this.navPathData = [];
+      this.searchData = [];
+      this.keyWords = "";
+      this.allChecked = false;
+      this.timer = null;
+    },
+    //初始化界面
+    init(originData = {}, disableData = []) {
+      if (!originData.children) {
+        return;
+      }
+      // 初始化公司名
+      this.company = originData.name;
+      // 初始化组织树数据
+      this.disableData = disableData;
+      this.fullTreeData = this.factoryTreeData(cloneDeep(originData.children));
+      // 初始化组织路径
+      this.navPathData.push({
+        id: originData.id,
+        name: originData.name,
+        children: this.fullTreeData,
+        active: true,
+      });
+      this.renderTree();
+      // 组织树数据初始化完成
+      this.loading = false;
+    },
+    //check节点时，因可能存在相同的节点，需要全部选中（人员出现在多个部门，部门出现在不同分组中）
+    chooseMember(target, nodes, boolean) {
+      nodes.forEach((node) => {
+        this.isSameNode(target, node) && (node.checked = boolean);
+        this.chooseMember(target, node.children, boolean);
+      });
+    },
+    factoryTreeData(originData, parentName = this.company) {
+      originData.forEach((node) => {
+        //是否远程已选
+        let target = this.disableData.find((i) => this.isSameNode(i, node));
+        //将远程已选数据的额外字段合并到treeNode数据上
+        target && Object.assign(node, target);
+        node.checked = node.disabled = Boolean(target);
+        node.members = this.deptOnly ? 0 : this.countMembers(node.children);
+        node.parentName = parentName;
+        this.factoryTreeData(node.children, node.name);
+      });
+      return originData;
+    },
+    //初始化组织树数据
+    renderTree(nodes = this.fullTreeData) {
+      this.renderData = nodes;
+      this.isAllChecked();
+    },
+    //全选
+    chooseAll(boolean) {
+      this.renderData.forEach((node) => {
+        if (this.cancelAble) {
+          node.checked = boolean;
+          this.chooseMember(node, this.fullTreeData, boolean);
+        } else {
+          if (!node.disabled) {
+            node.checked = boolean;
+            this.chooseMember(node, this.fullTreeData, boolean);
+          }
+        }
+      });
+      this.isAllChecked();
+    },
+    //移除已选择的选项
+    removecheckedData(node) {
+      this.chooseMember(node, this.fullTreeData, false);
+      this.isAllChecked();
+    },
+    //判断是否形成全选,并处理全选按钮
+    isAllChecked() {
+      this.allChecked = this.renderData.every((node) => node.checked);
+    },
+    //判断是不是同一个节点
+    isSameNode(reference, target) {
+      return reference.id === target.id && reference.isDept === target.isDept;
+    },
+    //计算原始数据成员数
+    countMembers(subNodes, prevnum = []) {
+      subNodes.forEach((item) => {
+        item.isDept === "0" && prevnum.push(item.id);
+      });
+      subNodes.forEach((item) => {
+        if (item.isDept === "1" && item.children.length) {
+          this.countMembers(item.children, prevnum);
+        }
+      });
+      return [...new Set(prevnum)].length;
+    },
+    //展开此组织层级
+    unfold(node) {
+      //更新组织树路径
+      this.navPathData.forEach((item) => (item.active = false));
+      this.navPathData.push({
+        id: node.id,
+        name: node.name,
+        active: true,
+        children: node.children,
+      });
+      //渲染新的组织树节点
+      this.renderTree(node.children);
+      //判断是否全选
+      this.isAllChecked();
+    },
+    //切换到指定组织
+    positionDept(num) {
+      // 修改组织路径
+      this.navPathData = this.navPathData.filter((item, index) => index <= num);
+      this.navPathData.forEach((item, index) => {
+        item.active = num === index;
+      });
+      // 初始化组织树数据
+      this.renderTree(this.navPathData[num].children);
+      //判断是否全选
+      this.isAllChecked();
+    },
+    confirm() {
+      this.$emit("confirm", this.checkedData);
+    },
+    //输入搜索关键字（节流）
+    keywordsChange(value) {
+      if (this.timer) {
+        clearTimeout(this.timer);
+      }
+      this.timer = setTimeout(() => {
+        value = value.trim();
+        if (value) {
+          this.$refs.searchBox.show();
+          this.searchData = [];
+          this.vagueSearch(value);
+          //如果有结果，高亮关键字
+          this.highlightWords();
+          this.searchData.sort((a, b) => a.isDept - b.isDept);
+        } else {
+          this.$refs.searchBox.hide();
+        }
+      }, 500);
+    },
+    //从搜索结果中选取节点
+    chooseSearchResult(node) {
+      this.keyWords = "";
+      this.chooseMember(node, this.fullTreeData, true);
+      this.isAllChecked();
+    },
+    //模糊搜索（支持拼音）
+    vagueSearch(value, originData = this.fullTreeData) {
+      originData.forEach((node) => {
+        let matched = pinyinMatch.match(node.name, value);
+        if (matched) {
+          //去重
+          let isInCludes = this.searchData.some((i) =>
+            this.isSameNode(i, node)
+          );
+          if (!isInCludes) {
+            this.searchData.push(node);
+          }
+        }
+        if (node.children.length) {
+          this.vagueSearch(value, node.children);
+        }
+      });
+    },
+    //高亮匹配的搜索关键字
+    highlightWords() {
+      if (this.searchData.length) {
+        let keyWordsArr = this.keyWords.split("");
+        this.searchData.forEach((item) => {
+          let targetArr = item.name.split("");
+          targetArr.forEach((word, index, self) => {
+            let include = keyWordsArr.includes(word);
+            self[index] = include ? `<i>${word}</i>` : word;
+          });
+          item.html =
+            (item.isDept === "1" ? `${item.parentName} / ` : "") +
+            targetArr.join("");
+        });
+      }
+    },
+  },
+  props: {
+    deptOnly: {
+      type: Boolean,
+      default: false,
+    },
+    cancelAble: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>