hbte-saas-ui 0.0.1

package/packages/authority/src/main.vue

@@ -0,0 +1,606 @@
+<template>
+  <div class="hb-authority">
+    <div class="hb-authority-role-list">
+      <div class="title">角色</div>
+      <ul class="list">
+        <li
+          @click="tabRole(item.id)"
+          class="item"
+          v-for="item in roleList"
+          :key="item.id"
+          :class="{ active: item.id === roleId }"
+        >
+          <p>{{ item.roleName }}</p>
+          <div class="edit" v-show="item.id === roleId">
+            <el-dropdown trigger="click">
+              <span class="el-dropdown-link">
+                <i class="hbui-gengduo2"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item>
+                  <div
+                    @click="editRole(item)"
+                    class="hbui-bianji1 hb-authority-dropdown"
+                  ></div>
+                </el-dropdown-item>
+                <el-dropdown-item>
+                  <div
+                    @click="removeRole(item)"
+                    class="hbui-shanchu hb-authority-dropdown"
+                  ></div>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+        </li>
+      </ul>
+      <div class="add-role">
+        <el-button type="primary" @click="visible = true">新增角色</el-button>
+      </div>
+    </div>
+    <div class="hb-authority-config">
+      <el-tabs v-model="activePane">
+        <el-tab-pane class="role-pane" label="角色成员" name="role">
+          <el-tag
+            type="info"
+            @close="removeRoleMember(item, 1)"
+            v-for="item in roleMembers"
+            :key="`user-${item.id}`"
+            closable
+          >
+            {{ item.name }}
+          </el-tag>
+          <el-tag
+            type="info"
+            @close="removeRoleMember(item, 2)"
+            v-for="item in deptMembers"
+            :key="`dept-${item.id}`"
+            closable
+          >
+            <i class="el-icon-edit"></i> {{ item.name }}
+          </el-tag>
+          <el-button
+            type="primary"
+            plain
+            @click="openOrganizeDialog"
+            size="mini"
+            class="el-icon-plus"
+            >添加成员</el-button
+          >
+        </el-tab-pane>
+
+        <el-tab-pane label="业务权限" name="authority">
+          <slot name="range">
+            <el-form
+              :model="formInline"
+              class="demo-form-inline"
+              label-position="top"
+              v-if="formInline.menuObj"
+            >
+              <el-form-item label="数据作用对象" prop="menuObj">
+                <el-select
+                  v-model="formInline.menuObj"
+                  placeholder="数据作用对象"
+                  @change="changeMenuObj"
+                  :clearable="false"
+                  style="width: 280px"
+                >
+                  <el-option
+                    v-for="(item, index) in menuObjList"
+                    :key="index"
+                    :label="item.name"
+                    :value="item.id"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+              <el-form-item
+                label="数据类型"
+                prop="menuOrg"
+                v-if="formInline.menuObj != '2'"
+              >
+                <el-select
+                  v-model="formInline.menuOrg"
+                  placeholder="数据类型"
+                  :clearable="false"
+                  style="width: 280px"
+                >
+                  <el-option
+                    @click.native="replaceAllScope(item)"
+                    v-for="(item, index) in sacleList"
+                    :key="index"
+                    :label="item.name"
+                    :value="item.id"
+                  ></el-option>
+                </el-select>
+              </el-form-item>
+            </el-form>
+          </slot>
+          <!-- 权限树 -->
+          <el-tree
+            class="custom-tree"
+            ref="authTree"
+            :data="renderTreeData"
+            :props="defaultProps"
+            default-expand-all
+            auto-expand-parent
+            node-key="id"
+          >
+            <div slot-scope="{ node, data }">
+              <el-checkbox
+                @change="checkMenu(node, data)"
+                v-model="data.menuChecked"
+              >
+                {{ data.menuName }}{{ data.permissions.length ? "：" : "" }}
+              </el-checkbox>
+              <el-checkbox
+                v-if="data.permissions.length"
+                v-model="data.checked"
+                :indeterminate="data.isIndeterminate"
+                @change="checkTreeNode(node, data)"
+                >全选</el-checkbox
+              >
+              <el-checkbox
+                class="permission-box"
+                @change="checkPermissionNode(node)"
+                v-for="item in data.permissions"
+                v-model="item.checked"
+                :key="item.perm"
+              >
+                {{ item.permName }}
+              </el-checkbox>
+              <el-select
+                v-if="data.permissions.length && formInline.menuObj"
+                v-model="data.dataScope"
+                :disabled="formInline.menuObj == '1'"
+                :clearable="false"
+                placeholder="数据类型"
+                size="small"
+              >
+                <el-option
+                  @click.native="selectDataScope(node, item)"
+                  v-for="(item, index) in sacleList"
+                  :key="index"
+                  :label="item.name"
+                  :value="item.id"
+                ></el-option>
+              </el-select>
+            </div>
+          </el-tree>
+        </el-tab-pane>
+      </el-tabs>
+      <hb-float-footer
+        v-if="activePane === 'authority'"
+        :label="label"
+        @confirm="save"
+        @exist="reset"
+      ></hb-float-footer>
+    </div>
+    <!-- 添加角色成员（人员和部门选择组件） -->
+    <hb-organize-dialog
+      ref="organize"
+      :deptOnly="deptOnly"
+      @confirm="confirm"
+    />
+    <!-- 新增角色 -->
+    <el-dialog
+      :title="roleTitle"
+      :visible.sync="visible"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      width="440px"
+      @closed="clearRoleFormData"
+    >
+      <el-form ref="form" :rules="rules" :model="newRole">
+        <el-form-item label="角色名称" prop="roleName">
+          <el-input
+            v-model="newRole.roleName"
+            placeholder="请输入角色名称"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="描述" prop="roleDesc">
+          <el-input
+            type="textarea"
+            v-model="newRole.roleDesc"
+            placeholder="请输入描述"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="submitRoleCancel" plain>取 消</el-button>
+        <el-button type="primary" @click="submitRole">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import lodash from "lodash";
+export default {
+  name: "HbAuthority",
+  componentName: "HbAuthority",
+  data() {
+    return {
+      label: {
+        confirm: "保存",
+        exist: "重置",
+      },
+      roleTitle: "新增角色",
+      roleId: "",
+      visible: false,
+      renderTreeData: [],
+      activePane: "role",
+      authorityData: [],
+      defaultProps: {
+        children: "subMenus",
+        label: "menuName",
+      },
+      newRole: {
+        roleName: "",
+        roleDesc: "",
+        id: undefined,
+      },
+      //数据作用对象
+      menuObjList: [
+        { name: "菜单", id: "2" },
+        { name: "系统", id: "1" },
+      ],
+      //权限范围
+      sacleList: [
+        { name: "无权限", id: "1" },
+        { name: "本人的", id: "2" },
+        { name: "本部门内", id: "3" },
+        { name: "下级部门", id: "4" },
+        { name: "本部门及下级部门", id: "5" },
+        { name: "全部人员", id: "6" },
+        { name: "自选部门", id: "7" },
+      ],
+      //业务权限插槽表单数据
+      formInline: {
+        menuObj: "2",
+        menuOrg: "",
+      },
+      deptOnly: false,
+      nodeId: "",
+      selectDeptNode: [], //数据类型选择自选部门时储存的id
+    };
+  },
+  methods: {
+    submitRoleCancel() {
+      this.visible = false;
+    },
+    submitRole() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          this.$emit("submitRole", this.newRole);
+          this.visible = false;
+        }
+      });
+    },
+    editRole(role) {
+      this.roleTitle = "修改角色";
+      this.visible = true;
+      this.newRole = {
+        roleName: role.roleName,
+        roleDesc: role.roleDesc,
+        id: role.id,
+      };
+    },
+    removeRoleMember(member, type) {
+      this.$emit("removeRoleMember", member, type);
+    },
+    removeRole(role) {
+      this.$confirm(`是否删除角色${role.roleName}`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$emit("deleteRole", role.id);
+        })
+        .catch(() => {});
+    },
+    tabRole(id) {
+      this.roleId = id;
+      this.$emit("tabRole", id);
+    },
+    clearRoleFormData() {
+      this.roleTitle = "新增角色";
+      this.newRole = {
+        roleName: "",
+        roleDesc: "",
+        id: undefined,
+      };
+    },
+    openOrganizeDialog() {
+      this.deptOnly = false;
+      this.$emit("openOrganizeDialog", this.$refs.organize);
+    },
+    //提交人员和部门选择的数据
+    confirm(data) {
+      this.$refs.organize.close();
+      let deptId = [
+        ...data.localChecked.map((v) => v.id),
+        ...data.originChecked.map((v) => v.id),
+      ];
+      if (this.deptOnly) {
+        if (this.nodeId) {
+          this.renderTreeData.forEach((v) => {
+            if (this.nodeId == v.id) {
+              v.deptId = deptId;
+            } else {
+              v.subMenus.forEach((k) => {
+                if (this.nodeId == k.id) {
+                  k.deptId = deptId;
+                }
+              });
+            }
+          });
+          this.nodeId = "";
+        } else {
+          this.renderTreeData.forEach((v) => {
+            v.deptId = deptId;
+            v.subMenus.forEach((k) => {
+              k.deptId = deptId;
+            });
+          });
+          this.selectDeptNode = deptId;
+        }
+        this.selectDeptNode = [];
+      } else {
+        this.$emit("chooseOrganizeMembers", data);
+      }
+    },
+    //点击菜单勾选菜单事件
+    checkMenu(node, data) {
+      if (data.level === 1) {
+        //只处理取消勾选一级菜单事件，清空一级菜单下所有的勾选
+        !data.menuChecked &&
+          data.subMenus.forEach((v) => {
+            v.checked = data.menuChecked;
+            v.isIndeterminate = data.menuChecked;
+            v.menuChecked = data.menuChecked;
+            v.permissions.forEach((permission) => {
+              permission.checked = data.menuChecked;
+            });
+            this.checkIndeterminate(v);
+          });
+      } else {
+        data.menuChecked && (node.parent.data.menuChecked = data.menuChecked);
+        if (!data.menuChecked) {
+          data.checked = data.menuChecked;
+          data.isIndeterminate = data.menuChecked;
+          data.permissions.forEach((v) => {
+            v.checked = data.menuChecked;
+          });
+        }
+      }
+    },
+    //点击全选按钮事件
+    checkTreeNode(node, data) {
+      //只处理checked数据，将处理后的数据交给专业函数处理半选
+      if (data.level === 2) {
+        data.permissions.forEach((permission) => {
+          permission.checked = data.checked;
+        });
+        //二级菜单为否时，点击全选或者权限按钮勾选二级菜单
+        !data.menuChecked &&
+          (data.menuChecked = data.checked || data.isIndeterminate);
+        let parentData = node.parent.data;
+        //一级菜单为否时，点击全选或者权限按钮勾选一级菜单
+        parentData.subMenus.find(
+          (i) => i.checked == true || i.isIndeterminate == true
+        ) != undefined && (parentData.menuChecked = true);
+        this.checkIndeterminate(data);
+      } else {
+        let childrenKey = data.subMenus.length ? "subMenus" : "permissions";
+        data[childrenKey].forEach((item) => {
+          item.checked = data.checked;
+          if (childrenKey === "subMenus") {
+            item.permissions.forEach((i) => (i.checked = data.checked));
+          }
+        });
+        this.checkIndeterminate(data);
+      }
+    },
+    checkPermissionNode(node) {
+      let permissions = node.data.permissions;
+      if (node.data.level === 1) {
+        //点击的一级按钮
+        // 判断一级菜单是否半选
+        node.data.isIndeterminate =
+          permissions.some((i) => i.checked) &&
+          permissions.some((i) => !i.checked);
+        // 判断一级菜单是否勾选(一级按钮全勾选，一级菜单才勾选)
+        node.data.checked = permissions.every((i) => i.checked);
+        this.checkIndeterminate(node.data);
+      } else {
+        //点击的二级按钮
+        // 判断二级菜单是否半选
+        node.data.isIndeterminate =
+          permissions.some((i) => i.checked) &&
+          permissions.some((i) => !i.checked);
+        // 判断二级菜单是否勾选(一级按钮全勾选，一级菜单才勾选)
+        node.data.checked = permissions.every((i) => i.checked);
+        //只要勾选了权限，把二级菜单勾选
+        (node.data.checked || node.data.isIndeterminate) &&
+          (node.data.menuChecked = true);
+        //判断一级是否半选
+        let parentData = node.parent.data;
+        parentData.isIndeterminate =
+          parentData.subMenus.some((i) => i.isIndeterminate) ||
+          (parentData.subMenus.some((i) => i.checked) &&
+            parentData.subMenus.some((i) => !i.checked));
+        //判断一级是否勾选
+        parentData.checked = parentData.subMenus.every((i) => i.checked);
+        //只要勾选了权限，将一级菜单勾选
+        parentData.subMenus.find(
+          (i) => i.checked == true || i.isIndeterminate == true
+        ) != undefined && (parentData.menuChecked = true);
+        this.checkIndeterminate(parentData);
+      }
+    },
+    //处理半选，node是一级菜单的数据
+    checkIndeterminate(node) {
+      if (node.permissions.length) {
+        node.isIndeterminate =
+          node.permissions.some((i) => i.checked) &&
+          node.permissions.some((i) => !i.checked);
+      } else if (node.subMenus.length) {
+        //处理二级菜单的半选状态
+        node.subMenus.forEach((subMenu) => {
+          subMenu.isIndeterminate =
+            subMenu.permissions.some((i) => i.checked) &&
+            subMenu.permissions.some((i) => !i.checked);
+        });
+        //处理一级菜单的半选状态
+        node.isIndeterminate =
+          node.subMenus.some((i) => i.isIndeterminate) ||
+          (node.subMenus.some((i) => i.checked) &&
+            node.subMenus.some((i) => !i.checked));
+      }
+    },
+    //-----------插槽选择范围方法-------------
+    changeMenuObj(data) {
+      this.formInline.menuOrg = "";
+      this.selectDeptNode = [];
+      this.reset();
+      if (data == "1") {
+        this.formInline.menuOrg = "6";
+        this.replaceAllScope({ id: "6" });
+      }
+    },
+    //数据类型选择事件
+    replaceAllScope(data) {
+      if (data.id == "7") {
+        this.openDept();
+      } else {
+        this.selectDeptNode = [];
+      }
+      this.renderTreeData.forEach((v) => {
+        if (v.permissions.length) {
+          v.dataScope = data.id;
+        }
+        v.subMenus.forEach((k) => {
+          if (k.menuType === "1") {
+            k.dataScope = data.id;
+          }
+        });
+      });
+    },
+    openDept(arr) {
+      this.deptOnly = true;
+      this.$refs.organize.open();
+      this.$refs.organize.init(this.deptData[0], arr);
+    },
+    //处理菜单选择范围方法
+    selectDataScope(node, click) {
+      node.data.dataScope = click.id;
+      if (click.id == "7") {
+        this.nodeId = node.data.id;
+        node.data.depts?.forEach((v) => (v.isDept = "1"));
+        this.selectDeptNode = node.data.depts;
+        this.openDept(node.data.depts || []);
+      } else {
+        node.data.deptId = undefined;
+      }
+    },
+    //-----------插槽选择范围方法-------------
+    reset() {
+      this.renderTreeData = lodash.cloneDeep(this.treeData);
+    },
+    save() {
+      let res = {
+        menus: [],
+        permissions: [],
+        roleId: this.roleId,
+        effectObject: this.formInline.menuObj
+          ? this.formInline.menuObj
+          : undefined,
+      };
+      this.renderTreeData.forEach((menu) => {
+        if (menu.menuChecked) {
+          res.menus.push({
+            menuId: menu.id,
+            dataScope: this.formInline.menuObj ? menu.dataScope : undefined,
+            deptId: this.formInline.menuObj ? menu.deptId : undefined,
+          });
+        }
+        menu.permissions.forEach((permission) => {
+          permission.checked && res.permissions.push(permission.perm);
+        });
+        menu.subMenus.forEach((subMenu) => {
+          if (subMenu.menuChecked) {
+            res.menus.push({
+              menuId: subMenu.id,
+              dataScope: this.formInline.menuObj
+                ? subMenu.dataScope
+                : undefined,
+              deptId: this.formInline.menuObj ? subMenu.deptId : undefined,
+            });
+          }
+          subMenu.permissions.forEach((permission) => {
+            permission.checked && res.permissions.push(permission.perm);
+          });
+        });
+      });
+      this.$emit("savePemissions", res);
+    },
+  },
+  props: {
+    roleList: {
+      type: Array,
+      default: () => [],
+    },
+    roleMembers: {
+      type: Array,
+      default: () => [],
+    },
+    deptMembers: {
+      type: Array,
+      default: () => [],
+    },
+    treeData: {
+      type: Array,
+      default: () => [],
+    },
+    rules: {
+      type: Object,
+      default: () => {},
+    },
+    //获取业务权限数据范围
+    formInlineRender: {
+      type: Object,
+      default: () => ({}),
+    },
+    deptData: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  watch: {
+    treeData: {
+      immediate: true,
+      handler: function (to) {
+        this.renderTreeData = lodash.cloneDeep(to);
+      },
+    },
+    roleList: {
+      immediate: true,
+      handler: function (to) {
+        this.roleId = this.roleId || to[0]?.id || "";
+      },
+    },
+    formInlineRender: {
+      deep: true,
+      immediate: true,
+      handler: function (to) {
+        this.formInline.menuObj = to?.menuObj;
+        this.formInline.menuOrg = to?.menuOrg;
+        if (to.menuOrg == "7") {
+          this.selectDeptNode = to.selectNode;
+        }
+      },
+    },
+  },
+};
+</script>

