|
|
|
@ -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是整数
|
|
|
|
|