Files
fe-manage/src/components/drawers/project/ProjectFaceTaskManage.vue
2023-01-10 18:13:37 +08:00

1049 lines
28 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.
<template>
<a-drawer
:visible="Fvisible"
class="drawerStyle ProjectFaceTaskManage"
placement="right"
width="80%"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
<div class="header">
<div class="headerTitle">面授{{ title }}</div>
<img
style="width: 29px; height: 29px; cursor: pointer"
src="../../../assets/images/basicinfo/close.png"
@click="closeDrawer"
/>
</div>
<div class="main">
<div class="endtime">
起止时间{{
projectTaskInfo && projectTaskInfo.startTime
? projectTaskInfo.startTime
: "-"
}}
{{
projectTaskInfo && projectTaskInfo.endTime
? projectTaskInfo.endTime
: "-"
}}
</div>
<div class="search">
<div class="namecon" style="margin-right: 30px">
<div class="name">姓名</div>
<a-input
v-model:value="name"
style="width: 270px; height: 40px; border-radius: 8px"
placeholder="请输入姓名"
/>
</div>
<div class="namecon" style="margin-right: 50px">
<div class="name">任务状态</div>
<div class="select">
<a-select
v-model:value="projectName"
style="width: 270px"
placeholder="请选择"
:options="projectNameList"
@change="selectProjectName"
allowClear
showSearch
></a-select>
</div>
</div>
<div class="btns">
<div
class="btn btn1"
style="margin-right: 20px"
@click="searchTaskList"
>
<div class="img1"></div>
<div class="wz">搜索</div>
</div>
<div class="btn btn2" @click="resetTaskList">
<div class="img2"></div>
<div class="wz">重置</div>
</div>
</div>
</div>
<div class="btnss" style="margin-top: 20px">
<!-- <div class="btn btn1" style="margin-right: 20px" @click="godie">
<div class="img1"></div>
<div class="wz">催促学习</div>
</div>
-->
<div class="btn btn2" @click="allStuOver">
<div class="wz">批量标注完成</div>
</div>
<div class="btn btn2">
<div class="wz" @click="showEntryScore">批量录入成绩</div>
</div>
<div class="btn btn2" @click="exportTaskStu">
<div class="img2"></div>
<div class="wz">导出数据</div>
</div>
<div class="btn btn2" @click="exportHomeWorkShow">
<div class="wz">导出作业</div>
</div>
</div>
<div class="line">
<div class="inline">
<div class="left">
<div class="img"></div>
<div class="text" style="margin-left: 10px">已选择</div>
<div class="text2">{{ selectedRowKeys.length }}</div>
<div class="text"></div>
<div class="text3">列表选项总计</div>
<div class="text4">{{ tableDataTotal2 }}</div>
</div>
<div class="right" @click="clearLine">清空</div>
</div>
</div>
<div class="tableBox" style="margin-top: 20px; margin-bottom: 100px">
<a-table
style="border: 1px solid #f2f6fe"
:columns="tablecolumns"
:data-source="tabledata"
:loading="tableDataTotal === -1 ? true : false"
:scroll="{ x: 900 }"
:pagination="false"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange,
}"
/>
<div class="pa">
<a-pagination
:showSizeChanger="false"
showQuickJumper="true"
hideOnSinglePage="true"
:pageSize="pageSize"
:current="currentPage"
:total="tableDataTotal"
class="pagination"
v-if="tableDataTotal > 10"
@change="changePaginationStu"
/>
</div>
</div>
</div>
<div class="btnn">
<button class="btn1" @click="closeDrawer">取消</button>
<button class="btn2" @click="closeDrawer">确定</button>
</div>
</div>
</a-drawer>
<!-- 批量标注完成 -->
<ASOver
v-model:ASOvervisible="ASOvervisible"
v-model:ids="selectedRowKeys"
:taskId="
projectTaskInfo && projectTaskInfo.projectTaskId
? projectTaskInfo.projectTaskId
: null
"
:type="2"
:pid="
projectTaskInfo && projectTaskInfo.projectId
? projectTaskInfo.projectId
: null
"
:taskType="
projectTaskInfo && projectTaskInfo.type ? projectTaskInfo.type : null
"
:currentStageId="
projectTaskInfo && projectTaskInfo.stageId
? projectTaskInfo.stageId
: null
"
v-model:getStudent="getStudent"
/>
<!-- 录入成绩抽屉 -->
<entry-scores v-model:Evisible="Evisible" />
<!-- 查看作业抽屉 -->
<CKWork v-model:CWvisible="CWvisible" />
<!-- 查看答卷抽屉 -->
<CQue v-model:CQvisible="CQvisible" />
<!-- 导出作业提示框 -->
<ExportHomeWork
v-model:exportHomeWorkV="exportHomeWorkV"
:downloadUrl="downloadUrl"
/>
</template>
<script>
import { toRefs, reactive } from "vue";
import { message } from "ant-design-vue";
import ASOver from "../AllStuOver.vue";
import CKWork from "../CheckWork.vue";
import CQue from "../CheckQue.vue";
import EntryScores from "../EntryScores.vue";
// import * as api from "../../../api/index";
import * as api from "../../../api/index1";
import ExportHomeWork from "../../Modals/ExportHomeWork.vue";
export default {
name: "ProjectFaceTaskManage",
components: {
EntryScores,
CKWork,
CQue,
ASOver,
ExportHomeWork,
},
props: {
Fvisible: {
type: Boolean,
default: false,
},
title: {
type: String,
default: "",
},
projectTaskId: {
type: Number,
default: null,
},
projectTaskInfo: {
type: Object,
default: function () {
return {};
},
},
},
setup(props, ctx) {
const state = reactive({
Evisible: false, //录入成绩抽屉
CWvisible: false, //查看作业抽屉
CQvisible: false, //查看答卷抽屉
ASOvervisible: false, //批量标注完成弹窗
name: "",
open: false,
projectName: null,
projectNameList: [
{
id: 0,
value: "0",
label: "未开始",
},
{
id: 1,
value: "1",
label: "已完成",
},
{
id: 2,
value: "2",
label: "进行中",
},
],
selectedRowKeys: [],
pageNo: 1,
pageSize: 10,
currentPage: 1,
tableDataTotal: -1,
tableDataTotal2: 0, //显示列表总数
tabledata: [
// {
// workNum: "123",
// userName: "li",
// deptName: "开发",
// jobName: "前端开发",
// score: 89,
// exam: 98,
// testscore: 80,
// status: "已完成",
// },
],
tablecolumns: [
{
title: "工号",
dataIndex: "studentUserNo",
key: "studentUserNo",
width: 50,
align: "left",
className: "h head",
customRender: (text) => {
return (
<div class="racona">
<span>
{text.record.studentUserNo ? text.record.studentUserNo : "-"}
</span>
</div>
);
},
},
{
title: "姓名",
dataIndex: "studentName",
key: "studentName",
width: 50,
align: "left",
className: "h head",
customRender: (text) => {
return (
<div class="racona">
<span>
{text.record.studentName ? text.record.studentName : "-"}
</span>
</div>
);
},
},
{
title: "所在部门",
dataIndex: "studentDepartName",
key: "studentDepartName",
width: 60,
align: "center",
className: "h",
customRender: (text) => {
return (
<div class="racona">
<span>
{text.record.studentDepartName
? text.record.studentDepartName
: "-"}
</span>
</div>
);
},
},
{
title: "所在岗位",
dataIndex: "studentJobName",
key: "studentJobName",
width: 60,
align: "center",
className: "h",
customRender: (text) => {
return (
<div class="racona">
<span>
{text.record.studentJobName
? text.record.studentJobName
: "-"}
</span>
</div>
);
},
},
{
title: "作业成绩",
dataIndex: "workScore",
key: "workScore",
width: 60,
align: "center",
className: "h",
customRender: (text) => {
return (
<div class="racona">
<span>
{text.record.workScore || text.record.workScore == 0
? text.record.workScore
: "-"}
</span>
</div>
);
},
},
{
title: "考试成绩",
dataIndex: "examinationScore",
key: "examinationScore",
width: 60,
align: "center",
className: "h",
customRender: (text) => {
return (
<div class="racona">
<span>
{text.record.examinationScore ||
text.record.examinationScore == 0
? text.record.examinationScore
: "-"}
</span>
</div>
);
},
},
{
title: "评分",
dataIndex: "assessmentScore",
key: "assessmentScore",
width: 60,
align: "center",
className: "h",
customRender: (text) => {
return (
<div class="racona">
<span>
{text.record.assessmentScore ||
text.record.assessmentScore == 0
? text.record.examinationScore
: "-"}
</span>
</div>
);
},
},
{
title: "任务状态",
dataIndex: "finishStatus",
key: "finishStatus",
width: 60,
align: "center",
className: "h",
customRender: (text) => {
return (
<div class="racona">
<span>
{text.record.finishStatus == 0 ||
text.record.finishStatus == null
? "未开始"
: text.record.finishStatus == 1
? "已完成"
: text.record.finishStatus == 2
? "进行中"
: "-"}
</span>
</div>
);
},
},
{
title: "操作",
dataIndex: "operation",
key: "operation",
width: 100,
align: "center",
className: "h",
customRender: (text) => {
return text.record.finishStatus == 1 ? (
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<a-button
type="link"
class="operation"
style="cursor:pointer;margin-right:10px;"
onClick={() => {
state.CWvisible = true;
}}
>
查看作业
</a-button>
<a-button
type="link"
class="operation"
style="cursor:pointer;margin-right:10px;"
onClick={() => {
state.CQvisible = true;
}}
>
查看答卷
</a-button>
</div>
) : (
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<a-button
type="link"
class="operation"
style="cursor:pointer;margin-right:10px;"
disabled
>
查看作业
</a-button>
<a-button
type="link"
class="operation"
style="cursor:pointer;margin-right:10px;"
disabled
>
查看答卷
</a-button>
</div>
);
},
},
],
exportHomeWorkV: false,
downloadUrl: null,
});
// //面授直播管理列表操作
// const ListOpera = () => {
// let arr = state.tabledata;
// arr.map((value) => {
// if (value.finishStatus == 1) {
// value.operation = (
// <div
// style={{
// display: "flex",
// alignItems: "center",
// justifyContent: "center",
// }}
// >
// <a-button
// type="link"
// class="operation"
// style="cursor:pointer;margin-right:10px;"
// onClick={() => {
// state.CWvisible = true;
// }}
// >
// 查看作业
// </a-button>
// <a-button
// type="link"
// class="operation"
// style="cursor:pointer;margin-right:10px;"
// onClick={() => {
// state.CQvisible = true;
// }}
// >
// 查看答卷
// </a-button>
// </div>
// );
// } else {
// value.operation = (
// <div
// style={{
// display: "flex",
// alignItems: "center",
// justifyContent: "center",
// }}
// >
// <a-button
// type="link"
// class="operation"
// style="cursor:pointer;margin-right:10px;"
// disabled
// >
// 查看作业
// </a-button>
// <a-button
// type="link"
// class="operation"
// style="cursor:pointer;margin-right:10px;"
// disabled
// >
// 查看答卷
// </a-button>
// </div>
// );
// }
// });
// };
const closeDrawer = () => {
ctx.emit("update:Fvisible", false);
state.name = "";
state.projectName = "";
state.selectedRowKeys = [];
state.currentPage = 1;
state.tableDataTotal = -1;
state.tableDataTotal2 = 0;
state.tabledata = [];
};
const afterVisibleChange = (bol) => {
if (bol == true) {
getStudent();
}
};
const selectProjectName = (value) => {
state.projectName = value;
};
const onSelectChange = (selectedRowKeys) => {
// if (selectedRowKeys.length > 2) {
// return;
// }
state.selectedRowKeys = selectedRowKeys;
// console.log("选择信息", e);
};
const allStuOver = () => {
state.ASOvervisible = true;
};
const showEntryScore = () => {
state.Evisible = true;
};
//催促学员学习
const godie = () => {
message.destroy();
message.success("催促" + props.title + "成功");
};
//表头清空
const clearLine = () => {
state.selectedRowKeys = [];
};
//获取学员
const getStudent = () => {
console.log("我是传递的查询参数", props.projectTaskInfo, {
pageNo: state.currentPage,
pageSize: state.pageSize,
currentStageId: props.projectTaskInfo.stageId,
type: 1,
pid: props.projectTaskInfo.projectId,
status: Number(state.projectName),
studentName: state.name,
currentTaskId: props.projectTaskInfo.projectTaskId,
});
api
.AssessmentManagementMessage({
pageNo: state.currentPage,
pageSize: state.pageSize,
currentStageId: props.projectTaskInfo.stageId,
type: 1,
pid: props.projectTaskInfo.projectId,
status: Number(state.projectName),
studentName: state.name,
currentTaskId: props.projectTaskInfo.projectTaskId,
taskType: props.projectTaskInfo.type,
})
.then((res) => {
console.log("获取面授管理学员", res);
if (res.data.code == 200) {
let newData = [];
for (let i = 0; i < res.data.data.records.length; i++) {
res.data.data.records[i].key = res.data.data.records[i].studentId;
newData.push(res.data.data.records[i]);
}
state.tabledata = newData;
// ListOpera();
state.tableDataTotal = res.data.data.total;
state.tableDataTotal2 = res.data.data.total;
}
})
.catch((err) => {
console.log(err);
state.tabledata = [];
});
};
//搜索学员
const searchTaskList = () => {
state.currentPage = 1;
state.tableDataTotal = -1;
state.tableDataTotal2 = 0;
getStudent();
};
// 重置按钮
function resetTaskList() {
state.currentPage = 1;
state.name = "";
state.projectName = "";
state.tableDataTotal = -1;
state.tableDataTotal2 = 0;
getStudent();
}
//分页
const changePaginationStu = (page) => {
state.currentPage = page;
state.tableDataTotal = -1;
state.tableDataTotal2 = 0;
getStudent();
};
// 导出数据
function exportTaskStu() {
console.log("props.projectTaskInfo", props.projectTaskInfo);
window.open(
`${
process.env.VUE_APP_PROXY_URL
}admin/student/exportTaskStudent?currentStageId=${
props.projectTaskInfo.stageId
}&type=${1}&pid=${props.projectTaskInfo.projectId}taskType=2`
);
// api
// .exportTaskStudent({
// pageNo: state.currentPage,
// pageSize: state.pageSize,
// currentStageId: props.projectTaskInfo.stageId,
// currentTaskId: props.projectTaskInfo.projectTaskId,
// type: 1,
// pid: props.projectTaskInfo.projectId,
// })
// .then((res) => {
// console.log(res);
// })
// .catch((err) => {
// console.log(err);
// });
}
//显示导出作业弹窗
const exportHomeWorkShow = () => {
// state.exportHomeWorkV = true;
// exportHomeWork();
let obj = {
currentStageId: props.projectTaskInfo.stageId,
pid: props.projectTaskInfo.projectId,
taskId: props.projectTaskInfo.projectTaskId,
taskType: props.projectTaskInfo.type,
type: 1,
};
api
.exportHomeWork(obj)
.then((res) => {
console.log("导出作业", JSON.parse(res.data).data);
if (JSON.parse(res.data).code === 200) {
message.destroy();
message.success("导出作业成功");
state.exportHomeWorkV = true;
state.downloadUrl = JSON.parse(res.data).data;
}
})
.catch((err) => {
message.destroy();
message.error("导出作业失败");
console.log("导出作业失败", err);
});
};
//导出作业
function exportHomeWork() {
console.log("props.projectTaskInfo", props.projectTaskInfo);
window.open(
`${
process.env.VUE_APP_PROXY_URL
}admin/student/exportHomeWork?currentStageId=${
props.projectTaskInfo.stageId
}&type=${1}&pid=${props.projectTaskInfo.projectId}&taskId=${
props.projectTaskInfo.projectTaskId
}&taskType=${props.projectTaskInfo.type}`
);
}
return {
...toRefs(state),
selectProjectName,
closeDrawer,
afterVisibleChange,
onSelectChange,
allStuOver,
showEntryScore,
godie,
clearLine,
searchTaskList,
resetTaskList,
changePaginationStu,
exportTaskStu,
exportHomeWorkShow,
exportHomeWork,
getStudent,
};
},
};
</script>
<style lang="scss">
.ProjectFaceTaskManage {
.ant-drawer-content-wrapper {
max-width: 1300px;
}
.drawerMain {
min-width: 700px;
margin: 0px 32px 0px 32px;
overflow-x: auto;
display: flex;
flex-direction: column;
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
}
}
.main {
width: 100%;
height: 100%;
overflow: auto;
padding-right: 10px;
.endtime {
font-size: 16px;
font-weight: 500;
color: #333333;
}
.search {
width: 100%;
display: flex;
flex-wrap: wrap;
margin-top: 20px;
.namecon {
display: flex;
flex-wrap: nowrap;
margin-bottom: 10px;
.name {
margin-top: 8px;
}
}
.btns {
display: flex;
flex-wrap: nowrap;
.btn {
cursor: pointer;
width: 100px;
height: 40px;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
.img1 {
width: 15px;
height: 17px;
background-image: url(../../../assets/images/courseManage/search0.png);
background-size: 100% 100%;
margin-right: 7px;
}
.img2 {
width: 16px;
height: 18px;
background-image: url(../../../assets/images/courseManage/reset1.png);
background-size: 100% 100%;
margin-right: 7px;
}
}
.btn1 {
background: #4ea6ff;
color: #ffffff;
}
.btn2 {
background: #ffffff;
color: #4ea6ff;
border: 1px solid #4ea6ff;
}
}
}
.btnss {
display: flex;
flex-wrap: nowrap;
.btn {
cursor: pointer;
width: 130px;
height: 40px;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
.img1 {
width: 15px;
height: 17px;
background-image: url(../../../assets/images/basicinfo/call.png);
background-size: 100% 100%;
margin-right: 7px;
}
.img2 {
width: 17px;
height: 16px;
background-image: url(../../../assets/images/coursewareManage/export.png);
background-size: 100% 100%;
margin-right: 7px;
}
}
.btn1 {
background: #4ea6ff;
color: #ffffff;
}
.btn2 {
background: #ffffff;
margin-right: 20px;
color: #4ea6ff;
border: 1px solid #4ea6ff;
}
}
.line {
width: 100%;
height: 40px;
background-color: #e9f6fe;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
border: 1px solid #c3e6fc;
.inline {
width: 95%;
height: 100%;
display: flex;
justify-content: space-between;
.left {
height: 100%;
display: flex;
align-items: center;
.img {
width: 14px;
height: 15px;
background-image: url(../../../assets/images/leveladd/gan.png);
background-size: 100% 100%;
}
.text {
color: #999ba3;
}
.text2 {
color: #4ea6ff;
margin-left: 5px;
margin-right: 5px;
}
.text3 {
color: #999ba3;
margin-left: 20px;
}
}
.right {
font-size: 14px;
font-weight: 400;
color: #387df7;
height: 100%;
display: flex;
align-items: center;
cursor: pointer;
}
}
}
.tableBox {
.ant-table-selection-column {
padding: 0px !important;
}
.ant-pagination-item,
.ant-pagination-prev,
.ant-pagination-next,
.ant-pagination-options {
margin-bottom: 10px;
}
.ant-table-thead > tr > th {
background-color: rgba(239, 244, 252, 1) !important;
}
.ant-table-selection-column {
padding: 0 !important;
}
th.h {
background-color: #eff4fc !important;
}
.head {
padding-left: 0px !important;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: #f6f9fd;
}
.studentopea1 {
font-size: 14px;
font-weight: 400;
color: #387df7;
line-height: 22px;
padding-right: 8px;
border-right: 1px solid #e9e9e9;
cursor: pointer;
}
.studentopea2 {
font-size: 14px;
font-weight: 400;
color: #387df7;
line-height: 22px;
padding-right: 8px;
padding-left: 8px;
border-right: 1px solid #e9e9e9;
cursor: pointer;
}
.pa {
margin-top: 15px;
width: 100%;
display: flex;
justify-content: center;
}
}
}
.btnn {
height: 72px;
width: 100%;
position: absolute;
background-color: #fff;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
.btn1 {
width: 100px;
height: 40px;
border: 1px solid #4ea6ff;
border-radius: 8px;
color: #4ea6ff;
background-color: #fff;
cursor: pointer;
}
.btn2 {
cursor: pointer;
width: 100px;
height: 40px;
background: #4ea6ff;
border-radius: 8px;
border: 0;
margin-left: 15px;
color: #fff;
}
}
}
}
</style>