Skip to content

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

样式问题等

上级 7332ed16
隐藏空白字符变更
内嵌 并排
正在显示 包含 927 行增加 和 0 行删除
src/components/education/custom/course-select copy.vue 0 → 100644
浏览文件 @ 6ff1d387
<template>
<div class="custom-over">
<div class="custom-select-wrapper">
<!-- 学科分类 -->
<div class="subject-level">
<span class="title">学科分类</span>
<span
v-for="(item, index) in allLabelList"
:key="index"
class="item"
:class="{active: item.checked}"
@click="selectLabel(index)"
>
<span class="name" :class="{active: item.checked}">{{item.name}}</span>
</span>
</div>
<!-- 课程分类 -->
<div class="course-class">
<div class="title">课程分类</div>
<div v-if="subLabelList.length" class="item" @click="selectSubLabel(subLabelList[0], 1)">
<span class="name" :class="{'active': subLabelList[0].checked}">全部</span>
</div>
<ul class="check-list">
<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>
<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>
</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) {
// 是全部按钮 第一个全部：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;
}
})
}
}
// 末被选中
} 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);
})
} else {
this.allLabelList[labelIndex + 1].subList.forEach( (item, index) => {
if(index != 0) { // 第一个不用
item.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;
});
this.courseLevel[index].checked = true;
},
// 重置按钮
resetCond() {
this.allLabelList.forEach((item, index) => {
item.checked = false;
item.subList.forEach((sub, subIndex) => {
sub.checked = true;
});
});
this.setSubLabelList(this.allLabelList[0].subList);
this.allLabelList[0].checked = true;
this.selectLevel(0);
},
search() {
let allSelectedLabel = [];
this.allLabelList[0].subList.forEach( (item, index) => {
index && item.checked && allSelectedLabel.push(item.id);
})
this.searchParam.labelIdList = allSelectedLabel;
this.courseLevel.forEach( item => {
if(item.checked) {
this.searchParam.grade = item.value;
}
})
this.searchParam.pageNo = 1;
this.setSearchParam(this.searchParam);
console.log(allSelectedLabel);
}
}
};
</script>
<style lang="less" scoped>
.custom-select-wrapper {
// width: 1090px;
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;
// &::after {
// position: absolute;
// content: "";
// top: 14px;
// left: 0px;
// height: 20px;
// border-left: 1px solid #c7c8c9;
// }
&.checked {
color: #fff;
z-index: 3;
background: #449284;
}
&:first-child {
border-radius: 6px 0px 0px 0px;
}
}
.split {
flex-shrink: 0;
position: absolute;
top: 14px;
left: 0px;
z-index: 2;
display: inline-block;
height: 20px;
// width: 1px;
// background: #c7c8c9;
border-left: 1px solid #c7c8c9;
}
.item:nth-child(1) > .split,
.item.checked + .item > .split,
.split.acitve {
display: none;
}
}
}
.subject-level {
min-width: 1300px;
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;
margin-bottom: -1px;
&.active {
border-bottom: 2px solid #449284;
}
.name {
height: 26px;
line-height: 26px;
display: inline-block;
padding: 0px 10px;
border-radius: 2px;
&.active {
color: #449284;
font-weight: 700;
// background: #449284;
}
}
}
}
.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 20px;
// 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: 40px;
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: 30px;
padding-right: 30px;
min-width: 1125px;
}
</style>
src/components/education/custom/course-select-org copy.vue 0 → 100644
浏览文件 @ 6ff1d387
<template>
<div class="custom-over">
<div class="custom-select-wrapper">
<!-- 学科分类 -->
<div class="subject-level">
<span class="title">学科分类</span>
<span
v-for="(item, index) in allLabelListOrg"
:key="index"
class="item"
:class="{active: item.checked}"
@click="selectLabel(index)"
>
<span class="name" :class="{active: item.checked}">{{item.name}}</span>
</span>
</div>
<!-- 课程分类 -->
<div class="course-class">
<div class="title">课程分类</div>
<div v-if="subLabelListOrg.length" class="item" @click="selectSubLabel(subLabelListOrg[0], 1)">
<span class="name" :class="{'active': subLabelListOrg[0].checked}">全部</span>
</div>
<ul class="check-list">
<li
class="sub-item"
:class="{'active': item.checked}"
v-for="(item, index) in subLabelListOrg.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>
<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>
</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(['searchParamOrg', 'allLabelListOrg', 'subLabelListOrg'])
},
components: {},
methods: {
...mapActions(['setSubLabelListOrg', 'setSearchParamOrg']),
// 选择一级
selectLabel(index) {
this.allLabelListOrg.forEach(element => {
element.checked = false;
});
this.allLabelListOrg[index].checked = true;
let subLabelListOrg = this.allLabelListOrg[index].subList;
this.setSubLabelListOrg(subLabelListOrg);
this.$forceUpdate();
},
// 选择二级
selectSubLabel(item, type) {
item.checked = !item.checked;
console.log('selectSubLabel', item);
// 如果被选中
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.allLabelListOrg[0].subList.forEach( (item, index) => {
if(index != 0) { // 第一个不用
item.checked = true;
}
})
// 将其它所有全部置为选中
this.allLabelListOrg.forEach( (item, index) => {
index != 0 && (item.subList[0].checked = true);
})
} else {
this.allLabelListOrg[labelIndex + 1].subList.forEach( (item, index) => {
if(index != 0) { // 第一个不用
item.checked = true;
}
})
}
}
// 末被选中
} 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.allLabelListOrg[0].subList.forEach( (item, index) => {
if(index != 0) { // 第一个不用
item.checked = false;
}
})
// 将其它所有全部置为选中
this.allLabelListOrg.forEach( (item, index) => {
index != 0 && (item.subList[0].checked = false);
})
} else {
this.allLabelListOrg[labelIndex + 1].subList.forEach( (item, index) => {
if(index != 0) { // 第一个不用
item.checked = false;
}
})
}
}
}
// 无论哪种操作，都要重置各个“全部”按钮
this.allLabelListOrg.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.allLabelListOrg[index].subList[0].checked = needhecked;
})
this.$forceUpdate();
},
// 选中等级
selectLevel(index) {
this.courseLevel.forEach(element => {
element.checked = false;
});
this.courseLevel[index].checked = true;
},
// 重置按钮
resetCond() {
this.allLabelListOrg.forEach((item, index) => {
item.checked = false;
item.subList.forEach((sub, subIndex) => {
sub.checked = true;
});
});
this.setSubLabelListOrg(this.allLabelListOrg[0].subList);
this.allLabelListOrg[0].checked = true;
this.selectLevel(0);
},
search() {
let allSelectedLabelOrg = [];
this.allLabelListOrg[0].subList.forEach( (item, index) => {
index && item.checked && allSelectedLabelOrg.push(item.id);
})
this.searchParamOrg.labelIdList = allSelectedLabelOrg;
this.courseLevel.forEach( item => {
if(item.checked) {
this.searchParamOrg.grade = item.value;
}
})
this.searchParamOrg.pageNo = 1;
this.setSearchParamOrg(this.searchParamOrg);
console.log(allSelectedLabelOrg);
}
}
};
</script>
<style lang="less" scoped>
.custom-select-wrapper {
// width: 1090px;
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;
// &::after {
// position: absolute;
// content: "";
// top: 14px;
// left: 0px;
// height: 20px;
// border-left: 1px solid #c7c8c9;
// }
&.checked {
color: #fff;
z-index: 3;
background: #449284;
}
&:first-child {
border-radius: 6px 0px 0px 0px;
}
}
.split {
flex-shrink: 0;
position: absolute;
top: 14px;
left: 0px;
z-index: 2;
display: inline-block;
height: 20px;
// width: 1px;
// background: #c7c8c9;
border-left: 1px solid #c7c8c9;
}
.item:nth-child(1) > .split,
.item.checked + .item > .split,
.split.acitve {
display: none;
}
}
}
.subject-level {
min-width: 1300px;
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;
margin-bottom: -1px;
&.active {
border-bottom: 2px solid #449284;
}
.name {
height: 26px;
line-height: 26px;
display: inline-block;
padding: 0px 10px;
border-radius: 2px;
&.active {
color: #449284;
font-weight: 700;
// background: #449284;
}
}
}
}
.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 20px;
// 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: 40px;
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: 30px;
padding-right: 30px;
min-width: 1125px;
}
</style>
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或