[tag] 实现了一些功能,更改了样式
This commit is contained in:
parent
bc59c1fb2a
commit
2317030f2b
|
|
@ -3,7 +3,7 @@ defineOptions({ name: 'SystemLogo' });
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<icon-local-logo />
|
||||
<!-- <icon-local-logo /> -->
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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: '版本',
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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"),
|
||||
|
|
|
|||
|
|
@ -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: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<div>employee</div>
|
||||
<div>ai</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue