hbte-saas-ui 0.0.1

package/packages/edit-area/src/simulateEvent.js

@@ -0,0 +1,219 @@
+/**
+ * 事件模拟工具
+ * 提供给编辑控件使用，处理一些常规控件无法处理的情景
+ * 目前仅支持focus和tap
+ */
+
+// 配置
+const CONFIG = {
+  /** 忽略以下class，避免类似点击elementUI的select下拉浮层时触发到事件 */
+  ignoreClass: [
+    "el-popper", // body上弹窗
+    "el-select-dropdown", // 下拉弹窗
+    "el-form-item__content", // input控件区域
+  ],
+  /** tap判断最大距离(px)和时间(ms) */
+  tapMaxRange: 45,
+  tapMaxTime: 300,
+};
+
+// 事件数组队列管理
+const MANAGER = {
+  focus: {
+    queue: [
+      // {
+      //   el: div,
+      //   events: [...callback]
+      // }
+    ],
+  },
+  tap: {
+    queue: [],
+  },
+};
+
+/**
+ * 模拟focus，情景为点击绑定节点及其子节点之外的地方时触发
+ * 解决部分elementUI控件不支持focus事件，以及change、blur事件异常的问题
+ */
+const eventFocus = function (e) {
+  let tempNode = e.target;
+  const nodeList = MANAGER.focus.queue.map((item) => item.el);
+  while (tempNode.nodeName !== "HTML") {
+    let partenIndex;
+    if (
+      nodeList.find((item, index) => {
+        partenIndex = index;
+        return tempNode === item;
+      })
+    ) {
+      // 点击到了目标节点内部取消触发
+      nodeList.splice(partenIndex, 1);
+    } else if (CONFIG.ignoreClass.find((str) => tempNode.className.indexOf(str) !== -1)) {
+      // 忽略指定节点
+      return;
+    } else {
+      // 未找到该class继续往上找
+      tempNode = tempNode.parentNode;
+    }
+  }
+  // 递归到html结束循环，剩余没有匹配到的节点触发事件
+  MANAGER.focus.queue.forEach((item) => {
+    if (nodeList.indexOf(item.el) !== -1) {
+      item.events.forEach((fn) => fn(e));
+    }
+  });
+};
+
+/**
+ * 模拟tap，情景为点击时间小于指定毫秒，以及移动距离不超过指定像素时触发
+ * 解决输入时选择文本移动到了节点之外的情景
+ */
+
+const tapCache = {
+  listen: false,
+  startX: null,
+  moveX: null,
+  startY: null,
+  moveY: null,
+  startTime: null,
+  moveTime: null,
+};
+const eventTapMouseDown = function (e) {
+  tapCache.listen = true;
+  tapCache.startX = e.clientX;
+  tapCache.startY = e.clientY;
+  tapCache.startTime = Date.now();
+  tapCache.moveX = 0;
+  tapCache.moveY = 0;
+  tapCache.moveTime = 0;
+};
+const eventTapMouseMove = function (e) {
+  if (tapCache.listen) {
+    tapCache.moveX = e.clientX - tapCache.startX;
+    tapCache.moveY = e.clientY - tapCache.startY;
+    tapCache.moveTime = Date.now() - tapCache.startTime;
+  }
+};
+const eventTapMouseUp = function (e) {
+  if (tapCache.listen) {
+    const moveX = tapCache.moveX;
+    const moveY = tapCache.moveY;
+    const moveTime = tapCache.moveTime;
+    if (
+      Math.abs(moveX) <= CONFIG.tapMaxRange &&
+      Math.abs(moveY) <= CONFIG.tapMaxRange &&
+      Math.abs(moveTime) <= CONFIG.tapMaxTime
+    ) {
+      // 查找事件源节点或者其父节点，是否存在于队列之中
+      let tempNode = e.target;
+      const nodeList = [tempNode];
+      if (tempNode.nodeName !== "HTML") {
+        do {
+          tempNode = tempNode.parentNode;
+          nodeList.push(tempNode);
+        } while (tempNode.nodeName !== "HTML");
+      }
+      // 执行点击到的事件队列
+      MANAGER.tap.queue.forEach((item) => {
+        if (nodeList.indexOf(item.el) !== -1) {
+          item.events.forEach((fn) => fn(e));
+        }
+      });
+    }
+    // 重置
+    tapCache.listen = false;
+    tapCache.startX = null;
+    tapCache.moveX = null;
+    tapCache.startY = null;
+    tapCache.moveY = null;
+    tapCache.startTime = null;
+    tapCache.moveTime = null;
+  }
+};
+
+/**
+ * 队列绑定与解绑
+ */
+const bindEvent = function (event, node, fn) {
+  if (!Object.prototype.hasOwnProperty.call(MANAGER, event)) {
+    return false;
+  }
+  const targetEvent = MANAGER[event];
+  if (node && typeof node === "object" && typeof fn === "function") {
+    // 推入事件队列
+    let targetNode = targetEvent.queue.find((item) => item.el === node);
+    if (!targetNode) {
+      targetNode = {
+        el: node,
+        events: [fn],
+      };
+      targetEvent.queue.push(targetNode);
+    }
+    let targetFn = targetNode.events.find((item) => item === fn);
+    if (!targetFn) {
+      targetNode.events.push(fn);
+      targetFn = fn;
+    }
+  }
+};
+const unBindEvent = function (event, node, fn) {
+  if (!Object.prototype.hasOwnProperty.call(MANAGER, event)) {
+    return false;
+  }
+  const targetEvent = MANAGER[event];
+  if (arguments.length === 1) {
+    // 不传参数表示全部移除
+    targetEvent.queue = [];
+    return;
+  }
+  if (node && typeof node === "object") {
+    let targetNode = targetEvent.queue.find((item) => item.el === node);
+    if (targetNode) {
+      if (arguments.length === 2) {
+        // 不传fn表示移除所有事件
+        targetNode.events = [];
+        return;
+      }
+      if (typeof fn === "function") {
+        // 移除指定fn
+        targetNode.events = targetNode.events.filter((item) => item !== fn);
+      }
+    }
+  }
+};
+
+/**
+ * 初始化，在html上绑定focus
+ */
+const init = function () {
+  const htmlNode = document.getElementsByTagName("html")[0];
+  // 初始化tap
+  htmlNode.addEventListener("mousedown", eventTapMouseDown);
+  htmlNode.addEventListener("mousemove", eventTapMouseMove);
+  htmlNode.addEventListener("mouseup", eventTapMouseUp);
+  // 初始化focus
+  bindEvent("tap", htmlNode, eventFocus); // 使用tap代理click
+};
+
+init();
+
+// 提供给外部
+// window.__simulateEvent__ = {
+//   bindFocus,
+//   unBindFocus,
+//   bindTap,
+//   unBindTap,
+// };
+export const bindFocus = function (node, fn) {
+  return bindEvent("focus", node, fn);
+};
+export const unBindFocus = function (node, fn) {
+  return unBindEvent("focus", node, fn);
+};
+export const bindTap = function (node, fn) {
+  return bindEvent("tap", node, fn);
+};
+export const unBindTap = function (node, fn) {
+  return unBindEvent("tap", node, fn);
+};

