324 lines
12 KiB
HTML
324 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
|
|
<head>
|
|
<th:block th:include="include :: header('项目管理列表')"/>
|
|
</head>
|
|
<style>
|
|
.sortBox {
|
|
display: flex;
|
|
float: right;
|
|
flex-direction: column;
|
|
gap: 0;
|
|
height: 20px;
|
|
justify-content: center;
|
|
}
|
|
|
|
.sortBox div {
|
|
font-size: 10px;
|
|
transform: scale(1.2, 1);
|
|
cursor: pointer;
|
|
color: #bbb;
|
|
}
|
|
|
|
.sortBox .timeAction {
|
|
color: #000;
|
|
}
|
|
|
|
.timeSearch {
|
|
display: flex;
|
|
gap: 20px;
|
|
align-items: center;
|
|
}
|
|
|
|
.highlightRow {
|
|
color: red;
|
|
}
|
|
</style>
|
|
<body class="gray-bg">
|
|
<div class="container-div">
|
|
<div class="row">
|
|
<div class="col-sm-12 search-collapse">
|
|
<form id="formId">
|
|
<div class="select-list">
|
|
<ul>
|
|
<li>
|
|
<label>项目编号：</label>
|
|
<input type="text" name="projectCode"/>
|
|
</li>
|
|
<li>
|
|
<label>项目名称：</label>
|
|
<input type="text" name="projectName"/>
|
|
</li>
|
|
<li>
|
|
<label>客户信息：</label>
|
|
<input type="text" name="customerCode"/>
|
|
</li>
|
|
<li>
|
|
<label>行业：</label>
|
|
<input type="text" name="customerName"/>
|
|
</li>
|
|
<li>
|
|
<label>属地：</label>
|
|
<input type="text" name="province"/>
|
|
</li>
|
|
<li>
|
|
<label>项目阶段：</label>
|
|
<input type="text" name="projectStage"/>
|
|
</li>
|
|
<li>
|
|
<label>项目把握度：</label>
|
|
<input type="text" name="projectGraspDegree"/>
|
|
</li>
|
|
<li>
|
|
<label>汇智支撑：</label>
|
|
<input type="text" name="hzSupportUser"/>
|
|
</li>
|
|
<li class="timeSearch" style="width: 80%">
|
|
<div>
|
|
<label>时间选择：</label>
|
|
<select name="timeType" onchange="changeTimeType()" value="0">
|
|
<option value="0">预计下单时间</option>
|
|
<option value="1">预计发货时间</option>
|
|
<option value="2">最后一次更新时间</option>
|
|
</select>
|
|
</div>
|
|
<div class="timeSearch">
|
|
<input name="estimatedOrderTimeStart" type="text" class="input-sm form-control"
|
|
id="laydate-startTime"
|
|
placeholder="yyyy-MM-dd"/>
|
|
<span>到</span>
|
|
<input name="estimatedOrderTime" type="text" class="input-sm form-control"
|
|
id="laydate-endTime"
|
|
placeholder="yyyy-MM-dd"/>
|
|
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
|
|
class="fa fa-search"></i> 搜索</a>
|
|
<a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i
|
|
class="fa fa-refresh"></i> 重置</a>
|
|
</li>
|
|
</ul>
|
|
<input type="hidden" name="orderByColumn"/>
|
|
<input type="hidden" name="isAsc"/>
|
|
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<div class="btn-group-sm" id="toolbar" role="group">
|
|
<a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="sip:product:add">
|
|
<i class="fa fa-plus"></i> 添加
|
|
</a>
|
|
<a class="btn btn-primary single disabled" onclick="$.operate.edit()"
|
|
shiro:hasPermission="sip:product:edit">
|
|
<i class="fa fa-edit"></i> 修改
|
|
</a>
|
|
<a class="btn btn-danger multiple disabled" onclick="$.operate.removeAll()"
|
|
shiro:hasPermission="sip:product:remove">
|
|
<i class="fa fa-remove"></i> 删除
|
|
</a>
|
|
<a class="btn btn-warning" onclick="$.table.exportExcel()" shiro:hasPermission="sip:product:export">
|
|
<i class="fa fa-download"></i> 导出
|
|
</a>
|
|
</div>
|
|
<div class="col-sm-12 select-table table-striped">
|
|
<table id="bootstrap-table"></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<th:block th:include="include :: footer"/>
|
|
<script th:inline="javascript">
|
|
var editFlag = [[${@permission.hasPermi('sip:product:edit')}]];
|
|
var removeFlag = [[${@permission.hasPermi('sip:product:remove')}]];
|
|
var prefix = ctx + "sip/project";
|
|
|
|
$(function () {
|
|
var options = {
|
|
url: prefix + "/list",
|
|
createUrl: prefix + "/add",
|
|
updateUrl: prefix + "/edit/{id}",
|
|
removeUrl: prefix + "/remove",
|
|
exportUrl: prefix + "/export",
|
|
modalName: "项目管理",
|
|
columns: [{
|
|
checkbox: true
|
|
},
|
|
{
|
|
field: 'id',
|
|
title: '',
|
|
visible: false,
|
|
|
|
},
|
|
{
|
|
field: 'projectCode',
|
|
title: '项目编码',
|
|
escape: true,
|
|
formatter: (value, row, index) => {
|
|
if (row.highlight) {
|
|
return `<span class="highlight">${value}</span>`
|
|
}
|
|
}
|
|
},
|
|
{
|
|
field: 'projectName',
|
|
title: '项目名称'
|
|
},
|
|
{
|
|
field: 'customerName',
|
|
title: '客户名称'
|
|
},
|
|
{
|
|
field: 'industryType',
|
|
title: '行业'
|
|
},
|
|
{
|
|
field: 'province',
|
|
title: '属地'
|
|
},
|
|
{
|
|
field: 'projectGraspDegree',
|
|
title: '项目把握度'
|
|
},
|
|
{
|
|
field: 'projectStage',
|
|
title: '项目阶段'
|
|
},
|
|
{
|
|
field: 'hzSupportUser',
|
|
title: '汇智支撑人员'
|
|
},
|
|
{
|
|
field: 'estimatedAmount',
|
|
title: '预计金额(RMB)'
|
|
},
|
|
{
|
|
field: 'estimatedOrderTime',
|
|
title: '预计下单时间',
|
|
class: 'time1'
|
|
},
|
|
{
|
|
field: 'estimatedDeliverTime',
|
|
title: '预计发货时间',
|
|
class: 'time2'
|
|
},
|
|
{
|
|
field: 'projectDesc',
|
|
title: '最后一次更新时间',
|
|
class: 'time3'
|
|
},
|
|
{
|
|
title: '操作',
|
|
align: 'center',
|
|
formatter: function (value, row, index) {
|
|
var actions = [];
|
|
actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.id + '\')"><i class="fa fa-edit"></i>项目详情</a> ');
|
|
actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick=`openOrder(${row})`><i class="fa fa-edit"></i>生成订单</a> ');
|
|
actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
|
|
return actions.join('');
|
|
}
|
|
}],
|
|
onPostBody: () => {
|
|
initHighlight()
|
|
}
|
|
};
|
|
$.table.init(options);
|
|
initSrot()
|
|
changeTimeType()
|
|
|
|
layui.use('laydate', function () {
|
|
var laydate = layui.laydate;
|
|
var startDate = laydate.render({
|
|
elem: '#laydate-startTime',
|
|
max: $('#laydate-endTime').val(),
|
|
theme: 'molv',
|
|
trigger: 'click',
|
|
done: function (value, date) {
|
|
// 结束时间大于开始时间
|
|
if (value !== '') {
|
|
endDate.config.min.year = date.year;
|
|
endDate.config.min.month = date.month - 1;
|
|
endDate.config.min.date = date.date;
|
|
} else {
|
|
endDate.config.min.year = '';
|
|
endDate.config.min.month = '';
|
|
endDate.config.min.date = '';
|
|
}
|
|
}
|
|
});
|
|
var endDate = laydate.render({
|
|
elem: '#laydate-endTime',
|
|
min: $('#laydate-startTime').val(),
|
|
theme: 'molv',
|
|
trigger: 'click',
|
|
done: function (value, date) {
|
|
// 开始时间小于结束时间
|
|
if (value !== '') {
|
|
startDate.config.max.year = date.year;
|
|
startDate.config.max.month = date.month - 1;
|
|
startDate.config.max.date = date.date;
|
|
} else {
|
|
startDate.config.max.year = '';
|
|
startDate.config.max.month = '';
|
|
startDate.config.max.date = '';
|
|
}
|
|
}
|
|
});
|
|
|
|
})
|
|
});
|
|
|
|
function initHighlight() {
|
|
console.log($('.highlight'), 11)
|
|
$('span.highlight').parent().parent().addClass('highlightRow')
|
|
}
|
|
|
|
function initSrot() {
|
|
let sort1 = $(`<div class="sortBox"><div class="sortBtn timeAction" sort="asc">▲</div><div class="sortBtn" sort="desc">▼</div></div>`)
|
|
$('thead .time1 .th-inner').append(sort1)
|
|
let sort2 = $(`<div class="sortBox"><div class="sortBtn" sort="asc">▲</div><div class="sortBtn" sort="desc">▼</div></div>`)
|
|
$('thead .time2 .th-inner').append(sort2)
|
|
let sort3 = $(`<div class="sortBox"><div class="sortBtn" sort="asc">▲</div><div class="sortBtn" sort="desc">▼</div></div>`)
|
|
$('thead .time3 .th-inner').append(sort3)
|
|
bindSort([sort1, sort2, sort3])
|
|
|
|
|
|
}
|
|
|
|
function bindSort(list) {
|
|
list.forEach((ele, index) => {
|
|
$(ele).find('.sortBtn').on('click', function () {
|
|
changeSort(this, index)
|
|
})
|
|
})
|
|
|
|
}
|
|
|
|
function changeSort(ele, index) {
|
|
let arr = ['estimated_orderTime', 'estimated_deliverTime', 'update_time']
|
|
$('.sortBox').find('.timeAction').removeClass('timeAction')
|
|
$(ele).addClass('timeAction')
|
|
$('input[name="orderByColumn"]').val(arr[index])
|
|
$('input[name="isAsc"]').val($(ele).attr('sort'))
|
|
$.table.search()
|
|
}
|
|
|
|
function changeTimeType() {
|
|
let timeType = $("[name='timeType']").val()
|
|
if (timeType == 0) {
|
|
$('#laydate-startTime').attr('name', 'estimatedOrderTimeStart')
|
|
$('#laydate-endTime').attr('name', 'estimatedOrderTimeEnd')
|
|
} else if (timeType == 1) {
|
|
$('#laydate-startTime').attr('name', 'estimatedDeliverTimeStart')
|
|
$('#laydate-endTime').attr('name', 'estimatedDeliverTimeEnd')
|
|
} else if (timeType == 2) {
|
|
$('#laydate-startTime').attr('name', 'updateTimeStart')
|
|
$('#laydate-endTime').attr('name', 'updateTimeEnd')
|
|
}
|
|
}
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html> |