添加素材排序的功能

src/main/resources/static/route/columnmng/save.html

@@ -122,14 +122,27 @@
                     </div>
                 </div>
                 <div class="layui-form-item" pane>
-                    <label class="layui-form-label">素材类型</label>
+                    <label class="layui-form-label"><span style="color: #cc0000">*</span>素材类型</label>
                     <div class="layui-input-block layui-form" id="resourceTypeCheckboxTemplateBox" lay-filter="resourceTypeCheckboxTemplateBox"></div>
                     <script id="resourceTypeCheckboxTemplate" type="text/html">
                         {{# for(var i = 0, item; item = d[i++];) { }}
-                        <input type="checkbox" name="resourceType[{{item.value}}]" value="{{item.value}}" title="{{item.name}}">
+                        <input type="checkbox" name="resourceType[{{item.value}}]" value="{{item.value}}" title="{{item.name}}" lay-filter="switchResourceType">
                         {{# } }}
                     </script>
                 </div>
+                <div class="layui-row">
+                    <div class="layui-col-md12">
+                        <div class="layui-form-item layui-form-text">
+                            <label class="layui-form-label">素材排序<span style="color: #cc0000"> （注：勾选顺序决定小程序显示顺序）</span></label>
+                            <div id="resourceOrder" class="layui-btn-container selector-title-wrapper"></div>
+                            <script type="text/html" id="resourceOrderTemplate">
+                                {{# for(var i = 0, item; item = d[i++];) { }}
+                                <a id="resourceOrder-{{item.value}}" href="javascript:void(0);" class="layui-btn layui-btn">{{item.name}} <i class="fa fa-close" lay-click-remove-resource-type data-val="{{item.value}}"></i></a>
+                                {{# } }}
+                            </script>
+                        </div>
+                    </div>
+                </div>
                 <div class="layui-form-item layui-layout-admin">
                     <div class="layui-input-block">
                         <div class="layui-footer" style="left: 0;">
@@ -157,15 +170,66 @@
         var laytpl = layui.laytpl;
         var laydate = layui.laydate;
         var viewerObj = {};
+        var resourceTypeIndex = [];
 
         // 初始化内容
         function initData() {
             $('.layui-card').height($(window).height() - 100);
             initResourceTypeCheckbox();
             initIconImgUploadFile();
+            initResourceTypeIndex();
         }
         initData();
 
+        form.on('checkbox(switchResourceType)', function (data) {
+            var name_ = data.elem.title;
+            var value_ = data.elem.value;
+            if(data.elem.checked){
+                var obj = {
+                    name : name_,
+                    value : value_
+                };
+                resourceTypeIndex.push(obj);
+                initResourceTypeIndex();
+            } else {
+                if(resourceTypeIndex.length > 0){
+                    $.each(resourceTypeIndex, function(i, e){
+                        if(e.value == value_){
+                            resourceTypeIndex.splice(i,1);
+                            initResourceTypeIndex();
+                            return;
+                        }
+                    });
+                } else {
+                    resourceTypeIndex = [];
+                }
+                initResourceTypeIndex();
+            }
+        });
+
+        $(document.body).on('click', '*[lay-click-remove-resource-type]', null, function() {
+            var data = this.dataset;
+            var checkboxDom = $('input[name="resourceType[' + data.val +']');
+            if(checkboxDom.length > 0){
+                checkboxDom[0].checked = false;
+                form.render();
+                $.each(resourceTypeIndex, function(i, e){
+                    if(e.value == data.val){
+                        resourceTypeIndex.splice(i,1);
+                        initResourceTypeIndex();
+                        return;
+                    }
+                });
+            }
+        });
+
+        function initResourceTypeIndex() {
+            laytpl(document.getElementById('resourceOrderTemplate').innerHTML).render(resourceTypeIndex, function(html) {
+                document.getElementById('resourceOrder').innerHTML = html;
+            });
+            form.render();
+        }
+
         //初始化素材类型复选框
         function initResourceTypeCheckbox() {
             top.restAjax.get(top.restAjax.path('api/columnmng/material-type-list', []), {}, null, function(code, data, args) {
@@ -232,10 +296,19 @@
 
         // 提交表单
         form.on('submit(submitForm)', function(formData) {
+            layer.closeAll();
+            if(resourceTypeIndex.length == 0){
+                layer.msg('请选择素材类型');
+                return;
+            }
             top.dialog.confirm(top.dataMessage.commit, function(index) {
                 top.dialog.close(index);
                 var loadLayerIndex;
-                formData.field['resourceType'] = top.restAjax.checkBoxToString(formData.field, 'resourceType');
+                var resourceType = '';
+                $.each(resourceTypeIndex, function(i,e){
+                    resourceType += e.value + ',';
+                });
+                formData.field['resourceType'] = resourceType.substring(0,resourceType.length-1 );
                 top.restAjax.post(top.restAjax.path('api/columnmng/save', []), formData.field, null, function(code, data) {
                     var layerIndex = top.dialog.msg(top.dataMessage.commitSuccess, {
                         time: 0,

src/main/resources/static/route/columnmng/update.html

@@ -126,10 +126,23 @@
                     <div class="layui-input-block layui-form" id="resourceTypeCheckboxTemplateBox" lay-filter="resourceTypeCheckboxTemplateBox"></div>
                     <script id="resourceTypeCheckboxTemplate" type="text/html">
                         {{# for(var i = 0, item; item = d[i++];) { }}
-                        <input type="checkbox" name="resourceType[{{item.value}}]" value="{{item.value}}" title="{{item.name}}">
+                        <input type="checkbox" name="resourceType[{{item.value}}]" value="{{item.value}}" title="{{item.name}}" lay-filter="switchResourceType">
                         {{# } }}
                     </script>
                 </div>
+                <div class="layui-row">
+                    <div class="layui-col-md12">
+                        <div class="layui-form-item layui-form-text">
+                            <label class="layui-form-label">素材排序<span style="color: #cc0000"> （注：勾选顺序决定小程序显示顺序）</span></label>
+                            <div id="resourceOrder" class="layui-btn-container selector-title-wrapper"></div>
+                            <script type="text/html" id="resourceOrderTemplate">
+                                {{# for(var i = 0, item; item = d[i++];) { }}
+                                <a id="resourceOrder-{{item.value}}" href="javascript:void(0);" class="layui-btn layui-btn">{{item.name}} <i class="fa fa-close" lay-click-remove-resource-type data-val="{{item.value}}"></i></a>
+                                {{# } }}
+                            </script>
+                        </div>
+                    </div>
+                </div>
                 <div class="layui-form-item layui-layout-admin">
                     <div class="layui-input-block">
                         <div class="layui-footer" style="left: 0;">
@@ -158,6 +171,7 @@
         var laydate = layui.laydate;
         var columnId = top.restAjax.params(window.location.href).columnId;
         var viewerObj = {};
+        var resourceTypeIndex = [];
 
         // 初始化内容
         function initData() {
@@ -195,11 +209,68 @@
                     checkboxObj['resourceType['+ checkbox +']'] = true;
                 }
                 form.val('dataForm', checkboxObj);
+                for(var k = 0, checkbox = checkboxValue[k]; checkbox = checkboxValue[k++];) {
+                    var name_ = $('input[name="resourceType[' + checkbox +']')[0].title;
+                    resourceTypeIndex.push({
+                        name : name_,
+                        value : checkbox
+                    })
+                }
+                initResourceTypeIndex();
             }, function(code, data) {
                 top.dialog.msg(data.msg);
             });
         }
 
+        form.on('checkbox(switchResourceType)', function (data) {
+            var name_ = data.elem.title;
+            var value_ = data.elem.value;
+            if(data.elem.checked){
+                var obj = {
+                    name : name_,
+                    value : value_
+                };
+                resourceTypeIndex.push(obj);
+                initResourceTypeIndex();
+            } else {
+                if(resourceTypeIndex.length > 0){
+                    $.each(resourceTypeIndex, function(i, e){
+                        if(e.value == value_){
+                            resourceTypeIndex.splice(i,1);
+                            initResourceTypeIndex();
+                            return;
+                        }
+                    });
+                } else {
+                    resourceTypeIndex = [];
+                }
+                initResourceTypeIndex();
+            }
+        });
+
+        $(document.body).on('click', '*[lay-click-remove-resource-type]', null, function() {
+            var data = this.dataset;
+            var checkboxDom = $('input[name="resourceType[' + data.val +']');
+            if(checkboxDom.length > 0){
+                checkboxDom[0].checked = false;
+                form.render();
+                $.each(resourceTypeIndex, function(i, e){
+                    if(e.value == data.val){
+                        resourceTypeIndex.splice(i,1);
+                        initResourceTypeIndex();
+                        return;
+                    }
+                });
+            }
+        });
+
+        function initResourceTypeIndex() {
+            laytpl(document.getElementById('resourceOrderTemplate').innerHTML).render(resourceTypeIndex, function(html) {
+                document.getElementById('resourceOrder').innerHTML = html;
+            });
+            form.render();
+        }
+
         // 初始化行业logo图片上传
         function initIconImgUploadFile() {
             var files = $('#iconImg').val();
@@ -254,10 +325,19 @@
         
         // 提交表单
         form.on('submit(submitForm)', function(formData) {
+            layer.closeAll();
+            if(resourceTypeIndex.length == 0){
+                layer.msg('请选择素材类型');
+                return;
+            }
             top.dialog.confirm(top.dataMessage.commit, function(index) {
                 top.dialog.close(index);
                 var loadLayerIndex;
-                formData.field['resourceType'] = top.restAjax.checkBoxToString(formData.field, 'resourceType');
+                let resourceType = '';
+                $.each(resourceTypeIndex, function(i,e){
+                    resourceType += e.value + ',';
+                });
+                formData.field['resourceType'] = resourceType.substring(0,resourceType.length-1 );
                 top.restAjax.put(top.restAjax.path('api/columnmng/update/{columnId}', [columnId]), formData.field, null, function(code, data) {
                     var layerIndex = top.dialog.msg(top.dataMessage.updateSuccess, {
                         time: 0,