433 lines
13 KiB
Plaintext
433 lines
13 KiB
Plaintext
@{
|
|
ViewBag.Title = "Index";
|
|
//Layout = "~/Views/Shared/_Layout.cshtml";
|
|
//Layout = "~/Views/Shared/_content.cshtml";
|
|
Layout = null;
|
|
}
|
|
|
|
@*<link href="/layui-v2.5.4/css/layui.css" rel="stylesheet" />*@
|
|
@*<script src="/Scripts/jquery-1.10.2.min.js"></script>*@
|
|
<link href="/layui-v2.5.4/css/workbench.css" rel="stylesheet" />
|
|
<link href="/layui-v2.5.4/css/common.css" rel="stylesheet" />
|
|
<script src="/layui-v2.5.4/layui.js"></script>
|
|
<script src="/Scripts/common.js"></script>
|
|
<script src="/Scripts/newCommon.js"></script>
|
|
<script src="/Scripts/jquery.ajax.extend.js"></script>
|
|
<script src="/Scripts/layui_ext/xm-select/xm-select.js?v=1"></script>
|
|
|
|
<style>
|
|
#elements-container {
|
|
text-align: center;
|
|
}
|
|
|
|
.draggable-element {
|
|
display: inline-block;
|
|
width: 200px;
|
|
height: 200px;
|
|
background: white;
|
|
border: 1px solid rgb(196, 196, 196);
|
|
line-height: 200px;
|
|
text-align: center;
|
|
margin: 10px;
|
|
color: rgb(51, 51, 51);
|
|
font-size: 30px;
|
|
cursor: move;
|
|
}
|
|
|
|
.table-title {
|
|
width: 350px;
|
|
margin: 10px auto;
|
|
}
|
|
|
|
.table-title span {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.drag-list {
|
|
width: 350px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.drag-list #fixed-left > li,
|
|
.drag-list #fixed-right > li,
|
|
.drag-list #list > li {
|
|
list-style: none;
|
|
background: rgb(255, 255, 255);
|
|
border: 1px solid rgb(196, 196, 196);
|
|
margin: 5px 0;
|
|
font-size: 14px;
|
|
display: flex;
|
|
}
|
|
|
|
.drag-list #fixed-left .title,
|
|
.drag-list #fixed-right .title,
|
|
.drag-list #list .title {
|
|
display: inline-block;
|
|
width: 100%;
|
|
padding: 2px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.drag-list #fixed-left .drag-area,
|
|
.drag-list #fixed-right .drag-area,
|
|
.drag-list #list .drag-area {
|
|
display: inline-block;
|
|
background: rgb(158, 211, 179);
|
|
background-image: url('../../image/u167.svg');
|
|
background-size: 60%;
|
|
width: 31px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
/*height: 24px;*/
|
|
vertical-align: top;
|
|
cursor: move;
|
|
}
|
|
|
|
.fixed-right {
|
|
transform: rotate(325deg) !important;
|
|
}
|
|
|
|
.drag-fixed-right {
|
|
background-image: url('../../image/u168.svg');
|
|
background-size: 60%;
|
|
width: 30px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
height: 24px;
|
|
vertical-align: top;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.fixed-left {
|
|
transform: rotate(325deg) !important;
|
|
}
|
|
|
|
.layui-icon {
|
|
margin: 3px 5px;
|
|
}
|
|
|
|
.drag-fixed-left {
|
|
background-image: url('../../image/u168.svg');
|
|
background-size: 60%;
|
|
width: 30px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
height: 24px;
|
|
vertical-align: top;
|
|
transform: rotate(280deg);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.drag-list #fixed-left .drag-area .img,
|
|
.drag-list #fixed-right .drag-area .img,
|
|
.drag-list #list .drag-area .img {
|
|
width: 20px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.code {
|
|
background: rgb(255, 255, 255);
|
|
border: 1px solid rgb(196, 196, 196);
|
|
width: 600px;
|
|
margin: 22px auto;
|
|
position: relative;
|
|
}
|
|
|
|
.code::before {
|
|
content: 'Code';
|
|
background: rgb(80, 80, 80);
|
|
width: 96%;
|
|
position: absolute;
|
|
padding: 8px 2%;
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
|
|
.code pre {
|
|
margin-top: 50px;
|
|
padding: 0 13px;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.table-title {
|
|
display: flex;
|
|
}
|
|
|
|
.table-title span {
|
|
font-weight: bold;
|
|
}
|
|
|
|
#settingListBut {
|
|
margin-left: 10px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
#SettingListDialog {
|
|
font-family: arial;
|
|
background: rgb(242, 244, 246);
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
#SettingListDialog .layui-icon {
|
|
margin: -5px 5px;
|
|
}
|
|
</style>
|
|
<button class="layui-btn layui-btn-sm" id="settingListBut" type="button">设置列</button>
|
|
<div id="SettingListDialog" class="layui-form" style="display:none;">
|
|
<section class="showcase showcase-2">
|
|
<div class="table-title"><span>展示列设置</span><a onclick="reset()">重置</a></div>
|
|
<ul class="drag-list" id="ul">
|
|
<html4s>固定到左侧</html4s>
|
|
<div id="fixed-left">
|
|
</div>
|
|
<html4s>固定到右侧</html4s>
|
|
<div id="fixed-right">
|
|
</div>
|
|
<hr size="10" />
|
|
<div id="list">
|
|
</div>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
<script src="/Scripts/drag-arrange.js?v=1"></script>
|
|
|
|
<script type="text/javascript">
|
|
var data = [];
|
|
const ul = document.getElementById('ul');
|
|
var module = '@Html.Raw(ViewBag.Module)';
|
|
var eid = @Html.Raw(ViewBag.Eid);
|
|
var form;
|
|
var layer;
|
|
var settingDialog;
|
|
$(function () {
|
|
|
|
});
|
|
layui.use(['table', 'form', 'layer', 'upload', 'laydate', 'flow', 'element'], function () {
|
|
form = layui.form,
|
|
layer = layui.layer;
|
|
$('#settingListBut').on('click', function (data) {
|
|
getData();
|
|
});
|
|
$(".drag-arrange-1").on('mouseup', function () {
|
|
init();
|
|
});
|
|
$("#ul").on('drag.end.arrangeable', function () {
|
|
liSort();
|
|
})
|
|
form.on('checkbox(itemCheckbox)', function (value) {
|
|
var id = value.elem.getAttribute("name");
|
|
for (index = 0; index < data.length; index++) {
|
|
var item = data[index];
|
|
if (item.Id == id) {
|
|
item.Checkbox = value.elem.checked;
|
|
}
|
|
}
|
|
});
|
|
|
|
// $.ajax({
|
|
// type: "GET",
|
|
// url: '/Control/GetSettingList?module=' + module + '&eid=' + eid,
|
|
// dataType: "json",
|
|
// contentType: "application/json",
|
|
// success: function (da) {
|
|
// if (da.result) {
|
|
// data = da.data;
|
|
// console.log("data111:" + data);
|
|
// init();
|
|
// settingDialog = layer.open({
|
|
// title: '设置列',
|
|
// type: 1,
|
|
// content: $('#SettingListDialog'),
|
|
// area: ['400px', '600px']
|
|
// , btn: ['确定', '取消']
|
|
// , yes: function (index, layero) {
|
|
// save();
|
|
// }
|
|
// });
|
|
// } else {
|
|
// layer.msg(da.message, { icon: 2 });
|
|
// }
|
|
// },
|
|
// error: function () {
|
|
// layer.msg('操作失败！', { icon: 2 });
|
|
// }
|
|
//});
|
|
});
|
|
|
|
function buildLis(data) {
|
|
return data.map((item, index) => {
|
|
var checkbox = item.Checkbox ? `checked="checked"` : "";
|
|
var name = item.Id;
|
|
var leftFixed = item.Fixed == "left" ? "fixed-left" : "";
|
|
var rightFixed = item.Fixed == "right" ? "fixed-right" : "";
|
|
var fixed = Boolean(item.Fixed);
|
|
return `<li name="${name}">
|
|
<input type="checkbox" ${checkbox} lay-skin="primary" name="${name}" lay-filter="itemCheckbox" />
|
|
<span class="title">${item.Title}</span>
|
|
<div class="drag-fixed-left ${leftFixed}" fixed="${fixed}" onclick="fixedLeft(this, ${item.Id})"></div>
|
|
<div class="drag-fixed-right ${rightFixed}" fixed="${fixed}" onclick="fixedRight(this, ${item.Id})"></div>
|
|
<div class="drag-area"></div>
|
|
</li>`;
|
|
});
|
|
}
|
|
|
|
function fixedLeft(obj, id) {
|
|
var fixed = $(obj).attr("fixed");
|
|
|
|
for (index = 0; index < data.length; index++) {
|
|
var item = data[index];
|
|
if (item.Id == id) {
|
|
if (fixed == 'true') {
|
|
item.Fixed = "";
|
|
} else {
|
|
item.Fixed = "left";
|
|
}
|
|
}
|
|
}
|
|
if (fixed === 'true') {
|
|
$(obj).attr("class", "drag-fixed-left");
|
|
$(obj).attr("fixed", 'false');
|
|
} else {
|
|
$(obj).attr("class", "drag-fixed-left fixed-left");
|
|
$(obj).attr("fixed", 'true');
|
|
}
|
|
init();
|
|
}
|
|
|
|
function fixedRight(obj, id) {
|
|
var fixed = $(obj).attr("fixed");
|
|
|
|
for (index = 0; index < data.length; index++) {
|
|
var item = data[index];
|
|
if (item.Id == id) {
|
|
if (fixed == 'true') {
|
|
item.Fixed = "";
|
|
} else {
|
|
item.Fixed = "right";
|
|
}
|
|
}
|
|
}
|
|
if (fixed === 'true') {
|
|
$(obj).attr("class", "drag-fixed-right");
|
|
$(obj).attr("fixed", 'false');
|
|
} else {
|
|
$(obj).attr("class", "drag-fixed-right fixed-right");
|
|
$(obj).attr("fixed", 'true');
|
|
}
|
|
init();
|
|
}
|
|
|
|
function init() {
|
|
var fixedLeft = document.getElementById("fixed-left");
|
|
var fixedRight = document.getElementById("fixed-right");
|
|
var list = document.getElementById("list");
|
|
liSort();
|
|
fixedLeft.innerHTML = buildLis(data.filter(x => x.Fixed == "left")).join('');
|
|
fixedRight.innerHTML = buildLis(data.filter(x => x.Fixed == "right")).join('');
|
|
list.innerHTML = buildLis(data.filter(x => x.Fixed != "left" && x.Fixed != "right")).join('');
|
|
form.render('checkbox');
|
|
$('li').arrangeable({ dragSelector: '.drag-area' });
|
|
}
|
|
|
|
function liSort() {
|
|
//var lis = document.getElementsByTagName("li");
|
|
var lis = document.getElementById("ul").getElementsByTagName("li");
|
|
console.log("lis:" + lis.length);
|
|
|
|
var i = 0;
|
|
for (i = 0; i < lis.length; i++) {
|
|
var elem = lis[i]
|
|
var id = elem.getAttribute("name");
|
|
var item = data.find(x => x.Id == id);
|
|
item.Order = i;
|
|
}
|
|
data.sort(dataSort);
|
|
console.log(data);
|
|
}
|
|
|
|
function dataSort(a, b) {
|
|
if (a.Order < b.Order) {
|
|
return -1;
|
|
}
|
|
if (a.Order > b.Order) {
|
|
return 1;
|
|
}
|
|
return 0;
|
|
}
|
|
|
|
function save() {
|
|
$.ajax({
|
|
type: "POST",
|
|
url: '/Control/SettingSave?module=' + module + '&eid=' + eid,
|
|
data: JSON.stringify(data),
|
|
dataType: "json",
|
|
contentType: "application/json",
|
|
success: function (da) {
|
|
if (da.result) {
|
|
console.log("set:" + da.result);
|
|
//parent.layer.msg('操作成功！', { icon: 1 });
|
|
layer.close(settingDialog);
|
|
location.reload();
|
|
} else {
|
|
layer.msg(da.message, { icon: 2 });
|
|
}
|
|
},
|
|
error: function () {
|
|
layer.msg('操作失败！', { icon: 2 });
|
|
}
|
|
});
|
|
}
|
|
|
|
function getData() {
|
|
$.ajax({
|
|
type: "GET",
|
|
url: '/Control/GetSettingList?module=' + module + '&eid=' + eid,
|
|
dataType: "json",
|
|
contentType: "application/json",
|
|
success: function (da) {
|
|
if (da.result) {
|
|
data = da.data;
|
|
console.log("data111:" + data);
|
|
init();
|
|
settingDialog = layer.open({
|
|
title: '设置列',
|
|
type: 1,
|
|
content: $('#SettingListDialog'),
|
|
area: ['400px', '600px']
|
|
, btn: ['确定', '取消']
|
|
, yes: function (index, layero) {
|
|
save();
|
|
}
|
|
});
|
|
} else {
|
|
layer.msg(da.message, { icon: 2 });
|
|
}
|
|
},
|
|
error: function () {
|
|
layer.msg('操作失败！', { icon: 2 });
|
|
}
|
|
});
|
|
}
|
|
|
|
function reset() {
|
|
$.ajax({
|
|
type: "GET",
|
|
url: '/Control/ResetSettingList?module=' + module + '&eid=' + eid,
|
|
dataType: "json",
|
|
contentType: "application/json",
|
|
success: function (da) {
|
|
if (da.result) {
|
|
layer.close(settingDialog);
|
|
location.reload();
|
|
} else {
|
|
layer.msg(da.message, { icon: 2 });
|
|
}
|
|
},
|
|
error: function () {
|
|
layer.msg('操作失败！', { icon: 2 });
|
|
}
|
|
});
|
|
}
|
|
</script> |