Files
fe-manage/src/components/drawers/AddFaceteach.vue
宋文超 8bacca94a8 合并
2022-11-25 18:29:19 +08:00

1061 lines
31 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="addfaceteachVisible"
class="drawerStyle addfaceteachDrawer"
width="90%"
title="添加面授"
placement="right"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
<div class="header">
<div class="headerTitle">添加面授</div>
<img
style="width: 29px; height: 29px; cursor: pointer"
src="../../assets/images/basicinfo/close.png"
@click="closeDrawer"
/>
</div>
<div class="contentMain">
<div class="main_left">
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">课程名称</span>
</div>
<div class="btnbox">
<a-input
v-model:value="inputV1"
style="width: 384px; height: 32px"
placeholder="请输入小组名称"
maxlength="20"
/>
</div>
</div>
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">选择课程</span>
</div>
<div class="btnbox" @click="showDrawerSelFacet">
<button class="xkbtn">
{{ chooseCourse == null ? "授课" : "修改" }}课程
</button>
<a-tag
style="
width: 104px;
height: 32px;
border-radius: 4px;
color: #388be1;
display: flex;
align-items: center;
"
color="#ECF3FC"
v-if="chooseCourse !== null"
closable
@close="closeTag"
>{{ chooseCourseName }}</a-tag
>
</div>
<!-- 选择面授侧弹窗 -->
<div>
<sel-facet
v-model:selfacetVisible="selfacetvisible"
@getData="upDateTable"
/>
</div>
<!-- 选择面授侧弹窗 -->
</div>
<div class="main_item2">
<div class="signbox">
<span style="margin-right: 3px">面授说明</span>
</div>
<div class="textarea">
<a-textarea
v-model:value="textV1"
placeholder="请输入说明"
allow-clear
maxlength="100"
/>
</div>
</div>
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">授课教师</span>
</div>
<div class="btnbox">
<a-auto-complete
v-model:value="memberValue"
show-search
:not-found-content="fetching ? undefined : null"
placeholder="Select a teacher"
style="width: 364px"
:options="options"
@focus="handleFocus"
@blur="handleBlur"
@change="handleChange2"
@popupScroll="templateScroll"
@search="handleSearch"
></a-auto-complete>
</div>
</div>
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">面授时间</span>
</div>
<div class="btnbox">
<a-range-picker
v-model:value="chooseTime"
:placeholder="[' 开始时间', ' 结束时间']"
/>
</div>
</div>
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">面授时长</span>
</div>
<div class="btnbox">
<a-input
v-model:value="inputV3"
style="width: 384px; height: 32px"
/>
<span style="margin-left: 5px; width: 30px">分钟</span>
</div>
</div>
<div class="main_item">
<div class="signbox">
<div class="sign">
<img
src="@/assets/images/coursewareManage/asterisk.png"
alt=""
/>
</div>
<span style="margin-right: 3px">上课地址</span>
</div>
<div class="btnbox">
<a-input
v-model:value="inputV4"
style="width: 384px; height: 32px"
placeholder="请输入上课地址"
maxlength="100"
/>
</div>
</div>
<div class="main_item2">
<div class="signbox">
<span style="margin-right: 3px">考勤设置</span>
</div>
<div class="kqszbox">
<div class="qdqtbox">
<div class="qdbtn"><div class="btntext">签到</div></div>
</div>
<div class="setbox">
<div class="timerbox">
<span>开始前</span>
<a-input-number
:min="0"
:max="30"
:precision="0"
style="
width: 88px;
height: 32px;
border-radius: 8px;
overflow: hidden;
"
:v-model:value="inputV5"
></a-input-number>
<span style="color: #999999; margin-left: 8px">分钟</span>
</div>
<div class="timerbox">
<span>开始后</span>
<a-input-number
:min="0"
:max="30"
:precision="0"
style="
width: 88px;
height: 32px;
border-radius: 8px;
overflow: hidden;
"
:v-model:value="inputV6"
></a-input-number>
<span style="color: #999999; margin-left: 8px">分钟</span>
</div>
</div>
<div class="qdqtbox">
<div class="qtbtn"><div class="btntext">签退</div></div>
</div>
<div class="setbox">
<div class="timerbox">
<span>结束前</span>
<a-input-number
:min="0"
:max="30"
:precision="0"
style="
width: 88px;
height: 32px;
border-radius: 8px;
overflow: hidden;
"
:v-model:value="inputV7"
></a-input-number>
<span style="color: #999999; margin-left: 8px"
>分钟提前签退则记为早退</span
>
</div>
</div>
</div>
</div>
<div class="main_item">
<div class="signbox">
<span style="margin-right: 3px">完成标准设置</span>
</div>
<div class="btnbox">
<a-radio-group v-model:value="radioV1">
<a-radio v-model:checked="checked" :value="1" @click="cloradio1"
>仅签到</a-radio
>
<a-radio v-model:checked="checked" :value="2" @click="cloradio1"
>签到签退全部完成</a-radio
>
</a-radio-group>
</div>
</div>
<div class="main_item">
<div class="signbox">
<span style="margin-right: 3px">其他设置</span>
</div>
<div class="btnbox">
<a-checkbox v-model:checked="checkedHolidy"
>学员请假后记为任务完成</a-checkbox
>
</div>
</div>
<div class="main_item2">
<div class="signbox">
<span style="margin-right: 3px">现场参与</span>
</div>
<div class="btnbox2">
<a-radio-group v-model:value="radioV2">
<a-radio v-model:checked="checked" :value="1" @click="cloradio2"
>允许项目内人员临时到场参加</a-radio
>
<a-radio v-model:checked="checked" :value="2" @click="cloradio2"
>允许项目外人员临时到场参加</a-radio
>
</a-radio-group>
</div>
</div>
<div class="main_item2">
<div class="signbox">
<span style="margin-right: 3px">评估</span>
</div>
<div class="btnbox2">
<a-checkbox v-model:checked="checkedAssessment"
>需要评估</a-checkbox
>
<button class="xkbtn" @click="showAssessment">选择评估</button>
<a-tag
style="
width: 104px;
height: 32px;
border-radius: 4px;
color: #388be1;
display: flex;
align-items: center;
"
color="#ECF3FC"
v-if="chooseMent !== null"
closable
@close="closeTag"
>{{ chooseMentName }}</a-tag
>
</div>
</div>
</div>
<div class="main_right">
<div class="main_item">
<div class="signbox">
<span style="margin-right: 3px">配置作业</span>
</div>
<div class="btnbox" @click="showDrawerAddHomework">
<button class="xkbtn">配置</button>
</div>
<!-- 添加作业侧弹窗 -->
<div>
<add-homework
v-model:addhomeworkVisible="addhomeworkvisible"
@getWork="getWork"
v-model:face="face"
/>
</div>
<!-- 添加作业侧弹窗 -->
</div>
<div>
<a-tag
style="
width: 104px;
height: 32px;
border-radius: 4px;
color: #388be1;
display: flex;
align-items: center;
margin-left: 120px;
"
color="#ECF3FC"
v-if="chooseWork !== null"
closable
@close="closeTagWork"
>{{ chooseWorkName }}</a-tag
>
</div>
<div class="main_item">
<div class="signbox">
<span style="margin-right: 3px">配置考试</span>
</div>
<div class="btnbox" @click="showDrawerAddTest">
<button class="xkbtn">配置</button>
</div>
<!-- 添加考试侧弹窗 -->
<div>
<add-test v-model:addtestVisible="addtestvisible" />
</div>
<!-- 添加考试侧弹窗 -->
</div>
<div class="main_item">
<div class="signbox">
<span style="margin-right: 3px">附件</span>
</div>
<div class="btnbox">
<a-upload
@change="handleChange"
action="/manageApi/file/upload"
v-model:file-list="fileList"
>
<button class="xkbtn">上传附件</button></a-upload
>
</div>
</div>
</div>
</div>
<div class="main_btns">
<button class="btn1">取消</button>
<button class="btn2" @click="updateFaceTeach">确定</button>
</div>
<assessment-list
v-model:assessmentVisible="assessmentVisible"
v-model:isface="isface"
@faceAssess="faceAssess"
/>
</div>
</a-drawer>
</template>
<script>
import { reactive, toRefs, ref } from "vue";
import SelFacet from "../../components/drawers/SelFacet.vue";
import AddHomework from "../../components/drawers/AddHomework.vue";
import AddTest from "../../components/drawers/AddTest.vue";
import { ProjectEditTask, RouterEditTask } from "@/api/indexTask";
// import * as method from "../../api/method"
import { message } from "ant-design-vue";
import { getMemberInfo } from "@/api/index1";
import { debounce } from "lodash-es";
import { queryFaceDetailById, editPlan } from "../../api/indexFace";
import dayjs from "dayjs";
import AssessmentList from "../drawers/ AssessmentList.vue";
// import { toDate } from "../../api/method";
import { queryWorkDetailById } from "../../api/indexWork";
import { addTempTask } from "../../api/indexTaskadd";
export default {
name: "AddFaceteach",
components: {
SelFacet,
AddHomework,
AddTest,
AssessmentList,
},
props: {
addfaceteachVisible: {
type: Boolean,
default: false,
},
EditFaceId: {
// 要编辑的workId
type: Number,
default: null,
},
edit: {
// 是否为编辑
type: Boolean,
default: null,
},
projectId: {
type: Number,
default: null,
},
chooseStageId: {
type: Number,
default: null,
},
routerTaskId: {
type: Number,
default: 0,
},
isLevel: {
// 是否是关卡页面触发
type: Number,
default: null,
},
projectTaskId: {
// 要编辑的projectId
type: Number,
default: null,
},
routerId: {
type: Number,
default: null,
},
isactive: {
type: Number,
default: null,
},
},
setup(props, ctx) {
const options = ref([]);
const state = reactive({
selfacetvisible: false,
addhomeworkvisible: false,
addtestvisible: false,
memberValue: null,
fetching: false,
totalPages: 0,
currentPage: 1,
tableDataTotal: 100,
memberId: 0,
pageSize: 10,
inputV1: "",
inputV2: "",
inputV3: "",
inputV4: null,
inputV5: null,
inputV6: null,
inputV7: null,
testV1: "",
radioV1: "",
radioV2: "",
textV1: "",
checkedHolidy: false,
checkedAssessment: false,
chooseTime: [],
fileList: [],
chooseCourse: null, //选择的在线课程
chooseCourseName: null, //选择的课程的名字
face: true, //面授传给配置作业的标识
chooseWork: null, //配置的work
chooseWorkName: null, //配置的work名字
chooseWorkId: null, //配置的work ID
chooseMent: null,
chooseMentName: null,
assessmentVisible: false,
isface: 1,
});
const clear = () => {
state.inputV1 = null;
state.inputV2 = null;
state.inputV3 = null;
state.inputV4 = null;
state.inputV5 = null;
state.inputV6 = null;
state.inputV7 = null;
state.chooseTime = [];
state.textV1 = null;
state.radioV1 = "";
state.radioV2 = "";
state.checkedHolidy = false;
state.checkedAssessment = false;
state.chooseMent = null;
state.chooseWork = null;
state.chooseWorkId = null;
state.chooseWorkName = null;
state.chooseCourse = null;
state.chooseCourseName = null;
};
const closeDrawer = () => {
ctx.emit("update:addfaceteachVisible", false);
state.radioV1 = "";
state.radioV2 = "";
localStorage.setItem("stageId", props.chooseStageId);
localStorage.setItem("chapterId", props.isactive);
clear();
};
const afterVisibleChange = (bool) => {
if (bool && props.edit) {
// 该页面显示同时 edit为true 时,发送查询请求,
queryFaceTeach();
}
};
const showDrawerSelFacet = () => {
state.selfacetvisible = true;
};
const showDrawerAddHomework = () => {
state.addhomeworkvisible = true;
};
const showDrawerAddTest = () => {
state.addtestvisible = true;
};
const cloradio1 = (value) => {
if (value != "") {
state.radioV1 = "";
}
};
const cloradio2 = (value) => {
if (value != "") {
state.radioV2 = "";
}
};
//查询面授
const queryFaceTeach = () => {
//暂时写一个假的offcoursePlanId
queryFaceDetailById(props.EditFaceId).then((res) => {
// state.inputV1 = res.data.data.name;
// state.inputV2 = res.data.data.teacherId;
console.log("获取到了面授课开课详情", res.data.data);
let result = res.data.data;
state.inputV1 = result.name;
state.textV1 = result.description;
state.inputV2 = result.teacher;
if (result.beginTime && result.endTime) {
state.chooseTime = [
dayjs(result.beginTime, "YYYY-MM-DD"),
dayjs(result.endTime, "YYYY-MM-DD"),
];
} else {
state.chooseTime = [];
}
state.inputV4 = result.address;
state.inputV5 = result.beforeStart;
state.inputV6 = result.afterStart;
state.inputV7 = result.beforeEnd;
state.fileList = JSON.parse(result.attach);
state.chooseWorkId = result.homeWorkId;
// state.radioV1 = result.
state.checkedHolidy =
result.completeType == 1
? false
: result.completeType == 2
? false
: result.completeType == 3
? true
: false;
if (result.projectMember) {
state.radioV2 = "1";
} else if (result.noProjectMember) {
state.radioV2 = "2";
} else {
state.radioV2 = "";
}
if (result.completeSet == 1) {
state.radioV1 = "1";
} else {
state.radioV1 = "2";
}
state.checkedAssessment = result.evalFlag == 1 ? true : false;
if (state.chooseWorkId) {
queryWorkDetailById({ workId: state.chooseWorkId }).then((res) => {
state.chooseWork = res.data.data;
state.chooseWorkName = res.data.data.workName;
});
}
});
};
//新建或编辑面授
// 新增任务
const updateFaceTeach = () => {
if (
state.inputV1 == "" ||
state.chooseCourse == null ||
state.inputV2 == "" ||
state.chooseTime == [] ||
state.inputV3 == "" ||
state.inputV4 == ""
) {
message.destroy();
return message.warning("请输入必填字段");
} else {
let obj = {
address: state.inputV4,
applyFlag: 1,
attach: JSON.stringify(state.fileList),
afterStart: state.inputV6 || 0,
beforeEnd: state.inputV7 || 0,
beforeStart: state.inputV5 || 0,
// beginTime: dayjs(state.chooseTime[0]).format("YYYY-MM-DD hh-mm-ss"),
beginTime: parseInt(
new Date(state.chooseTime[0].$d).getTime() / 1000
),
// beginTime: "",
completeType: state.radioV1 == "1" ? 2 : 1,
description: state.textV1,
// endTime: dayjs(state.chooseTime[1]).format("YYYY-MM-DD hh-mm-ss"),
endTime: parseInt(new Date(state.chooseTime[1].$d).getTime() / 1000),
// endTime: "",
evalFlag: state.checkedAssessment == true ? 1 : 0,
evaluateId:
state.chooseMent == null ? 0 : state.chooseMent.assessmentId,
homeWorkId: state.chooseWorkId || 0,
name: state.inputV1,
noProjectMember: state.radioV2 == "1" ? 0 : 1,
offcourseId: 0,
offcoursePlanId: props.edit ? props.EditFaceId : 0,
projectMember: state.radioV2 == "1" ? 1 : 0,
signFlag: 0,
signWordFlag: 0,
teacherId: state.memberId,
testId: 0,
// teacher: state.inputV2,
};
if (props.edit) {
editPlan(obj)
.then((res) => {
updateTask(res);
closeDrawer();
})
.catch((err) => {
message.error(`添加失败${err}`);
});
} else {
editPlan(obj)
.then((res) => {
updateTask(res);
closeDrawer();
})
.catch((err) => {
message.error(`添加失败${err}`);
});
}
}
};
const upDateTable = (value) => {
console.log("gg", value);
console.log("gg", value[0].name);
state.chooseCourse = value[0];
state.chooseCourseName = value[0].name;
};
//更新任务列表
// 新增编辑或新增项目任务
const updateTask = (res) => {
if (props.isLevel == 1) {
let editObj1 = {
chapterId: props.isactive,
courseId: res.data.data.offcoursePlanId,
name: res.data.data.name,
routerId: props.routerId,
routerTaskId: props.routerTaskId || 0,
type: 2,
};
RouterEditTask(editObj1)
.then(() => {
message.success(`${props.edit ? "编辑" : "新增"}关卡任务成功`);
ctx.emit("changeData", false);
// state.addLoading = false;
closeDrawer();
})
.catch(() => {
message.error(`${props.edit ? "编辑" : "新增"}关卡任务失败`);
});
} else if (props.isLevel == 2) {
let editObj = {
courseId: res.data.data.offcoursePlanId,
duration: 0,
name: res.data.data.name,
projectId: props.projectId,
projectTaskId: props.projectTaskId || 0,
stageId: props.chooseStageId,
type: 2,
};
// 新增编辑或新增项目
ProjectEditTask(editObj)
.then(() => {
message.success(
`${props.EditFaceId ? "编辑" : "新增"}阶段任务成功`
);
ctx.emit("changeData", false);
})
.catch(() => {
message.error(`${props.EditFaceId ? "编辑" : "新增"}阶段任务失败`);
});
} else if (props.isLevel == 3) {
addTempTask({
courseId: res.data.data.offcoursePlanId,
duration: 0,
name: res.data.data.name,
projectId: props.projectId,
projectTaskId: props.projectTaskId || 0,
stageId: props.chooseStageId,
type: 2,
})
.then(() => {
message.success(
`${props.EditFaceId ? "编辑" : "新增"}阶段任务成功`
);
ctx.emit("changeData", false);
})
.catch(() => {
message.error(`${props.EditFaceId ? "编辑" : "新增"}阶段任务失败`);
});
}
};
const closeTag = () => {
state.chooseCourse = null;
state.chooseCourseName = null;
};
const closeTagWork = () => {
state.chooseWork = null;
state.chooseWorkName = null;
state.chooseWorkId = null;
};
const getWork = (value) => {
console.log("getWork", value);
state.chooseWork = value;
state.chooseWorkName = value.workName;
state.chooseWorkId = value.workId;
// console.log("getWorkName", value.workName);
};
const handleChange = ({ file, fileList }) => {
if (file.status !== "uploading") {
console.log(file, fileList);
}
};
const showAssessment = () => {
state.assessmentVisible = true;
};
const faceAssess = (value) => {
console.log(value);
state.chooseMent = value;
state.chooseMentName = value.name;
};
// 员工滚动
const templateScroll = (e) => {
console.log("滚动", e);
const { target } = e;
const scrllHeight = target.scrollHeight - target.scrollTop;
const clientHeight = target.clientHeight;
// console.log("scrllHeight", scrllHeight, clientHeight);
if (scrllHeight === 0 && clientHeight === 0) {
state.currentPage = 1;
} else if (scrllHeight - clientHeight == 0) {
// 下拉到底部时
if (state.currentPage < state.totalPages) {
// 如果滑到底部,则加载下一页
state.currentPage++;
// queryMember();
}
}
};
// 获取员工
const queryMember = () => {
if (!state.memberValue) return;
let obj = {
keyWord: state.memberValue,
id: 0,
org: 0,
pageNo: state.currentPage,
pageSize: state.pageSize,
};
getMemberInfo(obj)
.then((res) => {
let data = res.data.data.rows;
state.totalPages = res.data.data.total;
for (let i in data) {
options.value.push({
value: data[i].id,
label: data[i].realName,
});
}
})
.catch((err) => {
message.error("获取员工失败" + err);
});
};
const handleSearch = debounce((memberValue) => {
console.log("fetching user", memberValue);
options.value = [];
state.fetching = true;
state.currentPage = 1;
state.memberValue = memberValue;
queryMember();
state.fetching = false;
}, 300);
const handleChange2 = (value, label) => {
console.log(`selected ${value}`);
state.memberId = value;
state.inputV2 = label;
};
const handleFocus = () => {
queryMember();
};
return {
...toRefs(state),
showDrawerSelFacet,
showDrawerAddHomework,
showDrawerAddTest,
afterVisibleChange,
closeDrawer,
cloradio1,
cloradio2,
updateFaceTeach,
updateTask,
upDateTable,
closeTag,
getWork,
closeTagWork,
clear,
handleChange,
showAssessment,
faceAssess,
// change,
options,
handleFocus,
handleSearch,
handleChange2,
templateScroll,
};
},
};
</script>
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
background-color: #fafafa !important;
}
.addfaceteachDrawer {
.drawerMain {
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
margin-left: 24px;
}
}
.contentMain {
display: flex;
justify-content: space-between;
.main_left {
height: 1080px;
padding-right: 30px;
flex: 1;
border-right: 1px solid #e8e8e8;
.main_item {
display: flex;
align-items: center;
margin-top: 32px;
margin-bottom: 32px;
.signbox {
width: 120px;
display: flex;
justify-content: end;
align-items: center;
.sign {
margin-right: 5px;
}
}
.btnbox {
display: flex;
flex: 1;
align-items: center;
.xkbtn {
cursor: pointer;
width: 130px;
height: 40px;
background: #388be1;
border-radius: 8px;
border: 0;
margin-right: 8px;
color: #fff;
}
}
}
.main_item2 {
display: flex;
align-items: flex-start;
// margin-bottom: 32px;
.signbox {
width: 120px;
display: flex;
justify-content: end;
align-items: center;
}
.kqszbox {
.qdqtbox {
margin-left: 5px;
cursor: pointer;
}
.qdbtn,
.qtbtn {
width: 75px;
height: 24px;
background: rgba(56, 139, 225, 0.16);
border-radius: 2px;
border: 1px solid #387df7;
display: flex;
align-items: center;
justify-content: center;
.btntext {
color: #387df7;
}
}
.setbox {
display: flex;
flex-wrap: wrap;
margin-top: 10px;
// margin-bottom: 24px;
.timerbox {
margin-top: 6px;
margin-right: 32px;
display: flex;
align-items: center;
flex-wrap: nowrap;
}
}
}
.btnbox2 {
display: flex;
flex-direction: column;
justify-content: flex-start;
.xkbtn {
cursor: pointer;
width: 130px;
height: 40px;
background: #388be1;
border-radius: 8px;
border: 0;
margin-right: 16px 8px 32px 0;
color: #fff;
margin-top: 16px;
margin-bottom: 60px;
}
}
}
}
.main_right {
width: 337px;
.main_item {
display: flex;
align-items: center;
margin-top: 32px;
margin-bottom: 32px;
.signbox {
width: 120px;
display: flex;
justify-content: end;
align-items: center;
}
.btnbox {
display: flex;
flex: 1;
align-items: center;
.xkbtn {
cursor: pointer;
width: 130px;
height: 40px;
background: #388be1;
border-radius: 8px;
border: 0;
margin-right: 8px;
color: #fff;
}
}
}
}
}
.main_btns {
height: 72px;
width: 100%;
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>