From 7419c0ca27db343a4555cbeab0d6a4ef914493bb Mon Sep 17 00:00:00 2001
From: zhangzhen <525765282@qq.com>
Date: Wed, 16 Nov 2022 10:06:32 +0800
Subject: [PATCH] 图片组件功能完善

---
 src/views/bigscreenDesigner/designer/components/customUploadNew.vue | 56 +++++++++++++++++++++++++++++++-------------------------
 src/views/bigscreenDesigner/designer/widget/widgetImage.vue         |  5 +++--
 2 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/src/views/bigscreenDesigner/designer/components/customUploadNew.vue b/src/views/bigscreenDesigner/designer/components/customUploadNew.vue
index d1b562a..ceb6c37 100644
--- a/src/views/bigscreenDesigner/designer/components/customUploadNew.vue
+++ b/src/views/bigscreenDesigner/designer/components/customUploadNew.vue
@@ -12,7 +12,8 @@
       <el-button size="medium" type="info" icon="el-icon-upload2" @click="uploadHandler">点击上传</el-button>
       <input type="file" class="file" ref="files" @change="getImages" />
       <div class="image-list">
-        <el-image class="image" v-for="item in fileList" :key="item.fileId" :src="item.urlPath" lazy></el-image>
+        <el-image class="image" v-for="item in fileList" :key="item.fileId" :src="item.urlPath" lazy
+          @click="imageClickHander(item)"></el-image>
       </div>
     </el-dialog>
 
@@ -48,14 +49,20 @@ export default {
       uploadImgUrl: ""
     };
   },
-  async created() {
+  created() {
     this.uploadImgUrl = this.value;
-    const rs = await getFielList();
-    if (rs.code === 200 || rs.code === "200") {
-      this.fileList = rs.data;
-    }
+    this.getFielList();
   },
   methods: {
+    // 获取图片列表
+    async getFielList() {
+      const rs = await getFielList();
+      if (rs.code === 200 || rs.code === "200") {
+        let fileList = rs.data;
+        fileList.reverse();
+        this.fileList = fileList;
+      }
+    },
     uploadHandler() {
       this.$refs.files.click();
     },
@@ -68,6 +75,7 @@ export default {
         this.$message.warning("只能上传图片格式")
       }
     },
+    // 图片上传
     upload(file) {
       let that = this;
       let formdata = new FormData();
@@ -79,33 +87,31 @@ export default {
         .then(response => {
           let res = response.data;
           if (res.code === "200") {
-            that.uploadImgUrl = res.data.urlPath;
-            that.$emit("input", that.uploadImgUrl);
-            that.$emit("change", that.uploadImgUrl);
+            this.getFielList();
+            // that.uploadImgUrl = res.data.urlPath;
+            // that.$emit("input", that.uploadImgUrl);
+            // that.$emit("change", that.uploadImgUrl);
           }
         });
     },
-    changeInput(e) {
-      // if (e) {
-      //   this.uploadImgUrl = e;
-      // } else {
-      //   this.$refs.files.value = "";
-      //   this.uploadImgUrl = "";
-      // }
-      // this.$emit("input", this.uploadImgUrl);
-      // this.$emit("change", this.uploadImgUrl);
-    }
+    // 文本框url改变
+    changeInput() {
+      this.$emit("input", this.uploadImgUrl);
+      this.$emit("change", this.uploadImgUrl);
+    },
+    // 图片点击事件
+    imageClickHander(item) {
+      const { urlPath } = item;
+      this.uploadImgUrl = urlPath;
+      this.$emit("input", urlPath);
+      this.$emit("change", urlPath);
+      this.dialogVisible = false;
+    },
   }
 };
 </script>
 <style lang="scss" scoped>
 .file {
-  // position: absolute;
-  // width: 100%;
-  // padding: 100%;
-  // right: 0;
-  // top: 0;
-  // opacity: 0;
   display: none;
 }
 
diff --git a/src/views/bigscreenDesigner/designer/widget/widgetImage.vue b/src/views/bigscreenDesigner/designer/widget/widgetImage.vue
index b23bc24..90c460b 100644
--- a/src/views/bigscreenDesigner/designer/widget/widgetImage.vue
+++ b/src/views/bigscreenDesigner/designer/widget/widgetImage.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="imagebox" :style="styleColor">
-    <div class="bg"></div>
-    <img :class="transStyle.startRotate ? 'startImg' : ''" :style="imgStyle" :src="imgStyle.imageAdress" alt="" />
+    <div class="bg" v-if="!imgStyle.imageAdress"></div>
+    <img :class="transStyle.startRotate ? 'startImg' : ''" :style="imgStyle" :src="imgStyle.imageAdress" alt=""
+      v-else />
   </div>
 </template>
 <script>
--
libgit2 0.22.2