From b2c768025c6673d73aa3c904c4ac381b813cb8b1 Mon Sep 17 00:00:00 2001
From: 777 <123@qwe.com>
Date: Thu, 9 Jan 2025 18:44:45 +0800
Subject: [PATCH] =?UTF-8?q?=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/FileUpload2/index.vue      | 228 ++++++++++++++++++++++
 src/views/cai/gift/index.vue              |   1 +
 src/views/cai/gift/update-gift-dialog.vue |   7 +-
 3 files changed, 232 insertions(+), 4 deletions(-)
 create mode 100644 src/components/FileUpload2/index.vue

diff --git a/src/components/FileUpload2/index.vue b/src/components/FileUpload2/index.vue
new file mode 100644
index 0000000..0114d34
--- /dev/null
+++ b/src/components/FileUpload2/index.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="upload-file">
+    <el-upload
+      multiple
+      :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="fileUpload"
+    >
+      <!-- 上传按钮 -->
+      <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.url" 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";
+import { listByIds, delOss } from "@/api/system/oss";
+
+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 {
+      number: 0,
+      uploadList: [],
+      baseUrl: process.env.VUE_APP_BASE_API,
+      uploadFileUrl: process.env.VUE_APP_BASE_API + "/system/oss/upload", // 上传文件服务器地址
+      headers: {
+        Authorization: "Bearer " + getToken(),
+      },
+      fileList: [],
+    };
+  },
+  watch: {
+    value: {
+      async handler(val) {
+        if (val) {
+          let temp = 1;
+          // 首先将值转为数组
+          let list;
+          if (Array.isArray(val)) {
+            list = val;
+          } else {
+            list = [{
+              url: process.env.VUE_APP_COS_BASE_URL + val,
+              ossId: val,
+              path: val,
+              name: val
+            }]
+          }
+          // 然后将数组转为对象数组
+          this.fileList = list.map(item => {
+            item = { name: item.name, url: item.url, ossId: item.ossId };
+            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) {
+        const fileName = file.name.split('.');
+        const fileExt = fileName[fileName.length - 1];
+        const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
+        if (!isTypeOk) {
+          this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
+          return false;
+        }
+      }
+      // 校检文件大小
+      if (this.fileSize) {
+        const isLt = file.size / 1024 / 1024 < this.fileSize;
+        if (!isLt) {
+          this.$modal.msgError(`上传文件大小不能超过 ${this.fileSize} MB!`);
+          return false;
+        }
+      }
+      this.$modal.loading("正在上传文件，请稍候...");
+      this.number++;
+      return true;
+    },
+    // 文件个数超出
+    handleExceed() {
+      this.$modal.msgError(`上传文件数量不能超过 ${this.limit} 个!`);
+    },
+    // 上传失败
+    handleUploadError(err) {
+      this.$modal.msgError("上传文件失败，请重试");
+      this.$modal.closeLoading();
+    },
+    // 上传成功回调
+    handleUploadSuccess(res, file) {
+      if (res.code === 200) {
+        this.uploadList.push({ name: res.data.fileName, url: res.data.url, ossId: res.data.ossId, path: res.data.path });
+        this.uploadedSuccessfully();
+      } else {
+        this.number--;
+        this.$modal.closeLoading();
+        this.$modal.msgError(res.msg);
+        this.$refs.fileUpload.handleRemove(file);
+        this.uploadedSuccessfully();
+      }
+    },
+    // 删除文件
+    handleDelete(index) {
+      let ossId = this.fileList[index].ossId;
+      // delOss(ossId);
+      this.fileList.splice(index, 1);
+      this.$emit("input", this.listToString(this.fileList));
+    },
+    // 上传结束处理
+    uploadedSuccessfully() {
+      if (this.number > 0 && this.uploadList.length === this.number) {
+        this.fileList = this.fileList.concat(this.uploadList);
+        this.uploadList = [];
+        this.number = 0;
+        this.$emit("input", this.listToString(this.fileList));
+        this.$modal.closeLoading();
+      }
+    },
+    // 获取文件名称
+    getFileName(name) {
+      // 如果是url那么取最后的名字 如果不是直接返回
+      if (name.lastIndexOf("/") > -1) {
+        return name.slice(name.lastIndexOf("/") + 1);
+      } else {
+        return name;
+      }
+    },
+    // 对象转成指定字符串分隔
+    listToString(list, separator) {
+      let strs = "";
+      separator = separator || ",";
+      for (let i in list) {
+        strs += list[i].path + separator;
+      }
+      console.log(list)
+      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>
diff --git a/src/views/cai/gift/index.vue b/src/views/cai/gift/index.vue
index 5948471..09fff5a 100644
--- a/src/views/cai/gift/index.vue
+++ b/src/views/cai/gift/index.vue
@@ -38,6 +38,7 @@
           <image-preview :src="scope.row.img" :width="34" :height="34"/>
         </template>
       </el-table-column>
+      <el-table-column label="动态图" align="center" prop="svga" show-overflow-tooltip/>
       <el-table-column label="礼物描述" align="center" prop="desc"/>
       <el-table-column label="排序" align="center" prop="sort"/>
       <el-table-column label="状态" align="center" prop="status">
diff --git a/src/views/cai/gift/update-gift-dialog.vue b/src/views/cai/gift/update-gift-dialog.vue
index 4391bb2..519842e 100644
--- a/src/views/cai/gift/update-gift-dialog.vue
+++ b/src/views/cai/gift/update-gift-dialog.vue
@@ -5,7 +5,7 @@
         <image-upload2 v-model="form.img"/>
       </el-form-item>
       <el-form-item label="动态文件" prop="svga">
-        <file-upload v-model="form.svga" :file-size="50" :file-type="['svga']" :limit="1"/>
+        <file-upload2 v-model="form.svga" :file-size="50" :file-type="['svga']" :limit="1"/>
       </el-form-item>
       <el-form-item label="礼物名称" prop="name">
         <el-input v-model="form.name" />
@@ -28,13 +28,12 @@
 </template>
 
 <script>
-import ImageUpload from '@/components/ImageUpload/index'
-import {getAnchor, updateAnchor} from "@/api/cai/anchor";
 import {addGift, getGift, updateGift} from "@/api/cai/gift";
+import FileUpload2 from "@/components/FileUpload2/index.vue";
 
 export default {
   components: {
-    ImageUpload,
+    FileUpload2
   },
   data () {
     return {