优化代码

This commit is contained in:
lbw 2023-03-28 16:00:02 +08:00
parent b03696ad78
commit eb41ccb3e2
14 changed files with 226 additions and 200 deletions

16
package-lock.json generated
View File

@ -12,8 +12,8 @@
"@chenfengyuan/vue-qrcode": "^2.0.0", "@chenfengyuan/vue-qrcode": "^2.0.0",
"@element-plus/icons-vue": "^2.0.10", "@element-plus/icons-vue": "^2.0.10",
"@highlightjs/vue-plugin": "^2.1.0", "@highlightjs/vue-plugin": "^2.1.0",
"@wangeditor/editor": "^5.1.23", "@wangeditor/editor": "5.1.23",
"@wangeditor/editor-for-vue": "^5.1.12", "@wangeditor/editor-for-vue": "5.1.12",
"axios": "^1.3.3", "axios": "^1.3.3",
"crypto-js": "^3.1.9-1", "crypto-js": "^3.1.9-1",
"echarts": "^5.4.1", "echarts": "^5.4.1",
@ -28,6 +28,7 @@
"qs": "^6.11.0", "qs": "^6.11.0",
"screenfull": "^6.0.2", "screenfull": "^6.0.2",
"sortablejs": "^1.15.0", "sortablejs": "^1.15.0",
"splitpanes": "^3.1.5",
"vue": "^3.2.47", "vue": "^3.2.47",
"vue-clipboard3": "^2.0.0", "vue-clipboard3": "^2.0.0",
"vue-i18n": "^9.2.2", "vue-i18n": "^9.2.2",
@ -3707,6 +3708,12 @@
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==", "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/splitpanes": {
"version": "3.1.5",
"resolved": "https://registry.npmmirror.com/splitpanes/-/splitpanes-3.1.5.tgz",
"integrity": "sha512-r3Mq2ITFQ5a2VXLOy4/Sb2Ptp7OfEO8YIbhVJqJXoFc9hc5nTXXkCvtVDjIGbvC0vdE7tse+xTM9BMjsszP6bw==",
"license": "MIT"
},
"node_modules/ssr-window": { "node_modules/ssr-window": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-3.0.0.tgz", "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-3.0.0.tgz",
@ -7183,6 +7190,11 @@
"resolved": "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz", "resolved": "https://registry.npmmirror.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==" "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
}, },
"splitpanes": {
"version": "3.1.5",
"resolved": "https://registry.npmmirror.com/splitpanes/-/splitpanes-3.1.5.tgz",
"integrity": "sha512-r3Mq2ITFQ5a2VXLOy4/Sb2Ptp7OfEO8YIbhVJqJXoFc9hc5nTXXkCvtVDjIGbvC0vdE7tse+xTM9BMjsszP6bw=="
},
"ssr-window": { "ssr-window": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-3.0.0.tgz", "resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-3.0.0.tgz",

View File

@ -14,7 +14,6 @@
"@chenfengyuan/vue-qrcode": "^2.0.0", "@chenfengyuan/vue-qrcode": "^2.0.0",
"@element-plus/icons-vue": "^2.0.10", "@element-plus/icons-vue": "^2.0.10",
"@highlightjs/vue-plugin": "^2.1.0", "@highlightjs/vue-plugin": "^2.1.0",
"@wangeditor/editor": "5.1.23",
"@wangeditor/editor-for-vue": "5.1.12", "@wangeditor/editor-for-vue": "5.1.12",
"axios": "^1.3.3", "axios": "^1.3.3",
"crypto-js": "^3.1.9-1", "crypto-js": "^3.1.9-1",
@ -30,6 +29,7 @@
"qs": "^6.11.0", "qs": "^6.11.0",
"screenfull": "^6.0.2", "screenfull": "^6.0.2",
"sortablejs": "^1.15.0", "sortablejs": "^1.15.0",
"splitpanes": "^3.1.5",
"vue": "^3.2.47", "vue": "^3.2.47",
"vue-clipboard3": "^2.0.0", "vue-clipboard3": "^2.0.0",
"vue-i18n": "^9.2.2", "vue-i18n": "^9.2.2",

View File

@ -0,0 +1,88 @@
<template>
<div class="container">
<el-tag :color="randomColor()" class="container-tag">
<SvgIcon :name="props.icon" />
</el-tag>
<span class="container-span">{{ $t(props.label) }}</span>
</div>
</template>
<script setup name="shortcut">
const props = defineProps({
icon: {
type: String,
default: () => 'menu-outlined',
required: false,
},
label: {
type: String,
default: () => '快捷方式',
required: false,
},
color: {
type: String,
default: () => '',
required: false,
},
});
//
const colorList = ['#7265E6', '#FFBF00', '#00A2AE', '#F56A00', '#1890FF', '#606D80'];
//
const randomColor = () => {
if (props.color) {
return props.color;
}
return colorList[randomNum(0, colorList.length - 1)];
};
// minNummaxNum
const randomNum = (minNum, maxNum) => {
switch (arguments.length) {
case 1:
return parseInt(Math.random() * minNum + 1, 10);
// eslint-disable-next-line no-unreachable
break;
case 2:
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
// eslint-disable-next-line no-unreachable
break;
default:
return 0;
// eslint-disable-next-line no-unreachable
break;
}
};
</script>
<style scoped>
.container {
height: 60px;
/*border:1px solid var(--border-color-split);*/
border-radius: 5px;
display: flex;
align-items: center;
cursor: pointer;
/*实现渐变(时间变化效果)*/
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.container:hover {
background: var(--border-color-split);
}
.container-tag {
width: 42px;
height: 42px;
border-radius: 10px;
display: flex;
align-items: center;
margin-left: 10px;
font-size: 24px;
}
.container-span {
max-width: 60%;
font-weight: 500;
}
</style>

View File

@ -47,7 +47,7 @@ export const useUserInfo = defineStore('userInfo', {
resolve(res); resolve(res);
}) })
.catch((err) => { .catch((err) => {
useMessage().error(err.msg); useMessage().error('服务器异常,请联系管理员');
reject(err); reject(err);
}); });
}); });

