Skip to content

P
pica.cloud.web-education-admin
提交 bd8e33dd 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

查询条件问题

上级 837d30e6
显示空白字符变更
内嵌 并排
正在显示 包含 532 行增加 和 51 行删除
src/components/education/custom/course-list.vue
浏览文件 @ bd8e33dd
......@@ -8,8 +8,8 @@
<li class="order">
<div class="num" @click="toggleOrder">
<span>学习人数</span>
<img v-show="isRise" src="../../../assets/custom/icon/icon-rise.png" alt />
<img v-show="!isRise" src="../../../assets/custom/icon/icon-drop.png" alt />
<img v-show="!isRise" src="../../../assets/custom/icon/icon-rise.png" alt />
<img v-show="isRise" src="../../../assets/custom/icon/icon-drop.png" alt />
</div>
<div class="cart-wrapper">
<div class="cart" @click="toggleCart">
......
src/components/education/custom/course-select copy 3.vue 0 → 100644
浏览文件 @ bd8e33dd
<template>
<div class="custom-select-wrapper" style="width: 1300px;overflow:auto;">
<div class="department-label">
<span
v-for="(item, index) in allLabelList"
:key="index"
class="item"
:class="{checked: item.checked}"
@click="selectLabel(index)"
>
<span class="split" :class="{acitve: item.checked}"></span>
{{item.name}}
</span>
</div>
<!-- 课程分类 -->
<div class="course-class">
<div class="title">课程分类</div>
<div class="item" @click="selectSubLabel(subLabelList[0], 1)">
<span class="name" :class="{'active': subLabelList[0].checked}">全部</span>
</div>
<ul class="check-list">
<!-- <el-checkbox-group v-model="checkList" @change="handleClassChange">
<el-checkbox
v-for="(item, index) in subLabelList.slice(1)"
:label="item.id"
:key="index"
@change="selectSubLabel(item)"
>{{item.name}}</el-checkbox>
</el-checkbox-group> -->
<li
class="sub-item"
:class="{'active': item.checked}"
v-for="(item, index) in subLabelList.slice(1)"
:key="index"
@click="selectSubLabel(item, 2)"
>
<img v-show="item.checked" src="../../../assets/custom/icon/label-sel.png" alt />
<img v-show="!item.checked" src="../../../assets/custom/icon/label-sel-no.png" alt />
{{item.name}}
</li>
</ul>
<!-- <el-checkbox-group v-model="checkList">
<el-checkbox label="复选框 A"></el-checkbox>
<el-checkbox label="复选框 B"></el-checkbox>
<el-checkbox label="复选框 C"></el-checkbox>
<el-checkbox label="禁用"></el-checkbox>
<el-checkbox label="选中且禁用"></el-checkbox>
<el-checkbox label="复选框 A"></el-checkbox>
<el-checkbox label="复选框 B"></el-checkbox>
<el-checkbox label="复选框 C"></el-checkbox>
<el-checkbox label="禁用"></el-checkbox>
<el-checkbox label="选中且禁用"></el-checkbox>
<el-checkbox label="复选框 B"></el-checkbox>
<el-checkbox label="复选框 C"></el-checkbox>
<el-checkbox label="禁用"></el-checkbox>
<el-checkbox label="选中且禁用"></el-checkbox>
<el-checkbox label="复选框 B"></el-checkbox>
<el-checkbox label="复选框 C"></el-checkbox>
<el-checkbox label="禁用"></el-checkbox>
<el-checkbox label="选中且禁用"></el-checkbox>
<el-checkbox label="复选框 B"></el-checkbox>
<el-checkbox label="复选框 C"></el-checkbox>
<el-checkbox label="禁用"></el-checkbox>
<el-checkbox label="选中且禁用"></el-checkbox>
<el-checkbox label="复选框 B"></el-checkbox>
<el-checkbox label="复选框 C"></el-checkbox>
<el-checkbox label="禁用"></el-checkbox>
<el-checkbox label="选中且禁用"></el-checkbox>
</el-checkbox-group>-->
<div class="right"></div>
</div>
<!-- 课程等级 -->
<div class="course-level">
<span class="title">课程等级</span>
<span
class="item"
v-for="(item, index) in courseLevel"
:key="index"
@click="selectLevel(index)"
>
<span class="name" :class="{active: item.checked}">{{item.name}}</span>
</span>
</div>
<div class="button-wrapper">
<el-button class="add-button" plain size="small" @click="resetCond">重 置</el-button>
<el-button class="add-button" size="small" type="primary" @click="search">查 询</el-button>
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
export default {
data() {
return {
courseLevel: [
{ name: "全部", value: 0, checked: true },
{ name: "初级", value: 1, checked: false },
{ name: "中级", value: 2, checked: false },
{ name: "高级", value: 3, checked: false }
],
checkList: [431, 441]
};
},
props: {
dataList: {
type: Array,
default: () => {
return [
{
name: "全部",
checked: true
},
{
name: "内科",
checked: false
},
{
name: "神经科",
checked: false
},
{
name: "肿瘤科",
checked: false
},
{
name: "妇产科",
checked: false
},
{
name: "内科",
checked: false
},
{
name: "神经科",
checked: false
},
{
name: "肿瘤科",
checked: false
},
{
name: "妇产科",
checked: false
},
{
name: "内科",
checked: false
},
{
name: "神经科",
checked: false
},
{
name: "肿瘤科",
checked: false
},
{
name: "妇产科",
checked: false
}
];
}
}
},
computed: {
...mapGetters(['searchParam', 'allLabelList', 'subLabelList'])
},
components: {},
methods: {
...mapActions(['setSubLabelList', 'setSearchParam']),
selectLabel(index) {
this.allLabelList.forEach(element => {
element.checked = false;
});
this.allLabelList[index].checked = true;
let subLabelList = this.allLabelList[index].subList;
this.setSubLabelList(subLabelList);
},
// 选择二级
selectSubLabel(item, type) {
item.checked = !item.checked;
console.log('selectSubLabel', item);
// 如果是没有选中，则直接退出
if(!item.checked) return;
// 是全部按钮 第一个全部：parentid-0
if(type == 1) {
let labelArr = item.id.split('-'), labelType = labelArr[0], labelIndex = labelArr[1] - 0;
labelArr = item.id.split('-');
if(labelType == 'parentid') {
// 将所有子项目清空
this.allLabelList[0].subList.forEach( (item, index) => {
if(index != 0) { // 第一个不用
item.checked = false;
}
})
// 将其它所有全部置为不选中
this.allLabelList.forEach( (item, index) => {
index != 0 && (item.subList[0].checked = false);
})
} else {
this.allLabelList[labelIndex + 1].subList.forEach( (item, index) => {
if(index != 0) { // 第一个不用
item.checked = false;
}
})
this.allLabelList[0].subList[0].checked = false;
}
// 各个小label
} else if(type == 2) {
let parentIndex = item.parentIndex;
this.allLabelList[0].subList[0].checked = false;
this.allLabelList[parentIndex + 1].subList[0].checked = false;
//
}
this.$forceUpdate();
},
selectLevel(index) {
this.courseLevel.forEach(element => {
element.checked = false;
});
this.courseLevel[index].checked = true;
},
handleClassChange() {
// let checkedCount = value.length;
// this.checkAll = checkedCount === this.cities.length;
// this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
},
resetCond() {
this.allLabelList.forEach((item, index) => {
item.checked = false;
item.subList.forEach((sub, subIndex) => {
sub.checked = false;
});
});
this.setSubLabelList(this.allLabelList[0].subList);
this.allLabelList[0].checked = true;
this.selectLevel(0);
},
search() {
let allSelectedLabel = [];
this.allLabelList.forEach( item => {
// 如果是分类中的全部被选中，则其下所有将添加到查询列表中
if(item.subList[0].checked) {
item.subList.forEach( (sub, index) => {
if(index != 0) {
allSelectedLabel.push(sub.id);
}
})
// 否则只要被选中的
} else {
item.subList.forEach( (sub, index) => {
if(index != 0 && sub.checked) {
allSelectedLabel.push(sub.id);
}
})
}
});
this.searchParam.labelIdList = allSelectedLabel;
// this.searchParam.grade = allSelectedLabel;
this.courseLevel.forEach( item => {
if(item.checked) {
this.searchParam.grade = item.value;
}
})
this.setSearchParam(this.searchParam);
console.log(allSelectedLabel);
}
}
};
</script>
<style lang="less" scoped>
.custom-select-wrapper {
user-select: none;
.department-label {
display: flex;
flex-direction: row;
height: 48px;
line-height: 48px;
border-bottom: 2px solid #449284;
border-radius: 6px 6px 0px 0px;
.item {
cursor: pointer;
position: relative;
z-index: 1;
display: inline-block;
padding: 0 22px;
font-size: 16px;
color: #666666;
&.checked {
color: #fff;
z-index: 3;
background: #449284;
}
&:first-child {
border-radius: 6px 0px 0px 0px;
}
}
.split {
position: absolute;
top: 14px;
left: 0px;
z-index: 2;
display: inline-block;
height: 20px;
width: 1px;
background: #c7c8c9;
}
.item:nth-child(1) > .split,
.item.checked + .item > .split,
.split.acitve {
display: none;
}
}
}
.course-level {
display: flex;
flex-direction: row;
box-sizing: content-box;
height: 56px;
line-height: 56px;
padding-left: 20px;
// margin: 16px 0 16px 20px;
border-bottom: 1px dotted #e4e7ed;
.title {
display: inline-block;
padding: 0 10px;
color: #999999;
}
.item {
cursor: pointer;
display: inline-block;
margin: 0 5px;
color: #333333;
.name {
height: 26px;
line-height: 26px;
display: inline-block;
padding: 0px 10px;
border-radius: 2px;
&.active {
color: #fff;
background: #449284;
}
}
}
}
.course-class {
display: flex;
flex-direction: row;
box-sizing: content-box;
padding: 10px 0;
padding-left: 20px;
// margin: 16px 0 16px 20px;
border-bottom: 1px dashed #e4e7ed;
.title {
height: 56px;
line-height: 56px;
display: inline-block;
padding: 0 10px;
color: #999999;
}
.item {
cursor: pointer;
height: 56px;
line-height: 56px;
display: inline-block;
margin: 0 5px;
color: #333333;
.name {
height: 26px;
line-height: 26px;
display: inline-block;
padding: 0px 10px;
border-radius: 2px;
margin-right: 16px;
&.active {
color: #fff;
background: #449284;
}
}
}
.check-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 14px;
margin-right: 80px;
flex: 1;
.sub-item {
cursor: pointer;
display: flex;
flex-direction: row;
align-items: center;
height: 30px;
line-height: 30px;
font-size: 14px;
color: #333333;
margin-right: 30px;
img {
width: 16px;
height: 16px;
margin-right: 5px;
}
&.active {
color: #449284;
}
}
}
.el-checkbox {
height: 30px;
line-height: 30px;
}
}
.button-wrapper {
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-top: 20px;
margin-right: 50px;
}
</style>
\ No newline at end of file
src/components/education/custom/course-select.vue
浏览文件 @ bd8e33dd
......@@ -185,21 +185,53 @@ export default {
selectSubLabel(item, type) {
item.checked = !item.checked;
console.log('selectSubLabel', item);
// 如果是没有选中，则直接退出
if(!item.checked) return;
// 如果被选中
if(item.checked) {
// 是全部按钮 第一个全部：parentid-0
if(type == 1) {
let labelArr = item.id.split('-'), labelType = labelArr[0], labelIndex = labelArr[1] - 0;
labelArr = item.id.split('-');
if(labelType == 'parentid') {
// 将所有子项目选中
this.allLabelList[0].subList.forEach( (item, index) => {
if(index != 0) { // 第一个不用
item.checked = true;
}
})
// 将其它所有全部置为选中
this.allLabelList.forEach( (item, index) => {
index != 0 && (item.subList[0].checked = true);
})
} else {
this.allLabelList[labelIndex + 1].subList.forEach( (item, index) => {
if(index != 0) { // 第一个不用
item.checked = true;
}
})
// this.allLabelList[0].subList[0].checked = false;
}
// 点击各个小label
} else if(type == 2) {
let parentIndex = item.parentIndex;
// 查看所有
// this.allLabelList[0].subList[0].checked = false;
this.allLabelList[parentIndex + 1].subList[0].checked = false;
//
}
// 末被选中
} else {
// 是全部按钮 第一个全部：parentid-0
if(type == 1) {
let labelArr = item.id.split('-'), labelType = labelArr[0], labelIndex = labelArr[1] - 0;
labelArr = item.id.split('-');
if(labelType == 'parentid') {
// 将所有子项目清空
// 将所有子项目选中
this.allLabelList[0].subList.forEach( (item, index) => {
if(index != 0) { // 第一个不用
item.checked = false;
}
})
// 将其它所有全部置为不选中
// 将其它所有全部置为选中
this.allLabelList.forEach( (item, index) => {
index != 0 && (item.subList[0].checked = false);
})
......@@ -209,17 +241,28 @@ export default {
item.checked = false;
}
})
this.allLabelList[0].subList[0].checked = false;
}
// 各个小label
} else if(type == 2) {
let parentIndex = item.parentIndex;
this.allLabelList[0].subList[0].checked = false;
this.allLabelList[parentIndex + 1].subList[0].checked = false;
//
}
}
// 无论哪种操作，都要重置各个“全部”按钮
this.allLabelList.forEach( (parent, index) => {
let needhecked = true, subList = parent.subList;
for(let i = 1; i < subList.length; i ++) {
if(!subList[i].checked) {
needhecked = false;
break;
}
}
this.allLabelList[index].subList[0].checked = needhecked;
})
this.$forceUpdate();
},
// 选中等级
selectLevel(index) {
this.courseLevel.forEach(element => {
element.checked = false;
......@@ -244,23 +287,33 @@ export default {
},
search() {
let allSelectedLabel = [];
this.allLabelList.forEach( item => {
// 如果是分类中的全部被选中，则其下所有将添加到查询列表中
if(item.subList[0].checked) {
item.subList.forEach( (sub, index) => {
if(index != 0) {
allSelectedLabel.push(sub.id);
}
})
// 否则只要被选中的
} else {
item.subList.forEach( (sub, index) => {
if(index != 0 && sub.checked) {
allSelectedLabel.push(sub.id);
}
// this.allLabelList.forEach( item => {
// // 如果是分类中的全部被选中，则其下所有将添加到查询列表中
// if(item.subList[0].checked) {
// item.subList.forEach( (sub, index) => {
// if(index != 0) {
// allSelectedLabel.push(sub.id);
// }
// })
// // 否则只要被选中的
// } else {
// item.subList.forEach( (sub, index) => {
// if(index != 0 && sub.checked) {
// allSelectedLabel.push(sub.id);
// }
// })
// }
// });
// this.searchParam.labelIdList = allSelectedLabel;
// // this.searchParam.grade = allSelectedLabel;
// this.courseLevel.forEach( item => {
// if(item.checked) {
// this.searchParam.grade = item.value;
// }
// })
this.allLabelList[0].subList.forEach( (item, index) => {
index && item.checked && allSelectedLabel.push(item.id);
})
}
});
this.searchParam.labelIdList = allSelectedLabel;
// this.searchParam.grade = allSelectedLabel;
this.courseLevel.forEach( item => {
......
src/utils/fetch.js
浏览文件 @ bd8e33dd
......@@ -54,7 +54,7 @@ service.interceptors.request.use(config => {
}
if( process.env.BUILD_ENV == "development" ){ // 本地开发环境
// console.log('环境变量>>>> ', process.env.BUILD_ENV);
config.headers['token'] = '08C051899378462280EF479538CE43CA';
config.headers['token'] = '3AD5FF6E07894218969500173624A30F';
// config.headers['token'] = localStorage.getItem('storageToken')
}else{
config.headers['token'] = localStorage.getItem('storageToken')
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或