You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
319 lines
8.9 KiB
319 lines
8.9 KiB
<template>
|
|
<div class="search">
|
|
<div class="select-bar">
|
|
<el-popover v-model="popoverShow" transition="el-zoom-in-top" popper-class="select-bar__popover" :visible-arrow="false" trigger="manual" placement="bottom-start">
|
|
<template #reference>
|
|
<el-button type="primary" class="dropdown-button" @click="popoverShow = !popoverShow">
|
|
<div class="btn-slot">
|
|
<i class="el-icon-search el-icon--left"></i><p class="dropdown-button__text">{{selected || '搜索内部资料'}}</p><i class="el-icon-arrow-down el-icon--right"></i>
|
|
</div>
|
|
</el-button>
|
|
</template>
|
|
<template>
|
|
<div class="dropdown-box">
|
|
<div class="left">
|
|
<div class="left-item" v-for="i in typeList" @click="selectLabel = i.label,$store.commit('reception/SET_SELECTED',{ key: 'leixing',value: i.value })">
|
|
{{ i.label }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="right">
|
|
<div class="search-bar">
|
|
<el-dropdown trigger="click" placement="bottom-start" @command="searchCommand">
|
|
<el-button type="primary" class="dropdown-search-button">
|
|
<div class="btn-slot">
|
|
<span>{{searchTypeText}}</span><i style="padding-left: 10px;" class="el-icon-arrow-down el-icon--right"></i>
|
|
</div>
|
|
</el-button>
|
|
<template #dropdown>
|
|
<el-dropdown-menu class="select-drop">
|
|
<el-dropdown-item :command="{key: 'keyword',label: '任意词'}">
|
|
<div style="text-align: center">任意词</div>
|
|
</el-dropdown-item>
|
|
<el-dropdown-item :command="{key: 'jianshu',label: '简述'}">
|
|
<div style="text-align: center">简述</div>
|
|
</el-dropdown-item>
|
|
<!-- <el-dropdown-item command="工作流程">-->
|
|
<!-- <div style="text-align: center">工作流程</div>-->
|
|
<!-- </el-dropdown-item>-->
|
|
<!-- <el-dropdown-item command="岗位工作及标准">-->
|
|
<!-- <div style="text-align: center">岗位工作及标准</div>-->
|
|
<!-- </el-dropdown-item>-->
|
|
<!-- <el-dropdown-item command="表单中心">-->
|
|
<!-- <div style="text-align: center">表单中心</div>-->
|
|
<!-- </el-dropdown-item>-->
|
|
<!-- <el-dropdown-item command="部门工作职责">-->
|
|
<!-- <div style="text-align: center">部门工作职责</div>-->
|
|
<!-- </el-dropdown-item>-->
|
|
</el-dropdown-menu>
|
|
</template>
|
|
</el-dropdown>
|
|
<div class="search__bottom--input">
|
|
<el-input placeholder="请输入内容" size="" :value="keyword" clearable @input="e => inputValue = e">
|
|
<template #append>
|
|
<el-button style="background: #247EC3;color: #fff;border: none;border-bottom-left-radius: 0;border-top-left-radius: 0;" @click="search">搜 索</el-button>
|
|
</template>
|
|
</el-input>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="history">
|
|
<div class="history__icon">
|
|
<el-image style="width: 30px;height: 31px" fit="cover" :src="require('@/assets/reception/history-icon.png')"></el-image>
|
|
</div>
|
|
<div class="history__word">
|
|
<div class="history__word--top">常用搜索</div>
|
|
<div class="history__word--bottom">
|
|
<span style="cursor: pointer;" v-for="(i, index) in ['奖学金', '集体户口', '助学金', '党建']" @click="inputValue = i">{{ i }}{{ index !== 3 ? ' | ' : '' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-popover>
|
|
|
|
<div class="select-bar__blank">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
searchTypeText: '任意词',
|
|
searchType: 'keyword',
|
|
popoverShow: false,
|
|
selectLabel: '',
|
|
selectValue: '',
|
|
inputValue: '',
|
|
typeList: [{label:'制度文件',value:5},{label:'工作流程',value:1},{label:'岗位工作及标准',value:3},{label:'表单中心',value:2},{label:'部门工作职责',value:4}]
|
|
}
|
|
},
|
|
methods: {
|
|
searchCommand (e) {
|
|
this.searchTypeText = e.label
|
|
this.searchType = e.key
|
|
},
|
|
search () {
|
|
if (this.searchType === 'keyword') {
|
|
this.$store.commit('reception/SET_SELECTED',{ key: 'jianshu', value: '' })
|
|
this.$store.commit('reception/SET_SELECTED',{ key: 'keyword', value: this.inputValue })
|
|
}
|
|
if (this.searchType === 'jianshu') {
|
|
this.$store.commit('reception/SET_SELECTED',{ key: 'keyword', value: '' })
|
|
this.$store.commit('reception/SET_SELECTED',{ key: 'jianshu', value: this.inputValue })
|
|
}
|
|
|
|
this.$router.push(`/index/list1?${this.$store.getters.select}`)
|
|
}
|
|
},
|
|
computed: {
|
|
selected () {
|
|
return this.selectLabel ? this.selectLabel : (this.typeList.find(i => i.value == this.$route.query.leixing)?.label || '搜索内部资料')
|
|
},
|
|
keyword () {
|
|
return this.inputValue ? this.inputValue : (this.$route.query.keyword || '')
|
|
}
|
|
},
|
|
mounted() {
|
|
this.popoverShow = true
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.dropdown-box {
|
|
display: flex;
|
|
|
|
& .left {
|
|
flex-basis: 25%;
|
|
|
|
& > div:last-child {
|
|
border-bottom-left-radius: 4px;
|
|
}
|
|
&-item {
|
|
color: #333;
|
|
text-align: center;
|
|
font-weight: 500;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
transition: all .2s;
|
|
|
|
padding: 14px 0;
|
|
|
|
&:hover {
|
|
color: #fff;
|
|
background: #247EC3;
|
|
}
|
|
}
|
|
}
|
|
& .right {
|
|
border-bottom-right-radius: 4px;
|
|
flex: 1;
|
|
background: url("../../assets/reception/search-bottom-bkg.png") no-repeat center;
|
|
background-size: cover;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
& .search-bar {
|
|
display: flex;
|
|
|
|
margin: 24px 26.7% 0 8.8%;
|
|
& .dropdown-search-button {
|
|
width: 103px;
|
|
height: 35px;
|
|
font-size: 13px;
|
|
color: #000;
|
|
background: #fff;
|
|
border-radius: 6px;
|
|
border: none;
|
|
|
|
margin-right: 13px;
|
|
}
|
|
& .search__bottom--input {
|
|
flex: 1;
|
|
height: 35px;
|
|
|
|
& ::v-deep .el-input__inner {
|
|
height: 35px !important;
|
|
}
|
|
& ::v-deep .el-input-group__append {
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
& .history {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
margin: 0 0 43px 8.8%;
|
|
|
|
&__word {
|
|
font-size: 13px;
|
|
color: #fff;
|
|
|
|
padding-left: 13px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.search {
|
|
height: 342px;
|
|
width: 100%;
|
|
|
|
padding: 33px 18.75% 38px 18.75%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '';
|
|
background: url('../../assets/reception/search-bkg.png') no-repeat center;
|
|
background-size: cover;
|
|
filter: blur(2px);
|
|
|
|
z-index: 0;
|
|
position: absolute;
|
|
top: -10px;
|
|
right: -10px;
|
|
bottom: -10px;
|
|
left: -10px;
|
|
}
|
|
|
|
.select-bar {
|
|
height: 39px;
|
|
display: flex;
|
|
|
|
position: relative;
|
|
& > span {
|
|
flex-basis: 25%;
|
|
}
|
|
&__blank {
|
|
background: #fff;
|
|
flex: 1;
|
|
filter: drop-shadow(0 1px .5px #fff);
|
|
border-top-right-radius: 4px;
|
|
}
|
|
}
|
|
}
|
|
.btn-slot {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.dropdown-button {
|
|
width: 100%;
|
|
background: #376BA3!important;
|
|
color: #fff!important;
|
|
border: none!important;
|
|
border-radius: 4px 0 0 0;
|
|
|
|
padding-left: 12.3% !important;
|
|
padding-right: 7% !important;
|
|
|
|
&__text {
|
|
flex: 1;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
|
|
::v-deep div[x-arrow] {
|
|
display: none;
|
|
}
|
|
::v-deep .el-input__inner {
|
|
border: none;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.dropdown-search-button {
|
|
width: 80px !important;
|
|
}
|
|
.btn-slot {
|
|
|
|
& > i {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss">
|
|
.select-bar__popover {
|
|
width: calc(100% - 2 * 18.75%);
|
|
border-top-right-radius: 0;
|
|
border-top-left-radius: 0;
|
|
box-shadow: none;
|
|
border: none;
|
|
|
|
padding: 0!important;
|
|
margin-top: 0!important;
|
|
}
|
|
@media screen and (max-width: 900px) {
|
|
.select-bar__popover {
|
|
width: calc(900px - 337.5px);
|
|
|
|
position: absolute;
|
|
left: 168.75px !important;
|
|
}
|
|
}
|
|
.el-dropdown-menu__item:not(.is-disabled):hover, .el-dropdown-menu__item:focus {
|
|
background: #247EC3!important;
|
|
color: #fff!important;
|
|
}
|
|
.select-drop[x-placement^=bottom] {
|
|
padding: 0!important;
|
|
border: none;
|
|
border-radius: 6px;
|
|
margin-top: 10px !important;
|
|
}
|
|
.select-drop > li:nth-child(1) {
|
|
border-radius: 6px 6px 0 0;
|
|
}
|
|
.select-drop > li:nth-last-child(1) {
|
|
border-radius: 0 0 6px 6px;
|
|
}
|
|
</style>
|