package/packages/config.js

@@ -0,0 +1,3 @@
+export default {
+  HBFulltable: {}
+}

package/packages/custom-query/index.js

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

package/packages/custom-query/src/main.vue

@@ -0,0 +1,80 @@
+<template>
+  <hb-dialog
+    title="新建筛选"
+    width="60%"
+    ref="customQuery"
+    class="hb-customquery"
+    @submit="sumbit"
+  >
+    <el-form
+      ref="queryForm"
+      :model="qryFormData"
+      size="small"
+      label-position="top"
+      slot="normal"
+    >
+      <el-row :gutter="40">
+        <el-col v-for="(i, index) in qryFormProps" :span="12" :key="index">
+          <el-form-item :label="i.label" :prop="i.prop ? i.prop : ''">
+            <hb-query-form
+              :formProp="i"
+              :qryFormData="qryFormData"
+            ></hb-query-form>
+          </el-form-item>
+        </el-col>
+
+        <p class="hb-customquery-text">谁可以查看此列表视图？</p>
+
+        <el-col :span="12">
+          <el-radio v-model="radio" label="1"
+            >只有我可以查看此列表视图</el-radio
+          >
+        </el-col>
+        <el-col :span="12">
+          <el-radio v-model="radio" label="2"
+            >所有用户均可以查看此列表视图</el-radio
+          >
+        </el-col>
+      </el-row>
+    </el-form>
+    <!-- <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false" size="small">取消</el-button>
+      <el-button type="primary" @click="sumbit" size="small">保存</el-button>
+    </span> -->
+  </hb-dialog>
+</template>
+<script>
+export default {
+  name: "HbCustomQuery",
+  componentName: "HbCustomQuery",
+  props: {
+    qryFormProps: {
+      type: Array,
+      default: () => [],
+    },
+    qryFormData: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      radio: "1",
+      type: "",
+    };
+  },
+  methods: {
+    open(type, data) {
+      this.type = type;
+      if (type == "edit") {
+        Object.assign(this.qryFormData, data);
+      }
+      this.$refs.customQuery.open();
+    },
+    sumbit() {
+      this.$emit("customQuerySave", this.type, this.qryFormData);
+      this.$refs.customQuery.close();
+    },
+  },
+};
+</script>

package/packages/dialog/index.js

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