hbte-saas-ui 0.0.1

package/examples/views/HBAdvQuery.vue

@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <hb-advquery
+      :qryFormProps="qryFormProps"
+      :qryFormData="qryFormData"
+      :customQueryData="customQueryData"
+      @AdvQuery="handleAdvSearch"
+    >
+      <div slot="h">
+        <span>asdasdasdasd</span>
+      </div>
+    </hb-advquery>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      customQueryData: [
+        {
+          label: "aaa123123123123",
+          value: "aaa",
+        },
+        {
+          label: "bbb",
+          value: "bbb",
+        },
+      ],
+      qryFormData: {
+        a: "",
+        b: false,
+        c: "",
+        d: "",
+        e: "",
+        f: "",
+        g: [],
+        h: "",
+      },
+      qryFormProps: [
+        {
+          type: "input",
+          label: "求助事项",
+          prop: "a",
+          placeholder: "请输入求助事项",
+          maxlength: "64",
+        },
+        {
+          type: "switch",
+          label: "负责部门",
+          prop: "b",
+          placeholder: "请输入负责部门",
+        },
+        {
+          type: "radio",
+          label: "事项分类",
+          prop: "c",
+          placeholder: "请输入作业名称",
+          optListProp: {
+            label: "name",
+            value: "val",
+          },
+          optList: [
+            {
+              name: "a",
+              val: "1",
+            },
+            {
+              name: "b",
+              val: "2",
+            },
+          ],
+        },
+        {
+          type: "select",
+          label: "重要程度",
+          prop: "d",
+          multiple: true,
+          placeholder: "请选择重要程度",
+          optListProp: {
+            label: "name",
+            value: "val",
+          },
+          optList: [
+            {
+              name: "a",
+              val: "1",
+            },
+            {
+              label: "b",
+              value: "2",
+            },
+          ],
+        },
+        // {
+        //   type: "daterange",
+        //   label: "日期",
+        //   prop: "e",
+        //   placeholder: "请选择日期",
+        // },
+        // {
+        //   type: "date",
+        //   label: "日期",
+        //   prop: "f",
+        //   placeholder: "请选择日期",
+        // },
+        // {
+        //   type: "checkbox",
+        //   label: "多选",
+        //   prop: "g",
+        //   placeholder: "多选",
+        //   optList: [
+        //     {
+        //       label: "a",
+        //       value: "1",
+        //     },
+        //     {
+        //       label: "b",
+        //       value: "2",
+        //     },
+        //   ],
+        // },
+        {
+          label: "插槽",
+          prop: "h",
+          slot: true,
+        },
+        {
+          type: "daterange",
+          label: "日期",
+          prop: "e",
+          placeholder: "请选择日期",
+        },
+      ],
+    };
+  },
+  methods: {
+    /**
+     * @function handleAdvSearch 高级查询搜索
+     * 高级查询使用prop传值，直接进行查询
+     */
+    handleAdvSearch() {
+      // 查询代码
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style></style>

package/examples/views/HBAuthority.vue

@@ -0,0 +1,339 @@
+<template>
+  <div class="hb-authority-wrapper">
+    <hb-authority
+      :roleList="roleList"
+      :roleMembers="roleMembers"
+      :treeData="treeData"
+      :rules="rules"
+      @submitRole="submitRole"
+      @deleteRole="deleteRole"
+      @openOrganizeDialog="openOrganizeDialog"
+      @savePemissions="savePemissions"
+      @chooseOrganizeMembers="chooseOrganizeMembers"
+      @tabRole="tabRole"
+      @removeRoleMember="removeRoleMember"
+    />
+  </div>
+</template>
+<script>
+import lodash from "lodash";
+import { authorityId, authorityData } from "../mock/authority";
+import { deptData } from "../mock/dept";
+import organizeData from "../mock/organizeData";
+
+export default {
+  data() {
+    return {
+      roleList: [
+        {
+          orgId: null,
+          orgName: null,
+          pOrgId: null,
+          pOrgName: null,
+          id: "1448213370004070468",
+          roleName: "角色0000",
+          code: null,
+          roleDesc: "12312312",
+          type: "2",
+        },
+        {
+          orgId: null,
+          orgName: null,
+          pOrgId: null,
+          pOrgName: null,
+          id: "1457955441385267249",
+          roleName: "测试1111111",
+          code: null,
+          roleDesc: "123",
+          type: "2",
+        },
+        {
+          orgId: null,
+          orgName: null,
+          pOrgId: null,
+          pOrgName: null,
+          id: "1447809394829975603",
+          roleName: "角色12312312",
+          code: "",
+          roleDesc: "12312312",
+          type: "2",
+        },
+        {
+          orgId: null,
+          orgName: null,
+          pOrgId: null,
+          pOrgName: null,
+          id: "1457599015289286737",
+          roleName: "ceshi",
+          code: null,
+          roleDesc: "11",
+          type: "2",
+        },
+      ],
+      roleMembers: [
+        {
+          id: "123321",
+          userId: "123321",
+          name: "何波2",
+          workNo: "123321",
+          logo: "https://static-legacy.dingtalk.com/media/lADOBH98H80EZc0EZQ_1125_1125.jpg",
+        },
+        {
+          id: "817441111088824320",
+          userId: "817441111088824320",
+          name: "范绍东",
+          workNo: "00017",
+          logo: "https://static-legacy.dingtalk.com/media/lADOBH98H80EZc0EZQ_1125_1125.jpg",
+        },
+        {
+          id: "1",
+          userId: "1",
+          name: "admin",
+          workNo: "-1",
+          logo: "noway#-1_1417408911061868633.png",
+        },
+      ],
+      // 新增修改角色校验
+      rules: {
+        roleName: [
+          {
+            required: true,
+            message: "请输入角色名称",
+          },
+        ],
+        roleDesc: [
+          {
+            required: true,
+            message: "请输入描述",
+          },
+        ],
+      },
+      //权限最终渲染数据
+      treeData: [],
+      deptData: deptData,
+      // formInlineRender: {}, //如果不需要选择范围不传此参数
+      //人员部门弹窗原始数据
+      data: organizeData,
+      //远程已选的人员和部门
+      checkedList: [
+        //要把当前登录账号传进去,如果后端没返的话
+        {
+          id: "1", //admin
+          isDept: "0",
+          name: "admin",
+        },
+        {
+          id: "373449754", //微测
+          isDept: "1",
+          name: "微测中心",
+        },
+      ],
+      checkedDeptList: [],
+    };
+  },
+  created() {
+    this.getData();
+  },
+  methods: {
+    //请求权限数据
+    getData() {
+      //权限总数据
+      let p1 = new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(authorityData);
+        }, 1000);
+      });
+      //已有权限
+      let p2 = new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(authorityId);
+        }, 1500);
+      });
+      Promise.all([p1, p2]).then((res) => {
+        //传参可能要处理掉外层无用字段
+        this.mergeAuthorityData(res[0], res[1]);
+      });
+    },
+    //合并权限数据（一二级菜单的下级全选则checked才为true,为了交互逻辑牺牲了数据逻辑，）
+    mergeAuthorityData(authorityData, authorityId) {
+      //--------------不需要范围功能，props里不传formInlineRender，此处代码忽略-------------
+      // this.formInlineRender.menuObj = authorityId.effectObject || "2";
+      // if (authorityId.effectObject != "1") {
+      //   this.formInlineRender.menuOrg = "";
+      // } else {
+      //   let scope = authorityId.menus.find((v) => v.dataScope);
+      //   this.formInlineRender.menuOrg = scope?.dataScope;
+      //   if (this.formInlineRender.menuOrg == "7") {
+      //     this.formInlineRender.selectNode = scope.deptId;
+      //   }
+      // }
+
+      authorityData.forEach((menu) => {
+        menu.level = 1;
+        menu.menuChecked = false;
+
+        //给对应层级添加dataScope以及deptId字段
+        menu.dataScope = "6";
+        menu.deptId = [];
+        authorityId.menus.forEach((v) => {
+          if (menu.id == v.menuId) {
+            menu.dataScope = v.dataScope;
+            menu.deptId = v.deptId;
+          }
+        });
+
+        //如果一级菜单既有权限又有二级菜单，那么数据有误
+        if (menu.subMenus.length > 0 && menu.permissions.length > 0) {
+          this.$message.error(
+            menu.menuName + "权限数据有误，同时存在按钮权限和下级菜单"
+          );
+        }
+
+        //添加一级菜单的按钮权限的选中状态
+        menu.permissions.forEach((permission) => {
+          permission.checked = authorityId.permissions.includes(
+            permission.perm
+          );
+        });
+        //添加二级菜单的权限选中状态
+        menu.subMenus.forEach((subMenu) => {
+          subMenu.level = 2;
+          subMenu.menuChecked = false;
+
+          //给对应层级添加dataScope以及deptId字段
+          subMenu.dataScope = "6";
+          subMenu.deptId = [];
+          authorityId.menus.forEach((v) => {
+            if (subMenu.id == v.menuId) {
+              subMenu.dataScope = v.dataScope;
+              subMenu.deptId = v.deptId;
+            }
+          });
+
+          //按钮权限
+          subMenu.permissions.forEach((permission) => {
+            permission.checked = authorityId.permissions.includes(
+              permission.perm
+            );
+          });
+          //判断二级菜单是否半选（permissions有false和true）
+          let permissions = subMenu.permissions;
+          subMenu.isIndeterminate =
+            permissions.some((i) => i.checked) &&
+            permissions.some((i) => !i.checked);
+
+          /**
+           * 二级菜单权限选中逻辑
+           * 1.有按钮权限
+           * 半选 checked:false
+           * 非半选  1)按钮权限全选 checked:true
+           *        2)按钮权限全不选 checked:false
+           * 注意数组为0，every返回true
+           * 2.没按钮权限，根据id匹配
+           */
+          if (permissions.length) {
+            subMenu.checked = permissions.every((i) => i.checked);
+          } else {
+            subMenu.checked = authorityId.menus
+              .map((m) => m.menuId)
+              .includes(subMenu.id);
+          }
+
+          //如果有三级菜单，则数据有误
+          if (subMenu.subMenus.length) {
+            this.$message.error(
+              subMenu.menuName + "权限数据有误，同时存在按钮权限和下级菜单"
+            );
+          }
+
+          subMenu.menuChecked = authorityId.menus
+            .map((m) => m.menuId)
+            .includes(subMenu.id);
+        });
+
+        /**
+         * 一级菜单半选逻辑
+         * 1)有子半选
+         * 2)子选和子不选同时存在（无子半选）
+         */
+        let childrenKey = menu.subMenus.length ? "subMenus" : "permissions";
+        let subNode = menu[childrenKey];
+        menu.isIndeterminate =
+          subNode.some((i) => i.isIndeterminate) ||
+          (subNode.some((i) => i.checked) && subNode.some((i) => !i.checked));
+
+        /**
+         * 一级菜单权限选中逻辑
+         * 无二级菜单同时无一级按钮，根据id匹配
+         * 有一级按钮：全部选中 =>true
+         * 有二级菜单：全部选中 =>true
+         * */
+        if (!menu.subMenus.length && !menu.permissions.length) {
+          menu.checked = authorityId.menus
+            .map((m) => m.menuId)
+            .includes(menu.id);
+        } else {
+          menu.checked = menu[childrenKey].every((i) => i.checked);
+        }
+        menu.menuChecked = authorityId.menus
+          .map((m) => m.menuId)
+          .includes(menu.id);
+      });
+      //建议深拷贝一份，如果源数据有多处使用的情况的话
+      this.treeData = lodash.cloneDeep(authorityData);
+      console.log(this.treeData);
+    },
+    //打开选择人员部门的弹窗并传入数据
+    openOrganizeDialog(dialog) {
+      dialog.open();
+      let p1 = new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(this.data); //!!!!!data是obj不是array
+        }, 0);
+      });
+      let p2 = new Promise((resolve) => {
+        setTimeout(() => {
+          resolve(this.checkedList);
+        }, 0);
+      });
+      Promise.all([p1, p2])
+        .then((res) => {
+          dialog.init(res[0], res[1]);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    //保存权限
+    savePemissions(data) {
+      console.log("已选择的权限数据：", data);
+    },
+    //提交选择的人员和部门
+    chooseOrganizeMembers(data) {
+      console.log("已选择的人员部门数据：", data);
+    },
+    submitRole(formData) {
+      console.log("有id是修改角色，反之新增：", formData);
+    },
+    deleteRole(id) {
+      console.log("删除角色：", id);
+    },
+    tabRole(id) {
+      console.log("切换角色：", id);
+    },
+    removeRoleMember(member, type) {
+      //type为1是成员，2是部门
+      console.log("移出角色成员", member, type);
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.hb-authority-wrapper {
+  height: calc(100vh - 90px);
+  width: calc(100vw - 500px);
+  padding-top: 80px;
+  padding-bottom: 10px;
+  margin-left: 200px;
+}
+</style>

package/examples/views/HBDialog.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <el-button @click="open">打开弹窗</el-button>
+    <hb-dialog title="弹窗" ref="dialog">
+      <template v-slot:before>
+        <div>前置插槽 before</div>
+      </template>
+      <template v-slot:form>
+        <div>表单插槽 form</div>
+      </template>
+      <template v-slot:normal>
+        <div>普通插槽 normal</div>
+      </template>
+      <template v-slot:after>
+        <div>后置插槽 after</div>
+      </template>
+      <template v-slot:bottom>
+        <div>底部插槽 bottom</div>
+      </template>
+    </hb-dialog>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      activeName: "first",
+    };
+  },
+  methods: {
+    open() {
+      this.$refs.dialog.open();
+    },
+  },
+};
+</script>
+
+<style>
+</style>