mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-23 01:36:47 +08:00
686 lines
16 KiB
Vue
686 lines
16 KiB
Vue
<template>
|
||
<div>
|
||
<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>
|
||
<a-button class="cus-btn" style="width: 100px" @click="getStuList">
|
||
<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 white" style="width: 100px" @click="reset">重置
|
||
</a-button>
|
||
</a-col>
|
||
</a-row>
|
||
|
||
<a-row type="flex" gutter="12" style="padding-left: 20px; margin-right: 0px">
|
||
<a-col :span="1.5">
|
||
<CommonStudent :type="type" :id="id" @finash="submitCall" :stage="stage">
|
||
<a-button class="cus-btn">
|
||
<template #icon><img style="margin-right: 10px"
|
||
src="../../assets/images/courseManage/add0.png"/></template>
|
||
添加学员
|
||
</a-button>
|
||
</CommonStudent>
|
||
</a-col>
|
||
<a-col :span="1.5">
|
||
<a-button class="cus-btn white" @click="bathDel">
|
||
<template #icon><img style="margin-right: 10px" src="../../assets/images/projectadd/delete.png"/></template>
|
||
批量删除
|
||
</a-button>
|
||
</a-col>
|
||
<a-col :span="1.5" v-if="type === 2">
|
||
<a-button class="cus-btn white" @click="showChangeModal">
|
||
<template #icon></template>
|
||
批量调整关卡
|
||
</a-button>
|
||
</a-col>
|
||
</a-row>
|
||
<div style="margin-top: 20px">
|
||
<a-table :columns="tablecolumns" :data-source="tableData.list" :pagination="stuPagination"
|
||
:loading="tableData.loading" 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-row gutter="12">
|
||
<a-col>
|
||
<slot name="extension" v-bind:data="{ record }"></slot>
|
||
</a-col>
|
||
<a-col>
|
||
<div @click="del(record.id)"
|
||
style="color: #4ea6ff; font-size: 14px; text-align: center;margin-left: 20px;cursor: pointer;">
|
||
删除
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</template>
|
||
</a-table>
|
||
</div>
|
||
</div>
|
||
<!-- 批量调整关卡弹窗 -->
|
||
<ChangeLevelModal v-model:visiblene="visiblene" :stage="stage" :ids="stuSelectKeys" @finash="submitCall"/>
|
||
<!-- 批量调整关卡弹窗 -->
|
||
<!-- 取消学员弹窗 -->
|
||
<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"/>
|
||
</template>
|
||
<script setup>
|
||
import {computed, defineProps, onMounted, ref, watch} from "vue";
|
||
import {delStudentList, getStuPage} from "@/api/index1";
|
||
import CommonStudent from "@/components/student/CommonStudent";
|
||
import ChangeLevelModal from "./ChangeLevelModal.vue";
|
||
import {message} from "ant-design-vue";
|
||
// import { topStudent } from "../../api/indexProjStu";
|
||
import SeeStu from "../../components/drawers/SeeStu";
|
||
|
||
const props = defineProps({
|
||
type: Number,
|
||
id: String,
|
||
columns: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
stage: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
visable: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
});
|
||
const tablecolumns = ref([
|
||
{
|
||
title: "姓名",
|
||
dataIndex: "studentName",
|
||
key: "studentName",
|
||
width: "8%",
|
||
align: "left",
|
||
className: "h",
|
||
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,
|
||
},
|
||
{
|
||
title: "加入方式",
|
||
dataIndex: "source",
|
||
key: "source",
|
||
width: 100,
|
||
align: "center",
|
||
customRender: ({record: {source}}) =>
|
||
({1: "快速添加", 2: "组织", 3: "受众", 4: '报名'}[source]),
|
||
},
|
||
...props.columns,
|
||
{
|
||
title: "操作",
|
||
dataIndex: "operation",
|
||
key: "operation",
|
||
width: "20%",
|
||
align: "center",
|
||
slots: {customRender: "action"},
|
||
},
|
||
]);
|
||
const tableParam = ref({
|
||
studentName: "",
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
type: props.type,
|
||
pid: props.id,
|
||
});
|
||
const stuSelectKeys = ref([]);
|
||
const tableData = ref({
|
||
list: [],
|
||
total: 0,
|
||
loading: false,
|
||
});
|
||
|
||
const stuRowSelection = computed(() => ({
|
||
columnWidth: 20,
|
||
selectedRowKeys: stuSelectKeys.value,
|
||
onChange: onStuSelectChange,
|
||
preserveSelectedRowKeys: true,
|
||
}));
|
||
|
||
onMounted(() => {
|
||
getStuList();
|
||
});
|
||
|
||
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;
|
||
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 = "";
|
||
getStuList();
|
||
}
|
||
|
||
function bathDel() {
|
||
if (stuSelectKeys.value &&
|
||
stuSelectKeys.value.length === 0) {
|
||
message.destroy();
|
||
return message.warning("请先选中学员");
|
||
}
|
||
stuSelectKeys.value &&
|
||
stuSelectKeys.value.length &&
|
||
delStudentList({
|
||
ids: stuSelectKeys.value,
|
||
}).then(() => {
|
||
getStuList();
|
||
});
|
||
}
|
||
|
||
function del(id) {
|
||
id &&
|
||
delStudentList({
|
||
ids: [id],
|
||
}).then(() => {
|
||
getStuList();
|
||
});
|
||
}
|
||
|
||
function submitCall(flag) {
|
||
tableData.value.loading = true;
|
||
flag && getStuList();
|
||
}
|
||
|
||
// 调整关卡;
|
||
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)
|
||
// }
|
||
|
||
</script>
|
||
<style lang="scss">
|
||
.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%);
|
||
}
|
||
|
||
/*.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> |