xt-element-ui 1.1.0 → 1.1.2

package/src/components/upload/index.vue

@@ -0,0 +1,225 @@
+<template>
+  <BaseFlexBox type="inline-flex" gap="5px">
+    <el-upload
+      v-if="action"
+      ref="uploadFile"
+      :disabled="disabled || uploading"
+      :action="YSSQP + action"
+      :file-list="fileList"
+      :data="{accessToken,...data}"
+      :multiple="multiple"
+      :limit="limit"
+      :on-success="uploadSuccess"
+      :show-file-list="false"
+      :auto-upload="autoUpload"
+      :before-upload="uploadBefore"
+      accept=".jpg,.jpeg,.png"
+    >
+      <i class="el-icon-camera" style="font-size: 20px;padding: 20px;background:#f0f0f1;color:#409EFF" :style="{padding: plusPx / 2 + 'px',cursor:disabled ? 'not-allowed':'pointer'}"></i>
+    </el-upload>
+    <BaseFlexBox class="el-upload-list el-upload-list--picture-card" gap="5px" wrap="wrap" style="flex: 1" v-if="fileList!==null&&fileList.length>0">
+      <li v-for="(ite,index) in fileList" :key="index" class="el-upload-list__item is-ready" style="margin: 0;width:62px;height: 62px;" :style="{ width: (plusPx + 22)+ 'px',height: (plusPx + 22)+ 'px'}">
+        <el-image class="el-upload-list__item-thumbnail" :src="YSSQP+'/'+ite" alt="" @click="clickHandler" />
+        <span class="el-upload-list__item-actions" @click="preShowPicture(ite, index)">
+          <span class="el-upload-list__item-preview" @click.stop="preShowPicture(ite, index)">
+            <i class="el-icon-zoom-in" />
+          </span>
+          <span v-if="!uploading&&!disabled" class="el-upload-list__item-delete" style="margin-left: 0" @click.stop="handleRemove(index)">
+            <i class="el-icon-delete" />
+          </span>
+        </span>
+      </li>
+    </BaseFlexBox>
+    <template v-if="preview">
+      <ImageViewer v-if="previewVisible" :z-index="3000" :base-url="baseUrl + '/'" :infiniteLoop="false" :initial-index="imageIndex" :url-list="allFileList || fileList" :on-close="closeViewer" />
+    </template>
+  </BaseFlexBox>
+</template>
+<script>
+import ImageViewer from "./preview.vue";
+import { getToken } from "@/utils/auth";
+export default {
+  components: {
+    ImageViewer
+  },
+  model: {
+    prop: "src",
+    event: "change"
+  },
+  props: {
+    data: {
+      type: Object,
+      default: () => {
+        return { };
+      }
+    },
+    src: {
+      type: String,
+      default: "",
+      required: true
+    },
+    autoUpload: {
+      type: Boolean,
+      default: true
+    },
+    action: {
+      type: String,
+      default: ""
+    },
+    baseUrl: {
+      type: String,
+      default: ""
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    accept: {
+      type: String,
+      default: ".jpg,.jpeg,.png"
+    },
+    limit: {
+      type: Number,
+      default: 5
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    size: {
+      type: String,
+      default: ""
+    },
+    beforeEmitData: {
+      type: Function,
+      default: (res, file, type) => {
+        if (res.code == 200) {
+          if (res.data.Result) {
+            return res.data.Data;
+          } else {
+            return res.data[0];
+          }
+        } else {
+          return false;
+        }
+      }
+    },
+    // 当前图片在图片库中预览
+    allFileList: {
+      type: Array
+    }
+  },
+  data() {
+    return {
+      accessToken: getToken(),
+      YSSQP: this.baseUrl,
+      // upload: {
+      //   data: { accessToken: getToken() },
+      //   limit: 5,
+      //   accept: ".jpg,.png,.pdf",
+      //   multiple: false
+      // },
+      previewVisible: false,
+      uploading: false,
+      imageUrl: "",
+      fileList: [],
+      imageIndex: 0
+    };
+  },
+  computed: {
+    preview() {
+      const { fileList } = this;
+      return Array.isArray(fileList) && fileList.length > 0;
+    },
+    plusPx() {
+      const _size = this.size == "big" ? 100 : 20;
+      return 2 * _size;
+    }
+  },
+  watch: {
+    src: {
+      immediate: true,
+      deep: true,
+      handler(v) {
+        if (v) {
+          this.fileList = v.split(",");
+        } else {
+          this.fileList = [];
+        }
+      }
+    }
+  },
+  methods: {
+    clickHandler() {
+      if (!this.preview) {
+        return;
+      }
+      this.previewVisible = true;
+    },
+    closeViewer() {
+      this.previewVisible = false;
+    },
+    preShowPicture(url, ind) {
+      if (!this.allFileList || this.allFileList.length == 0) {
+        this.imageIndex = ind;
+      } else {
+        const imgInd = this.allFileList.findIndex(src => src == url);
+        if (imgInd > -1) {
+          this.imageIndex = imgInd;
+        } else {
+          this.imageIndex = ind;
+        }
+      }
+      if (url.indexOf(".pdf") > -1) {
+        window.open(url, "_blank");
+      } else {
+        this.imageUrl = this.baseUrl + "/" + url;
+        this.previewVisible = true;
+      }
+    },
+    handleRemove(index, type) {
+      try {
+        this.fileList.splice(index, 1);
+        this.$emit("change", this.fileList.join(","));
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    getPathName(v) {
+      return v.split("/").pop().split(".")[0];
+    },
+    uploadBefore(file, type) {
+      console.log(file);
+      const isJPG = file.type === "image/jpeg" || file.type === "image/jpg" || file.type === "image/png" || file.type === "application/pdf";
+      const isLt2M = file.size / 1024 / 1024 < 50;
+      if (!isJPG) {
+        this.$message.error("上传图片只能是jpg,jpeg,png,pdf格式!");
+      }
+      if (!isLt2M) {
+        this.$message.error("上传图片大小不能超过50MB!");
+      }
+      return isJPG && isLt2M;
+    },
+    // 上传文件
+    uploadSuccess(res, file, type) {
+      const _data = this.beforeEmitData(res, file, type);
+      if (_data) {
+        this.fileList.push(_data);
+        this.$emit("change", this.fileList.join(","));
+        this.$message({
+          message: "上传成功",
+          center: true,
+          type: "success"
+        });
+        return res.data[0];
+      } else {
+        this.$message({
+          message: "上传失败",
+          center: true,
+          type: "error"
+        });
+      }
+    }
+  }
+};
+</script>

package/src/components/upload/preview.vue

@@ -0,0 +1,333 @@
+<template>
+  <transition name="viewer-fade">
+    <div tabindex="-1" ref="el-image-viewer__wrapper" class="el-image-viewer__wrapper" :style="{ 'z-index': zIndex }">
+      <div class="el-image-viewer__mask" @click="hide"></div>
+      <!-- CLOSE -->
+      <span class="el-image-viewer__btn fix_close" @click="hide">
+        <i class="el-icon-close"></i>
+      </span>
+      <!-- ARROW -->
+      <template v-if="!isSingle">
+        <span
+          class="el-image-viewer__btn el-image-viewer__prev"
+          :class="{ 'is-disabled': !infinite && isFirst }"
+          @click="prev">
+          <i class="el-icon-arrow-left"/>
+        </span>
+        <span
+          class="el-image-viewer__btn el-image-viewer__next"
+          :class="{ 'is-disabled': !infinite && isLast }"
+          @click="next">
+          <i class="el-icon-arrow-right"/>
+        </span>
+      </template>
+      <!-- ACTIONS -->
+      <div class="el-image-viewer__btn el-image-viewer__actions">
+        <div class="el-image-viewer__actions__inner">
+          <i class="el-icon-zoom-out" @click.stop="handleActions('zoomOut')"></i>
+          <i class="el-icon-zoom-in" @click.stop="handleActions('zoomIn')"></i>
+          <i class="el-image-viewer__actions__divider"></i>
+          <i :class="mode.icon" @click.stop="toggleMode"></i>
+          <i class="el-image-viewer__actions__divider"></i>
+          <i class="el-icon-refresh-left" @click.stop="handleActions('anticlocelise')"></i>
+          <i class="el-icon-refresh-right" @click.stop="handleActions('clocelise')"></i>
+        </div>
+      </div>
+      <!-- CANVAS -->
+      <div class="el-image-viewer__canvas">
+        <img
+          v-for="(url, i) in urlList"
+          v-if="i === index"
+          ref="img"
+          class="el-image-viewer__img"
+          :key="url"
+          :src="currentImg"
+          :style="imgStyle"
+          @load="handleImgLoad"
+          @error="handleImgError"
+          @mousedown="handleMouseDown">
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { on, off } from 'element-ui/src/utils/dom';
+import { rafThrottle, isFirefox } from 'element-ui/src/utils/util';
+
+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';
+
+export default {
+  name: 'elImageViewer',
+
+  props: {
+    baseUrl: {
+      type: String,
+      default: ""
+    },
+    urlList: {
+      type: Array,
+      default: () => []
+    },
+    zIndex: {
+      type: Number,
+      default: 2000
+    },
+    onSwitch: {
+      type: Function,
+      default: () => {}
+    },
+    onClose: {
+      type: Function,
+      default: () => {}
+    },
+    initialIndex: {
+      type: Number,
+      default: 0
+    },
+    infiniteLoop: {
+      type: Boolean,
+      default: true
+    }
+  },
+
+  data() {
+    return {
+      index: this.initialIndex,
+      isShow: false,
+      infinite: this.infiniteLoop,
+      loading: false,
+      mode: Mode.CONTAIN,
+      transform: {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: false
+      }
+    };
+  },
+  computed: {
+    isSingle() {
+      return this.urlList.length <= 1;
+    },
+    isFirst() {
+      return this.index === 0;
+    },
+    isLast() {
+      return this.index === this.urlList.length - 1;
+    },
+    currentImg() {
+      return this.baseUrl + this.urlList[this.index];
+    },
+    imgStyle() {
+      const { scale, deg, offsetX, offsetY, enableTransition } = this.transform;
+      const style = {
+        // transform: `scale(${scale * window.devicePixelRatio}) rotate(${deg}deg)`, // 解决手机屏幕放大问题
+        transform: `scale(${scale * 1}) rotate(${deg}deg)`,
+        transition: enableTransition ? 'transform .3s' : '',
+        'margin-left': `${offsetX}px`,
+        'margin-top': `${offsetY}px`
+      };
+      if (this.mode === Mode.CONTAIN) {
+        style.maxWidth = style.maxHeight = `80%`;
+      }
+      return style;
+    }
+  },
+  watch: {
+    index: {
+      handler: function(val) {
+        this.reset();
+        this.onSwitch(val);
+      }
+    },
+    currentImg(val) {
+      this.$nextTick(_ => {
+        const $img = this.$refs.img[0];
+        if (!$img.complete) {
+          this.loading = true;
+        }
+      });
+    }
+  },
+  methods: {
+    hide() {
+      this.deviceSupportUninstall();
+      this.onClose();
+    },
+    deviceSupportInstall() {
+      this._keyDownHandler = rafThrottle(e => {
+        const keyCode = e.keyCode;
+        switch (keyCode) {
+          // ESC
+          case 27:
+            this.hide();
+            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;
+    },
+    handleImgLoad(e) {
+      this.loading = false;
+    },
+    handleImgError(e) {
+      this.loading = false;
+      e.target.alt = '加载失败';
+    },
+    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();
+    },
+    reset() {
+      this.transform = {
+        scale: 1,
+        deg: 0,
+        offsetX: 0,
+        offsetY: 0,
+        enableTransition: false
+      };
+    },
+    toggleMode() {
+      if (this.loading) return;
+
+      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();
+    },
+    prev() {
+      if (this.isFirst && !this.infinite) return;
+      const len = this.urlList.length;
+      this.index = (this.index - 1 + len) % len;
+    },
+    next() {
+      if (this.isLast && !this.infinite) return;
+      const len = this.urlList.length;
+      this.index = (this.index + 1) % len;
+    },
+    handleActions(action, options = {}) {
+      if (this.loading) return;
+      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':
+          if (transform.scale < 10) {
+            transform.scale = parseFloat((transform.scale + zoomRate).toFixed(3));
+          }
+          break;
+        case 'clocelise':
+          transform.deg += rotateDeg;
+          break;
+        case 'anticlocelise':
+          transform.deg -= rotateDeg;
+          break;
+      }
+      transform.enableTransition = enableTransition;
+    }
+  },
+  mounted() {
+    this.deviceSupportInstall();
+    // add tabindex then wrapper can be focusable via Javascript
+    // focus wrapper so arrow key can't cause inner scroll behavior underneath
+    this.$refs['el-image-viewer__wrapper'].focus();
+  }
+};
+</script>
+<style scoped lang="scss">
+.fix_close{
+  >i{
+    position: relative;
+    right: 18px;
+    top: 18px;
+  }
+  &:hover{
+    background: #409EFF;
+  }
+  height: 100px;
+  width: 100px;
+  border-radius: 50px;
+  right: -50px;
+  top: -50px;
+  background: #606266;
+  font-size: 23px;
+  color: #fff;
+}
+</style>

package/src/index.js

@@ -23,16 +23,22 @@ import Card from './components/card'
 import CardItem from './components/card-item'
 import ConfigProvider from './components/config-provider'
 import Text from './components/text'
+import Chart from './components/chart'  // Chart 组件
+import GridBox from './components/grid-box'
+import DatePicker from './components/date-picker'
 
 // 存储组件列表
 const components = [
   Button,
   Input,
   FlexBox,
-  Card,
+  Card, 
   CardItem,
   ConfigProvider,
-  Text
+  Text,
+  Chart,
+  GridBox,
+  DatePicker
 ]
 
 
@@ -99,6 +105,9 @@ export default {
   Text
 }
 
+// Chart 组件按需导出（使用时需自行安装 echarts 依赖）
+export { default as Chart } from './components/chart'
+
 // 导出工具函数和变量
 export {
   utils,