package/packages/filter-drop/index.js

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

package/packages/filter-drop/src/main.vue

@@ -0,0 +1,107 @@
+<template>
+  <div
+    class="hb-filterdrop"
+    :class="disabledFilter ? 'hb-filterdrop--disabled' : ''"
+  >
+    <el-dropdown
+      ref="dropdown"
+      trigger="click"
+      :placement="placement"
+      :indeterminate="true"
+      :hide-on-click="false"
+      @visible-change="visibleEvent"
+    >
+      <span class="changeData">
+        <slot name="dropdown"> </slot>
+      </span>
+      <el-dropdown-menu
+        slot="dropdown"
+        class="hb-filterdrop__dropdown-selectMenu"
+      >
+        <DragAble
+          class="hb-filterdrop__main-darggable"
+          v-model="checkList"
+          infinite-scroll-immediate="false"
+          infinite-scroll-disabled="false"
+        >
+          <div
+            class="hb-filterdrop__darggable-selectItem"
+            :style="{ display: item.always ? 'none' : '' }"
+            v-for="(item, index) in checkList"
+            :key="index"
+          >
+            <el-checkbox
+              class="hb-filterdrop__custom-drop-checkbox"
+              v-if="item.currentSelect !== undefined"
+              v-model="item.currentSelect"
+            >
+              {{ item.label }}
+            </el-checkbox>
+          </div>
+        </DragAble>
+
+        <div class="hb-filterdrop__custom-dropdown-btn">
+          <el-button :loading="loading" type="primary" @click="save"
+            >保存</el-button
+          >
+          <el-button @click="close">取消</el-button>
+        </div>
+      </el-dropdown-menu>
+    </el-dropdown>
+    <div class="hb-filterdrop__cover" v-if="disabledFilter"></div>
+  </div>
+</template>
+
+<script>
+import dragable from "vuedraggable";
+export default {
+  name: "HbFilterdrop",
+  componentName: "HbFilterdrop",
+  inheritAttrs: false,
+  data() {
+    return {
+      checkList: [],
+      loading: false,
+    };
+  },
+  props: {
+    // 列配置
+    columns: {
+      type: Array,
+      default: () => [],
+    },
+    // 弹出位置 同element
+    placement: {
+      type: String,
+      default: "bottom-end",
+    },
+    // 是否禁用
+    disabledFilter: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    save() {
+      this.$emit("columnsChange", this.checkList);
+      this.$refs.dropdown.hide();
+    },
+    close() {
+      this.$refs.dropdown.hide();
+    },
+    onOpen() {
+      this.checkList = this.$lodash.cloneDeep(this.columns);
+    },
+    onClose() {
+      //还原list
+      this.checkList = this.$lodash.cloneDeep(this.columns);
+    },
+    visibleEvent(e) {
+      e ? this.onOpen() : null;
+    },
+  },
+  components: {
+    DragAble: dragable,
+  },
+};
+</script>

