修改多图选择器

app/admin/view/api/upload/image.html

@@ -9,73 +9,19 @@
         </div>
     </div>
     <div class="image-dialog-body">
-        <div class="image-dialog-item" v-for="x in list" v-if="show">
+        <div class="image-dialog-item transition" v-for="x in list" @click="setItem(x)" style="display:none" v-show="show" :class="{'image-dialog-checked':x.checked}">
-            <div class="uploadimage" :style="x.style" @click="setValue(x.xurl)"></div>
+            <div class="uploadimage" :style="x.style"></div>
             <p class="image-dialog-item-name layui-elip" v-text="x.name"></p>
         </div>
     </div>
     <div class="image-dialog-foot">
         <div id="ImageDialogPage" class="image-dialog-page"></div>
+        <a id="ImageDialogButton" class="image-dialog-button notselect" @click="confirm">
+            <span v-text="data.length"></span>
+        </a>
     </div>
 </div>
 
-<style>
-    .image-dialog-head {
-        clear: both;
-        height: 30px;
-        padding: 10px 12px;
-    }
-
-    .image-dialog-body {
-        height: 470px;
-        background: #efefef;
-        padding-top: 12px;
-        padding-left: 12px;
-        display: flex;
-        flex-wrap: wrap;
-        align-content: flex-start;
-    }
-
-    .image-dialog-item {
-        position: relative;
-        margin-right: 12px;
-        margin-bottom: 12px;
-    }
-
-    .image-dialog-item-name {
-        left: 0;
-        right: 0;
-        bottom: 0;
-        color: #fff;
-        padding: 3px 10px;
-        position: absolute;
-        text-align: center;
-        line-height: 1.5em;
-        white-space: nowrap;
-        background: rgba(0, 0, 0, 0.6);
-    }
-
-    .image-dialog-item .uploadimage {
-        margin: 0;
-        width: 145px;
-        height: 145px;
-    }
-
-    .image-dialog-foot {
-        padding: 0 12px;
-    }
-
-    .image-dialog-page {
-        height: 50px;
-        text-align: center;
-    }
-
-    .image-dialog-page .layui-laypage a,
-    .image-dialog-page .layui-laypage span {
-        margin-bottom: 0;
-    }
-</style>
-
 <script>
     require(['vue'], function (vue) {
         var app = new vue({
@@ -84,11 +30,16 @@
                 page: 1,
                 limit: 15,
                 show: false,
+                mult: false,
                 keys: '',
                 list: [],
+                data: [],
+                idxs: {},
             },
             created: function () {
                 this.$btn = $('#{$get.id|default=""}');
+                this.$ups = $('#ImageDialogUploadLayout [data-file]');
+                this.mult = "{$get.file|default='image'}" === 'images';
                 this.loadPage();
             },
             methods: {
@@ -97,6 +48,33 @@
                     this.page = 1;
                     this.loadPage();
                 },
+                // 设置单项数据
+                setItem: function (item) {
+                    if (!this.mult) return this.setValue(item.xurl);
+                    if ((item.checked = !this.idxs[item.id])) {
+                        (this.idxs[item.id] = item) && this.data.push(item);
+                    } else {
+                        delete this.idxs[item.id];
+                        layui.each(this.data, function (idx, _ite) {
+                            _ite.id === item.id && app.data.splice(idx, 1);
+                        });
+                    }
+                },
+                // 更新列表数据
+                setList: function (items, count) {
+                    this.list = items;
+                    this.list.forEach(function (item) {
+                        item.checked = !!app.idxs[item.id]
+                        item.style = 'background-image:url(' + item.xurl + ')';
+                    });
+                    this.addPage(count);
+                },
+                // 确认选择数据
+                confirm: function () {
+                    layui.each(this.data, function (idx, file) {
+                        app.setValue(file.xurl);
+                    });
+                },
                 // 设置选择数据
                 setValue: function (url) {
                     this.$btn.triggerHandler('choose', url);
@@ -105,47 +83,39 @@
                 },
                 // 创建分页工具条
                 addPage: function (count) {
-                    var that = this;
                     this.show = true;
                     layui.laypage.render({
-                        curr: this.page, count: count, limit: that.limit,
+                        curr: this.page, count: count, limit: app.limit,
                         layout: ['count', 'prev', 'page', 'next', 'refresh'],
                         elem: 'ImageDialogPage', jump: function (obj, first) {
-                            if (!first) that.loadPage(that.page = obj.curr);
+                            if (!first) app.loadPage(app.page = obj.curr);
                         },
                     });
                 },
                 // 加载页面数据
                 loadPage: function () {
-                    var that = this;
                     this.params = {page: this.page, limit: this.limit, output: 'layui.table', name: this.keys || ''};
                     $.form.load('{:url("image")}', this.params, 'get', function (ret) {
-                        that.list = ret.data;
+                        return app.setList(ret.data, ret.count), false;
-                        that.list.forEach(function (item) {
-                            item.style = 'background-image:url(' + item.xurl + ')';
-                        });
-                        that.addPage(ret.count);
-                        return false;
                     });
                 },
                 // 上传图片文件
                 uploadImage: function () {
-                    $('[data-field="image-dialog-upload-input"]').click();
+                    this.$ups.off('choose').on('choose', function (e, xurl) {
-                    $('[name="image-dialog-upload-input"]').one('change', function (e) {
+                        app.setValue(xurl);
-                        app.setValue(e.currentTarget.value);
+                    }).click();
-                        // e.currentTarget.value 取上传后的值
-                        // app.page = 1;
-                        // app.loadPage();
-                    });
                 },
             }
         });
     });
 </script>
 
