qiangmj / report-ui

Commit 265b02fada7505819264b54db60e998ab0374a9f

Authored by zhangzzzz
1 parent b2500839

轮播图组件

Inline Side-by-side
Showing 5 changed files with 324 additions and 109 deletions
src/views/bigscreenDesigner/designer/components/customUploadMulti.vue 0 → 100644
  View file @265b02f
  1 +<template>
  2 + <div>
  3 + <el-input clearable v-model.trim="uploadImgUrl" size="mini" @change="changeInput">
  4 + <template slot="append">
  5 + <i class="iconfont iconfolder-o" @click="dialogVisible = true"></i>
  6 + </template>
  7 + </el-input>
  8 +
  9 +
  10 + <!-- 弹窗 -->
  11 + <el-dialog title="图库" :visible.sync="dialogVisible" top="1vh">
  12 + <el-button size="medium" type="info" icon="el-icon-upload2" @click="uploadHandler">点击上传</el-button>
  13 + <input type="file" class="file" ref="files" @change="getImages" />
  14 + <div class="title">可选列表</div>
  15 + <div class="image-list">
  16 + <el-image class="image" v-for="item in fileList" :key="item.fileId" :src="item.urlPath" lazy
  17 + @click="imageClickHander(item)"></el-image>
  18 + </div>
  19 + <div class="title">已选列表</div>
  20 + <div class="image-selected-list">
  21 + <template v-for="item in selectedFileList">
  22 + <el-image class="image" :key="item.fileId" :src="item.urlPath"></el-image>
  23 + <i class="close el-icon-delete" @click="deleteFileHandler(item)"></i>
  24 + </template>
  25 + </div>
  26 + <div slot="footer" class="dialog-footer">
  27 + <el-button @click="dialogVisible = false">取 消</el-button>
  28 + <el-button type="primary" @click="confirm">确 定</el-button>
  29 + </div>
  30 + </el-dialog>
  31 +
  32 +
  33 +
  34 +
  35 + </div>
  36 +</template>
  37 +<script>
  38 +import axios from "axios";
  39 +import { getToken } from "@/utils/auth";
  40 +import { getFielList } from "@/api/file"
  41 +export default {
  42 + name: 'custom-upload-new',
  43 + model: {
  44 + prop: "value",
  45 + event: "input"
  46 + },
  47 + props: {
  48 + value: {
  49 + type: "",
  50 + default: ""
  51 + }
  52 + },
  53 + data() {
  54 + return {
  55 + dialogVisible: false, // 弹窗状态
  56 + requestUrl: process.env.BASE_API + "/file/upload",
  57 + headers: {
  58 + Authorization: getToken()
  59 + },
  60 + fileList: [], // 图片列表
  61 + selectedFileList: [], // 选中的图片列表
  62 + uploadImgUrl: ""
  63 + };
  64 + },
  65 + created() {
  66 + this.uploadImgUrl = this.value;
  67 + this.getFielList();
  68 + },
  69 + methods: {
  70 + // 获取图片列表
  71 + async getFielList() {
  72 + const rs = await getFielList();
  73 + if (rs.code === 200 || rs.code === "200") {
  74 + let fileList = rs.data;
  75 + fileList.reverse();
  76 + this.fileList = fileList;
  77 + }
  78 + },
  79 + uploadHandler() {
  80 + this.$refs.files.click();
  81 + },
  82 + getImages(el) {
  83 + const file = el.target.files[0];
  84 + const type = file.type.split("/")[0];
  85 + if (type === "image") {
  86 + this.upload(file);
  87 + } else {
  88 + this.$message.warning("只能上传图片格式")
  89 + }
  90 + },
  91 + // 图片上传
  92 + upload(file) {
  93 + let that = this;
  94 + let formdata = new FormData();
  95 + formdata.append("file", file);
  96 + axios
  97 + .post(this.requestUrl, formdata, {
  98 + headers: that.headers
  99 + })
  100 + .then(response => {
  101 + let res = response.data;
  102 + if (res.code === "200") {
  103 + this.getFielList();
  104 + }
  105 + });
  106 + },
  107 + // 文本框url改变
  108 + changeInput() {
  109 + this.$emit("input", this.uploadImgUrl);
  110 + this.$emit("change", this.uploadImgUrl);
  111 + },
  112 + // 图片点击事件
  113 + imageClickHander(item) {
  114 + if (!this.selectedFileList.includes(item)) {
  115 + this.selectedFileList.push(item);
  116 + }
  117 + },
  118 + // 删除已选图片
  119 + deleteFileHandler(item) {
  120 + this.selectedFileList = this.selectedFileList.filter(value => {
  121 + return value.fileId !== item.fileId;
  122 + });
  123 + },
  124 + // 确定按钮
  125 + confirm() {
  126 + const urlList = this.selectedFileList.map(item => {return item.urlPath});
  127 + const urlPath = urlList.toString();
  128 + this.$emit("input", urlPath);
  129 + this.$emit("change", urlPath);
  130 + this.dialogVisible = false;
  131 + }
  132 + }
  133 +};
  134 +</script>
  135 +<style lang="scss" scoped>
  136 +.file {
  137 + display: none;
  138 +}
  139 +
  140 +/deep/.el-input-group__append,
  141 +/deep/.el-input-group__prepend {
  142 + padding: 0 10px !important;
  143 + overflow: hidden;
  144 +}
  145 +
  146 +.iconfont {
  147 + cursor: pointer;
  148 + font-size: 12px;
  149 +}
  150 +
  151 +
  152 +/deep/ .el-dialog .el-dialog__header,
  153 +/deep/ .el-dialog__body,
  154 +/deep/.el-dialog__footer {
  155 + background: #1b1e25;
  156 +}
  157 +
  158 +.image-list {
  159 + margin-top: 20px;
  160 + height: 40vh;
  161 + overflow: auto;
  162 +
  163 + &::-webkit-scrollbar {
  164 + /*滚动条整体样式*/
  165 + width: 8px;
  166 + /*高宽分别对应横竖滚动条的尺寸*/
  167 + height: 1px;
  168 + }
  169 +
  170 + &::-webkit-scrollbar-thumb {
  171 + /*滚动条里面小方块*/
  172 + border-radius: 10px;
  173 + background: #535353;
  174 + }
  175 +
  176 + &::-webkit-scrollbar-track-piece {
  177 + /*滚动条里面轨道*/
  178 + border-radius: 10px;
  179 + background: #1b1e25;
  180 + }
  181 +
  182 + .image {
  183 + width: 20%;
  184 + padding: 0 0.5px 0 0.5px;
  185 + min-height: 90px;
  186 +
  187 + /deep/ .el-image__error {
  188 + width: 100%;
  189 + height: 100%;
  190 + min-height: 90px;
  191 + }
  192 + }
  193 +}
  194 +
  195 +.image-selected-list {
  196 + @extend .image-list;
  197 + height: 20vh;
  198 + position: relative;
  199 +
  200 + .close {
  201 + color: #FFFFFF;
  202 + cursor: pointer;
  203 + }
  204 +}
  205 +
  206 +.title {
  207 + color: #909399;
  208 +}
  209 +</style>
