qiangmj / report-ui

Commit 7419c0ca27db343a4555cbeab0d6a4ef914493bb

Authored by zhangzzzz
1 parent 976a4b61

图片组件功能完善

Inline Side-by-side
Showing 2 changed files with 34 additions and 27 deletions
src/views/bigscreenDesigner/designer/components/customUploadNew.vue
  View file @7419c0c
... ... @@ -12,7 +12,8 @@
12 12 <el-button size="medium" type="info" icon="el-icon-upload2" @click="uploadHandler">点击上传</el-button>
13 13 <input type="file" class="file" ref="files" @change="getImages" />
14 14 <div class="image-list">
15   - <el-image class="image" v-for="item in fileList" :key="item.fileId" :src="item.urlPath" lazy></el-image>
  15 + <el-image class="image" v-for="item in fileList" :key="item.fileId" :src="item.urlPath" lazy
  16 + @click="imageClickHander(item)"></el-image>
16 17 </div>
17 18 </el-dialog>
18 19  
... ... @@ -48,14 +49,20 @@ export default {
48 49 uploadImgUrl: ""
49 50 };
50 51 },
51   - async created() {
  52 + created() {
52 53 this.uploadImgUrl = this.value;
53   - const rs = await getFielList();
54   - if (rs.code === 200 || rs.code === "200") {
55   - this.fileList = rs.data;
56   - }
  54 + this.getFielList();
57 55 },
58 56 methods: {
  57 + // 获取图片列表
  58 + async getFielList() {
  59 + const rs = await getFielList();
  60 + if (rs.code === 200 || rs.code === "200") {
  61 + let fileList = rs.data;
  62 + fileList.reverse();
  63 + this.fileList = fileList;
  64 + }
  65 + },
59 66 uploadHandler() {
60 67 this.$refs.files.click();
61 68 },
... ... @@ -68,6 +75,7 @@ export default {
68 75 this.$message.warning("只能上传图片格式")
69 76 }
70 77 },
  78 + // 图片上传
71 79 upload(file) {
72 80 let that = this;
73 81 let formdata = new FormData();
... ... @@ -79,33 +87,31 @@ export default {
79 87 .then(response => {
80 88 let res = response.data;
81 89 if (res.code === "200") {
82   - that.uploadImgUrl = res.data.urlPath;
83   - that.$emit("input", that.uploadImgUrl);
84   - that.$emit("change", that.uploadImgUrl);
  90 + this.getFielList();
  91 + // that.uploadImgUrl = res.data.urlPath;
  92 + // that.$emit("input", that.uploadImgUrl);
  93 + // that.$emit("change", that.uploadImgUrl);
85 94 }
86 95 });
87 96 },
88   - changeInput(e) {
89   - // if (e) {
90   - // this.uploadImgUrl = e;
91   - // } else {
92   - // this.$refs.files.value = "";
93   - // this.uploadImgUrl = "";
94   - // }
95   - // this.$emit("input", this.uploadImgUrl);
96   - // this.$emit("change", this.uploadImgUrl);
97   - }
  97 + // 文本框url改变
  98 + changeInput() {
  99 + this.$emit("input", this.uploadImgUrl);
  100 + this.$emit("change", this.uploadImgUrl);
  101 + },
  102 + // 图片点击事件
  103 + imageClickHander(item) {
  104 + const { urlPath } = item;
  105 + this.uploadImgUrl = urlPath;
  106 + this.$emit("input", urlPath);
  107 + this.$emit("change", urlPath);
  108 + this.dialogVisible = false;
  109 + },
98 110 }
99 111 };
100 112 </script>
101 113 <style lang="scss" scoped>
102 114 .file {
103   - // position: absolute;
104   - // width: 100%;
105   - // padding: 100%;
106   - // right: 0;
107   - // top: 0;
108   - // opacity: 0;
109 115 display: none;
110 116 }
111 117  
... ...
src/views/bigscreenDesigner/designer/widget/widgetImage.vue
  View file @7419c0c
1 1 <template>
2 2 <div class="imagebox" :style="styleColor">
3   - <div class="bg"></div>
4   - <img :class="transStyle.startRotate ? 'startImg' : ''" :style="imgStyle" :src="imgStyle.imageAdress" alt="" />
  3 + <div class="bg" v-if="!imgStyle.imageAdress"></div>
  4 + <img :class="transStyle.startRotate ? 'startImg' : ''" :style="imgStyle" :src="imgStyle.imageAdress" alt=""
  5 + v-else />
5 6 </div>
6 7 </template>
7 8 <script>
... ...