Files
fe-manage/src/components/drawers/AddInvist.vue
2022-11-28 23:26:20 +08:00

440 lines
13 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="addinvistVisible"
class="drawerStyle addinvistDrawer"
width="70%"
title="添加评估"
placement="right"
@after-visible-change="afterVisibleChange"
>
<div class="drawerMain">
<div class="header">
<div v-if="edit" class="headerTitle">编辑评估</div>
<div v-else 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">
<div class="main_left">
<div class="main_notice">
<div class="mntc_left">
<div class="notice_icon"></div>
<div v-if="assessment == null && assessment1 == null">
<span class="title"
>已选择 <span class="data">0</span> </span
>
</div>
<div v-else>
<div v-if="assessment1 == null">
<span class="title"
>已选择 <span class="data">1</span> ;</span
>
<span class="title"
>名称 <span class="data">{{ assessment.name }}</span>
</span>
<span class="title"
>题数 <span class="data">{{ assessment.num }}</span>
</span>
<span class="title"
>创建人
<span class="data">{{ assessment.creator }}</span>
</span>
<span class="title"
>创建时间
<span class="data">{{ assessment.time }}</span>
</span>
</div>
<div v-else>
<span class="title"
>已选择 <span class="data">1</span> ;</span
>
<span class="title"
>名称
<span class="data">{{ assessment1.createName }}</span>
</span>
<span class="title"
>题数
<span class="data">{{
assessment1.essayQuestionVoList.length
}}</span>
</span>
<span class="title"
>创建人
<span class="data">{{ assessment1.createUser }}</span>
</span>
<span class="title"
>创建时间
<span class="data">{{ assessment1.createTime }}</span>
</span>
</div>
</div>
</div>
</div>
<div class="main_item">
<div class="fi_input">
<div class="btns" @click="checkAssDrawer">
<div class="search"></div>
<div class="btnText">选择评估</div>
<div class="main_item2">
<AssessmentList
v-model:assessmentVisible="assessmentVisible"
v-model:titleTag="titleTag"
@checkedAss="getCheckedAss"
/>
</div>
</div>
</div>
</div>
</div>
<div class="main_btns">
<button class="btn1" @click="closeDrawer">取消</button>
<button class="btn2" @click="updateTask">确定</button>
</div>
</div>
</div>
</div>
</a-drawer>
</template>
<script>
import { reactive, toRefs } from "vue";
import * as apiTask from "../../api/indexTaskadd";
import { message } from "ant-design-vue";
import AssessmentList from "./ AssessmentList.vue";
import { RouterEditTask } from "@/api/indexTask";
import * as api from "../../api/indexInvist";
import { addTempTask } from "../../api/indexTaskadd";
export default {
name: "AddInvist",
components: {
AssessmentList,
},
props: {
addinvistVisible: {
type: Boolean,
default: false,
},
EditInvistId: {
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,
},
projectTemplateId:{
type: Number,
default: null,
}
},
setup(props, ctx) {
const state = reactive({
inputV1: "",
time: undefined,
currentPage: 1,
pageSize: 10,
tableDataTotal: 0,
tableData: [],
assessmentId: null,
assessmentName: "",
assessment: null,
assessment1: null,
assessmentVisible: false,
titleTag: false,
});
const getCheckedAss = (ass) => {
state.assessment = ass;
state.assessment1 = null;
};
const closeDrawer = () => {
ctx.emit("update:addinvistVisible", false);
ctx.emit("update:edit", false);
state.inputV1 = "";
// ctx.emit("changeData", false);
localStorage.setItem("stageId", props.chooseStageId);
localStorage.setItem("chapterId", props.isactive);
};
const checkAssDrawer = () => {
state.assessmentVisible = true;
};
const afterVisibleChange = () => {
state.assessmentId = null;
state.assessmentName = "";
state.assessment = null;
queryInfo();
};
const queryInfo = () => {
if (props.edit) {
state.titleTg = false;
//编辑讨
api
.queryAppraiseDetailById({ assessmentId: props.EditInvistId })
.then((res) => {
//更新讨论信息
state.assessment1 = res.data.data;
})
.catch(() => {});
}
};
const updateTask = () => {
if (state.assessment == null) {
return message.warning("请选择评估");
}
if (props.isLevel == 1) {
RouterEditTask({
chapterId: props.isactive,
courseId: state.assessment.assessmentId,
name: state.assessment.name,
routerId: props.routerId,
routerTaskId: props.routerTaskId || 0,
type: 11,
})
.then(() => {
message.success(`${props.edit ? "编辑" : "新增"}关卡任务成功`);
ctx.emit("changeData", false);
closeDrawer();
state.addLoading = false;
})
.catch(() => {
message.error(`${props.edit ? "编辑" : "新增"}关卡任务失败`);
});
} else if (props.isLevel == 2) {
apiTask
.addTask({
courseId: state.assessment.assessmentId,
name: state.assessment.name,
projectId: props.projectId,
projectTaskId: props.projectTaskId || 0,
stageId: props.chooseStageId || 0,
type: 11,
})
.then(() => {
message.success(`${props.edit ? "编辑" : "新增"}阶段任务成功`);
ctx.emit("changeData", false);
closeDrawer();
})
.catch(() => {
message.error(`${props.edit ? "编辑" : "新增"}阶段任务失败`);
});
} else if (props.isLevel == 3) {
addTempTask({
courseId: state.assessment.assessmentId,
name: state.assessment.name,
projectTemplateId: props.projectTemplateId,
projectTaskId: props.projectTaskId || 0,
stageId: props.chooseStageId || 0,
type: 11,
})
.then(() => {
message.success(`${props.edit ? "编辑" : "新增"}阶段任务成功`);
ctx.emit("changeData", false);
closeDrawer();
})
.catch(() => {
message.error(`${props.edit ? "编辑" : "新增"}阶段任务失败`);
});
}
};
return {
...toRefs(state),
afterVisibleChange,
closeDrawer,
updateTask,
checkAssDrawer,
getCheckedAss,
};
},
};
</script>
<style lang="scss">
.ant-table-striped :deep(.table-striped) td {
background-color: #fafafa !important;
}
.addinvistDrawer {
.drawerMain {
.header {
height: 73px;
border-bottom: 1px solid #e8e8e8;
display: flex;
justify-content: space-between;
align-items: center;
.headerTitle {
font-size: 18px;
font-weight: 600;
color: #333333;
line-height: 25px;
margin-left: 24px;
}
}
.contentMain {
display: flex;
justify-content: space-between;
.main {
width: 100%;
.main_left {
padding-right: 30px;
margin-top: 32px;
.main_item {
display: flex;
align-items: center;
margin-bottom: 64px;
.fi_input {
margin-right: 20px;
}
.btns {
margin-right: 20px;
padding: 0px 26px 0px 26px;
height: 38px;
background: #409eff;
border-radius: 8px;
//border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.search {
width: 15px;
height: 17px;
background-image: url("../../assets/images/courseManage/search0.png");
background-size: 100% 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: #ffffff;
line-height: 36px;
margin-left: 5px;
}
}
.btnsn {
padding: 0px 26px 0px 26px;
height: 38px;
background: #ffffff;
border-radius: 8px;
border: 1px solid rgba(64, 158, 255, 1);
display: flex;
align-items: center;
justify-content: center;
margin-right: 14px;
flex-shrink: 0;
cursor: pointer;
.search {
width: 16px;
height: 18px;
background-image: url("../../assets/images/courseManage/reset1.png");
background-size: 100% 100%;
}
.btnText {
font-size: 14px;
font-weight: 400;
color: #409eff;
line-height: 36px;
margin-left: 5px;
}
}
}
.main_notice {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
height: 40px;
background-color: #e9f6fe;
.mntc_left {
display: flex;
align-items: center;
.title {
color: rgba(0, 0, 0, 0.65);
margin-right: 17px;
}
.data {
color: #388be1;
}
.notice_icon {
width: 14px;
height: 14px;
margin-right: 9px;
margin-left: 9px;
background-image: url(@/assets/images/coursewareManage/gan.png);
background-size: 100% 100%;
}
}
.mntc_right {
cursor: pointer;
}
}
}
}
}
.main_btns {
height: 72px;
width: 100%;
margin-top: 180px;
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>