fomatte: 代码格式化

This commit is contained in:
lbw 2023-04-04 11:02:25 +08:00
parent bd252e71ea
commit fae8fb4fe5
8 changed files with 244 additions and 246 deletions

View File

@ -66,7 +66,7 @@ export const useGeneratorVFormApi = (dsName: any, tableName: any) => {
}); });
}; };
export const useGeneratorVFormSfcApi = (id:string) => { export const useGeneratorVFormSfcApi = (id: string) => {
return request({ return request({
url: '/gen/generator/vform/sfc', url: '/gen/generator/vform/sfc',
method: 'get', method: 'get',

View File

@ -232,7 +232,7 @@ export function useTable(options?: BasicTableProps) {
textAlign: 'center', textAlign: 'center',
background: 'var(--el-table-row-hover-bg-color)', background: 'var(--el-table-row-hover-bg-color)',
color: 'var(--el-text-color-primary)', color: 'var(--el-text-color-primary)',
} },
}; };
return { return {

View File

@ -1,54 +1,54 @@
<template> <template>
<div class="layout-columns-aside"> <div class="layout-columns-aside">
<el-scrollbar> <el-scrollbar>
<ul @mouseleave="onColumnsAsideMenuMouseleave()"> <ul @mouseleave="onColumnsAsideMenuMouseleave()">
<li <li
v-for="(v, k) in state.columnsAsideList" v-for="(v, k) in state.columnsAsideList"
:key="k" :key="k"
@click="onColumnsAsideMenuClick(v, k)" @click="onColumnsAsideMenuClick(v, k)"
@mouseenter="onColumnsAsideMenuMouseenter(v, k)" @mouseenter="onColumnsAsideMenuMouseenter(v, k)"
:ref=" :ref="
(el) => { (el) => {
if (el) columnsAsideOffsetTopRefs[k] = el; if (el) columnsAsideOffsetTopRefs[k] = el;
} }
" "
:class="{ 'layout-columns-active': state.liIndex === k, 'layout-columns-hover': state.liHoverIndex === k }" :class="{ 'layout-columns-active': state.liIndex === k, 'layout-columns-hover': state.liHoverIndex === k }"
:title="$t(v.name)" :title="$t(v.name)"
> >
<div :class="themeConfig.columnsAsideLayout" v-if="!v.meta.isLink || (v.meta.isLink && v.meta.isIframe)"> <div :class="themeConfig.columnsAsideLayout" v-if="!v.meta.isLink || (v.meta.isLink && v.meta.isIframe)">
<SvgIcon :name="v.meta.icon"/> <SvgIcon :name="v.meta.icon" />
<div class="columns-vertical-title font12"> <div class="columns-vertical-title font12">
{{ {{
$t(v.name) && $t(v.name).length >= 4 $t(v.name) && $t(v.name).length >= 4
? $t(v.name).substr(0, themeConfig.columnsAsideLayout === 'columns-vertical' ? 4 : 3) ? $t(v.name).substr(0, themeConfig.columnsAsideLayout === 'columns-vertical' ? 4 : 3)
: $t(v.name) : $t(v.name)
}} }}
</div> </div>
</div> </div>
<div :class="themeConfig.columnsAsideLayout" v-else> <div :class="themeConfig.columnsAsideLayout" v-else>
<a :href="v.meta.isLink" target="_blank"> <a :href="v.meta.isLink" target="_blank">
<SvgIcon :name="v.meta.icon"/> <SvgIcon :name="v.meta.icon" />
<div class="columns-vertical-title font12"> <div class="columns-vertical-title font12">
{{ {{
$t(v.name) && $t(v.name).length >= 4 $t(v.name) && $t(v.name).length >= 4
? $t(v.name).substr(0, themeConfig.columnsAsideLayout === 'columns-vertical' ? 4 : 3) ? $t(v.name).substr(0, themeConfig.columnsAsideLayout === 'columns-vertical' ? 4 : 3)
: $t(v.name) : $t(v.name)
}} }}
</div> </div>
</a> </a>
</div> </div>
</li> </li>
<div ref="columnsAsideActiveRef" :class="themeConfig.columnsAsideStyle"></div> <div ref="columnsAsideActiveRef" :class="themeConfig.columnsAsideStyle"></div>
</ul> </ul>
</el-scrollbar> </el-scrollbar>
</div> </div>
</template> </template>
<script setup lang="ts" name="layoutColumnsAside"> <script setup lang="ts" name="layoutColumnsAside">
import {RouteRecordRaw} from 'vue-router'; import { RouteRecordRaw } from 'vue-router';
import pinia from '/@/stores/index'; import pinia from '/@/stores/index';
import {useRoutesList} from '/@/stores/routesList'; import { useRoutesList } from '/@/stores/routesList';
import {useThemeConfig} from '/@/stores/themeConfig'; import { useThemeConfig } from '/@/stores/themeConfig';
import mittBus from '/@/utils/mitt'; import mittBus from '/@/utils/mitt';
// //
@ -56,246 +56,245 @@ const columnsAsideOffsetTopRefs = ref<RefType>([]);
const columnsAsideActiveRef = ref(); const columnsAsideActiveRef = ref();
const stores = useRoutesList(); const stores = useRoutesList();
const storesThemeConfig = useThemeConfig(); const storesThemeConfig = useThemeConfig();
const {routesList, isColumnsMenuHover, isColumnsNavHover} = storeToRefs(stores); const { routesList, isColumnsMenuHover, isColumnsNavHover } = storeToRefs(stores);
const {themeConfig} = storeToRefs(storesThemeConfig); const { themeConfig } = storeToRefs(storesThemeConfig);
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
const state = reactive<ColumnsAsideState>({ const state = reactive<ColumnsAsideState>({
columnsAsideList: [], columnsAsideList: [],
liIndex: 0, liIndex: 0,
liOldIndex: null, liOldIndex: null,
liHoverIndex: null, liHoverIndex: null,
liOldPath: null, liOldPath: null,
difference: 0, difference: 0,
routeSplit: [], routeSplit: [],
}); });
// //
const setColumnsAsideMove = (k: number) => { const setColumnsAsideMove = (k: number) => {
state.liIndex = k; state.liIndex = k;
columnsAsideActiveRef.value.style.top = `${columnsAsideOffsetTopRefs.value[k].offsetTop + state.difference}px`; columnsAsideActiveRef.value.style.top = `${columnsAsideOffsetTopRefs.value[k].offsetTop + state.difference}px`;
}; };
// //
const onColumnsAsideMenuClick = (v: RouteItem, k: number) => { const onColumnsAsideMenuClick = (v: RouteItem, k: number) => {
setColumnsAsideMove(k); setColumnsAsideMove(k);
let {path, redirect} = v; let { path, redirect } = v;
if (redirect) router.push(redirect); if (redirect) router.push(redirect);
else router.push(path); else router.push(path);
}; };
// //
const onColumnsAsideMenuMouseenter = (v: RouteRecordRaw, k: number) => { const onColumnsAsideMenuMouseenter = (v: RouteRecordRaw, k: number) => {
if (!themeConfig.value.isColumnsMenuHoverPreload) return false; if (!themeConfig.value.isColumnsMenuHoverPreload) return false;
let {path} = v; let { path } = v;
state.liOldPath = path; state.liOldPath = path;
state.liOldIndex = k; state.liOldIndex = k;
state.liHoverIndex = k; state.liHoverIndex = k;
mittBus.emit('setSendColumnsChildren', setSendChildren(path)); mittBus.emit('setSendColumnsChildren', setSendChildren(path));
stores.setColumnsMenuHover(false); stores.setColumnsMenuHover(false);
stores.setColumnsNavHover(true); stores.setColumnsNavHover(true);
}; };
// //
const onColumnsAsideMenuMouseleave = async () => { const onColumnsAsideMenuMouseleave = async () => {
await stores.setColumnsNavHover(false); await stores.setColumnsNavHover(false);
// store.state.routesList // store.state.routesList
setTimeout(() => { setTimeout(() => {
if (!isColumnsMenuHover && !isColumnsNavHover) mittBus.emit('restoreDefault'); if (!isColumnsMenuHover && !isColumnsNavHover) mittBus.emit('restoreDefault');
}, 100); }, 100);
}; };
// //
const onColumnsAsideDown = (k: number) => { const onColumnsAsideDown = (k: number) => {
nextTick(() => { nextTick(() => {
setColumnsAsideMove(k); setColumnsAsideMove(k);
}); });
}; };
// // // //
const setFilterRoutes = () => { const setFilterRoutes = () => {
state.columnsAsideList = filterRoutesFun(routesList.value); state.columnsAsideList = filterRoutesFun(routesList.value);
const resData: MittMenu = setSendChildren(route.path); const resData: MittMenu = setSendChildren(route.path);
if (Object.keys(resData).length <= 0) return false; if (Object.keys(resData).length <= 0) return false;
onColumnsAsideDown(resData.item?.k); onColumnsAsideDown(resData.item?.k);
mittBus.emit('setSendColumnsChildren', resData); mittBus.emit('setSendColumnsChildren', resData);
}; };
// //
const setSendChildren = (path: string) => { const setSendChildren = (path: string) => {
const parentRoute = searchParent(routesList.value, path) as any; const parentRoute = searchParent(routesList.value, path) as any;
let currentData: MittMenu = {children: []}; let currentData: MittMenu = { children: [] };
state.columnsAsideList.map((v: RouteItem, k: number) => { state.columnsAsideList.map((v: RouteItem, k: number) => {
if (v.path === parentRoute.path) { if (v.path === parentRoute.path) {
v['k'] = k; v['k'] = k;
currentData['item'] = {...v}; currentData['item'] = { ...v };
currentData['children'] = [{...v}]; currentData['children'] = [{ ...v }];
if (v.children) currentData['children'] = v.children; if (v.children) currentData['children'] = v.children;
} }
}); });
return currentData; return currentData;
}; };
// //
const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => { const filterRoutesFun = <T extends RouteItem>(arr: T[]): T[] => {
return arr return arr
.filter((item: T) => !item.meta?.isHide) .filter((item: T) => !item.meta?.isHide)
.map((item: T) => { .map((item: T) => {
item = Object.assign({}, item); item = Object.assign({}, item);
if (item.children) item.children = filterRoutesFun(item.children); if (item.children) item.children = filterRoutesFun(item.children);
return item; return item;
}); });
}; };
// tagsView columnsAsideList // tagsView columnsAsideList
const setColumnsMenuHighlight = (path: string) => { const setColumnsMenuHighlight = (path: string) => {
const parentRoute = searchParent(routesList.value, path) as any; const parentRoute = searchParent(routesList.value, path) as any;
const currentSplitRoute = state.columnsAsideList.find((v: RouteItem) => v.path === parentRoute.path); const currentSplitRoute = state.columnsAsideList.find((v: RouteItem) => v.path === parentRoute.path);
if (!currentSplitRoute) return false; if (!currentSplitRoute) return false;
// //
setTimeout(() => { setTimeout(() => {
onColumnsAsideDown(currentSplitRoute.k); onColumnsAsideDown(currentSplitRoute.k);
}, 0); }, 0);
}; };
// 使 // 使
const searchParent = (routesList: any, path: string) => { const searchParent = (routesList: any, path: string) => {
let route = undefined; let route = undefined;
routesList.forEach((item) => { routesList.forEach((item) => {
if (item.path === path) { if (item.path === path) {
route = item; route = item;
return; return;
} }
if (item.children && searchParent(item.children, path)) { if (item.children && searchParent(item.children, path)) {
route = item; route = item;
return; return;
} }
}); });
return route; return route;
}; };
// //
onMounted(() => { onMounted(() => {
setFilterRoutes(); setFilterRoutes();
// //
mittBus.on('restoreDefault', () => { mittBus.on('restoreDefault', () => {
state.liOldIndex = null; state.liOldIndex = null;
state.liOldPath = null; state.liOldPath = null;
}); });
}); });
// //
onUnmounted(() => { onUnmounted(() => {
mittBus.off('restoreDefault', () => { mittBus.off('restoreDefault', () => {});
});
}); });
// //
onBeforeRouteUpdate((to) => { onBeforeRouteUpdate((to) => {
setColumnsMenuHighlight(to.path); setColumnsMenuHighlight(to.path);
mittBus.emit('setSendColumnsChildren', setSendChildren(to.path)); mittBus.emit('setSendColumnsChildren', setSendChildren(to.path));
}); });
// //
watch( watch(
pinia.state, pinia.state,
(val) => { (val) => {
val.themeConfig.themeConfig.columnsAsideStyle === 'columnsRound' ? (state.difference = 3) : (state.difference = 0); val.themeConfig.themeConfig.columnsAsideStyle === 'columnsRound' ? (state.difference = 3) : (state.difference = 0);
if (!val.routesList.isColumnsMenuHover && !val.routesList.isColumnsNavHover) { if (!val.routesList.isColumnsMenuHover && !val.routesList.isColumnsNavHover) {
state.liHoverIndex = null; state.liHoverIndex = null;
mittBus.emit('setSendColumnsChildren', setSendChildren(route.path)); mittBus.emit('setSendColumnsChildren', setSendChildren(route.path));
} else { } else {
state.liHoverIndex = state.liOldIndex; state.liHoverIndex = state.liOldIndex;
if (!state.liOldPath) return false; if (!state.liOldPath) return false;
mittBus.emit('setSendColumnsChildren', setSendChildren(state.liOldPath)); mittBus.emit('setSendColumnsChildren', setSendChildren(state.liOldPath));
} }
}, },
{ {
deep: true, deep: true,
} }
); );
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.layout-columns-aside { .layout-columns-aside {
width: 70px; width: 70px;
height: 100%; height: 100%;
background: var(--next-bg-columnsMenuBar); background: var(--next-bg-columnsMenuBar);
ul { ul {
position: relative; position: relative;
.layout-columns-active { .layout-columns-active {
color: var(--next-bg-columnsMenuBarColor) !important; color: var(--next-bg-columnsMenuBarColor) !important;
transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
} }
.layout-columns-hover { .layout-columns-hover {
color: var(--el-color-primary); color: var(--el-color-primary);
a { a {
color: var(--el-color-primary); color: var(--el-color-primary);
} }
} }
li { li {
color: var(--next-bg-columnsMenuBarColor); color: var(--next-bg-columnsMenuBarColor);
width: 100%; width: 100%;
height: 50px; height: 50px;
text-align: center; text-align: center;
display: flex; display: flex;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
z-index: 1; z-index: 1;
&:hover { &:hover {
@extend .layout-columns-hover; @extend .layout-columns-hover;
} }
.columns-vertical { .columns-vertical {
margin: auto; margin: auto;
.columns-vertical-title { .columns-vertical-title {
padding-top: 1px; padding-top: 1px;
} }
} }
.columns-horizontal { .columns-horizontal {
display: flex; display: flex;
height: 50px; height: 50px;
width: 100%; width: 100%;
align-items: center; align-items: center;
padding: 0 5px; padding: 0 5px;
i { i {
margin-right: 3px; margin-right: 3px;
} }
a { a {
display: flex; display: flex;
.columns-horizontal-title { .columns-horizontal-title {
padding-top: 1px; padding-top: 1px;
} }
} }
} }
a { a {
text-decoration: none; text-decoration: none;
color: var(--next-bg-columnsMenuBarColor); color: var(--next-bg-columnsMenuBarColor);
} }
} }
.columns-round { .columns-round {
background: var(--el-color-primary); background: var(--el-color-primary);
color: var(--el-color-white); color: var(--el-color-white);
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 2px; top: 2px;
height: 44px; height: 44px;
width: 65px; width: 65px;
transform: translateX(-50%); transform: translateX(-50%);
z-index: 0; z-index: 0;
transition: 0.3s ease-in-out; transition: 0.3s ease-in-out;
border-radius: 5px; border-radius: 5px;
} }
.columns-card { .columns-card {
@extend .columns-round; @extend .columns-round;
top: 0; top: 0;
height: 50px; height: 50px;
width: 100%; width: 100%;
border-radius: 0; border-radius: 0;
} }
} }
} }
</style> </style>

View File

@ -31,7 +31,7 @@
</template> </template>
<script setup lang="ts" name="navMenuHorizontal"> <script setup lang="ts" name="navMenuHorizontal">
import { RouteRecordRaw } from 'vue-router'; import { RouteRecordRaw } from 'vue-router';
import { useRoutesList } from '/@/stores/routesList'; import { useRoutesList } from '/@/stores/routesList';
import { useThemeConfig } from '/@/stores/themeConfig'; import { useThemeConfig } from '/@/stores/themeConfig';
import other from '/@/utils/other'; import other from '/@/utils/other';

View File

@ -1,27 +1,27 @@
export default { export default {
sysuser: { sysuser: {
index: '#', index: '#',
username: '用户名', username: '用户名',
name: '姓名', name: '姓名',
phone: '手机号', phone: '手机号',
post: '岗位', post: '岗位',
role: '角色', role: '角色',
lockFlag: '状态', lockFlag: '状态',
createTime: '创建时间', createTime: '创建时间',
password: '密码', password: '密码',
dept: '部门', dept: '部门',
email: '邮箱', email: '邮箱',
nickname: '昵称', nickname: '昵称',
inputUsernameTip: '请输入用户名', inputUsernameTip: '请输入用户名',
inputPhoneTip: '请输入手机号', inputPhoneTip: '请输入手机号',
inputNameTip: '请输入姓名', inputNameTip: '请输入姓名',
importUserTip: '用户导入', importUserTip: '用户导入',
deleteDisabledTip: 'admin 不允许被删除', deleteDisabledTip: 'admin 不允许被删除',
noDataScopeTip: '没有数据权限' noDataScopeTip: '没有数据权限',
}, },
personal: { personal: {
name: '个人信息', name: '个人信息',
passwordRule: '两次输入密码不一致', passwordRule: '两次输入密码不一致',
passwordScore: '密码等级太低', passwordScore: '密码等级太低',
}, },
}; };

View File

@ -90,7 +90,7 @@ const form = reactive({
name: '', name: '',
url: '', url: '',
username: '', username: '',
password: '' as string || undefined, password: ('' as string) || undefined,
createTime: '', createTime: '',
updateTime: '', updateTime: '',
dsType: '', dsType: '',

View File

@ -119,4 +119,3 @@ const timeCacl = () => {
}, 1000); }, 1000);
}; };
</script> </script>

View File

@ -173,4 +173,4 @@ const handleRegister = async () => {
loading.value = false; loading.value = false;
} }
}; };
</script> </script>