main
kgdxpr 11 months ago
parent 254246cd3b
commit 8054680f5f

@ -11,7 +11,7 @@
<style> <style>
.wrapDiv { .wrapDiv {
width: 80%; width: 80%;
width: 1200px; width: 1310px;
margin: 0 auto; margin: 0 auto;
/* text-align: center; */ /* text-align: center; */
position: absolute; position: absolute;
@ -50,16 +50,28 @@
text-align: center; text-align: center;
line-height: 40px; line-height: 40px;
border-radius: 6px; border-radius: 6px;
cursor: pointer;
} }
.selectedName { .selectedName {
float: right; float: right;
width: 430px; width: 536px;
height: 500px; height: 500px;
border: 1px solid #cccccc; border: 1px solid #cccccc;
border-radius: 6px; border-radius: 6px;
overflow: hidden; overflow: hidden;
} }
.woo-theme-color {
color: #2d8cf0 !important;
}
.woo-tool-span {
margin: 0 3px;
position: relative;
top: -1px;
cursor: pointer;
}
</style> </style>
</head> </head>
@ -69,8 +81,14 @@
<div class="layui-row"> <div class="layui-row">
<div class="layui-col-md12"> <div class="layui-col-md12">
<div> <div>
<label class="layui-form-label" <!-- <label class="layui-form-label"
style="width: auto;font-size: 14px;font-weight: bold;margin-bottom: 10px;">抽取设置</label> style="width: auto;font-size: 14px;font-weight: bold;margin-bottom: 10px;">抽取设置</label> -->
<div class="layui-form-item layui-inline">
<label style="width: auto;font-size: 14px;font-weight: bold;" class="layui-form-label"
style="width: auto;">抽取设置</label>
</div>
</div> </div>
<div> <div>
<div class="layui-form-item layui-inline"> <div class="layui-form-item layui-inline">
@ -83,6 +101,18 @@
<label class="layui-form-label" style="width: auto;">分类:</label> <label class="layui-form-label" style="width: auto;">分类:</label>
<div class="layui-input-inline" id="fenlei" style="width: 446px;"></div> <div class="layui-input-inline" id="fenlei" style="width: 446px;"></div>
</div> </div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label" style="width: auto;">序号范围:</label>
<div class="layui-input-inline" style="width: auto;">
<input type="text" lay-affix="clear" class="layui-input" style="width: 100px;">
</div>
<div class="layui-input-inline" style="width: auto;">
~
</div>
<div class="layui-input-inline" style="width: auto;">
<input type="text" lay-affix="clear" class="layui-input" style="width: 100px;">
</div>
</div>
<div class="layui-form-item layui-inline"> <div class="layui-form-item layui-inline">
<button type="button" class="layui-btn" id="screen"><i <button type="button" class="layui-btn" id="screen"><i
class="layui-icon layui-icon-search"></i>专家筛选</button> class="layui-icon layui-icon-search"></i>专家筛选</button>
@ -107,10 +137,15 @@
</div> </div>
<div class="layui-col-md4"> <div class="layui-col-md4">
<label class="layui-form-label" <label class="layui-form-label"
style="width: auto;font-size: 14px;left: -46px;font-weight: bold;">专家抽取结果</label> style="width: auto;font-size: 14px;left: -115px;font-weight: bold;">专家抽取结果</label>
<div id="selectedName" class="selectedName"> <div id="selectedName" class="selectedName">
<table class="layui-hide" id="tableData"></table> <table class="layui-hide" id="tableData"></table>
<script type="text/html" id="table-bar">
<span class="woo-tool-span woo-tool-text-span" lay-event="change"><a
class="woo-theme-color">换一个</a></span>
</script>
</div> </div>
</div> </div>
@ -125,6 +160,7 @@
</div> </div>
<button type="button" class="layui-btn layui-bg-orange" id="btn" value="开始抽取">开始抽取</button> <button type="button" class="layui-btn layui-bg-orange" id="btn" value="开始抽取">开始抽取</button>
<button type="button" class="layui-btn layui-bg-blue" id="save">保存结果</button> <button type="button" class="layui-btn layui-bg-blue" id="save">保存结果</button>
<button type="button" class="layui-btn layui-bg-red" id="clear">清空结果</button>
</div> </div>
</div> </div>
@ -133,8 +169,11 @@
layui.use('table', function () { layui.use('table', function () {
var table = layui.table; var table = layui.table;
var arr = []; var arr = [];
var arrTemp = [];
var tableData = []; var tableData = [];
var selectTableData = [];
var finalTableData = [];
var lingyuSelectArr = [1, 2, 3, 4, 5, 6, 7, 8]; var lingyuSelectArr = [1, 2, 3, 4, 5, 6, 7, 8];
var fenleiSelectArr = [3, 4]; var fenleiSelectArr = [3, 4];
@ -232,6 +271,28 @@
var div = document.createElement("div"); var div = document.createElement("div");
div.innerText = arr[i].xm; div.innerText = arr[i].xm;
div.className = "nameBox"; div.className = "nameBox";
div.id = i;
div.addEventListener('click', function () {
console.log(arr);
var _id = this.id;
if (!arrTemp.includes(_id)) {
setFinalColor(_id);
arrTemp.push(_id);
selectTableData.push(arr[_id]);
} else {
clearIndexBoxColor(_id);
arrTemp = arrTemp.filter(function (item) {
return item !== _id;
});
selectTableData = selectTableData.filter(function (item) {
return item.person_id !== arr[_id].person_id;
});
}
tableRender();
});
$("#leftBox").append(div); $("#leftBox").append(div);
}; };
} }
@ -247,6 +308,21 @@
}); });
} }
function clearIndexBoxColor(_index) {
$("#leftBox").children("div").each(function () {
var thisText = ($(this).text());
var selectedName = arr[_index].xm;
if (thisText == selectedName) {
$(this).css({
'background-color': '',
'color': '#000',
'border': '1px solid #cccccc'
});
}
});
}
// 设置选中小方格颜色 // 设置选中小方格颜色
function setBoxColor() { function setBoxColor() {
$("#leftBox").children("div").each(function () { $("#leftBox").children("div").each(function () {
@ -284,7 +360,7 @@
clearBoxColor(); clearBoxColor();
var arrTemp = []; arrTemp = [];
tableData = []; tableData = [];
for (var i = 0; i < $("#personCount").val(); i++) { for (var i = 0; i < $("#personCount").val(); i++) {
@ -335,17 +411,24 @@
}); });
$("#clear").click(function () {
arrTemp = [];
tableData = [];
selectTableData = [];
clearBoxColor();
tableRender();
});
$("#save").click(function () { $("#save").click(function () {
if (tableData.length == 0) { if (finalTableData.length == 0) {
alert("请先抽取专家"); alert("请先抽取专家");
return; return;
} else { } else {
var personIds = tableData.map(function (item) { var personIds = finalTableData.map(function (item) {
return item.person_id; return item.person_id;
}).join(','); }).join(',');
console.log(personIds);
$.ajax({ $.ajax({
type: "POST", type: "POST",
dataType: "json", dataType: "json",
@ -417,22 +500,55 @@
}); });
function tableRender() { function tableRender() {
finalTableData = selectTableData.concat(tableData);
table.render({ table.render({
elem: '#tableData', elem: '#tableData',
cols: [[ //标题栏 cols: [[ //标题栏
{ title: '序号', align: 'center', type: 'numbers', width: 55 }, { title: '序号', align: 'center', type: 'numbers', width: 55 },
{ field: 'xm', align: 'center', title: '姓名', width: 75 }, { field: 'xm', align: 'center', title: '姓名', width: 75 },
{ field: 'telephone', align: 'center', title: '电话', width: 125 }, { field: 'telephone', align: 'center', title: '电话', width: 125 },
{ field: 'dw', title: '单位', width: 170 } { field: 'dw', title: '单位', width: 200 },
{ title: '操作', width: 75, toolbar: '#table-bar' }
]], ]],
height: '500', height: '500',
data: tableData, data: finalTableData,
cellExpandedMode: "tips", cellExpandedMode: "tips",
page: false, // 是否显示分页 page: false, // 是否显示分页
limit: 50 // 每页默认显示的数量 limit: 50 // 每页默认显示的数量
}); });
} }
table.on('tool(tableData)', function (obj) {
if (obj.event === 'change') {
var num;
do {
num = getRandomInt(arr.length - 1);
} while (arrTemp.includes(num));
arrTemp.push(num);
var index1 = tableData.findIndex(function (item) {
return item.person_id === obj.data.person_id;
});
var index2 = selectTableData.findIndex(function (item) {
return item.person_id === obj.data.person_id;
});
if (index1 > -1) {
tableData.splice(index1, 1, arr[num]);
}
if (index2 > -1) {
selectTableData.splice(index2, 1, arr[num]);
}
// tableData.splice(obj.index, 1, arr[num]);
tableRender();
}
});
function getRandomInt(max) { function getRandomInt(max) {
min = 0; // 确保min是整数 min = 0; // 确保min是整数
max = Math.floor(max); // 确保max是整数 max = Math.floor(max); // 确保max是整数

Loading…
Cancel
Save