561 lines
15 KiB
Vue
561 lines
15 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 in classifyList"
|
||
:key="item.id"
|
||
:label="item.classifyName"
|
||
:value="item.id"
|
||
@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;
|
||
console.log("展示");
|
||
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;
|
||
console.log('课程分类', this.classifyList);
|
||
});
|
||
},
|
||
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>
|