package/packages/float-footer/index.js

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

package/packages/float-footer/src/main.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="hb-float-footer" :style="{ zIndex }">
+    <slot name="footer">
+      <el-button @click="exist">{{ label.exist }}</el-button>
+      <el-button @click="confirm" type="primary">{{ label.confirm }}</el-button>
+    </slot>
+  </div>
+</template>
+<script>
+export default {
+  name: "HbFloatFooter",
+  componentName: "HbFloatFooter",
+  data() {
+    return {};
+  },
+  methods: {
+    confirm() {
+      this.$emit("confirm");
+    },
+    exist() {
+      this.$emit("exist");
+    },
+  },
+  props: {
+    label: {
+      type: Object,
+      default: () => {
+        return {
+          confirm: "确定",
+          exist: "取消",
+        };
+      },
+    },
+    zIndex: {
+      type: Number,
+      default: 100,
+    },
+  },
+};
+</script>

package/packages/fragment/index.js

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

package/packages/fragment/src/main.vue

@@ -0,0 +1,74 @@
+//借鑫哥组件edit-area重写的碎片化编辑
+<template>
+  <div class="hb-fragment">
+    <el-row :gutter="20" class="hb-fragment__layout">
+      <el-col
+        :lg="{ span: item.entireLine ? 24 : '4-8' }"
+        :sm="{ span: item.entireLine ? 24 : 8 }"
+        :xs="{ span: item.entireLine ? 24 : 12 }"
+        :style="{ paddingBottom }"
+        v-for="(item, index) in detailData"
+        :key="index"
+      >
+        <p class="hb-fragment__title">{{ item.name }}</p>
+        <!-- <div :class="{ 'text-overflow': !entireLine }" :title="value">
+          <a
+            v-if="item.hyperLink && item.value"
+            :href="
+              item.value.includes('http') || item.value.includes('https')
+                ? item.value
+                : '//' + item.value
+            "
+            target="_blank"
+            >{{ item.value || "---" }}</a
+          >
+          <span v-esle>
+            {{ item.value || "---" }}
+          </span>
+        </div> -->
+        <div class="hb-fragment__value">
+          <div v-if="item.edit">
+            {{ item.value || "---" }}
+          </div>
+          <hb-editarea
+            v-else
+            :type="item.type"
+            :value.sync="item.value"
+            :validate="item.validate"
+            :insert="item.insert"
+            :change="item.change"
+            :optList="item.optList"
+            :multiple="item.multiple"
+          >
+          </hb-editarea>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HbFragment",
+  componentName: "HbFragment",
+  props: {
+    //传入的接口数据，需要处理为统一字段格式
+    detailData: {
+      type: Array,
+      default: () => [],
+    },
+    //布局下padding
+    paddingBottom: {
+      type: String,
+      default: "20px",
+    },
+  },
+  data() {
+    return {};
+  },
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style></style>

