[tag] 实现了一些功能,更改了样式

This commit is contained in:
LYC 2025-04-26 16:01:24 +08:00
parent bc59c1fb2a
commit 2317030f2b
14 changed files with 244 additions and 19 deletions

View File

@ -3,7 +3,7 @@ defineOptions({ name: 'SystemLogo' });
</script>
<template>
<icon-local-logo />
<!-- <icon-local-logo /> -->
</template>
<style scoped></style>

View File

@ -6,9 +6,12 @@ defineOptions({
<template>
<DarkModeContainer class="h-full flex-center">
<!--
<a href="https://github.com/honghuangdc/soybean-admin/blob/main/LICENSE" target="_blank" rel="noopener noreferrer">
Copyright MIT © 2021 Soybean
</a>
</a>
-->
智慧水务后台管理系统 V 0.1.2
</DarkModeContainer>
</template>

View File

@ -25,7 +25,7 @@ defineProps<Props>();
const appStore = useAppStore();
const themeStore = useThemeStore();
const { isFullscreen, toggle } = useFullscreen();
// const { isFullscreen, toggle } = useFullscreen();
</script>
<template>
@ -37,14 +37,14 @@ const { isFullscreen, toggle } = useFullscreen();
<GlobalBreadcrumb v-if="!appStore.isMobile" class="ml-12px" />
</div>
<div class="h-full flex-y-center justify-end">
<FullScreen v-if="!appStore.isMobile" :full="isFullscreen" @click="toggle" />
<LangSwitch :lang="appStore.locale" :lang-options="appStore.localeOptions" @change-lang="appStore.changeLocale" />
<!-- <FullScreen v-if="!appStore.isMobile" :full="isFullscreen" @click="toggle" /> -->
<!-- <LangSwitch :lang="appStore.locale" :lang-options="appStore.localeOptions" @change-lang="appStore.changeLocale" /> -->
<ThemeSchemaSwitch
:theme-schema="themeStore.themeScheme"
:is-dark="themeStore.darkMode"
@switch="themeStore.toggleThemeScheme"
/>
<ThemeButton />
<!-- <ThemeButton /> -->
<UserAvatar />
</div>
</DarkModeContainer>

View File

@ -17,7 +17,7 @@ withDefaults(defineProps<Props>(), {
<template>
<RouterLink to="/" class="w-full flex-center nowrap-hidden">
<!-- <SystemLogo class="text-32px text-primary" /> -->
<SystemLogo class="text-32px text-primary" />
<h2 v-show="showTitle" class="pl-8px text-16px text-primary font-bold transition duration-300 ease-in-out">
{{ $t('system.title') }}
</h2>

View File

@ -250,7 +250,7 @@ const local: App.I18n.Schema = {
},
about: {
title: '关于',
introduction: `SoybeanAdmin 是一个优雅且功能强大的后台管理模板,基于最新的前端技术栈,包括 Vue3, Vite5, TypeScript, Pinia 和 UnoCSS。它内置了丰富的主题配置和组件代码规范严谨实现了自动化的文件路由系统。此外它还采用了基于 ApiFox 的在线Mock数据方案。SoybeanAdmin 为您提供了一站式的后台管理解决方案,无需额外配置,开箱即用。同样是一个快速学习前沿技术的最佳实践。`,
introduction: `智慧水务后台管理系统`,
projectInfo: {
title: '项目信息',
version: '版本',

View File

@ -26,9 +26,18 @@ export function setupLoading() {
})
.join('\n');
const loading = `
// const loading = `
// <div class="fixed-center flex-col" style="${primaryColor}">
// ${logoWithClass}
// <div class="w-56px h-56px my-36px">
// <div class="relative h-full animate-spin">
// ${dot}
// </div>
// </div>
// <h2 class="text-28px font-500 text-#646464">${$t('system.title')}</h2>
// </div>`;
const loading = `
<div class="fixed-center flex-col" style="${primaryColor}">
${logoWithClass}
<div class="w-56px h-56px my-36px">
<div class="relative h-full animate-spin">
${dot}

View File

@ -21,8 +21,9 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
"iframe-page": () => import("@/views/_builtin/iframe-page/[url].vue"),
login: () => import("@/views/_builtin/login/index.vue"),
about: () => import("@/views/about/index.vue"),
ai: () => import("@/views/ai/index.vue"),
department: () => import("@/views/department/index.vue"),
employee: () => import("@/views/employee/index.vue"),
employee_list: () => import("@/views/employee/list/index.vue"),
facility: () => import("@/views/facility/index.vue"),
"function_hide-child_one": () => import("@/views/function/hide-child/one/index.vue"),
"function_hide-child_three": () => import("@/views/function/hide-child/three/index.vue"),

View File

@ -50,6 +50,15 @@ export const generatedRoutes: GeneratedRoute[] = [
order: 10
}
},
{
name: 'ai',
path: '/ai',
component: 'layout.base$view.ai',
meta: {
title: 'ai',
i18nKey: 'route.ai'
}
},
{
name: 'department',
path: '/department',
@ -63,12 +72,23 @@ export const generatedRoutes: GeneratedRoute[] = [
{
name: 'employee',
path: '/employee',
component: 'layout.base$view.employee',
component: 'layout.base',
meta: {
title: 'employee',
i18nKey: 'route.employee',
order: 23
}
},
children: [
{
name: 'employee_list',
path: '/employee/list',
component: 'view.employee_list',
meta: {
title: 'employee_list',
i18nKey: 'route.employee_list'
}
}
]
},
{
name: 'facility',
@ -305,7 +325,8 @@ export const generatedRoutes: GeneratedRoute[] = [
meta: {
title: 'multi-menu',
i18nKey: 'route.multi-menu',
order: 8
order: 8,
hideInMenu: true
},
children: [
{

View File

@ -179,8 +179,10 @@ const routeMap: RouteMap = {
"404": "/404",
"500": "/500",
"about": "/about",
"ai": "/ai",
"department": "/department",
"employee": "/employee",
"employee_list": "/employee/list",
"facility": "/facility",
"function": "/function",
"function_hide-child": "/function/hide-child",

View File

@ -60,7 +60,8 @@ const customRoutes: CustomRoute[] = [
title: 'document',
i18nKey: 'route.document',
order: 2,
icon: 'mdi:file-document-multiple-outline'
icon: 'mdi:file-document-multiple-outline',
hideInMenu: true
},
children: [
{

View File

@ -33,8 +33,10 @@ declare module "@elegant-router/types" {
"404": "/404";
"500": "/500";
"about": "/about";
"ai": "/ai";
"department": "/department";
"employee": "/employee";
"employee_list": "/employee/list";
"facility": "/facility";
"function": "/function";
"function_hide-child": "/function/hide-child";
@ -112,6 +114,7 @@ declare module "@elegant-router/types" {
| "404"
| "500"
| "about"
| "ai"
| "department"
| "employee"
| "facility"
@ -148,8 +151,9 @@ declare module "@elegant-router/types" {
| "iframe-page"
| "login"
| "about"
| "ai"
| "department"
| "employee"
| "employee_list"
| "facility"
| "function_hide-child_one"
| "function_hide-child_three"

View File

@ -39,7 +39,7 @@ const latestBuildTime = BUILD_TIME;
<ACard :title="$t('page.about.title')" :bordered="false" size="small" class="card-wrapper">
<p>{{ $t('page.about.introduction') }}</p>
</ACard>
<ACard :title="$t('page.about.projectInfo.title')" :bordered="false" size="small" class="card-wrapper">
<!-- <ACard :title="$t('page.about.projectInfo.title')" :bordered="false" size="small" class="card-wrapper">
<ADescriptions label-placement="left" bordered size="small" :column="{ xs: 1, sm: 2 }">
<ADescriptionsItem :label="$t('page.about.projectInfo.version')">
<ATag color="blue">{{ pkgJson.version }}</ATag>
@ -72,7 +72,7 @@ const latestBuildTime = BUILD_TIME;
{{ item.version }}
</ADescriptionsItem>
</ADescriptions>
</ACard>
</ACard> -->
</ASpace>
</template>

View File

@ -1,7 +1,7 @@
<script setup lang="ts"></script>
<template>
<div>employee</div>
<div>ai</div>
</template>
<style scoped></style>

View File

@ -0,0 +1,184 @@
<template>
<div class="employee-list">
<a-table
:columns="columns"
:data-source="dataSource"
:loading="loading"
:pagination="pagination"
row-key="employeeId"
@change="handleTableChange"
>
<!-- 自定义渲染列 -->
<template #status="{ text }">
<a-tag :color="getStatusColor(text)">{{ text }}</a-tag>
</template>
<template #enabled="{ text }">
<a-tag :color="text ? 'green' : 'red'">
{{ text ? '启用' : '禁用' }}
</a-tag>
</template>
<template #operation="{ record }">
<a-button type="link" @click="handleEdit(record)">编辑</a-button>
<a-divider type="vertical" />
<a-button type="link" danger @click="handleDelete(record)">删除</a-button>
</template>
</a-table>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { message, Tag as ATag, Divider as ADivider } from 'ant-design-vue';
import axios from 'axios';
import { localStg } from '@/utils/storage';
//
const columns = [
{
title: '员工ID',
dataIndex: 'employeeId',
key: 'employeeId',
width: 100,
},
{
title: '员工编号',
dataIndex: 'employeeNo',
key: 'employeeNo',
width: 120,
},
{
title: '姓名',
dataIndex: 'name',
key: 'name',
width: 120,
},
{
title: '用户名',
dataIndex: 'username',
key: 'username',
width: 120,
},
{
title: '职位',
dataIndex: 'position',
key: 'position',
width: 120,
},
{
title: '部门',
dataIndex: 'department',
key: 'department',
width: 100,
},
{
title: '联系电话',
dataIndex: 'contact_phone',
key: 'contact_phone',
width: 150,
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
slots: { customRender: 'status' },
width: 120,
},
{
title: '是否启用',
dataIndex: 'enabled',
key: 'enabled',
slots: { customRender: 'enabled' },
width: 120,
},
{
title: '操作',
key: 'operation',
slots: { customRender: 'operation' },
width: 150,
},
];
//
const dataSource = ref([]);
//
const loading = ref(false);
//
const pagination = ref({
current: 1,
pageSize: 10,
total: 0,
showSizeChanger: true,
showQuickJumper: true,
showTotal: (total) => `${total}`,
});
//
const getStatusColor = (status) => {
switch (status) {
case 'ACTIVE':
return 'green';
case 'SUSPENDED':
return 'red';
case 'ON_LEAVE':
return 'orange';
default:
return 'gray';
}
};
//
const fetchData = async () => {
loading.value = true;
try {
//
const token = localStg.get('token');
const response = await axios.get('http://localhost:8080/api/employees/allEmployees', {
params: {
page: pagination.value.current,
size: pagination.value.pageSize,
},
headers: {
Authorization: `Bearer ${token}` // Authorization
}
});
if (response.data.success) {
dataSource.value = response.data.data;
pagination.value.total = response.data.data.length; //
} else {
message.error(response.data.errorMsg || '获取数据失败');
}
} catch (error) {
message.error('请求失败: ' + error.message);
} finally {
loading.value = false;
}
};
//
const handleTableChange = (paginationData) => {
pagination.value.current = paginationData.current;
pagination.value.pageSize = paginationData.pageSize;
fetchData();
};
//
const handleEdit = (record) => {
console.log('编辑员工:', record);
message.info(`编辑员工 ID: ${record.employeeId}`);
};
//
const handleDelete = (record) => {
console.log('删除员工:', record);
message.info(`删除员工 ID: ${record.employeeId}`);
};
//
onMounted(() => {
fetchData();
});
</script>
<style scoped>
</style>