... ...
src/views/bigscreenDesigner/designer/components/dynamicForm.vue
  View file @265b02f
... ... @@ -66,6 +66,11 @@
66 66 @change="changed($event, item.name)">
67 67 </CustomUploadNew>
68 68  
  69 + <CustomUploadMulti v-if="item.type == 'custom-upload-multi'"
  70 + v-model="formData[item.name]"
  71 + @change="changed($event, item.name)">
  72 + </CustomUploadMulti>
  73 +
69 74 <customUpload
70 75 v-if="item.type == 'custom-upload'"
71 76 v-model="formData[item.name]"
... ... @@ -283,6 +288,7 @@ import customColorComponents from &quot;./customColorComponents&quot;;
283 288 import dynamicAddTable from "./dynamicAddTable.vue";
284 289 import customUpload from "./customUpload.vue";
285 290 import CustomUploadNew from "./customUploadNew";
  291 +import CustomUploadMulti from "./customUploadMulti";
286 292 export default {
287 293 name: "DynamicForm",
288 294 components: {
... ... @@ -292,7 +298,8 @@ export default {
292 298 customColorComponents,
293 299 dynamicAddTable,
294 300 customUpload,
295   - CustomUploadNew
  301 + CustomUploadNew,
  302 + CustomUploadMulti
296 303 },
297 304 model: {
298 305 prop: "value",
... ...
src/views/bigscreenDesigner/designer/tools/configure/widget-slider.js
  View file @265b02f
... ... @@ -20,6 +20,7 @@ export const widgetSliders = {
20 20 name: 'layerName',
21 21 required: false,
22 22 placeholder: '',
  23 + value: '轮播图片'
23 24 },
24 25 {
25 26 type: 'el-switch',
... ... @@ -34,6 +35,23 @@ export const widgetSliders = {
34 35 name: 'tabDirection',
35 36 required: false,
36 37 placeholder: '',
  38 + selectOptions: [
  39 + {code: 'horizontal', name: '横向'},
  40 + {code: 'vertical', name: '竖向'},
  41 + ],
  42 + value: 'horizontal'
  43 + },
  44 + {
  45 + type: 'el-select',
  46 + label: '类型',
  47 + name: 'tabType',
  48 + required: false,
  49 + placeholder: '',
  50 + selectOptions: [
  51 + {code: '', name: '普通'},
  52 + {code: 'card', name: '立体'},
  53 + ],
  54 + value: ''
37 55 },
38 56 {
39 57 type: 'el-select',
... ... @@ -41,6 +59,11 @@ export const widgetSliders = {
41 59 name: 'tabSelector',
42 60 required: false,
43 61 placeholder: '',
  62 + selectOptions: [
  63 + {code: '', name: '显示'},
  64 + {code: 'none', name: '不显示'},
  65 + ],
  66 + value: ''
44 67 },
45 68 {
46 69 type: 'el-input-number',
... ... @@ -48,6 +71,15 @@ export const widgetSliders = {
48 71 name: 'tabTime',
49 72 required: false,
50 73 placeholder: '',
  74 + value: 3000
  75 + },
  76 + {
  77 + type: 'custom-upload-multi',
  78 + label: '图片地址',
  79 + name: 'imageAdress',
  80 + required: false,
  81 + placeholder: '',
  82 + value: '',
51 83 },
52 84 ],
53 85 // 数据
... ... @@ -60,6 +92,7 @@ export const widgetSliders = {
60 92 name: 'left',
61 93 required: true,
62 94 placeholder: '',
  95 + value: 0,
63 96 },
64 97 {
65 98 type: 'el-input-number',
... ... @@ -67,6 +100,7 @@ export const widgetSliders = {
67 100 name: 'top',
68 101 required: true,
69 102 placeholder: '',
  103 + value: 0,
70 104 },
71 105 {
72 106 type: 'el-input-number',
... ... @@ -74,6 +108,7 @@ export const widgetSliders = {
74 108 name: 'width',
75 109 required: true,
76 110 placeholder: '该容器在1920px大屏中的宽度',
  111 + value: 1000,
77 112 },
78 113 {
79 114 type: 'el-input-number',
... ... @@ -81,6 +116,7 @@ export const widgetSliders = {
81 116 name: 'height',
82 117 required: true,
83 118 placeholder: '该容器在1080px大屏中的高度',
  119 + value: 600,
84 120 },
85 121 ],
86 122 }
... ...
src/views/bigscreenDesigner/designer/tools/main.js
  View file @265b02f
... ... @@ -47,7 +47,7 @@ export const widgetTool = [
47 47 widgetHref,
48 48 widgetTime,
49 49 widgetImage,
50   - // widgetSliders,//待开发 轮播图，目前是单传图片 需要多传图片
  50 + widgetSliders,//待开发 轮播图，目前是单传图片 需要多传图片
51 51 widgetVideo,
52 52 widgetTable,
53 53 widgetIframe,
... ...
src/views/bigscreenDesigner/designer/widget/widgetSlider.vue
  View file @265b02f
1 1 <template>
2   - <superslide :options="options" class="slideBox">
3   - <!-- slides -->
4   - <div class="bd">
5   - <ul>
6   - <li>
7   - <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=717294809,2494697366&fm=26&gp=0.jpg" alt="">
8   - </li>
9   - <li>
10   - <img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2090090414,3038344648&fm=26&gp=0.jpg" alt="">
11   - </li>
12   - </ul>
13   - </div>
14   - <!-- Optional controls slots -->
15   - <!-- slot="titCell" -->
16   - <div slot="titCell" class="hd">
17   - <ul>
18   - <li class="on">1</li>
19   - <li class="">2</li>
20   - <li class="">3</li>
21   - </ul>
22   - </div>
23   - <!-- slot="prev" -->
24   - <a slot="prev" class="prev" href="javascript:void(0)" />
25   - <!-- slot="next" -->
26   - <a slot="next" class="next" href="javascript:void(0)" />
27   - <!-- slot="pageStateCell" -->
28   - <span slot="pageStateCell" class="pageState" />
29   - </superslide>
  2 + <div :style="style">
  3 + <el-carousel arrow="always" height="100%" class="carousel" :direction="carouselStyle.direction"
  4 + :indicator-position="carouselStyle.indicatorPosition" :interval="carouselStyle.interval"
  5 + :type="carouselStyle.type" :key="carouselKey">
  6 + <el-carousel-item v-for="(src, index) in carouselStyle.imageList" :key="index">
  7 + <img class="carousel-img" :src="src" alt="" />
  8 + </el-carousel-item>
  9 + </el-carousel>
  10 +
  11 + </div>
30 12 </template>
31 13 <script>
32 14 export default {
33 15 name: 'WidgetSlider',
34 16 components: {},
  17 + props: {
  18 + value: Object,
  19 + ispreview: Boolean
  20 + },
35 21 data() {
36 22 return {
37   - options: {
38   - mainCell: '.bd ul',
39   - autoPlay: true,
40   - effect: 'leftLoop',
41   - },
  23 + options: {},
  24 + carouselKey: 0, // 重新渲染组件用
  25 + };
  26 + },
  27 + computed: {
  28 + transStyle() {
  29 + return this.objToOne(this.options);
  30 + },
  31 + style() {
  32 + return {
  33 + position: this.ispreview ? "absolute" : "static",
  34 + background: this.transStyle.background,
  35 + width: this.transStyle.width + "px",
  36 + height: this.transStyle.height + "px",
  37 + left: this.transStyle.left + "px",
  38 + top: this.transStyle.top + "px",
  39 + right: this.transStyle.right + "px",
  40 + };
  41 + },
  42 + carouselStyle() {
  43 + return {
  44 + imageList: this.transStyle.imageAdress.split(','),
  45 + direction: !this.transStyle.tabType ? this.transStyle.tabDirection : 'horizontal',
  46 + indicatorPosition: this.transStyle.tabSelector,
  47 + interval: this.transStyle.tabTime,
  48 + type: this.transStyle.tabType
  49 + }
42 50 }
43 51 },
44   - mounted() {},
  52 + watch: {
  53 + value: {
  54 + handler(val) {
  55 + this.options = val;
  56 + },
  57 + deep: true
  58 + },
  59 + carouselStyle: {
  60 + handler(newValue, oldValue) {
  61 + if (JSON.stringify(newValue) !== JSON.stringify(oldValue)) {
  62 + this.carouselKey++;
  63 + }
  64 + },
  65 + },
  66 + },
  67 + created() {
  68 + this.options = this.value;
  69 + },
  70 + mounted() { },
45 71 methods: {},
46 72 }
47 73 </script>
48 74  
49 75 <style scoped lang="scss">
50   -.slideBox {
51   - width: 450px;
52   - height: 230px;
53   - overflow: hidden;
54   - position: relative;
55   -}
56   -.slideBox .hd {
57   - height: 15px;
58   - overflow: hidden;
59   - position: absolute;
60   - right: 5px;
61   - bottom: 5px;
62   - z-index: 1;
63   -}
64   -.slideBox .hd ul {
  76 +.carousel {
  77 + width: 100%;
  78 + height: 100%;
65 79 overflow: hidden;
66   - zoom: 1;
67   - float: left;
68   -}
69   -.slideBox .hd ul li {
70   - float: left;
71   - margin-right: 2px;
72   - width: 15px;
73   - height: 15px;
74   - line-height: 14px;
75   - text-align: center;
76   - background: #fff;
77   - cursor: pointer;
78   -}
79   -.slideBox .hd ul li.on {
80   - background: #f00;
81   - color: #fff;
82 80 }
83   -.slideBox .bd {
84   - position: relative;
  81 +
  82 +.carousel-img {
  83 + width: 100%;
85 84 height: 100%;
86   - z-index: 0;
87   -}
88   -.slideBox .bd li {
89   - zoom: 1;
90   - vertical-align: middle;
91   -}
92   -.slideBox .bd img {
93   - width: 450px;
94   - height: 230px;
95   - display: block;
  85 + object-fit: contain;
96 86 }
97   -/* 下面是前/后按钮代码，如果不需要删除即可 */
98   -.slideBox .prev,
99   -.slideBox .next {
100   - position: absolute;
101   - left: 3%;
102   - top: 50%;
103   - margin-top: -25px;
104   - display: block;
105   - width: 32px;
106   - height: 40px;
107   - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOsAAAAgCAMAAADE+3+QAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkYyNjE4RUVDRjgxMTFFMjk1ODhDQkIzNDg3MjdGNUEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkYyNjE4RUZDRjgxMTFFMjk1ODhDQkIzNDg3MjdGNUEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyRjI2MThFQ0NGODExMUUyOTU4OENCQjM0ODcyN0Y1QSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoyRjI2MThFRENGODExMUUyOTU4OENCQjM0ODcyN0Y1QSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmLDzTcAAAAJUExURcHBwf///////wCiYf4AAAADdFJOU///ANfKDUEAAACjSURBVHja5JnRDUQhDMNM9h/6STfCgeKPsIBjhGgpnHPy7wLyYLUicC5IPJGtJfi5ngsSL1Q7AYgsW8QTV7YJJ6psFU1M2S6YiLJlLPFk21CiydaRaOT+7mKxhYOERDcuCBy+cheiJHBqHEYGqZzPug6d4aG7aajmDPUSQz3iUO8/9KYbeqsPzWCGZmtDM9OhWfjSH8fY31UuSMkT2UqET4ABAHo9NyVXKF5RAAAAAElFTkSuQmCC) -110px
108   - 5px no-repeat;
109   - filter: alpha(opacity=50);
110   - opacity: 0.5;
111   -}
112   -.slideBox .next {
113   - left: auto;
114   - right: 3%;
115   - background-position: 8px 5px;
116   -}
117   -.slideBox .prev:hover,
118   -.slideBox .next:hover {
119   - filter: alpha(opacity=100);
120   - opacity: 1;
121   -}
122   -.slideBox .prevStop {
123   - display: none;
124   -}
125   -.slideBox .nextStop {
126   - display: none;
  87 +
  88 +/deep/ .el-carousel__mask {
  89 + background: transparent;
127 90 }
128 91 </style>
... ...