monitor_v3 / hg-monitor-web · Commits

Go to a project

Authored by 袁晋鹏
Commit f593090226854fdb4ba8f5f5a1f7c687908bc13a 1 parent 4c956fde

下拉复选优化

Inline Side-by-side
Showing 2 changed files with 124 additions and 82 deletions
... ... @@ -16,9 +16,9 @@ layui.define(['form', 'admin', 'laydate', 'common','sessions','reskpilist','tabl
var seriousInkeySelect ;
var options = '';
var defaultoptions = '';
var conditionoptions = "<option value=\"2\">等于</option>\n" +
" <option value=\"6\">包含</option>\n" +
" <option value=\"9\">不包含</option>";
var conditionoptions = "<option value=\"6\">等于</option>\n" +
" <option value=\"8\">包含</option>\n" +
" <option value=\"11\">不包含</option>";
var seriousresIds = [];
var importantresIds = [];
var commonlyresIds = [];
... ... @@ -84,11 +84,11 @@ layui.define(['form', 'admin', 'laydate', 'common','sessions','reskpilist','tabl
var cond = '';
if(seriousItems[i].relationSymbol && seriousItems[i].relationSymbol == '0'){
cond = `<div class="layui-form-item cont-base" id="serious-policy-box-${times}-condition">
<input type="checkbox" lay-skin="switch" lay-text="或|且" value="是">
<input type="radio" class="condition" name="policy-${times}-condition" value="&&" title="且" checked><input type="radio" class="condition" name="policy-${times}-condition" value="||" title="或" >
</div>`;
}else if(seriousItems[i].relationSymbol && seriousItems[i].relationSymbol == '1'){
cond = `<div class="layui-form-item cont-base" id="serious-policy-box-${times}-condition">
<input type="checkbox" lay-skin="switch" lay-text="或|且" checked value="否">
<input type="radio" class="condition" name="policy-${times}-condition" value="&&" title="且" ><input type="radio" class="condition" name="policy-${times}-condition" value="||" title="或" checked>
</div>`;
}
var clone = ""
... ... @@ -112,6 +112,8 @@ layui.define(['form', 'admin', 'laydate', 'common','sessions','reskpilist','tabl
$(`#serious-policy-box-${timestr} select.policyparam`).val(seriousItems[i].confNo);
$(`#serious-policy-box-${timestr} select.condition`).val(seriousItems[i].operatorSymbol);
$(`#serious-policy-box-${timestr} input[type=tel]`).val(seriousItems[i].operatorValue);
$(`#serious-policy-box-${timestr} input[type=tel]`).attr("style","width:480px");
$(`#serious-policy-box-${timestr} input[type=tel]`).parent().attr("style","width:490px");
}
form.render();
}
... ... @@ -124,11 +126,11 @@ layui.define(['form', 'admin', 'laydate', 'common','sessions','reskpilist','tabl
var cond = '';
if(importantItems[i].relationSymbol && importantItems[i].relationSymbol == '0'){
cond = `<div class="layui-form-item cont-base" id="important-policy-box-${times}-condition">
<input type="checkbox" lay-skin="switch" lay-text="或|且" value="是">
<input type="radio" class="condition" name="policy-${times}-condition" value="&&" title="且" checked><input type="radio" class="condition" name="policy-${times}-condition" value="||" title="或" >
</div>`;
}else if(importantItems[i].relationSymbol && importantItems[i].relationSymbol == '1'){
cond = `<div class="layui-form-item cont-base" id="important-policy-box-${times}-condition">
<input type="checkbox" checked lay-skin="switch" lay-text="或|且" value="否">
<input type="radio" class="condition" name="policy-${times}-condition" value="&&" title="且" ><input type="radio" class="condition" name="policy-${times}-condition" value="||" title="或" checked>
</div>`;
}
var clone = ""
... ... @@ -152,6 +154,8 @@ layui.define(['form', 'admin', 'laydate', 'common','sessions','reskpilist','tabl
$(`#important-policy-box-${timestr} select.policyparam`).val(importantItems[i].confNo);
$(`#important-policy-box-${timestr} select.condition`).val(importantItems[i].operatorSymbol);
$(`#important-policy-box-${timestr} input[type=tel]`).val(importantItems[i].operatorValue);
$(`#important-policy-box-${timestr} input[type=tel]`).attr("style","width:480px");
$(`#important-policy-box-${timestr} input[type=tel]`).parent().attr("style","width:490px");
}
form.render();
}
... ... @@ -164,11 +168,11 @@ layui.define(['form', 'admin', 'laydate', 'common','sessions','reskpilist','tabl
var cond = '';
if(commonlyItems[i].relationSymbol && commonlyItems[i].relationSymbol == '0'){
cond = `<div class="layui-form-item cont-base" id="commonly-policy-box-${times}-condition">
<input type="checkbox" lay-skin="switch" lay-text="或|且" value="是">
<input type="radio" class="condition" name="policy-${times}-condition" value="&&" title="且" checked><input type="radio" class="condition" name="policy-${times}-condition" value="||" title="或" >
</div>`;
}else if(commonlyItems[i].relationSymbol && commonlyItems[i].relationSymbol == '1'){
cond = `<div class="layui-form-item cont-base" id="commonly-policy-box-${times}-condition">
<input type="checkbox" checked lay-skin="switch" lay-text="或|且" value="否">
<input type="radio" class="condition" name="policy-${times}-condition" value="&&" title="且"><input type="radio" class="condition" name="policy-${times}-condition" value="||" title="或" checked>
</div>`;
}
var clone = ""
... ... @@ -192,6 +196,8 @@ layui.define(['form', 'admin', 'laydate', 'common','sessions','reskpilist','tabl
$(`#commonly-policy-box-${timestr} select.policyparam`).val(commonlyItems[i].confNo);
$(`#commonly-policy-box-${timestr} select.condition`).val(commonlyItems[i].operatorSymbol);
$(`#commonly-policy-box-${timestr} input[type=tel]`).val(commonlyItems[i].operatorValue);
$(`#commonly-policy-box-${timestr} input[type=tel]`).attr("style","width:480px");
$(`#commonly-policy-box-${timestr} input[type=tel]`).parent().attr("style","width:490px");
}
form.render();
... ... @@ -249,6 +255,10 @@ layui.define(['form', 'admin', 'laydate', 'common','sessions','reskpilist','tabl
});
}
form.on('select(serious_policy_param)', function(data){
var seriousvalue =$(this).closest(".cont-base").find("div#seriousvalue");
if(seriousvalue){
seriousvalue.remove();
}
if (data.value != ''){
//加载对应的参数
if(data.value == "device_id"){
... ... @@ -270,7 +280,6 @@ layui.define(['form', 'admin', 'laydate', 'common','sessions','reskpilist','tabl
if(device.length>0){
device = device.substring(0,device.length-1)
}
console.log(device_id)
device_id.val(device);
return device;
})
... ... @@ -321,9 +330,8 @@ layui.define(['form', 'admin', 'laydate', 'common','sessions','reskpilist','tabl
});
}else if(data.value == "inKey"){
//绑定资源类型下拉选择
$(this).closest(".cont-base").find("input[type=tel]").before('<div id="seriousvalue" class="xm-select-demo" style="width: 278px"></div>');
$(this).closest(".cont-base").find("input[type=tel]").before('<div id="seriousvalue" class="xm-select-demo" style="width:478px;position: absolute;z-index: 999"></div>');
var inkeys= $(this).closest(".cont-base").find("input[type=tel]");
var seriousvalue =$(this).closest(".cont-base").find("div#seriousvalue");
//inkeys.hide();
$(this).closest(".cont-base").find("input[type=tel]").unbind('click').on("click",function () {
admin.req({
... ... @@ -335,12 +343,16 @@ layui.define(['form', 'admin', 'laydate', 'common','sessions','reskpilist','tabl
xmSelect.render({
el: '#seriousvalue',
tips: '=inKey=',
filterable: true,
//radio: false,
radio: false,
clickClose: false,
initValue: [seriousInkeys.split(",")[0]],
prop: {
name: 'name',
value: 'inKey'
},
filterable: true,
layVerify: 'required',
autoRow: true,
layVerType: 'msg',
//initValue: [seriousInkeys.split(",")[0]],
toolbar: {
show: true,
list: ['CLEAR']
... ... @@ -350,8 +362,8 @@ layui.define(['form', 'admin', 'laydate', 'common','sessions','reskpilist','tabl
seriousInkeys = data.arr.map(item => item.inKey).join(',');
inkeys.val(seriousInkeys);
if(data && data.isAdd) {
seriousvalue.remove();
inkeys.show();
//seriousvalue.remove();
//inkeys.show();
}
return seriousInkeys
}
... ... @@ -363,6 +375,10 @@ layui.define(['form', 'admin', 'laydate', 'common','sessions','reskpilist','tabl
}
});
form.on('select(important_policy_param)', function(data){
var importantvalue =$(this).closest(".cont-base").find("div#importantvalue");
if(importantvalue){
importantvalue.remove();
}
if (data.value != ''){
//加载对应的参数
if(data.value == "device_id"){
... ... @@ -434,9 +450,9 @@ layui.define(['form', 'admin', 'laydate', 'common','sessions','reskpilist','tabl
});
}else if(data.value == "inKey"){
//绑定资源类型下拉选择
$(this).closest(".cont-base").find("input[type=tel]").before('<div id="importantvalue" class="xm-select-demo" style="width: 278px"></div>');
$(this).closest(".cont-base").find("input[type=tel]").before('<div id="importantvalue" class="xm-select-demo" style="width:478px;position: absolute;z-index: 999"></div>');
var inkeys= $(this).closest(".cont-base").find("input[type=tel]");
var importantvalue =$(this).closest(".cont-base").find("div#importantvalue");
//var importantvalue =$(this).closest(".cont-base").find("div#importantvalue");
//inkeys.hide();
$(this).closest(".cont-base").find("input[type=tel]").unbind('click').on("click",function () {
admin.req({
... ... @@ -448,25 +464,28 @@ layui.define(['form', 'admin', 'laydate', 'common','sessions','reskpilist','tabl
xmSelect.render({
el: '#importantvalue',
tips: '=inKey=',
filterable: true,
//radio: false,
radio: false,
clickClose: false,
initValue: [importantInkeys.split(",")[0]],
prop: {
name: 'name',
value: 'inKey'
},
filterable: true,
layVerify: 'required',
autoRow: true,
layVerType: 'msg',
toolbar: {
show: true,
list: [ 'CLEAR']
},
//height: '300px',
height: 'auto',
data: logjoinList,
on: function (data) {
importantInkeys = data.arr.map(item => item.inKey).join(',');
inkeys.val(importantInkeys);
if(data && data.isAdd) {
importantvalue.remove();
inkeys.show();
}
// if(data && data.isAdd) {
// importantvalue.remove();
// inkeys.show();
// }
return importantInkeys
}
});
... ... @@ -477,6 +496,10 @@ layui.define(['form', 'admin', 'laydate', 'common','sessions','reskpilist','tabl
}
});
form.on('select(commonly_policy_param)', function(data){
var commonlyvalue =$(this).closest(".cont-base").find("div#commonlyvalue");
if(commonlyvalue){
commonlyvalue.remove();
}
if (data.value != ''){
//加载对应的参数
if(data.value == "device_id"){
... ... @@ -548,9 +571,9 @@ layui.define(['form', 'admin', 'laydate', 'common','sessions','reskpilist','tabl
});
}else if(data.value == "inKey"){
//绑定资源类型下拉选择
$(this).closest(".cont-base").find("input[type=tel]").before('<div id="commonlyvalue" class="xm-select-demo" style="width: 278px"></div>');
$(this).closest(".cont-base").find("input[type=tel]").before('<div id="commonlyvalue" class="xm-select-demo" style="width:478px;position: absolute;z-index: 999"></div>');
var inkeys= $(this).closest(".cont-base").find("input[type=tel]");
var commonlyvalue =$(this).closest(".cont-base").find("div#commonlyvalue");
//inkeys.hide();
$(this).closest(".cont-base").find("input[type=tel]").unbind('click').on("click",function () {
admin.req({
... ... @@ -562,25 +585,28 @@ layui.define(['form', 'admin', 'laydate', 'common','sessions','reskpilist','tabl
xmSelect.render({
el: '#commonlyvalue',
tips: '=inKey=',
filterable: true,
//radio: false,
radio: false,
clickClose: false,
initValue: [commonlyInkeys.split(",")[0]],
prop: {
name: 'name',
value: 'inKey'
},
filterable: true,
layVerify: 'required',
autoRow: true,
layVerType: 'msg',
toolbar: {
show: true,
list: ['CLEAR']
},
//height: '300px',
height: 'auto',
data: logjoinList,
on: function (data) {
commonlyInkeys = data.arr.map(item => item.inKey).join(',');
inkeys.val(commonlyInkeys);
if(data && data.isAdd) {
commonlyvalue.remove();
inkeys.show();
}
// if(data && data.isAdd) {
// commonlyvalue.remove();
// inkeys.show();
// }
return commonlyInkeys
}
});
... ... @@ -647,25 +673,23 @@ layui.define(['form', 'admin', 'laydate', 'common','sessions','reskpilist','tabl
return false;
}
var policyFlag = $(this).data("flag");
var conOjb = {"0":">","1":"<","2":"=","3":">=","4":"<=","5":"equals","6":"contains","7":"startsWith","8":"endsWith","9":"nocontains"};
var conOjb = {"0":">","1":"<","2":"=","3":">=","4":"<=","5":"!=","6":"equals","7":"!equals","8":"contains","9":"startsWith","10":"endsWith","11":"!contains"};
var doms = $(`[id^=${policyFlag}-policy-box]`);
var policyStr = '';
var relationobj = {"1": 0,"3":1,"5":2,"7":3,"9":4,"11":5,"13":6,"15":7}
var relationobj = {"1": 0,"3":1,"5":2,"7":3,"9":4,"11":5,"13":6,"15":7,"17":8,"19":9,"21":10}
if(policyFlag.indexOf("serious")!=-1) {
seriouspolicyItems = [];
$(doms).each(function (i, v) {
var domId = $(v).attr("id");
if (domId.indexOf("condition") != -1) {//条件
var j = relationobj[''+i+''];
console.log(j);
var open = $(v).find('.layui-form-switch').hasClass("layui-form-onswitch");
if (open) {
policyStr += "||"
seriouspolicyItems[j].relationSymbol= "1"
var open = $(v).find('input[type=radio].condition:checked').val();
if (open == "||") {
policyStr += open;
seriouspolicyItems[j].relationSymbol= "1";
} else {
policyStr += "&&"
seriouspolicyItems[j].relationSymbol= "0"
policyStr += open;
seriouspolicyItems[j].relationSymbol= "0";
}
} else { //值
var conditon = $(v).find(".condition").val();
... ... @@ -721,13 +745,13 @@ layui.define(['form', 'admin', 'laydate', 'common','sessions','reskpilist','tabl
var domId = $(v).attr("id");
if (domId.indexOf("condition") != -1) {//条件
var j = relationobj[''+i+''];
var open = $(v).find('.layui-form-switch').hasClass("layui-form-onswitch");
if (open) {
policyStr += "||"
importantpolicyItems[j].relationSymbol= "1"
var open = $(v).find('input[type=radio].condition:checked').val();
if (open == "||") {
policyStr += open;
importantpolicyItems[j].relationSymbol= "1";
} else {
policyStr += "&&"
importantpolicyItems[j].relationSymbol= "0"
policyStr += open;
importantpolicyItems[j].relationSymbol= "0";
}
} else { //值
var conditon = $(v).find(".condition").val();
... ... @@ -784,12 +808,12 @@ layui.define(['form', 'admin', 'laydate', 'common','sessions','reskpilist','tabl
var domId = $(v).attr("id");
if (domId.indexOf("condition") != -1) {//条件
var j = relationobj[''+i+''];
var open = $(v).find('.layui-form-switch').hasClass("layui-form-onswitch");
if (open) {
policyStr += "||"
var open = $(v).find('input[type=radio].condition:checked').val();
if (open == "||") {
policyStr += open;
commonlypolicyItems[j].relationSymbol= "1";
} else {
policyStr += "&&"
policyStr += open;
commonlypolicyItems[j].relationSymbol= "0";
}
} else { //值
... ... @@ -923,7 +947,7 @@ layui.define(['form', 'admin', 'laydate', 'common','sessions','reskpilist','tabl
function clonePolicyDoms(id){
var times = new Date().getTime()
var cond = `<div class="layui-form-item cont-base" id="${id}-${times}-condition">
<input type="checkbox" checked="" lay-skin="switch" lay-text="或|且">
<input type="radio" class="condition" name="policy-${times}-condition" value="&&" title="且" checked><input type="radio" class="condition" name="policy-${times}-condition" value="||" title="或" >
</div>`;
var clone = $(`#${id}`).clone();
clone.attr("id",id+"-"+times).find("i.policy-input-add").addClass("hide")
... ... @@ -933,7 +957,8 @@ layui.define(['form', 'admin', 'laydate', 'common','sessions','reskpilist','tabl
//console.log(clone.find("select.policyparam").html(options))
clone.find("select.policyparam").html(options);
clone.find("select.condition").html(conditionoptions);
clone.find("input[type=tel]").val('');
clone.find("input[type=tel]").attr("style","width:480px").val('');
clone.find("input[type=tel]").parent().attr("style","width:490px");
//获取最后一个添加的id
var doms = $(`div[id^=${id}][id$='condition'][id!=${id}]`);
var lastid ='';
... ...
... ... @@ -118,13 +118,16 @@
<option value="2">等于</option>
<option value="3">大于等于</option>
<option value="4">小于等于</option>
<option value="5">字符串等于</option>
<option value="6">字符串包含</option>
<option value="7">字符串前匹配</option>
<option value="8">字符串后匹配</option>
<option value="5">不等于</option>
<option value="6">字符串等于</option>
<option value="7">字符串不等于</option>
<option value="8">字符串包含</option>
<option value="9">字符串前匹配</option>
<option value="10">字符串后匹配</option>
<option value="11">字符串不包含</option>
</select>
</div>
<div class="layui-input-inline smallwith">
<div class="layui-input-inline">
<input type="tel" autocomplete="off" class="layui-input seriousvalue" flag="serious_value" >
</div>
<div class="layui-form-mid layui-word-aux"><i data-id="serious-policy-box" class="layui-icon oper-icon policy-input-add">&#xe624;</i></div>
... ... @@ -195,13 +198,16 @@
<option value="2">等于</option>
<option value="3">大于等于</option>
<option value="4">小于等于</option>
<option value="5">字符串等于</option>
<option value="6">字符串包含</option>
<option value="7">字符串前匹配</option>
<option value="8">字符串后匹配</option>
<option value="5">不等于</option>
<option value="6">字符串等于</option>
<option value="7">字符串不等于</option>
<option value="8">字符串包含</option>
<option value="9">字符串前匹配</option>
<option value="10">字符串后匹配</option>
<option value="11">字符串不包含</option>
</select>
</div>
<div class="layui-input-inline smallwith">
<div class="layui-input-inline">
<input type="tel" autocomplete="off" class="layui-input importantvalue" flag="important_value" >
</div>
<div class="layui-form-mid layui-word-aux"><i data-id="important-policy-box" class="layui-icon oper-icon policy-input-add">&#xe624;</i></div>
... ... @@ -272,13 +278,16 @@
<option value="2">等于</option>
<option value="3">大于等于</option>
<option value="4">小于等于</option>
<option value="5">字符串等于</option>
<option value="6">字符串包含</option>
<option value="7">字符串前匹配</option>
<option value="8">字符串后匹配</option>
<option value="5">不等于</option>
<option value="6">字符串等于</option>
<option value="7">字符串不等于</option>
<option value="8">字符串包含</option>
<option value="9">字符串前匹配</option>
<option value="10">字符串后匹配</option>
<option value="11">字符串不包含</option>
</select>
</div>
<div class="layui-input-inline smallwith">
<div class="layui-input-inline">
<input type="tel" autocomplete="off" class="layui-input commonlyvalue" flag="commonly_value">
</div>
<div class="layui-form-mid layui-word-aux"><i data-id="commonly-policy-box" class="layui-icon oper-icon policy-input-add">&#xe624;</i></div>
... ... @@ -336,15 +345,19 @@
<div class="layui-form-item cont-base" id="filter-policy-box">
<div class="layui-input-inline smallwith">
<select class="filter_condition">
<option value="">运算符</option>
<option value="0">大于</option>
<option value="1">小于</option>
<option value="2">等于</option>
<option value="3">大于等于</option>
<option value="4">小于等于</option>
<option value="5">字符串等于</option>
<option value="6">字符串包含</option>
<option value="7">字符串前匹配</option>
<option value="8">字符串后匹配</option>
<option value="5">不等于</option>
<option value="6">字符串等于</option>
<option value="7">字符串不等于</option>
<option value="8">字符串包含</option>
<option value="9">字符串前匹配</option>
<option value="10">字符串后匹配</option>
<option value="11">字符串不包含</option>
</select>
</div>
<div class="layui-input-inline smallwith">
... ... @@ -443,9 +456,13 @@
input[type=tel]{
width: 280px;
min-width: 280px;
position: absolute;
}
.layui-word-aux{
left: 110px;
left: 10px;
}
.layui-form-pane .oper-icon{
color: #01aaed;
}
</style>
\ No newline at end of file
... ...