hz/fe-manage
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git synced 2025-12-17 23:06:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 新增关卡编辑和删除

Browse Source
This commit is contained in:
王熙东
2022-11-04 10:53:38 +08:00
parent 25c1ef1cde
commit ecca1f2bb1
2 changed files with 235 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/components/drawers/DWF - 快捷方式.lnk Normal file
View File

Binary file not shown.

338
src/views/learningpath/LevelAddDetail.vue
View File

@@ -78,15 +78,8 @@
<div class="co">{{ value1.length }}/20</div>
</div>
<div class="name">
<div
class="d"
style="
width: 10px;
height: 10px;
margin-top: 2px;
margin-right: 2px;
"
></div>
<div class="d" style="width: 10px;height: 10px;margin-top: 2px;margin-right:2px">
</div>
<div class="fir">关卡说明：</div>
<div class="input">
<a-textarea
@@ -174,10 +167,8 @@
<!-- 添加作业侧弹窗 -->
<div>
<add-homework
flag="0"
routerTaskId="ListChoosedId"
v-model:addhomeworkVisible="addhomeworkvisible"
/>
flag=0 :workId=editID
v-model:addhomeworkVisible="addhomeworkvisible" />
</div>
<div class="lin"></div>
</div>
@@ -190,7 +181,9 @@
</div>
<!-- 添加考试侧弹窗 -->
<div>
<add-test v-model:addtestVisible="addtestvisible" />
<add-test :workId="editID"
@clearEditData="clearEditData"
v-model:addtestVisible="addtestvisible" />
</div>
<div class="lin"></div>
</div>
@@ -230,48 +223,30 @@
</div>
<div class="lin"></div>
</div>
<div class="item" @click="showDrawerAddEval">
<div class="item">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/ce.png" />
</div>
<div class="text">测评</div>
<!-- 添加测评侧弹窗 -->
<div>
<add-eval
v-model:addevalVisible="addevalvisible"
v-model:edit="edit"
/>
</div>
<!-- 添加测评侧弹窗 -->
</div>
<div class="lin"></div>
</div>
<div class="item" @click="showDrawerAddInvist">
<div class="item">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/diao.png" />
</div>
<div class="text">评估</div>
<!-- 添加评估侧弹窗 -->
<div>
<add-invist v-model:addinvistVisible="addinvistvisible" />
</div>
<!-- 添加评估侧弹窗 -->
</div>
<div class="lin"></div>
</div>
<div class="item" @click="showDrawerAddVote">
<div class="item">
<div class="itcon">
<div class="img">
<img src="../../assets/images/leveladd/tou.png" />
</div>
<div class="text">投票</div>
<!-- 添加投票侧弹窗 -->
<div>
<add-vote v-model:addvoteVisible="addvotevisible" />
</div>
<!-- 添加投票侧弹窗 -->
</div>
<div class="lin"></div>
</div>
@@ -311,6 +286,7 @@
:loading="tableDataTotal === -1 ? true : false"
expandRowByClick="true"
@expand="expandTable"
:customRow="handleClickRow"
:pagination="false"
:row-selection="{
columnWidth: 30,
@@ -542,6 +518,37 @@
</div>
</div>
</a-modal>
<!-- 是否确认删除任务弹窗 -->
<!-- 确认删除阶段弹窗 -->
<a-modal
v-model:visible="deleteModal"
:footer="null"
:closable="cC"
wrapClassName="ConfirmModal"
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="closeConfirm"></div>
</div>
<div class="body">
<span>您确定要删除此任务吗</span>
</div>
<div class="del_btnbox">
<div class="del_btn btn1">
<div class="btnText" @click="closeConfirm">取消</div>
</div>
<div class="del_btn btn2">
<div class="btnText" @click="deleteLevelTask">确定</div>
</div>
</div>
</div>
</div>
</a-modal>
</div>
</template>
@@ -551,9 +558,6 @@ import AddStu from "../../components/drawers/AddLevelAddStu";
import ImpStu from "../../components/drawers/AddLevelImportStu";
import AddHomework from "../../components/drawers/AddHomework.vue";
import AddTest from "../../components/drawers/AddTest.vue";
import AddEval from "../../components/drawers/AddEval.vue";
import AddInvist from "../../components/drawers/AddInvist.vue";
import AddVote from "../../components/drawers/AddVote.vue";
import * as api from "../../api/indexLevel";
import { GetRouterDetail, RouterDeleteTask } from "../../api/indexTask";
import { message } from "ant-design-vue";
@@ -563,25 +567,22 @@ export default {
AddStu,
ImpStu,
AddHomework,
AddTest,
AddEval,
AddInvist,
AddVote,
AddTest
},
setup() {
const state = reactive({
routerId: localStorage.getItem("routerId"),
level: [
{
chapterId: "1",
remark: "关卡说明",
name: "默认关卡",
},
}
],
tableData: [
{
key: 1,
lei: "在线",
routerTaskId:0,
// state: "已发布",
creater: "管理者课程",
// pubtime: "2022-07-20 14:00:03",
@@ -770,21 +771,21 @@ export default {
stm_hs: false,
deleteAll: false,
closeDeleteAll: false,
deleteModal:false, // 删除弹窗
deleteID:'', // 要删除的任务的id
editID:'', // 要编辑的任务id
cC: false,
value1: "",
value2: "",
selectedRowKeys: [],
edit: false, //是否点击编辑
gqxy_hs: true,
isactive: 0,
projectChecked: null, //项目单选框
addhomeworkvisible: false,
addtestvisible:false,
addevalvisible: false,
addinvistvisible: false,
addvotevisible: false,
updateChapterID: null, //修改关卡id
// 表示当前触发列表的id,用来发送编辑和删除
ListChoosedId: 0,
ListChoosedId:0
});
//新建关卡
@@ -812,7 +813,7 @@ export default {
.catch((err) => {
console.log("创建失败", err);
});
};
}
//编辑关卡
// const updateChapter = () => {
@@ -838,26 +839,16 @@ export default {
// 作业和考试的抽屉
const showDrawerAddHomework = () => {
state.addhomeworkvisible = true;
state.ListChoosedId = 0;
state.ListChoosedId = 0
};
const showDrawerAddTest = () => {
state.addtestvisible = true;
state.ListChoosedId = 0;
};
//测试评估投票抽屉
const showDrawerAddEval = () => {
state.addevalvisible = true;
};
const showDrawerAddInvist = () => {
state.addinvistvisible = true;
};
const showDrawerAddVote = () => {
state.addvotevisible = true;
state.ListChoosedId = 0
};
// tableData数据赋值方法
const dataAssignment = () => {
console.log(state.level);
console.log((state.level));
state.level[0].taskList.forEach((element,index) => {
state.tableData[index] = {
key:element.routerTaskId,
@@ -865,30 +856,22 @@ export default {
creater:element.name,
cretime:element.duration,
checked1:element.flag,
};
routerTaskId:element.routerTaskId
}
});
};
}
const getDetail = (index) => {
GetRouterDetail(92)
.then((res) => {
state.level = res.data.data.chapterList;
GetRouterDetail(92).then((res) => {
state.level = res.data.data.chapterList
console.log(state.level);
if(index == 0) {
// state.tableData[1] = {
// key: 2,
// lei: "在线",
// creater: "管理者课程",
// cretime: "60",
// checked1: true,
// }
dataAssignment(0);
dataAssignment(0)
}
state.deleteModal = false;
}).catch((err) => {
message.error(err)
})
.catch((err) => {
message.error(err);
});
};
}
const closeDrawer = () => {
state.visible = false;
};
@@ -1007,27 +990,21 @@ export default {
// width: 100,
align: "center",
scopedSlots: { customRender: "action" }, //引入的插槽
customRender: () => {
customRender: (e) => {
return (
<div class="opa">
<div class="opacation">
<span
style="color:#4EA6FF;margin-right:25px;cursor:pointer"
<span style="color:#4EA6FF;margin-right:25px;cursor:pointer"
onClick={()=>{
state.edit = true;
state.addevalvisible = true;
state.editID = e.record.routerTaskId
state.addhomeworkvisible = true;
}}
>
编辑
</span>
<span
style="color:#4EA6FF;cursor:pointer"
onClick={() => {
deleteLevelTask();
}}
>
删除
</span>
<span style="color:#4EA6FF;cursor:pointer" onClick={() => {
showDeleteModal(e.record.routerTaskId)
}}>删除</span>
</div>
</div>
);
@@ -1037,22 +1014,9 @@ export default {
return columns;
};
const checkType = (index) => {
let typeRules = [
"",
"在线",
"面授",
"案例",
"作业",
"考试",
"直播",
"外链",
"讨论",
"测评",
"评估",
"投票",
];
let typeRules = ["","在线","面授","案例","作业","考试","直播","外链","讨论","测评","评估","投票"];
return typeRules[index];
};
}
const tableDataFunc2 = () => {
const columns = [
{
@@ -1237,7 +1201,7 @@ export default {
document.getElementsByTagName("main")[0].style.background =
"rgb(245, 247, 250,1)";
document.getElementsByTagName("main")[0].style.boxShadow = "none";
getDetail(0);
getDetail(0)
});
onUnmounted(() => {
document.getElementsByTagName("main")[0].style.background = "#ffffff";
@@ -1257,16 +1221,33 @@ export default {
const delete_exit = () => {
state.deleteAll = false;
};
const showDeleteModal = (id) => {
state.deleteID = id;
state.deleteModal = true;
}
const closeConfirm = () => {
state.deleteModal = false;
state.deleteID = '';
state.editID = '';
}
const deleteLevelTask = () => {
RouterDeleteTask(state.listChoosedId)
.then((res) => {
RouterDeleteTask(state.deleteID).then((res) => {
console.log(`删除成功${res}`);
message.success("删除成功");
})
.catch((err) => {
getDetail(0)
message.success('删除成功');
}).catch((err) => {
console.log(`删除失败${err}`);
});
};
})
}
const closeDeleteModel = () => {
state.deleteModal = false;
state.deleteID = '';
}
// 子组件触发的清空 editid 事件
const clearEditData = () => {
state.editID = '';
getDetail(0);
}
return {
...toRefs(state),
@@ -1285,21 +1266,132 @@ export default {
gqxy_hShow,
showDeleteALLModal,
delete_exit,
closeConfirm,
drawertableColumns,
editChapter,
// updateChapter,
showDrawerAddHomework,
showDrawerAddTest,
showDrawerAddEval,
showDrawerAddInvist,
showDrawerAddVote,
deleteLevelTask,
closeDeleteModel,
clearEditData,
};
},
};
</script>
<style lang="scss">
.ConfirmModal {
.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: 40px;
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/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%;
}
}
.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;
}
}
}
}
}
}
}
}
.clearfix:after,
.clearfix:before {
content: " ";
@@ -1419,9 +1511,9 @@ export default {
width: 100px;
height: 40px;
border-radius: 4px;
border: 1px solid #409eff;
border: 1px solid #409EFF;
font-size: 14px;
color: #409eff;
color: #409EFF;
cursor: pointer;
background: #ffffff;
margin-right: 20px;
@@ -1434,7 +1526,7 @@ export default {
color: #fff;
cursor: pointer;
border: 0;
background: #409eff;
background: #409EFF;
}
}
}