main
kgdxpr 11 months ago
parent 254246cd3b
commit 8054680f5f

@ -11,7 +11,7 @@
<style>
.wrapDiv {
width: 80%;
width: 1200px;
width: 1310px;
margin: 0 auto;
/* text-align: center; */
position: absolute;
@ -50,16 +50,28 @@
text-align: center;
line-height: 40px;
border-radius: 6px;
cursor: pointer;
}
.selectedName {
float: right;
width: 430px;
width: 536px;
height: 500px;
border: 1px solid #cccccc;
border-radius: 6px;
overflow: hidden;
}
.woo-theme-color {
color: #2d8cf0 !important;
}
.woo-tool-span {
margin: 0 3px;
position: relative;
top: -1px;
cursor: pointer;
}
</style>
</head>
@ -69,8 +81,14 @@
<div class="layui-row">
<div class="layui-col-md12">
<div>
<label class="layui-form-label"
style="width: auto;font-size: 14px;font-weight: bold;margin-bottom: 10px;">抽取设置</label>
<!-- <label class="layui-form-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 class="layui-form-item layui-inline">
@ -83,6 +101,18 @@
<label class="layui-form-label" style="width: auto;">分类:</label>
<div class="layui-input-inline" id="fenlei" style="width: 446px;"></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">
<button type="button" class="layui-btn" id="screen"><i
class="layui-icon layui-icon-search"></i>专家筛选</button>
@ -107,10 +137,15 @@
</div>
<div class="layui-col-md4">
<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">
<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>
@ -125,6 +160,7 @@
</div>
<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-red" id="clear">清空结果</button>
</div>
</div>
@ -133,8 +169,11 @@
layui.use('table', function () {
var table = layui.table;
var arr = [];
var arrTemp = [];
var tableData = [];
var selectTableData = [];
var finalTableData = [];
var lingyuSelectArr = [1, 2, 3, 4, 5, 6, 7, 8];
var fenleiSelectArr = [3, 4];
@ -232,6 +271,28 @@
var div = document.createElement("div");
div.innerText = arr[i].xm;
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);
};
}
@ -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() {
$("#leftBox").children("div").each(function () {
@ -284,7 +360,7 @@
clearBoxColor();
var arrTemp = [];
arrTemp = [];
tableData = [];
for (var i = 0; i < $("#personCount").val(); i++) {
@ -335,17 +411,24 @@
});
$("#clear").click(function () {
arrTemp = [];
tableData = [];
selectTableData = [];
clearBoxColor();
tableRender();
});
$("#save").click(function () {
if (tableData.length == 0) {
if (finalTableData.length == 0) {
alert("请先抽取专家");
return;
} else {
var personIds = tableData.map(function (item) {
var personIds = finalTableData.map(function (item) {
return item.person_id;
}).join(',');
console.log(personIds);
$.ajax({
type: "POST",
dataType: "json",
@ -417,22 +500,55 @@
});
function tableRender() {
finalTableData = selectTableData.concat(tableData);
table.render({
elem: '#tableData',
cols: [[ //标题栏
{ title: '序号', align: 'center', type: 'numbers', width: 55 },
{ field: 'xm', align: 'center', title: '姓名', width: 75 },
{ 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',
data: tableData,
data: finalTableData,
cellExpandedMode: "tips",
page: false, // 是否显示分页
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) {
min = 0; // 确保min是整数
max = Math.floor(max); // 确保max是整数

Loading…
Cancel
Save