main
kgdxpr 8 months ago
parent c064694ec9
commit eeb9b46e88

File diff suppressed because one or more lines are too long

@ -99,6 +99,13 @@
<label class="layui-form-label label-width"><span class="require-star"></span>设置场站</label>
<div class="layui-form-item layui-inline" id="ID-transfer-demo-showSearch"></div>
</div>
<div class="layui-form-item layui-inline">
<label class="layui-form-label label-width"></label>
<button type="button" class="layui-btn layui-btn-sm" id="saveStation">
<i class="layui-icon layui-icon-ok"></i>
保存
</button>
</div>
</div>
@ -223,9 +230,6 @@
}
}
});
});
//获取已配置数据
@ -248,19 +252,13 @@
success: function (res) {
transfer.render({
elem: '#ID-transfer-demo-showSearch',
id: 'station',
data: res.data,
value: selectedStation,
title: ['未配置', '已配置'],
height: 500,
width: 300,
showSearch: true,
onchange: function (data, index) {
if (index === 0) {
turnRight(data);
} else {
turnLeft(data);
}
},
parseData: function (res) { // 解析成规定的 data 格式
return {
"value": res.resource_id,
@ -271,10 +269,11 @@
}
});
$("#saveStation").click(function () {
var getData = transfer.getData('station');
var resIds = getData.map(item => item.value).join(',');
function turnRight(ids) {
var resIds = ids.map(item => item.value).join(',');
console.log(resIds);
$.ajax({
type: "POST",
@ -283,23 +282,23 @@
url: "/ZhuQue/hurryQuit/addStation",
data: {
"station_ids": resIds
},
success: function (res) {
if (res.success) {
layer.msg('保存成功!', {
icon: 1,
time: 1000
});
} else {
layer.msg(res.msg, {
icon: 2,
time: 1000
});
}
}
});
}
function turnLeft(ids) {
var resIds = ids.map(item => item.value).join(',');
$.ajax({
type: "POST",
async: false,
dataType: "json",
url: "/ZhuQue/hurryQuit/delStation",
data: {
"station_ids": resIds
}
});
}
});

@ -0,0 +1,159 @@
/* 主体 */
.layui-form-checkbox > .lay-skin-checkcard,
.layui-form-radio > .lay-skin-checkcard {
display: table;
display: flex;
padding: 9px 12px;
white-space: normal;
border-radius: 10px;
border: 1px solid #e5e5e5;
color: #000;
background-color: #fff;
}
.layui-form-checkbox > .lay-skin-checkcard > *,
.layui-form-radio > .lay-skin-checkcard > * {
/* display: table-cell; */
/* IE */
vertical-align: top;
}
/* 悬停 */
.layui-form-checkbox:hover > .lay-skin-checkcard,
.layui-form-radio:hover > .lay-skin-checkcard {
border-color: #16b777;
}
/* 选中 */
.layui-form-checked > .lay-skin-checkcard,
.layui-form-radioed[lay-skin="none"] > .lay-skin-checkcard {
color: #000;
border-color: #16b777;
background-color: rgb(22 183 119 / 10%) !important;
/* box-shadow: 0 0 0 3px rgba(22, 183, 119, 0.08); */
}
/* 禁用 */
.layui-checkbox-disabled > .lay-skin-checkcard,
.layui-radio-disabled > .lay-skin-checkcard {
box-shadow: none;
border-color: #e5e5e5 !important;
background-color: #eee !important;
}
/* card 布局 */
.lay-skin-checkcard-avatar {
padding-right: 1px;
}
.lay-skin-checkcard-detail {
overflow: hidden;
width: 100%;
}
.lay-skin-checkcard-header {
font-weight: 500;
font-size: 16px;
white-space: nowrap;
margin-bottom: 4px;
}
.lay-skin-checkcard-description {
font-size: 13px;
color: #5f5f5f;
}
.layui-disabled .lay-skin-checkcard-description {
color: #c2c2c2 !important;
}
/* 选中 dot */
.layui-form-checked > .lay-check-dot:after,
.layui-form-radioed > .lay-check-dot:after {
position: absolute;
content: "";
top: 2px;
right: 2px;
width: 0;
height: 0;
display: inline-block;
vertical-align: middle;
border-width: 10px;
border-style: dashed;
border-color: transparent;
border-top-left-radius: 0px;
border-top-right-radius: 6px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 6px;
border-top-color: #16b777;
border-top-style: solid;
border-right-color: #16b777;
border-right-style: solid;
overflow: hidden;
}
.layui-checkbox-disabled > .lay-check-dot:after,
.layui-radio-disabled > .lay-check-dot:after {
border-top-color: #d2d2d2;
border-right-color: #d2d2d2;
}
/* 选中 dot-2 */
.layui-form-checked > .lay-check-dot-2:before,
.layui-form-radioed > .lay-check-dot-2:before {
position: absolute;
font-family: "layui-icon";
content: "\e605";
color: #fff;
bottom: 4px;
right: 3px;
font-size: 9px;
z-index: 12;
}
.layui-form-checked > .lay-check-dot-2:after,
.layui-form-radioed > .lay-check-dot-2:after {
position: absolute;
content: "";
bottom: 2px;
right: 2px;
width: 0;
height: 0;
display: inline-block;
vertical-align: middle;
border-width: 10px;
border-style: dashed;
border-color: transparent;
border-top-left-radius: 6px;
border-top-right-radius: 0px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 0px;
border-right-color: #16b777;
border-right-style: solid;
border-bottom-color: #16b777;
border-bottom-style: solid;
overflow: hidden;
}
.layui-checkbox-disabled > .lay-check-dot-2:before,
.layui-radio-disabled > .lay-check-dot-2:before {
color: #eee !important;
}
.layui-checkbox-disabled > .lay-check-dot-2:after,
.layui-radio-disabled > .lay-check-dot-2:after {
border-bottom-color: #d2d2d2;
border-right-color: #d2d2d2;
}
.lay-ellipsis-multi-line {
overflow: hidden;
word-break: break-all;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.radio-item {
margin-right: 4px;
}

File diff suppressed because one or more lines are too long

@ -0,0 +1,104 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
<link href="../layui/css/layui.css" rel="stylesheet">
<link href="./style.css" rel="stylesheet">
</head>
<body>
<!--
以下示例仅用于演示 lay-skin="none" 用法,仅支持 webkit 系浏览器,任何样式或兼容性问题请自行解决
-->
<div class="layui-form" lay-filter="form-demo-skin">
<div style="display: flex;align-items:center">
<div class="radio-item">
<input type="radio" name="radio1" value="m15" lay-skin="none">
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 38px">
<div class="lay-skin-checkcard-avatar">
近15分钟
</div>
</div>
</div>
<div class="radio-item">
<input type="radio" name="radio1" value="h1" lay-skin="none" checked>
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 38px">
<div class="lay-skin-checkcard-avatar">
近1小时
</div>
</div>
</div>
<div class="radio-item">
<input type="radio" name="radio1" value="h12" lay-skin="none">
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 38px">
<div class="lay-skin-checkcard-avatar">
近12小时
</div>
</div>
</div>
<div class="radio-item">
<input type="radio" name="radio1" value="d1" lay-skin="none">
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 38px">
<div class="lay-skin-checkcard-avatar">
近1天
</div>
</div>
</div>
<div class="radio-item">
<input type="radio" name="radio1" value="d2" lay-skin="none">
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 38px">
<div class="lay-skin-checkcard-avatar">
近2天
</div>
</div>
</div>
<div class="radio-item">
<input type="radio" name="radio1" value="d7" lay-skin="none">
<div lay-radio class="lay-skin-checkcard lay-check-dot-2" style="height: 38px">
<div class="lay-skin-checkcard-avatar">
近7天
</div>
</div>
</div>
<div>
<div class="layui-inline" id="ID-laydate-rangeLinked">
<div class="layui-input-inline">
<input type="text" autocomplete="off" id="ID-laydate-start-date-1" class="layui-input"
placeholder="开始日期">
</div>
<div class="layui-inline">-</div>
<div class="layui-input-inline">
<input type="text" autocomplete="off" id="ID-laydate-end-date-1" class="layui-input"
placeholder="结束日期">
</div>
</div>
</div>
</div>
</div>
<script src="../layui/layui.js"></script>
<script>
layui.use(function () {
var laydate = layui.laydate;
// 日期范围 - 左右面板联动选择模式
laydate.render({
elem: '#ID-laydate-rangeLinked',
type: 'datetime',
range: ['#ID-laydate-start-date-1', '#ID-laydate-end-date-1'],
rangeLinked: true // 开启日期范围选择时的区间联动标注模式 --- 2.8+ 新增
});
});
</script>
</body>
</html>
Loading…
Cancel
Save