Files
fe-manage/src/components/student/TableStudent.vue

1693 lines
40 KiB
Vue

<template>
<div class="TableStudent">
<a-row
type="flex"
gutter="12"
style="padding-left: 20px; margin-right: 0px"
>
<a-col>
<a-form-item title="姓名:">
<a-input
class="cus-input"
v-model:value="tableParam.studentName"
placeholder="请输入姓名"
/>
</a-form-item>
</a-col>
<!-- <a-col v-if="type === 1">
<a-form-item title="小组名称:">
<a-input
class="cus-input"
v-model:value="tableParam.groupName"
placeholder="请输入小组名称"
/>
</a-form-item>
</a-col>
-->
<a-col v-if="type === 1 && !isNewEmployee">
<a-form-item title="部门:">
<div class="select in" style="width: 270px">
<OrgClass
v-model:value="tableParam.studentDepartId"
v-model:name="tableParam.studentDepartName"
></OrgClass>
</div>
</a-form-item>
</a-col>
<a-col v-if="type === 1 && !isNewEmployee">
<a-form-item title="优秀学员:">
<div class="select">
<a-select
v-model:value="tableParam.topFlag"
style="width: 260px; height: 40px"
placeholder="是否为优秀学员"
:options="topFlagList"
allowClear
></a-select>
</div>
</a-form-item>
</a-col>
<a-col v-if="isNewEmployee">
<a-form-item title="审核状态:">
<div class="select">
<a-select
v-model:value="tableParam.approvalResults"
style="width: 260px; height: 40px"
placeholder="报名及HR审批结果"
:options="hrAuditResultList"
allowClear
></a-select>
</div>
</a-form-item>
</a-col>
<a-col v-if="isNewEmployee">
<a-form-item title="学习状态:">
<div class="select">
<a-select
v-model:value="tableParam.approvalResults"
style="width: 260px; height: 40px"
placeholder="学习状态"
:options="learnStatusList"
allowClear
></a-select>
</div>
</a-form-item>
</a-col>
<a-col>
<a-button
class="cus-btn"
style="background: #4ea6ff; color: #fff; width: 100px"
@click="search"
:loading="stuAsyncLoading"
>
<template #icon>
<img
style="margin-right: 10px"
src="../../assets/images/courseManage/search0.png"
/></template>
搜索
</a-button>
</a-col>
<a-col :span="2">
<a-button
class="cus-btn"
style="width: 100px; background: #4ea6ff; color: #fff"
@click="reset"
>
<template #icon>
<img
style="margin-right: 10px"
src="../../assets/images/courseManage/reset0.png"
/></template>
重置
</a-button>
</a-col>
</a-row>
<a-row
type="flex"
gutter="12"
style="padding-left: 20px; margin-right: 0px"
v-if="checkPer(permissions)"
>
<a-col :span="1.5">
<CommonStudent
:type="type"
:id="id"
@finash="submitCall"
:stage="stage"
>
<a-button class="cus-btn" style="background: #4ea6ff; color: #fff">
<template #icon
><img
style="margin-right: 10px"
src="../../assets/images/courseManage/add0.png"
/></template>
添加学员
</a-button>
</CommonStudent>
</a-col>
<!-- 新加导入学员 批量换组 导出学习信息 -->
<a-col :span="1.5" v-if="(type === 1 || type === 2) && !isNewEmployee">
<a-button
class="cus-btn"
@click="showImpStu"
style="background: #4ea6ff; color: #fff"
>
<template #icon
><img
style="margin-right: 10px"
src="../../assets/images/basicinfo/in.png"
/></template>
导入学员
</a-button>
</a-col>
<a-col :span="1.5" v-if="type === 1 && !isNewEmployee && !isNewEmployee">
<a-button
class="cus-btn"
@click="showChangeGroupModal"
style="background: #4ea6ff; color: #fff"
>
批量换组
</a-button>
</a-col>
<a-col :span="1.5" v-if="type === 1">
<a-button
class="cus-btn"
@click="exportTaskStu"
style="background: #4ea6ff; color: #fff"
>
导出学习信息
</a-button>
</a-col>
<a-col :span="1.5" v-if="type === 2">
<a-button
class="cus-btn"
@click="exportTaskStuRouter"
style="background: #4ea6ff; color: #fff"
>
导出学习信息
</a-button>
</a-col>
<a-col :span="1.5">
<a-button
class="cus-btn"
@click="bathDel"
style="background: #4ea6ff; color: #fff"
>
<template #icon
><img
style="margin-right: 10px"
src="../../assets/images/projectadd/delete1.png"
/></template>
批量删除
</a-button>
</a-col>
<a-col :span="1.5" v-if="type === 2">
<a-button
class="cus-btn"
@click="showChangeModal"
style="background: #4ea6ff; color: #fff"
>
<template #icon></template>
批量调整关卡
</a-button>
</a-col>
<!-- 新加批量操作导出导出作业 -->
<a-col :span="1.5" v-if="type === 3" class="batchOpera">
<div
class="stmm_btn btn4"
@click="hideShow"
style="background: #4ea6ff"
>
<div class="btn4_sub">
<span style="color: #fff; margin-right: 4px"> 批量操作 </span>
<div
class="b_zk"
:style="{
display: hideshow ? 'block' : 'none',
color: '#fff',
lineHeight: '9px',
transform: 'rotate(180deg)',
}"
>
^
</div>
<div
class="b_sq"
:style="{
display: hideshow ? 'none' : 'block',
color: '#fff',
lineHeight: '12px',
}"
>
^
</div>
</div>
<div
class="btn4_sup"
:style="{ display: hideshow ? 'none' : 'block' }"
>
<div class="btnsbox">
<!-- <div class="btn4_tit" @click="showEScoreModal">
<span>批量录入成绩</span>
</div> -->
<div class="btn4_op1" @click="updateStatus(1)">
<span>批量结业</span>
</div>
<div class="btn4_op2" @click="auditStatus(0)">
<span>批量通过</span>
</div>
<div class="btn4_op3" @click="auditStatus(2)">
<span>批量拒绝</span>
</div>
</div>
</div>
</div>
<div
class="stmm_btn btn5"
@click="exportStu"
style="background: #4ea6ff; color: #fff"
>
<div class="export"></div>
<div class="btnText">导出</div>
</div>
<div
class="stmm_btn btn5"
style="margin-left: 15px; background: #4ea6ff; color: #fff"
@click="exportHomeWorkShow"
>
<div class="btnText">导出作业</div>
</div>
<div
class="stmm_btn btn5"
style="margin-left: 15px; background: #4ea6ff; color: #fff"
@click="handleUpdateScore"
>
<div class="btnText">刷新</div>
</div>
</a-col>
</a-row>
<div style="margin-top: 20px">
<a-table
:columns="filterColumns()"
:data-source="tableData.list"
:pagination="stuPagination"
:loading="tableData.loading"
:scroll="{ x: 1350 }"
row-key="id"
:row-selection="stuRowSelection"
>
<template #action="{ record }">
<!-- <div style="display:flex;justify-content: center;align-items: center;">-->
<!-- <div v-if="props.type == 1" @click="excellentStudent(record)"
style="color: #4ea6ff; font-size: 14px; text-align: center;margin-left: 20px;cursor: pointer;">
优秀学员
</div>
<div @click="seeStudent(record)"
style="color: #4ea6ff; font-size: 14px; text-align: center;margin-left: 20px;cursor: pointer;">
查看
</div>
<div v-if="props.type == 2" @click="seeStudent(record)"
style="color: #4ea6ff; font-size: 14px; text-align: center;margin-left: 20px;cursor: pointer;">
调整
</div> -->
<!-- </div>-->
<a-space :size="2">
<slot name="extension" v-bind:data="{ record }"></slot>
<a-button
v-if="
type === 3 &&
record.status !== 2 &&
record.status !== 0 &&
checkPer(permissions)
"
@click="auditStatus(0, record.id)"
type="link"
>通过
</a-button>
<a-button
v-if="
type === 3 &&
record.status !== 2 &&
record.status !== 0 &&
checkPer(permissions)
"
@click="auditStatus(2, record.id)"
type="link"
>拒绝
</a-button>
<a-button
v-if="checkPer(permissions)"
:disabled="record.isLeader === '1'"
@click="del(record.id, record)"
type="link"
danger
>删除
</a-button>
</a-space>
</template>
</a-table>
</div>
</div>
<!-- 批量调整关卡弹窗 -->
<ChangeLevelModal
v-model:visiblene="visiblene"
:stage="stage"
:ids="stuSelectKeys"
@finash="submitCall"
/>
<!-- 换组弹窗 -->
<ChangeGroupModal
v-model:changegroupV="checkgroupParam.changegroupV"
:groupList="groupList"
:checkBatch="checkgroupParam.checkBatch"
:checkgroupStuId="stuSelectKeys"
/>
<!-- 批量调整关卡弹窗 -->
<!-- 取消学员弹窗 -->
<div>
<a-modal
v-model:visible="canclestu"
:footer="null"
:closable="close"
wrapClassName="canclestu"
centered="true"
@cancel="closeModal1"
>
<div class="delete">
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<div class="icon1"></div>
<span>提示</span>
</div>
<div class="body">
<span>您是否授予此学员优秀学员称号?</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn1" @click="cancelyou">
<div class="btnText">取消</div>
</div>
<div class="del_btn btn2" @click="closeModal1">
<div class="btnText">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
</div>
<!-- 取消学员弹窗 -->
<!-- 优秀学员弹窗 -->
<div>
<a-modal
v-model:visible="canclestu1"
:footer="null"
:closable="close"
wrapClassName="canclestu1"
centered="true"
>
<div class="delete">
<div class="del_header"></div>
<div class="del_main">
<div class="header">
<div class="icon1"></div>
<span>提示</span>
</div>
<div class="body">
<span>您是否取消此学员优学员称号?</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn1">
<div class="btnText" @click="cancelcanyou">取消</div>
</div>
<div class="del_btn btn2">
<div class="btnText" @click="closeModal3">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
</div>
<!-- 查看学员 传入查看学员的id-->
<see-stu
v-model:Seevisible="Seevisible"
v-model:checkStuId="checkStuId"
v-model:projectId="projectId"
/>
<!-- 导入作业成绩抽屉 -->
<EScore
v-model:eScorevisible="eScorevisible"
:type="3"
:id="id"
:pid="id"
v-model:searchTaskList="getStuList"
/>
<!-- 导出作业提示框 -->
<ExportHomeWork
v-model:exportHomeWorkV="exportHomeWorkV"
:downloadUrl="downloadUrl"
/>
<!-- 导入学员抽屉 -->
<!-- :courseId="projectTaskInfo.courseId"
:courseType="2" -->
<imp-stu
v-model:AddImpStuvisible="AddImpStuvisible"
@AddImpStuvisibleClose="AddImpStuvisibleClose"
:courseId="id"
:courseType="type"
/>
<!-- 删除弹窗 -->
<a-modal
v-model:visible="deleteModalVisible"
:footer="null"
wrapClassName="deleteModal1"
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="closeSameModal"></div>
</div>
<div class="body">
<span>确定删除?</span>
<span style="margin-top: 20px">数据删除后不可恢复!</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn1" @click="closeSameModal">
<div class="btnText">取消</div>
</div>
<div class="del_btn btn2" @click="sureSameModal">
<div class="btnText">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
</template>
<script setup lang="jsx">
import { computed, defineProps, onMounted, ref, watch } from "vue";
import { delStudentList, getStuPage, batchUpdateStatus, auditStudentBatch, updateScore } from "@/api/index1";
import ChangeGroupModal from "@/components/student/ChangeGroupModal.vue";
import CommonStudent from "@/components/student/CommonStudent";
import ChangeLevelModal from "./ChangeLevelModal.vue";
import { message } from "ant-design-vue";
import SeeStu from "../../components/drawers/SeeStu";
import EScore from "../drawers/ExportScore.vue";
import OrgClass from "@/components/project/OrgClass";
import ExportHomeWork from "../Modals/ExportHomeWork.vue";
import * as api from "../../api/index1";
import ImpStu from "../drawers/AddLevelImportStu";
import { checkPer } from "@/utils/utils";
import { useAsyncStu } from "@/utils/useCommon";
const props = defineProps({
type: Number,
permissions: {
type: String,
default: "",
},
activeKey: {
type: String,
default: "",
},
id: String,
columns: {
type: Array,
default: () => [],
},
stage: {
type: Array,
default: () => [],
},
visable: {
type: Boolean,
default: false,
},
isgetStudent: {
type: Boolean,
default: null,
},
groupList: {
type: Array,
default: () => [],
},
params: {
type: Object,
default: () => ({}),
},
remarksTrue: {
type: Boolean,
default: false,
},
isNewEmployee: {
type: Boolean,
default: false,
},
});
const { loading: stuAsyncLoading, start } = useAsyncStu(props.id, props.type, getStuList);
const topFlagList = ref([
{
id: 0,
value: 0,
label: "普通学员",
},
{
id: 1,
value: 1,
label: "优秀学员",
},
]);
const hrAuditResultList = ref([
{
id: 1,
value: 1,
label: "报名失败",
},
{
id: 2,
value: 2,
label: "审核中",
},
{
id: 3,
value: 3,
label: "审核通过",
},
{
id: 4,
value: 4,
label: "审核不通过",
},
]);
const learnStatusList = ref([
{
id: 1,
value: 1,
label: "未开始",
},
{
id: 2,
value: 2,
label: "进行中",
},
{
id: 3,
value: 3,
label: "已完成",
},
]);
const tablecolumns = ref([
{
title: "姓名",
dataIndex: "studentName",
key: "studentName",
width: "80px",
align: "left",
className: "h",
ellipsis: true,
customRender: ({ record: { studentName, topFlag } }) =>
topFlag ? (
<div
style={{
display: "flex",
alignItems: "center",
}}
>
<span className="stydentName">{studentName}</span>
<div className="studentExcellent">
<img
className="studentExcellentImg"
src={require("../../assets/images/taskpage/excellent.png")}
/>
<span className="studentExcellentT">优秀</span>
</div>
</div>
) : (
<div>{studentName}</div>
),
},
{
title: "工号",
dataIndex: "studentUserNo",
key: "studentUserNo",
width: "60px",
align: "center",
className: "h",
ellipsis: true,
},
{
title: "部门",
dataIndex: "studentDepartName",
key: "studentDepartName",
width: "120px",
align: "center",
className: "h",
customCell: () => { return { style: { maxWidth: '200px', overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', cursor: 'pointer' } } },
customRender: ({ record: { studentOrgName, studentDepartName } }) =>
// <a-tooltip color="white" placement="topLeft" title={allDepartShow(studentOrgName)} >{allDepartShow(studentOrgName)}</a-tooltip>
<a-tooltip color="white" placement="topLeft" title={studentOrgName} >{studentDepartName}</a-tooltip>
},
{
title: "所属小组",
dataIndex: "groupName",
key: "groupName",
width: props.type === 1 ? 100 : 0,
align: "center",
className: "h",
ellipsis: true,
},
{
title: "报名方式",
dataIndex: "source",
key: "source",
width: "80px",
align: "center",
customRender: ({ record }) => {
// ({ 1: "快速添加", 2: "组织", 3: "受众", 4: "报名" }[source]),
return ({
0: "导入",
1: "手动加入",
2: "手动加入",
3: "手动加入",
4: "导入",
5: "自主报名",
6: "导入",
8: "扫码报名",
9: "自主报名"
}[record.source])
}
},
{
title: "必修进度",
dataIndex: "required",
key: "required",
width: "100px",
align: "center",
customRender: ({ record }) => (
<div>
{record.requiredFinishTaskNum}/{record.requiredTotalTaskNum}
</div>
),
},
{
title: "选修进度",
dataIndex: "elective",
key: "elective",
width: "100px",
align: "center",
customRender: ({ record }) => (
<div>
{record.electiveFinishTaskNum}/{record.electiveTotalTaskNum}
</div>
),
},
{
title: "总进度",
dataIndex: "progress",
key: "progress",
width: 80,
align: "center",
className: "h",
ellipsis: true,
customRender: ({ record }) => (
<div>
{record.finishTaskNum || 0}/{record.totalTaskNum || 0}
</div>
),
},
{
title: "审核状态",
dataIndex: "approvalResults",
key: "approvalResults",
width: "80px",
align: "center",
customRender: ({ record: { hrAuditResult } }) =>
({
1: "报名失败",
2: "审核中",
3: "审核通过",
4: "审核不通过",
}[hrAuditResult]),
},
...props.columns,
{
title: "操作",
dataIndex: "operation",
key: "operation",
width: '220px',
fixed: "right",
align: "center",
slots: { customRender: "action" },
},
]);
function allDepartShow(a, b) {
let org =
a == "" || a == null || a == undefined
? (a = "")
: a.slice(0, 1) == "/"
? a.slice(1, a.length)
: a;
let depart = b == "" || b == null || b == undefined ? (b = "") : b;
let allname = org == "" && depart == "" ? "-" : org + depart;
const parts = allname.split('/');
const reversedParts = parts.reverse();
const reversedStr = reversedParts.join('/');
return reversedStr;
}
function filterColumns() {
let newColums = [...tablecolumns.value];
if (props.isNewEmployee) {
const filterArr = ['所属小组', '岗位', '备注', '证书数量'];
newColums = newColums.filter(item => !(filterArr.includes(item.title)));
}else{
const filterArr = ['必修进度', '选修进度', '备注', '证书数量'];
newColums = newColums.filter(item => !(filterArr.includes(item.title)));
}
return newColums;
}
const tableParam = ref({
studentName: "", //学员名称
groupName: "", //学员小组
studentDepartId: null, //部门
studentDepartName: null, //部门名称
topFlag: null, //是否是优秀学员
pageNo: 1,
status: 1,
pageSize: 10,
type: props.type,
pid: props.id,
...props.params
});
const checkgroupParam = ref({
changegroupV: false, //学员名称
checkgroupList: "", //学员小组
checkgroupStuId: null,
checkBatch: true,
});
const stuSelectKeys = ref([]);
const tableData = ref({
list: [],
total: 0,
loading: false,
});
const stuRowSelection = computed(() => ({
columnWidth: 20,
selectedRowKeys: stuSelectKeys.value,
onChange: onStuSelectChange,
preserveSelectedRowKeys: true,
}));
//显示学员换组弹窗
function showChangeGroupModal() {
console.log("批量");
const d = props.groupList;
console.log("d" + d);
// debugger
checkgroupParam.value.changegroupV = true;
checkgroupParam.value.checkBatch = true;
}
function search() {
tableParam.value.pageNo = 1
getStuList()
}
// 导出数据
function exportTaskStu() {
console.log("props.datasource", props);
window.open(
`${process.env.VUE_APP_BASE_API
}/admin/student/exportTaskStudent?type=${1}&pid=${props.id}&studentName=${tableParam.value.studentName === null ? '' : tableParam.value.studentName}&studentDepartName=${tableParam.value.studentDepartName === null ? '' : tableParam.value.studentDepartName}&topFlag=${tableParam.value.topFlag === null ? '' : tableParam.value.topFlag}`
);
}
function exportTaskStuRouter() {
console.log("props.datasource", props, props.id);
window.open(
`${process.env.VUE_APP_BASE_API
}/admin/student/exportTaskStudent?type=${2}&pid=${props.id}`
);
}
onMounted(() => {
// debugger
console.log("props.activeKey1" + props.activeKey1);
getStuList();
});
watch(props.isgetStudent, () => {
console.log("监测");
});
watch(props, () => {
if (!props.visable) {
stuSelectKeys.value = [];
console.log("关闭了");
}
console.log("props.visable", props.visable);
tableParam.value.pid = props.id;
getStuList();
});
function onStuSelectChange(e) {
stuSelectKeys.value = e;
}
const stuPagination = computed(() => ({
total: tableData.value.total,
showSizeChanger: false,
current: tableParam.value.pageNo,
pageSize: tableParam.value.pageSize,
onChange: changePagination,
}));
function changePagination(page) {
tableParam.value.pageNo = page;
getStuList();
}
function getStuList() {
tableData.value.loading = true;
console.log("tableParam.value", tableParam.value);
getStuPage(tableParam.value).then((res) => {
console.log("学员管理-获取学员", res.data);
tableData.value.total = res.data.data.total;
tableData.value.list = res.data.data.records;
tableData.value.loading = false;
});
}
function reset() {
tableParam.value.studentName = "";
tableParam.value.groupName = ""; //学员小组
tableParam.value.studentDepartId = null; //部门
tableParam.value.studentDepartName = null; //部门
tableParam.value.topFlag = null; //是否是优秀学员
tableParam.value.hrAuditResult = null; //报名及HR审批结果
getStuList();
}
function bathDel() {
if (stuSelectKeys.value && stuSelectKeys.value.length === 0) {
message.destroy();
return message.warning("请先选中学员");
}
// 判断选择的人员中是否有小组长
let arr = [...tableData.value.list]
.filter((x) => [...stuSelectKeys.value].some((id) => id === x.id))
.filter((item) => item.isLeader === "1");
if (arr.length > 0) {
return message.warning(
"选择人员中:" + arr[0].studentName + "是小组长,请勿删除!"
);
}
tableData.value.loading = true;
delStudentList({ ids: stuSelectKeys.value, type: props.type, targetId: props.id }).then(() => getStuList());
}
const deleteModalVisible = ref(false);
const deleteId = ref(null);
const deleteTargetId = ref(null);
const deleteType = ref(null);
function del(id, row) {
if (row.isLeader === "1") {
return message.warning("" + row.name + "是小组长,请勿删除!");
}
deleteModalVisible.value = true;
deleteId.value = id;
deleteTargetId.value = row.pid;
deleteType.value = row.type;
// Modal.confirm({
// title: () => "确定删除?",
// icon: () => createVNode(ExclamationCircleOutlined),
// content: () => "数据删除后不可恢复!",
// okText: () => "确定",
// okType: "danger",
// class: "deleteModal",
// cancelText: () => "取消",
// onOk() {
// if (id) {
// tableData.value.loading = true;
// delStudentList({ ids: [id] }).then(() => getStuList());
// }
// },
// });
}
//确定删除
const sureSameModal = () => {
if (deleteId.value) {
tableData.value.loading = true;
delStudentList({
ids: [deleteId.value],
targetId: deleteTargetId.value,
type: deleteType.value
}).then(() => getStuList());
deleteModalVisible.value = false;
}
};
//取消
const closeSameModal = () => {
deleteModalVisible.value = false;
deleteId.value = null;
deleteTargetId.value = null;
deleteType.value = null;
};
function submitCall(flag) {
tableData.value.loading = true;
flag && getStuList();
flag && start();
}
// 调整关卡;
const visiblene = ref(false);
const showChangeModal = () => {
if (!stuSelectKeys.value.length) {
message.error("请选择学员");
return;
}
visiblene.value = true;
};
// 优秀学员
const canclestu = ref(false);
const canclestu1 = ref(false);
// function excellentStudent(record) {
// console.log(record)
// if (record.topFlag) {
// // 当该名学员是优秀学员时候
// canclestu1.value = true;
// } else {
// // 当该名学员不是优秀学员时候
// canclestu.value = true;
// }
// }
// 优秀学员-弹框关闭
function cancelyou() {
canclestu.value = false;
}
// 优秀学员-设置优秀学员
function closeModal1() {
canclestu.value = false;
// 授予优秀学员操作
}
// 取消优秀学员-弹框关闭
function cancelcanyou() {
canclestu1.value = false;
}
// 取消优秀学员-取消优秀学员
function closeModal3() {
canclestu1.value = false;
// 取消优秀学员操作
}
// 查看学员
const Seevisible = ref(false);
const checkStuId = ref(null);
const projectId = ref(null);
// function seeStudent(record) {
// console.log(record)
// checkStuId.value = record.id;
// projectId.value = props.id;
// Seevisible.value = true;
// console.log(props.type)
// console.log(checkStuId.value, projectId.value)
// }
//面授课批量操作下拉框
const hideshow = ref(true);
const hideShow = () => {
if (hideshow.value == true) {
hideshow.value = false;
} else {
hideshow.value = true;
}
};
//批量导入成绩
const eScorevisible = ref(false);
const showEScoreModal = () => {
eScorevisible.value = true;
};
//显示导出作业弹窗
const exportHomeWorkV = ref(false);
const downloadUrl = ref(null);
const exportHomeWorkShow = () => {
// exportHomeWorkV.value = true;
// exportHomeWork();
let obj = {
currentStageId: 0,
pid: props.id,
taskId: 0,
taskType: 0,
type: 3,
};
api.exportHomeWork(obj).then((res) => {
console.log("导出作业", res.data.data);
//message.destroy();
// message.success("导出作业成功");
exportHomeWorkV.value = true;
downloadUrl.value = res.data.data;
}).catch(err => {
// message.error(err.data.msg)
})
};
// //导出作业
// const exportHomeWork = () => {
// window.open(
// `${
// process.env.VUE_APP_PROXY_URL
// }admin/student/exportHomeWork?type=${3}&pid=${props.id}`
// );
// };
//导出
const exportStu = () => {
console.log("props.datasource", props);
if (props.id != undefined) {
window.open(
`${process.env.VUE_APP_BASE_API
}/admin/student/exportTaskStudent?type=${3}&pid=${props.id}&thirdType=2`
);
}
};
//批量操作 结业、拒绝等
const updateStatus = (status, id) => {
if (!id && stuSelectKeys.value.length === 0) {
message.warning("请选择学员");
}
let obj = {
ids: id ? [id] : stuSelectKeys.value,
};
if (status === 1) {
obj.completionStatus = 1;
} else {
obj.status = status;
}
batchUpdateStatus(obj)
.then((res) => {
console.log("批量更新学员状态", res);
if (res.data.code === 200) {
getStuList();
stuSelectKeys.value = [];
}
})
.catch((err) => {
console.log("批量更新学员状态失败", err);
});
};
//批量通过
const auditStatus = (status, id) => {
if (!id && stuSelectKeys.value.length === 0) {
message.warning("请选择学员");
}
auditStudentBatch({
ids: id ? [id] : stuSelectKeys.value,
status
}).then(() => {
getStuList();
stuSelectKeys.value = [];
});
};
//导入学员
const AddImpStuvisible = ref(false); //导入学员抽屉
const showImpStu = () => {
AddImpStuvisible.value = true;
};
const AddImpStuvisibleClose = (isget) => {
console.log("关闭了导入学员弹框", isget);
{
/* 此处操作重新获取学员列表数据 */
}
if (isget) {
getStuList();
}
};
function startLoading() {
tableData.value.loading = true;
}
/**
* 更新列表分数详情
*/
function handleUpdateScore() {
const pid = props.id
tableData.value.loading = true
updateScore({ pid }).then(() => {
getStuList()
})
}
defineExpose({ getStuList, startLoading });
</script>
<style lang="scss">
.TableStudent {
table tr th.ant-table-selection-column,
table tr td.ant-table-selection-column {
padding-left: 3px;
}
}
.stydentName {
overflow: hidden;
text-overflow: ellipsis;
}
.studentExcellent {
width: 64px;
height: 24px;
border-radius: 2px;
border: 1px solid #ffb64e;
background-color: rgba(255, 182, 78, 0.1);
margin-left: 24px;
display: flex;
align-items: center;
.studentExcellentImg {
width: 16px;
height: 16px;
margin-left: 7px;
}
.studentExcellentT {
font-size: 12px;
font-weight: 400;
color: #ffb64e;
line-height: 17px;
margin-left: 3px;
}
}
.studentopea1 {
font-size: 14px;
font-weight: 400;
color: #387df7;
line-height: 22px;
padding-right: 8px;
border-right: 1px solid #e9e9e9;
cursor: pointer;
}
.cus-btn {
width: 100%;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16px;
border: 1px solid #4ea6ff;
border-radius: 8px;
background: #4ea6ff;
cursor: pointer;
color: #fff;
}
.white {
background: #fff;
color: #4ea6ff;
}
.cus-input {
height: 40px;
border-radius: 8px;
}
.del_header {
position: absolute;
width: calc(100%);
height: 40px;
background: linear-gradient(
rgba(78, 166, 255, 0.2) 0%,
rgba(78, 166, 255, 0) 100%
);
}
.batchOpera {
display: flex;
.stmm_btn {
width: 100px;
height: 40px;
margin-right: 14px;
background: #ffffff;
border: 1px solid #4ea6ff;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
.btnText {
color: #fff;
font-size: 14px;
font-weight: 400;
line-height: 40px;
}
}
.btn4 {
display: flex;
width: 130px;
flex-direction: column;
position: relative;
.btn4_sub {
display: flex;
justify-content: center;
align-items: center;
.b_zk {
width: 10px;
height: 8px;
// background-image: url("@/assets/images/coursewareManage/down.png");
background-size: 100% 100%;
}
.b_sq {
width: 10px;
height: 8px;
// background-image: url("@/assets/images/coursewareManage/up.png");
background-size: 100% 100%;
}
}
.btn4_sup {
width: 100%;
background-color: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
position: absolute;
top: 40px;
z-index: 999;
.btnsbox {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.btn4_tit {
margin: 10px auto;
white-space: nowrap;
}
.btn4_op1,
.btn4_op2,
.btn4_op3 {
margin-bottom: 10px;
white-space: nowrap;
}
// .btn4_tit:hover,
// .btn4_op1:hover,
// .btn4_op2:hover,
// .btn4_op3:hover {
// color: #4ea6ff;
// }
}
}
}
.btn5 {
margin-right: 0px;
.export {
width: 17px;
height: 18px;
margin-right: 5px;
background-image: url("@/assets/images/coursewareManage/export1.png");
}
}
}
.deleteModal1 {
.ant-modal {
width: 424px !important;
height: 258px !important;
.ant-modal-content {
width: 424px !important;
height: 258px !important;
.ant-modal-body {
width: 424px !important;
height: 258px !important;
padding: 0 !important;
.delete {
z-index: 999;
width: 424px;
height: 258px;
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;
.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;
}
}
}
}
}
}
.ant-modal-close-x {
display: none;
}
}
}
/*.delete {
z-index: 9999;
width: 424px;
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%);
}
.body {
width: 100%;
margin: 34px auto 56px auto;
display: flex;
justify-content: center;
align-items: center;
}
.del_main {
width: 100%;
position: relative;
}
.del_main > .header {
display: flex;
align-items: center;
padding-top: 20px;
padding-left: 26px;
font-size: 16px;
}
.del-icon {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/coursewareManage/notice.png);
background-size: 100% 100%;
}
.icon {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/coursewareManage/QR.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%;
}
.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;
margin-right: 14px;
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;
}
.btn2 {
background-color: #4ea6ff;
color: #ffffff;
}
.ant-modal-close {
margin-right: 18px;
margin-top: 5px;
}
.ant-modal-content {
width: 424px !important;
height: 258px !important;
}
.ant-modal-body {
width: 424px !important;
height: 258px !important;
padding: 0 !important;
position: relative;
top: 105px !important;
}
.ant-modal-body > .delete {
z-index: 999;
width: 424px;
height: 258px;
background: #ffffff;
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
border-radius: 4px;
}
.ant-modal-body > .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%);
}
.ant-modal-body > .del_main {
width: 100%;
position: relative;
}
.ant-modal-body > .del_main > .header {
display: flex;
align-items: center;
padding-top: 20px;
padding-left: 26px;
font-size: 16px;
}
.ant-modal-body > .del_main > .header > .icon1 {
width: 16px;
height: 16px;
margin-right: 10px;
background-image: url(@/assets/images/coursewareManage/QR.png);
background-size: 100% 100%;
}
.ant-modal-body > .del_main > .header > .close_exit {
position: absolute;
right: 42px;
cursor: pointer;
width: 20px;
height: 20px;
background-image: url(@/assets/images/coursewareManage/close.png);
background-size: 100% 100%;
}
.ant-modal-body > .del_main > .body {
width: 100%;
margin: 34px auto 56px auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
}
.ant-modal-body > .del_main > .body > .back {
position: absolute;
top: 30px;
font-size: 12px;
font-weight: 400;
color: #666666;
}
.ant-modal-body > .del_main > .del_btnbox {
display: flex;
margin: 30px auto;
justify-content: center;
}
.ant-modal-body > .del_main > .del_btnbox > .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;
}
.ant-modal-body > .del_main > .del_btnbox > .del_btn > .btnText {
font-size: 14px;
font-weight: 400;
line-height: 40px;
}
.ant-modal-body > .del_main > .del_btnbox > .btn1 {
border: 1px solid rgba(64, 158, 255, 1);
color: #4ea6ff;
margin-right: 14px;
}
.ant-modal-body > .del_main > .del_btnbox > .btn2 {
background-color: #4ea6ff;
color: #ffffff;
}
.canclestu > .ant-modal {
width: 424px !important;
height: 258px !important;
}
*/
</style>