<template>
|
<div class="search-bar">
|
<template class="search-cont" v-for="(item, index) in options.columns">
|
<div :style="{ flex: item.flex || 1, minWidth: '28%', ...item.customClass || '' }" class="search-cont"
|
v-if="showCurSelect(item)">
|
<span v-show="item.label" class="search-cont-label">{{ item.label }}:</span>
|
<el-select :teleported="false" :size="item.size || ''" v-model="params[item.props]"
|
:clearable="item.clearable || false" :multiple="item.multiple || false" collapse-tags
|
:placeholder="item.placeholder || (item.label ? '请选择' + item.label : '请选择')"
|
:style="{ flex: 1, marginLeft: $px2rem(item.label ? '15px' : '') }" @change="searchSelectChange($event, item)">
|
<el-option v-for="selectItem in item.data" :key="selectItem.value" :label="selectItem.label"
|
:value="selectItem.value">
|
</el-option>
|
</el-select>
|
</div>
|
|
<div :style="{ flex: item.flex || 1, minWidth: '28%', ...item.customClass || '' }" class="search-cont"
|
v-if="item.type === 'input'">
|
<span v-show="item.label" class="search-cont-label">{{ item.label }}:</span>
|
<el-input :size="item.size || ''" v-model="params[item.props]" :clearable="item.clearable || false"
|
:placeholder="item.placeholder || (item.label ? '请输入' + item.label : '请输入')"
|
:style="{ flex: 1, marginLeft: $px2rem(item.label ? '15px' : '') }" @change="searchInputChange($event, item)">
|
</el-input>
|
</div>
|
|
<div class="search-cont" v-if="item.type === 'checkbox'">
|
<span v-show="item.label" class="search-cont-label">{{ item.label }}:</span>
|
<el-checkbox :style="{ marginLeft: $px2rem(item.label ? '15px' : '') }"
|
v-model="params[item.props]"></el-checkbox>
|
</div>
|
|
<div class="search-cont" v-if="item.type === 'datePicker'">
|
<span v-show="item.label" class="search-cont-label">{{ item.label }}:</span>
|
<el-date-picker :append-to-body="false" :size="item.size || ''" v-model="params[item.props]"
|
:pickerOptions="item.pickerOptions || {}" :format="item.format || 'yyyy-MM-dd HH:mm:ss'"
|
:clearable="item.clearable || false" :type="item.pickerType || 'daterange'" range-separator="至"
|
start-placeholder="开始日期" end-placeholder="结束日期" :value-format="item.format || 'yyyy-MM-dd HH:mm:ss'"
|
:style="{ width: $px2rem(`${item.width || '360'}px`), marginLeft: $px2rem(item.label ? '15px' : '') }"
|
@change="searchDateChange($event, item)">
|
</el-date-picker>
|
</div>
|
|
<!-- :picker-options="pickerOptions" -->
|
<div class="search-cont" v-if="item.type === 'date' && options.quickDateBtn">
|
<span v-show="item.label" class="search-cont-label">{{ item.label }}:</span>
|
<el-date-picker :append-to-body="false" :size="item.size || ''" v-model="params[item.props]" type="date"
|
:clearable="item.clearable || false" :placeholder="item.placeholder || item.label || '选择时间'"
|
:style="{ width: $px2rem(`${item.width || '140'}px`), marginLeft: $px2rem(item.label ? '15px' : '') }"
|
:editable="false" :disabled="currentDateType != 3" :value-format="item.format || 'yyyy-MM-dd'">
|
</el-date-picker>
|
</div>
|
|
<div class="search-cont" v-if="item.type === 'year'">
|
<span v-show="item.label" class="search-cont-label">{{ item.label }}:</span>
|
<el-date-picker :append-to-body="false" v-model="params[item.props]" type="year"
|
:placeholder="item.placeholder || '选择年'" :value-format="item.format || 'yyyy'">
|
</el-date-picker>
|
</div>
|
|
<div class="search-cont" v-if="item.type === 'multiDate' && options.quickMultiDateBtn">
|
<span v-show="item.label" class="search-cont-label">{{ item.label }}:</span>
|
<el-date-picker :append-to-body="false" :size="item.size || ''" v-model="params[item.props]" :type="multiDateType"
|
:key="multiDateType" :clearable="item.clearable || false"
|
:placeholder="item.placeholder || item.label || '多选择时间'" :editable="false"
|
:style="{ width: $px2rem(`${item.width || '180'}px`), marginLeft: $px2rem(item.label ? '15px' : '') }"
|
:value-format="item.format || 'yyyy-MM-dd'">
|
</el-date-picker>
|
</div>
|
</template>
|
|
<div class="search-cont search-cont-btn" v-if="options.searchBtnGroup">
|
<el-button v-if="options.searchBtn || false"
|
:type="options.searchBtnTitleShow ? '' : options.searchType || 'primary'"
|
:disabled="options.searchDisabled || false" :size="options.searchSize || ''" :icon="Search" @click="searchClick"
|
:class="{ 'btn-h32-w76': options.searchBtnTitleShow ? false : true }">{{
|
options.searchBtnTitleShow ?
|
options.searchBtnTitle : '查 询'
|
}}</el-button>
|
|
<el-button v-if="options.resetBtn || false" :type="options.resetType || ''"
|
:disabled="options.resetDisabled || false" :size="options.resetSize || ''" :icon="Refresh" @click="resetClick"
|
class="btn-h32-w76 reset-btn">重
|
置</el-button>
|
|
<el-button v-if="options.exportBtn || false" :type="options.exportType || 'primary'"
|
:disabled="options.exportDisabled || false" :size="options.exportSize || ''" :icon="Download" @click="exportClick"
|
class="btn-h32-w76">导 出</el-button>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
import { Search, Refresh, Download } from '@element-plus/icons-vue'
|
|
import request from 'utils/http'
|
import { reactive } from 'vue'
|
|
const {
|
options,
|
inputs,
|
selects,
|
button,
|
} = defineProps({
|
options: {
|
default: () => { return new Object() }
|
},
|
inputs: {
|
default: () => { return new Array() }
|
},
|
selects: {
|
default: () => { return new Array() }
|
},
|
button: {
|
default: () => { return new Object() }
|
}
|
})
|
|
const emit = defineEmits(['searchBtn', 'resetBtn', 'exportExcel', 'quickQuery'])
|
|
let params = reactive({})
|
let currentDateType = ref('')
|
let multiDateType = ref('')
|
let pendingFlag = null
|
let pendingFunction = null
|
|
const showCurSelect = computed(() => (item) => {
|
if ('show' in item) {
|
if (item.show == false) {
|
return false
|
} else {
|
return item.type === 'select'
|
}
|
} else {
|
return item.type === 'select'
|
}
|
})
|
|
/**
|
* @description: 按钮查询事件
|
* @return {*}
|
*/
|
const searchClick = () => {
|
const flag = options.columns.some(item => item.type == 'cascader' || item.type == 'basinCascader' || item.type == 'ruleCascader')
|
if (flag) {
|
emit('searchBtn', getSeachCondition())
|
} else {
|
emit('searchBtn', { ...params })
|
}
|
}
|
|
/**
|
* @description: 按钮重置事件
|
* @return {*}
|
*/
|
const resetClick = () => {
|
const flag = options.columns.some(item => item.type == 'cascader' || item.type == '')
|
|
resetParams()
|
|
if (flag) {
|
emit('resetBtn', resetSeachCondition())
|
} else {
|
emit('resetBtn', { ...params })
|
}
|
}
|
|
/**
|
* @description: 重置所有查询条件
|
* @return {*}
|
*/
|
const resetParams = (param, type = false) => {
|
options.columns.forEach(item => {
|
if (item.props) {
|
if (item.defaultValue) {
|
params[item.props] = item.defaultValue
|
} else {
|
params[item.props] = ''
|
}
|
}
|
})
|
|
if (pendingFlag == true && type == true) {
|
pendingFunction()
|
|
pendingFlag = false
|
}
|
}
|
|
const disposeFunction = (fun) => {
|
pendingFunction = fun
|
pendingFlag = true
|
}
|
|
const getSeachCondition = () => {
|
return { ...params }
|
}
|
|
/**
|
* @description: 重置当前搜索条件
|
* @return {*}
|
*/
|
const resetSeachCondition = () => {
|
return { ...this.params }
|
}
|
|
/**
|
* @description: 按钮导出事件
|
* @return {*}
|
*/
|
const exportClick = () => {
|
const flag = options.columns.some(item => item.type == 'cascader')
|
|
if (flag) {
|
emit('exportExcel', getSeachCondition())
|
} else {
|
emit('exportExcel', { ...params })
|
}
|
}
|
|
/**
|
* @description: select公共方法
|
* @param {*} e
|
* @param {*} item
|
* @return {*}
|
*/
|
const searchSelectChange = (e, item) => {
|
if (item.quickBtnShow) {
|
if (item.quickBtnShow == e) {
|
options.quickMultiDateBtn = false
|
options.quickDateBtn = true
|
} else {
|
options.quickDateBtn = false
|
options.quickMultiDateBtn = true
|
}
|
|
emit('quickQuery', params)
|
}
|
|
|
if (item.relationUrl) {
|
let cur = item.data.find(it => it.value === e)
|
|
options.columns.forEach(curItem => {
|
if (curItem.dataSource && curItem.dataSource == 'middleground' && curItem.relevanceProps && curItem.relevanceProps == item.props) {
|
curItem.data = []
|
params[curItem.props] = ''
|
item.cb(cur.ztValue)
|
|
if (cur[curItem.searchValue] == 'all') {
|
return
|
}
|
|
let getParams = {}
|
|
if (item.res_cd) {
|
getParams = {
|
res_cd: item.res_cd
|
}
|
}
|
|
if (curItem.searchProps) {
|
getParams[curItem.searchProps] = cur[curItem.searchValue]
|
}
|
|
request({
|
url: item.relationUrl,
|
method: item.method,
|
apiKey: true,
|
params: getParams
|
}).then(res => {
|
curItem[curItem.props] = ''
|
|
if (item.customResponse) {
|
curItem.data = res.data.data.map(it => {
|
|
if (cur[curItem.searchValue] == 'sy') {
|
return {
|
label: it[item.customResponse.label],
|
value: it[item.customResponse.value],
|
}
|
} else if (cur[curItem.searchValue] == 'wy') {
|
return {
|
label: it[item.customResponse.label],
|
value: it[item.customResponse.value],
|
}
|
} else {
|
return {
|
label: it.cd,
|
value: it.cd,
|
}
|
}
|
})
|
} else {
|
curItem.data = res.data.data.map(it => {
|
if (cur[curItem.searchValue] == 'sy') {
|
return {
|
label: it.cd,
|
value: it.cd,
|
}
|
} else if (cur[curItem.searchValue] == 'wy') {
|
return {
|
label: it.cd,
|
value: it.cd,
|
}
|
} else {
|
return {
|
label: it.cd,
|
value: it.cd,
|
}
|
}
|
})
|
}
|
})
|
} else if (curItem.basisFlag == true && curItem.relevanceProps && curItem.relevanceProps == item.props) {
|
params[curItem.props] = ''
|
|
let getParams = {}
|
|
if (curItem.codeFlag) {
|
getParams = {
|
code: curItem.basisType
|
}
|
}
|
|
if (curItem.searchProps) {
|
getParams[curItem.searchProps] = cur[curItem.searchValue]
|
} else {
|
getParams['parentId'] = cur.id
|
}
|
|
request({
|
url: item.relationUrl,
|
method: item.method,
|
params: getParams
|
}).then(res => {
|
curItem.data = res.data.data.map(it => {
|
return {
|
label: it.dictValue,
|
value: it.dictKey,
|
}
|
})
|
})
|
}
|
})
|
}
|
|
// 配置changeSearch时改变值立即调用搜索
|
if (item.changeSearch) {
|
searchClick()
|
}
|
}
|
|
const searchInputChange = (e, item) => {
|
// 配置changeSearch时改变值立即调用搜索
|
if (item.changeSearch) {
|
searchClick()
|
}
|
}
|
|
const setItemDefault = (props, defaultValue) => {
|
params[props] = defaultValue
|
}
|
|
const searchDateChange = (e, item) => {
|
// 配置changeSearch时改变值立即调用搜索
|
if (item.changeSearch) {
|
params.isChangeDate = true//监测预警时间改变
|
searchClick()
|
}
|
}
|
|
const $px2rem = (px) => {
|
if (/%/gi.test(px)) {
|
// 有百分号%，特殊处理，表述pc是一个有百分号的数，比如：90%
|
return px
|
} else {
|
return parseFloat(px) / 192 + "rem"
|
}
|
}
|
|
watch(
|
() => options,
|
(newData) => {
|
if (JSON.stringify(newData) != '{}') {
|
if (newData.resetParams && newData.resetParams == true) params = {}
|
|
resetParams({}, true)
|
|
if (newData.quickDateBtn) {
|
currentDateType.value = newData.quickBtnDefault
|
}
|
|
if (newData.multiDateTypeDefault) {
|
multiDateType.value = newData.multiDateTypeDefault
|
}
|
}
|
},
|
{ immediate: true } // 设置immediate为true以便在组件挂载时立即检查createB的值
|
)
|
|
defineExpose({
|
getSeachCondition
|
})
|
</script>
|
|
<script>
|
export default {
|
name: 'GlobalSearch'
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.search-bar {
|
padding-left: 10px;
|
margin-bottom: 10px;
|
display: flex;
|
flex-wrap: wrap;
|
|
.search-cont {
|
margin-right: 10px;
|
margin-top: 10px;
|
display: flex;
|
align-items: center;
|
|
&-label {
|
display: flex;
|
align-items: center;
|
white-space: nowrap;
|
font-size: 14px;
|
color: #fff;
|
}
|
}
|
|
::v-deep(.el-input) {
|
.el-input__wrapper {
|
background: rgba(135, 158, 199, 0.2);
|
box-shadow: inset 0px 3px 7px 0px rgba(42, 138, 236, 0.949);
|
border-radius: 4px 4px 4px 4px;
|
border: 1px solid #4081CB;
|
}
|
|
input {
|
color: #D4E8F8;
|
}
|
}
|
|
::v-deep(.el-select) {
|
.el-select__wrapper {
|
background: rgba(135, 158, 199, 0.2);
|
box-shadow: inset 0px 3px 7px 0px rgba(42, 138, 236, 0.949);
|
border-radius: 4px 4px 4px 4px;
|
border: 1px solid #4081CB;
|
|
.el-select__placeholder {
|
color: #D4E8F8;
|
}
|
}
|
|
.el-popper.is-light,
|
.el-popper.is-light>.el-popper__arrow:before {
|
background: rgba(15, 44, 75, 1);
|
border: 1px solid rgba(15, 44, 75, 1);
|
}
|
|
.el-select-dropdown {
|
background: rgba(15, 44, 75, 1);
|
border: none;
|
|
.el-select-dropdown__item {
|
color: #D4E8F8;
|
}
|
|
.el-select-dropdown__item.is-hovering {
|
color: #4ACFFF;
|
background: rgba(85, 187, 248, 0.2);
|
}
|
}
|
}
|
|
.search-cont-btn {
|
margin-top: 10px;
|
|
::v-deep(.el-button) {
|
background: #277DFF;
|
border-color: #277DFF;
|
|
&.reset-btn {
|
color: #D4E8F8;
|
background: #43779B;
|
border-color: #43779B;
|
}
|
}
|
}
|
}
|
|
|
|
::v-deep .el-date-editor {
|
width: 100%;
|
color: #fff;
|
background: rgba(0, 44, 71, 0.302);
|
|
.el-input__icon {
|
color: #fff;
|
}
|
|
.el-range-separator {
|
color: #fff;
|
}
|
|
input {
|
color: #fff;
|
background: transparent;
|
}
|
|
.el-picker-panel,
|
.el-time-panel__content {
|
color: #D4E8F8;
|
background: rgba(15, 44, 75, 1);
|
}
|
|
.el-time-panel__content {
|
|
.el-time-spinner__item {
|
color: #9eb1c1;
|
|
&:hover {
|
background: rgba(85, 187, 248, 0.2);
|
}
|
|
&.active {
|
color: #D4E8F8;
|
}
|
}
|
}
|
|
|
.el-picker-panel__footer,
|
.el-time-panel__footer {
|
background: rgba(15, 44, 75, 1);
|
}
|
|
.el-picker-panel__footer {
|
.is-plain {
|
color: #D4E8F8;
|
background: rgba(39, 125, 255, .6);
|
border-color: rgba(39, 125, 255, .6);
|
}
|
}
|
|
.el-time-panel__footer {
|
.cancel {
|
color: #D4E8F8;
|
}
|
}
|
|
.el-icon-arrow-right {
|
color: #AFBED8;
|
}
|
|
.el-date-table {
|
th {
|
color: #AFBED8;
|
border-color: rgba(39, 125, 255, .6);
|
}
|
}
|
|
.el-date-range-picker__time-header,
|
.el-date-range-picker__content,
|
.el-picker-panel__footer,
|
.el-picker-panel__body,
|
.el-picker-panel__body-wrapper,
|
.el-picker-panel {
|
border-color: rgba(39, 125, 255, .6);
|
}
|
|
.el-popper__arrow,
|
.el-popper__arrow::after {
|
border-bottom-color: rgba(39, 125, 255, .6);
|
}
|
|
td.in-range {
|
div {
|
background: rgba(39, 125, 255, .4) !important;
|
}
|
}
|
}
|
</style>
|
