布局搜索中心
This commit is contained in:
qq787203167
@@ -0,0 +1,546 @@
|
||||
<template>
|
||||
<div class="search-con-text">
|
||||
<div class="search-text-wrap">
|
||||
<div class="text-left">
|
||||
<div class="text-left-wrap">
|
||||
<div class="text-left-select">
|
||||
<span class="text-sel" :title="$t('problemClassification')">{{$t('problemClassification')}}</span>
|
||||
<a-select :placeholder="$t('PleaseSelect')+$t('problemClassification')"
|
||||
class="text-select"
|
||||
v-model="queryParamOne.showPermissions">
|
||||
<a-select-option v-for="(item, key) in tagList"
|
||||
:key="key"
|
||||
:value="item.id">
|
||||
<span style="display: inline-block;width: 100%" :title=" item.problemLabel ">
|
||||
{{ item.problemLabel}}
|
||||
</span>
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</div>
|
||||
<div class="text-left-select">
|
||||
<span class="text-sel" :title="$t('market')">{{$t('market')}}</span>
|
||||
<j-dict-select-tag class="text-select" v-model="queryParamOne.applyMarket"
|
||||
:placeholder="$t('PleaseSelect')+$t('market')"
|
||||
:type="'select'"
|
||||
:triggerChange="false" :dictCode="'region'"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-page-search-submitButtons submitButtons">
|
||||
<a-button class="box-button" type="primary" @click="searchQuery">{{$t('query')}}</a-button>
|
||||
<a-button class="box-button" style="margin-left: 8px" @click="searchReset">{{$t('reset')}}
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="search-text-list">
|
||||
<div class="search-text-title">
|
||||
<div class="search-header-left">
|
||||
<span>{{$t('searchScope')}}：</span>
|
||||
<span>{{queryParamSeach}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content">
|
||||
<a-checkbox-group v-model="checkboxText">
|
||||
<li v-for="item in conList" :key="item.id">
|
||||
<div style="margin-bottom: 10px;position: relative">
|
||||
<a-checkbox :value="item.id" class="checkbox-left"></a-checkbox>
|
||||
<div class="text-text-right"
|
||||
@click="checkedClick(item)"
|
||||
:class="{ 'null-input':item.checked }">
|
||||
<div class="text-header">
|
||||
<a-tooltip placement="topLeft" overlayClassName="tooltip-index" :mouseEnterDelay="0.5">
|
||||
<template slot="title">
|
||||
<span v-html="item.title"></span>
|
||||
</template>
|
||||
<span style="cursor: pointer" v-html="item.title" @click="titleClick(item)"></span>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<a-tooltip placement="topLeft" overlayClassName="tooltip-index" :mouseEnterDelay="0.5">
|
||||
<template slot="title">
|
||||
<span v-html="item.content"></span>
|
||||
</template>
|
||||
<div class="text-content" @click="checkedClick(item)" v-html="item.content"
|
||||
>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</a-checkbox-group>
|
||||
</div>
|
||||
<div class="page">
|
||||
<a-pagination
|
||||
:show-total="total => $t('total')+` ${total} `+$t('strip')"
|
||||
show-quick-jumper
|
||||
show-size-changer
|
||||
:page-size.sync="pageSize"
|
||||
:total="total"
|
||||
:current="pageNo"
|
||||
@change="pageOnChange"
|
||||
@showSizeChange="SizeChange"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a-modal
|
||||
:title="$t('viewFile')"
|
||||
:width="500"
|
||||
:visible="visible"
|
||||
@cancel="visible=false"
|
||||
>
|
||||
<template slot="footer">
|
||||
<a-button key="back" @click="visible = false">
|
||||
{{$t('cancel')}}
|
||||
</a-button>
|
||||
</template>
|
||||
<p v-for="(item,index) in fileList" :key="index"
|
||||
class="fileText" :title="item.fileName" @click="fileClick(item)">{{ item.fileName }}</p>
|
||||
</a-modal>
|
||||
<JLoading :loading="loading">{{$t('dataLoading')}}</JLoading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import eventBUs from '../../../../common/event'
|
||||
import { getAction, postAction, downloadFile } from '@/api/manage'
|
||||
import moment from 'moment'
|
||||
import { Base64 } from 'js-base64'
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'problemKnowledgeBase',
|
||||
data() {
|
||||
return {
|
||||
searchOption: [],
|
||||
queryParam: {},
|
||||
visible: false,
|
||||
db_field_name: '',
|
||||
url: {
|
||||
queryCondition: 'search/document/queryCondition',
|
||||
getParagraphInfoList: 'search/document/getParagraphInfoList'//段落
|
||||
},
|
||||
selectedRowKeys: [],
|
||||
checkboxText: [],
|
||||
conList: [],
|
||||
total: 0,
|
||||
pageSize: 10,
|
||||
pageNo: 1,
|
||||
loading: false,
|
||||
selectModel: '',
|
||||
fileList: [],
|
||||
downLoadFileUrl: window._CONFIG['domianPreviewURL'] + '/sys/common/download',
|
||||
queryParamSeach: '',
|
||||
mapOne: {},
|
||||
mapTwo: {},
|
||||
selectModelName: '',
|
||||
queryParamOne: {},
|
||||
searchQueryOne: {},
|
||||
orderBy: '1',
|
||||
orderByField: '',
|
||||
tagList: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
checkboxText: function(value) {
|
||||
this.conList.forEach(val => {
|
||||
val.checked = false
|
||||
})
|
||||
if (value.length > 0) {
|
||||
this.conList.forEach(val => {
|
||||
value.forEach(res => {
|
||||
if (res === val.id) {
|
||||
val.checked = true
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
this.conList = [...this.conList]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getCondition()
|
||||
this.replacePage()
|
||||
this.getParagraphInfoList()
|
||||
},
|
||||
methods: {
|
||||
...mapGetters(['userInfo']),
|
||||
replacePage() {
|
||||
getAction('/problemKnowledgeBase/problemKnowledgeBaseClassifyEO/list', {}).then((res) => {
|
||||
if (res.success) {
|
||||
this.tagList = res.result
|
||||
} else {
|
||||
this.tagList = []
|
||||
}
|
||||
})
|
||||
},
|
||||
checkedClick(item) {
|
||||
if (item.checked) {
|
||||
this.checkboxText = this.checkboxText.filter(res => {
|
||||
return res !== item.id
|
||||
})
|
||||
} else {
|
||||
this.checkboxText.push(item.id)
|
||||
}
|
||||
},
|
||||
pageOnChange(page, pageSize) {
|
||||
this.queryParam = { ...this.queryParamOne, ...this.searchQueryOne }
|
||||
this.pageNo = page
|
||||
this.getParagraphInfoList(1)
|
||||
},
|
||||
SizeChange(page, pageSize) {
|
||||
this.queryParam = { ...this.queryParamOne, ...this.searchQueryOne }
|
||||
this.pageNo = 1
|
||||
this.pageSize = pageSize
|
||||
this.getParagraphInfoList(1)
|
||||
},
|
||||
getCondition() {
|
||||
let query = {
|
||||
flag: 1,
|
||||
searchFlag: 0
|
||||
}
|
||||
getAction(this.url.queryCondition, query).then((res) => {
|
||||
if (res.success) {
|
||||
this.searchOption = res.result
|
||||
} else {
|
||||
this.searchOption = []
|
||||
}
|
||||
})
|
||||
},
|
||||
searchReset() {
|
||||
this.pageNo = 1
|
||||
this.queryParamOne = {}
|
||||
this.queryParam = { ...this.queryParamOne, ...this.searchQueryOne }
|
||||
this.queryParamSeach = ''
|
||||
this.getParagraphInfoList(1)
|
||||
},
|
||||
searchQuery() {
|
||||
this.ParamSeach()
|
||||
this.queryParam = { ...this.queryParamOne, ...this.searchQueryOne }
|
||||
this.pageNo = 1
|
||||
this.getParagraphInfoList(1)
|
||||
},
|
||||
ParamSeach() {
|
||||
let queryParam = JSON.parse(JSON.stringify(this.searchQueryOne))
|
||||
if (queryParam[this.selectModel]) {
|
||||
this.queryParamSeach = this.selectModelName + '：' + queryParam[this.selectModel]
|
||||
} else {
|
||||
this.queryParamSeach = ''
|
||||
}
|
||||
},
|
||||
searchData(data, selectModel, name) {
|
||||
this.queryParam = {}
|
||||
this.searchQueryOne = data || {}
|
||||
this.queryParam = { ...this.queryParamOne, ...data }
|
||||
this.selectModel = selectModel
|
||||
this.selectModelName = name
|
||||
this.ParamSeach()
|
||||
this.pageNo = 1
|
||||
this.getParagraphInfoList(1)
|
||||
},
|
||||
searchDataTwo(data, selectModel, name) {
|
||||
this.queryParam = {}
|
||||
this.searchQueryOne = data || {}
|
||||
this.queryParam = { ...this.queryParamOne, ...data }
|
||||
this.selectModel = selectModel
|
||||
this.selectModelName = name
|
||||
this.ParamSeach()
|
||||
this.pageNo = 1
|
||||
this.getParagraphInfoList(2)
|
||||
},
|
||||
ResetSearch() {
|
||||
this.queryParam = {}
|
||||
this.queryParamOne = {}
|
||||
this.searchQueryOne = {}
|
||||
this.checkboxText = []
|
||||
this.selectedRowKeys = []
|
||||
this.selectModel = ''
|
||||
this.selectModelName = ''
|
||||
this.ParamSeach()
|
||||
this.pageNo = 1
|
||||
this.getParagraphInfoList(1)
|
||||
},
|
||||
getParagraphInfoList(num) {
|
||||
let queryParam = JSON.parse(JSON.stringify(this.queryParam))
|
||||
Object.keys(queryParam).forEach(val => {
|
||||
if (queryParam[val] instanceof Array) {
|
||||
queryParam[val] = queryParam[val].join(',')
|
||||
}
|
||||
if (val.includes('_name')) {
|
||||
delete queryParam[val]
|
||||
}
|
||||
})
|
||||
this.mapTwo = {}
|
||||
if (num == 1) {
|
||||
this.mapOne = queryParam
|
||||
} else if (num == 2) {
|
||||
this.mapTwo = queryParam
|
||||
let checkboxText = JSON.parse(JSON.stringify(this.checkboxText))
|
||||
this.mapTwo.ids = checkboxText.join(',')
|
||||
}
|
||||
let query = {
|
||||
pageNo: this.pageNo,
|
||||
pageSize: this.pageSize,
|
||||
mapOne: this.mapOne,
|
||||
mapTwo: this.mapTwo
|
||||
}
|
||||
this.loading = true
|
||||
postAction(this.url.getParagraphInfoList, query).then((res) => {
|
||||
if (res.success) {
|
||||
this.conList = res.result.records
|
||||
this.total = res.result.total
|
||||
this.loading = false
|
||||
} else {
|
||||
this.loading = false
|
||||
}
|
||||
})
|
||||
},
|
||||
fileClick(fileQuery) {
|
||||
let fileName = fileQuery.fileName || fileQuery.file_name
|
||||
let index1 = fileName.lastIndexOf('.')
|
||||
let index2 = fileName.length
|
||||
let fileSuffix = fileName.substring(index1, index2)
|
||||
if (fileSuffix == '.pdf') {
|
||||
window.open('/pdf/web/viewer.html?file=' + encodeURIComponent('/jero-boot/sys/common/pdf/viewFile?id=' + fileQuery.id + '&userName=' + this.userInfo().username))
|
||||
} else if (fileSuffix == '.docx') {
|
||||
let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + Base64.encode(this.downLoadFileUrl + '/' + fileQuery.id + fileSuffix)
|
||||
window.open(url, '_blank')
|
||||
} else if (fileSuffix == '.xlsx' || fileSuffix == '.xls') {
|
||||
let url = window._CONFIG['onlinePreviewDomainURL'] + '?url=' + Base64.encode(this.downLoadFileUrl + '/' + fileQuery.id + fileSuffix)
|
||||
window.open(url, '_blank')
|
||||
} else {
|
||||
downloadFile('/sys/common/downLoadFile', fileQuery.fileName || fileQuery.file_name, { id: fileQuery.id })
|
||||
}
|
||||
},
|
||||
titleClick(item) {
|
||||
let newUrl = this.$router.resolve({
|
||||
path: '/docManage/library/detail',
|
||||
query: {
|
||||
id: item.id.slice(0, 32),
|
||||
title: item.title,
|
||||
serial_number: item.serial_number
|
||||
}
|
||||
})
|
||||
window.open(newUrl.href, '_blank')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.checkbox-left .ant-checkbox-inner {
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
line-height: 18px !important;
|
||||
}
|
||||
|
||||
.tooltip-index {
|
||||
max-width: 600px !important;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.search-con-text {
|
||||
|
||||
.search-text-wrap {
|
||||
margin-top: -27px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
.text-left {
|
||||
width: 358px;
|
||||
padding: 24px 24px 24px 0;
|
||||
box-sizing: border-box;
|
||||
|
||||
.text-left-wrap {
|
||||
|
||||
.text-left-select {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24px;
|
||||
line-height: 32px;
|
||||
|
||||
.text-sel {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #000F16;
|
||||
text-align: right;
|
||||
margin-right: 14px;
|
||||
width: 65px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.text-select {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-right {
|
||||
width: calc(100% - 358px);
|
||||
position: relative;
|
||||
padding: 26px 0 22px 24px;
|
||||
box-sizing: border-box;
|
||||
border-left: 2px solid #E6E7EC;
|
||||
|
||||
.search-text-title {
|
||||
padding: 0 0 24px 0;
|
||||
|
||||
.search-header-left {
|
||||
width: calc(100% - 80px);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #040B29;
|
||||
}
|
||||
|
||||
.search-header-right {
|
||||
float: right;
|
||||
margin-top: -7px;
|
||||
|
||||
a-icon {
|
||||
|
||||
border: 1px solid rgba(0, 0, 0, 0.65);
|
||||
cursor: pointer;
|
||||
padding: 2px 5px;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
a-icon:last-child {
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
.header-list {
|
||||
font-size: 20px;
|
||||
border: 1px solid gray;
|
||||
border-radius: 3px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.header-list:hover {
|
||||
color: #00B3BE;
|
||||
border: 1px solid #00B3BE;
|
||||
}
|
||||
|
||||
.header-list-active {
|
||||
border: 1px solid #00B3BE;
|
||||
color: #00B3BE;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-text-list {
|
||||
ul {
|
||||
padding: 0 0 0 18px;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
|
||||
.text-content {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #040B29;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.checkbox-left {
|
||||
float: left;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.text-text-right {
|
||||
padding: 19px 28px;
|
||||
box-sizing: border-box;
|
||||
margin-left: 38px;
|
||||
}
|
||||
|
||||
.null-input {
|
||||
background-color: #F2F4F8;
|
||||
}
|
||||
|
||||
.text-header {
|
||||
margin-bottom: 11px;
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
color: #040B29;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.text-content {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #040B29;
|
||||
opacity: 0.7;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
text-overflow: ellipsis;
|
||||
/*! autoprefixer: off */
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 4;
|
||||
/*! autoprefixer: on;*/
|
||||
text-justify: inter-ideograph;
|
||||
word-break: break-all
|
||||
}
|
||||
|
||||
.box-content {
|
||||
padding: 0 0 0 8px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.page {
|
||||
text-align: right;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.text-operation {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.submitButtons {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fileText {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.textName {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
text-overflow: ellipsis;
|
||||
/*! autoprefixer: off */
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 1;
|
||||
/*! autoprefixer: on;*/
|
||||
text-justify: inter-ideograph;
|
||||
word-break: break-all
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user