<template>
<div>
<tab :tabList="tabList" :tabIndex="tabIndex" class="tab" @tabClick="toggleNav"></tab>
<div class="content">
<div class="system_node" :style="{ height: maxHeight }">
<Spin size="large" fix v-if="!treeData"></Spin>
<div class="wrap">
<div class="search flex">
<Input search placeholder="請輸入分類名稱或分類號" v-model="treeVal" @on-search="searchTreeData"></Input>
</div>
<div class="tree" v-if="treeData">
<Tree :data="treeData" :show-checkbox="false" :render="renderContent" @on-select-change="treeChange"></Tree>
</div>
</div>
</div>
<div class="data" ref="data">
<div class="query_module">
<div class="query_title flex">
<span>查詢標(biāo)準(zhǔn)</span>
<Input search placeholder="請輸入標(biāo)準(zhǔn)號或標(biāo)準(zhǔn)名稱關(guān)鍵字進(jìn)行搜索" style="width: 310px" v-model="searchVal" @on-search="conditionData"></Input>
</div>
<div class="query_list">
<div style="position: relative;height: 150px;" v-if="!queryList">
<Spin size="large" fix></Spin>
</div>
<ul v-if="queryList">
<li v-for="(item, index) in queryList" :key="index">
<div class="title">{{ item.label }}:</div>
<div class="list_wrap flex" :style="{ height: item.isOpen ? item.openH : item.closeH }" ref="wrap">
<div v-for="(itemList, indexList) in item.list" :key="indexList" :class="{ active: itemList.selected }" @click="selectedCondition(item, itemList, index, indexList)">
{{ itemList.dictLabel }}
</div>
</div>
<div class="more" @click="fold(index)" v-if="item.openH != '30px'">
<span>{{ item.isOpen ? "收起" : "展開" }}</span>
<i class="iconfont icon-shouqi" :style="{
transform: item.isOpen
? 'rotate(0deg)'
: 'rotate(-180deg)',
}"></i>
</div>
</li>
</ul>
<div class="searching_condition flex" v-if="queryList">
<div class="title">檢索條件:</div>
<div class="list">
<div class="item" v-for="(item, index) in conditionList" :key="index">
<span>{{ item.dictLabel }}</span>
<i class="iconfont icon-cuowu" @click="clearCondition(item, index)"></i>
</div>
<div class="reset_condition" v-if="conditionList.length != 0" @click="resetCondition">
重置條件
</div>
</div>
</div>
</div>
</div>
<div class="standard_list_wrap" ref="listWrap">
<Spin size="large" fix v-if="tableLoading"></Spin>
<!-- 排序 -->
<div class="sort_module flex">
<sort v-for="(item, index) in sortList" :sortType="item.sortType" :text="item.text" :key="item.key" @sort="sort(item.key, index)"></sort>
</div>
<!-- 排序下的功能鍵 -->
<div class="table_am flex">
<div class="selected_num">
(<span style="margin: 0px 3px;">已選<span style="color: #3388ff;margin: 0px 3px;">{{
selectedNum
}}</span>條</span>)
</div>
<div class="am flex" @click="clearSelected">
<i class="iconfont icon-lajitong"></i>
<span>清除已選</span>
</div>
<div class="am flex" @click="jumpzstp">
<i class="iconfont icon-chakan"></i>
<span>查看標(biāo)準(zhǔn)關(guān)系圖譜</span>
</div>
<!-- <div class="am flex" @click="addSystem">-->
<!-- <i class="iconfont icon-shujucaiji-"></i>-->
<!-- <span>納入自定義體系</span>-->
<!-- </div>-->
<div class="flex" style="flex: 1;margin-right: 0px;justify-content: flex-end;">
找到<span style="margin: 0px 3px;color: #3388ff;">{{
!dataSource ? 0 : dataSource.length
}}</span>條結(jié)果
</div>
</div>
<!-- 表格數(shù)據(jù) -->
<div class="data_list">
<standard-list :columns="columns" :dataSource="dataSource ? dataSource : []" :total="total" @change="pageChange" @table_change="table_change" ref="table"></standard-list>
</div>
</div>
</div>
</div>
<!-- 創(chuàng)建體系 -->
<create-system ref="createSystem"></create-system>
</div>
</template>
<script>
import tab from '@/components/tab'; //頂部消息
import sort from '@/components/sort'; //右側(cè)篩選
import { construct } from '@aximario/json-tree';
import standardList from '@/components/standardList'; //表格+頁碼
import elementResizeDetectorMaker from 'element-resize-detector'; //查看更多
import {
gjbSearchCondition, //智慧標(biāo)準(zhǔn)體系頁—832A和832搜索條件
gjbSystemList, // 智慧標(biāo)準(zhǔn)體系頁—832A和832體系列表
mirrorTree, //智慧標(biāo)準(zhǔn)體系頁—832和832a標(biāo)準(zhǔn)分類樹
searchCondition, // 智慧標(biāo)準(zhǔn)體系頁—集團(tuán)標(biāo)準(zhǔn)體系和國軍標(biāo)搜索條件
standardTree, //智慧標(biāo)準(zhǔn)體系頁—國軍標(biāo)和國家標(biāo)準(zhǔn)體系查詢樹
systemList, // 智慧標(biāo)準(zhǔn)體系頁—集團(tuán)標(biāo)準(zhǔn)體系和國軍標(biāo)體系列表
} from '@/libs/api'; //獲取接口
import createSystem from './components/createSystem'; //創(chuàng)建新體系
export default {
name: 'standardSystem',
components: {
tab,
sort,
standardList,
createSystem,
},
data() {
return {
// 頂部列表信息
tabList: [
{ text: '集團(tuán)標(biāo)準(zhǔn)體系', treeApi: 'standard', classType: 1 },
{ text: '國軍標(biāo)體系', treeApi: 'standard', classType: 2 },
{ text: '832A', treeApi: 'mirror', classType: 3 },
{ text: '832', treeApi: 'mirror', classType: 4 },
],
tabIndex: 0, //默認(rèn)下標(biāo)
treeData: null, //左側(cè)樹的數(shù)據(jù)
queryList: null, //查詢列表
conditionList: [], //條件列表
maxHeight: null, //最大高度
erd: elementResizeDetectorMaker(), //查看更多
sortList: [
//排序列表
{ text: '標(biāo)準(zhǔn)號', key: 'std_no' },
{ text: '標(biāo)準(zhǔn)名稱', key: 'name_cn' },
{ text: '發(fā)布日期', key: 'pub_date' },
{ text: '實(shí)施日期', key: 'implement_date' },
],
treeIds: [], //選擇的樹的ID
requiredQuery: {
//查詢必選項(xiàng)
fieldIdStr: null,
hTypeStr: null,
levelIdStr: null,
productTypeStr: null,
armyFlagStr: null,
pageSize: 10,
pageNum: 1,
},
columns: [], //表頭
dataSource: null, //數(shù)據(jù)
total: 0, //表格的頁碼
selectedNum: 0, //表格選中的數(shù)據(jù)的條數(shù)
treeVal: '', // 左側(cè)樹的搜索關(guān)鍵字
searchVal: '', //搜索條件
tableLoading: true, //loading是否出現(xiàn)
};
},
mounted() {
// 獲取表頭
this.columns = this.columnsData();
const { index, id } = this.refs.listWrap.clientWidth;
let columns = [
{
type: 'selection',
width: 40,
align: 'center',
},
{
title: '分類編號',
key: 'sysCode',
align: 'center',
},
{
title: '分類名稱',
key: 'sysName',
align: 'center',
},
{
title: '標(biāo)準(zhǔn)編號',
key: 'stdNo',
align: 'center',
resizable: true,
render: (h, params) => {
return h('div', [
h(
'div',
{
class: 'jumpKey',
style: {
cursor: 'pointer',
// color: "#3388ff",
},
on: {
click: () => {
this.toBZDetail(params);
},
},
},
params.row.stdNo
),
]);
},
},
{
title: '標(biāo)準(zhǔn)名稱',
key: 'nameCn',
align: 'center',
resizable: true,
render: (h, params) => {
return h('div', [
h(
'span',
{
class: 'jumpKey',
style: {
cursor: 'pointer',
// color: "#3388ff",
},
on: {
click: () => {
this.toBZDetail(params);
},
},
},
params.row.nameCn
),
]);
},
},
{
title: '標(biāo)準(zhǔn)級別',
key: 'hType',
align: 'center',
resizable: true,
},
{
title: '狀態(tài)',
key: 'stdStateStr',
align: 'center',
render: function(h, params) {
let className = null;
let { stdStateStr } = params.row;
if (stdStateStr == '計劃') {
className = 'plan';
} else if (stdStateStr == '有效') {
className = 'valid';
} else {
className = 'abolish';
}
return h(
'div',
{
class: ${className} stdStatus
,
},
stdStateStr
);
},
},
{
title: '發(fā)布日期',
key: 'pubDate',
align: 'center',
},
{
title: '操作',
key: 'action',
align: 'center',
render: (h, params) => {
return h(
'div',
{
class: 'actionWrap',
},
[
h('i', {
class: 'iconfont icon-shoucang',
style: {
marginRight: '12px',
},
on: {
click: () => {
this.show(params.index);
},
},
}),
h('i', {
class: 'iconfont icon-icon_zhishiku',
on: {
click: () => {
this.show(params.index);
},
},
}),
]
);
},
},
];
columns.forEach(item => {
if (item.key == 'nameCn') {
item.width = w * 0.2;
}
if (item.key == 'stdNo') {
item.width = w * 0.18;
}
if (item.key == 'hType') {
item.width = w * 0.18;
}
});
return columns;
},
// 跳轉(zhuǎn)到詳情頁
toBZDetail(values) {
this.forceUpdate();
},
// 點(diǎn)擊數(shù)獲取父節(jié)點(diǎn)
findParentNode(list, id) {
const mofifNode = (data, cid) => {
for (let i = 0; i < data.length; i++) {
let item = data[i];
if (item.id == id) {
item.selected = true;
}
if (item.id === cid) {
item.expand = true;
mofifNode(list, item.pId);
} else {
if (item.children) {
mofifNode(item.children, cid);
}
}
}
};
mofifNode(list, id);
},
// findParentNode(data, id) {
// const field = data.find((item) => item.id === id);
// data.forEach(item => {
// if (item.id == id) {
// item.selected = true;
// }
// })
// if (field == null && field == undefined) {
// return false;
// }
// let parentId = field.pId;
// let cache = [field];
// //中條件
// while (parentId !== 0) {
// // 首先找到當(dāng)前 ParentId
// const f = data.find((item) => item.id == parentId);
// f.expand = true;
// cache.push(f);
// parentId = f.pId;
// }
// },
//查找所有的子節(jié)點(diǎn)
findChildIds(data, id, Arr) {
for (let i = 0; i < data.length; i++) {
let len = data[i].children && data[i].children.length > 0;
let wid = id;
if (data[i].pId == id) {
Arr.push(data[i].id);
wid = data[i].id;
}
if (len) {
this.findChildIds(data[i].children, wid, Arr);
}
}
return Arr;
},
// 獲取體系樹
sysManagetreeData(id) {
const { treeApi, classType } = this.tabList[this.tabIndex];
const url = treeApi == 'mirror' ? mirrorTree : standardTree;
this.Message.error('獲取體系樹異常!');
}
}
);
},
// 獲取搜索條件
listDictData() {
const { treeApi, classType } = this.tabList[this.tabIndex];
const url = treeApi == 'mirror' ? gjbSearchCondition : searchCondition;
const allSysIds = this.treeIds.join(',');
this.qs.stringify({ allSysIds })).then(res => {
if (res.data.code != 500) {
let queryArr = [];
let key = [
'ARMY_PEOPLE',
'PRODUCT_LEVEL',
'STD_FIELD',
'STD_LEVEL',
'STD_RANK',
];
key.forEach(item => {
let value = res.data[item];
if (value && value.length != 0) {
queryArr.push({
key: item,
label: this.listDictText(item).text, // label 展示的漢字
queryKey: this.listDictText(item).queryKey, // queryKey 點(diǎn)擊篩選條件傳給服務(wù)端的key值
list: value,
isOpen: false, // 是否展開
});
}
});
this.queryList = queryArr;
this.listData();
this.refs.wrap;
let _list = this.queryList;
for (let i = 0; i < _dom.length; i++) {
_list[i] = {
..._list[i],
openH: ${_dom[i].clientHeight}px
,
closeH: '25px',
};
}
this.queryList = _list;
this.Message.error('獲取查詢條件異常!');
}
});
},
// 獲取列表
listData(isPage = false) {
if (!isPage) {
this.requiredQuery.pageNum = 1;
this.refs.data);
const sortKey = this.sortList.find(item => item.sortType);
const allSysIds = this.treeIds.join(',');
const filterConditionArr = this.filterConditionArr();
const parameter = {
...this.requiredQuery,
...filterConditionArr,
orderByColumn: sortKey ? sortKey.key : null,
isAsc: sortKey ? sortKey.sortType : null,
allSysIds,
};
const { treeApi, classType } = this.tabList[this.tabIndex];
const url = treeApi == 'mirror' ? gjbSystemList : systemList;
this.qs.stringify(parameter)).then(res => {
const { data } = res;
if (data.code != 500) {
const _this = this;
_this.tableLoading = false;
_this.dataSource = data.rows;
_this.total = data.total;
this.erd.listenTo(this.{element.clientHeight}px`;
});
} else {
this.refs.table.selectAll(false);
},
// 頁碼改變
pageChange(page) {
this.selectedNum = 0;
this.requiredQuery.pageNum = page;
this.tableLoading = true;
this.listData(true);
},
// 接收表格改變數(shù)據(jù)
table_change(data) {
this.selectedNum = data.length;
},
// 折疊
fold(index) {
const { isOpen } = this.queryList[index];
this.queryList[index].isOpen = !isOpen;
this.refs.createSystem.showModal();
},
// 跳轉(zhuǎn)
jumpzstp() {
const selectData = this.Message.warning('請選擇至少一條標(biāo)準(zhǔn)');
return false;
}
const stdNos = selectData.map(item => item.stdNo).join(',');
this.router.push('/standard/standardAtlas');
},
},
// 折疊
beforeDestroy() {
this.erd.uninstall(this.$refs.data);
},
};
</script>
<style scoped lang="less">
@import '../../styles/less/standardModule';
/deep/ .ivu-table-cell {
padding-right: 10px;
padding-left: 10px;
}
.flex {
display: flex;
}
.tab {
margin-bottom: 20px;
/deep/ .active:after {
bottom: -1px;
}
}
.content {
position: relative;
overflow: hidden;
min-height: calc(100vh - 250px);
.system_node {
width: 300px;
min-height: calc(100vh - 250px);
background: white;
overflow: auto;
float: left;
position: relative;
.wrap {
padding: 0px 16px;
margin-bottom: 20px;
}
.search {
margin-top: 20px;
.system_btn {
margin-left: 6px;
}
}
.tree {
overflow: auto;
}
}
.data {
float: left;
width: calc(100% - 320px);
min-height: calc(100vh - 250px);
margin-left: 20px;
overflow: auto;
display: flex;
flex-direction: column;
> .query_module {
padding: 0px 20px 20px 20px;
background: white;
.query_title {
height: 50px;
align-items: center;
border-bottom: 1px solid #efefef;
span {
flex: 1;
font-size: 15px;
font-weight: bold;
}
}
.query_list {
margin-top: 12px;
overflow: hidden;
}
.query_list > ul {
overflow: hidden;
}
.query_list > ul > li {
display: flex;
align-items: flex-start;
margin-bottom: 8px;
&:last-of-type {
margin-bottom: 0px;
}
.title {
font-size: 14px;
font-weight: bold;
width: 70px;
line-height: 25px;
}
.list_wrap {
flex: 1;
flex-wrap: wrap;
font-size: 14px;
margin-right: 12px;
transition: 0.3s height ease-in-out;
> div {
line-height: 25px;
margin-right: 20px;
color: #60636f;
margin-bottom: 5px;
cursor: pointer;
}
.active {
color: #3388ff;
}
}
.more {
cursor: pointer;
font-size: 14px;
display: flex;
align-items: center;
span {
margin-right: 2px;
}
i {
transition: 0.5s;
}
}
}
.searching_condition {
align-items: flex-start;
margin-top: 8px;
font-size: 14px;
.title {
font-weight: bold;
width: 70px;
line-height: 25px;
}
.list {
flex-wrap: wrap;
display: flex;
flex: 1;
.item {
line-height: 23px;
border-radius: 3px;
border: solid 1px #3388ff;
align-items: center;
padding: 0px 6px;
display: flex;
color: #3388ff;
margin-right: 20px;
margin-bottom: 7px;
i {
margin-top: 1px;
margin-left: 6px;
cursor: pointer;
}
}
}
.reset_condition {
color: #3388ff;
cursor: pointer;
height: 25px;
line-height: 25px;
}
}
}
> .standard_list_wrap {
margin-top: 20px;
background: white;
padding: 0px 20px;
flex: 1;
position: relative;
.table_am {
.am {
cursor: pointer;
}
}
.sort_module {
padding: 12px 0px;
border-bottom: 1px solid #efefef;
/deep/ .sort {
padding: 0px 15px;
position: relative;
}
/deep/ .sort:before {
position: absolute;
width: 1px;
height: 18px;
content: '';
background: #dddddd;
right: 0px;
top: 2px;
}
/deep/ .sort:first-of-type {
padding-left: 0px;
}
}
}
}
}
/deep/ .jumpKey:hover {
color: #3388ff;
}
/deep/ .stdStatus {
width: 42px;
height: 22px;
text-align: center;
line-height: 23px;
margin: 0 auto;
border-radius: 3px;
}
/deep/ .valid {
background: rgba(255, 120, 4, 0.15);
color: #ff7804;
}
/deep/ .plan {
background: rgba(51, 136, 255, 0.15);
color: #3388ff;
}
/deep/ .abolish {
background: rgba(121, 121, 121, 0.15);
color: #797979;
}
</style>