hbte-saas-ui 0.0.2 → 1.0.0

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

@@ -1,219 +0,0 @@
-/**
- * 事件模拟工具
- * 提供给编辑控件使用，处理一些常规控件无法处理的情景
- * 目前仅支持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

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

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

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

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

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

package/packages/fragment/src/main.vue

@@ -1,74 +0,0 @@
-//借鑫哥组件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

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

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

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