Update image.html

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

@@ -25,14 +25,8 @@
         var app = new vue({
             el: '#ImageDialog',
             data: {
-                page: 1,
-                limit: 15,
-                show: false,
-                mult: false,
-                keys: '',
-                list: [],
-                data: [],
-                idxs: {},
+                page: 1, limit: 15, show: false, mult: false,
+                keys: '', list: [], data: [], idxs: {}, urls: [],
             },
             created: function () {
                 this.$btn = $('#{$get.id|default=""}');
@@ -46,15 +40,23 @@
                     this.page = 1;
                     this.loadPage();
                 },
+                // 确认选择数据
+                confirm: function () {
+                    this.urls = [];
+                    this.data.forEach(function (file) {
+                        app.setValue(file.xurl);
+                    }), this.setInput();
+                },
                 // 设置单项数据
                 setItem: function (item) {
-                    if (!this.mult) return this.setValue(item.xurl);
-                    if ((item.checked = !this.idxs[item.id])) {
+                    if (!this.mult) {
+                        this.setValue(item.xurl).setInput();
+                    } else 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);
+                        this.data.forEach(function (temp, idx) {
+                            temp.id === item.id && app.data.splice(idx, 1);
                         });
                     }
                 },
@@ -64,20 +66,19 @@
                     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);
-                    });
+                    }), this.addPage(count);
                 },
                 // 设置选择数据
-                setValue: function (url) {
-                    this.$btn.triggerHandler('push', url);
-                    if (this.$btn.data('input')) $(this.$btn.data('input')).val(url).trigger('change', url);
+                setValue: function (xurl) {
+                    this.urls.push(xurl) && this.$btn.triggerHandler('push', xurl);
                     $('#ImageDialog').parents('.layui-layer-content').next().find('.layui-layer-close').trigger('click');
+                    return this;
+                },
+                // 设置输入表单
+                setInput: function () {
+                    if (this.$btn.data('input')) {
+                        $(this.$btn.data('input')).val(this.urls.join('|')).trigger('change');
+                    }
                 },
                 // 创建分页工具条
                 addPage: function (count) {
@@ -99,8 +100,11 @@
                 },
                 // 上传图片文件
                 uploadImage: function () {
+                    this.urls = [];
                     this.$ups.off('push').on('push', function (e, xurl) {
                         app.setValue(xurl);
+                    }).off('upload.complete').on('upload.complete', function () {
+                        app.setInput();
                     }).click();
                 },
             }

public/static/admin.js

@@ -611,14 +611,14 @@ $(function () {
             if ($(this).data('inited')) return true; else $(this).data('inited', true);
             var $bt = $('<div class="uploadimage"><span><a data-file="mul" class="layui-icon layui-icon-upload-drag"></a></span><span data-file="images"></span></div>');
             var ims = this.value ? this.value.split('|') : [], $in = $(this).after($bt);
-            $bt.find('[data-file]').attr('data-size', $in.data('size') || 0).attr('data-type', $in.data('type') || 'gif,png,jpg,jpeg').data('input', this).on('push', function (evt, src) {
+            $bt.find('[data-file]').attr('data-size', $in.data('size') || 0).attr('data-type', $in.data('type') || 'gif,png,jpg,jpeg').on('push', function (evt, src) {
                 ims.push(src), $in.val(ims.join('|')), showImageContainer([src]);
-            }) && (ims.length > 0 && showImageContainer(ims))
+            }) && (ims.length > 0 && showImageContainer(ims));
 
             function showImageContainer(srcs) {
-                $(srcs).each(function (idx, src, $image) {
-                    $image = $('<div class="uploadimage uploadimagemtl"><div><a class="layui-icon">&#xe603;</a><a class="layui-icon">&#x1006;</a><a class="layui-icon">&#xe602;</a></div></div>');
-                    $image.attr('data-tips-image', encodeURI(src)).css('backgroundImage', 'url(' + encodeURI(src) + ')').on('click', 'a', function (event, index, prevs, $item) {
+                $(srcs).each(function (idx, src, $img) {
+                    $img = $('<div class="uploadimage uploadimagemtl"><div><a class="layui-icon">&#xe603;</a><a class="layui-icon">&#x1006;</a><a class="layui-icon">&#xe602;</a></div></div>');
+                    $img.attr('data-tips-image', encodeURI(src)).css('backgroundImage', 'url(' + encodeURI(src) + ')').on('click', 'a', function (event, index, prevs, $item) {
                         event.stopPropagation(), $item = $(this).parent().parent(), index = $(this).index();
                         if (index === 2 && $item.index() !== $bt.prevAll('div.uploadimage').length) $item.next().after($item);
                         else if (index === 0 && $item.index() > 1) $item.prev().before($item);
@@ -627,7 +627,7 @@ $(function () {
                             ims.push($(this).attr('data-tips-image'));
                         });
                         ims.reverse(), $in.val(ims.join('|'));
-                    }), $bt.before($image);
+                    }), $bt.before($img);
                 });
             }
         });