565 lines
21 KiB
Vue
565 lines
21 KiB
Vue
<!-- 搜索中心 -->
|
||
<template>
|
||
<div class="search-center">
|
||
<div class="main">
|
||
<section class="home-section">
|
||
<!-- 搜索框 -->
|
||
<div class="search-box">
|
||
<div class="search-option">
|
||
<el-select v-model="searchInfoEO.selectKey" @on-change="selectKeyChange">
|
||
<el-option v-for="opt in fuzzySearchOption" :key="opt.value" :value="opt.value" :title="opt.label">{{ opt.label }}</el-option>
|
||
</el-select>
|
||
</div>
|
||
<div class="search-input">
|
||
<el-input type="text" v-model="searchInfoEO.selectValue" autofocus id="search-input" :placeholder="$t('m.pleaseEnterTheQueryInformation')" clearable v-if="!searchinputflag"></el-input>
|
||
<el-date-picker type="daterange" v-model="dateRangeData" placement="bottom-end" :placeholder="$t('m.pleaseSelectTheDate')" style="width: 260px;margin: 11px" :editable="false" v-if="searchinputflag"></el-date-picker>
|
||
</div>
|
||
<div class="search-btn" @click="fuzzySearch">
|
||
<i class="el-icon-search" :size="34" color="rgba(0,0,0,.8)" />
|
||
</div>
|
||
</div>
|
||
<nav class="section-nav">
|
||
<div class="nav-content">
|
||
<div class="nav-content-left">
|
||
<div style="width: auto;height: 31px" ><h5 style="display: inline" v-if="seniorShowFlag"><span>{{this.$t('m.standardAdvancedSearch')}}</span><small><a v-text="kindtext" @click="seniorSearch"></a></small></h5>
|
||
<el-button type="info" style="float: right;padding-bottom: 2px" @click="exportSelectFlag">{{this.$t('m.export')}}</el-button>
|
||
</div>
|
||
<div class="box-line"></div>
|
||
<!-- 国内外标准法规库 -->
|
||
<div class="searchbox" v-if="seniorSearchFlag && seniorShowFlag" >
|
||
<table-tools-bar>
|
||
<div slot="left">
|
||
<label-multi-select v-model="searchInfoEO.nature" :options="standNatureOptions" :placeholder="$t('m.findByStandardNature')" :clearable=false label="标准性质" />
|
||
<label-multi-select v-model="searchInfoEO.country" :options="countryOptions" :placeholder="$t('m.findByCountryAndRegion')" :clearable=false label="国家/地区" />
|
||
<label-multi-select v-model="searchInfoEO.standSort" :options="standSortOptions" :placeholder="$t('m.searchByStandardCategory')" :clearable=false label="标准类别"/>
|
||
<br><br>
|
||
<label-input v-model="searchInfoEO.numberShow" :placeholder="$t('m.searchByNumber')" clearable :label="this.$t('m.standardOrFileNo')" class="my-input"/>
|
||
<label-input v-model="searchInfoEO.nameShow" :placeholder="$t('m.searchBytName')" clearable :label="this.$t('m.name')" class="my-input" />
|
||
<label-multi-select v-model="searchInfoEO.applyArctic" :options="applyArcticOptions" :placeholder="$t('m.searchByProductCategory')" :clearable=false :label="this.$t('m.productCategory')" />
|
||
<br><br>
|
||
<label-multi-select v-model="searchInfoEO.applyAuth" :options="applyAuthOptions" :placeholder="$t('m.searchByAuthenticationType')" :clearable=false :label="this.$t('m.authenticationType')"/>
|
||
<label-multi-select v-model="searchInfoEO.category" :options="categoryOptions" :placeholder="$t('m.searchByCategory')" :clearable=false :label="this.$t('m.category')"/>
|
||
<label-multi-select v-model="searchInfoEO.energyKind" :options="energyKindOptions" :placeholder="$t('m.searchByEnergyType')" :clearable=false :label="this.$t('m.energyType')"/>
|
||
<br><br>
|
||
<label-multi-select v-model="searchInfoEO.adoptExtent" :options="adoptExtentOptions" :placeholder="$t('m.searchAccordingToTheDegreeOfBidding')" :clearable=false :label="this.$t('m.degreeOfBidding')" />
|
||
<label-multi-select v-model="searchInfoEO.standState" :options="standStateOptions" :placeholder="$t('m.lookupByStandardStatus')" :clearable=false :label="this.$t('m.standardState')"/>
|
||
<label-select v-model="searchInfoEO.issueTime" :options="issueTimeOptions" :placeholder="$t('m.searchByReleaseDate')" clearable :label="this.$t('m.releaseDate')" />
|
||
<br><br>
|
||
<el-button type="primary" @click="searchSeniorClick">{{$t('m.advancedSearch')}}</el-button>
|
||
<el-button type="primary" @click="clearAllSearch">{{$t('m.clearQuery')}}</el-button>
|
||
</div>
|
||
</table-tools-bar>
|
||
<div class="searchbox-item" v-for="(item, key) in conditionShowlist" :key="key">
|
||
<div class="l" >{{ item.key }}<i></i></div>
|
||
<div class="c" >
|
||
<div class="filter_option" style="padding-right:20px;">
|
||
<span v-for="(spanitem, index) in item.value" :title="spanitem.label" :value="spanitem.value" :key="index">{{ spanitem.label}}(<font style="color: red">{{ spanitem.number}}</font>)</span>
|
||
</div>
|
||
</div>
|
||
<!--<a href="javascript:;" class="r" id="searchitem_G_ICS_NAME_r"><span class="text">展开</span></a>-->
|
||
</div>
|
||
</div>
|
||
<!-- 待办任务 -->
|
||
<div class="nav-left-bottom" v-if="nodataFlag">
|
||
<!-- no-data-text="{{$t('m.noQueryResult')}}"-->
|
||
<el-table v-if="standTableShowFlag" border ref="" :columns="domesticStandColumn" :data="selectinfoList" no-data-text="$t('m.noQueryResult')"></el-table>
|
||
<el-table v-if="!standTableShowFlag" border ref="" :columns="dynamicTableColumn" :data="dynamicTableList" no-data-text="$t('m.noQueryResult')"></el-table>
|
||
<!-- -->
|
||
<loading :loading="loading">{{$t('m.getting')}}</loading>
|
||
<pagination :page="searchInfoEO.page" :total="total" @pageChange="pageChange" @pageSizeChange="pageSizeChange"></pagination>
|
||
</div>
|
||
<div class="nav-left-bottom noData" v-else>
|
||
<div class="nav-left-bottom-no-data-content">
|
||
<span>{{$t('m.noQueryResult')}}</span>
|
||
<div class="button-wrapper">
|
||
<el-button type="primary" ghost @click="applyPurchase">{{$t('m.applyForPurchase')}}</el-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 检索历史，浏览记录 -->
|
||
<div class="searchbox" >
|
||
<div class="nav-search-recommend" id="">
|
||
<h5>{{$t('m.recommendItToMe')}}</h5>
|
||
<span class="more"></span>
|
||
<ul>
|
||
<li v-for="(item, index) in recommendList" :key="index">
|
||
<div class="res-type-content">
|
||
<span :title="item.numberShow" @click="showRecommendDetials(item)">{{index+1}}- {{item.numberShow }} {{item.nameShow}}</span>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="nav-search-history" id="informationCenter">
|
||
<h5>{{$t('m.searchHistory')}}</h5>
|
||
<span class="more" @click="deleteSearchHistory(1)" >{{$t('m.clearQuery')}}</span>
|
||
<ul>
|
||
<li v-for="(item, index) in searchHistotyData" :key="index">
|
||
<div class="res-type-content">
|
||
<span :title="item.searchContent">{{index+1}}- {{ item.searchContent }}</span>
|
||
</div>
|
||
<i class="el-icon-close" size="24" @click="deleteSearchHistory(2,item)"/>
|
||
<!--<Button class="time" icon="ios-close"></Button>-->
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</section>
|
||
<!--分享模态框-->
|
||
<el-modal title="this.$t('m.pleaseSelectThePersonYouWantToShare')" v-model="shareStandardModal" :closable="false" width="360">
|
||
<el-form>
|
||
<!--multiple-->
|
||
<el-select v-model="shareStandardSelect" style="width:200px" multiple>
|
||
<el-option v-for="shareUser in shareUserInfoList" :value="shareUser.usid" :key="shareUser.usid">
|
||
{{ shareUser.account }}
|
||
</el-option>
|
||
</el-select>
|
||
</el-form>
|
||
<div slot="footer">
|
||
<el-button type="text" size="large" @click="shareStandardModal=false">{{$t('m.cancel')}}</el-button>
|
||
<el-button type="primary" size="large" @click="sureShareStandardLaws">{{$t('m.sure')}}</el-button>
|
||
</div>
|
||
</el-modal>
|
||
|
||
<!-- 分享 -->
|
||
<el-radio title="this.$t('m.sharingStandard')" v-model="drawerModal" width="300" :styles="drawerModalstyles" @on-close="treeCancel">
|
||
<dept-tree treeDivId="drawerModalTree"
|
||
ref="drawerModalTree"
|
||
@treeClick="selcetTree"
|
||
allDept
|
||
showUser
|
||
:editable="false"
|
||
style="padding: 0 15px">
|
||
</dept-tree>
|
||
<div class="demo-drawer-footer">
|
||
<el-button style="margin-right: 8px" @click="treeCancel">{{$t('m.cancel')}}</el-button>
|
||
<el-button type="primary" @click="sureShareStandardLaws">{{$t('m.sure')}}</el-button>
|
||
</div>
|
||
</el-radio>
|
||
|
||
<!-- 导出文件改名字模态框 -->
|
||
<el-modal v-model="exportModelFlag" title="this.$t('m.exportFile')" width="700" :closable="false">
|
||
<label-input v-model="exportName" :placeholder="$t('m.pleaseEnterThNameOfTheExportFile')" clearable :label="this.$t('m.exportName')"/>
|
||
<div slot="footer">
|
||
<el-button size="small" @click="exportTestItem">{{$t('m.sure')}}</el-button>
|
||
<el-button size="small" @click="cancal">{{$t('m.cancel')}}</el-button>
|
||
</div>
|
||
</el-modal>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script src="./js/searchCenter.js"></script>
|
||
|
||
<style lang="less">
|
||
@import '~@/assets/styles/style';
|
||
@import '~@/assets/styles/mixins';
|
||
.search-center{
|
||
.main {
|
||
overflow-y: auto;
|
||
.home-section{
|
||
background: @homeSectionBgColor;
|
||
padding-top: 1.6%;
|
||
min-height: 92.2%;
|
||
.search-box{
|
||
width: 57.95%;
|
||
height: 42px;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
margin-bottom: 1.65%;
|
||
&>div{
|
||
height: 100%;
|
||
}
|
||
.search-option{
|
||
flex: 0 0 13.63%;
|
||
color: #515151;
|
||
font-size: 16px;
|
||
background: rgba(255,255,255,.8);
|
||
border: 1px solid #B3C3C7;
|
||
.flex-center;
|
||
.ivu-select{
|
||
height: 100%;
|
||
background: transparent;
|
||
border: none;
|
||
.ivu-select-selection{
|
||
height: 100%;
|
||
border: none;
|
||
box-shadow: none;
|
||
& > div{
|
||
height: 100%;
|
||
.flex();
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.search-input{
|
||
flex: 0 0 55%;
|
||
background: rgba(255,255,255,.8);
|
||
border: 1px solid #B3C3C7;
|
||
border-left: transparent;
|
||
.ivu-input-wrapper{
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
.ivu-input{
|
||
height: 100%;
|
||
background: transparent;
|
||
border: none !important;
|
||
box-shadow: none;
|
||
padding: 0 20px;
|
||
font-size: 16px;
|
||
}
|
||
}
|
||
}
|
||
.search-btn{
|
||
flex: 0 0 13.63%;
|
||
background: @homeHeaderBgColor;
|
||
cursor: pointer;
|
||
&:hover{
|
||
opacity: .8;
|
||
}
|
||
.flex-center;
|
||
.ivu-icon{
|
||
color: #FFF !important;
|
||
}
|
||
}
|
||
.search-text{
|
||
.flex-center;
|
||
color: #2A639B;
|
||
font-weight: bold;
|
||
font-size: 16px;
|
||
flex: 0 0 calc(~'100% - 82.26%');
|
||
position: relative;
|
||
top: 5px;
|
||
}
|
||
}
|
||
.search-type{
|
||
width: 30.95%;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
margin-bottom: 1.65%;
|
||
label{
|
||
width: 95px;
|
||
text-align: center;
|
||
}
|
||
}
|
||
.section-nav{
|
||
width: 90%;
|
||
margin: 0 auto;
|
||
max-width: 1600px;
|
||
.nav-content{
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
.nav-content-left {
|
||
width: 100%;
|
||
font-size: 17px;
|
||
h5{
|
||
font-size: 18px;
|
||
line-height: 30px;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
user-select: none;
|
||
font-weight: 600;
|
||
margin-top: 10px;
|
||
}
|
||
.nav-left-top{
|
||
width: 100%;
|
||
height: 30%;
|
||
}
|
||
.nav-left-bottom{
|
||
.ivu-table-tip{
|
||
table{
|
||
/*min-height: 600px;*/
|
||
}
|
||
}
|
||
.pagination{
|
||
position: inherit;
|
||
}
|
||
&.noData{
|
||
min-height: 300px;
|
||
.flex();
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #FFF;
|
||
.nav-left-bottom-no-data-content{
|
||
&>span{
|
||
display: block;
|
||
color: #DDD;
|
||
}
|
||
.button-wrapper{
|
||
.flex();
|
||
justify-content: center;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
small{
|
||
display: inline;
|
||
margin-left: 10px;
|
||
cursor: pointer;
|
||
font-size: 75%;
|
||
font-weight: lighter
|
||
}
|
||
.nav-search-history{
|
||
width: 50%;
|
||
position: absolute;
|
||
top: auto;
|
||
right: 0;
|
||
.res-type-content{
|
||
width: calc(~'100% - 80px');
|
||
.flex();
|
||
align-items: center;
|
||
&>a{
|
||
padding-left: 4px;
|
||
flex: 1;
|
||
.ellipsis();
|
||
}
|
||
}
|
||
h5{
|
||
font-size: 14px;
|
||
line-height: 30px;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
user-select: none;
|
||
font-weight: 600;
|
||
}
|
||
ul{
|
||
width: 100%;
|
||
height: 85%;
|
||
overflow-y: auto;
|
||
li{
|
||
padding: 0 0.1rem;
|
||
margin-bottom: 0.15rem;
|
||
position: relative;
|
||
display: flex;
|
||
display: -ms-flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
&:last-child{
|
||
margin-bottom: 0;
|
||
}
|
||
.type{
|
||
position: relative;
|
||
display: inline-block;
|
||
padding-right: 7.5px;
|
||
&::before{
|
||
content: '';
|
||
display: inline-block;
|
||
width: 2px;
|
||
height: 80%;
|
||
position: absolute;
|
||
top: 7.5%;
|
||
right: 0;
|
||
background: #AAA;
|
||
}
|
||
}
|
||
.time{
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0.1rem;
|
||
}
|
||
a{
|
||
color: #333;
|
||
display: inline-block;
|
||
}
|
||
&:hover{
|
||
a{
|
||
color: #12508E;
|
||
font-weight: bold;
|
||
text-decoration: underline;
|
||
}
|
||
.time{
|
||
color: #12508E;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.more{
|
||
cursor: pointer;
|
||
color: #12508E;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
z-index: 100;
|
||
padding: 5px 10px;
|
||
font-size: 10px;
|
||
&:hover{
|
||
color: #FFF;
|
||
background: #12508E;
|
||
transition: all .2s linear;
|
||
}
|
||
}
|
||
}
|
||
.nav-search-recommend{
|
||
width: 50%;
|
||
position: absolute;
|
||
top: auto;
|
||
left: 0;
|
||
.res-type-content{
|
||
width: calc(~'100% - 80px');
|
||
.flex();
|
||
align-items: center;
|
||
&>a{
|
||
padding-left: 4px;
|
||
flex: 1;
|
||
.ellipsis();
|
||
}
|
||
}
|
||
h5{
|
||
font-size: 14px;
|
||
line-height: 30px;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
user-select: none;
|
||
font-weight: 600;
|
||
}
|
||
ul{
|
||
width: 100%;
|
||
height: 85%;
|
||
overflow-y: auto;
|
||
li{
|
||
padding: 0 0.1rem;
|
||
margin-bottom: 0.15rem;
|
||
position: relative;
|
||
cursor: pointer;
|
||
display: flex;
|
||
display: -ms-flex;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
&:last-child{
|
||
margin-bottom: 0;
|
||
}
|
||
.type{
|
||
position: relative;
|
||
display: inline-block;
|
||
padding-right: 7.5px;
|
||
&::before{
|
||
content: '';
|
||
display: inline-block;
|
||
width: 2px;
|
||
height: 80%;
|
||
position: absolute;
|
||
top: 7.5%;
|
||
right: 0;
|
||
background: #AAA;
|
||
}
|
||
}
|
||
.time{
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0.1rem;
|
||
}
|
||
a{
|
||
color: #333;
|
||
display: inline-block;
|
||
}
|
||
&:hover{
|
||
a{
|
||
color: #12508E;
|
||
font-weight: bold;
|
||
text-decoration: underline;
|
||
}
|
||
.time{
|
||
color: #12508E;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.more{
|
||
cursor: pointer;
|
||
color: #12508E;
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
z-index: 100;
|
||
padding: 5px 10px;
|
||
font-size: 10px;
|
||
&:hover{
|
||
color: #FFF;
|
||
background: #12508E;
|
||
transition: all .2s linear;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
#informationCenter{color: #333;}
|
||
}
|
||
}
|
||
}
|
||
.searchbox {
|
||
border: 1px solid #e3e3e3;
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
overflow: hidden;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
user-select: none;
|
||
}
|
||
.searchbox-item {
|
||
border-bottom: 1px dashed #e3e3e3;
|
||
padding-bottom: 8px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
color: black;
|
||
}
|
||
.searchbox .l {
|
||
box-sizing: content-box;
|
||
padding: 0;
|
||
text-align: center;
|
||
background: none;
|
||
color: #333;
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 8px;
|
||
width: 72px;
|
||
line-height: 22px;
|
||
}
|
||
.searchbox .c {
|
||
width: auto !important;
|
||
padding-left: 90px;
|
||
padding-right: 70px;
|
||
overflow: hidden;
|
||
font-size: 14px;
|
||
}
|
||
.searchbox .c .control-type {
|
||
color: #5CB85C;
|
||
width: 44px;
|
||
height: 30px;
|
||
padding-top: 10px;
|
||
float: left;
|
||
}
|
||
.searchbox-item .selected {
|
||
background: #18a689;
|
||
color: #fff;
|
||
}
|
||
.filter_option span {
|
||
display: inline-block;
|
||
line-height: 22px;
|
||
padding-left: 6px;
|
||
padding-right: 6px;
|
||
cursor: pointer;
|
||
margin-right: 17px;
|
||
margin-top: 8px;
|
||
}
|
||
.searchbox .r {
|
||
line-height: 22px;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 8px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|