Files
fe-manage/src/components/student/TableStudent.vue
2024-05-13 19:00:32 +08:00

1478 lines
35 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>
<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">
<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">
<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>
<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">
<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">
<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>
</a-col>
</a-row>
<div style="margin-top: 20px">
<a-table
:columns="tablecolumns"
:data-source="tableData.list"
:pagination="stuPagination"
:loading="tableData.loading"
:scroll="{ x: 1500 }"
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} 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,
}
});
const { loading: stuAsyncLoading, start } = useAsyncStu(props.id, props.type, getStuList);
const topFlagList = ref([
{
id: 0,
value: 0,
label: "普通学员",
},
{
id: 1,
value: 1,
label: "优秀学员",
},
]);
const tablecolumns = ref([
{
title: "姓名",
dataIndex: "studentName",
key: "studentName",
width: "10%",
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: "20%",
align: "center",
className: "h",
ellipsis: true,
},
{
title: "部门",
dataIndex: "studentDepartName",
key: "studentDepartName",
width: "15%",
align: "center",
className: "h",
ellipsis: true,
customRender: ({ record: { studentOrgName, studentDepartName } }) =>
allDepartShow(studentOrgName, studentDepartName),
},
{
title: "所属小组",
dataIndex: "groupName",
key: "groupName",
width: props.type === 1 ? 100 : 0,
align: "center",
className: "h",
ellipsis: true,
},
{
title: "加入方式",
dataIndex: "source",
key: "source",
width: "10%",
align: "center",
customRender: ({ record: { source } }) =>
// ({ 1: "快速添加", 2: "组织", 3: "受众", 4: "报名" }[source]),
({
0: "导入",
1: "手动加入",
2: "手动加入",
3: "手动加入",
4: "导入",
5: "报名",
6: "导入",
}[source]),
},
...props.columns,
{
title: "操作",
dataIndex: "operation",
key: "operation",
width: 260,
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;
return allname;
}
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}`
);
}
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; //是否是优秀学员
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;
});
};
// //导出作业
// 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;
}
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>