Skip to content

Commit 535f30e

Browse files
JS-bananaJS-banana
committed
refactor: 升级[email protected]=> 3.2.7
1 parent b209187 commit 535f30e

File tree

12 files changed

+306
-159
lines changed

12 files changed

+306
-159
lines changed

‎README.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -90,12 +90,15 @@
9090
- 2022.05.07
9191
- 添加路由动效`transition`，优化用户体验，并抽离封装`Breadcrumb`组件
9292
- 添加权限指令`v-role`，调整权限逻辑，`Table`相关组件有所改动（配合该篇文章食用[多级别权限设计思考及实战](https://ssscode.com/pages/ff7971/)）
93+
- 2022.06.21
94+
- `ant-design-vue`升级到`3.x`版本
95+
- `dayjs`替换`moment`
9396

9497
## 计划
9598

9699
- [ ] 主题换肤功能
97100
- [ ] 引入 `tailwindcss`
98-
- [ ] `ant-design-vue` 升级到 3.x版本
101+
- [x] `ant-design-vue` 升级到 3.x版本
99102

100103
## 感谢star
101104

‎package.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -45,10 +45,11 @@
4545
"@ant-design/icons-vue": "^6.0.1",
4646
"@vueuse/core": "^6.8.0",
4747
"@vueuse/head": "^0.6.0",
48-
"ant-design-vue": "2.2.8",
48+
"ant-design-vue": "^3.2.7",
4949
"axios": "^0.24.0",
5050
"buffer": "^6.0.3",
5151
"crypto-js": "^4.1.1",
52+
"dayjs": "^1.11.3",
5253
"echarts": "^5.2.2",
5354
"lodash-es": "^4.17.21",
5455
"moment": "^2.29.1",

‎pnpm-lock.yaml

+178-115
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.vue

+7-3
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,13 @@
1212
// date-picker 国际化失效问题
1313
// 引入dist下的文件：import 'moment/dist/locale/zh-cn'
1414
// 确保 moment版本一致
15-
import moment from 'moment';
16-
import 'moment/dist/locale/zh-cn';
17-
moment.locale('zh_CN');
15+
// import moment from 'moment';
16+
// import 'moment/dist/locale/zh-cn';
17+
// moment.locale('zh_CN');
18+
19+
import dayjs from 'dayjs';
20+
import 'dayjs/locale/zh-cn';
21+
dayjs.locale('zh-cn');
1822
1923
useTitle();
2024

‎src/components/Table/index.vue

+36-28
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<!-- table -->
1313
<a-table
1414
:class="['ant-table-striped', { border: hasBordered }]"
15-
:rowClassName="(_, index) => (index % 2 === 1 ? 'table-striped' : null)"
15+
:rowClassName="(_, index) => (index % 2 === 1 ? 'table-striped' : '')"
1616
:dataSource="dataSource"
1717
:columns="columns"
1818
:rowKey="(record) => record.id"
@@ -25,41 +25,45 @@
2525
<!-- <template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
2626
<slot :name="item" v-bind="data || {}"></slot>
2727
</template> -->
28-
<template #toDate="{ text }">
29-
<span>{{ text ? formatDate(text) : '-' }}</span>
30-
</template>
31-
<template #toDateTime="{ text }">
32-
<span>{{ text ? formatDate(text, 'time') : '-' }}</span>
33-
</template>
34-
<!-- 函数式写法自定义 操作列 -->
35-
<template #action="{ record }">
36-
<template v-for="(action, index) in getActions" :key="`${index}-${action.label}`">
37-
<!-- 气泡确认框 -->
38-
<a-popconfirm
39-
v-if="action.enable"
40-
:title="action?.title"
41-
@confirm="action?.onConfirm(record)"
42-
@cancel="action?.onCancel(record)"
43-
>
44-
<a @click.prevent="() => {}" :type="action.type">{{ action.label }}</a>
45-
</a-popconfirm>
46-
<span v-else-if="!action.permission">——</span>
47-
<!-- 按钮 -->
48-
<a v-else @click="action?.onClick(record)" :type="action.type">{{ action.label }}</a>
49-
<!-- 分割线 -->
50-
<a-divider type="vertical" v-if="index < getActions.length - 1" />
28+
<template #bodyCell="{ column, text, record }">
29+
<template v-if="column.slots?.customRender === 'toDate'">
30+
<span>{{ text ? formatDate(text) : '-' }}</span>
31+
</template>
32+
<template v-if="column.slots?.customRender === 'toDateTime'">
33+
<span>{{ text ? formatDate(text, 'time') : '-' }}</span>
34+
</template>
35+
<!-- 函数式写法自定义 操作列 -->
36+
<template v-if="column.slots?.customRender === 'action'">
37+
<template v-for="(action, index) in getActions" :key="`${index}-${action.label}`">
38+
<!-- 气泡确认框 -->
39+
<a-popconfirm
40+
v-if="action.enable"
41+
:title="action?.title"
42+
@confirm="action?.onConfirm(record)"
43+
@cancel="action?.onCancel(record)"
44+
>
45+
<a @click.prevent="() => {}" :type="action.type">{{ action.label }}</a>
46+
</a-popconfirm>
47+
<span v-else-if="!action.permission">——</span>
48+
<!-- 按钮 -->
49+
<a v-else @click="action?.onClick(record)" :type="action.type">{{ action.label }}</a>
50+
<!-- 分割线 -->
51+
<a-divider type="vertical" v-if="index < getActions.length - 1" />
52+
</template>
5153
</template>
5254
</template>
5355
</a-table>
5456
</div>
5557
</template>
5658
<script lang="ts">
57-
import { TableStateFilters } from 'ant-design-vue/es/table/interface';
58-
import moment from 'moment';
59+
import { FilterValue } from 'ant-design-vue/es/table/interface';
60+
// import moment from 'moment';
61+
import dayjs from 'dayjs';
5962
import { usePagination } from 'vue-request';
6063
import { formatToDate, formatToDateTime } from '/@/utils/dateUtil';
6164
import { usePermission } from '/@/hooks/usePermission';
6265
import { useRole } from '/@/hooks/useRole';
66+
import { TablePaginationConfig } from 'ant-design-vue/lib/table/interface';
6367
6468
// const req = () => new Promise((resolve) => resolve({ total: 0, list: [] }));
6569
@@ -111,7 +115,11 @@
111115
showTotal: () => h('span', {}, `共 ${total.value} 条`),
112116
}));
113117
114-
const handleTableChange = (pag, filters: TableStateFilters, sorter: any) => {
118+
const handleTableChange = (
119+
pag: TablePaginationConfig,
120+
filters: Record<string, FilterValue | null>,
121+
sorter: any,
122+
) => {
115123
run({
116124
limit: pag!.pageSize!,
117125
page: pag?.current,
@@ -149,7 +157,7 @@
149157
// 日期格式处理
150158
if (args) {
151159
Object.keys(args).map((key) => {
152-
if (args[key] && moment.isMoment(args[key])) {
160+
if (args[key] && dayjs.isDayjs(args[key])) {
153161
args[key] = formatToDate(args[key]);
154162
}
155163
});

‎src/layouts/BasicLayout/components/RightContent.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="sys-setting">
3-
<a-dropdown placement="bottomCenter">
3+
<a-dropdown placement="bottom">
44
<template #overlay>
55
<a-menu :selectedKeys="selectedKeys" class="menu-box">
66
<a-menu-item v-for="item in navs" :key="item.path" @click="handleRoute(item?.path)">

‎src/layouts/BasicLayout/components/constant.ts

+2
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,11 @@ export const navs = [
2121
icon: 'zhanghaozhongxin',
2222
name: '账号中心',
2323
path: '/sys/account',
24+
auth: '',
2425
},
2526
{
2627
icon: 'tuichudenglu_huaban1fuben17',
2728
name: '退出登录',
29+
auth: '',
2830
},
2931
];

‎src/main.ts

+4
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { router } from './router';
1010
import { store } from './store';
1111
import { setupGlobDirectives } from './directives';
1212
import './router/permission';
13+
// import { setupComponents } from './plugin';
1314

1415
const app = createApp(App);
1516

@@ -20,6 +21,9 @@ app.use(router);
2021
// Register global directive
2122
setupGlobDirectives(app);
2223

24+
// Register UI components
25+
// setupComponents(app);
26+
2327
// 全局属性
2428
// app.config.globalProperties.AuthEnum = AuthEnum;
2529

‎src/plugin.ts

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
/**
2+
* 手动引入组件注册
3+
* 如果在意unplugin-vue-components插件的自动引入性能问题，可以考虑该方式
4+
*/
5+
import {
6+
Alert,
7+
Avatar,
8+
Breadcrumb,
9+
Button,
10+
Card,
11+
Col,
12+
DatePicker,
13+
Divider,
14+
Dropdown,
15+
Form,
16+
Input,
17+
Layout,
18+
Menu,
19+
Popconfirm,
20+
Row,
21+
Select,
22+
Space,
23+
Spin,
24+
Table as AntdTable,
25+
} from 'ant-design-vue';
26+
27+
import type { App } from 'vue';
28+
29+
import Icon from '/@/components/Icon/index.vue';
30+
import Modal from '/@/components/Modal/index.vue';
31+
import Table from '/@/components/Table/index.vue';
32+
import TableFilter from '/@/components/TableFilter/index.vue';
33+
import Upload from '/@/components/Upload/index.vue';
34+
35+
export function setupComponents(app: App<Element>) {
36+
app.component('Icon', Icon);
37+
app.component('Modal', Modal);
38+
app.component('Table', Table);
39+
app.component('TableFilter', TableFilter);
40+
app.component('Upload', Upload);
41+
42+
app
43+
.use(Alert)
44+
.use(Avatar)
45+
.use(Breadcrumb)
46+
.use(Button)
47+
.use(Card)
48+
.use(Col)
49+
.use(DatePicker)
50+
.use(Divider)
51+
.use(Dropdown)
52+
.use(Form)
53+
.use(Input)
54+
.use(Layout)
55+
.use(Menu)
56+
.use(Popconfirm)
57+
.use(Row)
58+
.use(Select)
59+
.use(Space)
60+
.use(Spin)
61+
.use(AntdTable);
62+
}

‎src/utils/dateUtil.ts

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,21 @@
11
/**
22
* Independent time operation tool to facilitate subsequent switch to dayjs
33
*/
4-
import moment from 'moment';
4+
// import moment from 'moment';
5+
import dayjs from 'dayjs';
56

67
const DATE_TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
78
const DATE_FORMAT = 'YYYY-MM-DD ';
89

910
export function formatToDateTime(
10-
date: moment.MomentInput = undefined,
11+
date: dayjs.ConfigType = undefined,
1112
format = DATE_TIME_FORMAT,
1213
): string {
13-
return moment(date).format(format);
14+
return dayjs(date).format(format);
1415
}
1516

16-
export function formatToDate(date: moment.MomentInput = undefined, format = DATE_FORMAT): string {
17-
return moment(date).format(format);
17+
export function formatToDate(date: dayjs.ConfigType = undefined, format = DATE_FORMAT): string {
18+
return dayjs(date).format(format);
1819
}
1920

20-
export const dateUtil = moment;
21+
export const dateUtil = dayjs;

‎src/views/home/constant.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Tooltip, Tag } from 'ant-design-vue';
2-
import type { ColumnProps } from 'ant-design-vue/es/table/interface';
2+
import { ColumnProps } from 'ant-design-vue/es/table';
33

44
export const columns: ColumnProps[] = [
55
{
@@ -21,7 +21,7 @@ export const columns: ColumnProps[] = [
2121
{
2222
title: '更新日期',
2323
dataIndex: 'updated_at',
24-
slots: { customRender: 'toDateTime' },
24+
// slots: { customRender: 'toDateTime' },
2525
width: 170,
2626
},
2727
{

‎src/views/website/constant.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { Tag } from 'ant-design-vue';
2-
3-
import type { ColumnProps } from 'ant-design-vue/es/table/interface';
2+
import { ColumnProps } from 'ant-design-vue/es/table';
43

54
export const columns: ColumnProps[] = [
65
{

0 commit comments

Comments
 (0)