2025-06-25 10:53:11 +08:00

255 lines
7.4 KiB
HTML

{extend name="../../base/view/common/base" /}
<!-- 主体 -->
{block name="breadcrumb"}
<span class="layui-breadcrumb">
<a href="http://www.meteteme.com/" target="_blank">江苏美天科技</a>
<a href="/application/nav/index"><cite>应用</cite></a>
<a><cite>账号管理</cite></a>
</span>
{/block} {block name="body"}
<div class="table-content p-3">
<div class="layui-form-bar border-t border-x">
<button class="layui-btn layui-btn-sm add-new">+ 录入账号</button>
<button class="layui-btn layui-btn-sm" id="refresh-btn">刷新</button>
<button class="layui-btn layui-btn-sm add-category">增加类型</button>
<button class="layui-btn layui-btn-sm add-channel">增加渠道</button>
</div>
<table class="layui-hide" id="account" lay-filter="account"></table>
</div>
{/block}
<!-- 脚本 -->
{block name="script"}
<script>
const moduleInit = ["tool", "gouguEdit", "gouguComment"];
function gouguInit() {
var table = layui.table;
var tool = layui.tool;
// 刷新按钮
$("#refresh-btn").on("click", function () {
location.reload();
});
//录入账号按钮
$(".add-new").on("click", function () {
tool.open("/account/index/add");
});
//增加类型按钮
$(".add-category").on("click", function () {
tool.open("/account/index/add_category");
});
//增加渠道按钮
$(".add-channel").on("click", function () {
tool.open("/account/index/add_channel");
});
table.on('tool(account)', function (obj) {
var data = obj.data; // 获取当前行的数据
// console.log(data);
if (obj.event === 'edit') {
var id = data.id; // 获取当前行数据的id
var url = '/account/index/edit?id=' + id;
tool.open(url);
} else if (obj.event === 'delete') {
layui.layer.confirm(
"确定删除该账号吗?",
{ icon: 3, title: "提示" },
function (index) {
$.post(
"/account/index/delete",
{ id: data.id },
function (res) {
if (res.code === 0) {
// layui.layer.msg("删除成功");
layui.layer.msg(res.msg);
obj.del(); // 删除表格中的对应行数据
} else {
// layui.layer.msg("删除失败");
layui.layer.msg(res.msg);
}
}
);
layui.layer.close(index);
}
);
}
});
function loadTableData() {
layui.pageTable.reload();
}
layui.pageTable = table.render({
elem: "#account",
title: "账号列表",
cellMinWidth: 80,
url: "/account/index/index", // 数据接口
page: true, // 开启分页
limit: 20,
height: "full-130",
cols: [
[
{ field: "checkbox", type: "checkbox" }, // 添加复选框列
// {
// field: "id",
// title: "ID",
// width: 80,
// align: "center",
// rowspan: 2,
// templet: function (d) {
// var html = "A - " + d.id;
// return html;
// },
// },
{
field: "channel",
title: "账号渠道",
align: "center",
width: 200,
rowspan: 2,
templet: function (d) {
var html =
'<span class="a1-' + d.channel + '">' + d.channel + "</span>";
return html;
},
},
{
field: "category",
title: "账号类型",
width: 120,
align: "center",
rowspan: 2,
templet: function (d) {
var html =
'<span class="a1-' + d.category + '">' + d.category + "</span>";
return html;
},
},
{
field: "email",
title: "电子邮箱",
width: 200,
align: "center",
rowspan: 2,
templet: function (d) {
var html =
'<span class="a1-' + d.email + '">' + d.email + "</span>";
return html;
},
},
{
field: "regphone",
title: "创建手机号",
width: 120,
align: "center",
rowspan: 2,
templet: function (d) {
var html =
'<span class="a1-' + d.regphone + '">' + d.regphone + "</span>";
return html;
},
},
{
field: "account",
title: "账号",
align: "center",
width: 180,
rowspan: 2,
templet: function (d) {
var html =
'<span class="a1-' + d.account + '">' + d.account + "</span>";
return html;
},
},
{
field: "pwd",
title: "密码",
align: "center",
width: 180,
rowspan: 2,
templet: function (d) {
var html = '<span class="a1-' + d.pwd + '">' + d.pwd + "</span>";
return html;
},
},
{
field: "remark",
title: "备注",
align: "center",
rowspan: 2,
templet: function (d) {
var html =
'<span class="a1-' + d.remark + '">' + d.remark + "</span>";
return html;
},
},
{
field: "create_time",
title: "创建时间",
align: "center",
width: 180,
rowspan: 2,
},
{
title: "操作",
align: "center",
width: 180,
minWidth: 125,
toolbar: "#barDemo",
},
],
],
done: function () {
// 获取右边列表的高度
var rightListHeight = $(
".table-content .layui-table-view .layui-table-body"
).height();
// 将右边列表的高度应用到图片编号这一列的每条数据上
$(".layui-table-view .layui-table-body .layui-table-cell").each(
function () {
var $cell = $(this);
if ($cell.text().startsWith("P")) {
// 判断是否是图片编号列
var $leftCell = $cell
.parents("tr")
.find(".layui-table-cell")
.first(); // 找到左侧图片编号列对应的单元格
$leftCell.css("height", rightListHeight + "px");
}
}
);
// 重新渲染表格,以解决表格高度问题
layui.table.resize("account");
// 绑定点击事件
$(".open-a").on("click", function () {
var imgUrl = $(this).attr("src");
// 创建图层并显示大图
layer.open({
type: 1,
title: false,
closeBtn: 1,
skin: "layui-layer-nobg", // 没有背景色
shadeClose: true,
content: '<img src="' + imgUrl + '" style="max-width: 100%;">',
});
});
},
});
}
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs " lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="delete">删除</a>
</script>
{/block}