hbte-saas-ui 0.0.2 → 1.0.2

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

@@ -1,277 +0,0 @@
-<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

@@ -1,5 +0,0 @@
-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

@@ -1,427 +0,0 @@
-<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>