package/packages/fragment/src/old.vue

@@ -0,0 +1,144 @@
+<template>
+  <div
+    class="hb-fragment background"
+    ref="fragment"
+    :style="{ paddingBottom }"
+    @dblclick="startEdit"
+    @mouseenter="iconShow = true"
+    @mouseleave="iconShow = false"
+  >
+    <span class="hb-fragment__title">
+      {{ fragObj.title }}
+    </span>
+    <span
+      ><i class="el-icon-edit" v-show="iconShow && !edit && disabled"></i
+    ></span>
+    <el-tooltip effect="dark" :content="fragObj.show" placement="top-start">
+      <div class="hb-fragment__value" v-if="!edit && disabled">
+        {{ editType == "input" ? fragObj.value : fragObj.show }}
+      </div>
+    </el-tooltip>
+    <div class="hb-fragment__value--writable" v-if="edit && disabled">
+      <slot :name="fragObj.key">
+        <el-input
+          v-if="editType == 'input'"
+          v-model="fragObj.value"
+          ref="input"
+          clearable
+          @blur="submit"
+        ></el-input>
+        <el-select
+          v-if="editType == 'select'"
+          v-model="fragObj.value"
+          @change="submit"
+          ref="select"
+        >
+          <el-option
+            v-for="item in option"
+            :key="item.code"
+            :label="item.name"
+            :value="item.code"
+          >
+          </el-option>
+        </el-select>
+        <el-date-picker
+          v-if="editType == 'datepicker'"
+          v-model="fragObj.value"
+          type="date"
+          value-format="yyyy-MM-dd"
+          ref="datepicker"
+          placeholder="选择日期"
+          @blur="submit"
+        >
+        </el-date-picker>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "HbFragMentOld",
+  componentName: "HbFragMentOld",
+  props: {
+    //基本数据结构，包括渲染的标题title\字段名key\字段值value\展示值show
+    fragObj: {
+      type: Object,
+      default: () => ({
+        title: "",
+        value: "",
+        key: "",
+        show: "",
+      }),
+    },
+    //是否可以编辑,默认为是
+    disabled: {
+      type: Boolean,
+      default: true,
+    },
+    //组件类型
+    editType: {
+      type: String,
+      default: "input",
+    },
+    //下拉框中的option，支持数据字典名以及数组
+    option: {
+      type: [String, Array],
+      default: "",
+    },
+    //布局下padding
+    paddingBottom: {
+      type: String,
+      default: "0",
+    },
+  },
+  data() {
+    return {
+      edit: false,
+      iconShow: false,
+      timer: "",
+    };
+  },
+  // mounted() {
+  //   document.addEventListener("click", (e) => {
+  //     const selectBox = this.$refs.fragment;
+  //     if (!selectBox.contains(e.target)) {
+  //       console.log("点击了外部");
+  //       this.edit = false;
+  //     }
+  //   });
+  // },
+  methods: {
+    startEdit() {
+      this.edit = true;
+      this.$nextTick(() => {
+        this.editType == "input" && this.$refs.input.focus();
+        this.editType == "select" && this.$refs.select.focus();
+        this.editType == "datepicker" && this.$refs.date.focus();
+      });
+    },
+    // //下拉框相关事件
+    // selectFocus() {
+    //   clearTimeout(this.timer);
+    //   console.log("触发聚焦");
+    // },
+    // selectChange() {
+    //   this.$refs.select.focus();
+    //   // this.edit = false;
+    //   console.log("触发改变");
+    // },
+    // selectBlur() {
+    //   this.timer = setTimeout(() => {
+    //     console.log("失焦了");
+    //     this.edit = false;
+    //     this.$emit("selectSubmit", this.fragObj);
+    //   }, 100);
+    // },
+    //通用失焦
+    submit() {
+      this.edit = false;
+      this.$emit("update");
+    },
+  },
+};
+</script>

package/packages/full-table/index.js

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

package/packages/full-table/src/config.js

@@ -0,0 +1,14 @@
+export default {
+  // 是否默认开启分页
+  defPaging: true,
+  // 默认页码配置
+  defPageData: {
+    pageSize: 50,
+    pageNum: 1,
+    total: 0,
+  },
+  // 默认每页条数下拉
+  defPageSizes: [20, 50, 100],
+  // 默认开启排序过滤
+  defShowFilter: true,
+};