499 lines
18 KiB
HTML
499 lines
18 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>工程详情</title>
|
||
<meta name="renderer" content="webkit">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
|
||
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
|
||
<link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
|
||
<link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
|
||
<link rel="stylesheet" href="../css/public.css" media="all">
|
||
</head>
|
||
|
||
<body>
|
||
<div class="main_page_nav">
|
||
<div class="select_item">
|
||
<div class="select_item_left">分公司 :</div>
|
||
<div class="select_item_right" id="company_id"></div>
|
||
<div id="retract">
|
||
<div id="retract_icon_down" style="display: none;" onclick="openClick()">
|
||
<i class="layui-icon layui-icon-down"></i>
|
||
<span>展开</span>
|
||
</div>
|
||
<div id="retract_icon_up" style="display: none;" onclick="hideClick()">
|
||
<i class="layui-icon layui-icon-up"></i>
|
||
<span>收起</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="select_item">
|
||
<div class="select_item_left">发货状态 :</div>
|
||
<div class="select_item_right" id="status_id"></div>
|
||
</div>
|
||
<div class="select_item">
|
||
<div class="select_item_left">年份 :</div>
|
||
<div class="select_item_right" id="year_id"></div>
|
||
</div>
|
||
<div class="select_item">
|
||
<div class="select_item_left">月份 :</div>
|
||
<div class="select_item_right" id="month_id"></div>
|
||
</div>
|
||
<div class="select_item">
|
||
<div class="select_item_left">已选条件 :</div>
|
||
<div class="select_item_right" id="select_id"></div>
|
||
</div>
|
||
|
||
|
||
<div class="layui-row" style="margin-top: 20px;">
|
||
<div class="layui-col-xs12 layui-col-sm6 layui-col-md5">
|
||
<div class="layui-input-block" style="margin-left: 0;display: flex;">
|
||
<input type="text" name="" placeholder="输入工程名称" autocomplete="off" class="layui-input">
|
||
<button type="button" class="layui-btn layui-btn-normal" style="margin-left: 10px;">搜索</button>
|
||
<button type="button" class="layui-btn" style="margin-left: 10px;">
|
||
<i class="layui-icon layui-icon-download-circle"></i> 导出
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-row" style="margin-top: 20px;">
|
||
<div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
|
||
<table class="layui-table">
|
||
<colgroup>
|
||
<col width="150">
|
||
<col width="200">
|
||
<col>
|
||
</colgroup>
|
||
<thead>
|
||
<tr>
|
||
<th>序号</th>
|
||
<th>工程名称</th>
|
||
<th>计划数</th>
|
||
<th>已发货</th>
|
||
<th>代发货</th>
|
||
<th>发货状态</th>
|
||
<th>采购数量</th>
|
||
<th>利库数量</th>
|
||
<th>退还数量</th>
|
||
<th>差缺数量</th>
|
||
<th>采购金额</th>
|
||
<th>所属分公司</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>贤心</td>
|
||
<td>2016-11-29</td>
|
||
<td>人生就像是一场修行</td>
|
||
<td>人生就像是一场修行</td>
|
||
<td>人生就像是一场修行</td>
|
||
<td>人生就像是一场修行</td>
|
||
<td>人生就像是一场修行</td>
|
||
<td>人生就像是一场修行</td>
|
||
<td>人生就像是一场修行</td>
|
||
<td>人生就像是一场修行</td>
|
||
<td>人生就像是一场修行</td>
|
||
<td>人生就像是一场修行</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<!-- 分页 -->
|
||
<div id="paging"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
<script>
|
||
var companyList = [
|
||
{ name: '全部' }, { name: '输电一公司' }, { name: '输电二公司' }, { name: '运检一公司' }, { name: '运检一公司' }
|
||
]
|
||
var statusList = [
|
||
{ name: '全部' }, { name: '部分发货' }, { name: '未发货' }, { name: '已发货' }
|
||
]
|
||
var yearList = []
|
||
|
||
var monthList = [{ name: '全部' }, { name: '1月' }, { name: '2月' }, { name: '3月' }, { name: '4月' }, { name: '5月' }, { name: '6月' }, { name: '7月' }, { name: '8月' }, { name: '9月' }, { name: '10月' }, { name: '11月' }, { name: '12月' }]
|
||
|
||
var selectList = [] // 已经筛选的条件
|
||
const getYear = 3 // 获取今年往前推多少年
|
||
// 页面初始化
|
||
$(function () {
|
||
let lastYears = Array.from({ length: getYear }, (_, index) => new Date().getFullYear() - index);
|
||
lastYears.forEach(item => {
|
||
yearList.unshift({
|
||
name: item
|
||
})
|
||
})
|
||
layui.use('laypage', function () {
|
||
var laypage = layui.laypage;
|
||
|
||
//执行一个laypage实例
|
||
laypage.render({
|
||
layout: ['prev', 'page', 'next', 'limit'],
|
||
elem: 'paging',
|
||
count: 50,
|
||
limit: 10,
|
||
limits: [10, 20, 30, 40, 50],
|
||
jump: function (obj, first) {
|
||
//obj包含了当前分页的所有参数，比如：
|
||
console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
|
||
console.log(obj.limit); //得到每页显示的条数
|
||
|
||
//首次不执行
|
||
if (!first) {
|
||
//do something
|
||
}
|
||
}
|
||
});
|
||
});
|
||
initTypeDom()
|
||
openOrhide()
|
||
});
|
||
|
||
// 分公司选择收起或展开
|
||
function openOrhide() {
|
||
// 根据高度判断是否给出展开收起按钮
|
||
let open_dom = document.getElementById('company_id')
|
||
if (open_dom.scrollHeight > 50) {
|
||
document.getElementById('retract_icon_up').style.display = 'block'
|
||
}
|
||
}
|
||
|
||
function openClick() {
|
||
document.getElementById('retract_icon_down').style.display = 'none'
|
||
document.getElementById('retract_icon_up').style.display = 'block'
|
||
$(`#company_id`).removeClass('hide_nav');
|
||
}
|
||
|
||
function hideClick() {
|
||
document.getElementById('retract_icon_up').style.display = 'none'
|
||
document.getElementById('retract_icon_down').style.display = 'block'
|
||
$(`#company_id`).addClass('hide_nav');
|
||
}
|
||
|
||
var company_id_num = 1 // 默认选择分公司类型
|
||
var status_id_num = 1 // 默认选择发货状态
|
||
var year_id_num = 3 // 默认选择年份
|
||
var month_id_num = 1 // 默认选择月份
|
||
|
||
function initTypeDom() {
|
||
// 分公司选择
|
||
var dom_nav1 = document.getElementById('company_id')
|
||
companyList.forEach((item, index) => {
|
||
let dom = ''
|
||
dom += `<span>${item.name}</span>`
|
||
let itemDom = document.createElement("div");
|
||
itemDom.setAttribute('class', `company_item`);
|
||
itemDom.setAttribute('id', `company_id_${index + 1}`);
|
||
itemDom.innerHTML = dom;
|
||
itemDom.addEventListener('click', () => {
|
||
if (company_id_num != index + 1) {
|
||
$(`#company_id_${index + 1}`).addClass('company_item_ac');
|
||
$(`#company_id_${company_id_num}`).removeClass('company_item_ac');
|
||
company_id_num = index + 1
|
||
}
|
||
handleSelect('company', index)
|
||
})
|
||
dom_nav1.appendChild(itemDom);
|
||
})
|
||
$(`#company_id_${company_id_num}`).addClass('company_item_ac');
|
||
|
||
// 发货状态选择
|
||
var dom_nav2 = document.getElementById('status_id')
|
||
statusList.forEach((item, index) => {
|
||
let dom = ''
|
||
dom += `<span>${item.name}</span>`
|
||
let itemDom = document.createElement("div");
|
||
itemDom.setAttribute('class', `company_item`);
|
||
itemDom.setAttribute('id', `status_id_${index + 1}`);
|
||
itemDom.innerHTML = dom;
|
||
itemDom.addEventListener('click', () => {
|
||
if (status_id_num != index + 1) {
|
||
$(`#status_id_${index + 1}`).addClass('company_item_ac');
|
||
$(`#status_id_${status_id_num}`).removeClass('company_item_ac');
|
||
status_id_num = index + 1
|
||
}
|
||
handleSelect('status', index)
|
||
})
|
||
dom_nav2.appendChild(itemDom);
|
||
})
|
||
$(`#status_id_${status_id_num}`).addClass('company_item_ac');
|
||
|
||
// 年份选择
|
||
var dom_nav3 = document.getElementById('year_id')
|
||
yearList.forEach((item, index) => {
|
||
let dom = ''
|
||
dom += `<span>${item.name}</span>`
|
||
let itemDom = document.createElement("div");
|
||
itemDom.setAttribute('class', `company_item`);
|
||
itemDom.setAttribute('id', `year_id_${index + 1}`);
|
||
itemDom.innerHTML = dom;
|
||
itemDom.addEventListener('click', () => {
|
||
if (year_id_num != index + 1) {
|
||
$(`#year_id_${index + 1}`).addClass('company_item_ac');
|
||
$(`#year_id_${year_id_num}`).removeClass('company_item_ac');
|
||
year_id_num = index + 1
|
||
}
|
||
handleSelect('year', index)
|
||
})
|
||
dom_nav3.appendChild(itemDom);
|
||
})
|
||
$(`#year_id_${year_id_num}`).addClass('company_item_ac');
|
||
|
||
// 月份选择
|
||
var dom_nav4 = document.getElementById('month_id')
|
||
monthList.forEach((item, index) => {
|
||
let dom = ''
|
||
dom += `<span>${item.name}</span>`
|
||
let itemDom = document.createElement("div");
|
||
itemDom.setAttribute('class', `company_item`);
|
||
itemDom.setAttribute('id', `month_id_${index + 1}`);
|
||
itemDom.innerHTML = dom;
|
||
itemDom.addEventListener('click', () => {
|
||
if (month_id_num != index + 1) {
|
||
$(`#month_id_${index + 1}`).addClass('company_item_ac');
|
||
$(`#month_id_${month_id_num}`).removeClass('company_item_ac');
|
||
month_id_num = index + 1
|
||
}
|
||
handleSelect('month', index)
|
||
})
|
||
dom_nav4.appendChild(itemDom);
|
||
})
|
||
$(`#month_id_${month_id_num}`).addClass('company_item_ac');
|
||
}
|
||
|
||
function handleSelect(type, index) {
|
||
if (type === 'company') {
|
||
// 判断是否点击默认选项，则清除该类型筛选条件
|
||
if (index == 0) {
|
||
// 判断是否已经有同类型筛选条件
|
||
for (let i = 0; i < selectList.length; i++) {
|
||
if (selectList[i].type == type) {
|
||
selectList.splice(i, 1)
|
||
}
|
||
}
|
||
$(`#select_${type}`).remove();
|
||
} else {
|
||
// 判断是否已经有同类型筛选条件
|
||
for (let i = 0; i < selectList.length; i++) {
|
||
if (selectList[i].type == type) {
|
||
selectList.splice(i, 1)
|
||
}
|
||
}
|
||
selectList.push({
|
||
name: companyList[index].name,
|
||
type
|
||
})
|
||
}
|
||
} else if (type === 'status') {
|
||
if (index == 0) {
|
||
for (let i = 0; i < selectList.length; i++) {
|
||
if (selectList[i].type == type) {
|
||
selectList.splice(i, 1)
|
||
}
|
||
}
|
||
$(`#select_${type}`).remove();
|
||
} else {
|
||
// 判断是否已经有同类型筛选条件
|
||
for (let i = 0; i < selectList.length; i++) {
|
||
if (selectList[i].type == type) {
|
||
selectList.splice(i, 1)
|
||
}
|
||
}
|
||
selectList.push({
|
||
name: statusList[index].name,
|
||
type
|
||
})
|
||
}
|
||
} else if (type === 'month') {
|
||
if (index == 0) {
|
||
for (let i = 0; i < selectList.length; i++) {
|
||
if (selectList[i].type == type) {
|
||
selectList.splice(i, 1)
|
||
}
|
||
}
|
||
$(`#select_${type}`).remove();
|
||
} else {
|
||
for (let i = 0; i < selectList.length; i++) {
|
||
if (selectList[i].type == type) {
|
||
selectList.splice(i, 1)
|
||
}
|
||
}
|
||
selectList.push({
|
||
name: monthList[index].name,
|
||
type
|
||
})
|
||
}
|
||
}
|
||
var dom_nav5 = document.getElementById('select_id')
|
||
$('#select_id').empty();
|
||
selectList.forEach((item, index) => {
|
||
let dom = ''
|
||
dom += `
|
||
<span>${item.name}</span>
|
||
<i class="layui-icon layui-icon-close"></i>
|
||
`
|
||
let itemDom = document.createElement("div");
|
||
itemDom.setAttribute('class', `company_item_select`);
|
||
itemDom.setAttribute('id', `select_${item.type}`);
|
||
itemDom.innerHTML = dom;
|
||
itemDom.addEventListener('click', () => {
|
||
$(`#select_${item.type}`).remove();
|
||
if (item.type == 'company') {
|
||
$(`#company_id_${company_id_num}`).removeClass('company_item_ac');
|
||
company_id_num = 1
|
||
$(`#company_id_${company_id_num}`).addClass('company_item_ac');
|
||
}
|
||
else if (item.type == 'status') {
|
||
$(`#status_id_${status_id_num}`).removeClass('company_item_ac');
|
||
status_id_num = 1
|
||
$(`#status_id_${status_id_num}`).addClass('company_item_ac');
|
||
}
|
||
else if (item.type == 'month') {
|
||
$(`#month_id_${month_id_num}`).removeClass('company_item_ac');
|
||
month_id_num = 1
|
||
$(`#month_id_${month_id_num}`).addClass('company_item_ac');
|
||
}
|
||
for (let i = 0; i < selectList.length; i++) {
|
||
if (selectList[i].type === item.type) {
|
||
selectList.splice(i, 1)
|
||
}
|
||
}
|
||
judgeSelectList()
|
||
})
|
||
dom_nav5.appendChild(itemDom);
|
||
})
|
||
judgeSelectList()
|
||
}
|
||
|
||
function judgeSelectList() {
|
||
console.log(selectList)
|
||
var select_dom = document.getElementById('select_id')
|
||
if (selectList.length > 0) {
|
||
if (!document.getElementById('clear_btn_id')) {
|
||
let clearDom = document.createElement("div")
|
||
clearDom.setAttribute('class', `clear_btn`);
|
||
clearDom.setAttribute('id', `clear_btn_id`);
|
||
clearDom.innerText = '清除筛选'
|
||
clearDom.addEventListener('click', function () {
|
||
$('#select_id').empty();
|
||
selectList = []
|
||
$(`#company_id_${company_id_num}`).removeClass('company_item_ac');
|
||
company_id_num = 1
|
||
$(`#company_id_${company_id_num}`).addClass('company_item_ac');
|
||
|
||
$(`#status_id_${status_id_num}`).removeClass('company_item_ac');
|
||
status_id_num = 1
|
||
$(`#status_id_${status_id_num}`).addClass('company_item_ac');
|
||
|
||
$(`#month_id_${month_id_num}`).removeClass('company_item_ac');
|
||
month_id_num = 1
|
||
$(`#month_id_${month_id_num}`).addClass('company_item_ac');
|
||
})
|
||
select_dom.appendChild(clearDom);
|
||
}
|
||
} else {
|
||
$(`#clear_btn_id`).remove();
|
||
}
|
||
}
|
||
|
||
</script>
|
||
<style>
|
||
.main_page_nav {
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.select_item {
|
||
width: 100%;
|
||
padding: 5px 0;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.select_item_left {
|
||
width: 80px;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.select_item_right {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
}
|
||
|
||
.clear_btn {
|
||
color: #409eff;
|
||
width: 80px;
|
||
margin-top: 8px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.company_item {
|
||
min-width: 110px;
|
||
height: 30px;
|
||
background-color: #f9f9f9;
|
||
margin-right: 10px;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
border-radius: 8px;
|
||
color: #999999;
|
||
border: 1px solid #e4e4e4;
|
||
cursor: pointer;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.company_item_ac {
|
||
background-color: #409eff;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.company_item_select {
|
||
min-width: 110px;
|
||
height: 30px;
|
||
margin-right: 10px;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
border-radius: 8px;
|
||
color: #999999;
|
||
border: 1px solid #409eff;
|
||
cursor: pointer;
|
||
margin-top: 10px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
}
|
||
|
||
.company_item_select>i {
|
||
color: #409eff;
|
||
font-size: 14px;
|
||
}
|
||
|
||
#paging {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
#retract {
|
||
color: #409eff;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 50px;
|
||
justify-content: space-between;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.hide_nav {
|
||
overflow: hidden;
|
||
height: 42px;
|
||
}
|
||
</style>
|
||
|
||
</html> |