Files
fe-manage/src/views/examine/CourseReviewed.vue
2023-02-13 10:21:38 +08:00

996 lines
20 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:06
* @LastEditors: lixg lixg@dongwu-inc.com
* @LastEditTime: 2022-12-07 08:53:23
* @FilePath: /fe-manage/src/views/examine/CourseReviewed.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%A
-->
<!-- 已审核课程页面 -->
<template>
<div class="coursereviewed">
<div class="tmpl">
<div class="tmpl_header">
<div class="tmplh_inp">
<div class="inpbox">
<div class="inpbox1">
<a-tree-select
:getPopupContainer="triggerNode => triggerNode.parentNode || document.body"
v-model:value="valueproj"
show-search
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
:fieldNames="{
children: 'children',
label: 'name',
value: 'code',
}"
placeholder="请选择内容分类"
allow-clear
tree-default-expand-all
:tree-data="sysTypeOptions">
<!-- <template #title="{ value: val, title }">
<b v-if="val === '11111'" style="color: #08c">sss</b>
<template v-else>{{ title }}</template>
</template> -->
</a-tree-select>
</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 class="select addTimeBox">
<div class="addTime">审核时间</div>
<a-range-picker
v-model:value="searchParam"
style="width: 420px"
format="YYYY-MM-DD"
separator="至"
:placeholder="[' 开始时间', ' 结束时间']"
/>
</div>
</div>
</div>
<div class="tmplh_btn">
<div class="btn btn1" @click="getList">
<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="loading" expandRowByClick="true"
@expand="expandTable" :scroll="{ x: 1300 }" :pagination="false" />
</div>
<div class="tableBox">
<div class="pa">
<a-pagination v-if="total > 10" :showSizeChanger="false" show-quick-jumper :pageSize="pageSize"
v-model:current="currentPage" :total="total" class="pagination" @change="changePagination" />
</div>
</div>
</div>
</div>
<!-- 审核日志弹窗 -->
<a-modal v-model:visible="projAuditModal" :footer="null" :closable="closeBack" wrapClassName="projAuditModal"
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="closeProjAuditModal"></div> -->
</div>
<div class="body">
<a-table style="width:100%" :columns="columnsAudit" :data-source="tableDataAudit"
:loading="tableDataTotalAudit === -1 ? true : false" expandRowByClick="true" :scroll="{ y: 250 }"
@expand="expandTable" :pagination="false" />
</div>
<div class="del_btnbox">
<div class="del_btn btn1" @click="closeProjAuditModal">
<div class="btnText">取消</div>
</div>
<div class="del_btn btn2" @click="closeProjAuditModal">
<div class="btnText">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
</div>
</template>
<script>
import {reactive, toRefs, onMounted, computed} from "vue";
import { courseListView } from "../../api/indexAudit";
import {useStore} from "vuex";
import dayjs from "dayjs";
export default {
name: "CoursereViewed",
setup() {
const state = reactive({
calssifyList: [], //分类字典
valueproj: null,
valuecreater: "",
valuename: "",
currentPage: 1,
total: null,
pageSize: 10,
//审核记录的表
columnsAudit: [
{
title: "审核人",
dataIndex: "createName",
key: "createName",
align: "center",
width: "20%",
ellipsis: true,
},
{
title: "审核状态",
dataIndex: "status",
key: "status",
align: "center",
width: "20%",
customRender: ({ record: { status } }) => (
<div>{{ 2: "审核通过", "-2": "审核拒绝" }[status + ""]}</div>
),
},
{
title: "审核时间",
dataIndex: "createTime",
key: "createTime",
align: "center",
width: "20%",
ellipsis: true,
},
{
title: "备注",
dataIndex: "description",
key: "description",
align: "center",
width: "30%",
ellipsis: true,
},
],
columns1: [
// {
// title: "序号",
// dataIndex: "number",
//// key: "number",
// align: "center",
// },
{
title: "名称",
dataIndex: "name",
key: "name",
align: "center",
width: "20%",
ellipsis: true,
},
{
title: "类型",
dataIndex: "type",
key: "type",
align: "center",
width: "10%",
ellipsis: true,
},
{
title: "内容分类",
dataIndex: "content",
key: "content",
align: "center",
width: "10%",
ellipsis: true,
},
{
title: "审核状态",
dataIndex: "status",
key: "status",
align: "center",
width: "10%",
},
{
title: "创建人",
dataIndex: "creater",
key: "creater",
align: "center",
width: "10%",
ellipsis: true,
},
{
title: "审核时间",
dataIndex: "time",
key: "time",
align: "center",
width: "10%",
ellipsis: true,
customRender: (time) => {
return <div>{time.record.time}</div>;
},
},
{
title: "审核说明",
dataIndex: "msg",
key: "msg",
align: "center",
ellipsis: true,
width: "20%",
},
{
title: "操作",
dataIndex: "opt",
key: "opt",
width: "10%",
align: "center",
customRender: (value) => {
return (
<div
style="color:#387DF7;cursor:pointer;"
onClick={() => {
console.log(value);
showProjAuditModal(value.record.auditLogDtoList.length !== 0 ? value.record.auditLogDtoList : []);
}}
>
审核日志
</div>
);
},
},
],
tableData1: [
// {
// number: "1",
// name: "课程1",
// type: "在线",
// content: "领导力/领导业务",
// status: "通过",
// creater: "-",
// time: "-",
// msg: "-",
// },
],
//审核记录的数据
tableDataAudit: [],
projAuditModal: false,
loading: false,
// 课程三级分类
options2222: [
{
title: '领导力',
value: '100',
children: [
{
title: '管理业务',
value: '1001',
},
{
title: '管理团队',
value: '1002',
},
{
title: '管理自我',
value: '1003',
},
],
},
{
title: '专业力',
value: '200',
children: [
{
title: '研发',
value: '2001',
},
{
title: '系统和解决方案',
value: '2002',
},
{
title: '生产技术与制造',
value: '2003',
},
{
title: '供应链',
value: '2004',
},
{
title: '营销',
value: '2005',
},
{
title: '品质',
value: '2006',
},
{
title: '专业职能',
value: '2007',
children: [
{
title: '战略与企划',
value: '200701',
},
{
title: '流程管理',
value: '200702',
},
{
title: '业绩管理',
value: '200703',
},
{
title: '项目管理',
value: '200704',
},
{
title: '信息技术',
value: '200705',
},
{
title: '环境与安全',
value: '200706',
},
{
title: '人力资源',
value: '200707',
},
{
title: '企业文化',
value: '200708',
},
{
title: '品牌',
value: '200709',
},
{
title: '财务',
value: '200710',
},
{
title: '法务',
value: '200711',
},
{
title: '风险控制',
value: '200712',
},
{
title: '行政',
value: '200713'
},
]
},
{
title: '医工',
value: '2008',
}
],
},
{
title: '通用力',
value: '300',
children: [
{
title: '职业操守与道德',
value: '3001',
},
{
title: '职业素养与技能',
value: '3002',
},
{
title: '规章制度',
value: '3003',
},
],
}
],
searchParam:[], // 时间搜索
});
const store = useStore();
const sysTypeOptions = computed(() => store.state.content_type);
function findClassFullName(list,classify,name=''){
return list && list.length && list.map(e=>{
return classify == e.code ? name?name+'-'+e.name:e.name : findClassFullName(e.children,classify,name?name+'-'+e.name:e.name)
}).filter(name=>name).join('')
}
// 课程三级分类回显
const sHX = (classify) => {
return findClassFullName(sysTypeOptions.value,classify) || '-'
}
const getList = () => {
console.log(state.searchParam[0],state.searchParam[1],new Date(state.searchParam[0]).getTime(),new Date(state.searchParam[0]))
state.loading = true
let objn = {
auditStatus: 0,
beginTime:state.searchParam.length!==0? dayjs(new Date(state.searchParam[0]).getTime()).format("YYYY-MM-DD"): "",
endTime:state.searchParam.length!==0? dayjs(new Date(state.searchParam[1]).getTime()).format("YYYY-MM-DD"): "",
sysTypeId: state.valueproj,
createName: state.valuecreater,
name: state.valuename,
pageNo: state.currentPage,
pageSize: 10,
};
console.log(objn);
courseListView(objn)
.then((res) => {
console.log("获取已审核课程成功", res.data.data);
state.total = res.data.data.total;
setTableData(res.data.data.rows);
state.loading = false
})
.catch((err) => {
console.log("获取已审核课程失败", err);
});
};
const setTableData = (table) => {
if (!table || !table.length) {
state.tableData1 = [];
return;
}
let data = table;
let array = [];
data.map((item, n) => {
let obj = {
number: n + 1 + (state.currentPage - 1) * 10,
name: item.name || "- ",
type: item.type == 1 ? "线上" : "线下",
content: sHX(item.sysTypeId),
status:
item.auditStatus == 0
? "未提交"
: item.auditStatus == 1
? "提交待审核"
: item.auditStatus == 2
? "通过"
: item.auditStatus == -1
? "拒绝"
: "-",
creater: item.createName,
time: item.createTime,
msg: item.description || "-",
auditLogDtoList: item.auditLogDtoList,
};
array.push(obj);
});
state.tableData1 = array;
console.log(data);
};
const reset = () => {
(state.valueproj = null),
(state.valuecreater = null),
(state.valuename = null),
getList();
};
const changePagination = (pagina) => {
state.currentPage = pagina;
getList();
};
onMounted(async () => {
getList();
});
// 显示审核
const showProjAuditModal = (data) => {
state.tableDataAudit = data;
state.projAuditModal = true;
};
const closeProjAuditModal = () => {
state.projAuditModal = false;
};
return {
...toRefs(state),
getList,
setTableData,
reset,
changePagination,
showProjAuditModal,
closeProjAuditModal,
sysTypeOptions
};
},
};
</script>
<style lang="scss">
.addTimeBox {
top: 4px;
position: relative;
display: flex;
align-items: center;
.addTime {
position: absolute;
z-index: 10;
margin-left: 10px;
color: rgba(0, 0, 0, 0.4);
}
.ant-picker {
padding-left: 85px;
}
.ant-picker-range .ant-picker-active-bar {
margin-left: 85px;
}
}
.coursereviewed {
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: #4ea6ff;
.search {
width: 15px;
height: 17px;
background-image: url("../../assets/images/courseManage/search0.png");
}
}
.btn2 {
background: #ffffff;
border: 1px solid #4ea6ff;
.search {
width: 16px;
height: 18px;
background-image: url("../../assets/images/courseManage/reset1.png");
}
}
.btn1:hover {
background: rgb(255, 255, 255);
border: 1px solid #4ea6ff;
.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;
}
}
}
}
.projAuditModal {
.ant-modal {
width: 816px !important;
min-height: 420px !important;
.ant-modal-content {
width: 816px !important;
min-height: 420px !important;
.ant-modal-body {
width: 816px !important;
min-height: 420px !important;
padding: 0 !important;
.delete {
z-index: 999;
width: 816px;
min-height: 485px;
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;
.ant-table-empty {
width: 100% !important;
}
.back {
position: absolute;
top: 30px;
font-size: 12px;
font-weight: 400;
color: #666666;
}
}
.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;
}
}
}
}
}
}
}
}
.projectviewed {
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;
flex-wrap: wrap;
margin-top: 42px;
.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: 52px;
.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: #4ea6ff;
.search {
width: 15px;
height: 17px;
background-image: url("../../assets/images/courseManage/search0.png");
}
}
.btn2 {
background: #ffffff;
border: 1px solid #4ea6ff;
.search {
width: 16px;
height: 18px;
background-image: url("../../assets/images/courseManage/reset1.png");
}
}
.btn1:hover {
background: rgb(255, 255, 255);
border: 1px solid #4ea6ff;
.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>