Merge branch 'dev_20231208_搜索中心' into 'master'
refactor(搜索中心): 重构搜索中心 See merge request laws-foton-slrs/foton-laws-system-front!127
This commit is contained in:
高嵩
@@ -0,0 +1,626 @@
|
||||
<template>
|
||||
<div class="standard-search">
|
||||
<personal-center></personal-center>
|
||||
<div class="search" style="margin: 20px 20px 0;">
|
||||
|
||||
<div class="search-content"
|
||||
@mouseenter="setShowAllSearch(true)"
|
||||
@mouseleave="setShowAllSearch(false)">
|
||||
<div class="search-item">
|
||||
<div class="condition-item-title">检索方式</div>
|
||||
<div class="search-item-content">
|
||||
<div
|
||||
:class="searchForm.selectType === 'allTextSearch' ? 'selected' : ''"
|
||||
@click="searchFormChange('selectType', 'allTextSearch')"
|
||||
>全文检索</div>
|
||||
<div
|
||||
:class="searchForm.selectType === 'titleSearch' ? 'selected' : ''"
|
||||
@click="searchFormChange('selectType', 'titleSearch')"
|
||||
>标题检索</div>
|
||||
</div>
|
||||
</div>
|
||||
<i class="icon el-icon-arrow-down" :class="{ 'icon-arrow': showAllSearch}"></i>
|
||||
<div style="height: 5px;width: 100%;background-color: transparent;position: absolute;bottom: -5px;left: 0"></div>
|
||||
|
||||
<transition name="fade">
|
||||
<el-card class="box-card" v-show="showAllSearch">
|
||||
<template v-for="(item,key) in searchOptions">
|
||||
|
||||
<!-- 标准类别 -->
|
||||
<template v-if="key === 'standSort'">
|
||||
<!-- 资源类型非全部时 根据标准类别显示对应标准类别 -->
|
||||
<!-- 资源类型全部时隐藏标准类别 -->
|
||||
<div v-if="searchForm.standType !== ''" class="search-item card-search-item" :key="key">
|
||||
<div class="condition-item-title">{{ item.title }}</div>
|
||||
<div class="search-item-content">
|
||||
<div v-for="(option, index) in item.options.filter(i => i.type === searchForm.standType || i.type === 'all')"
|
||||
:key="option.value"
|
||||
:class="searchForm[key].split(',').indexOf(option.value) !== -1 ? 'selected' : ''"
|
||||
@click="searchFormChange(key, option.value)"
|
||||
>{{ option.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-else class="search-item card-search-item" :key="key">
|
||||
<div class="condition-item-title">{{ item.title }}</div>
|
||||
<div class="search-item-content">
|
||||
<div v-for="(option, index) in item.options"
|
||||
:key="option.value"
|
||||
:class="searchForm[key].split(',').indexOf(option.value) !== -1 ? 'selected' : ''"
|
||||
@click="searchFormChange(key, option.value)"
|
||||
>{{ option.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-card>
|
||||
</transition>
|
||||
</div>
|
||||
|
||||
<div class="search-input">
|
||||
<el-input placeholder="请输入查询条件" v-model="searchForm.selectValue" @keyup.enter.native="onSearch" clearable>
|
||||
<el-button slot="append" icon="el-icon-search" @click="onSearch"></el-button>
|
||||
</el-input>
|
||||
</div>
|
||||
|
||||
<div class="search-link">
|
||||
<router-link to="/advancedSearch" class="link">
|
||||
<div>高级检索</div>
|
||||
</router-link>
|
||||
<router-link to="/home2" class="link" style="margin-left: 20px">
|
||||
<div>首页</div>
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="main">
|
||||
<loading :loading="loading">数据获取中</loading>
|
||||
<has-no-data tips="暂无查询结果" p-class="no-data-class" v-if="list.length === 0" />
|
||||
<template v-else>
|
||||
<div style="height: calc(100% - 56px + 20px);overflow-y: auto;">
|
||||
<div v-for="(item,key) in list" :key="key" class="main-box">
|
||||
<div class="main-box-title">
|
||||
<div class="left">
|
||||
<span v-html="item.indexType === 'stand' ? '国内标准法规' : (item.indexType === 'FOREIGN' ? '国外标准法规' : (item.indexType === 'laws' ? '国内外政策' : (item.indexType === 'bussstand' ? '企业标准' : (item.indexType === 'items' ? '数据化条目' : '动态&资料'))))" class="type-tip"></span>
|
||||
<span style="cursor:pointer;" class="main-title" v-html="item.title" @click="jumpDetails(item)"></span>
|
||||
</div>
|
||||
<span class="more" @click="checkDetail(item)">详情</span>
|
||||
</div>
|
||||
<div class="main-content" v-html="item.textContent"></div>
|
||||
<div v-if="item.indexType !== 'items' && item.indexType !== 'msgdyinfo'" class="time">
|
||||
<div style="margin-right: 15px;">发布日期: {{ item.issue_time !== null && item.issue_time !== '' ? $moment(item.issue_time).format('YYYY-MM-DD') : '--' }} </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<pagination
|
||||
:page="searchForm.page"
|
||||
:total="total"
|
||||
@pageChange="pageChange"
|
||||
@pageSizeChange="pageSizeChange"
|
||||
style="border-radius: 24px;"></pagination>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
title="查看详情"
|
||||
:visible.sync="isShowDetail"
|
||||
size="800px">
|
||||
<loading :loading="detailLoading">数据获取中</loading>
|
||||
<div style="height: 500px;overflow: auto;" >
|
||||
<div v-html="detail.textContent" style="line-height: 20px;"></div>
|
||||
<br>
|
||||
<br>
|
||||
<div v-html="detail.textItems" style="line-height: 20px;"></div>
|
||||
</div>
|
||||
<div slot="footer">
|
||||
<el-button class="common-button-default" size="mini" icon="el-icon-close" @click="() => {this.isShowDetail = false}">关闭</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PersonalCenter from '@/components/personalCenter/index.vue'
|
||||
export default {
|
||||
name: "index",
|
||||
components: {
|
||||
PersonalCenter
|
||||
},
|
||||
data() {
|
||||
const searchOptions = {
|
||||
// selectType: {
|
||||
// title: '检索方式',
|
||||
// options: [
|
||||
// {
|
||||
// label: '全文检索',
|
||||
// value: 'allTextSearch'
|
||||
// },
|
||||
// {
|
||||
// label: '标题检索',
|
||||
// value: 'titleSearch'
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
standType: {
|
||||
title: '资源类型',
|
||||
options: [
|
||||
{
|
||||
label: '全部',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
label: '国内标准法规',
|
||||
value: 'stand'
|
||||
},
|
||||
{
|
||||
label: '国外标准法规',
|
||||
value: 'FOREIGN'
|
||||
},
|
||||
{
|
||||
label: '企业标准',
|
||||
value: 'bussstand'
|
||||
}
|
||||
]
|
||||
},
|
||||
standSort: {
|
||||
title: '标准类别',
|
||||
options: [
|
||||
{
|
||||
label: '全部',
|
||||
value: '',
|
||||
type: 'all'
|
||||
}
|
||||
]
|
||||
},
|
||||
NYLXCLASS: {
|
||||
title: '能源类型',
|
||||
options: [
|
||||
{
|
||||
label: '全部',
|
||||
value: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
CLLX: {
|
||||
title: '适用车辆类型',
|
||||
options: [
|
||||
{
|
||||
label: '全部',
|
||||
value: ''
|
||||
}
|
||||
]
|
||||
},
|
||||
}
|
||||
return {
|
||||
searchOptions,
|
||||
showAllSearch: false,
|
||||
url: {
|
||||
searchSarBykey: 'search/searchCenter/searchSarBykey',
|
||||
searchSarBykeyByDetils: 'search/searchCenter/searchSarBykeyByDetils'
|
||||
},
|
||||
searchForm: {
|
||||
selectIndex: 'fulltextserch',
|
||||
selectType: this.$route.params.allType || 'titleSearch',
|
||||
standType: '',
|
||||
standSort: '',
|
||||
NYLXCLASS: '',
|
||||
CLLX: '',
|
||||
page: 1,
|
||||
pageSize: this.$store.getters.userInfo.configContent,
|
||||
selectValue: ''
|
||||
},
|
||||
total: 0,
|
||||
list: [],
|
||||
loading: false,
|
||||
isShowDetail: false,
|
||||
detail: {
|
||||
textContent: '',
|
||||
textItems: ''
|
||||
},
|
||||
detailLoading: false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getDicTypeListCode()
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
onSearch () {
|
||||
this.searchForm.page = 1
|
||||
this.getData()
|
||||
},
|
||||
getData () {
|
||||
const config = {
|
||||
_this: this,
|
||||
loading: 'loading'
|
||||
}
|
||||
this.$http._post(this.url.searchSarBykey, this.searchForm, config).then(res => {
|
||||
if (res.ok) {
|
||||
this.list = res.data.list
|
||||
this.total = res.data.count
|
||||
}
|
||||
})
|
||||
},
|
||||
searchFormChange (key, value) {
|
||||
if (key === 'selectType') {
|
||||
this.searchForm[key] = value
|
||||
} else if (key === 'standType') {
|
||||
this.searchForm[key] = value;
|
||||
['standSort', 'NYLXCLASS', 'CLLX'].forEach(item => {
|
||||
this.searchForm[item] = ''
|
||||
})
|
||||
} else {
|
||||
if (value === '') {
|
||||
this.searchForm[key] = ''
|
||||
} else {
|
||||
if (this.searchForm[key] === '') {
|
||||
this.searchForm[key] = value
|
||||
} else {
|
||||
const list = this.searchForm[key].split(',')
|
||||
if (list.indexOf(value) === -1) {
|
||||
this.searchForm[key] = this.searchForm[key] + ',' + value
|
||||
} else {
|
||||
this.searchForm[key] = list.filter(item => item !== value).join(',')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.getData()
|
||||
},
|
||||
setShowAllSearch (flag) {
|
||||
this.showAllSearch = flag
|
||||
},
|
||||
pageChange (page) {
|
||||
this.searchForm.page = page
|
||||
this.getData()
|
||||
},
|
||||
pageSizeChange (pageSize) {
|
||||
this.searchForm.pageSize = pageSize
|
||||
this.getData()
|
||||
},
|
||||
checkDetail (item) {
|
||||
const query = {}
|
||||
query.selectIndex = 'fulltextserch'
|
||||
query.selectValue = this.searchForm.selectValue
|
||||
query.standId = item.id
|
||||
this.isShowDetail = true
|
||||
this.$http.post('search/searchCenter/searchSarBykeyByDetils', query, {
|
||||
_this: this,
|
||||
loading: 'detailLoading'
|
||||
}, res => {
|
||||
if (res.ok && res.data) {
|
||||
this.detail.textContent = res.data.textContent.replace(/null/g, '- -')
|
||||
this.detail.textItems = res.data.textItems
|
||||
}
|
||||
}, e => {
|
||||
})
|
||||
},
|
||||
jumpDetails (item) {
|
||||
let name = '',pageType = ''
|
||||
switch (item.indexType) {
|
||||
case 'stand':
|
||||
name = 'OtherStandardDetails'
|
||||
pageType = 'INLAND_STAND'
|
||||
break
|
||||
// 企标
|
||||
case 'bussstand':
|
||||
name = 'OtherBussStandardDetails'
|
||||
pageType = 'BUSINESS_STAND'
|
||||
break
|
||||
case 'FOREIGN':
|
||||
name = 'OtherStandardDetails'
|
||||
pageType = 'FOREIGN_STAND'
|
||||
break
|
||||
}
|
||||
let routeUrl = this.$router.resolve({
|
||||
name,
|
||||
params: {
|
||||
id: item.id,
|
||||
pageType
|
||||
}
|
||||
})
|
||||
window.open(routeUrl.href, '_blank')
|
||||
},
|
||||
getDicTypeListCode () {
|
||||
this.$http._getData('sys/dictype/getDicTypeListCode', {}, {}).then(res => {
|
||||
if (res.ok) {
|
||||
// 能源类型
|
||||
this.searchOptions.NYLXCLASS.options = [...this.searchOptions.NYLXCLASS.options, ...res.data.NYLXCLASS]
|
||||
// 适用车辆类型
|
||||
this.searchOptions.CLLX.options = [...this.searchOptions.CLLX.options, ...res.data.ENERGYTYPES]
|
||||
// 标准类别
|
||||
if (res.data.STANDCLASSIFY) {
|
||||
const data = res.data.STANDCLASSIFY
|
||||
const standVerify = ["GB","GB/T","QC/T","JT","JB","GA","GJB","HJ"];
|
||||
const bussstandVerify = ["ECE","EU","EC","EEC","ISO","IEC","GTR","CFR",
|
||||
"JASO","JIS","GSO","GOST","ΓOCT","TP","SASO","UAE","CONTRAN","DENATRAN",
|
||||
"ABNT NBR","NBR","INMETRO","CONAMA","Normative Instruction","ADR"];
|
||||
const enterpriseVerify = ["Q/FT A","Q/FT B","Q/FT E","Q/FT F","Q/FT G","Q/FT M",
|
||||
"Q/FT Q","Q/FT R","Q/FT S","Q/FT T","Q/FT V","Q/FT X","Q/FT Y","Q/FT Z","Q/QCBFC"];
|
||||
// 国内
|
||||
const standList = data.filter(item => standVerify.includes(item.label))
|
||||
standList.forEach(item => item.type = 'stand')
|
||||
// 国外
|
||||
const bussstandList = data.filter(item => bussstandVerify.includes(item.label))
|
||||
bussstandList.forEach(item => item.type = 'FOREIGN')
|
||||
// 企标
|
||||
const enterpriseList = data.filter(item => enterpriseVerify.includes(item.label))
|
||||
enterpriseList.forEach(item => item.type = 'bussstand')
|
||||
|
||||
this.searchOptions.standSort.options = [...this.searchOptions.standSort.options, ...standList, ...bussstandList, ...enterpriseList]
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@import '~@/assets/styles/style';
|
||||
/deep/ .yellowEsClass{
|
||||
background-color: #E6A23C !important;
|
||||
}
|
||||
|
||||
/deep/ .greenEsClass{
|
||||
background-color: #35720B !important;
|
||||
}
|
||||
|
||||
/deep/ .redEsClass{
|
||||
background-color: #F56C6C !important;
|
||||
}
|
||||
|
||||
/deep/ .greenClass{
|
||||
color: #35720B !important;
|
||||
}
|
||||
|
||||
/deep/ .yellowClass{
|
||||
color: #E6A23C !important;
|
||||
}
|
||||
|
||||
/deep/ .redClass{
|
||||
color: #F56C6C !important;
|
||||
}
|
||||
/deep/ p{
|
||||
display: inline;
|
||||
}
|
||||
/deep/.highlight-Es-class {
|
||||
background-color: #3fb3ff !important;
|
||||
}
|
||||
/deep/.highlight-class {
|
||||
color: #3fb3ff !important;
|
||||
}
|
||||
|
||||
.standard-search{
|
||||
height: 100%;
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.search-content {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
height: 100%;
|
||||
width: 31%;
|
||||
border-radius: 24px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 2px solid transparent;
|
||||
.search-item {
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.condition-item-title{
|
||||
color: #313131;
|
||||
font-weight: bold;
|
||||
min-width: 90px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.search-item-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 10px;
|
||||
div {
|
||||
color: #333;
|
||||
margin: 5px;
|
||||
}
|
||||
div:hover {
|
||||
cursor: pointer;
|
||||
color: #3391CE;
|
||||
}
|
||||
.selected {
|
||||
background-color: @baseColor;
|
||||
color: #fff;
|
||||
border-radius: 4px;
|
||||
padding: 3px 7px;
|
||||
}
|
||||
.selected:hover {
|
||||
background-color: @baseColor;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
font-weight: 600;
|
||||
font-size: 18px;
|
||||
}
|
||||
.box-card {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 50px;
|
||||
border-radius: 24px;
|
||||
border-top: 2px solid transparent;
|
||||
z-index: 99;
|
||||
/deep/.el-card__body{
|
||||
padding: 0;
|
||||
}
|
||||
.card-search-item {
|
||||
min-height: 48px;
|
||||
padding: 0 16px;
|
||||
border-bottom: 1px dashed #BFBFBF;
|
||||
}
|
||||
.card-search-item:last-child {
|
||||
border-bottom: 1px dashed transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search-input {
|
||||
width: 31%;
|
||||
margin: 0 calc((100% - 93%) / 2);
|
||||
/deep/.el-input__inner{
|
||||
font-size: 16px;
|
||||
border-radius: 24px 0 0 24px;
|
||||
font-family: PingFang-SC-Medium;
|
||||
color: #666;
|
||||
height: 48px;
|
||||
border: none;
|
||||
padding: 0 25px;
|
||||
}
|
||||
/deep/.el-input__inner::placeholder {
|
||||
color: #A2AAB3;
|
||||
//padding-left: 8px;
|
||||
}
|
||||
/deep/.el-input-group__append{
|
||||
border-radius: 0 24px 24px 0;
|
||||
background-color: #fff;
|
||||
border: none;
|
||||
border-left: 1px solid #DCDFE6;
|
||||
.el-icon-search {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.link {
|
||||
color: #333;
|
||||
font-family: PingFang-SC-Medium;
|
||||
font-size: 16px;
|
||||
text-decoration: underline;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main {
|
||||
flex: 1;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
padding: 20px 0 20px 20px;
|
||||
margin: 20px;
|
||||
position: relative;
|
||||
height: calc(100vh - 158px);
|
||||
|
||||
.main-box {
|
||||
position: relative;
|
||||
margin-top: 12px;
|
||||
background-color: #fff;
|
||||
border-radius: 20px;
|
||||
&:last-child {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.main-box-title {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
line-height: 20px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
.more {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
color: #C0C4CC;
|
||||
}
|
||||
.more:hover {
|
||||
color: #3391CE;
|
||||
}
|
||||
.type-tip {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
padding: 0 5px;
|
||||
border-radius: 6px;
|
||||
color: #fff;
|
||||
background: #3391CE;
|
||||
}
|
||||
.main-title {
|
||||
margin-left: 10px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
|
||||
//flex: 1;
|
||||
//width: 0;
|
||||
//
|
||||
//text-overflow: ellipsis;
|
||||
//white-space: nowrap;
|
||||
//overflow: hidden;
|
||||
}
|
||||
}
|
||||
.main-content {
|
||||
line-height: 20px;
|
||||
//display: block;
|
||||
//word-break: break-all;
|
||||
////多行文本溢出
|
||||
//overflow: hidden;
|
||||
////text-overflow: ellipsis;
|
||||
////display: -webkit-box;
|
||||
////-webkit-line-clamp: 3;
|
||||
//-webkit-box-orient: vertical;
|
||||
//max-height: 78px;
|
||||
|
||||
display: -webkit-box;
|
||||
/*! autoprefixer: off */
|
||||
-webkit-box-orient: vertical;
|
||||
/* autoprefixer: on */
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
}
|
||||
.time {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.no-data-class {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity .5s;
|
||||
}
|
||||
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.el-icon-arrow-down {
|
||||
transition: transform .5s
|
||||
}
|
||||
.icon-arrow {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -5000,8 +5000,11 @@ const routes = [
|
||||
{
|
||||
path: '/standardSearch/:selectKey?/:searchValue?',
|
||||
name: 'StandardSearch',
|
||||
/*
|
||||
component: () =>
|
||||
import('@/pages/searchCenter/pages/standardSearch'),
|
||||
*/
|
||||
component: () => import('@/pages/searchCenter/pages/standardSearch/index'),
|
||||
meta: {
|
||||
requireAuth: true,
|
||||
title: '标准检索',
|
||||
|
||||
Reference in New Issue
Block a user