-<label class="layui-hide">
+<label class="layui-hide" id="ImageDialogUploadLayout">
     <!-- 图片上传组件 开始 -->
-    <input class="layui-input" name="image-dialog-upload-input">
+    {if isset($get.file) && $get.file eq 'image'}
-    <button class="layui-btn" data-file data-type="png,jpg,jpeg,gif" data-field="image-dialog-upload-input"></button>
+    <button class="layui-btn" data-file data-type="png,jpg,jpeg,gif"></button>
+    {else}
+    <button class="layui-btn" data-file="mul" data-type="png,jpg,jpeg,gif"></button>
+    {/if}
     <!-- 图片上传组件 结束 -->
 </label>

public/static/theme/css/_custom.less

@@ -945,6 +945,113 @@ input:not(.layui-hide,[type=hidden]) {
   }
 }
 
+/* 图片选择器样式 */
+.image-dialog {
+  &-head {
+    clear: both;
+    height: 30px;
+    padding: 10px 12px;
+  }
+
+  &-body {
+    height: 470px;
+    display: flex;
+    flex-wrap: wrap;
+    background: #EFEFEF;
+    padding-top: 12px;
+    padding-left: 12px;
+    align-content: flex-start;
+
+    .image-dialog-checked {
+      &:after, &:before {
+        z-index: 2;
+        cursor: pointer;
+        content: '';
+        display: block;
+        position: absolute;
+      }
+
+      &:after {
+        top: -25px;
+        right: -25px;
+        width: 50px;
+        height: 50px;
+        transform: rotate(135deg);
+        -moz-transform: rotate(135deg);
+        -webkit-transform: rotate(135deg);
+        background-color: rgba(56, 169, 225, 0.8);
+      }
+
+      &:before {
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border: 4px solid rgba(56, 169, 225, 0.8);
+      }
+    }
+  }
+
+  &-item {
+    z-index: 1;
+    overflow: hidden;
+    position: relative;
+    margin-right: 12px;
+    margin-bottom: 12px;
+    border-radius: @BoxBorderRadius;
+
+    .uploadimage {
+      margin: 0;
+      width: 145px;
+      height: 145px;
+    }
+
+    &-name {
+      left: 0;
+      right: 0;
+      bottom: 0;
+      color: #fff;
+      padding: 3px 10px;
+      position: absolute;
+      text-align: center;
+      line-height: 1.5em;
+      white-space: nowrap;
+      background: rgba(0, 0, 0, 0.6);
+    }
+  }
+
+  &-foot {
+    padding: 0 12px;
+
+    .image-dialog-page {
+      height: 50px;
+      text-align: center;
+
+      .layui-laypage {
+        a, span {
+          margin-bottom: 0;
+        }
+      }
+    }
+
+    .image-dialog-button {
+      color: #fff;
+      width: 42px;
+      height: 42px;
+      display: inline-block;
+      position: absolute;
+      text-align: center;
+      background: #0e7fe1;
+      line-height: 42px;
+      border-radius: 50%;
+      right: 10px;
+      bottom: 4px;
+      z-index: 2;
+      font-size: 16px
+    }
+  }
+}
+
 .portal-block-container {
   font-size: 14px;
   margin-bottom: 10px;