2025-05-24 10:56:00 +08:00

699 lines
33 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>管理套餐</title>
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
<style>
.expand.pear-btn:hover {
color: currentColor;
background: none;
}
.expand.pear-btn {
border: 1px solid rgba(255, 255, 255, 0)
}
</style>
<script src="../../assets/token.js"></script>
</head>
<body class="pear-container">
<div class="layui-card">
<div class="layui-card-body">
<form id="userForm" class="layui-form" action="">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">搜索框</label>
<div class="layui-input-inline">
<input type="text" name="realName" placeholder="" class="layui-input">
</div>
</div>
<div class="layui-inline" style="margin-left: 50px;">
<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
<i class="layui-icon layui-icon-search"></i>
查询
</button>
<button type="reset" class="pear-btn pear-btn-md">
<i class="layui-icon layui-icon-refresh"></i>
重置
</button>
<button type="button" class="pear-btn pear-btn-md expand">
</button>
</div>
</div>
</form>
</div>
</div>
<div class="layui-card">
<div class="layui-card-body">
<table id="user-table" lay-filter="user-table"></table>
</div>
</div>
<script type="text/html" id="user-toolbar">
<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
<i class="layui-icon layui-icon-add-1"></i>
新增
</button>
<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
<i class="layui-icon layui-icon-delete"></i>
删除
</button>
</script>
<script type="text/html" id="user-bar">
<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i
class="layui-icon layui-icon-edit"></i></button>
<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i
class="layui-icon layui-icon-delete"></i></button>
<button class="pear-btn pear-btn-warming pear-btn-sm" lay-event="weixiu"><i class="layui-icon layui-icon-vercode"></i></button>
</script>
<script type="text/html" id="user-enable">
<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" checked="{{ d.enable == 0 ? 'true' : 'false' }}">
</script>
<!-- //照片模板 -->
<script type="text/html" id="photoTpl">
<div style="cursor: pointer;" lay-event="showPhoto">
<img src="{{d.modeImg}}" style="max-width:50px;max-height:100px;" />
</div>
</script>
<script type="text/html" id="user-sex">
{{#if (d.sex == 1) { }}
<span></span> {{# }else if(d.sex == 2){ }}
<span></span> {{# } }}
</script>
<script type="text/html" id="user-login">
{{#if (d.login == 0) { }}
<span>在线</span> {{# }else if(d.sex == 1){ }}
<span>离线</span> {{# } }}
</script>
<script type="text/html" id="user-createTime">
{{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
</script>
<div style="display: none;">
<div class="layer-top">
<br />
<h3>上侧弹层内容...</h3>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script src="../../assets/jquery-1.9.1.min.js"></script>
<script src="../../assets/type.js"></script>
<script src="../../assets/token.js"></script>
<script type="text/html" id="statusTpl">
{{# if(d.carStatus == 0) { }}
<span>未公开</span> {{# } else if(d.modeStatus == 0) { }}
<span>已公开</span> {{# } else if(d.modeStatus == 1) { }}
<span>未公开</span> {{# } }}
</script>
<script type="text/html" id="statusTpl2">
{{# if(d.energy == 0) { }}
<span>汽油</span> {{# } else if(d.energy == 1) { }}
<span>充电</span> {{# } }}
</script>
<script>
layui.use(['table', 'form', 'jquery', 'drawer', 'dropdown', 'upload', 'toast'], function() {
let table = layui.table;
let form = layui.form;
let $ = layui.jquery;
let drawer = layui.drawer;
let dropdown = layui.dropdown;
var upload = layui.upload;
var toast = layui.toast;
let MODULE_PATH = "/system/user/";
formToggle({
elem: "#userForm",
});
function formToggle(options) {
var defaultsOpt = {
isExpand: false,
prefixIcon: "layui-icon",
toggleIcon: ['layui-icon-down', 'layui-icon-up'],
toggleText: ['展开', '折叠'],
}
var opt = $.extend({}, defaultsOpt, options);
var elem = opt.elem; // 绑定的表单元素,必填
var min = opt.min; // 最小显示数,默认显示一行
var isExpand = opt.isExpand; // 初始展开
var prefixIcon = opt.prefixIcon + " "; // 图标前缀
var toggleIcon = opt.toggleIcon; // 折叠和展开时的图标类[unExpandIcon, ExpandIcon]
var toggleText = opt.toggleText; // 折叠和展开时的文本
var eleDOM = $(elem + " .layui-inline");
var firstElTop = eleDOM.first().offset().top;
var targetEl = eleDOM.filter(function(index) {
var isGtMin = (index + 1) > min;
var isGtFirstElTop = $(this).offset().top > firstElTop;
var isNeqLast = (index + 1) != eleDOM.length;
return min ? isGtMin && isNeqLast : isGtFirstElTop && isNeqLast;
});
var unExpandIcon = prefixIcon + toggleIcon[0];
var expandIcon = prefixIcon + toggleIcon[1];
var unExpandText = toggleText[0];
var expandText = toggleText[1];
var btnSelector = elem + " .expand";
$(btnSelector).append("<i></i>")
if (targetEl.length > 0) {
if (isExpand) {
$(btnSelector).prepend("<span>" + expandText + "</span>");
$(btnSelector + ">i").addClass(expandIcon);
} else {
$(btnSelector).prepend("<span>" + unExpandText + "</span>")
$(btnSelector + ">i").addClass(unExpandIcon)
targetEl.addClass("layui-hide");
}
$(btnSelector).click(function() {
isExpand = !isExpand;
if (isExpand) {
$(btnSelector + ">span").html(expandText);
$(btnSelector + ">i").removeClass(unExpandIcon).addClass(expandIcon);
targetEl.removeClass("layui-hide")
} else {
$(btnSelector + ">span").html(unExpandText);
$(btnSelector + ">i").removeClass(expandIcon).addClass(unExpandIcon);
targetEl.addClass("layui-hide")
}
})
}
}
$.ajax({
url: `${api}/api/AllMode`,
type: 'POST',
success: function(res) {
// 渲染表格
table.render({
elem: '#user-table',
data: res.data,
page: true,
cols: [
[{
type: 'checkbox'
}, {
field: 'modeId',
title: '套餐ID',
align: 'center',
}, {
field: 'modeName',
title: '套餐名称',
align: 'center',
}, {
field: 'modeNum',
title: '可容纳车辆',
align: 'center',
}, {
field: 'betMoney',
title: '押金',
align: 'center',
}, {
field: 'parkingName',
title: '停车场',
align: 'center',
}, {
field: 'hourMoney',
title: '日租金',
align: 'center',
}, {
field: 'dayMoney',
title: '日租金',
align: 'center',
}, {
field: 'monthMoney',
title: '月租金',
align: 'center',
}, {
field: 'description',
title: '描述',
align: 'center',
width: 200
}, {
field: 'modeImg',
title: '图片',
align: 'center',
width: 200,
templet: '#photoTpl',
}, {
field: 'modeStatus',
title: '状态',
align: 'center',
templet: '#statusTpl',
}, {
toolbar: '#user-bar',
title: '操作',
align: 'left',
}]
],
skin: 'line',
toolbar: '#user-toolbar',
defaultToolbar: [{
layEvent: 'refresh',
icon: 'layui-icon-refresh'
},
'filter', 'print', 'exports'
]
});
}
});
table.on('tool(user-table)', function(obj) {
if (obj.event === 'remove') {
console.log(obj)
window.remove(obj);
} else if (obj.event === 'edit') {
window.edit(obj);
} else if (obj.event === 'showPhoto') {
window.showPhoto(obj);
} else if (obj.event === 'weixiu') {
window.weixiu(obj);
}
});
table.on('toolbar(user-table)', function(obj) {
if (obj.event === 'add') {
window.add();
} else if (obj.event === 'refresh') {
window.refresh();
} else if (obj.event === 'batchRemove') {
window.batchRemove(obj);
}
});
form.on('submit(user-query)', function(data) {
table.reload('user-table', {
where: data.field
})
return false;
});
// 监听表格中图片的点击事件
form.on('switch(user-enable)', function(obj) {
layer.tips(this.value + ' ' + this.name + '' + obj.elem.checked, obj.othis);
});
window.showPhoto = function (obj) {
// 显示放大后的图片
layer.photos({
photos: {
"data": [{
"src": obj.data.modeImg // 图片的链接
}]
},
shadeClose: true,
closeBtn: 1
});
}
window.add = function() {
drawer.open({
legacy: false,
offset: "r",
area: "40%",
content: `
<form class="layui-form" action="" onsubmit="return false" style="margin-top:50px;">
<div class="layui-form-item">
<label class="layui-form-label">套餐名称</label>
<div class="layui-input-block">
<input type="text" name="dya5n" required id="ModeName" lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input" >
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">可容纳车辆数量</label>
<div class="layui-input-block">
<input type="text" name="dya5n" required id="ModeNum" lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input" >
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">套餐押金</label>
<div class="layui-input-block">
<input type="text" name="dya5n" required id="BetMoney" lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input" >
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">套餐时租金额</label>
<div class="layui-input-block">
<input type="text" name="dya5n" required id="HourMoney" lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input" >
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">套餐日租金额</label>
<div class="layui-input-block">
<input type="text" name="dya5n" required id="DayMoney" lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input" >
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">套餐月租金额</label>
<div class="layui-input-block">
<input type="text" name="dya5n" required id="MonthMoney" lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input" >
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">套餐描述</label>
<div class="layui-input-block">
<textarea name="m2sug" placeholder="" id="Description" class="layui-textarea"></textarea>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">套餐图片</label>
<div class="layui-input-block">
<input type="file" id="uploadFile">
<input type="text" id="modeImg" style="display:none">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">停车场</label>
<div class="layui-input-block">
<select name="city" lay-verify="required" id="parking_id">
<option value="">请选择停车场</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">套餐状态</label>
<div class="layui-input-block">
<select name="city" lay-verify="required" id="carStatus">
<option value="">请选择车辆状态</option>
<option value="0">未公开</option>
<option value="1">已公开</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo" onclick="addMode()">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>`,
})
layui.use('form', function() {
var form = layui.form;
form.render(); // 渲染表单元素
});
// 使用 AJAX 获取停车场数据并填充下拉列表
$.ajax({
url: `${api}/api/AllParking`,
type: 'POST',
contentType: 'application/json',
success: function(response) {
if (Array.isArray(response.data)) {
var parkings = response.data;
var parkingSelect = $('#parking_id');
parkings.forEach(function(parking) {
var option = $('<option>').attr('value', parking.id).text(parking.parkingName);
parkingSelect.append(option);
});
layui.form.render('select');
} else {
console.error(response.data);
}
},
error: function(xhr, status, error) {
console.error(error);
}
});
// 在弹出窗口中的表单加载完成后,监听文件上传的变化
$('#uploadFile').on('change', function(event) {
var file = event.target.files[0];
var formData = new FormData();
formData.append('image', file);
formData.append('token', '1c17b11693cb5ec63859b091c5b9c1b2');
$.ajax({
url: 'http://8.141.3.231:40061/api/index.php',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function(res) {
document.querySelector("#modeImg").value = res.url
success(res.message + res.url)
},
error: function(xhr, status, error) {
error('上传图片失败:', error);
}
});
})
},
//修改
window.edit = function(obj) {
var objs = obj.data
console.log(objs)
drawer.open({
legacy: false,
offset: "r",
area: "30%",
content: `
<form class="layui-form" action="" onsubmit="return false" style="margin-top:50px;">
<div class="layui-form-item">
<label class="layui-form-label">套餐ID</label>
<div class="layui-input-block">
<input type="text" name="dya5n" required id="ModeIds" lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input" value=${obj.data.modeId}>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">套餐名称</label>
<div class="layui-input-block">
<input type="text" name="dya5n" required id="ModeNames" lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input" value=${obj.data.modeName}>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">可容纳车辆数量</label>
<div class="layui-input-block">
<input type="text" name="dya5n" required id="ModeNums" lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input" value=${obj.data.modeNum}>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">套餐押金</label>
<div class="layui-input-block">
<input type="text" name="dya5n" required id="BetMoneys" lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input" value=${obj.data.betMoney}>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">套餐时租金额</label>
<div class="layui-input-block">
<input type="text" name="dya5n" required id="HourMoneys" lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input" value=${obj.data.hourMoney}>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">套餐日租金额</label>
<div class="layui-input-block">
<input type="text" name="dya5n" required id="DayMoneys" lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input" value=${obj.data.dayMoney}>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">套餐月租金额</label>
<div class="layui-input-block">
<input type="text" name="dya5n" required id="MonthMoneys" lay-verify="required" placeholder="请输入输入框内容" autocomplete="off" class="layui-input" value=${obj.data.monthMoney}>
</div>
</div>
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">套餐描述</label>
<div class="layui-input-block">
<textarea name="m2sug" placeholder="" id="Descriptions" class="layui-textarea" >${obj.data.description}</textarea>
</div>
<div class="layui-form-item">
<label class="layui-form-label">套餐图片</label>
<div class="layui-input-block">
<input type="file" id="uploadFile">
<input type="text" id="modeImgs" style="display:none" value=${obj.data.modeImg}>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">停车场</label>
<div class="layui-input-block">
<select name="city" lay-verify="required" id="parking_ids">
<option value="">请选择停车场</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">套餐状态</label>
<div class="layui-input-block">
<select name="city" lay-verify="required" id="carStatuss">
<option value="">请选则套餐状态</option>
<option value="0" ${obj.data.modeStatus == '0' ? 'selected' : ''}>未公开</option>
<option value="1" ${obj.data.modeStatus == '1' ? 'selected' : ''}>已公开</option>
</select>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo" onclick="editmode()">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>`,
})
layui.use('form', function() {
var form = layui.form;
form.render(); // 渲染表单元素
});
// 使用 AJAX 获取停车场并填充下拉列表并选中自己的停车场
$.ajax({
url: `${api}/api/AllParking`,
type: 'POST',
contentType: 'application/json',
success: function(response) {
if (Array.isArray(response.data)) {
var parkings = response.data;
var parkingSelect = $('#parking_ids');
parkings.forEach(function(parking) {
var selected = (obj.data.parking_id == parking.id) ? 'selected' : '';
var option = $('<option>').attr('value', parking.id).attr('selected', selected).text(parking.parkingName);
parkingSelect.append(option);
});
layui.form.render('select');
} else {
console.error('Invalid parkings data:', response.data);
}
},
error: function(xhr, status, error) {
console.error('Failed to fetch parkings:', error);
}
});
// 在弹出窗口中的表单加载完成后,监听文件上传的变化
$('#uploadFile').on('change', function(event) {
var file = event.target.files[0];
var formData = new FormData();
formData.append('image', file);
formData.append('token', '1c17b11693cb5ec63859b091c5b9c1b2');
$.ajax({
url: 'http://8.141.3.231:40061//api/index.php',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function(res) {
document.querySelector("#modeImgs").value = res.url
success(res.message + res.url)
},
error: function(xhr, status, error) {
error('上传图片失败:', error);
}
});
})
}
//执行实例
var uploadInst = upload.render({
elem: '#test1' //绑定元素
,
url: '/upload/' //上传接口
,
done: function(res) {
//上传完毕回调
},
error: function() {
//请求异常回调
}
});
window.remove = function(obj) {
layer.confirm('确定要删除该车辆', {
icon: 3,
title: '提示'
}, function(index) {
layer.close(index);
let loading = layer.load();
$.ajax({
url: api + "/api/delete_car",
contentType: 'application/json',
data: JSON.stringify({
carIds: obj.data.carId
}),
type: 'post',
success: function(result) {
layer.close(loading);
if (result.status == 200) {
success(result.message);
time();
} else {
error(result.message)
}
}
})
});
}
window.batchRemove = function(obj) {
let data = table.checkStatus(obj.config.id).data;
if (data.length === 0) {
layer.msg("未选中数据", {
icon: 3,
time: 1000
});
return false;
}
let ids = "";
for (let i = 0; i < data.length; i++) {
ids += data[i].modeId + ",";
}
ids = ids.substr(0, ids.length - 1);
layer.confirm('确定要删除这些套餐吗', {
icon: 3,
title: '提示'
}, function(index) {
layer.close(index);
let loading = layer.load();
$.ajax({
url: `${api}/api/delete_mode`,
contentType: 'application/json',
type: 'post',
data: JSON.stringify({
ids: ids
}),
success: function(result) {
layer.close(loading);
if (result.status = 200) {
success(result.message);
time();
} else {
error(result.message);
}
}
})
});
}
window.refresh = function(param) {
table.reload('user-table');
}
})
</script>
</body>
</html>