添加素材排序的功能
This commit is contained in:
wans
parent
ce070cdf37
commit
3d51f6ebbe
@ -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,
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user