提交 b02aae01 编写于 作者: guangjun.yang's avatar guangjun.yang

其它几个bug等

上级 5e9a1f4e
<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])">
<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)"
>
<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">重 置</el-button>
<el-button class="add-button" size="small" type="primary">查 询</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(['allLabelList', 'subLabelList'])
},
components: {},
methods: {
...mapActions(['setSubLabelList']),
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) {
console.log(item);
item.checked = !item.checked;
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;
}
}
};
</script>
<style lang="less" scoped>
.custom-select-wrapper {
.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
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<!-- 课程分类 --> <!-- 课程分类 -->
<div class="course-class"> <div class="course-class">
<div class="title">课程分类</div> <div class="title">课程分类</div>
<div class="item" @click="selectSubLabel(subLabelList[0])"> <div class="item" @click="selectSubLabel(subLabelList[0], 1)">
<span class="name" :class="{'active': subLabelList[0].checked}">全部</span> <span class="name" :class="{'active': subLabelList[0].checked}">全部</span>
</div> </div>
<ul class="check-list"> <ul class="check-list">
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
:class="{'active': item.checked}" :class="{'active': item.checked}"
v-for="(item, index) in subLabelList.slice(1)" v-for="(item, index) in subLabelList.slice(1)"
:key="index" :key="index"
@click="selectSubLabel(item)" @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.png" alt />
<img v-show="!item.checked" src="../../../assets/custom/icon/label-sel-no.png" alt /> <img v-show="!item.checked" src="../../../assets/custom/icon/label-sel-no.png" alt />
......
...@@ -500,7 +500,7 @@ export default { ...@@ -500,7 +500,7 @@ export default {
.then(res => { .then(res => {
closeLoading(vm); closeLoading(vm);
if (res.code == "000000") { if (res.code == "000000") {
// this.$emit('hideSave',res.data.projectData.projectStatus) this.$emit('hideSave',res.data.projectData.projectStatus)
vm.setBaseMessage(res.data); vm.setBaseMessage(res.data);
} else { } else {
vm.$message.info(res.message); vm.$message.info(res.message);
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<span class="sub">可上下拖拽课程行,调整课程在列表页的展示顺序</span> <span class="sub">可上下拖拽课程行,调整课程在列表页的展示顺序</span>
</div> </div>
<div v-if="isPreview == 1 || projectStatus == 1" class="cart-list"> <div v-if="isPreview == 1 || projectStatus != 1" class="cart-list">
<div class="cart-course is-preview" v-for="(item, index) in cartList" :key="index"> <div class="cart-course is-preview" v-for="(item, index) in cartList" :key="index">
<div class="img"> <div class="img">
<img :src="item.courseImageUrl" alt /> <img :src="item.courseImageUrl" alt />
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
</div> </div>
</div> </div>
<draggable v-if="isPreview != 1 && projectStatus != 1" class="cart-list" v-model="cartList"> <draggable v-else class="cart-list" v-model="cartList">
<div class="cart-course" v-for="(item, index) in cartList" :key="index"> <div class="cart-course" v-for="(item, index) in cartList" :key="index">
<div class="img"> <div class="img">
<img :src="item.courseImageUrl" alt /> <img :src="item.courseImageUrl" alt />
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</el-col> </el-col>
<el-col :span="5" :offset="5"> <el-col :span="5" :offset="5">
<div v-if="!canNext" class="dis-btn">下一步</div> <div v-if="!canNext" class="dis-btn">下一步</div>
<el-button v-if="active!=0 && projectStatus==1" size="small" @click="save">暂存</el-button> <el-button v-if="active!=0 && projectStatus==1 && isPreview != 1" size="small" @click="save">暂存</el-button>
<el-button v-if="active!==2 && canNext" size="small" type="primary" @click="nextStep">下一步</el-button> <el-button v-if="active!==2 && canNext" size="small" type="primary" @click="nextStep">下一步</el-button>
<el-button v-if="active==2" size="small" type="primary" @click="complete">完成</el-button> <el-button v-if="active==2" size="small" type="primary" @click="complete">完成</el-button>
</el-col> </el-col>
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册