mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-manage.git
synced 2025-12-14 21:36:44 +08:00
--fix 路径图整体修改
This commit is contained in:
@@ -5,3 +5,4 @@ export const getRouterOverview = (routerId) => http.get(`/admin/router/overview?
|
|||||||
|
|
||||||
//新建或编辑路径图
|
//新建或编辑路径图
|
||||||
export const editRoutered = (obj) => http.post('/admin/router/edit', obj)
|
export const editRoutered = (obj) => http.post('/admin/router/edit', obj)
|
||||||
|
export const editRouterModel = (obj) => http.post('/admin/router/editModel', obj)
|
||||||
@@ -1,33 +1,34 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div @click="openDrawer">
|
||||||
|
<slot></slot>
|
||||||
|
</div>
|
||||||
<a-drawer
|
<a-drawer
|
||||||
:visible="unlockModeVisible"
|
:visible="visible"
|
||||||
class="drawerStyle unlockmode"
|
class="drawerStyle unlockmode"
|
||||||
placement="right"
|
placement="right"
|
||||||
width="70%"
|
width="700"
|
||||||
@after-visible-change="afterVisibleChange"
|
|
||||||
>
|
>
|
||||||
<div class="drawerMain">
|
<div class="drawerMain">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="headerTitle">选择解锁模式</div>
|
<div class="headerTitle">选择解锁模式</div>
|
||||||
<img
|
<img
|
||||||
style="width: 29px; height: 29px; cursor: pointer"
|
style="width: 29px; height: 29px; cursor: pointer"
|
||||||
src="../../assets/images/basicinfo/close.png"
|
src="../../assets/images/basicinfo/close.png"
|
||||||
@click="closeDrawer"
|
@click="closeDrawer"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div class="classify">
|
<div class="classify">
|
||||||
<div
|
<div
|
||||||
v-for="(item, index) in classify"
|
v-for="(item, index) in classify"
|
||||||
:key="index"
|
:key="index"
|
||||||
class="classifyItem"
|
class="classifyItem"
|
||||||
@click="selectClassify(item)"
|
@click="selectClassify(item)"
|
||||||
:style="{
|
:style="{
|
||||||
color: item.type === selectClassifyType ? '#FFFFFF' : '#999999',
|
color: item.type === classifyActive ? '#FFFFFF' : '#999999',
|
||||||
'background-color':
|
'background-color':
|
||||||
item.type === selectClassifyType ? '#4ea6ff' : '#FFFFFF',
|
item.type === classifyActive ? '#4ea6ff' : '#FFFFFF',
|
||||||
border:
|
border: item.type === classifyActive
|
||||||
item.type === selectClassifyType
|
|
||||||
? '1px solid #4ea6ff'
|
? '1px solid #4ea6ff'
|
||||||
: '1px solid #999999',
|
: '1px solid #999999',
|
||||||
}"
|
}"
|
||||||
@@ -35,26 +36,29 @@
|
|||||||
{{ item.text }}
|
{{ item.text }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="selectClassifyType === 1" class="type1">
|
<div v-if="classifyActive === 1" @click="updateLockMode(1)" class="type1">
|
||||||
<span style="font-weight: 500">描述:</span
|
<span style="font-weight: 500">描述:</span
|
||||||
><span>不设学习限制,学员可以在任何时间学习</span>
|
><span>不设学习限制,学员可以在任何时间学习</span>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="selectClassifyType === 2" class="type1 type3">
|
<div v-if="classifyActive === 2" @click="updateLockMode(2)"
|
||||||
|
class="type1 type3">
|
||||||
<div>
|
<div>
|
||||||
<span style="font-weight: 500">描述:</span
|
<span style="font-weight: 500">描述:</span
|
||||||
><span>前一个阶段达成目标后解锁下一个阶段</span>
|
><span>前一个阶段达成目标后解锁下一个阶段</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="radio" style="display: flex">
|
<div class="radio" style="display: flex">
|
||||||
<div style="margin-top: 1px">解锁条件:</div>
|
<div style="margin-top: 1px">解锁条件:</div>
|
||||||
<a-radio-group v-model:value="radioSelect" @change="changeUnlockMode">
|
<a-radio-group v-model:value="routerInfoData.unlockMode">
|
||||||
<div>
|
<div>
|
||||||
<a-radio :value="2"
|
<a-radio :value="2"
|
||||||
>逐个任务解锁,完成一个任务后解锁下一个</a-radio
|
>逐个任务解锁,完成一个任务后解锁下一个
|
||||||
|
</a-radio
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<div style="margin-top: 24px">
|
<div style="margin-top: 24px">
|
||||||
<a-radio :value="3"
|
<a-radio :value="3"
|
||||||
>完成当前阶段所有必修任务解锁下一阶段</a-radio
|
>完成当前阶段所有必修任务解锁下一阶段
|
||||||
|
</a-radio
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
</a-radio-group>
|
</a-radio-group>
|
||||||
@@ -69,93 +73,53 @@
|
|||||||
</a-drawer>
|
</a-drawer>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script setup>
|
||||||
import {reactive, toRefs} from "vue";
|
import {computed, defineEmits, defineProps, ref, watch} from "vue";
|
||||||
export default {
|
import {editRouterModel} from "@/api/indexLearningPath";
|
||||||
name: "UnlockMode",
|
|
||||||
props:{
|
const emit = defineEmits({})
|
||||||
unlockModeVisible:{
|
const visible = ref(false)
|
||||||
type: Boolean,
|
const classify = [
|
||||||
default: false
|
{
|
||||||
},
|
type: 1,
|
||||||
objData:{
|
text: "自由学习模式",
|
||||||
type: Object
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
setup(props, ctx) {
|
{
|
||||||
console.log("获取属性",props)
|
type: 2,
|
||||||
const state = reactive({
|
text: "闯关模式",
|
||||||
classify: [
|
|
||||||
{
|
|
||||||
type: 1,
|
|
||||||
text: "自由学习模式",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
type: 2,
|
|
||||||
text: "闯关模式",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
selectClassifyType: 1,
|
|
||||||
checked: true,
|
|
||||||
radioSelect: 1,
|
|
||||||
formData: {
|
|
||||||
unlockMode:'',
|
|
||||||
}
|
|
||||||
});
|
|
||||||
const closeDrawer = () => {
|
|
||||||
state.selectClassifyType = 1;
|
|
||||||
state.checked = true;
|
|
||||||
state.radioSelect = 1;
|
|
||||||
ctx.emit("update:unlockModeVisible", false);
|
|
||||||
ctx.emit("closeUnlockModal", false)
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const saveUnlock =() =>{
|
|
||||||
console.log(ctx,state.formData.unlockMode)
|
|
||||||
ctx.emit("saveUnlock",state.formData.unlockMode)
|
|
||||||
}
|
|
||||||
|
|
||||||
const afterVisibleChange = (bool) => {
|
|
||||||
if(bool){
|
|
||||||
for(let key in state.formData){
|
|
||||||
state.formData[key] = props.objData[key]
|
|
||||||
}
|
|
||||||
if(state.formData.unlockMode === 1){
|
|
||||||
state.selectClassifyType = 1
|
|
||||||
}else if(state.formData.unlockMode === 2 || state.formData.unlockMode === 3){
|
|
||||||
state.selectClassifyType = 2
|
|
||||||
state.radioSelect = state.formData.unlockMode
|
|
||||||
}
|
|
||||||
}
|
|
||||||
console.log("点开弹窗",state.formData,state.unlockMode)
|
|
||||||
};
|
|
||||||
|
|
||||||
const selectClassify = (e) => {
|
|
||||||
state.selectClassifyType = e.type;
|
|
||||||
if(e.type === 1){
|
|
||||||
state.formData.unlockMode = e.type
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const changeUnlockMode = (e) =>{
|
|
||||||
|
|
||||||
state.formData.unlockMode = e.target.value
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
...toRefs(state),
|
|
||||||
afterVisibleChange,
|
|
||||||
closeDrawer,
|
|
||||||
saveUnlock,
|
|
||||||
selectClassify,
|
|
||||||
changeUnlockMode
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
|
];
|
||||||
|
const props = defineProps({
|
||||||
|
routerInfo: {}
|
||||||
|
})
|
||||||
|
const routerInfoData = ref({})
|
||||||
|
const classifyActive = computed(() => routerInfoData.value.unlockMode === 1 ? 1 : 2)
|
||||||
|
watch(() => props.routerInfo, () => {
|
||||||
|
routerInfoData.value = props.routerInfo
|
||||||
|
})
|
||||||
|
const closeDrawer = () => {
|
||||||
|
visible.value = false
|
||||||
};
|
};
|
||||||
</script>
|
|
||||||
|
|
||||||
|
function selectClassify({type}) {
|
||||||
|
routerInfoData.value.unlockMode = type
|
||||||
|
}
|
||||||
|
|
||||||
|
const saveUnlock = () => {
|
||||||
|
emit("update:userInfo", routerInfoData.value)
|
||||||
|
editRouterModel(routerInfoData.value)
|
||||||
|
closeDrawer()
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateLockMode(type) {
|
||||||
|
routerInfoData.value.unlockMode = type
|
||||||
|
}
|
||||||
|
|
||||||
|
function openDrawer() {
|
||||||
|
visible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.unlockmode {
|
.unlockmode {
|
||||||
.drawerMain {
|
.drawerMain {
|
||||||
@@ -164,6 +128,7 @@ export default {
|
|||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
height: 73px;
|
height: 73px;
|
||||||
border-bottom: 1px solid #e8e8e8;
|
border-bottom: 1px solid #e8e8e8;
|
||||||
@@ -172,6 +137,7 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
// background-color: red;
|
// background-color: red;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
|
|
||||||
.headerTitle {
|
.headerTitle {
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@@ -180,11 +146,14 @@ export default {
|
|||||||
// margin-left: 24px;
|
// margin-left: 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
.classify {
|
.classify {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
.classifyItem {
|
.classifyItem {
|
||||||
width: 160px;
|
width: 160px;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
@@ -201,6 +170,7 @@ export default {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.type1 {
|
.type1 {
|
||||||
margin-top: 50px;
|
margin-top: 50px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@@ -208,10 +178,12 @@ export default {
|
|||||||
color: #333333;
|
color: #333333;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.radio {
|
.radio {
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.btnn {
|
.btnn {
|
||||||
height: 72px;
|
height: 72px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -222,6 +194,7 @@ export default {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
|
box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.16);
|
||||||
|
|
||||||
.btn1 {
|
.btn1 {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
@@ -231,6 +204,7 @@ export default {
|
|||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn2 {
|
.btn2 {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|||||||
@@ -60,8 +60,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a-modal v-model:visible="modal" :centered="true" :footer="null" :closable="clos" wrapClassName="AddLevell"
|
<a-modal v-model:visible="modal" :centered="true" :footer="null" wrapClassName="AddLevell" @cancel="closeModal">
|
||||||
@cancel="closeModal">
|
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="headmain">
|
<div class="headmain">
|
||||||
<div class="add">编辑/添加关卡</div>
|
<div class="add">编辑/添加关卡</div>
|
||||||
@@ -76,10 +75,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="fir">关卡名称:</div>
|
<div class="fir">关卡名称:</div>
|
||||||
<div class="input">
|
<div class="input">
|
||||||
<a-input style="width: 100%" v-model:value="routerInfo.chapterList[activeIndex].name" :maxlength="20"
|
<a-input style="width: 100%" v-model:value="formValue.name" :maxlength="20"
|
||||||
placeholder="请输入关卡名称"/>
|
placeholder="请输入关卡名称"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="co">{{ routerInfo.chapterList[activeIndex].name || 0 }}/20</div>
|
<div class="co">{{ formValue.name?.length || 0 }}/20</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="name">
|
<div class="name">
|
||||||
<div
|
<div
|
||||||
@@ -90,11 +89,11 @@
|
|||||||
margin-right: 2px;"></div>
|
margin-right: 2px;"></div>
|
||||||
<div class="fir">关卡说明:</div>
|
<div class="fir">关卡说明:</div>
|
||||||
<div class="input">
|
<div class="input">
|
||||||
<a-textarea style="width: 100%" v-model:value="routerInfo.chapterList[activeIndex].remark"
|
<a-textarea style="width: 100%" v-model:value="formValue.remark"
|
||||||
:maxlength="100" placeholder="请输入关卡说明"
|
:maxlength="100" placeholder="请输入关卡说明"
|
||||||
:rows="5"/>
|
:rows="5"/>
|
||||||
</div>
|
</div>
|
||||||
<div class="co1">{{ routerInfo.chapterList[activeIndex].remark || 0 }}/100</div>
|
<div class="co1">{{ formValue.remark?.length || 0 }}/100</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="btn">
|
<div class="btn">
|
||||||
<button class="btn1" @click="closeModal">取消</button>
|
<button class="btn1" @click="closeModal">取消</button>
|
||||||
@@ -102,9 +101,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="aeLoading" :style="{ display: addLoading ? 'flex' : 'none' }">
|
|
||||||
<a-spin :spinning="addLoading" :tip="updateChapterID ? '修改中...' : ''"/>
|
|
||||||
</div>
|
|
||||||
</a-modal>
|
</a-modal>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="addhead">
|
<div class="addhead">
|
||||||
@@ -121,18 +117,16 @@
|
|||||||
<div class="rightt">
|
<div class="rightt">
|
||||||
<div class="select" style="margin-right:90px;">
|
<div class="select" style="margin-right:90px;">
|
||||||
<span>学习模式:</span>
|
<span>学习模式:</span>
|
||||||
<a-select v-model:value="routerInfo.unlockMode" ref="select" size="small"
|
<a-select v-model:value="routerInfo.routerInfo.unlockMode" ref="select" size="small"
|
||||||
style="width: 150px" disabled>
|
style="width: 150px" disabled>
|
||||||
<a-select-option :value="0">自由学习模式</a-select-option>
|
|
||||||
<a-select-option :value="1">自由学习模式</a-select-option>
|
<a-select-option :value="1">自由学习模式</a-select-option>
|
||||||
<a-select-option :value="2">闯关模式</a-select-option>
|
<a-select-option :value="2">闯关模式</a-select-option>
|
||||||
<a-select-option :value="3">闯关模式</a-select-option>
|
<a-select-option :value="3">闯关模式</a-select-option>
|
||||||
</a-select>
|
</a-select>
|
||||||
<a-button type="primary" size="large" style="border-radius: 8px;margin-left: 24px;"
|
<unlock-mode :routerInfo="routerInfo.routerInfo">
|
||||||
@click="showModeVisible">切换模式
|
<a-button type="primary" size="large" style="border-radius: 8px;margin-left: 24px;">切换模式
|
||||||
</a-button>
|
</a-button>
|
||||||
<unlock-mode ref="unlockModeModal" v-model:unlockModeVisible="unlockModeVisible"
|
</unlock-mode>
|
||||||
:objData="routerInfo" @saveUnlock="saveUnlock" @closeUnlockModal="closeUnlockModal"/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<router-link :to="{ path: '/leveladd', query:{ routerId: routerId } }">
|
<router-link :to="{ path: '/leveladd', query:{ routerId: routerId } }">
|
||||||
@@ -171,13 +165,13 @@
|
|||||||
<div class="btn btn1" @click="showChangeModal">
|
<div class="btn btn1" @click="showChangeModal">
|
||||||
<div class="btnText">移动任务到关卡</div>
|
<div class="btnText">移动任务到关卡</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="btn btn2" @click="showDeleteALLModal(1)">
|
<div class="btn btn2" @click="showDeleteALLModal">
|
||||||
<div class="imgIcon"></div>
|
<div class="imgIcon"></div>
|
||||||
<div class="btnText">批量删除</div>
|
<div class="btnText">批量删除</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="tableBox">
|
<div v-if="routerInfo?.chapterList[activeIndex]?.draftTaskList?.length" class="tableBox">
|
||||||
<div style="
|
<div style="
|
||||||
height: 50px;
|
height: 50px;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -208,11 +202,6 @@
|
|||||||
? require('../../assets/images/selectAll.png')
|
? require('../../assets/images/selectAll.png')
|
||||||
: require('../../assets/images/select.png')
|
: require('../../assets/images/select.png')
|
||||||
" @click="selectRowAll"/>
|
" @click="selectRowAll"/>
|
||||||
<!-- <a-checkbox
|
|
||||||
v-model:checked="selectAll"
|
|
||||||
@change="selectRowAll"
|
|
||||||
>
|
|
||||||
</a-checkbox> -->
|
|
||||||
<div style="margin-top: 2px; margin-left: 8px">类型</div>
|
<div style="margin-top: 2px; margin-left: 8px">类型</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 120px; text-align: center">任务名称</div>
|
<div style="width: 120px; text-align: center">任务名称</div>
|
||||||
@@ -249,8 +238,7 @@
|
|||||||
margin-right: 9px;
|
margin-right: 9px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: -25px;"></div>
|
left: -25px;"></div>
|
||||||
<a-checkbox :id="element.routerTaskId" v-model:checked="element.checked" @change="changeRow">
|
<a-checkbox :id="element.id" v-model:checked="element.checked"></a-checkbox>
|
||||||
</a-checkbox>
|
|
||||||
<div style="margin-top: 2px; margin-left: 8px">
|
<div style="margin-top: 2px; margin-left: 8px">
|
||||||
{{ TASK_TYPE[element.type]?.name || '' }}
|
{{ TASK_TYPE[element.type]?.name || '' }}
|
||||||
</div>
|
</div>
|
||||||
@@ -312,7 +300,7 @@
|
|||||||
</Draggable>
|
</Draggable>
|
||||||
</div>
|
</div>
|
||||||
<!-- 无数据样式 -->
|
<!-- 无数据样式 -->
|
||||||
<div class="notable" :style="{ display: stm_hs ? 'block' : 'none' }">
|
<div v-else class="notable">
|
||||||
<div class="notablebox">
|
<div class="notablebox">
|
||||||
<div class="boxbody">
|
<div class="boxbody">
|
||||||
<div class="boximg"></div>
|
<div class="boximg"></div>
|
||||||
@@ -340,15 +328,9 @@
|
|||||||
<a-button class="btn btn1" @click="cancelStorage" :loading="cancleLoading">取消</a-button>
|
<a-button class="btn btn1" @click="cancelStorage" :loading="cancleLoading">取消</a-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 添加学员抽屉 -->
|
|
||||||
<add-stu v-model:AddSvisible="AddSvisible"/>
|
|
||||||
<!-- 导入学员抽屉 -->
|
|
||||||
<imp-stu v-model:AddImpStuvisible="AddImpStuvisible"/>
|
|
||||||
<!-- 添加讨论侧弹窗 -->
|
|
||||||
<!-- 添加活动侧弹窗 -->
|
|
||||||
<!-- 批量删除学员弹窗 -->
|
<!-- 批量删除学员弹窗 -->
|
||||||
<a-modal v-model:visible="deleteAll" :footer="null" :closable="closeDeleteAll" wrapClassName="CopyModal"
|
<a-modal v-model:visible="deleteAll" :footer="null" :closable="closedeleteAll" wrapClassName="CopyModal"
|
||||||
centered="true">
|
:centered="true">
|
||||||
<div class="delete">
|
<div class="delete">
|
||||||
<div class="del_header"></div>
|
<div class="del_header"></div>
|
||||||
<div class="del_main">
|
<div class="del_main">
|
||||||
@@ -373,7 +355,7 @@
|
|||||||
</a-modal>
|
</a-modal>
|
||||||
<!-- 是否确认删除任务弹窗 -->
|
<!-- 是否确认删除任务弹窗 -->
|
||||||
<!-- 确认删除阶段弹窗 -->
|
<!-- 确认删除阶段弹窗 -->
|
||||||
<a-modal v-model:visible="deleteModal" :footer="null" :closable="cC" wrapClassName="ConfirmModal" centered="true">
|
<a-modal v-model:visible="deleteModal" :footer="null" wrapClassName="ConfirmModal" :centered="true">
|
||||||
<div class="delete">
|
<div class="delete">
|
||||||
<div class="del_header"></div>
|
<div class="del_header"></div>
|
||||||
<div class="del_main">
|
<div class="del_main">
|
||||||
@@ -397,7 +379,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
<!-- 移动任务到阶段 -->
|
<!-- 移动任务到阶段 -->
|
||||||
<a-modal style="padding: 0" :closable="sh" v-model:visible="visiblene" :footer="null" centered="true"
|
<a-modal style="padding: 0" v-model:visible="visiblene" :footer="null" :centered="true"
|
||||||
wrapClassName="moveModal">
|
wrapClassName="moveModal">
|
||||||
<div class="con">
|
<div class="con">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
@@ -408,10 +390,13 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="mid">
|
<div class="mid">
|
||||||
<div class="inher">
|
<div class="inher">
|
||||||
<div class="cur">已选中{{ selectRow.length }}个任务</div>
|
<div class="cur">
|
||||||
|
已选中{{ routerInfo?.chapterList[activeIndex]?.draftTaskList?.filter(t => t.checked)?.length || 0 }}个任务
|
||||||
|
</div>
|
||||||
<div class="select">
|
<div class="select">
|
||||||
<a-select v-model:value="curLevel" style="width: 100%" placeholder="请选择阶段" :options="level"
|
<a-select v-model:value="moveChapterIndex" style="width: 100%" placeholder="请选择阶段" allowClear
|
||||||
@change="handleChangeStage" allowClear></a-select>
|
:options="routerInfo.chapterList.map(({name:label},value)=>({label,value,disabled:value===activeIndex}))"
|
||||||
|
></a-select>
|
||||||
</div>
|
</div>
|
||||||
<div class="btn">
|
<div class="btn">
|
||||||
<button style="cursor: pointer" class="sameb btn1" @click="closeChangeModal">
|
<button style="cursor: pointer" class="sameb btn1" @click="closeChangeModal">
|
||||||
@@ -454,15 +439,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import {onMounted, onUnmounted, ref} from "vue";
|
import {computed, onMounted, onUnmounted, ref} from "vue";
|
||||||
import AddStu from "../../components/drawers/AddLevelAddStu";
|
|
||||||
import ImpStu from "../../components/drawers/AddLevelImportStu";
|
|
||||||
import {GetRouterDraftDetail, releaseRouter} from "@/api/indexTask";
|
import {GetRouterDraftDetail, releaseRouter} from "@/api/indexTask";
|
||||||
import {message} from "ant-design-vue";
|
import {message} from "ant-design-vue";
|
||||||
import {editTask} from "@/api/indexTaskadd";
|
import {editTask} from "@/api/indexTaskadd";
|
||||||
import {editRoutered} from '@/api/indexLearningPath'
|
|
||||||
import {useRoute} from "vue-router";
|
import {useRoute} from "vue-router";
|
||||||
import UnlockMode from "../../components/drawers/UnlockMode.vue";
|
import UnlockMode from "@/components/drawers/UnlockMode.vue";
|
||||||
import {TASK_TYPE} from "@/utils/const";
|
import {TASK_TYPE} from "@/utils/const";
|
||||||
import Draggable from "vuedraggable";
|
import Draggable from "vuedraggable";
|
||||||
import {ROUTER_DETAIL_MODIFY} from "@/api/apis";
|
import {ROUTER_DETAIL_MODIFY} from "@/api/apis";
|
||||||
@@ -470,15 +452,32 @@ import {request} from "@/api/request";
|
|||||||
|
|
||||||
const {query: {routerId}} = useRoute();
|
const {query: {routerId}} = useRoute();
|
||||||
const modal = ref(false)
|
const modal = ref(false)
|
||||||
const unlockModeModal = ref(false)
|
const visiblene = ref(false)
|
||||||
|
const deleteAll = ref(false)
|
||||||
|
const deleteModal = ref(false)
|
||||||
const deleteChapterModal = ref(false)
|
const deleteChapterModal = ref(false)
|
||||||
const unlockModeVisible = ref(false)
|
|
||||||
const cancleLoading = ref(false)
|
const cancleLoading = ref(false)
|
||||||
const templateLoading = ref(false)
|
const templateLoading = ref(false)
|
||||||
const confirmLoading = ref(false)
|
const confirmLoading = ref(false)
|
||||||
|
const moveChapterIndex = ref('')
|
||||||
const activeIndex = ref(0)
|
const activeIndex = ref(0)
|
||||||
|
const deleteIndex = ref(0)
|
||||||
|
|
||||||
const courseRef = ref({})
|
const courseRef = ref({})
|
||||||
const routerInfo = ref({chapterList: [{name: '关卡一', taskList: []}], routerInfo: {}})
|
const formValue = ref({draftTaskList: []})
|
||||||
|
const routerInfo = ref({chapterList: [{name: '关卡一', draftTaskList: []}], routerInfo: {}})
|
||||||
|
|
||||||
|
|
||||||
|
const selectAll = computed(() => {
|
||||||
|
const selectedNum = routerInfo.value.chapterList[activeIndex.value].draftTaskList.filter(t => t.checked).length
|
||||||
|
if (!selectedNum) {
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
if (selectedNum === routerInfo.value.chapterList[activeIndex.value].draftTaskList.length) {
|
||||||
|
return 1
|
||||||
|
}
|
||||||
|
return 2
|
||||||
|
})
|
||||||
const showModal = () => {
|
const showModal = () => {
|
||||||
modal.value = true;
|
modal.value = true;
|
||||||
};
|
};
|
||||||
@@ -486,20 +485,14 @@ const closeModal = () => {
|
|||||||
modal.value = false;
|
modal.value = false;
|
||||||
};
|
};
|
||||||
|
|
||||||
// 关闭模式弹框
|
|
||||||
const closeUnlockModal = () => {
|
|
||||||
unlockModeModal.value = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
const saveUnlock = (num) => {
|
|
||||||
routerInfo.value.unlockMode = num
|
|
||||||
editRoutered(routerInfo.value)
|
|
||||||
closeUnlockModal()
|
|
||||||
}
|
|
||||||
|
|
||||||
//新建关卡
|
//新建关卡
|
||||||
const editChapter = () => {
|
const editChapter = () => {
|
||||||
// if (!state.value1) return message.warning("请输入关卡名称");
|
if (!formValue.value.name) {
|
||||||
|
return message.warning("请输入关卡名称");
|
||||||
|
}
|
||||||
|
routerInfo.value.chapterList.push({...formValue.value})
|
||||||
|
formValue.value = {draftTaskList: []}
|
||||||
|
closeModal()
|
||||||
};
|
};
|
||||||
//打开删除关卡弹窗
|
//打开删除关卡弹窗
|
||||||
const showDeleteChapter = () => {
|
const showDeleteChapter = () => {
|
||||||
@@ -532,115 +525,49 @@ onUnmounted(() => {
|
|||||||
const changebgc = (index) => {
|
const changebgc = (index) => {
|
||||||
activeIndex.value = index
|
activeIndex.value = index
|
||||||
};
|
};
|
||||||
const showDeleteALLModal = (type) => {
|
const showDeleteALLModal = () => {
|
||||||
console.log(type)
|
if (!routerInfo.value?.chapterList[activeIndex.value]?.draftTaskList?.filter(t => t.checked)?.length) {
|
||||||
// if (state.selectRow.length === 0) {
|
message.warning("请选择要删除的任务!");
|
||||||
// message.warning("请选择要删除的任务");
|
return
|
||||||
// }
|
}
|
||||||
// deleteAll = true;
|
deleteAll.value = true
|
||||||
// deleteType = type;
|
|
||||||
};
|
};
|
||||||
const closedeleteAll = () => {
|
const closedeleteAll = () => {
|
||||||
// state.deleteAll = false;
|
deleteAll.value = false
|
||||||
// state.deleteType = null;
|
|
||||||
};
|
};
|
||||||
const subdeleteAll = () => {
|
const subdeleteAll = () => {
|
||||||
// state.deleteType = null;
|
routerInfo.value.chapterList[activeIndex.value].draftTaskList = routerInfo.value.chapterList[activeIndex.value].draftTaskList.filter(t => !t.checked);
|
||||||
|
closedeleteAll()
|
||||||
};
|
};
|
||||||
const showDeleteModal = (id) => {
|
const showDeleteModal = (_, index) => {
|
||||||
console.log(id)
|
deleteModal.value = true;
|
||||||
// state.deleteID = id;
|
deleteIndex.value = index;
|
||||||
// state.deleteModal = true;
|
|
||||||
};
|
};
|
||||||
const closeConfirm = () => {
|
const closeConfirm = () => {
|
||||||
// state.deleteModal = false;
|
deleteModal.value = false;
|
||||||
// state.deleteID = "";
|
|
||||||
// state.editID = "";
|
|
||||||
};
|
};
|
||||||
|
|
||||||
//选择单个任务
|
function deleteLevelTask() {
|
||||||
const changeRow = (e) => {
|
routerInfo.value.chapterList[activeIndex.value].draftTaskList.splice(deleteIndex.value, 1)
|
||||||
console.log(e)
|
closeConfirm()
|
||||||
//selectRow:已经选择的任务的id数组
|
}
|
||||||
// let arr = state.selectRow;
|
|
||||||
// if (e.target.checked) {
|
|
||||||
// arr.push(e.target.id);
|
|
||||||
// } else {
|
|
||||||
// arr.map((value, index) => {
|
|
||||||
// if (value == e.target.id) {
|
|
||||||
// arr.splice(index, 1);
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
// state.selectRow = arr;
|
|
||||||
// //判断是否是全部选择或者是全部未选择来修改selectAll框的样式
|
|
||||||
// if (arr.length !== 0) {
|
|
||||||
// if (arr.length === state.tableData.length) {
|
|
||||||
// state.selectAll = 1;
|
|
||||||
// } else {
|
|
||||||
// state.selectAll = 2;
|
|
||||||
// }
|
|
||||||
// } else {
|
|
||||||
// state.selectAll = 0;
|
|
||||||
// }
|
|
||||||
// console.log("state.selectRow", state.selectRow, state.selectAll);
|
|
||||||
};
|
|
||||||
//全选任务或全不选任务
|
//全选任务或全不选任务
|
||||||
const selectRowAll = () => {
|
const selectRowAll = () => {
|
||||||
// let arr = state.tableData;
|
if (selectAll.value === 1) {
|
||||||
// let array = [];
|
routerInfo.value.chapterList[activeIndex.value].draftTaskList.forEach(t => t.checked = false)
|
||||||
// if (state.selectAll === 0 || state.selectAll === 2) {
|
return
|
||||||
// arr.map((value) => {
|
}
|
||||||
// // console.log("value", value, index);
|
routerInfo.value.chapterList[activeIndex.value].draftTaskList.forEach(t => t.checked = true)
|
||||||
// value.checked = true;
|
|
||||||
// array.push(value.id);
|
|
||||||
// // if (value == e.target.id) {
|
|
||||||
// // arr.splice(index, 1);
|
|
||||||
// // }
|
|
||||||
// state.selectAll = 1;
|
|
||||||
// });
|
|
||||||
// } else {
|
|
||||||
// array = [];
|
|
||||||
// arr.map((value) => {
|
|
||||||
// // console.log("value", value, index);
|
|
||||||
// value.checked = false;
|
|
||||||
// state.selectAll = 0;
|
|
||||||
// });
|
|
||||||
// }
|
|
||||||
// state.tableData = arr;
|
|
||||||
// state.selectRow = array;
|
|
||||||
};
|
};
|
||||||
//移动任务到关卡
|
//移动任务到关卡
|
||||||
const moveTask = () => {
|
const moveTask = () => {
|
||||||
// if (state.isactive == state.removeStageId) {
|
routerInfo.value.chapterList[moveChapterIndex.value].draftTaskList.push(...routerInfo.value.chapterList[activeIndex.value].draftTaskList.filter(t => t.checked).map((t) => ({
|
||||||
// message.destroy();
|
...t,
|
||||||
// message.warning("选择的任务已在当前关卡");
|
checked: false
|
||||||
// } else if (state.removeStageId == null) {
|
})));
|
||||||
// message.destroy();
|
routerInfo.value.chapterList[activeIndex.value].draftTaskList = routerInfo.value.chapterList[activeIndex.value].draftTaskList.filter(t => !t.checked);
|
||||||
// message.warning("请选择关卡");
|
visiblene.value = false;
|
||||||
// } else {
|
|
||||||
// let obj = {
|
|
||||||
// chapterId: state.removeStageId,
|
|
||||||
// routerTaskIdList: state.selectRow,
|
|
||||||
// };
|
|
||||||
// console.log("移动关卡obj", obj);
|
|
||||||
// api
|
|
||||||
// .moveTask(obj)
|
|
||||||
// .then((res) => {
|
|
||||||
// console.log("移动成功", res);
|
|
||||||
// message.destroy();
|
|
||||||
// message.success("移动成功");
|
|
||||||
// localStorage.setItem("chapterId", state.chooseChapterId);
|
|
||||||
// state.selectRow = []; //选择行
|
|
||||||
// state.selectAll = 0; //0:未选择,1:全选,2:部分选择
|
|
||||||
// getDetail();
|
|
||||||
// })
|
|
||||||
// .catch((err) => {
|
|
||||||
// console.log("移动失败", err);
|
|
||||||
// });
|
|
||||||
// state.visiblene = false;
|
|
||||||
// state.curLevel = null;
|
|
||||||
// }
|
|
||||||
};
|
};
|
||||||
//编辑的按钮
|
//编辑的按钮
|
||||||
const editTaskForType = (ele, index) => {
|
const editTaskForType = (ele, index) => {
|
||||||
@@ -653,25 +580,18 @@ const changeCourseType = (ele) => {
|
|||||||
message.success("修改成功");
|
message.success("修改成功");
|
||||||
};
|
};
|
||||||
const showChangeModal = () => {
|
const showChangeModal = () => {
|
||||||
// if (state.selectRow.length == 0) {
|
if (routerInfo.value?.chapterList?.length <= 1) {
|
||||||
// return message.warning("请选择要移动的任务");
|
message.warning("请添加关卡!");
|
||||||
// } else {
|
return
|
||||||
// state.visiblene = true;
|
}
|
||||||
// }
|
if (!routerInfo.value?.chapterList[activeIndex.value]?.draftTaskList?.filter(t => t.checked)?.length) {
|
||||||
|
message.warning("请选择要移动的任务!");
|
||||||
|
return
|
||||||
|
}
|
||||||
|
visiblene.value = true
|
||||||
};
|
};
|
||||||
const closeChangeModal = () => {
|
const closeChangeModal = () => {
|
||||||
// state.visiblene = false;
|
visiblene.value = false
|
||||||
// state.curLevel = null;
|
|
||||||
};
|
|
||||||
const handleChangeStage = () => {
|
|
||||||
// console.log("阶段改变", value, option);
|
|
||||||
// state.removeStageId = option.chapterId;
|
|
||||||
// state.curLevel = option.name;
|
|
||||||
};
|
|
||||||
|
|
||||||
//显示切换模式抽屉
|
|
||||||
const showModeVisible = () => {
|
|
||||||
unlockModeVisible.value = true;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
//暂存
|
//暂存
|
||||||
|
|||||||
Reference in New Issue
Block a user