案例筛选条件多选控制

This commit is contained in:
lmj
2022-12-09 12:20:46 +08:00
parent 39f0a45604
commit f52e0459cb

View File

@@ -7,10 +7,10 @@
<div class="xcontent2-main" style="margin-right: 30px;">
<div class="left-div">
<div class="search-div">
<div class="searchbar" v-if="searchTags.length > 0">
<div class="searchbar" v-if="fieldData.length > 0">
<div style="line-height: 30px;">
<span class="item-title">搜索条件</span>
<el-tag closable v-for="(tag, tagIdx) in searchTags" :key="tagIdx" @close="tagsClose(tag,tagIdx)">{{ tag.value }}</el-tag>
<el-tag closable v-for="(tag, tagIdx) in fieldData" :key="tagIdx" @close="tagsClose(tag,tagIdx)">{{ tag.name }}</el-tag>
</div>
</div>
<div class="search-item">
@@ -21,10 +21,14 @@
<span class="item-line"></span>
</div>
<div style="flex:1;">
<el-radio-group v-model="queryCondition.orgDomain" size="mini" @change="search()">
<el-radio-button :label="null">全部</el-radio-button>
<el-radio-button v-for="item in domain" :key="item.code" :label="item.code"> {{ item.name}}</el-radio-button>
</el-radio-group>
<div class="field">
<div :class="fielclass ? 'fieldactive' :'' ">全部</div>
<div :class="item.fielclass ? 'fieldactive' :'' " @click="fieldswich(item)" v-for="item in domain" :key="item.code">{{item.name}}</div>
</div>
<!-- <el-checkbox-group v-model="queryCondition.orgDomain" size="mini" @change="search()">
<el-checkbox-button :label="null">全部</el-checkbox-button>
<el-checkbox-button v-for="item in domain" :key="item.code" :label="item.code"> {{ item.name}}</el-checkbox-button>
</el-checkbox-group> -->
</div>
</div>
</div>
@@ -38,12 +42,16 @@
<span class="item-line"></span>
</div>
<div style="flex:1" id="searchBox">
<el-radio-group style="display:flex;" v-model="queryCondition.majorType" size="mini" @change="search()">
<div class="field">
<div :class="fielclass ? 'fieldactive' :'' ">全部</div>
<div :class="item.fielclass ? 'fieldactive' :'' " @click="fieldmajor(item)" v-for="item in speciData" :key="item.code">{{item.name}}</div>
</div>
<!-- <el-radio-group style="display:flex;" v-model="queryCondition.majorType" size="mini" @change="search()">
<el-radio-button :label="null">全部</el-radio-button>
<div>
<el-radio-button v-for="item in speciData" :key="item.code" :label="item.code" > {{ item.name }} </el-radio-button>
</div>
</el-radio-group>
</el-radio-group> -->
</div>
</div>
@@ -278,8 +286,8 @@ export default {
orderField: "views",
// breCommend:null,
keyWord: "",
majorType:null, //专业分类
orgDomain: null, // 组织领域
majorType:'', //专业分类
orgDomain: '', // 组织领域
orderAsc: false,
excellent:false
},
@@ -292,10 +300,20 @@ export default {
isFind: false,
searchTags: [],
orgData: [],
fieldData:[],
fielclass:true,
orgDomainData:'',
orgsto:[],
majorTypeData:'',
majsto:[],
Domarr:[],
majarr:[],
};
},
mounted() {
if(this.searchTags.length == 0){
this.queryCondition.majorType = null;
this.queryCondition.orgDomain = null;
@@ -337,6 +355,39 @@ export default {
window.removeEventListener("scroll", this.handleScroll);
},
methods: {
fieldmajor(item){//专业分类
this.majarr.push(item);//搜索条件
this.fieldData = Array.from(new Set(this.majarr))//过滤重复的数据
this.majsto.push(item.code);
this.majorTypeData = this.majsto.toString()//传给后端
this.queryCondition.majorType = this.majorTypeData
item.fielclass = !item.fielclass;
this.getCaseData();
// this.lmj();
},
fieldswich(item){//组织领域
this.Domarr.push(item);//搜索条件
this.fieldData = Array.from(new Set(this.Domarr))//过滤重复的数据
this.orgsto.push(item.code);
this.orgDomainData = this.orgsto.toString()//传给后端
this.queryCondition.orgDomain = this.orgDomainData;
item.fielclass = !item.fielclass;
this.getCaseData();
this.lmj();
},
lmj(){
this.fieldData.forEach((item,idx) =>{
if(item.fielclass == false){
console.log(item,'lll')
let index = this.fieldData.indexOf(item);
console.log(index,'index')
// 删除这个为false的item
this.fieldData.splice(index,1)
// console.log(this.fieldData)
this.fieldData.splice(item,1)
}
})
},
banJump() {
if(this.resonimg.JumpUrl) {
window.open(this.resonimg.JumpUrl);
@@ -353,6 +404,12 @@ export default {
let $this=this;
apiCase.majorTypes().then(res =>{
if(res.status == 200){
if (res.status == 200) {
res.result.forEach(item =>{
item.fielclass = false;
})
}
this.speciData = res.result;
this.$nextTick(function() {
$this.initHeight = document.getElementById("searchBox").offsetHeight;
@@ -432,6 +489,9 @@ export default {
let key = "org_domain";
apiDict.items(key).then(res => {
if (res.status == 200) {
res.result.forEach(item =>{
item.fielclass = false;
})
this.domain = res.result;
if(res.result.length > 0) {
this.orgDomainLevel(res.result)
@@ -567,6 +627,7 @@ export default {
this.getCaseData();
},
async getCaseData() {
// this.fieldData
this.getTags();
if (this.queryCondition.pageIndex == 1) {
this.caseList.list = [];
@@ -637,9 +698,7 @@ export default {
}
},
tagsClose(tag, index) {
for (let i in this.queryCondition) {
if (tag.type === i) {
if (i == "majorType") {
this.queryCondition.majorType = '';
@@ -659,7 +718,6 @@ export default {
if (i == "orgDomain") {
this.queryCondition.orgDomain = null;
}
this.getCaseData();
}
}
@@ -734,6 +792,31 @@ export default {
</script>
<style scoped lang="scss">
.field{
display: flex;
div{
margin-right: 25px;
font-size: 16px;
line-height: 25px;
color: #333;
}
.fieldactive{
color: #387DF7;
}
}
::v-deep .el-checkbox-button.is-checked .el-checkbox-button__inner{
box-shadow: none !important;
}
::v-deep .el-checkbox-button.is-checked .el-checkbox-button__inner{
color: #387df7 !important;
background-color: #fff !important;
}
::v-deep .el-checkbox-button--mini .el-checkbox-button__inner{
font-size: 14px;
}
::v-deep .el-checkbox-button .el-checkbox-button__inner{
border: none !important;
}
.notcoures{
text-align: center;
img{