Skip to content

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

最小屏幕大小

上级 931bc6e5
显示空白字符变更
内嵌 并排
正在显示 包含 471 行增加 和 52 行删除
src/components/education/custom/course-list.vue
浏览文件 @ c5b43d92
...@@ -156,6 +156,9 @@ export default { ...@@ -156,6 +156,9 @@ export default {
min-width: 1180px; min-width: 1180px;
max-width: 1600px; max-width: 1600px;
.course-header { .course-header {
position: relative;
top: 0;
left: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
height: 78px; height: 78px;
...@@ -177,6 +180,10 @@ export default { ...@@ -177,6 +180,10 @@ export default {
} }
} }
.order { .order {
position: absolute;
// top: 0;
left: 880px;
width: 200px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
......
src/components/education/custom/course-select copy 4.vue 0 → 100644
浏览文件 @ c5b43d92
<template>
<div class="custom-select-wrapper" style="width: 1000px;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 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>
</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 = false;
});
});
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 {
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: 140px;
}
</style>
\ No newline at end of file
src/components/education/custom/course-select.vue
浏览文件 @ c5b43d92
<template> <template>
<div class="custom-select-wrapper" style="width: 1300px;overflow:auto;"> <div>
<div class="custom-select-wrapper" style="overflow:auto;">
<div class="department-label"> <div class="department-label" style="width: 1200px;">
<span <span
v-for="(item, index) in allLabelList" v-for="(item, index) in allLabelList"
:key="index" :key="index"
...@@ -13,7 +13,8 @@ ...@@ -13,7 +13,8 @@
{{item.name}} {{item.name}}
</span> </span>
</div> </div>
</div>
<div class="custom-select-wrapper">
<!-- 课程分类 --> <!-- 课程分类 -->
<div class="course-class"> <div class="course-class">
<div class="title">课程分类</div> <div class="title">课程分类</div>
...@@ -54,6 +55,7 @@ ...@@ -54,6 +55,7 @@
<el-button class="add-button" size="small" type="primary" @click="search">查 询</el-button> <el-button class="add-button" size="small" type="primary" @click="search">查 询</el-button>
</div> </div>
</div> </div>
</div>
</template> </template>
<script> <script>
import { mapGetters, mapActions } from 'vuex' import { mapGetters, mapActions } from 'vuex'
...@@ -257,6 +259,7 @@ export default { ...@@ -257,6 +259,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.custom-select-wrapper { .custom-select-wrapper {
width: 1090px;
user-select: none; user-select: none;
.department-label { .department-label {
display: flex; display: flex;
...@@ -372,7 +375,7 @@ export default { ...@@ -372,7 +375,7 @@ export default {
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 14px; margin-top: 14px;
margin-right: 80px; margin-right: 40px;
flex: 1; flex: 1;
.sub-item { .sub-item {
cursor: pointer; cursor: pointer;
...@@ -402,8 +405,8 @@ export default { ...@@ -402,8 +405,8 @@ export default {
.button-wrapper { .button-wrapper {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-end; // justify-content: flex-end;
margin-top: 20px; margin-top: 20px;
margin-right: 140px; margin-left: 956px;
} }
</style> </style>
\ No newline at end of file
src/components/education/custom/select-course-comp.vue
浏览文件 @ c5b43d92
...@@ -23,7 +23,7 @@ export default { ...@@ -23,7 +23,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.select-course-wrapper { .select-course-wrapper {
width: 1300px; // width: 1300px;
.top-line { .top-line {
// width: 120%; // width: 120%;
height: 10px; height: 10px;
......
src/views/education/edit-custom.vue
浏览文件 @ c5b43d92
...@@ -539,7 +539,7 @@ export default { ...@@ -539,7 +539,7 @@ export default {
top: 125px; top: 125px;
} }
.step-content { .step-content {
min-width: 1300px; // min-width: 1300px;
background: #fff; background: #fff;
z-index: 1001; z-index: 1001;
background: #fff; background: #fff;
......
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或