yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

reactor：【system 系统管理】area 在 element-plus 和 antd 保持一致

pull/210/head
YunaiV 2025-09-05 23:27:12 +08:00
parent 079dac3969
commit 8d93c843ad
4 changed files with 27 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/web-antd/src/views/system/area/data.ts
View File

@ -34,6 +34,7 @@ export function useGridColumns(): VxeTableGridOptions<SystemAreaApi.Area>['colum
{ {
field: 'id', field: 'id',
title: '地区编码', title: '地区编码',
minWidth: 120,
align: 'left', align: 'left',
fixed: 'left', fixed: 'left',
treeNode: true, treeNode: true,
@ -41,6 +42,7 @@ export function useGridColumns(): VxeTableGridOptions<SystemAreaApi.Area>['colum
{ {
field: 'name', field: 'name',
title: '地区名称', title: '地区名称',
minWidth: 200,
}, },
]; ];
} }

19
apps/web-antd/src/views/system/area/index.vue
View File

@ -2,11 +2,8 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table'; import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui'; import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { Search } from '@vben/icons';
import { Button } from 'ant-design-vue'; import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getAreaTree } from '#/api/system/area'; import { getAreaTree } from '#/api/system/area';
import { useGridColumns } from './data'; import { useGridColumns } from './data';
@ -65,10 +62,16 @@ const [Grid, gridApi] = useVbenVxeGrid({
<FormModal @success="onRefresh" /> <FormModal @success="onRefresh" />
<Grid table-title="地区列表"> <Grid table-title="地区列表">
<template #toolbar-tools> <template #toolbar-tools>
<Button type="primary" @click="handleQueryIp"> <TableAction
<Search class="size-5" /> :actions="[
IP 查询 {
</Button> label: 'IP 查询',
type: 'primary',
icon: ACTION_ICON.SEARCH,
onClick: handleQueryIp,
},
]"
/>
</template> </template>
</Grid> </Grid>
</Page> </Page>

4
apps/web-ele/src/views/system/area/data.ts
View File

@ -2,6 +2,8 @@ import type { VbenFormSchema } from '#/adapter/form';
import type { VxeTableGridOptions } from '#/adapter/vxe-table'; import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { SystemAreaApi } from '#/api/system/area'; import type { SystemAreaApi } from '#/api/system/area';
import { z } from '#/adapter/form';
/** 查询 IP 的表单 */ /** 查询 IP 的表单 */
export function useFormSchema(): VbenFormSchema[] { export function useFormSchema(): VbenFormSchema[] {
return [ return [
@ -12,7 +14,7 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: { componentProps: {
placeholder: '请输入 IP 地址', placeholder: '请输入 IP 地址',
}, },
rules: 'required', rules: z.string().ip({ message: '请输入正确的 IP 地址' }),
}, },
{ {
fieldName: 'result', fieldName: 'result',

19
apps/web-ele/src/views/system/area/index.vue
View File

@ -2,11 +2,8 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table'; import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { DocAlert, Page, useVbenModal } from '@vben/common-ui'; import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
import { Search } from '@vben/icons';
import { ElButton } from 'element-plus'; import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { getAreaTree } from '#/api/system/area'; import { getAreaTree } from '#/api/system/area';
import { useGridColumns } from './data'; import { useGridColumns } from './data';
@ -65,10 +62,16 @@ const [Grid, gridApi] = useVbenVxeGrid({
<FormModal @success="onRefresh" /> <FormModal @success="onRefresh" />
<Grid table-title="地区列表"> <Grid table-title="地区列表">
<template #toolbar-tools> <template #toolbar-tools>
<ElButton type="primary" @click="onQueryIp"> <TableAction
<Search class="mr-2 size-5" /> :actions="[
IP 查询 {
</ElButton> label: 'IP 查询',
type: 'primary',
icon: ACTION_ICON.SEARCH,
onClick: onQueryIp,
},
]"
/>
</template> </template>
</Grid> </Grid>
</Page> </Page>