491 lines
18 KiB
HTML
491 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-md12">
|
|
<form class="layui-form" action="">
|
|
<div class="layui-inline">
|
|
<div class="layui-input-block" style="margin-left: 0;">
|
|
<input type="text" name="" placeholder="输入类型" autocomplete="off" class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-inline">
|
|
<div class="layui-input-block" style="margin-left: 0;">
|
|
<input type="text" name="" placeholder="输入名称" autocomplete="off" class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-inline">
|
|
<div class="layui-input-block" style="margin-left: 0;">
|
|
<input type="text" name="" placeholder="输入规格型号" autocomplete="off" class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-inline">
|
|
<div class="layui-input-block" style="margin-left: 0;">
|
|
<button type="button" class="layui-btn layui-btn-normal" lay-submit
|
|
style="margin-left: 10px;">
|
|
<i class="layui-icon layui-icon-search"></i>查询
|
|
</button>
|
|
<button type="button" class="layui-btn" style="margin-left: 10px;">
|
|
<i class="layui-icon layui-icon-download-circle"></i> 导出
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-row" style="margin-top: 20px;">
|
|
<div class="layui-col-xs12 layui-col-sm12 layui-col-md12">
|
|
<table id="table_id" lay-filter="test"></table>
|
|
</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(['form', 'table'], function () {
|
|
var form = layui.form;
|
|
var table = layui.table;
|
|
|
|
//监听提交
|
|
form.on('submit', function (data) {
|
|
console.log(data)
|
|
});
|
|
|
|
table.render({
|
|
elem: '#table_id',
|
|
height: 312,
|
|
url: '../../demo/table/user/-page=1&limit=30.js', //数据接口
|
|
page: true, //开启分页
|
|
cols: [[
|
|
{ field: 'id', title: '序号', width: 80, sort: true, fixed: 'left' },
|
|
{ field: 'username', title: '需求计划编号', width: 200 },
|
|
{ field: 'sex', title: '工程名称', sort: true },
|
|
{ field: 'city', title: '发货状态', sort: true },
|
|
{ field: 'sign', title: '采购数量', sort: true },
|
|
{ field: 'experience', title: '利库数量', sort: true },
|
|
{ field: 'experience', title: '采购金额', sort: true },
|
|
{ field: 'experience', title: '供应商', sort: true },
|
|
{ field: 'experience', title: '付款状态', sort: true },
|
|
{ field: 'experience', title: '所属分公司', sort: true },
|
|
]]
|
|
});
|
|
});
|
|
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;
|
|
}
|
|
.layui-input-block {
|
|
margin-right: 10px;
|
|
min-width: 250px;
|
|
}
|
|
</style>
|
|
|
|
</html> |