<template>
|
<div class="search-list">
|
<div class="search-top">
|
<!-- <div class="query-class">
|
<div class="query-class-title">查询分类</div>
|
<el-select v-model="queryClassValue" placeholder="请选择" class="query-class-sel" size="mini">
|
<el-option v-for="item in queryClassOptions" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
<div class="query-class-btn" @click="queryClassClick">
|
<i class="el-icon-setting"></i>
|
</div>
|
</div> -->
|
<div class="search">
|
<el-input placeholder="请输入内容" v-model.trim="searchInput" class="input-with-select" clearable>
|
<el-select v-model="searchSelValue" slot="prepend" placeholder="请选择" class="search-sel">
|
<el-option v-for="item in searchOptions" :key="item.value" :label="item.label" :value="item"> </el-option>
|
</el-select>
|
<!-- <i slot="suffix" class="el-icon-search" style="cursor: pointer" @click="searchClick"></i> -->
|
</el-input>
|
</div>
|
<div class="btn">
|
<el-button type="primary" size="mini" @click="searchClick" icon="el-icon-search" style="margin-right: 5px"
|
>搜索</el-button
|
>
|
<el-button size="mini" icon="el-icon-refresh-left" @click="resetClick">重置</el-button>
|
</div>
|
<!-- <div class="other-search">
|
<div class="other-search-high" @click="highSearchClick">
|
<div class="high-icon"><i class="el-icon-postcard"></i></div>
|
<div>高级查找</div>
|
</div>
|
<div class="other-search-tile" @click="tileSearchClick">
|
<div class="high-icon"><i class="el-icon-news"></i></div>
|
<div>平铺查找</div>
|
</div>
|
<div v-if="labelSearch" class="other-search-label" @click="labelSearchClick">
|
<div class="high-icon"><i class="el-icon-discount"></i></div>
|
<div>标签查找</div>
|
</div>
|
</div> -->
|
</div>
|
<!-- <div v-if="isTileSearch" class="search-bottom">
|
<el-table :data="tileSearchData" style="width: 100%">
|
<el-table-column prop="selField" label="选择字段" width="430">
|
<template slot-scope="scope">
|
<el-select v-model="scope.row[scope.column.property]">
|
<el-option v-for="(row, index) in selFieldList" :key="index" :label="row" :value="row"> </el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column prop="selCondition" label="选择条件" width="350">
|
<template slot-scope="scope">
|
<el-select v-model="scope.row[scope.column.property]" style="width: 340px">
|
<el-option v-for="(row, index) in selConditionList" :key="index" :label="row" :value="row"> </el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column prop="keywords" label="关键字">
|
<template slot-scope="scope">
|
<el-input v-model="scope.row[scope.column.property]" placeholder="请输入内容"></el-input>
|
</template>
|
</el-table-column>
|
<el-table-column prop="filterCriteria" label="筛选条件" width="100">
|
<template slot-scope="scope">
|
<el-select v-model="scope.row[scope.column.property]">
|
<el-option v-for="(row, index) in filterCriteriaList" :key="index" :label="row" :value="row"> </el-option>
|
</el-select>
|
</template>
|
</el-table-column>
|
<el-table-column fixed="right" label="" width="60">
|
<template slot-scope="scope">
|
<el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="add-btn">
|
<el-button @click="addBtn" type="text" size="small">新条件</el-button>
|
</div>
|
<div class="others-btn">
|
<div class="hide-switch">
|
<span>查找后自动隐藏</span>
|
<el-switch v-model="value2" active-color="#2e68db" inactive-color="#AEB9CA" @change="hideSwitch"></el-switch>
|
</div>
|
<div>
|
<el-button type="text" size="small" class="blue">立即查找</el-button>
|
<el-button size="small">取消</el-button>
|
</div>
|
</div>
|
</div> -->
|
<!-- 查询分类弹窗 -->
|
<QueryClassSettingDialog v-if="queryClassSetConfig.visible" :editCommonConfig="queryClassSetConfig" />
|
</div>
|
</template>
|
|
<script>
|
import QueryClassSettingDialog from "@/views/other/commonDialog/QueryClassSettingDialog"
|
|
export default {
|
name: "SearchCommonView",
|
components: { QueryClassSettingDialog },
|
props: {
|
queryClass: {
|
type: String,
|
default: "1"
|
},
|
queryClassOptions: {
|
type: Array,
|
default: () => []
|
},
|
searchSel: {
|
type: Object,
|
default: () => {
|
return {
|
value: "name",
|
label: ""
|
}
|
}
|
},
|
searchOptions: {
|
type: Array,
|
default: () => []
|
},
|
labelSearch: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
queryClassSetConfig: {
|
visible: false,
|
infomation: {}
|
},
|
queryClassValue: this.queryClass,
|
searchInput: "",
|
searchSelValue: this.searchSel,
|
isTileSearch: false,
|
tileSearchData: [
|
{
|
selField: "客户名称",
|
selCondition: "包含",
|
keywords: "",
|
filterCriteria: "且"
|
},
|
{
|
selField: "客户名称",
|
selCondition: "包含",
|
keywords: "",
|
filterCriteria: "且"
|
},
|
{
|
selField: "客户名称",
|
selCondition: "包含",
|
keywords: "",
|
filterCriteria: "且"
|
}
|
],
|
selFieldList: ["客户名称", "销售线索编号", "联系人职务"],
|
selConditionList: ["无", "包含", "等于", "不等于", "不包含", "是空值", "不是空值"],
|
filterCriteriaList: ["且", "或"],
|
value2: true
|
}
|
},
|
methods: {
|
queryClassClick() {
|
this.queryClassSetConfig = {
|
visible: true
|
}
|
},
|
searchClick() {
|
this.$emit("searchClick", this.searchSelValue, this.searchInput)
|
},
|
resetClick() {
|
this.searchSelValue = this.searchSel
|
this.searchInput = ""
|
this.$emit("resetClick")
|
},
|
// 高级查找
|
highSearchClick() {},
|
// 平铺查找
|
tileSearchClick() {
|
this.isTileSearch = !this.isTileSearch
|
},
|
labelSearchClick() {},
|
// 删除
|
handleClick(row) {
|
console.log(row)
|
},
|
// 新条件
|
addBtn() {
|
this.tileSearchData.push({
|
selField: "客户名称",
|
selCondition: "包含",
|
keywords: "",
|
filterCriteria: "且"
|
})
|
},
|
// 查找后是否隐藏
|
hideSwitch() {}
|
}
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
.search-list {
|
font-size: 13px;
|
color: #333;
|
.search-top {
|
display: flex;
|
align-items: center;
|
.query-class {
|
display: flex;
|
height: 60px;
|
line-height: 60px;
|
.query-class-title {
|
margin-left: 10px;
|
}
|
.query-class-sel {
|
width: 165px;
|
margin-left: 10px;
|
}
|
.query-class-btn {
|
font-size: 16px;
|
margin-left: 10px;
|
color: #bebebe;
|
cursor: pointer;
|
}
|
}
|
.search {
|
height: 60px;
|
line-height: 60px;
|
margin-left: 20px;
|
.el-icon-search {
|
margin-top: 7px;
|
}
|
}
|
.btn {
|
margin-left: 10px;
|
}
|
.other-search {
|
display: flex;
|
height: 60px;
|
line-height: 60px;
|
margin-left: 20px;
|
.other-search-high {
|
display: flex;
|
cursor: pointer;
|
.high-icon {
|
font-size: 18px;
|
}
|
}
|
.other-search-tile,
|
.other-search-label {
|
display: flex;
|
cursor: pointer;
|
margin-left: 20px;
|
.high-icon {
|
font-size: 18px;
|
}
|
}
|
}
|
}
|
.search-bottom {
|
background-color: #fff;
|
.add-btn {
|
margin-left: 10px;
|
}
|
.others-btn {
|
position: relative;
|
display: flex;
|
justify-content: center;
|
height: 55px;
|
line-height: 55px;
|
background-color: #f5f5f5;
|
border-bottom: 1px solid #dadee5;
|
.blue {
|
background-color: #2185ee;
|
width: 74px;
|
color: #ffffff;
|
}
|
.hide-switch {
|
position: absolute;
|
left: 20px;
|
.el-switch {
|
margin-left: 10px;
|
}
|
}
|
}
|
}
|
}
|
|
::v-deep {
|
.el-input__inner {
|
height: 30px;
|
color: #2765e1;
|
}
|
.el-input__prefix,
|
.el-input__suffix {
|
height: 30px;
|
}
|
.el-input__icon {
|
line-height: 30px;
|
}
|
.search {
|
.el-select .el-input {
|
width: 130px;
|
}
|
.input-with-select .el-input-group__prepend {
|
background-color: #fff;
|
}
|
.el-input__suffix {
|
// 处理前缀图标不垂直居中的问题
|
height: auto;
|
font-size: 15px;
|
&-inner {
|
flex-direction: row-reverse;
|
-webkit-flex-direction: row-reverse;
|
display: flex;
|
}
|
}
|
.el-input--suffix .el-input__inner {
|
padding-right: 45px;
|
}
|
.search-sel .el-input--suffix .el-input__inner {
|
padding-left: 5px;
|
padding-right: 20px;
|
}
|
}
|
}
|
</style>
|
