434 lines
17 KiB
HTML
434 lines
17 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;
|
||
margin-right: 30px;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.disableBtnfalse {
|
||
color: #ccc;
|
||
}
|
||
</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="customerName"/>
|
||
</li>
|
||
<li>
|
||
<label>项目阶段：</label>
|
||
<select name="projectStage" class="form-control"
|
||
th:with="type=${@dict.getType('project_stage')}">
|
||
<option value="">请选择合项目阶段</option>
|
||
<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
|
||
th:value="${dict.dictValue}"></option>
|
||
</select>
|
||
</li>
|
||
<li>
|
||
<label>BG：</label>
|
||
<select name="bgProperty" class="form-control" th:with="type=${@dict.getType('bg_type')}"
|
||
onchange="changeBg()" required>
|
||
<option value="">请选择BG</option>
|
||
<option th:each="dict : ${type}" th:text="${dict.dictLabel}"
|
||
th:value="${dict.dictValue}"></option>
|
||
</select>
|
||
</li>
|
||
<li>
|
||
<label>行业：</label>
|
||
<div id="industryTypeBox" style="float: right">
|
||
<select name="industryType" class="form-control" required>
|
||
<option value="">请先选择BG</option>
|
||
</select>
|
||
</div>
|
||
|
||
</li>
|
||
<li>
|
||
<label>项目把握度：</label>
|
||
<select name="projectGraspDegree" onchange="changeTimeType()" value="0">
|
||
<option value="">请选择</option>
|
||
<option value="A">A</option>
|
||
<option value="B">B</option>
|
||
<option value="C">C</option>
|
||
<option value="D">D</option>
|
||
</select>
|
||
</li>
|
||
<li>
|
||
<label>汇智支撑：</label>
|
||
<input type="text" name="hzSupportUserName"/>
|
||
</li>
|
||
<li>
|
||
<label>代表处：</label>
|
||
<input type="text" name="agentName"/>
|
||
</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.addFull()" shiro:hasPermission="sip:product:add">
|
||
<i class="fa fa-plus"></i> 添加
|
||
</a>
|
||
<a class="btn btn-primary single disabled" onclick="$.operate.editFull()"
|
||
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>`
|
||
} else {
|
||
return `<span>${value}</span>`
|
||
}
|
||
}
|
||
},
|
||
{
|
||
field: 'projectName',
|
||
title: '项目名称'
|
||
},
|
||
{
|
||
field: 'customerName',
|
||
title: '最终客户'
|
||
},
|
||
{
|
||
field: 'bgProperty',
|
||
title: 'BG',
|
||
formatter: function (value, row, index) {
|
||
return $.table.selectDictLabel([[${@dict.getType('bg_type')}]], value);
|
||
}
|
||
},
|
||
{
|
||
field: 'industryType',
|
||
title: '行业',
|
||
formatter: function (value, row, index) {
|
||
if (row.bgProperty == 'YYS') {
|
||
return $.table.selectDictLabel([[${@dict.getType('bg_yys')}]], value);
|
||
} else {
|
||
return $.table.selectDictLabel([[${@dict.getType('bg_hsys')}]], value);
|
||
|
||
}
|
||
}
|
||
},
|
||
{
|
||
field: 'agentName',
|
||
title: '代表处'
|
||
},
|
||
{
|
||
field: 'projectGraspDegree',
|
||
title: '项目把握度',
|
||
width: 30
|
||
},
|
||
{
|
||
field: 'projectStage',
|
||
title: '项目阶段',
|
||
formatter: function (value, row, index) {
|
||
return $.table.selectDictLabel([[${@dict.getType('project_stage')}]], value);
|
||
}
|
||
},
|
||
{
|
||
field: 'hzSupportUserName',
|
||
title: '汇智负责人'
|
||
},
|
||
{
|
||
field: 'estimatedAmount',
|
||
title: '预计金额(元)'
|
||
},
|
||
{
|
||
field: 'estimatedOrderTime',
|
||
title: '预计下单时间',
|
||
class: 'time1',
|
||
width: 140
|
||
},
|
||
{
|
||
field: 'estimatedDeliverTime',
|
||
title: '预计发货时间',
|
||
class: 'time2',
|
||
width: 140
|
||
},
|
||
{
|
||
field: 'updateTime',
|
||
title: '最后一次更新时间',
|
||
class: 'time3',
|
||
width: 160
|
||
},
|
||
{
|
||
title: '操作',
|
||
align: 'center',
|
||
formatter: function (value, row, index) {
|
||
var actions = [];
|
||
actions.push('<a class="btn btn-success btn-xs mb5' + editFlag + '" href="javascript:void(0)" onclick="$.operate.editFull(\'' + row.id + '\')"><i class="fa fa-edit"></i>项目详情</a> ');
|
||
actions.push('<a class="btn btn-success btn-xs mb5' + editFlag + '" href="javascript:void(0)" onclick="openOrder(' + row.id + ',' + row.canGenerate + ')" name="disableBtn' + row.canGenerate + '"><i class="fa fa-refresh"></i>生成订单</a> ');
|
||
actions.push('<a class="btn btn-danger btn-xs mb5' + 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')
|
||
}
|
||
}
|
||
|
||
function changeBg() {
|
||
if ($('[name="bgProperty"]').val() != 'YYS') {
|
||
let datas = [[${@dict.getType('bg_hysy')}]]
|
||
let str = ``
|
||
datas.forEach((ele) => {
|
||
str += `<option value="${ele.dictValue}">${ele.dictLabel}</option> `
|
||
})
|
||
$('#industryTypeBox').html(`
|
||
<select name="industryType" class="form-control" required>
|
||
<option value="">请选择行业</option>
|
||
${str}
|
||
</select>
|
||
`)
|
||
} else {
|
||
let datas = [[${@dict.getType('bg_yys')}]]
|
||
let str = ``
|
||
datas.forEach((ele) => {
|
||
str += `<option value="${ele.dictValue}">${ele.dictLabel}</option> `
|
||
})
|
||
$('#industryTypeBox').html(`
|
||
<select name="industryType" class="form-control" required>
|
||
<option value="">请选择行业</option>
|
||
${str}
|
||
</select>
|
||
`)
|
||
}
|
||
|
||
}
|
||
|
||
function openOrder(id, canAdd) {
|
||
if (!canAdd) {
|
||
$.modal.alertWarning("该项目已存在订单");
|
||
return
|
||
}
|
||
var options = {
|
||
title: "新建订单",
|
||
url: ctx + `project/order/add`,
|
||
maxmin: false,
|
||
full: true,
|
||
index: 1000,
|
||
width: 1050,
|
||
btn: ['确定', '关闭'],
|
||
yes: function (index, layero) {
|
||
let body = parent.layer.getChildFrame('body', index)
|
||
if ($(body.find('#form-order-add').get(0)).validate().form()) {
|
||
layero.find('iframe')[0].contentWindow.saveSelect()
|
||
}else{
|
||
$.modal.alertWarning("请完善表单");
|
||
|
||
}
|
||
},
|
||
};
|
||
window.localStorage.setItem('projcetDataId', id)
|
||
$.modal.openOptions(options)
|
||
}
|
||
|
||
</script>
|
||
</body>
|
||
</html> |