@ -2,57 +2,103 @@
< div class = "main" >
< div class = "searchBox" >
< div class = "topLogo" >
< img src = "../../assets/companyFile/ 档案981.png" alt = "" >
< img src = "../../assets/companyFile/ archivesicon.png" alt = "" / >
企业档案
< / div >
< div class = "zhcxBox" > < el -input type = "text" class = "zhcxBoxIPT" v -model .trim = " modifiedText " :suffix ="suffixIcon" >
< div class = "zhcxBox" >
< el -input
type = "text"
class = "zhcxBoxIPT"
v - model . trim = "modifiedText"
: suffix = "suffixIcon"
>
< template v -slot : suffix >
< i class = "el-icon-close custom-close-icon" v-show ="modifiedText" @click="clearInput()" > < / i >
< i
class = "el-icon-close custom-close-icon"
v - show = "modifiedText"
@ click = "clearInput()"
> < / i >
< / template >
< / e l - i n p u t >
< el -button type = "primary" icon = "el-icon-search" class = "ssBtn"
@ click = "showResult(modifiedText)" > < span > 搜索 < / span >
< el -button
type = "primary"
icon = "el-icon-search"
class = "ssBtn"
@ click = "showResult(modifiedText)"
> < span > 搜索 < / span >
< / e l - b u t t o n >
< / div >
< / div >
< div class = "resultBox" >
< div class = "resultTotal" > 搜索结果 （ < span class = "red" > { { total1 } } < / span > ） < / div >
< div class = "resultTotal" >
搜索结果 （ < span class = "red" > { { total1 } } < / s p a n
> ）
< / div >
< div class = "resultList" >
< div class = "resultItem" v-for ="(item, index) in resultList1" :key="index" @click="goArchives(item)" >
< div
class = "resultItem"
v - for = "(item, index) in resultList1"
: key = "index"
@ click = "goArchives(item)"
>
< p v-html ="item.companyName" > < / p >
< div class = "impBtnList" >
< div : class = "{ 'shewei': a == '剧毒' || a == '易制毒', 'zhongdian': a == '消防重点' || a == '所管消防', 'zhibao': a == '放射源' || a == '易制爆', 'zhian': a == '治安重点' || a == '创安单位' }"
v - for = "a in item.companyTypes" : key = "a" > { { a } }
< div
: class = " {
shewei : a == '剧毒' || a == '易制毒' ,
zhongdian : a == '消防重点' || a == '所管消防' ,
zhibao : a == '放射源' || a == '易制爆' ,
zhian : a == '治安重点' || a == '创安单位' ,
} "
v - for = "a in item.companyTypes"
: key = "a"
>
{ { a } }
< / div >
< / div >
< div class = "itemAddress" >
{ { item . companyAddress } }
< / div >
< div class = "renyuan" v-if ="item.resultList.length" >
< span v-for ="(a, ind) in item.resultList" :key="ind" v-html="a + ' '" > < / span >
< span
v - for = "(a, ind) in item.resultList"
: key = "ind"
v - html = "a + ' '"
> < / span >
< / div >
< / div >
< div class = "block" >
< el -pagination style = "float:right;margin:5px;" class = "msg-pagination-container" :background ="true"
@ size - change = "handleSizeChange" @ current - change = "handleCurrentChange" : current - page = "pageNum"
: page - sizes = "[10]" layout = "total, sizes, prev, pager, next, jumper" : total = "total1" >
< el -pagination
style = "float: right; margin: 5px"
class = "msg-pagination-container"
: background = "true"
@ size - change = "handleSizeChange"
@ current - change = "handleCurrentChange"
: current - page = "pageNum"
: page - sizes = "[10]"
layout = "total, sizes, prev, pager, next, jumper"
: total = "total1"
>
< / e l - p a g i n a t i o n >
< / div >
< / div >
< div class = "resultHistory" >
< div class = "searchHistory" > 最近搜索 < / div >
< div class = "historyItem" v-for ="(item, index) in historyList1" :key="index" @click="showResult(item)" > {{
item
} } < br > < / div >
< div
class = "historyItem"
v - for = "(item, index) in historyList1"
: key = "index"
@ click = "showResult(item)"
>
{ { item } } < br / >
< / div >
< / div >
< / div >
< / div >
< / template >
< script >
import { historyList , searchList } from '@/api/enterpriseArchives'
import { historyList , searchList } from "@/api/enterpriseArchives" ;
export default {
props : {
@ -64,7 +110,7 @@ export default {
data ( ) {
return {
numList : [ ] ,
totalNum : '' ,
totalNum : "" ,
/ / i s S h o w : f a l s e ,
regex : { } ,
total1 : this . total ,
@ -72,92 +118,100 @@ export default {
pageNum : 1 ,
pageSize : 10 ,
historyList1 : this . historyList ,
modifiedText : this . searchVal
}
modifiedText : this . searchVal ,
} ;
} ,
computed : {
suffixIcon ( ) {
return this . modifiedText ? '' : 'el-icon-search'
}
return this . modifiedText ? "" : "el-icon-search" ;
} ,
} ,
mounted ( ) {
this . resultList1 = this . resultList
this . checkKeyWords ( )
this . resultList1 = this . resultList ;
this . checkKeyWords ( ) ;
} ,
methods : {
clearInput ( ) {
this . $emit ( 'clearInput' )
this . $emit ( "clearInput" ) ;
} ,
checkKeyWords ( ) {
this . regex = new RegExp ( this . modifiedText , "i" )
this . resultList1 = this . resultList1 . map ( item => {
this . regex = new RegExp ( this . modifiedText , "i" ) ;
this . resultList1 = this . resultList1 . map ( ( item ) => {
if ( item . companyName ) {
item . companyName1 = item . companyName
item . companyName = item . companyName . replace ( this . regex , '<span class="highlight">$&</span>' )
item . companyName1 = item . companyName ;
item . companyName = item . companyName . replace (
this . regex ,
'<span class="highlight">$&</span>'
) ;
}
if ( item . resultList . length ) {
item . resultList = item . resultList . map ( ( a ) => {
return a = a . replace ( this . regex , '<span class="highlight">$&</span>' )
return ( a = a . replace (
this . regex ,
'<span class="highlight">$&</span>'
) ) ;
} ) ;
/ / i t e m . l e g a l P e r s o n = i t e m . l e g a l P e r s o n . r e p l a c e ( t h i s . r e g e x , ' < s p a n c l a s s = " h i g h l i g h t " > $ & < / s p a n > ' )
}
return item
} )
return item ;
} ) ;
} ,
handleSizeChange ( val ) {
/ / c o n s o l e . l o g ( ` 每 页 $ { v a l } 条 ` ) ;
this . pageNum = 1 ;
this . pageSize = val ;
this . showResult ( this . modifiedText )
this . showResult ( this . modifiedText ) ;
} ,
handleCurrentChange ( val ) {
/ / c o n s o l e . l o g ( ` 当 前 页 : $ { v a l } ` ) ;
this . pageNum = val ;
this . showResult ( this . modifiedText )
this . showResult ( this . modifiedText ) ;
} ,
goArchives ( val ) {
sessionStorage . setItem ( 'companyID' , val . id )
sessionStorage . setItem ( 'companyName' , val . companyName1 )
sessionStorage . setItem ( "companyID" , val . id ) ;
sessionStorage . setItem ( "companyName" , val . companyName1 ) ;
this . $router . push ( {
name : 'archives' ,
} )
name : "archives" ,
} ) ;
} ,
showResult ( val ) {
this . modifiedText = val ? val : this . modifiedText
this . modifiedText = val ? val : this . modifiedText ;
/ / c o n s o l e . l o g ( ! v a l . l e n g t h , v a l . l e n g t h ) ;
if ( ! this . modifiedText . length ) {
this . $message . warning ( '请输入要查询的关键词' )
return
}
searchList ( { searchValue : this . modifiedText , pageNum : this . pageNum , pageSize : this . pageSize } ) . then ( res => {
this . $message . warning ( "请输入要查询的关键词" ) ;
return ;
}
searchList ( {
searchValue : this . modifiedText ,
pageNum : this . pageNum ,
pageSize : this . pageSize ,
} ) . then ( ( res ) => {
if ( res . total || res . data . length ) {
this . $set ( this , 'resultList1' , res . data )
this . $set ( this , "resultList1" , res . data ) ;
/ / c o n s o l e . l o g ( r e s . d a t a , ' r e s . d a t a ' ) ;
/ / c o n s o l e . l o g ( t h i s . r e s u l t L i s t 1 , ' t h i s . r e s u l t L i s t 1 ' ) ;
this . total1 = res . total
this . total1 = res . total ;
/ / t h i s . i s S h o w = t r u e
this . gethistoryList ( )
this . checkKeyWords ( )
this . gethistoryList ( ) ;
this . checkKeyWords ( ) ;
} else {
this . $message . warning ( '未查询到相关数据' )
this . $message . warning ( "未查询到相关数据" ) ;
}
} )
} ) ;
} ,
gethistoryList ( ) {
historyList ( ) . then ( ( res ) => {
this . historyList1 = res . data
this . historyList1 = res . data ;
this . historyList1 = this . historyList1 . filter ( ( item , index ) => {
if ( index < 5 ) {
return item
return item ;
}
} )
} )
} ) ;
} ) ;
} ,
}
}
} ,
} ;
< / script >
< style lang = "less" scoped >
@ -202,34 +256,31 @@ export default {
height : 100 % ;
width : 700 px ;
font - size : 20 px ;
background : # 121 A 18;
background : # 121 a 18;
border : 1 px solid rgba ( 108 , 128 , 151 , 0.7 ) ;
border - radius : 4 px ;
font - size : 18 px ;
color : # F8FBFF ;
color : # f8fbff ;
letter - spacing : 1.29 px ;
line - height : 16 px ;
font - weight : 400 ;
opacity : 0.95 ;
}
/deep/ . el - input _ _inner {
background - color : rgba ( 255 , 255 , 255 , 0 ) ;
background - image : none ;
border - radius : 4 px ;
border : 0 ;
box - sizing : border - box ;
color : # F8FBFF ;
color : # f8fbff ;
display : inline - block ;
height : 54 px ;
line - height : 54 px ;
outline : 0 ;
padding : 0 15 px ;
transition : border - color s cubic - bezier ( , , , 1 ) ;
transition : border - color 0 .2s cubic - bezier ( 0 .645, 0 .045, 0 .355, 1 ) ;
width : 100 % ;
}
/deep/ . el - input _ _suffix {
@ -238,12 +289,9 @@ export default {
cursor : pointer ;
}
input : focus ,
textarea : focus {
outline : none ;
}
. ssBtn {
@ -255,7 +303,7 @@ export default {
font - size : 20 px ;
text - align : center ;
border : 0 ;
background : url ( '~@/assets/companyFile/2121.png' ) no - repeat ;
background : url ( "~@/assets/companyFile/2121.png" ) no - repeat ;
background - size : 100 % 100 % ;
}
}
@ -281,14 +329,13 @@ export default {
cursor : pointer ;
/ / b a c k g r o u n d : u r l ( ' ~ @ / a s s e t s / c o m p a n y F i l e / 矩 形 . p n g ' ) n o - r e p e a t ;
/ / b a c k g r o u n d - s i z e : 1 0 0 % 1 0 0 % ;
}
}
. resultBox {
width : 80 % ;
height : calc ( 100 % - 60 px ) ;
background : url ( '~@/assets/companyFile/编组 17.png' ) no - repeat ;
background : url ( "~@/assets/companyFile/back001.png" ) no - repeat ;
background - size : 100 % 100 % ;
display : flex ;
justify - content : space - around ;
@ -300,13 +347,13 @@ export default {
top : 30 px ;
left : 50 px ;
font - size : 18 px ;
color : # FFFFFF ;
color : # ffffff ;
letter - spacing : 1 px ;
font - weight : 500 ;
. red {
color : # FF 7474;
color : # ff ;
}
}
@ -315,7 +362,7 @@ export default {
height : 78 % ;
margin - top : 60 px ;
background : # 000 ;
background : url ( '~@/assets/companyFile/矩形备份 289981.png' ) no - repeat ;
background : url ( "~@/assets/companyFile/back002.png" ) no - repeat ;
background - size : 100 % 100 % ;
display : flex ;
justify - content : center ;
@ -342,19 +389,14 @@ export default {
border : 1 px solid rgba ( 40 , 132 , 126 , 1 ) ;
}
/deep/ . el - input _ _inner {
/ / b a c k g r o u n d : u r l ( ' ~ @ / a s s e t s / c o m p a n y F i l e / 2 1 2 1 . p n g ' ) n o - r e p e a t ;
background : url ( '~@/assets/companyFile/矩形备份 18.png' ) no - repeat ;
background : url ( "~@/assets/companyFile/矩形备份 18.png" ) no - repeat ;
background - size : 100 % 100 % ;
border : 1 px solid rgba ( 40 , 132 , 126 , 1 ) ;
color : rgba ( 234 , 246 , 255 , 0.7 ) ;
;
}
/deep/ . btn - prev {
margin : 0 5 px ;
background - color : rgba ( 255 , 255 , 255 , 0 ) ;
@ -375,7 +417,6 @@ export default {
& : : - webkit - scrollbar {
width : 6 px ;
}
/ / 滚 动 条 里 面 默 认 的 小 方 块 , 自 定 义 样 式
@ -387,27 +428,24 @@ export default {
/ / 滚 动 条 里 面 的 轨 道
& : : - webkit - scrollbar - track {
background : transparent ;
}
. resultItem {
height : 175 px ;
width : 95 % ;
border - bottom : 1 px solid # 6 C 8097;
border - bottom : 1 px solid # 6 c 8097;
padding : 20 px 0 ;
cursor : pointer ;
p {
font - size : 16 px ;
color : # FFFFFF ;
color : # ffffff ;
letter - spacing : 0.5 px ;
line - height : 16 px ;
font - weight : 500 ;
/deep/ . highlight {
color : # FF7777 ;
color : # ff7777 ;
}
}
@ -421,10 +459,10 @@ export default {
height : 26 px ;
line - height : 26 px ;
width : auto ;
background : url ( '~@/assets/companyFile/编组 11991.png' ) no - repeat ;
background : url ( "~@/assets/companyFile/sheweiback.png" ) no - repeat ;
padding : 0 5 px ;
font - size : 14 px ;
color : # B5EBFF ;
color : # b5ebff ;
letter - spacing : 0.44 px ;
font - weight : 400 ;
background - size : 100 % 100 % ;
@ -435,10 +473,10 @@ export default {
height : 26 px ;
line - height : 26 px ;
width : auto ;
background : url ( '~@/assets/companyFile/编组 11222221.png' ) no - repeat ;
background : url ( "~@/assets/companyFile/zhongdianback.png" ) no - repeat ;
padding : 0 5 px ;
font - size : 14 px ;
color : # E3DEFF ;
color : # e3deff ;
letter - spacing : 0.44 px ;
font - weight : 400 ;
background - size : 100 % 100 % ;
@ -449,10 +487,11 @@ export default {
height : 26 px ;
line - height : 26 px ;
width : auto ;
background : url ( '~@/assets/companyFile/编组 11991备份 10.png' ) no - repeat ;
background : url ( "~@/assets/companyFile/zhibaoback.png" )
no - repeat ;
padding : 0 5 px ;
font - size : 14 px ;
color : # E3DEFF ;
color : # e3deff ;
letter - spacing : 0.44 px ;
font - weight : 400 ;
background - size : 100 % 100 % ;
@ -463,16 +502,16 @@ export default {
height : 26 px ;
line - height : 26 px ;
width : auto ;
background : url ( '~@/assets/companyFile/编组 11991备份 21.png' ) no - repeat ;
background : url ( "~@/assets/companyFile/zhianback.png" )
no - repeat ;
padding : 0 5 px ;
font - size : 14 px ;
color : # E3DEFF ;
color : # e3deff ;
letter - spacing : 0.44 px ;
font - weight : 400 ;
background - size : 100 % 100 % ;
margin - right : 10 px ;
}
}
. itemAddress {
@ -480,7 +519,7 @@ export default {
opacity : 0.8 ;
font - size : 14 px ;
color : # FFFFFF ;
color : # ffffff ;
letter - spacing : 0 ;
font - weight : 400 ;
}
@ -491,11 +530,9 @@ export default {
color : rgba ( 255 , 255 , 255 , 0.9 ) ;
/deep/ . highlight {
color : # FF7777 ;
color : # ff7777 ;
}
}
}
}
@ -503,12 +540,12 @@ export default {
width : 30 % ;
height : 85 % ;
margin - top : 60 px ;
background : url ( '~@/assets/companyFile/矩形备份 289981.png' ) no - repeat ;
background : url ( "~@/assets/companyFile/back002.png" ) no - repeat ;
background - size : 100 % 100 % ;
. searchHistory {
font - size : 18 px ;
color : # FFFFFF ;
color : # ffffff ;
letter - spacing : 1 px ;
font - weight : 500 ;
margin : 20 px ;
@ -518,10 +555,10 @@ export default {
display : inline - block ;
height : 40 px ;
width : auto ;
background : url ( '~@/assets/companyFile/编组 1622111.png' ) no - repeat ;
background : url ( "~@/assets/companyFile/编组 1622111.png" ) no - repeat ;
background - size : 100 % 100 % ;
font - size : 16 px ;
color : # FFFFFF ;
color : # ffffff ;
letter - spacing : 0.5 px ;
line - height : 40 px ;
padding : 5 px 20 px ;
@ -531,8 +568,6 @@ export default {
cursor : pointer ;
}
}
}
}
< / style >
lukeyan
1 year ago
