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

项目整理等

上级 95c7ec2e
<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
<template>
<div class="custom-select-wrapper">
<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">
<span class="name active">全部</span>
</div>
<div class="check-list">
<el-checkbox-group v-model="checkList" @change="handleClassChange">
<el-checkbox
v-for="(item, index) in subLabelList"
:label="item.id"
:key="index"
>{{item.name}}</el-checkbox>
</el-checkbox-group>
<!-- <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>
<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" size="small" type="primary">查 询</el-button>
<el-button class="add-button" plain size="small">重 置</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);
},
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 {
margin-top: 14px;
margin-right: 80px;
flex: 1;
}
.el-checkbox {
height: 30px;
line-height: 30px;
}
}
.button-wrapper {
margin-top: 20px;
margin-right: 50px;
// height: 60px;
// line-height: 60px;
.add-button {
float: right;
margin: 0 10px;
}
}
</style>
\ No newline at end of file
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
<template>
<div class="notice-item-shield">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
<div class="component-content screenSet" id="screenSet">
<div class="header-title" style="position:relative;">
公告
<el-button
type="primary"
style="position: absolute;right: 30px;bottom: 8px;"
size="small"
@click="beforeConfirm()"
>发布</el-button>
<el-button
type="primary"
style="position: absolute;right: 100px;bottom: 8px;"
size="small"
@click="cancleEdit()"
>取消</el-button>
</div>
<el-row :gutter="30" class="row" type="flex" style="margin-top: 10px;">
<el-form :model="formData" ref="formData" :rules="rules" label-width="120px" class="form-inline">
<el-form-item label="是否开启公告:" prop="projectIntro" style="min-width: 1000px;margin-bottom: 10px">
<el-col :span="20">
<el-radio-group size="small" v-model="formData.openFlag">
<el-radio :label="1">开启</el-radio>
<el-radio :label="2">关闭</el-radio>
</el-radio-group>
</el-col>
</el-form-item>
<!-- <el-col :span="22" style="min-width: 600px;">
<el-form-item label="是否开启公告:">
<el-radio-group size="small" v-model="formData.openFlag" @change="changeOpenFlag">
<el-radio :label="1">开启</el-radio>
<el-radio :label="2">关闭</el-radio>
</el-radio-group>
</el-form-item>
</el-col> -->
<el-form-item v-show="formData.openFlag != 2" label="标题:" prop="noticeTitle">
<el-col :span="20">
<el-input size="small" v-model="formData.noticeTitle" placeholder="请输入公告标题" maxlength=20></el-input>
<span class="word-num">{{(formData.noticeTitle).replace(/\s+/g,"").length}}/20</span>
</el-col>
</el-form-item>
<!-- <el-col v-show="formData.openFlag != 2" :span="20">
<el-form-item label="标题:" prop="noticeTitle">
<el-input size="small" v-model="formData.noticeTitle" placeholder="请输入公告标题" maxlength=20></el-input>
<span class="word-num">{{(formData.noticeTitle).replace(/\s+/g,"").length}}/20</span>
</el-form-item>
</el-col> -->
<el-form-item v-show="formData.openFlag != 2" label="内容:" prop="noticeContent">
<el-col :span="20">
<el-input size="small" v-model="formData.noticeContent" placeholder="请输入公告内容" type="textarea"
:autosize="{ minRows: 5}" maxlength=150></el-input>
<span class="word-num">{{(formData.noticeContent).replace(/\s+/g,"").length}}/150</span>
</el-col>
</el-form-item>
<!-- <el-col v-show="formData.openFlag != 2" :span="20">
<el-form-item label="内容:" prop="noticeContent">
<el-input size="small" v-model="formData.noticeContent" placeholder="请输入公告内容" maxlength=150></el-input>
<span class="word-num">{{(formData.noticeContent).replace(/\s+/g,"").length}}/150</span>
</el-form-item>
</el-col> -->
</el-form>
</el-row>
</div>
<el-dialog
class="prot-dialog"
title=""
:visible.sync="isShowDialog"
width="30%"
center
:close-on-click-modal=false
:close-on-press-escape=false
:show-close=false>
<p v-show="isCancleBtn" class="prot-dialog-tips-1">确定取消吗?取消后将不保存本次操作内容</p>
<p v-show="!isCancleBtn" class="prot-dialog-tips-1">点击发布后将立即生效,是否继续发布?</p>
<!-- <p class="prot-dialog-tips-2">若您选择暂不发送,您只能录入量表的非敏感信息</p> -->
<!-- <p class="prot-dialog-tips-3">为避免打扰居民,7天内只能发送1次,您已发送过短信,请尽快联系居民同意授权</p> -->
<span v-show="isCancleBtn" slot="footer" class="dialog-footer">
<el-button size="small" @click="cancleConfirm"> 确定取消 </el-button>
<el-button size="small" type="primary" @click="isShowDialog = false"> 继续操作 </el-button>
</span>
<span v-show="!isCancleBtn" slot="footer" class="dialog-footer">
<el-button size="small" @click="openFlagCancle"> 取消 </el-button>
<el-button size="small" type="primary" @click="openFlagConfirm"> 确定 </el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import BreadCrumb from "../../components/breadcrumb.vue";
import { openLoading, closeLoading } from "../../utils/utils";
import * as commonUtil from "../../utils/utils";
import * as operationData from "../../utils/operation";
let vm = null;
export default {
components: {
BreadCrumb
},
data() {
// let checkNoticeTitleStr = (rule, value, callback) => {
// if(value.indexOf("\\") != -1) {//存在
// callback(new Error('请勿输入字符“ \\ ”'));
// } else if (value.indexOf(".") != -1) {
// callback(new Error('请勿输入字符“ . ”'));
// } else {
// callback();
// }
// };
return {
curmbFirst: "教培项目",
curmbSecond: "公告管理",
projectId: "",
formData: {
noticeContent: "",
noticeId: 0,
noticeTitle: "",
openFlag: 0,
projectId: 0
},
isShowDialog: false,
isCancleBtn: true,
rules: {
noticeTitle: [
{ required: true, message: "请输入公告标题", trigger: "blur" },
{
min: 2,
max: 20,
message: "输入长度为2-20的内容,可包含中英文、数字及特殊符号",
trigger: "blur"
},
// { validator: checkNoticeTitleStr, trigger: 'blur' }
],
noticeContent: [
{ required: true, message: "请输入公告内容", trigger: "blur" },
{
min: 2,
max: 150,
message: "输入长度为2-150的内容,可包含中英文、数字及特殊符号",
trigger: "blur"
},
],
}
};
},
created() {
vm = this;
vm.projectId = vm.getUrlSearch(window.location.href, "projectId");
vm.formData.projectId = vm.projectId
vm.getNoticeInfo();
},
// 挂载到Dom完成时
mounted: function() {
commonUtil.resizeHeight();
},
methods: {
//获取公告信息
getNoticeInfo() {
let req = {
projectId: vm.projectId
};
openLoading(vm);
vm.GET("portal/noticeInfo/getNoticeInfo", req).then(res => {
closeLoading(vm);
if (res.code == "000000") {
vm.formData = res.data;
}
});
},
beforeConfirm() {
let flag = false;
vm.$refs['formData'].validate(valid => {
if (valid) {
flag = true;
} else {
flag = false;
}
});
if(!flag) return;
vm.isCancleBtn = false;
// if(vm.formData.noticeId) {
vm.isShowDialog = true;
// }
},
//提交公告信息
confirmEdit(needJump) {
openLoading(vm);
vm.formData.projectId = vm.projectId
vm.POST("portal/noticeInfo/insertOrUpdate", vm.formData).then(res => {
closeLoading(vm);
if (res.code == "000000") {
// if(needJump) {
vm.$router.push('/item-manager');
vm.$message.success('发布成功');
// }
}
});
},
// 点击取消按钮
cancleEdit() {
vm.isCancleBtn = true;
vm.isShowDialog = true;
},
// 切换开启状态
changeOpenFlag(value) {
if(vm.formData.noticeId && value == 1) {
vm.isCancleBtn = false;
vm.isShowDialog = true;
}
},
// 确认取消
cancleConfirm() {
vm.isShowDialog = false;
vm.$router.push('/item-manager');
},
// 确认开启的取消
openFlagCancle() {
vm.isShowDialog = false;
// vm.formData.openFlag = 2;
// vm.$forceUpdate();
},
// 确认开启
openFlagConfirm() {
vm.isShowDialog = false;
vm.confirmEdit();
}
}
};
</script>
<style lang="scss">
.notice-item-shield {
.component-content {
background: #fff;
padding: 20px 30px;
.header-title {
padding: 10px 12px;
font-size: 12px;
color: #449284;
border-bottom: 1px solid #efefef;
}
.complete {
float: right;
}
.text-black {
color: #d51f35;
}
}
.word-num {
font-size: 12px;
color: #999;
padding-top: 5px;
}
.el-input {
width: 80%;
}
.el-textarea {
width: 80%;
}
.el-form-item__error {
left: 13px;
}
}
</style>
\ No newline at end of file
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
此差异已折叠。
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册