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

feat:增加单层项目、单层子项目、班级的编辑。

Browse Source
This commit is contained in:
wuyx
2022-11-04 17:39:38 +08:00
parent f3170ceb5a
commit f774ac5071
6 changed files with 1661 additions and 1220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

221
src/components/OpenPages.vue
View File

@@ -1,40 +1,25 @@
<template>
<div class="openPages">
<draggable
v-model="openList"
chosenClass="chosen"
forceFallback="true"
ghostClass="ghost"
group="openPage"
animation="500"
@start="onStart"
@end="onEnd"
style="display: flex"
>
<template #item="{ element }">
<div style="position: relative">
<router-link
:to="element.href"
class="openItems"
:style="{ background: element.active ? '#f5f7fa' : '' }"
>
<div
:style="{
color: element.active
? 'rgba(64, 158, 255, 1)'
: 'rgba(135, 139, 146, 1)',
}"
>
{{ element.pagename }}
</div>
</router-link>
<div class="close" @click.stop="closePage(element)">
<img src="../assets/images/openPages/close.png" />
</div>
</div>
</template>
</draggable>
</div>
<div class="openPages">
<draggable v-model="openList" chosenClass="chosen" forceFallback="true" ghostClass="ghost" group="openPage"
animation="500" @start="onStart" @end="onEnd" style="display: flex">
<template #item="{ element }">
<div style="position: relative">
<router-link :to="element.href" class="openItems" :style="{ background: element.active ? '#f5f7fa' : '' }">
<div :style="{
color: element.active
? 'rgba(64, 158, 255, 1)'
: 'rgba(135, 139, 146, 1)',
}">
{{ element.pagename }}
</div>
</router-link>
<div class="close" @click.stop="closePage(element)">
<img src="../assets/images/openPages/close.png" />
</div>
</div>
</template>
</draggable>
</div>
</template>
<script>
import { reactive, toRefs } from "vue";
@@ -42,92 +27,96 @@ import { useStore } from "vuex";
import { useRouter } from "vue-router";
import draggable from "vuedraggable";
export default {
name: "OpenPages",
components: {
draggable,
},
setup() {
const store = useStore();
const $router = useRouter();
const state = reactive({
openList: store.state.openpages,
});
name: "OpenPages",
components: {
draggable,
},
setup() {
const store = useStore();
const $router = useRouter();
const state = reactive({
openList: store.state.openpages,
});
const closePage = (value) => {
console.log("点击关闭页面", value, state.openList);
state.openList.map((item, key) => {
if (item.href === value.href) {
if (state.openList.length === 1) {
if (state.openList[0].href !== "/learningpath") {
state.openList.splice(key, 1);
}
$router.push({ path: "/learningpath" });
} else {
if (value.active) {
if (key === state.openList.length - 1) {
$router.push({ path: state.openList[key - 1].href });
} else {
$router.push({ path: state.openList[key + 1].href });
}
}
state.openList.splice(key, 1);
}
}
});
store.commit("chengeOpenpages", state.openList);
};
return {
...toRefs(state),
closePage,
};
},
const closePage = (value) => {
console.log("点击关闭页面", value, state.openList);
state.openList.map((item, key) => {
if (item.href === value.href) {
if (state.openList.length === 1) {
if (state.openList[0].href !== "/learningpath") {
state.openList.splice(key, 1);
}
$router.push({ path: "/learningpath" });
} else {
if (value.active) {
if (key === state.openList.length - 1) {
$router.push({ path: state.openList[key - 1].href });
} else {
$router.push({ path: state.openList[key + 1].href });
}
}
state.openList.splice(key, 1);
}
}
});
store.commit("chengeOpenpages", state.openList);
};
return {
...toRefs(state),
closePage,
};
},
};
</script>
<style lang="scss">
.openPages {
width: 100%;
// height: 50px;
display: flex;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 8px 8px 0px rgba(118, 136, 166, 0.1);
overflow-x: auto;
.openItems {
width: 272px;
// min-width: 250px;
height: 50px;
border: 1px solid #edf2fa;
border-left: 0px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 400;
line-height: 36px;
cursor: pointer;
flex-shrink: 0;
}
.close {
width: 16px;
height: 16px;
border-radius: 8px;
width: 100%;
// height: 50px;
display: flex;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0px 8px 8px 0px rgba(118, 136, 166, 0.1);
overflow-x: auto;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 17px;
right: 27px;
}
.close:hover {
background: rgba(220, 220, 220, 1);
}
.openItems {
width: 272px;
// min-width: 250px;
height: 50px;
border: 1px solid #edf2fa;
border-left: 0px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 400;
line-height: 36px;
cursor: pointer;
flex-shrink: 0;
}
.chosen {
// background-color: pink;
}
.ghost {
// background-color: red;
opacity: 0;
}
.close {
width: 16px;
height: 16px;
border-radius: 8px;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: 17px;
right: 27px;
}
.close:hover {
background: rgba(220, 220, 220, 1);
}
.chosen {
// background-color: pink;
}
.ghost {
// background-color: red;
opacity: 0;
}
}
</style>