kz-ui-base 1.0.2 → 1.0.4

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

@@ -1,204 +0,0 @@
-<template>
-  <div class="component-upload-image">
-    <el-upload
-      :action="uploadImgUrl"
-      list-type="picture-card"
-      :on-success="handleUploadSuccess"
-      :before-upload="handleBeforeUpload"
-      :limit="limit"
-      :on-error="handleUploadError"
-      :on-exceed="handleExceed"
-      name="file"
-      :on-remove="handleRemove"
-      :show-file-list="true"
-      :headers="headers"
-      :file-list="fileList"
-      :on-preview="handlePictureCardPreview"
-      :class="{hide: this.fileList.length >= this.limit}"
-    >
-      <i class="el-icon-plus"></i>
-    </el-upload>
-
-    <!-- 上传提示 -->
-    <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-dialog
-      :visible.sync="dialogVisible"
-      title="预览"
-      width="800"
-      append-to-body
-    >
-      <img
-        :src="dialogImageUrl"
-        style="display: block; max-width: 100%; margin: 0 auto"
-      />
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { getToken } from "../../../utils/auth";
-
-export default {
-  props: {
-    value: [String, Object, Array],
-    // 图片数量限制
-    limit: {
-      type: Number,
-      default: 5,
-    },
-    // 大小限制(MB)
-    fileSize: {
-      type: Number,
-      default: 5,
-    },
-    // 文件类型, 例如['png', 'jpg', 'jpeg']
-    fileType: {
-      type: Array,
-      default: () => ["png", "jpg", "jpeg"],
-    },
-    // 是否显示提示
-    isShowTip: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data() {
-    return {
-      dialogImageUrl: "",
-      dialogVisible: false,
-      hideUpload: false,
-      uploadImgUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
-      headers: {
-        Authorization: "Bearer " + getToken(),
-      },
-      fileList: []
-    };
-  },
-  watch: {
-    value: {
-      handler(val) {
-        if (val) {
-          // 首先将值转为数组
-          const list = Array.isArray(val) ? val : this.value.split(',');
-          // 然后将数组转为对象数组
-          this.fileList = list.map(item => {
-            if (typeof item === "string") {
-              item = { name: item, url: item };
-            }
-            return item;
-          });
-        } else {
-          this.fileList = [];
-          return [];
-        }
-      },
-      deep: true,
-      immediate: true
-    }
-  },
-  computed: {
-    // 是否显示提示
-    showTip() {
-      return this.isShowTip && (this.fileType || this.fileSize);
-    },
-  },
-  methods: {
-    // 删除图片
-    handleRemove(file, fileList) {
-      const findex = this.fileList.map(f => f.name).indexOf(file.name);
-      this.fileList.splice(findex, 1);
-      this.$emit("input", this.listToString(this.fileList));
-    },
-    // 上传成功回调
-    handleUploadSuccess(res) {
-      this.fileList.push({ name: res.data.url, url: res.data.url });
-      this.$emit("input", this.listToString(this.fileList));
-      this.loading.close();
-    },
-    // 上传前loading加载
-    handleBeforeUpload(file) {
-      let isImg = false;
-      if (this.fileType.length) {
-        let fileExtension = "";
-        if (file.name.lastIndexOf(".") > -1) {
-          fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
-        }
-        isImg = this.fileType.some(type => {
-          if (file.type.indexOf(type) > -1) return true;
-          if (fileExtension && fileExtension.indexOf(type) > -1) return true;
-          return false;
-        });
-      } else {
-        isImg = file.type.indexOf("image") > -1;
-      }
-
-      if (!isImg) {
-        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;
-        }
-      }
-      this.loading = this.$loading({
-        lock: true,
-        text: "上传中",
-        background: "rgba(0, 0, 0, 0.7)",
-      });
-    },
-    // 文件个数超出
-    handleExceed() {
-      this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
-    },
-    // 上传失败
-    handleUploadError() {
-      this.$message({
-        type: "error",
-        message: "上传失败",
-      });
-      this.loading.close();
-    },
-    // 预览
-    handlePictureCardPreview(file) {
-      this.dialogImageUrl = file.url;
-      this.dialogVisible = true;
-    },
-    // 对象转成指定字符串分隔
-    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">
-// .el-upload--picture-card 控制加号部分
-::v-deep.hide .el-upload--picture-card {
-  display: none;
-}
-// 去掉动画效果
-::v-deep .el-list-enter-active,
-::v-deep .el-list-leave-active {
-  transition: all 0s;
-}
-
-::v-deep .el-list-enter, .el-list-leave-active {
-  opacity: 0;
-  transform: translateY(0);
-}
-</style>

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

@@ -1,107 +0,0 @@
-<template>
-  <div :class="{ hidden: hidden }" class="pagination-container">
-    <el-pagination
-      :background="background"
-      :current-page.sync="currentPage"
-      :page-size.sync="pageSize"
-      :layout="layout"
-      :page-sizes="pageSizes"
-      :total="Number(total)"
-      :pager-count="pagerCount"
-      v-bind="$attrs"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-    />
-  </div>
-</template>
-
-<script>
-import { scrollTo } from "../../../utils/scroll-to";
-
-export default {
-  name: "Pagination",
-  props: {
-    total: {
-      required: true,
-      type: [Number, String],
-    },
-    page: {
-      type: [Number, String],
-      default: 1,
-    },
-    limit: {
-      type: [Number, String],
-      default: 20,
-    },
-    pageSizes: {
-      type: Array,
-      default() {
-        return [5, 10, 20, 30, 50];
-      },
-    },
-    // 移动端页码按钮的数量端默认值5
-    pagerCount: {
-      type: [Number, String],
-      default: document.body.clientWidth < 992 ? 5 : 7,
-    },
-    layout: {
-      type: [Number, String],
-      default: "total, sizes, prev, pager, next, jumper",
-    },
-    background: {
-      type: Boolean,
-      default: true,
-    },
-    autoScroll: {
-      type: Boolean,
-      default: true,
-    },
-    hidden: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    currentPage: {
-      get() {
-        return this.page;
-      },
-      set(val) {
-        this.$emit("update:page", val);
-      },
-    },
-    pageSize: {
-      get() {
-        return this.limit;
-      },
-      set(val) {
-        this.$emit("update:limit", val);
-      },
-    },
-  },
-  methods: {
-    handleSizeChange(val) {
-      this.$emit("pagination", { page: this.currentPage, limit: val });
-      if (this.autoScroll) {
-        scrollTo(0, 800);
-      }
-    },
-    handleCurrentChange(val) {
-      this.$emit("pagination", { page: val, limit: this.pageSize });
-      if (this.autoScroll) {
-        scrollTo(0, 800);
-      }
-    },
-  },
-};
-</script>
-
-<style scoped>
-.pagination-container {
-  background: #fff;
-  padding: 32px 16px;
-}
-.pagination-container.hidden {
-  display: none;
-}
-</style>

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

@@ -1,142 +0,0 @@
-<template>
-  <div :style="{zIndex:zIndex,height:height,width:width}" class="pan-item">
-    <div class="pan-info">
-      <div class="pan-info-roles-container">
-        <slot />
-      </div>
-    </div>
-    <!-- eslint-disable-next-line -->
-    <div :style="{backgroundImage: `url(${image})`}" class="pan-thumb"></div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'PanThumb',
-  props: {
-    image: {
-      type: String,
-      required: true
-    },
-    zIndex: {
-      type: Number,
-      default: 1
-    },
-    width: {
-      type: String,
-      default: '150px'
-    },
-    height: {
-      type: String,
-      default: '150px'
-    }
-  }
-}
-</script>
-
-<style scoped>
-.pan-item {
-  width: 200px;
-  height: 200px;
-  border-radius: 50%;
-  display: inline-block;
-  position: relative;
-  cursor: default;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-
-.pan-info-roles-container {
-  padding: 20px;
-  text-align: center;
-}
-
-.pan-thumb {
-  width: 100%;
-  height: 100%;
-  background-position: center center;
-  background-size: cover;
-  border-radius: 50%;
-  overflow: hidden;
-  position: absolute;
-  transform-origin: 95% 40%;
-  transition: all 0.3s ease-in-out;
-}
-
-/* .pan-thumb:after {
-  content: '';
-  width: 8px;
-  height: 8px;
-  position: absolute;
-  border-radius: 50%;
-  top: 40%;
-  left: 95%;
-  margin: -4px 0 0 -4px;
-  background: radial-gradient(ellipse at center, rgba(14, 14, 14, 1) 0%, rgba(125, 126, 125, 1) 100%);
-  box-shadow: 0 0 1px rgba(255, 255, 255, 0.9);
-} */
-
-.pan-info {
-  position: absolute;
-  width: inherit;
-  height: inherit;
-  border-radius: 50%;
-  overflow: hidden;
-  box-shadow: inset 0 0 0 5px rgba(0, 0, 0, 0.05);
-}
-
-.pan-info h3 {
-  color: #fff;
-  text-transform: uppercase;
-  position: relative;
-  letter-spacing: 2px;
-  font-size: 18px;
-  margin: 0 60px;
-  padding: 22px 0 0 0;
-  height: 85px;
-  font-family: 'Open Sans', Arial, sans-serif;
-  text-shadow: 0 0 1px #fff, 0 1px 2px rgba(0, 0, 0, 0.3);
-}
-
-.pan-info p {
-  color: #fff;
-  padding: 10px 5px;
-  font-style: italic;
-  margin: 0 30px;
-  font-size: 12px;
-  border-top: 1px solid rgba(255, 255, 255, 0.5);
-}
-
-.pan-info p a {
-  display: block;
-  color: #333;
-  width: 80px;
-  height: 80px;
-  background: rgba(255, 255, 255, 0.3);
-  border-radius: 50%;
-  color: #fff;
-  font-style: normal;
-  font-weight: 700;
-  text-transform: uppercase;
-  font-size: 9px;
-  letter-spacing: 1px;
-  padding-top: 24px;
-  margin: 7px auto 0;
-  font-family: 'Open Sans', Arial, sans-serif;
-  opacity: 0;
-  transition: transform 0.3s ease-in-out 0.2s, opacity 0.3s ease-in-out 0.2s, background 0.2s linear 0s;
-  transform: translateX(60px) rotate(90deg);
-}
-
-.pan-info p a:hover {
-  background: rgba(255, 255, 255, 0.5);
-}
-
-.pan-item:hover .pan-thumb {
-  transform: rotate(-110deg);
-}
-
-.pan-item:hover .pan-info p a {
-  opacity: 1;
-  transform: translateX(0px) rotate(0deg);
-}
-</style>

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

@@ -1,3 +0,0 @@
-<template >
-  <router-view />
-</template>

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

@@ -1,149 +0,0 @@
-<template>
-  <div ref="rightPanel" :class="{show:show}" class="rightPanel-container">
-    <div class="rightPanel-background" />
-    <div class="rightPanel">
-      <div class="rightPanel-items">
-        <slot />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { addClass, removeClass } from '../../../utils'
-
-export default {
-  name: 'RightPanel',
-  props: {
-    clickNotClose: {
-      default: false,
-      type: Boolean
-    },
-    buttonTop: {
-      default: 250,
-      type: Number
-    }
-  },
-  computed: {
-    show: {
-      get() {
-        return this.$store.state.settings.showSettings
-      },
-      set(val) {
-        this.$store.dispatch('settings/changeSetting', {
-          key: 'showSettings',
-          value: val
-        })
-      }
-    },
-    theme() {
-      return this.$store.state.settings.theme
-    },
-  },
-  watch: {
-    show(value) {
-      if (value && !this.clickNotClose) {
-        this.addEventClick()
-      }
-      if (value) {
-        addClass(document.body, 'showRightPanel')
-      } else {
-        removeClass(document.body, 'showRightPanel')
-      }
-    }
-  },
-  mounted() {
-    this.insertToBody()
-    this.addEventClick()
-  },
-  beforeDestroy() {
-    const elx = this.$refs.rightPanel
-    elx.remove()
-  },
-  methods: {
-    addEventClick() {
-      window.addEventListener('click', this.closeSidebar)
-    },
-    closeSidebar(evt) {
-      const parent = evt.target.closest('.rightPanel')
-      if (!parent) {
-        this.show = false
-        window.removeEventListener('click', this.closeSidebar)
-      }
-    },
-    insertToBody() {
-      const elx = this.$refs.rightPanel
-      const body = document.querySelector('body')
-      body.insertBefore(elx, body.firstChild)
-    }
-  }
-}
-</script>
-
-<style>
-.showRightPanel {
-  overflow: hidden;
-  position: relative;
-  width: calc(100% - 15px);
-}
-</style>
-
-<style lang="scss" scoped>
-.rightPanel-background {
-  position: fixed;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
-  background: rgba(0, 0, 0, .2);
-  z-index: -1;
-}
-
-.rightPanel {
-  width: 100%;
-  max-width: 260px;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  right: 0;
-  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
-  transition: all .25s cubic-bezier(.7, .3, .1, 1);
-  transform: translate(100%);
-  background: #fff;
-  z-index: 40000;
-}
-
-.show {
-  transition: all .3s cubic-bezier(.7, .3, .1, 1);
-
-  .rightPanel-background {
-    z-index: 20000;
-    opacity: 1;
-    width: 100%;
-    height: 100%;
-  }
-
-  .rightPanel {
-    transform: translate(0);
-  }
-}
-
-.handle-button {
-  width: 48px;
-  height: 48px;
-  position: absolute;
-  left: -48px;
-  text-align: center;
-  font-size: 24px;
-  border-radius: 6px 0 0 6px !important;
-  z-index: 0;
-  pointer-events: auto;
-  cursor: pointer;
-  color: #fff;
-  line-height: 48px;
-  i {
-    font-size: 24px;
-    line-height: 48px;
-  }
-}
-</style>

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

@@ -1,111 +0,0 @@
-<template>
-  <div class="top-right-btn">
-    <el-row>
-      <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top"
-                  v-if="searchVisible">
-        <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()"/>
-      </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="刷新" placement="top" v-if="refreshVisible">
-        <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()"/>
-      </el-tooltip>
-      <el-tooltip class="item" effect="dark" :content="sortable ? '禁用排序' : '启用排序'" placement="top" v-if="sortVisible">
-        <el-button size="mini" circle icon="el-icon-sort" @click="toggleSortable()"/>
-      </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">
-        <el-button size="mini" circle icon="el-icon-menu" @click="showColumn()"/>
-      </el-tooltip>
-    </el-row>
-    <el-dialog :title="title" :visible.sync="open" append-to-body>
-      <el-transfer
-        :titles="['显示', '隐藏']"
-        v-model="value"
-        :data="columns"
-        @change="dataChange"
-      ></el-transfer>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "RightToolbar",
-  data() {
-    return {
-      // 显隐数据
-      value: [],
-      // 弹出层标题
-      title: "显示/隐藏",
-      // 是否显示弹出层
-      sortable: true,
-      open: false
-    }
-  },
-  props: {
-    showSearch: {
-      type: Boolean,
-      default: true
-    },
-    columns: {
-      type: Array
-    },
-    searchVisible: {
-      type: Boolean,
-      default: true
-    },
-    refreshVisible: {
-      type: Boolean,
-      default: true
-    },
-    sortVisible: {
-      type: Boolean,
-      default: true
-    }
-  },
-  created() {
-    // 显隐列初始默认隐藏列
-    for (let item in this.columns) {
-      if (this.columns[item].visible === false) {
-        this.value.push(parseInt(item))
-      }
-    }
-  },
-  methods: {
-    // 搜索
-    toggleSearch() {
-      this.$emit("update:showSearch", !this.showSearch)
-    },
-    // 刷新
-    refresh() {
-      this.$emit("queryTable")
-    },
-    // 排序
-    toggleSortable() {
-      this.sortable = !this.sortable
-      this.$emit("controlSortable", !this.sortable)
-    },
-    // 右侧列表元素变化
-    dataChange(data) {
-      for (var item in this.columns) {
-        const key = this.columns[item].key
-        this.columns[item].visible = !data.includes(key)
-      }
-    },
-    // 打开显隐列dialog
-    showColumn() {
-      this.open = true
-    }
-  }
-}
-</script>
-<style lang="scss" scoped>
-::v-deep .el-transfer__button {
-  border-radius: 50%;
-  padding: 12px;
-  display: block;
-  margin-left: 0px;
-}
-
-::v-deep .el-transfer__button:first-child {
-  margin-bottom: 10px;
-}
-</style>