View File

@ -40,13 +40,7 @@
></right-toolbar> ></right-toolbar>
</div> </div>
</el-row> </el-row>
<el-table <el-table :data="state.dataList" @selection-change="handleSelectionChange" @sort-change="sortChangeHandle" v-loading="state.loading">
:data="state.dataList"
@selection-change="handleSelectionChange"
@sort-change="sortChangeHandle"
style="width: 100%"
v-loading="state.loading"
>
<el-table-column align="center" type="selection" width="50" /> <el-table-column align="center" type="selection" width="50" />
<el-table-column :label="$t('syslog.index')" type="index" width="80" /> <el-table-column :label="$t('syslog.index')" type="index" width="80" />
<el-table-column :label="$t('syslog.logType')" show-overflow-tooltip> <el-table-column :label="$t('syslog.logType')" show-overflow-tooltip>

View File

@ -149,18 +149,21 @@ const onSubmit = async () => {
} }
}; };
// /**
const getTenantData = (id: string) => { * 初始化表格数据
// * @param {string} id - 部门 ID
getObj(id).then((res: any) => { */
const getTenantData = async (id) => {
const res = await getObj(id);
Object.assign(form, res.data); Object.assign(form, res.data);
});
}; };
const getMenuList = () => { /**
menuList().then((res: any) => { * 获取菜单列表数据
*/
const getMenuList = async () => {
const res = await menuList();
menuData.value = res.data; menuData.value = res.data;
});
}; };
// //

View File

