tianheng-ui 0.1.0 → 0.1.2

package/packages/ImagePreview/index.vue

@@ -0,0 +1,386 @@
+<template>
+  <div class="th-image-preview">
+    <!-- 预览外层图片 -->
+    <div class="th-preview">
+      <div
+        v-for="(item, index) in imgArr"
+        v-if="!startIndex && startIndex !== 0 && !src"
+        :key="srcKey ? index : item"
+        class="th-preview-item-out"
+        @click="clickHandler(index)"
+      >
+        <img
+          :src="srcKey ? item[srcKey] : imgArr[index]"
+          class="th-preview-item-image-out"
+          @click="onClick"
+        />
+      </div>
+    </div>
+
+    <!-- 预览组件 -->
+    <transition name="viewer-fade">
+      <template v-if="showViewer">
+        <div class="th-image-viewer__wrapper">
+          <!-- 阴影外层遮罩 -->
+          <div class="th-image-viewer__mask" @click="onClose"></div>
+          <!-- 关闭按钮 -->
+          <span
+            class="th-image-viewer__btn th-image-viewer__close"
+            @click="onClose"
+          >
+            <i class="el-icon-close"></i>
+          </span>
+
+          <div class="th-image-viewer__item" v-if="this.topList">
+            <div
+              v-for="(item, index) in imgArr"
+              :key="srcKey ? index : item"
+              class="th-preview-item-ins zindex"
+              @click="clickHandler(index)"
+            >
+              <img
+                :src="srcKey ? item[srcKey] : item"
+                class="th-preview-item-image-ins"
+              />
+            </div>
+          </div>
+
+          <!-- 图片前进后退 -->
+          <template v-if="!isSingle">
+            <span
+              class="th-image-viewer__btn th-image-viewer__prev"
+              @click="prev"
+            >
+              <i class="th-icon-arrow-left" />
+            </span>
+            <span
+              class="th-image-viewer__btn th-image-viewer__next"
+              @click="next"
+            >
+              <i class="th-icon-arrow-right" />
+            </span>
+          </template>
+
+          <!-- 旋转等操作按钮 -->
+          <div class="th-image-viewer__btn th-image-viewer__actions">
+            <div class="el-image-viewer__actions__inner">
+              <i class="el-icon-zoom-out" @click="handleActions('zoomOut')"></i>
+              <i class="el-icon-zoom-in" @click="handleActions('zoomIn')"></i>
+              <i class="el-image-viewer__actions__divider"></i>
+              <i :class="mode.icon" @click="toggleMode"></i>
+              <i :class="showIcon" @click="showList"></i>
+              <i class="el-image-viewer__actions__divider"></i>
+              <i
+                class="el-icon-refresh-left"
+                @click="handleActions('anticlocelise')"
+              ></i>
+              <i
+                class="el-icon-refresh-right"
+                @click="handleActions('clocelise')"
+              ></i>
+            </div>
+          </div>
+          <!-- 中心大图 -->
+          <div class="th-image-viewer__canvas">
+            <img
+              v-for="(url, i) in imgArr"
+              v-if="i === index"
+              ref="img"
+              class="th-image-viewer__img"
+              :key="srcKey ? i : url"
+              :src="srcKey ? url[srcKey] : imgArr[index]"
+              :style="imgStyle()"
+              @mousedown="handleMouseDown"
+              @load="changeImg(url)"
+            />
+          </div>
+        </div>
+      </template>
+    </transition>
+  </div>
+</template>
+
+<script>
+const Mode = {
+  CONTAIN: {
+    name: "contain",
+    icon: "el-icon-full-screen"
+  },
+  ORIGINAL: {
+    name: "original",
+    icon: "el-icon-c-scale-to-original"
+  }
+};
+
+const mousewheelEventName = isFirefox() ? "DOMMouseScroll" : "mousewheel";
+
+import { rafThrottle, isFirefox } from "element-ui/src/utils/util";
+import { on, off } from "element-ui/src/utils/dom";
+
+export default {
+  name: "ThImagePreview",
+  props: {
+    imgArr: Array,
+    srcKey: String,
+    startIndex: Number,
+    src: String,
+    onClose: {
+      type: Function,
+      default: () => {}
+    },
+    onClick: {
+      type: Function,
+      default: () => {}
+    },
+    showViewer: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      srcNum: null,
+      firstNum: 0,
+      topList: false,
+      showIcon: "el-icon-picture-outline",
+      showView: false,
+      index: this.startIndex,
+      mode: Mode.CONTAIN,
+      transform: {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: false
+      }
+    };
+  },
+  computed: {
+    isSingle() {
+      if (!this.srcKey) {
+        return;
+      }
+      return this.imgArr.length <= 1;
+    },
+    currentImg() {
+      return this.srcKey ? this.imgArr[this.srcKey] : this.imgArr;
+    },
+    isFirst() {
+      return this.index === 0;
+    },
+    isLast() {
+      if (!this.srcKey) {
+        return;
+      }
+      return this.index === this.imgArr.length - 1;
+    }
+  },
+  watch: {
+    currentImg(val) {
+      this.$nextTick(_ => {
+        const $img = this.$refs.img[0];
+        // if (!$img.complete) {
+        //   this.loading = true;
+        // }
+      });
+    },
+    showViewer() {
+      if (!this.showViewer) {
+        this.firstNum = 0;
+        this.showIcon = "el-icon-picture-outline";
+        this.topList = false;
+      }
+      if (this.showViewer) {
+        let bodyStyle = document.body.style;
+        bodyStyle.overflow = "hidden";
+      }
+    }
+  },
+  mounted() {
+    this.deviceSupportInstall();
+    this.srcClick();
+  },
+  methods: {
+    // 监听键盘事件
+    deviceSupportInstall() {
+      this._keyDownHandler = e => {
+        e.stopPropagation();
+        const keyCode = e.keyCode;
+        switch (keyCode) {
+          // ESC
+          case 27:
+            this.onClose();
+            break;
+          // SPACE
+          case 32:
+            this.toggleMode();
+            break;
+          // LEFT_ARROW
+          case 37:
+            this.prev();
+            break;
+          // UP_ARROW
+          case 38:
+            this.handleActions("zoomIn");
+            break;
+          // RIGHT_ARROW
+          case 39:
+            this.next();
+            break;
+          // DOWN_ARROW
+          case 40:
+            this.handleActions("zoomOut");
+            break;
+        }
+      };
+      this._mouseWheelHandler = rafThrottle(e => {
+        const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
+        if (delta > 0) {
+          this.handleActions("zoomIn", {
+            zoomRate: 0.015,
+            enableTransition: false
+          });
+        } else {
+          this.handleActions("zoomOut", {
+            zoomRate: 0.015,
+            enableTransition: false
+          });
+        }
+      });
+      on(document, "keydown", this._keyDownHandler);
+      on(document, mousewheelEventName, this._mouseWheelHandler);
+    },
+    deviceSupportUninstall() {
+      off(document, "keydown", this._keyDownHandler);
+      off(document, mousewheelEventName, this._mouseWheelHandler);
+      this._keyDownHandler = null;
+      this._mouseWheelHandler = null;
+    },
+    handleMouseDown(e) {
+      // if (this.loading || e.button !== 0) return;
+
+      const { offsetX, offsetY } = this.transform;
+      const startX = e.pageX;
+      const startY = e.pageY;
+      this._dragHandler = rafThrottle(ev => {
+        this.transform.offsetX = offsetX + ev.pageX - startX;
+        this.transform.offsetY = offsetY + ev.pageY - startY;
+      });
+      on(document, "mousemove", this._dragHandler);
+      on(document, "mouseup", ev => {
+        off(document, "mousemove", this._dragHandler);
+      });
+
+      e.preventDefault();
+    },
+    // 显示隐藏这招内图片列表
+    showList() {
+      if (!this.topList) {
+        this.showIcon = "el-icon-picture";
+        this.topList = true;
+      } else {
+        this.showIcon = "el-icon-picture-outline";
+        this.topList = false;
+      }
+    },
+    clickHandler(i) {
+      this.prevOverflow = document.body.style.overflow;
+      this.index = i;
+      this.$emit("on-click");
+    },
+    // 后退
+    prev() {
+      if (this.isFirst && !this.infinite) return;
+      const len = this.imgArr.length;
+      this.index = (this.index - 1 + len) % len;
+    },
+    // 前进
+    next() {
+      if (this.isLast && !this.infinite) return;
+      const len = this.imgArr.length;
+      this.index = (this.index + 1) % len;
+    },
+    changeImg(e) {
+      this.firstNum += 1;
+      if (this.firstNum !== 1) {
+        this.$emit("on-change", e);
+      }
+    },
+    // 图片放大缩小样式
+    imgStyle() {
+      const { scale, deg, offsetX, offsetY, enableTransition } = this.transform;
+      const style = {
+        transform: `scale(${scale}) rotate(${deg}deg)`,
+        transition: enableTransition ? "transform .3s" : "",
+        "margin-left": `${offsetX}px`,
+        "margin-top": `${offsetY}px`
+      };
+      if (this.mode === Mode.CONTAIN) {
+        style.maxWidth = style.maxHeight = "100%";
+      }
+      return style;
+    },
+    // 重置图片大小
+    reset() {
+      this.transform = {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: false
+      };
+    },
+    toggleMode() {
+      const modeNames = Object.keys(Mode);
+      const modeValues = Object.values(Mode);
+      const index = modeValues.indexOf(this.mode);
+      const nextIndex = (index + 1) % modeNames.length;
+      this.mode = Mode[modeNames[nextIndex]];
+      this.reset();
+    },
+    // 点击操作列表
+    handleActions(action, options = {}) {
+      const { zoomRate, rotateDeg, enableTransition } = {
+        zoomRate: 0.2,
+        rotateDeg: 90,
+        enableTransition: true,
+        ...options
+      };
+      const { transform } = this;
+      switch (action) {
+        case "zoomOut":
+          if (transform.scale > 0.2) {
+            transform.scale = parseFloat(
+              (transform.scale - zoomRate).toFixed(3)
+            );
+          }
+          break;
+        case "zoomIn":
+          transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3));
+          break;
+        case "clocelise":
+          transform.deg += rotateDeg;
+          break;
+        case "anticlocelise":
+          transform.deg -= rotateDeg;
+          break;
+      }
+      transform.enableTransition = enableTransition;
+    },
+    srcClick() {
+      if (this.srcKey) {
+        if (!this.startIndex) {
+          // console.log(this.src,this.imgArr);
+          this.imgArr.forEach((item, index) => {
+            if (item[this.srcKey] === this.src) {
+              this.index = index;
+            }
+          });
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped></style>

package/packages/Row/index.js

@@ -0,0 +1,8 @@
+import Row from "./index.vue";
+
+/* istanbul ignore next */
+Row.install = function(Vue) {
+  Vue.component(Row.name, Row);
+};
+
+export default Row;

package/packages/Row/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <div :class="selfClass" :style="selfStyle">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ThRow",
+  props: { gutter: Number, flex: Boolean, justify: String, align: String },
+  computed: {
+    selfClass() {
+      let className = "th-row";
+      if (this.flex) className = `${className} th-row-flex`;
+      return className;
+    },
+    selfStyle() {
+      const style = {};
+      if (this.gutter) {
+        style.marginLeft = `-${this.gutter / 2}px`;
+        style.marginRight = style.marginLeft;
+      }
+      if (this.justify) {
+        style.justifyContent = this.justify;
+      }
+      if (this.align) {
+        style.alignItems = this.align;
+      }
+      return style;
+    }
+  }
+};
+</script>

package/packages/Table/action.js

@@ -0,0 +1,8 @@
+import TableAction from "./action.vue";
+
+/* istanbul ignore next */
+TableAction.install = function(Vue) {
+  Vue.component(TableAction.name, TableAction);
+};
+
+export default TableAction;

package/packages/Table/action.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="th-table-action" @click.stop>
+    <template v-for="(item, index) in actions">
+      <el-popover
+        v-if="item.act === 'delete' && !btnHide(item)"
+        v-model="pop"
+        :key="index"
+        placement="top"
+        width="180"
+        trigger="manual"
+      >
+        <p>{{ item.delmsg || msg }}</p>
+        <div style="text-align: right; margin: 0">
+          <el-button type="text" :disabled="loadingDel" @click="handleCancel"
+            >取消</el-button
+          >
+          <el-button
+            type="text"
+            :loading="loadingDel"
+            @click="handleDelete(item)"
+            >确定</el-button
+          >
+        </div>
+        <el-button
+          :style="item.style"
+          slot="reference"
+          :disabled="loadingDel || btnDisabled(item)"
+          :type="item.type"
+          :icon="item.icon"
+          @click="pop = true"
+          >{{ item.name }}</el-button
+        >
+      </el-popover>
+      <el-dropdown
+        v-else-if="item.act === 'more' && !btnHide(item)"
+        :key="index"
+        :trigger="item.trigger || 'click'"
+        :placement="item.placement || 'bottom-end'"
+        :disabled="btnDisabled(item)"
+        @command="
+          value => {
+            handleMore(value, index, item);
+          }
+        "
+      >
+        <el-button
+          :style="item.style"
+          :disabled="loadingDel || btnDisabled(item)"
+          :type="item.type"
+          :icon="item.icon"
+          >{{ item.name }}</el-button
+        >
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item
+            v-for="(btnItem, btnIndex) in item.children"
+            :key="btnIndex"
+            :style="btnItem.style"
+            :command="btnItem.act"
+            :icon="btnItem.icon"
+            :disabled="btnItem.disabled"
+            >{{ btnItem.name }}</el-dropdown-item
+          >
+        </el-dropdown-menu>
+      </el-dropdown>
+      <el-button
+        v-else-if="!btnHide(item)"
+        :key="index"
+        :style="item.style"
+        :type="item.type"
+        :icon="item.icon"
+        :disabled="btnDisabled(item)"
+        @click="handleClick(item)"
+        >{{ item.name }}</el-button
+      >
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ThTableAction",
+  props: {
+    actions: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    scope: {
+      type: Object | String
+    },
+    permission: {
+      type: Object,
+      required: false
+    },
+    msg: {
+      type: String,
+      default: "确定删除本条数据吗？"
+    }
+  },
+  data() {
+    return {
+      pop: false,
+      loadingDel: false
+    };
+  },
+  computed: {
+    btnDisabled() {
+      return item => {
+        if (typeof item.disabled == "boolean") {
+          return item.disabled;
+        }
+        if (typeof item.disabled == "function") {
+          return item.disabled(this.scope);
+        }
+      };
+    },
+    btnHide() {
+      return item => {
+        if (typeof item.hide == "boolean") {
+          return item.hide;
+        }
+        if (typeof item.hide == "function") {
+          return item.hide(this.scope);
+        }
+      };
+    }
+  },
+  methods: {
+    handleCancel() {
+      this.loadingDel = false;
+      this.pop = false;
+    },
+    handleClick(item, callback) {
+      this.$emit("on-click", item, callback);
+    },
+    handleDelete(item) {
+      this.loadingDel = true;
+      const callback = bool => {
+        bool ? this.handleCancel() : (this.loadingDel = false);
+      };
+      this.handleClick(item, callback);
+    },
+    handleMore(value, index, item) {
+      for (let i = 0; i < item.children.length; i++) {
+        const element = item.children[i];
+        if (element.act === value) {
+          this.handleClick(element);
+          break;
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style lang="less">
+.th-table-action {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  .el-button + .el-button {
+    margin-left: 0px;
+  }
+}
+</style>

package/packages/Table/column.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <template v-for="(item, index) in options">
+      <template v-if="!item.hide">
+        <el-table-column
+          v-if="item.type"
+          :key="index"
+          :type="item.type"
+          :label="item.label"
+          width="50"
+        >
+        </el-table-column>
+        <el-table-column
+          v-else-if="item.children"
+          :key="index"
+          :prop="item.prop"
+          :label="item.label"
+          :width="item.width"
+          :align="item.align"
+          :fixed="item.fixed"
+          :sortable="item.sortable"
+          :sort-method="item.sortMethod"
+          :show-overflow-tooltip="item.showOverflowTooltip"
+        >
+          <TableColumn :key="index" :options="item.children"></TableColumn>
+        </el-table-column>
+        <el-table-column
+          v-else
+          :key="index"
+          :prop="item.prop"
+          :label="item.label"
+          :width="item.width"
+          :align="item.align"
+          :fixed="item.fixed"
+          :sortable="item.sortable"
+          :sort-method="item.sortMethod"
+          :show-overflow-tooltip="item.showOverflowTooltip"
+        >
+          <template slot-scope="scope">
+            <slot v-if="item.slot" name="slot" :scope="scope" :option="item" />
+            <span v-else>{{ scope.row[item.prop] }}</span>
+          </template>
+        </el-table-column>
+      </template>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "TableColumn",
+  props: {
+    options: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    }
+  }
+};
+</script>
+
+<style></style>

package/packages/Table/index.js

@@ -0,0 +1,8 @@
+import Table from "./index.vue";
+
+/* istanbul ignore next */
+Table.install = function(Vue) {
+  Vue.component(Table.name, Table);
+};
+
+export default Table;