Files
fe-manage/src/components/drawers/project/ProjectHomeWorkManage.vue
zhangyc 0cd2efad61 style
2023-01-11 10:14:35 +08:00

948 lines
24 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="Wvisible"
class="drawerStyle ProjectHomeWorkManage"
placement="right"
width="80%"
@after-visible-change="afterVisibleChange"
:zIndex="100"
>
<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: 200px; 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: 200px"
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 btn2" @click="exportTaskStu">
<div class="img2"></div>
<div class="wz">导出数据</div>
</div>
<div class="btn btn2" @click="exportHomeWorkShow">
<div class="wz">导出作业</div>
</div>
<div class="btn btn2">
<div class="wz" @click="showEntryScore">导入成绩</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">{{ tableDataTotal }}</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">取消</button>
<button class="btn2">确定</button>
</div>
</div>
</a-drawer>
<!-- 录入成绩抽屉 -->
<EScore
v-model:eScorevisible="Evisible"
:type="1"
:id="projectTaskInfo?.projectTaskId"
v-model:searchTaskList="searchTaskList"
/>
<!-- 查看作业抽屉 -->
<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 CKWork from "../CheckWork.vue";
import CQue from "../CheckQue.vue";
// import EntryScores from "../EntryScores.vue";
import EScore from "../ExportScore.vue";
// import * as api from "../../../api/index";
import * as api from "../../../api/index1";
import ExportHomeWork from "../../Modals/ExportHomeWork.vue";
export default {
name: "ProjectHomeWorkManage",
components: {
// EntryScores,
CKWork,
CQue,
EScore,
ExportHomeWork,
},
props: {
Wvisible: {
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: undefined,
projectNameList: [
{
id: 1,
value: "0",
label: "未开始",
},
{
id: 2,
value: "2",
label: "进行中",
},
{
id: 3,
value: "1",
label: "已完成",
},
],
selectedRowKeys: [],
pageNo: 1,
pageSize: 10,
currentPage: 1,
tableDataTotal: -1,
tableDataTotal2: 0, //显示总数
tabledata: [
// {
// workNum: "123",
// userName: "li",
// deptName: "开发",
// jobName: "前端开发",
// score: 89,
// group: "-",
// comptime: "2022-07-22 14:00:30",
// 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",
ellipsis: true,
customRender: (text) => {
return (
<div class="racona">
<span>
{text.record.studentDepartName
? text.record.studentDepartName
: "-"}
</span>
</div>
);
},
},
{
title: "所在岗位",
dataIndex: "studentJobName",
key: "studentJobName",
width: 60,
align: "center",
ellipsis: true,
className: "h",
customRender: (text) => {
return (
<div class="racona">
<span>
{text.record.studentJobName
? text.record.studentJobName
: "-"}
</span>
</div>
);
},
},
{
title: "所属小组",
dataIndex: "studentOrgName",
key: "studentOrgName",
width: 60,
align: "center",
ellipsis: true,
className: "h",
customRender: (text) => {
return (
<div class="racona">
<span>
{text.record.studentOrgName
? text.record.studentOrgName
: "-"}
</span>
</div>
);
},
},
{
title: "成绩",
dataIndex: "workScore",
key: "workScore",
width: 60,
align: "center",
ellipsis: true,
className: "h",
customRender: (text) => {
return (
<div class="racona">
<span>
{text.record.workScore || text.record.workScore == 0
? text.record.workScore
: "-"}
</span>
</div>
);
},
},
{
title: "完成时间",
dataIndex: "lastStudyTime",
key: "lastStudyTime",
width: 60,
align: "center",
ellipsis: true,
className: "h",
customRender: (text) => {
return (
<div class="racona">
<span>
{text.record.lastStudyTime ? text.record.lastStudyTime : "-"}
</span>
</div>
);
},
},
{
title: "任务状态",
dataIndex: "finishStatus",
key: "finishStatus",
width: 60,
align: "center",
ellipsis: true,
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",
ellipsis: true,
className: "h",
},
],
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>
</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>
</div>
);
}
});
};
const closeDrawer = () => {
ctx.emit("update:Wvisible", false);
state.name = "";
state.projectName = undefined;
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;
};
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,
taskType: props.projectTaskInfo.type,
});
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].id;
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 = undefined;
state.tableDataTotal = -1;
state.tableDataTotal2 = 0;
getStudent();
}
//分页
const changePaginationStu = (page) => {
state.currentPage = page;
state.tableDataTotal = -1;
state.tableDataTotal2 = 0;
getStudent();
};
// 导出数据
function exportTaskStu() {
window.open(
`${
process.env.VUE_APP_PROXY_URL
}admin/student/exportTaskStudent?currentStageId=${
props.projectTaskInfo.stageId
}&type=${1}&pid=${props.projectTaskInfo.projectId}&taskType=4`
);
// 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,
exportHomeWork,
exportHomeWorkShow,
getStudent,
};
},
};
</script>
<style lang="scss">
.ProjectHomeWorkManage {
.drawerMain {
min-width: 550px;
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>