417 lines
13 KiB
HTML
417 lines
13 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><cite>年度计划</cite></a>
|
|
</span>
|
|
{/block} {block name="body"}
|
|
<div class="table-content p-3">
|
|
<div class="table_bar sticky-bar">
|
|
<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" id="batch_delete">批量删除</button>
|
|
<!-- <div class="layui-inline">
|
|
<input class="layui-input search-input" id="search-input" type="text" placeholder="请输入搜索内容">
|
|
</div>
|
|
<button class="layui-btn" id="search-btn">搜索</button> -->
|
|
</div>
|
|
<div class="cateselect layui-form-bar border-x">
|
|
<form class="layui-form" action="" id="filter-form">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">计划年份</label>
|
|
<div class="layui-input-inline">
|
|
<select name="year" lay-verify=""></select>
|
|
</div>
|
|
<label class="layui-form-label">重要程度</label>
|
|
<div class="layui-input-inline">
|
|
<select name="important" lay-verify="">
|
|
<option value="">请选择</option>
|
|
<option value="1">★</option>
|
|
<option value="2">★★</option>
|
|
<option value="3">★★★</option>
|
|
<option value="4">★★★★</option>
|
|
<option value="5">★★★★★</option>
|
|
</select>
|
|
</div>
|
|
<label class="layui-form-label">项目类型</label>
|
|
<div class="layui-input-inline">
|
|
<select name="cate" lay-verify=""></select>
|
|
</div>
|
|
<label class="layui-form-label">负责人</label>
|
|
<div class="layui-input-inline">
|
|
<input class="layui-input search-input" id="search-responsible" type="text" placeholder="请输入负责人">
|
|
</div>
|
|
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<div style="width: 100%;height: 10px;"></div>
|
|
<label class="layui-form-label">项目名称</label>
|
|
<div class="layui-input-inline">
|
|
<input class="layui-input search-input" id="search-name" type="text" placeholder="请输入项目名称">
|
|
</div>
|
|
<div class="layui-input-inline">
|
|
<button class="layui-btn" lay-submit lay-filter="filterSearch" id="search-btn">筛选</button>
|
|
<button class="layui-btn layui-btn-normal" lay-submit lay-filter="filterSearch"
|
|
id="search-reload">清除</button>
|
|
</div>
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<table class="layui-hide" id="plan" lay-filter="plan"></table>
|
|
<span id="total-price"></span>
|
|
</div>
|
|
{/block}
|
|
|
|
<!-- 脚本 -->
|
|
{block name="script"}
|
|
|
|
|
|
<script>
|
|
const moduleInit = ["tool", "gouguEdit", "gouguComment"];
|
|
|
|
function gouguInit() {
|
|
var table = layui.table;
|
|
var tool = layui.tool;
|
|
var dropdown = layui.dropdown;
|
|
var $ = layui.jquery;
|
|
var layer = layui.layer;
|
|
|
|
// 刷新按钮
|
|
$("#refresh-btn").on("click", function () {
|
|
location.reload();
|
|
});
|
|
|
|
//新增计划按钮
|
|
$(".add-new").on("click", function () {
|
|
tool.open("/plan/index/add");
|
|
});
|
|
|
|
layui.table.on('checkbox(plan)', function (obj) {
|
|
var checkStatus = layui.table.checkStatus('plan');
|
|
var data = checkStatus.data;
|
|
// 修改开始：计算合计金额并显示
|
|
var totalPrice = data.reduce((acc, curr) => acc + parseFloat(curr.price || 0), 0).toFixed(2); // 确保结果为两位小数
|
|
document.getElementById('total-price').innerText = '合计金额：￥' + totalPrice;
|
|
// 修改结束
|
|
});
|
|
|
|
//获取计划年份
|
|
function getPlanYear() {
|
|
$.get("/plan/index/getplanyear", function (data) {
|
|
var selectYear = $("select[name='year']");
|
|
selectYear.empty(); // 清空下拉框
|
|
selectYear.append('<option value=""></option>'); // 添加空选项
|
|
data.data.forEach(function (year) {
|
|
selectYear.append('<option value="' + year + '">' + year + '</option>'); // 添加年份选项
|
|
});
|
|
layui.form.render('select'); // 重新渲染下拉框
|
|
});
|
|
}
|
|
|
|
// 调用计划年份
|
|
getPlanYear();
|
|
|
|
//获取项目类型
|
|
function getprojectcate() {
|
|
$.get("/plan/index/getprojectcate", function (data) {
|
|
var selectCate = $("select[name='cate']");
|
|
selectCate.empty(); // 清空下拉框
|
|
selectCate.append('<option value=""></option>'); // 添加空选项
|
|
data.data.forEach(function (cate) {
|
|
selectCate.append('<option value="' + cate.id + '">' + cate.cate + '</option>'); // 修改为 cate.id
|
|
});
|
|
layui.form.render('select'); // 重新渲染下拉框
|
|
});
|
|
}
|
|
|
|
// 调用项目类型
|
|
getprojectcate();
|
|
|
|
|
|
// 删除单条数据
|
|
table.on("tool(plan)", function (obj) {
|
|
var data = obj.data;
|
|
if (obj.event === "delete") {
|
|
layui.layer.confirm(
|
|
"确定删除该计划吗？",
|
|
{ icon: 3, title: "提示" },
|
|
function (index) {
|
|
$.post(
|
|
"/plan/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);
|
|
}
|
|
);
|
|
}
|
|
});
|
|
|
|
//批量删除数据
|
|
$("#batch_delete").on("click", function () {
|
|
var checkStatus = table.checkStatus('plan');
|
|
var data = checkStatus.data;
|
|
var ids = data.map(item => item.id);
|
|
|
|
if (ids.length === 0) {
|
|
layui.layer.msg("请选择要删除的数据");
|
|
return;
|
|
}
|
|
|
|
layui.layer.confirm(
|
|
"确定删除选中的计划吗？",
|
|
{ icon: 3, title: "提示" },
|
|
function (index) {
|
|
$.post(
|
|
"/plan/index/batch_delete",
|
|
{ ids: ids },
|
|
function (res) {
|
|
if (res.code === 0) {
|
|
layui.layer.msg("批量删除成功");
|
|
loadTableData(); // 重新加载表格数据
|
|
} else {
|
|
layui.layer.msg(res.msg);
|
|
}
|
|
}
|
|
);
|
|
layui.layer.close(index);
|
|
}
|
|
);
|
|
});
|
|
|
|
//查看详情唤醒view界面
|
|
table.on('tool(plan)', function (obj) {
|
|
var data = obj.data; // 获取当前行的数据
|
|
if (obj.event === 'view') {
|
|
var id = data.id; // 获取当前行数据的id
|
|
// 使用layer弹出层来显示详情页面
|
|
layui.layer.open({
|
|
type: 2, // iframe层
|
|
title: '计划详情',
|
|
shadeClose: true,
|
|
shade: 0.8,
|
|
area: ['70%', '90%'], // 宽高
|
|
content: '/plan/index/view/id/' + id //
|
|
});
|
|
}
|
|
});
|
|
|
|
//重载表格
|
|
function loadTableData() {
|
|
layui.pageTable.reload();
|
|
}
|
|
|
|
//渲染表格
|
|
layui.pageTable = layui.table.render({
|
|
elem: "#plan",
|
|
toolbar: '#toolbarDemo',
|
|
defaultToolbar: ['filter', 'exports', 'print', {
|
|
title: '计划列表',
|
|
layEvent: 'LAYTABLE_TIPS',
|
|
icon: 'layui-icon-tips'
|
|
}],
|
|
cellMinWidth: 80,
|
|
url: "/plan/index/index", // 数据接口
|
|
page: true,
|
|
limit: 50,
|
|
totalRow: true,
|
|
cols: [
|
|
[
|
|
{ type: 'checkbox' },
|
|
{ field: 'id', width: 80, title: '编号', sort: true, align: "center", totalRowText: '合计：' },
|
|
{
|
|
field: "year",
|
|
title: "计划年份",
|
|
align: "center",
|
|
width: 80,
|
|
rowspan: 2,
|
|
templet: function (d) {
|
|
var html =
|
|
'<span class="a1-' + d.year + '">' + d.year + "</span>";
|
|
return html;
|
|
},
|
|
},
|
|
{
|
|
field: "name",
|
|
title: "项目名称",
|
|
width: 240,
|
|
align: "center",
|
|
rowspan: 2,
|
|
templet: function (d) {
|
|
var html =
|
|
'<span class="a1-' + d.name + '">' + d.name + "</span>";
|
|
return html;
|
|
},
|
|
},
|
|
{
|
|
field: "cate",
|
|
title: "项目类型",
|
|
align: "center",
|
|
width: 80,
|
|
rowspan: 2,
|
|
templet: function (d) {
|
|
var html =
|
|
'<span class="a1-' + d.cate + '">' + d.cate + "</span>";
|
|
return html;
|
|
},
|
|
},
|
|
{
|
|
field: "important",
|
|
title: "重要程度",
|
|
width: 80,
|
|
align: "center",
|
|
rowspan: 2,
|
|
templet: function (d) {
|
|
var stars = "";
|
|
for (var i = 0; i < d.important; i++) {
|
|
stars += "★";
|
|
}
|
|
return '<span class="a1-' + d.important + '">' + stars + "</span>";
|
|
},
|
|
},
|
|
{
|
|
field: "status",
|
|
title: "项目状态",
|
|
width: 80,
|
|
align: "center",
|
|
rowspan: 2,
|
|
templet: function (d) {
|
|
var html =
|
|
'<span class="a1-' + d.status + '">' + d.status + "</span>";
|
|
return html;
|
|
},
|
|
},
|
|
{
|
|
field: "price",
|
|
title: "项目金额",
|
|
width: 120,
|
|
align: "center",
|
|
rowspan: 2,
|
|
templet: function (d) {
|
|
var html =
|
|
'<span class="a1-' + d.price + '">' + d.price + "</span>";
|
|
return html;
|
|
},
|
|
},
|
|
{
|
|
field: "responsible",
|
|
title: "负责人",
|
|
align: "center",
|
|
width: 120,
|
|
rowspan: 2,
|
|
templet: function (d) {
|
|
var html =
|
|
'<span class="a1-' + d.responsible + '">' + d.responsible + "</span>";
|
|
return html;
|
|
},
|
|
},
|
|
{
|
|
field: "start_time",
|
|
title: "开始时间",
|
|
align: "center",
|
|
width: 120,
|
|
rowspan: 2,
|
|
templet: function (d) {
|
|
if (d.start_time) {
|
|
var date = new Date(d.start_time * 1000); // 转换时间
|
|
var year = date.getFullYear();
|
|
var month = ("0" + (date.getMonth() + 1)).slice(-2);
|
|
var day = ("0" + date.getDate()).slice(-2);
|
|
var formattedDate = year + "-" + month + "-" + day;
|
|
var html = '<span class="a1-' + d.start_time + '">' + formattedDate + "</span>";
|
|
return html;
|
|
} else {
|
|
return "待定";
|
|
}
|
|
},
|
|
},
|
|
{
|
|
field: "end_time",
|
|
title: "结束时间",
|
|
align: "center",
|
|
width: 120,
|
|
rowspan: 2,
|
|
templet: function (d) {
|
|
if (d.end_time) {
|
|
var date = new Date(d.end_time * 1000); // 转换时间
|
|
var year = date.getFullYear();
|
|
var month = ("0" + (date.getMonth() + 1)).slice(-2);
|
|
var day = ("0" + date.getDate()).slice(-2);
|
|
var formattedDate = year + "-" + month + "-" + day;
|
|
var html = '<span class="a1-' + d.end_time + '">' + formattedDate + "</span>";
|
|
return html;
|
|
} else {
|
|
return "待定";
|
|
}
|
|
},
|
|
},
|
|
{
|
|
field: "schedule",
|
|
title: "计划进度",
|
|
align: "center",
|
|
width: 180,
|
|
rowspan: 2,
|
|
templet: function (d) {
|
|
var html =
|
|
'<span class="a1-' + d.schedule + '">' + d.schedule + "</span>";
|
|
return html;
|
|
},
|
|
},
|
|
{
|
|
field: "remark",
|
|
title: "备注",
|
|
align: "center",
|
|
rowspan: 2,
|
|
templet: function (d) {
|
|
if (d.remark) {
|
|
var html = '<span class="a1-' + d.remark + '">' + d.remark + "</span>";
|
|
return html;
|
|
} else {
|
|
return "";
|
|
}
|
|
},
|
|
},
|
|
{
|
|
field: "create_time",
|
|
title: "创建时间",
|
|
align: "center",
|
|
width: 180,
|
|
rowspan: 2,
|
|
},
|
|
{
|
|
fixed: 'right',
|
|
title: "操作",
|
|
align: "center",
|
|
width: 220,
|
|
minWidth: 220,
|
|
toolbar: "#barDemo",
|
|
},
|
|
],
|
|
],
|
|
});
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<script type="text/html" id="barDemo">
|
|
<a class="layui-btn layui-btn-sm " id="view" lay-event="view">查看详情</a>
|
|
<!-- <button class="layui-btn layui-btn-sm" lay-event="view">查看详情</button> -->
|
|
<!-- <a class="layui-btn layui-btn-sm " data-href="/plan/index/view/id/' + d.id + '" style="display: flex;justify-content: center;align-items: center;">查看详情</a> -->
|
|
<a class="layui-btn layui-btn-sm " lay-event="edit">编辑</a>
|
|
<a class="layui-btn layui-btn-sm layui-btn-normal" lay-event="delete">删除</a>
|
|
</script>
|
|
{/block} |