Files
fe-manage/src/components/growthpath/GrowthOnlineManage.vue
Pengxiansen 399ec0308a 提交
2025-02-27 13:43:45 +08:00

885 lines
23 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
v-if="Tvisible"
:visible="Tvisible"
class="drawerStyle ProjectOnlineManage"
placement="right"
width="80%"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
<div class="header">
<div class="headerTitle">
{{ TASK_TYPE[datasource.taskType].name }}{{ datasource.taskName }}
</div>
<img
style="width: 29px; height: 29px; cursor: pointer"
src="@/assets/images/basicinfo/close.png"
@click="closeDrawer"
/>
</div>
<template v-if="step == 1">
<div class="main">
<template v-if="datasource.taskType == 4">
<div class="endtime">
起止时间{{ datasource.info.submitStartTime }}
{{ datasource.info.submitEndTime }}
</div>
</template>
<div class="search" style="justify-content: flex-start">
<div class="sealeft">
<div class="namecon" style="margin-right: 16px">
<PostSelectNew width="200px" v-model:value="stdPosition">
</PostSelectNew>
</div>
<div class="namecon" style="margin-right: 16px">
<OfficeSelect
v-model:value="qualsLevelCode"
:searchData="stdPosition"
width="200px"
/>
</div>
<div class="namecon" style="margin-right: 16px">
<div class="select">
<a-select
v-model:value="completionStatus"
style="width: 200px"
placeholder="任务状态"
:options="projectNameList"
@change="selectCompletionStatus"
allowClear
></a-select>
</div>
</div>
<div class="namecon" style="margin-right: 16px">
<a-input
v-model:value="name"
style="width: 200px; height: 40px; border-radius: 8px"
placeholder="请输入姓名/工号"
/>
</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">
<template v-if="tableData.length">
<div class="btn btn1" @click="godie" style="margin-right: 20px">
<div class="img1"></div>
<div class="wz">催促学习</div>
</div>
<div class="btn btn2" @click="exportTaskStu">
<div class="img2"></div>
<div class="wz">导出数据</div>
</div>
<template v-if="datasource.taskType == 4">
<div
class="btn btn2"
@click="exportHomeWorkShow"
style="margin-left: 20px"
>
<div class="wz">导出作业</div>
</div>
<div class="btn btn2" style="margin-left: 20px">
<div class="wz" @click="showEntryScore">导入成绩</div>
</div>
</template>
</template>
</div>
<div class="tab" style="margin-top: 20px; margin-bottom: 100px">
<a-table
style="border: 1px solid #f2f6fe"
:columns="tableDataFunc()"
:data-source="tableData"
:loading="tableDataTotalLoading"
:scroll="{ x: 900 }"
:pagination="false"
/>
<div class="tableBox">
<div class="pa">
<a-pagination
:showSizeChanger="false"
showQuickJumper="true"
hideOnSinglePage="true"
:pageSize="pageSize"
:current="currentPage"
:total="tableDataTotal"
class="pagination"
@change="changePaginationStu"
v-if="tableDataTotal > 10"
/>
</div>
</div>
</div>
</div>
</template>
<template v-if="step == 2">
<EScore
:type="2"
@close="closeImport"
:id="datasource?.id"
:pid="datasource?.growthId"
:datesource="datasource"
v-model:searchTaskList="searchTaskList"
/>
</template>
</div>
</a-drawer>
<!-- <view-assess v-model:Assessvisible="Assessvisible" :datasource="evalDataSource" :evalName="datasource.info?.assessmentName"
:basicdata="datasource.info" /> -->
</template>
<script lang="jsx">
import { toRefs, reactive, onMounted, onUnmounted } from "vue";
import { message } from "ant-design-vue";
// import ViewAssess from "../ViewAssess";
import EScore from "@/components/growthpath/GrowthScore.vue";
import {
getStudentTaskPage,
batchSendMessage,
exportStudentTaskPage,
} from "@/api/growthpath";
import * as api from "@/api/index1";
import { TASK_TYPE } from "@/utils/constGrown";
import PostSelectNew from "@/components/growthpath/PostSelect";
import OfficeSelect from "@/components/growthpath/OfficeSelect";
export default {
name: "GrowthOnlineManage",
components: {
OfficeSelect,
PostSelectNew,
EScore,
},
props: {
createId: {
type: Number,
default: null,
},
permissions: {
type: String,
default: null,
},
Tvisible: {
type: Boolean,
default: false,
},
levelName: {
type: String,
default: "",
},
projectTaskId: {
type: Number,
default: null,
},
itemsType: {
type: Number,
default: null,
},
datasource: {
type: Object,
default: function () {
return {};
},
},
},
setup(props, ctx) {
const state = reactive({
visible: props.Tvisible,
name: "",
pageNum: 1,
step: 1, // 步骤数
Evisible: false, //录入成绩抽屉
pageSize: 10,
currentPage: 1,
tableDataTotal: 0,
completionStatus: undefined,
TASK_TYPE: TASK_TYPE,
stdPosition: null,
qualsLevelCode: null,
projectNameList: [
{
id: 1,
value: "0",
label: "未开始",
},
{
id: 2,
value: "2",
label: "进行中",
},
{
id: 3,
value: "1",
label: "已完成",
},
],
tableData: [],
tableDataTotalLoading: true, // 表格loading加载配置
evalDataSource: "",
Assessvisible: false,
});
// 关闭导入成绩
const closeImport = () => {
state.step = 1;
state.tableDataTotalLoading = true;
getData();
};
const tableDataFunc = () => {
const columns = [
{
title: "工号",
dataIndex: "username",
key: "username",
align: "center",
className: "h head",
customRender: (text) => {
return (
<div class="racona">
<span>
{" "}
{text.record.username ? text.record.username : "-"}
</span>
</div>
);
},
},
{
title: "姓名",
dataIndex: "userNickName",
key: "userNickName",
align: "center",
className: "h head",
customRender: (text) => {
return (
<div class="racona">
<span>
{" "}
{text.record.userNickName ? text.record.userNickName : "-"}
</span>
</div>
);
},
},
{
title: "标准岗位",
dataIndex: "stdPositionName",
key: "stdPositionName",
align: "center",
ellipsis: true,
className: "h",
customRender: (text) => {
return (
<div class="racona">
<span>
{" "}
{text.record.stdPositionName
? text.record.stdPositionName
: "-"}
</span>
</div>
);
},
},
{
title: "任职资格",
dataIndex: "qualsLevelDesr",
key: "qualsLevelDesr",
align: "center",
ellipsis: true,
className: "h",
customRender: (text) => {
return (
<div class="racona">
<span>
{" "}
{text.record.qualsLevelDesr
? text.record.qualsLevelDesr
: "-"}
</span>
</div>
);
},
},
{
title: "Band职级",
dataIndex: "bandCode",
key: "bandCode",
align: "center",
ellipsis: true,
className: "h",
customRender: (text) => {
return (
<div class="racona">
<span>
{" "}
{text.record.bandCode ? text.record.bandCode : "-"}
</span>
</div>
);
},
},
{
title: "加入方式",
dataIndex: "joinMethod",
key: "joinMethod",
align: "center",
ellipsis: true,
className: "h",
customRender: ({ record: { joinMethod } }) =>
({
1: "系统加入",
2: "手动加入",
}[joinMethod]),
},
{
title: "完成进度",
dataIndex: "progress",
key: "progress",
align: "center",
ellipsis: true,
className: "h",
customRender: (text) => {
return (
<div class="racona">
<span>{text.record.progress}%</span>
</div>
);
},
},
{
title: "完成时间",
dataIndex: "finishTime",
key: "finishTime",
align: "center",
width: 150,
ellipsis: true,
customRender: (text) => {
return (
<div class="racona">
<span>
{" "}
{text.record.finishTime ? text.record.finishTime : "-"}
</span>
</div>
);
},
},
{
title: "任务状态",
dataIndex: "completionStatus",
key: "completionStatus",
align: "center",
ellipsis: true,
className: "h",
customRender: (text) => {
return (
<div class="racona">
<span>
{" "}
{text.record.completionStatus == 0 ||
text.record.completionStatus == null
? "未开始"
: text.record.completionStatus == 1
? "已完成"
: "进行中"}
</span>
</div>
);
},
},
];
// let obj = {
// title: "操作",
// dataIndex: "finishStatus",
// key: "finishStatus",
// width: 60,
// align: "center",
// ellipsis: true,
// className: "h",
// customRender: (text) => {
// return (
// <div class="racona">
// <a
// style={{ color: text.record.finishStatus == 1 ? "" : "#666" }}
// onClick={() => {
// text.record.finishStatus == 1 && showassess(text.record);
// }}
// >
// 查看
// </a>
// </div>
// );
// },
// };
/* 评估查看操作 */
if (props.datasource.taskType == 11) {
// columns.push(obj);
}
return columns;
};
{
/* 查看评估弹框 */
}
const showassess = (data) => {
state.evalDataSource = data;
state.Assessvisible = true;
};
const closeDrawer = () => {
if (state.step == 1) {
ctx.emit("update:Tvisible", false);
state.currentPage = 1;
state.name = "";
state.completionStatus = undefined;
state.tableData = [];
state.stdPosition = null;
state.qualsLevelCode = null;
} else {
state.step = 1;
state.tableDataTotalLoading = true;
getData();
}
};
const afterVisibleChange = (bol) => {
if (bol == true) {
console.log("当前是什么类型", props.datasource.taskType);
state.tableDataTotalLoading = true;
getData();
}
};
const selectCompletionStatus = (value) => {
state.completionStatus = value;
};
//催促
const godie = () => {
if (!state.tableData.length) {
message.warning("当前学习任务没有可催促的学员");
return;
}
var obj = {
courseId: props.datasource.taskId
? props.datasource.taskId
: props.datasource.info.id, //任务的Id
courseName: props.datasource.taskName, //任务的名称
taskId: props.datasource.id, //项目或径的标识 1-项目 2-路径图 3面授课
taskType: props.datasource.taskType, //催促的任务的类型
growthId: props.datasource.growthId,
};
batchSendMessage(obj)
.then((res) => {
console.log(res);
message.success("催促学员成功");
})
.catch((err) => {
console.log(err);
});
};
const onChange = (pageNumber) => {
console.log("Page: ", pageNumber);
};
// 导入成绩
const showEntryScore = () => {
state.step = 2;
};
// 获取数据
function getData() {
getStudentTaskPage({
pageNum: state.currentPage,
pageSize: state.pageSize,
completionStatus: state.completionStatus,
username: state.name,
taskId: props.datasource.id,
qualsLevelCode: state.qualsLevelCode,
stdPosition: state.stdPosition,
})
.then((res) => {
console.log("在线课数据获取", res);
if (res.data.code == 200) {
state.tableDataTotalLoading = false;
state.tableData = res.data.data.records;
state.tableDataTotal = res.data.data.total;
}
})
.catch((err) => {
console.log(err);
state.tableDataTotalLoading = false;
});
}
// 搜索按钮
function searchTaskList() {
state.currentPage = 1;
state.tableDataTotalLoading = true;
getData();
}
// 重置按钮
function resetTaskList() {
state.tableDataTotalLoading = true;
state.currentPage = 1;
state.name = "";
state.completionStatus = null;
state.stdPosition = null;
state.qualsLevelCode = null;
getData();
}
//分页
const changePaginationStu = (page) => {
state.tableDataTotalLoading = true;
state.currentPage = page;
getData();
};
// 导出数据
function exportTaskStu() {
let params = {
pageNo: state.currentPage || "",
pageSize: state.pageSize || "",
completionStatus: state.completionStatus || "",
username: state.name || "",
taskId: props.datasource.id || "",
qualsLevelCode: state.qualsLevelCode || "",
stdPosition: state.stdPosition || "",
};
// window.open(
// buildUrl(
// "http://192.168.18.141:32002/professional/studentTask/export",
// params
// )
// );
window.open(
buildUrl(
`${process.env.VUE_APP_BOE_API_URL}${process.env.VUE_APP_BASE_API_GROWTH}/professional/studentTask/export`,
params
)
);
}
function buildUrl(url, params) {
const searchParams = new URLSearchParams();
Object.keys(params).forEach((key) => {
searchParams.append(key, params[key]);
});
return `${url}?${searchParams.toString()}`;
}
//显示导出作业弹窗
const exportHomeWorkShow = () => {
let params = {
taskId: props.datasource.id,
};
window.open(
buildUrl(
`${process.env.VUE_APP_BOE_API_URL}${process.env.VUE_APP_BASE_API_GROWTH}/professional/task/workExport`,
params
)
);
};
return {
...toRefs(state),
selectCompletionStatus,
showassess,
closeDrawer,
exportHomeWorkShow,
afterVisibleChange,
tableDataFunc,
godie,
closeImport,
onMounted,
onUnmounted,
onChange,
showEntryScore,
searchTaskList,
resetTaskList,
changePaginationStu,
exportTaskStu,
};
},
};
</script>
<style lang="scss">
.drawerStyle {
.ant-drawer-content-wrapper {
max-width: 1200px;
.ant-drawer-header {
display: none !important;
}
.ant-drawer-body {
padding: 0;
}
}
}
.ProjectOnlineManage {
// overflow-x: auto;
.drawerMain {
min-width: 550px;
margin: 0px 32px 0px 32px;
overflow-x: auto;
display: flex;
flex-direction: column;
.noticebox {
width: 240px;
height: 64px;
background: rgba(255, 255, 255, 1);
border-radius: 4px;
position: absolute;
top: 161px;
display: flex;
align-items: center;
justify-content: center;
.notext {
color: rgba(51, 51, 51, 1);
font-size: 14px;
font-weight: 500;
margin-left: 20px;
}
}
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
flex-shrink: 0;
justify-content: space-between;
align-items: center;
// background-color: red;
margin-bottom: 20px;
.headerTitle {
width: 40%;
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
margin-left: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.main {
width: 100%;
height: 100%;
// background-color: #bfa;
overflow-y: auto;
padding-right: 10px;
.endtime {
font-size: 16px;
font-weight: 500;
color: #333333;
}
.search {
width: 100%;
display: flex;
flex-wrap: wrap;
margin-top: 20px;
justify-content: space-between;
.sealeft {
display: flex;
flex-wrap: wrap;
.namecon {
display: flex;
flex-wrap: nowrap;
margin-bottom: 10px;
.name {
margin-top: 8px;
white-space: nowrap;
}
}
}
.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/reset0.png);
background-size: 100% 100%;
margin-right: 7px;
}
}
.btn1 {
background: #4ea6ff;
color: #ffffff;
}
.btn2 {
background: #4ea6ff;
color: #fff;
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: 18px;
height: 18px;
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/export1.png);
background-size: 100% 100%;
margin-right: 7px;
}
}
.btn1 {
background: #4ea6ff;
color: #ffffff;
}
.btn2 {
background: #4ea6ff;
color: #fff;
border: 1px solid #4ea6ff;
}
}
.tab {
th.h {
background-color: #eff4fc !important;
}
.ant-table-tbody
> tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected)
> td {
background: #f6f9fd;
}
.tableBox {
.pa {
// left: 0;
margin-top: 15px;
width: 100%;
// height: 20px;
// background-color: red;
display: flex;
justify-content: center;
// position: absolute;
// bottom: 20px;
.ant-pagination-prev,
.ant-pagination-next,
.ant-pagination-item,
.ant-pagination-options {
margin-bottom: 10px;
}
}
}
}
}
.btnn {
height: 72px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
background-color: #fff;
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;
}
}
}
.ant-select {
border-radius: 5px;
width: 100%;
min-height: 40px;
.ant-select-selector {
border-radius: 8px;
width: 100%;
min-height: 40px;
}
.ant-select-selection-placeholder {
line-height: 40px;
}
.ant-select-selection-item {
line-height: 40px;
}
.ant-select-selection-item-content {
line-height: 26px !important;
}
.ant-select-selection-item-remove {
line-height: 26px !important;
}
.ant-select-selection-item {
line-height: 40px !important;
}
}
}
</style>