Files
fe-manage/src/views/examine/CourseReviewedN.vue
2022-12-06 14:50:16 +08:00

1241 lines
32 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!--
* @Author: lixg lixg@dongwu-inc.com
* @Date: 2022-11-16 20:59:33
* @LastEditors: lixg lixg@dongwu-inc.com
* @LastEditTime: 2022-11-29 22:30:01
* @FilePath: /fe-manage/src/views/examine/CourseReviewedN.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 待审核课程页面 coursereviewedn-->
<template>
<div class="coursereviewedn">
<div class="tmpl">
<div class="tmpl_header">
<div class="tmplh_inp">
<div class="inpbox">
<div class="inpbox1">
<a-select
v-model:value="valueproj"
:options="[
{ label: '请选择内容分类', value: '' },
...calssifyList,
]"
/>
</div>
<div class="inpbox1">
<a-input
v-model:value="valuecreater"
style="
width: 270px;
height: 40px;
border-radius: 8px;
margin-right: 14px;
"
placeholder="请输入创建人"
/>
</div>
<div class="inpbox1">
<a-input
v-model:value="valuename"
style="
width: 270px;
height: 40px;
border-radius: 8px;
margin-right: 14px;
"
placeholder="请输入名称"
/>
</div>
</div>
</div>
<div class="tmplh_btn">
<div class="btn btn1" @click="searchList">
<div class="search"></div>
<div class="btnText btnText1">搜索</div>
</div>
<div class="btn btn2" @click="reset">
<div class="search"></div>
<div class="btnText btnText2">重置</div>
</div>
</div>
</div>
<div class="tmpl_body">
<div class="tmpl_tabbox">
<a-table
:columns="columns1"
:data-source="tableData1"
:loading="tableDataTotal === -1 ? true : false"
expandRowByClick="true"
@expand="expandTable"
:scroll="{ x: 1300 }"
:pagination="false"
/>
</div>
<div class="tableBox">
<div class="pa">
<a-pagination
v-if="total > 10"
showSizeChanger="true"
show-quick-jumper
:pageSize="pageSize"
v-model:current="currentPage"
:total="total"
class="pagination"
@change="changePagination"
/>
</div>
</div>
</div>
</div>
<!-- 审核弹窗 -->
<a-modal
v-model:visible="courAuditModal"
:footer="null"
:closable="closeBack"
wrapClassName="courAuditModal"
centered="true"
>
<div class="delete">
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<div class="icon"></div>
<span>审核</span>
<div class="close_exit" @click="closeCourAuditModal"></div>
</div>
<div class="body">
<div class="item">
<div class="left">审核</div>
<div class="rig">
<a-radio-group name="radioGroup" v-model:value="valuepass">
<a-radio value="1">通过</a-radio>
<a-radio value="2" style="margin-left: 40px">不通过</a-radio>
</a-radio-group>
</div>
</div>
<div class="item" style="margin-top: 20px">
<div
class="sign"
style="position: relative; left: 30px; top: -2px"
>
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<div class="left">审核意见</div>
<div class="rig">
<a-textarea v-model:value="valueSugg" :rows="4" />
</div>
</div>
</div>
<div class="del_btnbox">
<div class="del_btn btn1" @click="closeCourAuditModal">
<div class="btnText">取消</div>
</div>
<div class="del_btn btn2" @click="sureCourAuditModal">
<div class="btnText">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
<!-- 预览弹窗 -->
<SeeModal
:visible="lookCourseModal"
:detail="faceDetailObj"
@cancel="ft_exit"
/>
<!-- 审核在线课 -->
<a-modal
v-model:visible="onlineClassesVisible"
:footer="null"
:closable="false"
wrapClassName="modalStyle onlineClassesStyle"
:zIndex="9999"
>
<iframe
id="iframe"
style="width: 100%; height: 100%"
:src="iframeUrl + 'course/noapproved'"
name="myframe"
sandbox="allow-forms allow-scripts allow-same-origin allow-popups"
></iframe>
</a-modal>
</div>
</template>
<script>
import { reactive, toRefs, onMounted, ref } from "vue";
import { list, courseAuditView, courseDetail } from "../../api/indexAudit";
import { message } from "ant-design-vue";
import SeeModal from "../courselibrary/components/seeModal.vue";
import { iframeUrl } from "../../api/method";
import * as api1 from "@/api/index1";
export default {
name: "CoursereViewedN",
components: {
SeeModal,
},
setup() {
const state = reactive({
optionsproj: [
{
value: "jack",
label: "Jack",
},
{
value: "rose",
label: "rose",
},
],
calssifyList: [], //分类字典
valueproj: "",
valuecreater: "",
valuename: "",
// currentFacePage: 1,
currentPage: 1,
total: null,
pageSize: 10,
courAuditModal: false, //审核弹窗
closeBack: false,
valuepass: "1",
valueSugg: null,
chooseId: null,
chooseCreater: null,
chooseOffId: null,
lookCourseModal: false, //预览
faceDetailObj: null,
columns1: [
{
title: "序号",
dataIndex: "number",
key: "number",
align: "center",
},
{
title: "名称",
dataIndex: "name",
key: "name",
align: "center",
},
{
title: "类型",
dataIndex: "type",
key: "type",
align: "center",
},
{
title: "内容分类",
dataIndex: "content",
key: "content",
align: "center",
customRender: ({ text }) =>
state.calssifyList.find((e) => e.value == text)?.label,
},
{
title: "状态",
dataIndex: "status",
key: "status",
align: "center",
},
// {
// title: "转审",
// dataIndex: "change",
// key: "change",
// align: "center",
// },
{
title: "创建人",
dataIndex: "creater",
key: "creater",
align: "center",
},
{
title: "创建时间",
dataIndex: "time",
key: "time",
align: "center",
},
{
title: "操作",
dataIndex: "opt",
key: "opt",
align: "center",
customRender: (value) => {
return (
<div>
<span
style="cursor:pointer;color:#387DF7"
onClick={() => {
showAudit(
value.record.createId,
value.record.creater,
value.record.offId
);
}}
>
审核
</span>
&nbsp;
<span
onClick={() => {
getFaceDetail(value.record.offId);
console.log(value.record);
}}
style="cursor:pointer;color:#387DF7"
>
预览3
</span>
</div>
);
},
},
],
// 待审核课程的数据
tableData1: [],
//审核在线课嵌套页面
onlineClassesVisible: false,
iframeUrl: iframeUrl,
});
/*
* 获取字典列表
* param faceclassPic | faceclassClass | faceclassScene
* */
const getDictList = (param) =>
api1
.getDict({
pageNo: 1,
pageSize: 20,
setCode: param,
})
.then((res) => res.data.data.rows);
const getFaceList = () => {
let objn = {
auditStatus: 1,
categoryId: state.valueproj,
createName: state.valuecreater,
name: state.valuename,
pageNo: state.currentPage,
pageSize: 10,
projectName: "",
};
console.log(objn);
// 测试数据先放下
// setFaceData([{ name: "面授课审核", category_id: "8", scene_id: "8" }]);
list(objn)
.then((res) => {
console.log("获取面授列表成功", res);
let result = res.data.data;
state.total = result.total;
if (result.total > 0) {
setFaceData(result.rows);
} else {
setFaceData([]);
}
})
.catch((err) => {
console.log("获取面授列表失败", err);
});
};
// 获取面授详情
const heroImg = ref(null);
const valueHtml = ref(null);
const attachMap = ref([]);
const getFaceDetail = (id) => {
console.log(id);
courseDetail(id)
.then((res) => {
console.log("获取面授详情信息成功", res);
let result = res.data.data;
state.lookCourseModal = true;
result.attach = result.attach == "" ? [] : result.attach.split(",");
state.faceDetailObj = result;
heroImg.value.src = result.picUrl;
valueHtml.value = result.outline;
attachMap.value = result.attach == "" ? [] : result.attach.split(",");
console.log(result, attachMap.value);
})
.catch((err) => {
console.log("获取面授详情信息失败", err);
});
};
// 内容分类 场景 -- 目前直接写死的
const sceneist11 = [
{ dictCode: "6", dictValue: "场景一" },
{ dictCode: "7", dictValue: "场景二" },
];
const contentList11 = [
{ dictCode: "8", dictValue: "分类一" },
{ dictCode: "5", dictValue: "分类二" },
];
// contentList11.find(e => e.dictCode == text)?.dictValue
const searchList = () => {
let objn = {
auditStatus: 1,
categoryId: state.valueproj,
createName: state.valuecreater,
name: state.valuename,
pageNo: state.currentPage,
pageSize: 10,
projectName: "",
};
console.log(objn);
list(objn)
.then((res) => {
console.log("获取面授列表成功", res);
let result = res.data.data;
state.total = result.total;
if (result.total > 0) {
setFaceData(result.rows);
} else {
setFaceData([]);
}
})
.catch((err) => {
console.log("获取面授列表失败", err);
});
};
// 预览弹框 开启和关闭
const ft_exit = () => {
state.lookCourseModal = false;
};
const setFaceData = (tableData) => {
if (!tableData || !tableData.length) {
state.tableData1 = [];
return;
}
let data = tableData;
let array = [];
data.map((item) => {
let obj = {
number: item.offcourseId,
name: item.name,
type: item.type == 1 ? "线上" : "线下",
content: item.categoryId,
status:
item.status == 0
? "未提交"
: item.status == 1
? "待审核"
: item.status == 2
? "通过"
: item.status == -1
? "拒绝"
: "-",
change: "-",
creater: item.createName,
time: item.createTime,
createrId: item.createId,
offId: item.offcourseId,
};
array.push(obj);
});
state.tableData1 = array;
};
const reset = () => {
state.valueproj = "";
state.valuecreater = null;
state.valuename = null;
getFaceList();
};
const changePagination = (pagina) => {
state.currentPage = pagina;
getFaceList();
};
const showAudit = (id, creater, offId) => {
state.courAuditModal = true;
state.chooseId = id;
state.chooseCreater = creater;
state.chooseOffId = offId;
getFaceList();
};
const closeCourAuditModal = () => {
state.courAuditModal = false;
state.valueSugg = null;
state.valuepass = "1";
state.chooseId = null;
state.chooseCreater = null;
state.chooseOffId = null;
};
const sureCourAuditModal = () => {
console.log(state.valueSugg);
if (
state.valueSugg == null ||
state.valueSugg == undefined ||
state.valueSugg == ""
) {
message.destroy();
message.error("请输入审核意见");
return;
}
courseAuditView({
createId: state.chooseId,
createName: state.chooseCreater,
description: state.valueSugg,
offcourseId: state.chooseOffId,
pass: state.valuepass == "1" ? 1 : 0,
})
.then((res) => {
console.log(res);
state.courAuditModal = false;
message.destroy();
message.success("审核提交成功");
state.valueSugg = null;
state.valuepass = "1";
getFaceList();
})
.catch((err) => {
console.log(err);
message.destroy();
message.warning("审核提交失败");
state.valueSugg = null;
state.valuepass = "1";
});
};
onMounted(async () => {
getFaceList();
//获取分类列表
state.calssifyList = (await getDictList("faceclassClass")).map((e) => ({
label: e.dictName,
value: e.dictCode,
}));
});
// 禁止用户编辑文本框内容
const onEditorFocus = (event) => {
event.enable(false);
};
return {
...toRefs(state),
getFaceList,
searchList,
setFaceData,
reset,
changePagination,
showAudit,
closeCourAuditModal,
sureCourAuditModal,
ft_exit,
getFaceDetail,
heroImg,
valueHtml,
attachMap,
contentList11,
sceneist11,
onEditorFocus,
};
},
};
</script>
<style lang="scss">
.courAuditModal {
.ant-modal {
width: 640px !important;
height: 400px !important;
.ant-modal-content {
width: 640px !important;
height: 400px !important;
.ant-modal-body {
width: 640px !important;
height: 400px !important;
padding: 0 !important;
.delete {
z-index: 999;
width: 640px;
height: 400px;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
border-radius: 4px;
// position: absolute;
// left: 50%;
// top: 10%;
// transform: translate(-50%, -50%);
.del_header {
position: absolute;
width: calc(100%);
height: 68px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
}
.del_main {
width: 100%;
position: relative;
.header {
display: flex;
align-items: center;
padding-top: 20px;
padding-left: 26px;
font-size: 16px;
.icon {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/taskpage/gan.png);
background-size: 100% 100%;
}
.close_exit {
position: absolute;
right: 42px;
cursor: pointer;
width: 20px;
height: 20px;
background-image: url(@/assets/images/coursewareManage/close.png);
background-size: 100% 100%;
}
}
.body {
width: 100%;
margin: 34px auto 56px auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
// background-color: red;
position: relative;
.item {
display: flex;
width: 100%;
.left {
width: 110px;
text-align: right;
}
.rig {
width: 450px;
.ant-input {
border-radius: 8px;
resize: none !important;
}
}
}
}
.del_btnbox {
display: flex;
margin: 30px auto;
justify-content: center;
.del_btn {
width: 100px;
height: 40px;
background: rgba(64, 158, 255, 0);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 40px;
}
}
.btn1 {
border: 1px solid rgba(64, 158, 255, 1);
color: #4ea6ff;
margin-right: 14px;
}
.btn2 {
background-color: #4ea6ff;
color: #ffffff;
}
}
}
}
}
}
}
}
.lookCourseModal {
.ant-modal {
.ant-modal-content {
// width:1358px !important;
.ant-modal-body {
.modalHeader {
display: flex;
align-items: center;
justify-content: space-between;
.headerLeft {
margin-left: 27px;
display: flex;
align-items: center;
.headerLeftText {
font-size: 16px;
font-weight: 400;
color: #000000;
line-height: 36px;
}
}
}
.modalMain {
.m_title {
margin-bottom: 20px;
}
.m_body {
display: flex;
flex-wrap: wrap;
.mb_left {
width: 50%;
.mbl_items {
display: flex;
align-items: center;
justify-content: flex-end;
margin-bottom: 10px;
.item_nam {
width: 100px;
display: flex;
align-items: center;
justify-content: flex-end;
white-space: nowrap;
.asterisk_icon {
width: 10px;
height: 10px;
margin-right: 5px;
margin-top: -15px;
}
}
.item_inp {
flex: 1;
position: relative;
.inp_num {
position: absolute;
left: 398px;
top: 10px;
}
}
}
.mbl_items2 {
display: flex;
align-items: start;
margin-top: 10px;
margin-bottom: 10px;
.item_nam {
width: 100px;
display: flex;
align-items: center;
justify-content: flex-end;
white-space: nowrap;
.asterisk_icon {
width: 10px;
height: 10px;
margin-right: 5px;
margin-top: -15px;
}
}
.item_inp {
flex: 1;
.i_upload_img {
width: 100px;
height: 100px;
border-radius: 8px;
}
.i_upload {
width: 100px;
height: 100px;
border: 1px solid #4ea6ff;
border-radius: 8px;
text-align: center;
align-items: center;
cursor: pointer;
.addimg {
position: relative;
.heng {
position: absolute;
top: 50px;
left: 25px;
width: 50px;
border: 1px solid #4ea6ff;
}
.shu {
position: absolute;
top: 25px;
left: 50px;
height: 50px;
border: 1px solid #4ea6ff;
}
}
}
}
}
.i2_cz {
width: 440px;
margin-left: 100px;
.i2_top {
display: flex;
justify-content: space-between;
}
}
.i8_bottom {
display: flex;
width: 440px;
margin-left: 100px;
}
}
.mb_right {
width: 50%;
.mbl_items {
display: flex;
align-items: flex-start;
justify-content: flex-end;
margin-bottom: 10px;
.item_nam {
width: 100px;
display: flex;
align-items: center;
justify-content: flex-end;
white-space: nowrap;
.asterisk_icon {
width: 10px;
height: 10px;
margin-top: -15px;
margin-right: 5px;
}
}
.item_inp {
flex: 1;
}
.accessory {
display: flex;
align-items: center;
.accessory_icon {
width: 16px;
height: 16px;
margin-top: -8px;
margin-right: 5px;
}
}
}
.mbl_items2 {
display: flex;
align-items: start;
margin-bottom: 10px;
.item_nam {
width: 100px;
display: flex;
align-items: center;
justify-content: flex-end;
white-space: nowrap;
.asterisk_icon {
width: 10px;
height: 10px;
margin-right: 5px;
margin-top: -15px;
}
}
.item_inp {
flex: 1;
position: relative;
.inp_num {
position: absolute;
left: 395px;
bottom: 10px;
}
}
}
.mbl_items12 {
width: 440px;
margin-left: 100px;
.i12_box1 {
display: flex;
align-items: center;
padding: 17px 0px 17px 21px;
border: 1px solid #eff4fc;
border-radius: 8px;
margin-bottom: 10px;
.file_img {
width: 27px;
height: 32px;
// background-image: url(@/assets/images/coursewareManage/imgs.png);
margin-right: 22px;
img {
width: 100%;
height: 100%;
}
}
.file_detail {
width: 250px;
margin-right: 21px;
.file_updata {
display: flex;
align-items: center;
.updatabox {
position: relative;
width: 230px;
height: 5px;
background-color: rgba(192, 192, 192, 0.25);
border-radius: 3px;
.updatacolor {
position: absolute;
left: 0;
width: 100%;
height: 5px;
background-color: #57c887;
border-radius: 3px;
}
.updatacolor2 {
position: absolute;
left: 0;
width: 80%;
height: 5px;
background-color: #ff7474;
border-radius: 3px;
}
.updatacolor3 {
position: absolute;
left: 0;
width: 60%;
height: 5px;
background-color: #388be1;
border-radius: 3px;
}
.updataxq {
position: absolute;
right: 2px;
top: -30px;
color: #57c887;
}
.updataxq2 {
position: absolute;
right: 2px;
top: -30px;
color: #ff7474;
}
.updataxq3 {
position: absolute;
right: 2px;
top: -30px;
color: #388be1;
}
}
}
}
.file_operation {
display: flex;
.fobox {
margin-right: 5px;
cursor: pointer;
}
}
}
}
}
}
.m_footer {
display: flex;
margin: 20px 0;
.fotnam {
width: 100px;
display: flex;
justify-content: end;
padding-right: 15px;
}
.fotarea {
position: relative;
.fuwenben {
width: 90%;
height: 20px;
background-color: rgb(95, 95, 95);
position: absolute;
left: 50%;
transform: translate(-50%, 0);
top: 3px;
z-index: 9999;
}
}
}
.m_btn {
width: 100%;
margin-top: 25px;
margin-bottom: 20px;
display: flex;
justify-content: center;
align-content: center;
.btn {
width: 100px;
height: 40px;
background: rgba(64, 158, 255, 0);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 40px;
}
}
.btn5 {
border: 1px solid rgba(64, 158, 255, 1);
color: #4ea6ff;
}
.btn6 {
background-color: #4ea6ff;
color: #ffffff;
}
}
}
}
}
}
}
.coursereviewedn {
width: 100%;
.tmpl {
width: 100%;
.tmpl_header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 32px;
margin-left: 32px;
margin-right: 32px;
.tmplh_inp {
.inpbox {
display: flex;
margin-top: 32px;
flex-wrap: wrap;
.inpbox1 {
display: flex;
justify-content: center;
align-items: center;
margin-right: 24px;
margin-top: 10px;
.ant-select-selector {
border-radius: 8px;
width: 270px;
height: 40px;
padding-top: 5px;
}
span {
white-space: nowrap;
}
}
}
}
.tmplh_btn {
display: flex;
// margin-left: 38px;
margin-top: 42px;
.btn {
padding: 0px 26px 0px 26px;
height: 38px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
cursor: pointer;
flex-shrink: 0;
.search {
background-size: 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
line-height: 36px;
margin-left: 5px;
}
.btnText1 {
color: rgb(255, 255, 255);
}
.btnText2 {
color: rgba(64, 158, 255, 1);
}
}
.btn1 {
background: #409eff;
.search {
width: 15px;
height: 17px;
background-image: url("../../assets/images/courseManage/search0.png");
}
}
.btn2 {
background: #ffffff;
border: 1px solid #388be1;
.search {
width: 16px;
height: 18px;
background-image: url("../../assets/images/courseManage/reset1.png");
}
}
.btn1:hover {
background: rgb(255, 255, 255);
border: 1px solid #388be1;
.search {
background-image: url("../../assets/images/courseManage/search1.png");
}
.btnText {
color: rgba(64, 158, 255, 1);
}
}
.btn2:hover {
background: rgba(64, 158, 255, 1);
.search {
background-image: url("../../assets/images/courseManage/reset0.png");
}
.btnText {
color: #ffffff;
}
}
}
}
.tmpl_body {
padding: 0px 30px;
.tmpl_tabbox {
.operation {
display: flex;
justify-content: center;
align-items: center;
color: #4ea6ff;
.nselect {
justify-content: center;
align-items: center;
display: flex;
.jc {
margin-left: 20px;
white-space: nowrap;
cursor: pointer;
}
}
}
}
.pa {
width: 100%;
margin-top: 20px;
display: flex;
justify-content: center;
}
}
}
}
</style>