@ -20,7 +20,6 @@
show-checkbox show-checkbox
ref="menuTreeRef" ref="menuTreeRef"
:check-strictly="false" :check-strictly="false"
v-loading="treeLoading"
:data="menuData" :data="menuData"
:props="defaultProps" :props="defaultProps"
:default-checked-keys="checkedMenu" :default-checked-keys="checkedMenu"
@ -117,6 +116,8 @@ const onSubmit = async () => {
if (!valid) return false; if (!valid) return false;
try { try {
//
form.menuIds = [...menuTreeRef.value.getCheckedKeys(), ...menuTreeRef.value.getHalfCheckedKeys()].join(',');
form.id ? await putObj(form) : await addObj(form); form.id ? await putObj(form) : await addObj(form);
useMessage().success(t(form.id ? 'common.editSuccessText' : 'common.addSuccessText')); useMessage().success(t(form.id ? 'common.editSuccessText' : 'common.addSuccessText'));
visible.value = false; visible.value = false;
@ -126,25 +127,22 @@ const onSubmit = async () => {
} }
}; };
const treeLoading = ref(false); /**
const getMenuData = () => { * 获取菜单数据
treeLoading.value = true; */
treemenu().then((res) => { const getMenuData = async () => {
const res = await treemenu();
menuData.value = res.data; menuData.value = res.data;
if (form.menuIds) { checkedMenu.value = form.menuIds ? other.resolveAllEunuchNodeId(menuData.value, form.menuIds.split(','), []) : [];
checkedMenu.value = other.resolveAllEunuchNodeId(menuData.value, form.menuIds.split(','), []);
} else {
checkedMenu.value = [];
}
treeLoading.value = false;
});
}; };
const getTenantMenuData = (id: string) => { /**
// * 获取部门下的菜单数据
getObj(id).then((res: any) => { * @param {string} id - 部门 ID
*/
const getTenantMenuData = async (id: string) => {
const res = await getObj(id);
Object.assign(form, res.data[0]); Object.assign(form, res.data[0]);
});
}; };
// //

View File

