459 lines
14 KiB
Vue
459 lines
14 KiB
Vue
<template>
|
||
<div class="fullHeight">
|
||
|
||
<div class="fullHeight" v-if="pageType == 'list'" style="position:relative">
|
||
<!--courseManagement 课程管理 -->
|
||
<el-page-header style="margin-bottom:15px" v-if="$route.path.indexOf('/project/')==-1"
|
||
@back="goBack2"
|
||
:content="parentName+' /' + $t('message.safetyEducation.courseManagement') "
|
||
class="backText"
|
||
></el-page-header>
|
||
<!-- <el-tabs v-model="activeName" @tab-click="getList" v-if="$route.path.indexOf('/project/')!=-1">
|
||
<el-tab-pane label="企业课程" name="company"></el-tab-pane>
|
||
<el-tab-pane label="项目课程" name="project"></el-tab-pane>
|
||
</el-tabs> -->
|
||
<!-- v-if="$route.path.indexOf('/project/')==-1" -->
|
||
<div class="classificationBox" v-else>
|
||
<span :class="{'active':parentId==''}" @click="parentId='';getList()">
|
||
<!-- 全部 -->
|
||
{{ $t('message.safetyEducation.whole') }}
|
||
</span>
|
||
<span :class="{'active':parentId==item.id}" v-for="(item,index) in classifyList" :key="index" @click="parentId=item.id;getList()">{{item.classifyName}}
|
||
<i class="el-icon-error" v-if="activeName=='project'" @click.stop="deleteClassifyFn(item)"></i>
|
||
</span>
|
||
<span class="addTypeBtn" @click="addClassifyFn" v-if="$route.path.indexOf('/project/')==-1||activeName=='project'"> <i class="el-icon-plus"></i>
|
||
<!-- 新增类型 -->
|
||
{{ $t('message.safetyEducation.newType') }}
|
||
</span>
|
||
</div>
|
||
<div v-show="activeName=='project'||$route.path.indexOf('/project/')==-1" style="margin: 10px 15px;position:absolute;right:20px;top:-10px">
|
||
<el-button type="primary" size="medium" @click="addFn"
|
||
>
|
||
<!-- 新增课程 -->
|
||
{{ $t('message.safetyEducation.newCourses') }}
|
||
</el-button
|
||
>
|
||
<el-button type="warning" plain size="medium" @click="refresh">{{
|
||
$t("message.alarmValueSet.refresh")
|
||
}}</el-button>
|
||
</div>
|
||
<div class="table_wrap">
|
||
<div class="listContent">
|
||
<vue-scroll>
|
||
<div
|
||
class="listBox"
|
||
v-for="(item, index) in workerList"
|
||
:key="index"
|
||
>
|
||
<div class="inner whiteBlock">
|
||
<div class="videoBox">
|
||
<video
|
||
class=""
|
||
:src="$store.state.FILEURL + item.eduVideo"
|
||
controls
|
||
></video>
|
||
<div class="desc">
|
||
<!-- <span class="time">30分钟</span> -->
|
||
<span v-if="item.eduWorkerNum">{{ item.eduWorkerNum }}
|
||
{{$t("message.safetyEducation.humanLearning")}}
|
||
<!-- 人学习 -->
|
||
</span>
|
||
</div>
|
||
<div class="mask" @click.stop="editBefore(item)">
|
||
<!-- 进入题库 -->
|
||
{{$t("message.safetyEducation.enterQuestionBank")}}
|
||
</div>
|
||
</div>
|
||
<div class="title" @click="editBefore(item)">{{ item.eduCourseName }}</div>
|
||
<div @click.stop="deleteBefore(item)" class="deleteBtn" v-show="activeName=='project'">
|
||
<img src="@/assets/images/icon-delete.png" width="15px" height="15px"/>
|
||
<!-- <span>{{$t('message.workType.delete')}}</span> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</vue-scroll>
|
||
</div>
|
||
<div class="placeholderBox" v-if="workerList.length == 0">
|
||
<img src="@/assets/images/noData.png" alt="" />
|
||
<p>
|
||
<!-- 暂无课程 -->
|
||
{{$t("message.safetyEducation.noCourses")}}
|
||
</p>
|
||
</div>
|
||
<el-pagination
|
||
class="pagerBox"
|
||
@size-change="SizeChange"
|
||
@current-change="CurrentChange"
|
||
:current-page="pageInfo.pageNo"
|
||
:page-sizes="$store.state.PAGESIZRS"
|
||
:page-size="pageInfo.pageSize"
|
||
layout="total, sizes, prev, pager, next"
|
||
:total="pageInfo.total"
|
||
background
|
||
></el-pagination>
|
||
</div>
|
||
</div>
|
||
<div class="fullHeight" v-else>
|
||
<!-- '新增课程' : '课程详细' -->
|
||
<el-page-header
|
||
@back="goBack"
|
||
:content="(itemId == '' ? $t('message.safetyEducation.newType') : $t('message.safetyEducation.courseDetails'))"
|
||
class="backText"
|
||
></el-page-header>
|
||
<addCourse :eduId="itemId" :classifyId="parentId" @showList="goBack"></addCourse>
|
||
</div>
|
||
<!-- 添加分类 -->
|
||
<el-dialog
|
||
:modal-append-to-body="false"
|
||
:title="$t('message.safetyEducation.addCategory')"
|
||
:visible.sync="dialogVisible"
|
||
width="667px">
|
||
<div class="dialog_content">
|
||
<el-form label-width="120px" size="medium" class="dialogFormBox" ref="addEditForm" :model="classifyForm">
|
||
<!-- 分类名称 -->
|
||
<el-form-item :label="$t('message.safetyEducation.classificationName')" prop="classifyName" :rules="[
|
||
{ required: true, message: $t('message.safetyEducation.pleaseEnter'), trigger: 'blur' }
|
||
]">
|
||
<el-input v-model="classifyForm.classifyName"
|
||
:placeholder="$t('message.workType.placeholder')"></el-input>
|
||
</el-form-item>
|
||
<div class="dialog-footer">
|
||
<el-button
|
||
class="cancleBtn"
|
||
@click="dialogVisible = false"
|
||
icon="el-icon-circle-close"
|
||
size="medium"
|
||
>{{$t('message.personnelPosition.cancel')}}
|
||
</el-button>
|
||
<el-button
|
||
type="primary"
|
||
icon="el-icon-circle-check"
|
||
@click="saveClassifyFn"
|
||
size="medium"
|
||
>{{$t('message.personnelPosition.determine')}}
|
||
</el-button>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import {
|
||
safeEducationQuestionListApi,
|
||
workerSafeEducationDeleteApi,selectCompanyEducationCoursePageApi
|
||
} from "@/assets/js/api/laborPerson";
|
||
import {educationClassifyAddApi, educationClassifyEditApi, educationClassifyDeleteApi, educationClassifyListApi} from '@/assets/js/api/laborPerson'
|
||
import addCourse from "./addCourse";
|
||
export default {
|
||
components: { addCourse },
|
||
data() {
|
||
return {
|
||
pageType: "list",
|
||
workerList: [],
|
||
pageInfo: {
|
||
pageNo: 1, //页数
|
||
pageSize: 10, //条数
|
||
total: 0, //总条数
|
||
},
|
||
itemId: "",
|
||
parentId:'',
|
||
parentName:'',
|
||
activeName:'company',
|
||
classifyList:[],
|
||
dialogVisible:false,
|
||
classifyForm:{
|
||
classifyName:''
|
||
},
|
||
dataSn:''
|
||
};
|
||
},
|
||
mounted() {
|
||
if(this.$route.params.type){
|
||
this.activeName=this.$route.params.type
|
||
}else{
|
||
this.parentId=this.$route.query.id
|
||
}
|
||
if(this.activeName=='company'){
|
||
this.dataSn=this.$store.state.userInfo.headquartersSn
|
||
}else{
|
||
this.dataSn=this.$store.state.projectSn
|
||
}
|
||
this.parentName=this.$route.query.name
|
||
this.getClassifyList()
|
||
this.getList();
|
||
},
|
||
watch: {
|
||
$route(to, from) {
|
||
if(this.$route.params.type){
|
||
this.activeName=this.$route.params.type
|
||
if(this.activeName=='company'){
|
||
this.dataSn=this.$store.state.userInfo.headquartersSn
|
||
}else{
|
||
this.dataSn=this.$store.state.projectSn
|
||
}
|
||
this.parentId=''
|
||
this.pageType='list'
|
||
}
|
||
this.getClassifyList()
|
||
this.getList();
|
||
},
|
||
},
|
||
methods: {
|
||
goBack2(){
|
||
this.$router.back()
|
||
},
|
||
refresh() {
|
||
this.getList();
|
||
},
|
||
getList() {
|
||
let sn = this.$store.state.projectSn
|
||
let type =1 // 2总企业，1项目
|
||
if(this.activeName=='company'){
|
||
sn=this.$store.state.userInfo.headquartersSn
|
||
type=2
|
||
selectCompanyEducationCoursePageApi({
|
||
sn: sn,type:type,classifyId:this.parentId,pageNo:this.pageInfo.pageNo,pageSize:this.pageInfo.pageSize
|
||
}).then((res) => {
|
||
this.workerList = res.result.records;
|
||
this.pageInfo.total = res.result.total;
|
||
});
|
||
}else{
|
||
safeEducationQuestionListApi({
|
||
projectSn: sn,type:type,classifyId:this.parentId,pageNo:this.pageInfo.pageNo,pageSize:this.pageInfo.pageSize
|
||
}).then((res) => {
|
||
this.workerList = res.result.records;
|
||
this.pageInfo.total = res.result.total;
|
||
});
|
||
}
|
||
|
||
},
|
||
goBack() {
|
||
this.pageType = "list";
|
||
this.getList();
|
||
},
|
||
addFn() {
|
||
this.itemId = "";
|
||
this.pageType = "add";
|
||
},
|
||
editBefore(item) {
|
||
this.itemId = item.id;
|
||
this.pageType = "detail";
|
||
},
|
||
deleteBefore(item) {
|
||
// 此操作将永久删除该课程, 是否继续?
|
||
this.$confirm(this.$t("message.safetyEducation.permanentlyDelete"), this.$t("message.safetyEducation.tips"), {
|
||
confirmButtonText: this.$t("message.safetyEducation.determine"), // determine
|
||
cancelButtonText: this.$t("message.safetyEducation.cancel"), // 取消
|
||
type: "warning",
|
||
})
|
||
.then(() => {
|
||
workerSafeEducationDeleteApi({ id: item.id }).then((res) => {
|
||
this.$message({
|
||
type: "success",
|
||
message: this.$t("message.safetyEducation.deleteSuccess"), // 删除成功!
|
||
});
|
||
this.getList();
|
||
});
|
||
})
|
||
.catch(() => {
|
||
this.$message({
|
||
type: "info",
|
||
message: this.$t("message.safetyEducation.deletionCancelled"), // 已取消删除
|
||
});
|
||
});
|
||
},
|
||
SizeChange(val) {
|
||
this.pageInfo.pageSize = val;
|
||
this.getList();
|
||
},
|
||
CurrentChange(val) {
|
||
this.pageInfo.pageNo = val;
|
||
this.getList();
|
||
},
|
||
getClassifyList() {
|
||
educationClassifyListApi({sn: this.dataSn}).then(result => {
|
||
this.classifyList = result.result;
|
||
})
|
||
},
|
||
addClassifyFn(){
|
||
this.dialogVisible=true;
|
||
this.classifyForm.classifyName=''
|
||
},
|
||
editClassifyFn(){},
|
||
deleteClassifyFn(item){
|
||
this.$confirm(this.$t('message.personnelPosition.beaconManage.table.confirmText') + "【" + item.classifyName + "】?", this.$t('message.personnelPosition.beaconManage.table.Tips'), {
|
||
confirmButtonText: this.$t('message.personnelPosition.confirmButtonText'),
|
||
cancelButtonText: this.$t('message.personnelPosition.cancelButtonText'),
|
||
type: "warning",
|
||
}).then(() => {
|
||
educationClassifyDeleteApi({id: item.id}).then(result => {
|
||
if (result.success) {
|
||
this.$message.success(result.message);
|
||
if(item.id==this.parentId){
|
||
this.parentId=''
|
||
this.getList();
|
||
}
|
||
this.getClassifyList();
|
||
}
|
||
})
|
||
})
|
||
},
|
||
saveClassifyFn(){
|
||
this.$refs['addEditForm'].validate((valid) => {
|
||
if (valid) {
|
||
educationClassifyAddApi({
|
||
sn: this.dataSn,
|
||
classifyName: this.classifyForm.classifyName,
|
||
type:this.activeName=='company'?1:2
|
||
}).then(result => {
|
||
this.dialogVisible = false;
|
||
this.$message.success(result.message);
|
||
this.getClassifyList();
|
||
})
|
||
} else {
|
||
console.log('error submit!!');
|
||
return false;
|
||
}
|
||
});
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="less" scoped>
|
||
|
||
.backText {
|
||
margin: -10px 0 0 0;
|
||
}
|
||
.jyjzPage .backText{
|
||
margin: 15px 15px 0;
|
||
/deep/.el-page-header__content{
|
||
color: white;
|
||
}
|
||
}
|
||
.listContent {
|
||
overflow: hidden;
|
||
height: calc(100% - 120px);
|
||
}
|
||
.listBox {
|
||
float: left;
|
||
width: 20%;
|
||
height: 250px;
|
||
margin-bottom: 20px;
|
||
.inner {
|
||
margin: 0 10px;
|
||
box-shadow: 0px 2px 16px 0px rgba(131, 183, 255, 0.2);
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
.mask{
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
font-size: 20px;
|
||
transition: all 0.5s;
|
||
transform: translateY(100%);
|
||
}
|
||
.videoBox {
|
||
position: relative;
|
||
overflow: hidden;
|
||
&:hover{
|
||
.mask{
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
video {
|
||
width: 100%;
|
||
height: 200px;
|
||
}
|
||
.desc {
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
padding: 5px 10px;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: calc(100% - 20px);
|
||
color: white;
|
||
font-size: 14px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
.title {
|
||
padding: 10px 10px 20px;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
cursor: pointer;
|
||
&:hover{
|
||
color: @--color-primary;
|
||
}
|
||
}
|
||
&:hover{
|
||
.deleteBtn{
|
||
display: block;
|
||
}
|
||
}
|
||
.deleteBtn{
|
||
display: none;
|
||
position: absolute;
|
||
right: 10px;
|
||
bottom: 10px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.pagerBox {
|
||
margin: 20px;
|
||
}
|
||
.table_wrap{
|
||
position: relative;
|
||
height: calc(100% - 98px - 50px);
|
||
}
|
||
.classificationBox{
|
||
margin: 20px;
|
||
span{
|
||
margin-right: 30px;
|
||
cursor: pointer;
|
||
display: inline-block;
|
||
font-size: 14px;
|
||
border-radius: 3px;
|
||
padding: 3px 10px;
|
||
position: relative;
|
||
&.active,&:hover{
|
||
background-color: @--color-primary-deep;
|
||
color: white;
|
||
}
|
||
&:hover{
|
||
.el-icon-error{
|
||
display: block;
|
||
}
|
||
}
|
||
.el-icon-error{
|
||
color: salmon;
|
||
position: absolute;
|
||
right: -8px;
|
||
top: -8px;
|
||
font-size: 16px;
|
||
display: none;
|
||
}
|
||
}
|
||
.addTypeBtn{
|
||
border: 1px solid @--color-primary-deep;
|
||
color: @--color-primary-deep;
|
||
i{
|
||
margin-right: 8px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|