meixioacomponent 0.1.0

package/packages/components/base/baseUpload/baseUploadItem.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="base-upload-item-wrap" :class="[`${shape}`]">
+    <div class="type-upload" v-if="type == 'upload'">
+      <input
+        type="file"
+        ref="inputFile"
+        :accept="accept"
+        @change="valueChange"
+        style="display: none"
+        v-if="type == 'upload'"
+        :multiple="uploadType == 'single' ? false : true"
+      />
+      <base-icon
+        :color="`s`"
+        :event="true"
+        :size="`l`"
+        :name="`icon-plus`"
+        class="upload-icon"
+        @iconClick="clickFile"
+      ></base-icon>
+    </div>
+    <div v-else-if="type == 'img'" class="type-pre-views">
+      <div class="handleUploadItem">
+        <base-icon
+          :size="`l`"
+          :color="`d`"
+          :event="true"
+          :name="`icon-close`"
+          @iconClick="handleDeleteUploadItem"
+        ></base-icon>
+      </div>
+      <baseImgVue :src="imgSrc" :event="true"></baseImgVue>
+    </div>
+  </div>
+</template>
+
+<script>
+import baseImgVue from "../baseImg/baseImg.vue";
+// 
+import { baseUploadMixins } from "./mixins";
+export default {
+  name: "baseUploadItem",
+  data() {
+    return {};
+  },
+  mixins: [baseUploadMixins],
+  components: {
+    baseImgVue,
+  },
+  props: {
+    type: {
+      type: String,
+      default: "upload",
+    },
+
+    uploadType: {
+      type: String,
+      default: "single",
+    },
+
+    fileType: {
+      type: String,
+      default: "other",
+    },
+
+    uploadItem: {},
+
+    shape: {
+      // square rect cir
+      type: String,
+      default: "rect",
+    },
+
+    value: {
+      type: Array,
+    },
+    max: {
+      type: Number,
+      default: 99,
+    },
+  },
+  computed: {
+    module: {
+      get() {
+        return this.$props.value;
+      },
+      set(val) {},
+    },
+    imgSrc() {
+      if (!this.uploadItem.url) {
+        return "";
+      }
+      return this.uploadItem.url;
+    },
+    accept() {
+      let accept = "";
+      let fileType = this.$props.fileType;
+      switch (fileType) {
+        case "img":
+          accept = "image/*";
+          break;
+        case "other":
+          accept = "";
+          break;
+        default:
+          break;
+      }
+      return accept;
+    },
+  },
+  methods: {
+    clickFile() {
+      this.$refs.inputFile.click();
+    },
+    async returnFiles(files) {
+      let list = [];
+      for (let i = 0; i < files.length; i++) {
+        let obj = {
+          url: null,
+          process: 0,
+          file: files[i],
+        };
+        list.push(obj);
+      }
+      return list;
+    },
+    async valueChange(e) {
+      let files = e.target.files;
+      let list = await this.returnFiles(files);
+      if (this.$parent.$options.name == "baseUpload") {
+        this.$emit("inputChange", list);
+      } else {
+        this.inputChange(list);
+      }
+      this.$refs.inputFile.value = "";
+    },
+    handleDeleteUploadItem() {
+      this.$emit("handleDeleteUploadItem");
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.base-upload-item-wrap {
+  margin: var(--margin-4);
+  margin-left: 0px;
+  border-radius: calc(var(--radius) * 2);
+  border: 1px dashed var(--color-border-d);
+  .type-upload {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+    flex-flow: row nowrap;
+    justify-content: center;
+    .upload-icon {
+      width: 60px;
+      height: 60px;
+      /deep/ i {
+        font-size: 42px !important;
+      }
+    }
+  }
+  .type-pre-views {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    &:hover {
+      .handleUploadItem {
+        display: block;
+      }
+    }
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    .handleUploadItem {
+      top: 0px;
+      right: 0px;
+      z-index: 2;
+      width: auto;
+      height: auto;
+      display: none;
+      position: absolute;
+    }
+  }
+}
+.rect {
+  width: 140px;
+  height: 80px;
+}
+.cir {
+  width: 80px;
+  height: 80px;
+  overflow: hidden;
+  border-radius: 50%;
+}
+.square {
+  width: 100px;
+  height: 100px;
+}
+</style>

package/packages/components/base/baseUpload/mixins.js

@@ -0,0 +1,46 @@
+import useUpload from "../../../config/use/UseUpload";
+export const baseUploadMixins = {
+  data() {
+    return {
+      dynamicmount: null,
+    };
+  },
+  mounted() {},
+  beforeDestroy() {},
+
+  computed: {
+    isMax() {
+      if (this.module.length >= this.$props.max) {
+        return true;
+      }
+      return false;
+    },
+  },
+
+  methods: {
+    inputChange(list) {
+      if (this.module) {
+        for (let i = 0; i < list.length; i++) {
+          if (this.isMax) {
+            this.$message.error("超出文件上传限制");
+            break;
+          }
+          this.module.push(list[i]);
+        }
+      }
+      if (!this.uploadLoading) {
+        useUpload.toUpload(this.module ? this.module : list, this.uploadEd);
+      }
+
+      this.uploadLoading = true;
+    },
+
+    uploadEd(list) {
+      console.log(list);
+      console.log(this.module);
+      this.module = list;
+      this.uploadLoading = false;
+      this.$emit("uploadEd", list);
+    },
+  },
+};

package/packages/components/base/brieflyItem.vue

@@ -0,0 +1,198 @@
+<template>
+  <div
+    class="briefly-item-wrap"
+    :class="[`item${type}`]"
+    :style="{ padding: padding }"
+  >
+    <div class="briefly-title">
+      <span>{{ title }}</span>
+      <base-icon
+        v-if="icon"
+        :event="true"
+        :color="`m`"
+        :size="`l`"
+        :name="icon"
+        @iconClick="iconClick"
+      ></base-icon>
+      <el-tag :type="tagType" effect="dark" size="mini" v-if="tagName">
+        {{ tagName }}
+      </el-tag>
+    </div>
+    <div class="briefly-value">
+      {{ brieflyValue }}
+      <span class="company-text">{{ company }}</span>
+    </div>
+    <div class="briefly-des">
+      {{ brieflyDes }}
+      <span class="briefly-des-value" :class="[desType]">
+        {{ brieflyDesValue }}
+        <base-icon
+          v-if="desType == 'top'"
+          :size="`l`"
+          class="des-type-icon"
+          :name="`icon-shangjiantou`"
+        >
+        </base-icon>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  props: {
+    type: {
+      type: String,
+      default: "info",
+    },
+
+    padding: {
+      type: String,
+      default: "calc(var(--padding-4) * 2)",
+    },
+
+    brieflyValue: {
+      type: String | Number,
+      require: true,
+    },
+
+    brieflyDes: {
+      type: String,
+      require: true,
+    },
+
+    brieflyDesValue: {
+      type: String | Number,
+    },
+
+    desType: {
+      type: String,
+    },
+
+    title: {
+      type: String,
+      require: true,
+    },
+
+    icon: {
+      type: String,
+    },
+
+    tagType: {
+      type: String,
+    },
+
+    tagName: {
+      type: String,
+    },
+
+    company: {
+      type: String,
+      require: true,
+    },
+  },
+  computed: {},
+  methods: {
+    iconClick() {},
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.briefly-item-wrap {
+  width: auto;
+  height: auto;
+  display: flex;
+  box-sizing: border-box;
+  align-items: flex-start;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+  border-radius: calc(var(--radius) * 2);
+  .briefly-title {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    flex-flow: row nowrap;
+    color: var(--font-color-s);
+    justify-content: flex-start;
+    font-size: var(--font-size-base);
+  }
+  .briefly-value {
+    font-weight: 700;
+
+    color: var(--font-color-d);
+    font-size: calc(var(--font-size-xl) + 4px);
+    .company-text {
+      font-weight: 400;
+      color: var(--font-color-m);
+      margin-left: var(--margin-2);
+      font-size: var(--font-size-s);
+    }
+  }
+
+  .briefly-des {
+    display: flex;
+    align-items: center;
+    color: var(--font-color-s);
+    font-size: var(--font-size-s);
+
+    .briefly-des-value {
+      display: flex;
+      align-items: center;
+      margin-left: var(--margin-4);
+      font-size: var(--font-size-base);
+      font-weight: var(--font-weight-kg);
+      .des-type-icon {
+        width: auto !important;
+        height: auto !important;
+        /deep/ i {
+          margin-top: var(--margin-1);
+        }
+      }
+    }
+
+    .top {
+      color: var(--color-error);
+      .des-type-icon {
+        /deep/ i {
+          color: var(--color-error) !important;
+        }
+      }
+    }
+    .down {
+      color: var(--color-success);
+      .des-type-icon {
+        /deep/ i {
+          color: var(--color-success) !important;
+        }
+      }
+    }
+  }
+}
+.itemprimary {
+  background: var(--color-primary);
+  .briefly-title,
+  .briefly-value,
+  .company-text,
+  .briefly-des {
+    color: white !important;
+    .briefly-des-value {
+      color: white;
+      .des-type-icon {
+        /deep/ i {
+          color: white !important;
+        }
+      }
+    }
+  }
+}
+.iteminfo {
+  background: var(--color-gray-m);
+}
+.shallow {
+  background: white;
+}
+</style>

package/packages/components/base/upload/index.js

@@ -0,0 +1,6 @@
+import upload from "./upload.vue";
+
+upload.install = function (Vue) {
+  Vue.component(upload.name, upload);
+};
+export default upload;

package/packages/components/base/upload/upload.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="upload-wrap" :style="wrapStyle">
+    <div class="upload-title" :class="{ isDown: isDown && completed }">
+      <div class="title-left">
+        <span>附件上传</span>
+      </div>
+      <div class="title-right">
+        <base-icon
+          :size="`l`"
+          :color="`d`"
+          :event="true"
+          @iconClick="handleDown"
+          :name="handleDownIcon"
+        ></base-icon>
+        <base-icon
+          :name="`icon-close`"
+          :color="`d`"
+          :size="`l`"
+          :event="true"
+          @iconClick="uploadCancel"
+        ></base-icon>
+      </div>
+      <div v-if="isDown" class="total-process-wrap" :style="totalStyle"></div>
+    </div>
+    <div class="upload-content">
+      <uploadItemVue
+        :key="index"
+        :item="item"
+        v-for="(item, index) in filterArray"
+      ></uploadItemVue>
+    </div>
+  </div>
+</template>
+
+<script>
+import uploadItemVue from "./uploadItem.vue";
+//
+import Upload from "../../../utils/upload";
+export default {
+  name: "upload",
+  data() {
+    return {
+      isDown: false,
+    };
+  },
+  mounted() {
+    this.startUpload();
+  },
+  components: {
+    uploadItemVue,
+  },
+  props: {
+    uploadArray: {
+      type: Array,
+    },
+    uploadEdEvent: {
+      type: Function,
+      require: true,
+    },
+  },
+  computed: {
+    filterArray() {
+      return this.uploadArray.filter((item) => {
+        return item.file;
+      });
+    },
+    wrapStyle() {
+      return {
+        bottom: this.isDown ? "-360px" : "0px",
+      };
+    },
+    handleDownIcon() {
+      if (this.isDown) {
+        return "icon-shouqi";
+      }
+      return "icon-xiala";
+    },
+
+    completed() {
+      let uploadArray = this.$props.uploadArray;
+      return (
+        uploadArray.filter((item) => {
+          return item.process == 100;
+        }).length / uploadArray.length
+      );
+    },
+    totalStyle() {
+      return { width: `${this.completed * 100}%` };
+    },
+  },
+  methods: {
+    handleDown() {
+      this.isDown = !this.isDown;
+    },
+    async startUpload() {
+      for (let i = 0; i < this.$props.uploadArray.length; i++) {
+        let item = this.$props.uploadArray[i];
+        this.createUpload(item);
+      }
+    },
+
+    appendUploadItem(list) {
+      if (list instanceof Array) {
+        list.forEach((item) => {
+          this.$props.uploadArray.push(item);
+          this.createUpload(item);
+        });
+      } else {
+        this.$props.uploadArray.push(list);
+      }
+    },
+    createUpload(uploadItem) {
+      if (uploadItem.file && uploadItem.process != 100) {
+        uploadItem.upload = new Upload({
+          file: uploadItem.file,
+          uploadProgressFn: (process) => {
+            uploadItem.process = process;
+          },
+        });
+        uploadItem.upload
+          .start()
+          .then((uploadEdUrl) => {
+            this.$set(uploadItem, "url", uploadEdUrl);
+            // uploadItem.url = uploadEdUrl;
+            this.uploadEd();
+          })
+          .catch((error) => {
+            // uploadItem.url = "cancel";
+            this.$set(uploadItem, "url", "cancel");
+            this.uploadEd();
+          });
+      }
+    },
+
+    uploadCancel() {
+      let flag = this.$props.uploadArray.some((item) => {
+        return item.upload?.state == 0;
+      });
+
+      if (flag) {
+        this.$confirm("此操作将取消当前未上传的文件, 是否继续?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        })
+          .then(() => {
+            this.$props.uploadArray.forEach((item) => {
+              if (item.upload?.state == 0) {
+                item.upload.cancel();
+              }
+            });
+            this.uploadEd();
+          })
+          .catch(() => {});
+      } else {
+        this.uploadEd();
+      }
+    },
+
+    uploadEd() {
+      let flag = this.$props.uploadArray.every((item) => {
+        return !item.upload || item.upload.state != 0;
+      });
+      if (flag) {
+        if (this.$props.uploadEdEvent) {
+          let list = this.$props.uploadArray.filter((item) => {
+            return item.process == 100 || !item.upload;
+          });
+          this.$props.uploadArray = list;
+          console.log(this.$props.uploadArray);
+          this.$props.uploadEdEvent(list);
+        }
+      }
+    },
+
+    uploadFailed() {
+      if (this.$props.uploadEdEvent) {
+        this.$props.uploadEdEvent();
+      }
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.upload-wrap {
+  right: 0px;
+  width: 380px;
+  height: 400px;
+  z-index: 999999;
+  position: fixed;
+  box-shadow: var(--shadow);
+  background: var(--bg-white);
+  transition: all 0.3s ease-in;
+  .upload-title {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    position: relative;
+    align-items: center;
+    flex-flow: row nowrap;
+    box-sizing: border-box;
+    padding: var(--padding-5);
+    justify-content: space-between;
+    span {
+      text-align: left;
+      color: var(--font-color-m);
+      font-size: var(--font-size-base);
+    }
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    .title-right,
+    .title-left {
+      z-index: 2;
+    }
+    .title-right {
+      display: flex;
+    }
+    .total-process-wrap {
+      top: 0px;
+      left: 0px;
+      z-index: 1;
+      height: 100%;
+      position: absolute;
+      transition: all 0.3s ease;
+      background: var(--color-primary);
+    }
+  }
+  .isDown {
+    position: relative;
+    span {
+      color: var(--bg-white) !important;
+    }
+    /deep/ i {
+      color: var(--bg-white) !important;
+    }
+  }
+  .upload-content {
+    width: 100%;
+    overflow-y: auto;
+    box-sizing: border-box;
+    padding: var(--padding-5);
+    height: calc(100% - 40px);
+  }
+}
+</style>