kz-ui-base 1.0.2 → 1.0.4

package/common/src/components/basics/FileUpload/index.vue

@@ -1,197 +0,0 @@
-<template>
-  <div class="upload-file">
-    <el-upload
-      :action="uploadFileUrl"
-      :before-upload="handleBeforeUpload"
-      :file-list="fileList"
-      :limit="limit"
-      :on-error="handleUploadError"
-      :on-exceed="handleExceed"
-      :on-success="handleUploadSuccess"
-      :show-file-list="false"
-      :headers="headers"
-      class="upload-file-uploader"
-      ref="upload"
-    >
-      <!-- 上传按钮 -->
-      <el-button size="mini" type="primary">选取文件</el-button>
-      <!-- 上传提示 -->
-      <div class="el-upload__tip" slot="tip" v-if="showTip">
-        请上传
-        <template v-if="fileSize"> 大小不超过 <b style="color: #f56c6c">{{ fileSize }}MB</b> </template>
-        <template v-if="fileType"> 格式为 <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template>
-        的文件
-      </div>
-    </el-upload>
-
-    <!-- 文件列表 -->
-    <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul">
-      <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in fileList">
-        <el-link :href="file.url" :underline="false" target="_blank">
-          <span class="el-icon-document"> {{ getFileName(file.name) }} </span>
-        </el-link>
-        <div class="ele-upload-list__item-content-action">
-          <el-link :underline="false" @click="handleDelete(index)" type="danger">删除</el-link>
-        </div>
-      </li>
-    </transition-group>
-  </div>
-</template>
-
-<script>
-import { getToken } from "../../../utils/auth";
-
-export default {
-  name: "FileUpload",
-  props: {
-    // 值
-    value: [String, Object, Array],
-    // 数量限制
-    limit: {
-      type: Number,
-      default: 5,
-    },
-    // 大小限制(MB)
-    fileSize: {
-      type: Number,
-      default: 5,
-    },
-    // 文件类型, 例如['png', 'jpg', 'jpeg']
-    fileType: {
-      type: Array,
-      default: () => ["doc", "xls", "ppt", "txt", "pdf"],
-    },
-    // 是否显示提示
-    isShowTip: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
-      headers: {
-        Authorization: "Bearer " + getToken(),
-      },
-      fileList: [],
-    };
-  },
-  watch: {
-    value: {
-      handler(val) {
-        if (val) {
-          let temp = 1;
-          // 首先将值转为数组
-          const list = Array.isArray(val) ? val : this.value.split(',');
-          // 然后将数组转为对象数组
-          this.fileList = list.map(item => {
-            if (typeof item === "string") {
-              item = { name: item, url: item };
-            }
-            item.uid = item.uid || new Date().getTime() + temp++;
-            return item;
-          });
-        } else {
-          this.fileList = [];
-          return [];
-        }
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  computed: {
-    // 是否显示提示
-    showTip() {
-      return this.isShowTip && (this.fileType || this.fileSize);
-    },
-  },
-  methods: {
-    // 上传前校检格式和大小
-    handleBeforeUpload(file) {
-      // 校检文件类型
-      if (this.fileType) {
-        let fileExtension = "";
-        if (file.name.lastIndexOf(".") > -1) {
-          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
-        }
-        const isTypeOk = this.fileType.some((type) => {
-          if (file.type.indexOf(type) > -1) return true;
-          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
-          return false;
-        });
-        if (!isTypeOk) {
-          this.$message.error(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
-          return false;
-        }
-      }
-      // 校检文件大小
-      if (this.fileSize) {
-        const isLt = file.size / 1024 / 1024 < this.fileSize;
-        if (!isLt) {
-          this.$message.error(`上传文件大小不能超过 ${this.fileSize} MB!`);
-          return false;
-        }
-      }
-      return true;
-    },
-    // 文件个数超出
-    handleExceed() {
-      this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
-    },
-    // 上传失败
-    handleUploadError(err) {
-      this.$message.error("上传失败, 请重试");
-    },
-    // 上传成功回调
-    handleUploadSuccess(res, file) {
-      this.$message.success("上传成功");
-      this.fileList.push({ name: res.data.url, url: res.data.url });
-      this.$emit("input", this.listToString(this.fileList));
-    },
-    // 删除文件
-    handleDelete(index) {
-      this.fileList.splice(index, 1);
-      this.$emit("input", this.listToString(this.fileList));
-    },
-    // 获取文件名称
-    getFileName(name) {
-      if (name.lastIndexOf("/") > -1) {
-        return name.slice(name.lastIndexOf("/") + 1).toLowerCase();
-      } else {
-        return "";
-      }
-    },
-    // 对象转成指定字符串分隔
-    listToString(list, separator) {
-      let strs = "";
-      separator = separator || ",";
-      for (let i in list) {
-        strs += list[i].url + separator;
-      }
-      return strs != '' ? strs.substr(0, strs.length - 1) : '';
-    }
-  }
-};
-</script>
-
-<style scoped lang="scss">
-.upload-file-uploader {
-  margin-bottom: 5px;
-}
-.upload-file-list .el-upload-list__item {
-  border: 1px solid #e4e7ed;
-  line-height: 2;
-  margin-bottom: 10px;
-  position: relative;
-}
-.upload-file-list .ele-upload-list__item-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  color: inherit;
-}
-.ele-upload-list__item-content-action .el-link {
-  margin-right: 10px;
-}
-</style>

package/common/src/components/basics/Hamburger/index.vue

@@ -1,35 +0,0 @@
-<template>
-  <div style="padding: 0 15px" @click="toggleClick">
-    <svg-icon :icon-class="isActive ? 'kz_fold' : 'kz_open'" />
-  </div>
-</template>
-
-<script>
-export default {
-  name: "Hamburger",
-  props: {
-    isActive: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  methods: {
-    toggleClick() {
-      this.$emit("toggleClick");
-    },
-  },
-};
-</script>
-
-<style scoped>
-.hamburger {
-  display: inline-block;
-  vertical-align: middle;
-  width: 20px;
-  height: 20px;
-}
-
-.hamburger.is-active {
-  transform: rotate(180deg);
-}
-</style>

package/common/src/components/basics/HeaderSearch/index.vue

@@ -1,206 +0,0 @@
-<template>
-  <div :class="{ show: show }" class="header-search">
-    <svg-icon
-      class-name="search-icon"
-      icon-class="xy_search"
-      @click.stop="click"
-    />
-    <el-select
-      ref="headerSearchSelect"
-      v-model="search"
-      :remote-method="querySearch"
-      filterable
-      default-first-option
-      remote
-      placeholder="Search"
-      class="header-search-select"
-      @change="change"
-    >
-      <el-option
-        v-for="option in options"
-        :key="option.item.path"
-        :value="option.item"
-        :label="option.item.title.join(' > ')"
-      />
-    </el-select>
-  </div>
-</template>
-
-<script>
-// fuse is a lightweight fuzzy-search module
-// make search results more in line with expectations
-import Fuse from "~../../fuse.js/dist/fuse.min.js";
-import path from "path";
-
-export default {
-  name: "HeaderSearch",
-  data() {
-    return {
-      search: "",
-      options: [],
-      searchPool: [],
-      show: false,
-      fuse: undefined,
-    };
-  },
-  computed: {
-    routes() {
-      return this.$store.getters.permission_routes;
-    },
-  },
-  watch: {
-    routes() {
-      this.searchPool = this.generateRoutes(this.routes);
-    },
-    searchPool(list) {
-      this.initFuse(list);
-    },
-    show(value) {
-      if (value) {
-        document.body.addEventListener("click", this.close);
-      } else {
-        document.body.removeEventListener("click", this.close);
-      }
-    },
-  },
-  mounted() {
-    this.searchPool = this.generateRoutes(this.routes);
-  },
-  methods: {
-    click() {
-      this.show = !this.show;
-      if (this.show) {
-        this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.focus();
-      }
-    },
-    close() {
-      this.$refs.headerSearchSelect && this.$refs.headerSearchSelect.blur();
-      this.options = [];
-      this.show = false;
-    },
-    change(val) {
-      const path = val.path;
-      if (this.ishttp(val.path)) {
-        // http(s):// 路径新窗口打开
-        const pindex = path.indexOf("http");
-        window.open(path.substr(pindex, path.length), "_blank");
-      } else {
-        this.$router.push(val.path);
-      }
-      this.search = "";
-      this.options = [];
-      this.$nextTick(() => {
-        this.show = false;
-      });
-    },
-    initFuse(list) {
-      this.fuse = new Fuse(list, {
-        shouldSort: true,
-        threshold: 0.4,
-        location: 0,
-        distance: 100,
-        maxPatternLength: 32,
-        minMatchCharLength: 1,
-        keys: [
-          {
-            name: "title",
-            weight: 0.7,
-          },
-          {
-            name: "path",
-            weight: 0.3,
-          },
-        ],
-      });
-    },
-    // Filter out the routes that can be displayed in the sidebar
-    // And generate the internationalized title
-    generateRoutes(routes, basePath = "/", prefixTitle = []) {
-      let res = [];
-
-      for (const router of routes) {
-        // skip hidden router
-        if (router.hidden) {
-          continue;
-        }
-        const data = {
-          path: !this.ishttp(router.path)
-            ? path.resolve(basePath, router.path)
-            : router.path,
-          title: [...prefixTitle],
-        };
-        if (router.meta && router.meta.title) {
-          data.title = [...data.title, router.meta.title];
-          if (router.redirect !== "noRedirect") {
-            // only push the routes with title
-            // special case: need to exclude parent router without redirect
-            res.push(data);
-          }
-        }
-        // recursive child routes
-        if (router.children) {
-          const tempRoutes = this.generateRoutes(
-            router.children,
-            data.path,
-            data.title
-          );
-          if (tempRoutes.length >= 1) {
-            res = [...res, ...tempRoutes];
-          }
-        }
-      }
-      return res;
-    },
-    querySearch(query) {
-      if (query !== "") {
-        this.options = this.fuse.search(query);
-      } else {
-        this.options = [];
-      }
-    },
-    ishttp(url) {
-      return url.indexOf("http://") !== -1 || url.indexOf("https://") !== -1;
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.header-search {
-  font-size: 0 !important;
-
-  .search-icon {
-    cursor: pointer;
-    font-size: 18px;
-    vertical-align: middle;
-  }
-
-  .header-search-select {
-    font-size: 18px;
-    transition: width 0.2s;
-    width: 0;
-    overflow: hidden;
-    background: transparent;
-    border-radius: 0;
-    display: inline-block;
-    vertical-align: middle;
-
-    ::v-deep .el-input__inner {
-      border-radius: 0;
-      border: 0;
-      padding-left: 0;
-      padding-right: 0;
-      box-shadow: none !important;
-      border-bottom: 1px solid #d9d9d9;
-      vertical-align: middle;
-    }
-  }
-
-  &.show {
-    .header-search-select {
-      width: 210px;
-      margin-left: 10px;
-    }
-  }
-}
-</style>

package/common/src/components/basics/IconSelect/index.vue

@@ -1,84 +0,0 @@
-<!-- @author zhengjie -->
-<template>
-  <div class="icon-body">
-    <el-input
-      v-model="name"
-      style="position: relative"
-      clearable
-      placeholder="请输入图标名称"
-      @clear="filterIcons"
-      @input.native="filterIcons"
-    >
-      <i slot="suffix" class="el-icon-search el-input__icon" />
-    </el-input>
-    <div class="icon-list">
-      <div
-        v-for="(item, index) in iconList"
-        :key="index"
-        @click="selectedIcon(item)"
-      >
-        <svg-icon
-          :icon-class="item"
-          style="height: 30px; width: 16px; margin-right: 4px"
-        />
-        <span>{{ item }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import icons from "./requireIcons";
-export default {
-  name: "IconSelect",
-  data() {
-    return {
-      name: "",
-      iconList: icons,
-    };
-  },
-  methods: {
-    filterIcons() {
-      this.iconList = icons;
-      if (this.name) {
-        this.iconList = this.iconList.filter((item) =>
-          item.includes(this.name)
-        );
-      }
-    },
-    selectedIcon(name) {
-      this.$emit("selected", name);
-      document.body.click();
-    },
-    reset() {
-      this.name = "";
-      this.iconList = icons;
-    },
-  },
-};
-</script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-.icon-body {
-  width: 100%;
-  padding: 10px;
-  .icon-list {
-    height: 200px;
-    overflow-y: scroll;
-    div {
-      height: 30px;
-      line-height: 30px;
-      margin-bottom: -5px;
-      cursor: pointer;
-      width: 33%;
-      float: left;
-    }
-    span {
-      display: inline-block;
-      vertical-align: -0.15em;
-      fill: currentColor;
-      overflow: hidden;
-    }
-  }
-}
-</style>

package/common/src/components/basics/IconSelect/requireIcons.js

@@ -1,10 +0,0 @@
-const req = require.context('../../../assets/icons/svg', false, /\.svg$/)
-const requireAll = requireContext => requireContext.keys()
-
-const re = /\.\/(.*)\.svg/
-
-const icons = requireAll(req).map(i => {
-  return i.match(re)[1]
-})
-
-export default icons

package/common/src/components/basics/Iframe/index.vue

@@ -1,36 +0,0 @@
-<template>
-  <div v-loading="loading" :style="'height:' + height">
-    <iframe
-      :src="src"
-      frameborder="no"
-      style="width: 100%; height: 100%"
-      scrolling="auto"
-    />
-  </div>
-</template>
-<script>
-export default {
-  props: {
-    src: {
-      type: String,
-      required: true
-    },
-  },
-  data() {
-    return {
-      height: document.documentElement.clientHeight - 94.5 + "px;",
-      loading: true,
-      url: this.src
-    };
-  },
-  mounted: function () {
-    setTimeout(() => {
-      this.loading = false;
-    }, 300);
-    const that = this;
-    window.onresize = function temp() {
-      that.height = document.documentElement.clientHeight - 94.5 + "px;";
-    };
-  }
-};
-</script>