xianniu-ui 0.1.2 → 0.1.4

package/packages/upload/index.js

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

package/packages/upload/main.vue

@@ -0,0 +1,346 @@
+<template>
+  <el-upload
+    ref="upload"
+    :class="{
+      'is-disabled': $attrs.disabled != undefined,
+    }"
+    class="xn-upload xn-upload-main"
+    action="###"
+    :list-type="listType"
+    v-bind="$attrs"
+    :file-list.sync="fileList"
+    :http-request="onHttpUpload"
+    :on-error="onError"
+    :before-upload="onBeforeUpload"
+    :style="styles"
+    :headers="uploadHeaders"
+    :on-exceed="onExceed"
+    :on-change="onChange"
+  >
+    <template v-if="listType === 'picture-card'">
+      <div slot="trigger" class="upload-limit">
+        <i class="el-icon el-icon-plus" />
+        <span
+          ><em>{{ fileList.length }}</em
+          >/<em>{{ limit }}</em>
+        </span>
+      </div>
+    </template>
+    <template v-else>
+      <slot>
+        <el-button icon="el-icon-upload">编辑</el-button>
+      </slot>
+    </template>
+    <div
+      slot="file"
+      slot-scope="{ file }"
+      class="xn-upload--slot"
+      :class="{ 'upload-slot-idcard': listType === 'idcard' }"
+    >
+      <uploadPop :file="file" @on-download="handleDownload(file)"></uploadPop>
+      <template v-if="isImage(file)">
+        <el-image
+          class="el-upload-list__item-thumbnail"
+          :src="file.url"
+          fit="cover"
+          :lazy="true"
+        />
+      </template>
+      <template v-else>
+        <div class="xn-upload-list__item--file">
+          <div class="annex">
+            <i class="el-icon el-icon-folder" />
+            <span class="label">附件</span>
+          </div>
+          <div class="file-name">{{ file.accessoryName }}</div>
+        </div>
+      </template>
+      <div v-if="file.status === 'uploading'" class="process">
+        <el-progress
+          :status="file.percentage === 100 ? 'success' : null"
+          type="circle"
+          :percentage="process(file.percentage)"
+          :stroke-width="6"
+        />
+      </div>
+      <span class="el-upload-list__item-actions">
+        <span
+          v-if="isImage(file)"
+          class="el-upload-list__item-preview"
+          @click="handlePictureCardPreview(file)"
+        >
+          <i class="fz-16 el-icon-zoom-in" />
+        </span>
+        <span
+          class="el-upload-list__item-delete icon"
+          @click="handleDownload(file, fileList)"
+        >
+          <i class="fz-16 el-icon-download" />
+        </span>
+        <span
+          v-if="!$attrs.disabled && !preview"
+          class="el-upload-list__item-delete icon"
+          @click="handleRemove(file, fileList)"
+        >
+          <i class="fz-16 el-icon-delete" />
+        </span>
+      </span>
+    </div>
+    <div v-if="tip !== ''" slot="tip" class="el-upload__tip">{{ tip }}</div>
+    <el-image-viewer
+      v-if="isShowImageView"
+      :on-close="closeViewer"
+      :z-index="999999"
+      :url-list="[imageView]"
+    />
+  </el-upload>
+</template>
+
+<script>
+import ElImageViewer from "element-ui/packages/image/src/image-viewer";
+import * as imageConversion from "image-conversion";
+import axios from "axios";
+import uploadPop from "./upload-pop.vue";
+export default {
+  name: "XnUpload",
+  inheritAttrs: true,
+  components: {
+    uploadPop,
+    ElImageViewer,
+  },
+  props: {
+    listType: {
+      type: String,
+      default: "picture-card",
+    },
+    hiddenUpload: {
+      type: Boolean,
+      default: false,
+    },
+    preview: {
+      type: Boolean,
+      default: false,
+    },
+    fileList: {
+      type: Array,
+      default: () => [],
+    },
+
+    limit: {
+      type: Number,
+      default: 1,
+    },
+    tip: {
+      type: String,
+      default: "",
+    },
+    accept: {
+      type: Array,
+      default: () => ["jpg", "jpeg", "png", "pdf"],
+    },
+    maxSize: {
+      type: Number,
+      default: 1024 * 5 * 1024, // 最大限制 5M
+    },
+    compress: {
+      type: Number,
+      default: 0,
+    },
+    type: {
+      type: String,
+      default: "front",
+      validator: (val) => {
+        return ["front", "back"].includes(val);
+      },
+    },
+    styles: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  data() {
+    return {
+      isShowImageView: false,
+      imageView: "",
+      isHidden: false,
+      // actionParams: {
+      //   action: '',
+      // },
+      uploadHeaders: {
+        xnToken: "",
+      },
+      viewList: [],
+      files: [],
+      successFiles: [],
+    };
+  },
+  computed: {
+    process() {
+      return (num) => {
+        return Math.floor(num);
+      };
+    },
+    isImage() {
+      return (file) => {
+        return file.imgFlag;
+      };
+    },
+  },
+  watch: {
+    fileList: {
+      handler(n) {
+        this.successFiles = n;
+        if (this.limit === n.length) {
+          this.isHidden = true;
+        } else {
+          this.isHidden = false;
+        }
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    console.log(this.$attrs);
+  },
+  beforeDestroy() {
+    this.$emit("update:fileList", []);
+  },
+  methods: {
+    onBeforeUpload(file) {
+      let fileExt = file.name.substring(file.name.lastIndexOf(".") + 1);
+
+      // 判断上传格式
+      fileExt = `${fileExt}`.toLowerCase();
+
+      if (!this.accept.includes(fileExt)) {
+        this.$message.warning(`请上传指定格式【${this.accept}】`);
+        return false;
+      }
+    },
+    handleCompress(file) {
+      const { compress } = this;
+      const _maxSize = parseFloat(this.maxSize);
+      let size = 0;
+      if (compress) {
+        size = compress;
+      } else {
+        size = file.size > _maxSize ? _maxSize / 1024 : file.size
+      }
+      return new Promise((resolve) => {
+        imageConversion["compressAccurately"](file, size).then((result) => {
+          resolve(result);
+        });
+      });
+    },
+    onExceedSize(size, maxSize) {
+      if (size > maxSize) {
+        this.$message.warning(
+          `最大不能超过${this.$utils.bytesToSize(maxSize)}`
+        );
+        return false;
+      }
+      return true;
+    },
+    onChange(file, fileList) {
+      this.files = fileList;
+    },
+    async onHttpUpload(file) {
+      const formData = new FormData();
+      let result = null;
+      if (this.$utils.isImg(file.file.name)) {
+        result = await this.handleCompress(file.file);
+        var newFile = new window.File([result], file.file.name, {
+          type: file.file.type,
+        });
+      }
+      const _file = result ? newFile : file.file;
+      formData.append("file", _file);
+
+      axios({
+        method: "post",
+        url: this.$XN.uploadUrl || '',
+        data: formData,
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+        onUploadProgress(progress) {
+          const _progress = Math.round(
+            (progress.loaded / progress.total) * 100
+          );
+          file.onProgress({ percent: _progress });
+        },
+      })
+        .then((res) => {
+          const { accessoryName, accessorySize, ext, imgFlag, url } =
+            res.data.data;
+          var obj = {};
+          obj.accessoryName = accessoryName;
+          obj.accessorySize = accessorySize;
+          obj.ext = ext;
+          obj.imgFlag = imgFlag;
+          obj.url = url;
+          this.successFiles.push(obj);
+          file.onSuccess();
+          this.$emit("update:fileList", this.successFiles);
+          this.$emit("on-success", this.successFiles);
+        })
+        .catch(() => {
+          // console.log(err);
+          this.$emit("update:fileList", this.successFiles);
+          file.onError();
+        });
+    },
+
+    onError() {
+      // console.log(err);
+      this.$message.error("上传失败，请重试");
+    },
+    onSubmitUpload() {
+      this.$refs.upload.submit();
+    },
+    onAbort() {
+      this.$refs.upload.abort();
+    },
+
+    onExceed() {
+      this.$message.warning(`上传总数限制为【${this.limit}】个，请删除后上传`);
+    },
+    handlePictureCardPreview(file) {
+      this.isShowImageView = true;
+      this.$nextTick(() => {
+        this.imageView = file.url;
+      });
+    },
+    async handleDownload({ url }) {
+      const elt = document.createElement("a");
+      elt.setAttribute("href", url);
+      elt.setAttribute("download", "下载文件");
+      elt.style.display = "none";
+      elt.target = "_blank";
+      document.body.appendChild(elt);
+      elt.click();
+      document.body.removeChild(elt);
+    },
+    handleRemove(file, fileList) {
+      fileList.forEach((item, idx) => {
+        if (file.uid === item.uid) {
+          fileList.splice(idx, 1);
+        }
+      });
+      if (this.viewList.length) {
+        this.viewList.forEach((item, idx) => {
+          if (item.url === file.url) {
+            this.viewList.splice(idx, 1);
+          }
+        });
+      }
+      this.$emit("update:fileList", fileList);
+      //   this.$emit('on-change', fileList.map(item => item.url).join(','))
+    },
+    closeViewer() {
+      this.isShowImageView = false;
+    },
+  },
+};
+</script>
+

package/packages/upload/upload-pop.vue

@@ -0,0 +1,49 @@
+<template>
+  <el-popover width="300" trigger="hover">
+    <el-form label-width="80px" size="mini">
+      <el-form-item label="文件名">
+        <div :title="file.accessoryName" class="tip-filename">
+          {{ file.accessoryName }}
+        </div>
+      </el-form-item>
+      <el-form-item label="文件大小">
+        {{ $format.bytesToSize(file.accessorySize) }}
+      </el-form-item>
+      <el-form-item label="文件格式">
+        {{ file.ext }}
+      </el-form-item>
+      <el-form-item label="文件类型">
+        {{ file.imgFlag ? "图片" : "文件" }}
+      </el-form-item>
+      <el-form-item label="操作">
+        <el-link
+          type="primary"
+          :underline="false"
+          @click="handleDownload(file)"
+          icon="el-icon-download"
+          >下载</el-link
+        >
+      </el-form-item>
+    </el-form>
+    <div v-if="file.ext" slot="reference" class="xn-upload--slot__ext">{{ file.ext }}</div>
+  </el-popover>
+</template>
+
+<script>
+export default {
+  props: {
+    file: {
+      type: Object,
+      default: () => {},
+    },
+  },
+  methods:{
+      handleDownload(file){
+          this.$emit('on-download',file)
+      }
+  }
+};
+</script>
+
+<style>
+</style>

package/src/index.js

@@ -2,12 +2,30 @@
 import XnDialog from '../packages/dialog/index'
 import XnTable from '../packages/table/index'
 import XnPage from '../packages/page/index'
+import XnSearch from '../packages/search/index'
+import XnDate from '../packages/date/index'
+import XnUpload from '../packages/upload/index'
+import XnCity from '../packages/city/index'
+import XnTip from '../packages/tip/index'
+import XnDrawer from '../packages/drawer/index'
+import XnTree from '../packages/tree/index'
+import XnImport from '../packages/import/index'
+import XnExport from '../packages/export/index'
 
 import Utils from 'xn-ui/src/utils/index'
 const components = [
     XnDialog,
     XnTable,
-    XnPage
+    XnPage,
+    XnSearch,
+    XnDate,
+    XnUpload,
+    XnCity,
+    XnTip,
+    XnDrawer,
+    XnTree,
+    XnImport,
+    XnExport
 ]
 const version = require('../package.json').version
 
@@ -27,7 +45,6 @@ const install = function (Vue) {
     Vue.prototype.$reg = Utils.$reg
     Vue.prototype.$format = Utils.$format
     Vue.prototype.$dayjs = Utils.$dayjs
-    Vue.prototype.$lodash = Utils.$lodash
     Vue.prototype.$storage = Utils.$storage
 
 }
@@ -40,5 +57,8 @@ export default {
     install,
     XnDialog,
     XnTable,
-    XnPage
+    XnPage,
+    XnSearch,
+    XnCity,
+    XnTip
 }

package/src/plugins/index.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import Element from 'element-ui'
-import '@/theme/index.scss'
+import 'xn-ui/packages/style/src/theme/index.scss'
 Vue.use(Element, {
     size: 'small'
 })