mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-09 19:06:43 +08:00
案例筛选条件多选控制
This commit is contained in:
@@ -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{
|
||||
|
||||
Reference in New Issue
Block a user