hbte-saas-ui 0.0.1

package/examples/views/HBImageViewer.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="wrapper">
+    <img
+      v-for="(item, index) in urls"
+      :src="item"
+      :key="index"
+      alt=""
+      @click="show(index)"
+    />
+    <!-- <hb-image-viewer></hb-image-viewer> -->
+    <div>
+      <pre>
+        快捷键功能   esc => 关闭弹窗
+                    →   => 下一张
+                    ←   => 上一张
+                    鼠标滚轮下  => 放大
+                    鼠标滚轮上  => 缩小
+
+      </pre>
+    </div>
+  </div>
+</template>
+<script>
+import img1 from "../image/hb-image-viewer/3k.jpg";
+import img2 from "../image/hb-image-viewer/a.jpg";
+import img3 from "../image/hb-image-viewer/b.jpg";
+
+export default {
+  data() {
+    return {
+      zIndex: 200, //组件内默认100
+      urls: [img1, img2, img3],
+    };
+  },
+  methods: {
+    show(index) {
+      this.$hbViewer({
+        urls: this.urls,
+        activeIndex: index,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  img {
+    width: 100px;
+    height: 100px;
+    object-fit: contain;
+    border: 1px solid #000;
+    margin: 10px;
+    background: #fff;
+  }
+}
+</style>

package/examples/views/HBNavMenu.vue

@@ -0,0 +1,37 @@
+<template>
+  <div>
+    <hb-navmenu :data="menuList" :props="defaultProps"></hb-navmenu>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      menuList: [
+        {
+          label: "说明1",
+          icon: "el-icon-delete",
+          path: "/HBNavMenu",
+          children: [
+            {
+              label: "说明文字说明文字说明文字",
+              icon: "el-icon-delete",
+              path: "/HBNavMenu/pathsub1",
+            },
+          ],
+        },
+      ],
+      defaultProps: {
+        icon: "icon",
+        label: "label",
+        path: "path",
+        children: "children",
+        id: "id",
+      },
+    };
+  },
+};
+</script>
+
+<style></style>

package/examples/views/HBOrganizeDialog.vue

@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <hb-organize-dialog
+      :deptOnly="deptOnly"
+      :cancelAble="cancelAble"
+      ref="organize"
+      @confirm="confirm"
+    />
+    <el-button @click="open">选择部门和人员</el-button>
+    <el-button @click="openDept">仅选择部门</el-button>
+  </div>
+</template>
+<script>
+import organizeData from "../mock/organizeData";
+import { deptData } from "../mock/dept";
+
+export default {
+  data() {
+    return {
+      deptOnly: false,
+      cancelAble: true,
+      checkedList: [
+        //要把当前登录账号传进去,如果后端没返的话
+        {
+          id: "1",
+          isDept: "0",
+          name: "admin",
+          key: "value", //传入额外的key在选中时会抛出来！！
+        },
+        {
+          id: "373449754",
+          isDept: "1",
+          name: "微测中心",
+        },
+        {
+          id: "425752602",
+          isDept: "1",
+          name: "区域中心",
+        },
+        {
+          id: "774345882437943296",
+          isDept: "0",
+          name: "刘洋",
+        },
+        {
+          id: "774345860757585920",
+          isDept: "0",
+          name: "尹松",
+        },
+        {
+          id: "774345856772997120",
+          isDept: "0",
+          name: "许小辉",
+        },
+      ],
+      checkedDeptList: [
+        {
+          id: "455215811",
+          name: "商务组",
+        },
+        {
+          id: "455114863",
+          name: "销售组",
+        },
+      ],
+      data: organizeData,
+    };
+  },
+  methods: {
+    openDept() {
+      this.deptOnly = true;
+      this.$refs.organize.open();
+      let p1 = new Promise((resolve) => {
+        setTimeout(() => {
+          this.fixData(deptData);
+          resolve(deptData);
+        }, 0);
+      });
+      let p2 = new Promise((resolve) => {
+        setTimeout(() => {
+          let arr = this.checkedDeptList.map((item) =>
+            Object.assign(item, { isDept: "1" })
+          );
+          resolve(arr);
+        }, 0);
+      });
+      Promise.all([p1, p2])
+        .then((res) => {
+          this.$refs.organize.init(res[0][0], res[1]);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    fixData(deptData) {
+      deptData.forEach((item) => {
+        item.children = item.child || [];
+        item.isDept = "1";
+        item.child?.length && this.fixData(item.child);
+      });
+    },
+    open() {
+      this.deptOnly = false;
+      this.$refs.organize.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) => {
+          this.$refs.organize.init(res[0], res[1]);
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    },
+    confirm(data) {
+      console.log(data);
+      //不会自动关闭人员选择框需要手动调用
+      // this.$refs.organize.close()
+    },
+  },
+};
+</script>
+
+<style>
+</style>

package/examples/views/HBPagination.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <hb-pagination
+      :columns="columns"
+      :pageData="pageData"
+      :pageSizes="pageSizes"
+      @change="handlePageChange"
+      @changeColumn="handleChangeColumn"
+    >
+    </hb-pagination>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      columns: [
+        {
+          prop: "name",
+          label: "名称",
+          currentSelect: true,
+        },
+        {
+          prop: "code",
+          label: "编码",
+          currentSelect: true,
+        },
+        {
+          prop: "company",
+          label: "公司",
+          currentSelect: true,
+        },
+        {
+          prop: "addr",
+          label: "地址",
+          currentSelect: true,
+        },
+        {
+          prop: "desc",
+          label: "简介",
+          currentSelect: true,
+        },
+        {
+          prop: "remark",
+          label: "说明",
+          currentSelect: true,
+        },
+      ],
+      // 分页配置
+      pageData: {
+        pageSize: 2,
+        pageNum: 1,
+        total: 100,
+      },
+      pageSizes: [2, 30, 50, 100],
+    };
+  },
+  methods: {
+    /**
+     * @function handleChangeColumn 列改变
+     */
+    handleChangeColumn(newColumns) {
+      this.$message.success("列改变");
+      this.columns = newColumns;
+    },
+    /**
+     * @function handlePageChange 页码改变
+     */
+    handlePageChange() {
+      //
+      this.$message.success("页码改变");
+      console.log(arguments);
+    },
+  },
+  mounted() {},
+};
+</script>
+
+<style></style>

package/examples/views/HBSelectVague.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="demo-wrapper">
+    <hb-select-vague
+      :options="options"
+      :defaultProps="defaultProps"
+      multiple
+      v-model="selected"
+      @change="onSelected"
+    ></hb-select-vague>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      options: [
+        {
+          id: 1,
+          name: "刘洋",
+          disabled: true,
+        },
+        {
+          id: 2,
+          name: "柏飞",
+        },
+        {
+          id: 3,
+          name: "白费了",
+        },
+        {
+          id: 4,
+          name: "一百飞",
+        },
+      ],
+      defaultProps: {
+        value: "id",
+        label: "name",
+      },
+      selected: "",
+    };
+  },
+  methods: {
+    onSelected(res) {
+      //this.formData.selectValue = res 模拟数据绑定
+      console.log("hb-selected下拉框已选数据：", res);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.demo-wrapper {
+  display: flex;
+  justify-content: center;
+  padding-top: 150px;
+}
+</style>

package/examples/views/HBToolgroup.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <hb-toolgroup
+      :icons="['add', 'test', 'upload', 'delete']"
+      :tools="tools"
+      @event="handleEvent"
+      @search="handleSearch"
+    >
+      <el-button size="mini">附加按钮</el-button>
+    </hb-toolgroup>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      tools: [{ event: "test", text: "测试" }],
+    };
+  },
+  methods: {
+    handleEvent(event) {
+      this.$message.success(`事件：${event}`);
+    },
+    handleSearch(kw) {
+      this.$message.success(`搜索：${kw}`);
+    },
+  },
+};
+</script>

package/examples/views/HBTopBar.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <hb-top-bar></hb-top-bar>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+
+<style>
+</style>

package/lib/demo.html

@@ -0,0 +1,10 @@
+<meta charset="utf-8">
+<title>hbte-ui demo</title>
+<script src="./hbte-ui.umd.js"></script>
+
+<link rel="stylesheet" href="./hbte-ui.css">
+
+
+<script>
+console.log(hbte-ui)
+</script>