@ -53,7 +53,10 @@ const state: BasicTableProps = reactive<BasicTableProps>({
}); });
const { getDataList, currentChangeHandle, sizeChangeHandle } = useTable(state); const { getDataList, currentChangeHandle, sizeChangeHandle } = useTable(state);
/**
* 处理删除事件
* @param {Object} row - 要删除的数据行对象
*/
const handleDelete = async (row: any) => { const handleDelete = async (row: any) => {
try { try {
await useMessageBox().confirm(t('common.delConfirmText')); await useMessageBox().confirm(t('common.delConfirmText'));

View File

@ -1,16 +1,18 @@
<template> <template>
<el-row> <el-card style="height: 100%">
<el-skeleton animated :loading="loading"> <div style="display: flex; justify-content: space-between">
<el-col :span="4"> <div style="display: flex">
<el-avatar shape="circle" :size="100" fit="cover" :src="userData.avatar" /> <el-avatar style="width: 60px; height: 60px" shape="circle" :size="100" fit="cover" :src="userData.avatar" />
</el-col> <div class="snowy-index-card-left-one-username">
<el-col :span="2"> <span style="font-weight: 600; margin: 2px; font-size: 18px">{{ userData.name }}</span>
<div>{{ userData.name }}</div> <span style="color: #6d737b; margin: 2px">{{ userData.deptName }} | {{ userData.postName }}</span>
<div>{{ userData.deptName }} | {{ userData.postName }}</div> </div>
</el-col> </div>
<el-col :span="4" :offset="14"> {{ parseTime(date) }} </el-col> <span style="margin: 2px">
</el-skeleton> {{ parseTime(date) }}
</el-row> </span>
</div>
</el-card>
</template> </template>
<script setup lang="ts" name="SysFavoriteDashboard"> <script setup lang="ts" name="SysFavoriteDashboard">
@ -43,7 +45,7 @@ onMounted(() => {
* @param {any} userId - 要查询的用户 ID * @param {any} userId - 要查询的用户 ID
* @returns {Promise<void>} - 初始化用户信息的 Promise 实例 * @returns {Promise<void>} - 初始化用户信息的 Promise 实例
*/ */
const initUserInfo = async (userId: any): Promise<void> => { const initUserInfo = async (userId: any): Promise<void> => {
try { try {
loading.value = true; // loading.value = true; //
@ -54,5 +56,13 @@ onMounted(() => {
loading.value = false; // loading.value = false; //
} }
}; };
</script> </script>
<style scoped>
.snowy-index-card-left-one-username {
margin-left: 8px;
display: flex;
flex-direction: column;
justify-content: center;
}
</style>

View File

@ -1,30 +1,30 @@
<template> <template>
<div class="home-card-item-title">{{ $t('home.quickNavigationToolsTip') }}</div> <el-card class="box-card" style="height: 100%">
<div class="home-monitor"> <template #header>
<div class="flex-warp" v-if="favoriteRoutes.length > 0"> <div class="card-header">
<div class="flex-warp-item" v-for="(v, k) in favoriteRoutes" :key="k"> <span>{{ $t('home.quickNavigationToolsTip') }}</span>
<div class="flex-warp-item-box">
<div class="flex-margin">
<i :class="v.meta.icon"></i>
<el-tag :key="v.path" @click="HandleRoute(v)" class="mx-1" closable @close="handleCloseFavorite(v)">{{ $t(v.name) }}</el-tag>
</div>
</div>
</div>
</div> </div>
</template>
<el-row :gutter="10" v-if="favoriteRoutes.length > 0">
<el-col :span="6" :key="shortcut.id" v-for="shortcut in favoriteRoutes">
<shortcutCard :icon="shortcut.meta?.icon" :label="shortcut.name" @click="handleRoute(shortcut.path)" />
</el-col>
</el-row>
<el-empty :description="$t('home.addFavoriteRoutesTip')" v-else /> <el-empty :description="$t('home.addFavoriteRoutesTip')" v-else />
</div> </el-card>
</template> </template>
<script setup lang="ts" name="SysFavoriteDashboard"> <script setup lang="ts" name="SysFavoriteDashboard">
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes'; import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
import shortcutCard from '/@/components/ShortcutCard/index.vue';
const router = useRouter(); const router = useRouter();
const storesTagsViewRoutes = useTagsViewRoutes(); const storesTagsViewRoutes = useTagsViewRoutes();
const { favoriteRoutes } = storeToRefs(storesTagsViewRoutes); const { favoriteRoutes } = storeToRefs(storesTagsViewRoutes);
const HandleRoute = (item: any) => { const handleRoute = (path: string) => {
router.push(item.path); router.push(path);
}; };
const handleCloseFavorite = (item: any) => { const handleCloseFavorite = (item: any) => {

View File

@ -1,132 +1,50 @@
<template> <template>
<div class="home-container layout-pd"> <div class="layout-padding">
<el-row :gutter="10"> <div class="layout-padding-auto layout-padding-view">
<el-col :span="16"> <splitpanes horizontal class="default-theme">
<el-row :gutter="10"> <pane size="60">
<!-- 基本信息 --> <splitpanes>
<el-col :span="24"> <pane size="67">
<div class="home-card-item"> <splitpanes horizontal>
<pane size="30">
<current-user /> <current-user />
</div> </pane>
</el-col> <pane size="70">
<!-- 快捷导航栏 -->
<el-col :span="24">
<div class="home-card-item">
<favorite /> <favorite />
</div> </pane>
</el-col> </splitpanes>
<!-- 系统日志 --> </pane>
<el-col :span="12"> <pane size="33">
<sys-log />
</el-col>
<!-- 审计日志 -->
<el-col :span="12">
<audit-log />
</el-col>
</el-row>
</el-col>
<el-col :span="8">
<el-row>
<!-- 日程 -->
<el-col :span="24">
<el-card class="box-card">
<schedule-calendar /> <schedule-calendar />
</el-card> </pane>
</el-col> </splitpanes>
<!-- 收件箱 --> </pane>
<el-col :span="24"> <pane size="40">
<splitpanes>
<pane>
<sys-log />
</pane>
<pane>
<audit-log />
</pane>
<pane>
<news-letter /> <news-letter />
</el-col> </pane>
</el-row> </splitpanes>
</el-col> </pane>
</el-row> </splitpanes>
</div>
</div> </div>
</template> </template>
<script setup lang="ts" name="home"> <script setup lang="ts" name="home">
const Favorite = defineAsyncComponent(() => import('./favorite.vue')); import { Splitpanes, Pane } from 'splitpanes';
import 'splitpanes/dist/splitpanes.css';
const CurrentUser = defineAsyncComponent(() => import('./current-user.vue')); const CurrentUser = defineAsyncComponent(() => import('./current-user.vue'));
const NewsLetter = defineAsyncComponent(() => import('./newsletter.vue')); const Favorite = defineAsyncComponent(() => import('./favorite.vue'));
const ScheduleCalendar = defineAsyncComponent(() => import('./schedule/calendar.vue')); const ScheduleCalendar = defineAsyncComponent(() => import('./schedule/calendar.vue'));
const SysLog = defineAsyncComponent(() => import('./log-dashboard/sys-log.vue')); const SysLog = defineAsyncComponent(() => import('./log-dashboard/sys-log.vue'));
const AuditLog = defineAsyncComponent(() => import('./log-dashboard/audit-log.vue')); const AuditLog = defineAsyncComponent(() => import('./log-dashboard/audit-log.vue'));
const NewsLetter = defineAsyncComponent(() => import('./newsletter.vue'));
</script> </script>
<style scoped lang="scss">
.el-col {
margin-bottom: 10px;
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.box-card {
width: 100%;
}
}
.home-container {
overflow: hidden;
.home-card-item {
width: 100%;
min-height: 130px;
border-radius: 4px;
transition: all ease 0.3s;
padding: 20px;
overflow: hidden;
background: var(--el-color-white);
color: var(--el-text-color-primary);
border: 1px solid var(--next-border-color-light);
.flex-warp-item-box {
margin: auto;
text-align: center;
color: var(--el-text-color-primary);
display: flex;
border-radius: 5px;
background: var(--next-bg-color);
cursor: pointer;
transition: all 0.3s ease;
&:hover {
background: var(--el-color-primary-light-9);
transition: all 0.3s ease;
}
}
&:hover {
box-shadow: 0 2px 12px var(--next-color-dark-hover);
transition: all ease 0.3s;
}
&-icon {
width: 70px;
height: 70px;
border-radius: 100%;
flex-shrink: 1;
i {
color: var(--el-text-color-placeholder);
}
}
&-title {
font-size: 15px;
font-weight: bold;
height: 30px;
}
.flex-warp-item {
width: 15%;
height: 56px;
}
}
}
</style>

View File

@ -1,5 +1,5 @@
<template> <template>
<el-card class="box-card"> <el-card class="box-card" style="height: 100%">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<span>{{ $t('home.auditLogsTip') }}</span> <span>{{ $t('home.auditLogsTip') }}</span>

View File

@ -1,5 +1,5 @@
<template> <template>
<el-card class="box-card"> <el-card class="box-card" style="height: 100%">
<template #header> <template #header>
<div class="card-header"> <div class="card-header">
<span>{{ $t('home.systemLogsTip') }}</span> <span>{{ $t('home.systemLogsTip') }}</span>

View File

@ -1,7 +1,7 @@
<template> <template>
<el-calendar v-model="calendar"> <el-calendar v-model="calendar">
<template #date-cell="{ data }"> <template #date-cell="{ data }">
<div style="width: 100%; height: 100%" @click="handleSchedule(data)"> <div style="width: 100%; height: 80%" @click="handleSchedule(data)">
{{ data.day.split('-').slice(2).join('-') }} {{ data.day.split('-').slice(2).join('-') }}
<span v-if="filterCellSelected(data)"> <span v-if="filterCellSelected(data)">
<el-icon><BellFilled /></el-icon> <el-icon><BellFilled /></el-icon>