This commit is contained in:
zmj 2024-03-14 10:55:02 +08:00
parent 6dad68647a
commit 77293cd87d
3 changed files with 56 additions and 98 deletions

View File

@ -32,7 +32,7 @@ useWatchRoute((route) => {
menuName.value = route.matched[0]?.meta?.title || ''
if (menuList.length) {
let index = menuList.findIndex(item => item.name == menuName.value)
userStore.getUserInfoByID(menuList[index].id)
userStore.getUserInfoByID(menuList[index]?.id || 173)
}
})

View File

@ -1,27 +1,28 @@
<template>
<div class="flex pl-4 app-tabs bg-body">
<div class="flex-1 min-w-0 menu">
<div v-for="(item, index) in tabsLists" class="tab-pan" :class="{ act: (currentRoute == item.path) }">
<span v-show="currentRoute == item.path" class="dot"></span>
<span @click="handleChanges(item.fullPath)">{{ item.title }}</span>
<el-icon @click="delTab(item.fullPath)">
<Close />
</el-icon>
</div>
<div class="flex">
<div class="menu flex-1 flex flex-wrap px-4">
<div v-for="(item, index) in tabsLists" class="flex py-1 px-5 cursor-pointer mb-2 items-center"
:class="{ act: (currentRoute == item.fullPath) }">
<span v-show="currentRoute == item.fullPath" class="w-1.5 h-1.5 mr-1 bg-primary rounded"></span>
<span @click="handleChanges(item.fullPath)">{{ item.title }}</span>
<el-icon @click="delTab(item.fullPath)">
<Close />
</el-icon>
</div>
</div>
<el-dropdown @command="handleCommand">
<span class="flex items-center px-3">
<icon :size="16" name="el-icon-arrow-down" />
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="closeCurrent">关闭当前</el-dropdown-item>
<el-dropdown-item command="closeOther">关闭其他</el-dropdown-item>
<el-dropdown-item command="closeAll">关闭全部</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<el-dropdown @command="handleCommand">
<span class="flex items-center px-3">
<icon :size="16" name="el-icon-arrow-down" />
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="closeCurrent">关闭当前</el-dropdown-item>
<el-dropdown-item command="closeOther">关闭其他</el-dropdown-item>
<el-dropdown-item command="closeAll">关闭全部</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
<script setup lang="ts">
@ -29,86 +30,55 @@ import useMultipleTabs from "@/hooks/useMultipleTabs";
import { useWatchRoute } from "@/hooks/useWatchRoute";
import useTabsStore, { getRouteParams } from "@/stores/modules/multipleTabs";
const currentRoute = ref("");
const router = useRouter();
const route = useRoute();
const tabsStore = useTabsStore();
const {
removeOtherTab,
addTab,
removeAllTab,
removeTab,
tabsLists,
currentTab,
removeOtherTab,
addTab,
removeAllTab,
removeTab,
tabsLists,
currentTab,
} = useMultipleTabs();
useWatchRoute(() => {
addTab();
useWatchRoute((route) => {
currentRoute.value = route.fullPath;
addTab();
});
const handleChanges = (fullPath: any) => {
const tabItem = tabsStore.tasMap[fullPath];
router.push(getRouteParams(tabItem));
const tabItem = tabsStore.tasMap[fullPath];
router.push(getRouteParams(tabItem));
};
const delTab = (fullPath, index) => {
removeTab(fullPath);
if (fullPath.includes(route.path)) {
handleChanges(tabsLists.value[index].fullPath);
}
const delTab = (fullPath: String) => {
removeTab(fullPath);
};
const currentRoute = ref("");
watch(
() => route.path,
(newCount, oldCount) => {
currentRoute.value = newCount;
},
{
immediate: true,
deep: true,
}
);
const handleCommand = (command: any) => {
switch (command) {
case "closeCurrent":
removeTab();
break;
case "closeOther":
removeOtherTab();
break;
case "closeAll":
removeAllTab();
break;
}
switch (command) {
case "closeCurrent":
removeTab();
break;
case "closeOther":
removeOtherTab();
break;
case "closeAll":
removeAllTab();
break;
}
};
</script>
<style lang="scss" scoped>
.menu {
display: flex;
flex-wrap: wrap;
}
.tab-pan {
padding: 5px 20px;
cursor: pointer;
margin-bottom: 10px;
display: flex;
align-items: center;
}
.act {
background-color: var(--el-color-primary-light-9);
color: var(--el-color-primary)
}
.dot {
display: inline-block;
width: 5px;
height: 5px;
background-color: var(--el-color-primary);
border-radius: 5px;
margin-right: 5px;
background-color: var(--el-color-primary-light-9);
color: var(--el-color-primary)
}
</style>

View File

@ -57,17 +57,6 @@
</el-table-column>
<el-table-column label="执行人" prop="executor" show-overflow-tooltip />
<el-table-column label="行动描述" prop="description" show-overflow-tooltip />
<el-table-column label="附件/现场照片" prop="annex">
<template #default="{ row }">
<div v-if="row.annex && row.annex.length > 0">
<div v-for="item in row.annex">
<el-image style="width:50px;height:50px;z-index: 9999;" :src="item" />
</div>
</div>
<div v-else>暂无附件/现场照片</div>
</template>
</el-table-column>
<el-table-column label="位置" prop="coordinate" show-overflow-tooltip />
<el-table-column label="下次回访日期" prop="next_follow_date" show-overflow-tooltip />
@ -223,4 +212,3 @@ const handledetail = async (data: any) => {
getLists()
</script>