feat: Add dynamic route
kailong321200875
4 years ago
parent
d5b6e2a777
commit
9d926b2760
@ -0,0 +1,475 @@
|
||||
import { config } from '@/config/axios/config'
|
||||
import { MockMethod } from 'vite-plugin-mock'
|
||||
|
||||
const { result_code } = config
|
||||
|
||||
const timeout = 1000
|
||||
|
||||
const adminList = [
|
||||
{
|
||||
path: '/dashboard',
|
||||
component: '#',
|
||||
redirect: '/dashboard/analysis',
|
||||
name: 'Dashboard',
|
||||
meta: {
|
||||
title: 'router.dashboard',
|
||||
icon: 'ant-design:dashboard-filled',
|
||||
alwaysShow: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'analysis',
|
||||
component: 'views/Dashboard/Analysis',
|
||||
name: 'Analysis',
|
||||
meta: {
|
||||
title: 'router.analysis',
|
||||
noCache: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'workplace',
|
||||
component: 'views/Dashboard/Workplace',
|
||||
name: 'Workplace',
|
||||
meta: {
|
||||
title: 'router.workplace',
|
||||
noCache: true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/guide',
|
||||
component: '#',
|
||||
name: 'Guide',
|
||||
meta: {},
|
||||
children: [
|
||||
{
|
||||
path: 'index',
|
||||
component: 'views/Guide/Guide',
|
||||
name: 'GuideDemo',
|
||||
meta: {
|
||||
title: 'router.guide',
|
||||
icon: 'cib:telegram-plane'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/components',
|
||||
component: '#',
|
||||
redirect: '/components/icon',
|
||||
name: 'ComponentsDemo',
|
||||
meta: {
|
||||
title: 'router.component',
|
||||
icon: 'bx:bxs-component',
|
||||
alwaysShow: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'form',
|
||||
component: '##',
|
||||
name: 'Form',
|
||||
meta: {
|
||||
title: 'router.form',
|
||||
alwaysShow: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'default-form',
|
||||
component: 'views/Components/Form/DefaultForm',
|
||||
name: 'DefaultForm',
|
||||
meta: {
|
||||
title: 'router.defaultForm'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'use-form',
|
||||
component: 'views/Components/Form/UseFormDemo',
|
||||
name: 'UseForm',
|
||||
meta: {
|
||||
title: 'UseForm'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'ref-form',
|
||||
component: 'views/Components/Form/RefForm',
|
||||
name: 'RefForm',
|
||||
meta: {
|
||||
title: 'RefForm'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'table',
|
||||
component: '##',
|
||||
name: 'TableDemo',
|
||||
meta: {
|
||||
title: 'router.table',
|
||||
alwaysShow: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'default-table',
|
||||
component: 'views/Components/Table/DefaultTable',
|
||||
name: 'DefaultTable',
|
||||
meta: {
|
||||
title: 'router.defaultTable'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'use-table',
|
||||
component: 'views/Components/Table/UseTableDemo',
|
||||
name: 'UseTable',
|
||||
meta: {
|
||||
title: 'UseTable'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'ref-table',
|
||||
component: 'views/Components/Table/RefTable',
|
||||
name: 'RefTable',
|
||||
meta: {
|
||||
title: 'RefTable'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'editor-demo',
|
||||
component: '##',
|
||||
name: 'EditorDemo',
|
||||
meta: {
|
||||
title: 'router.editor',
|
||||
alwaysShow: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'editor',
|
||||
component: 'views/Components/Editor/Editor',
|
||||
name: 'Editor',
|
||||
meta: {
|
||||
title: 'router.richText'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'search',
|
||||
component: 'views/Components/Search',
|
||||
name: 'Search',
|
||||
meta: {
|
||||
title: 'router.search'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'descriptions',
|
||||
component: 'views/Components/Descriptions',
|
||||
name: 'Descriptions',
|
||||
meta: {
|
||||
title: 'router.descriptions'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'image-viewer',
|
||||
component: 'views/Components/ImageViewer',
|
||||
name: 'ImageViewer',
|
||||
meta: {
|
||||
title: 'router.imageViewer'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'dialog',
|
||||
component: 'views/Components/Dialog',
|
||||
name: 'Dialog',
|
||||
meta: {
|
||||
title: 'router.dialog'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'icon',
|
||||
component: 'views/Components/Icon',
|
||||
name: 'Icon',
|
||||
meta: {
|
||||
title: 'router.icon'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'echart',
|
||||
component: 'views/Components/Echart',
|
||||
name: 'Echart',
|
||||
meta: {
|
||||
title: 'router.echart'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'count-to',
|
||||
component: 'views/Components/CountTo',
|
||||
name: 'CountTo',
|
||||
meta: {
|
||||
title: 'router.countTo'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'watermark',
|
||||
component: 'views/Components/Watermark',
|
||||
name: 'Watermark',
|
||||
meta: {
|
||||
title: 'router.watermark'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'qrcode',
|
||||
component: 'views/Components/Qrcode',
|
||||
name: 'Qrcode',
|
||||
meta: {
|
||||
title: 'router.qrcode'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'highlight',
|
||||
component: 'views/Components/Highlight',
|
||||
name: 'Highlight',
|
||||
meta: {
|
||||
title: 'router.highlight'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'infotip',
|
||||
component: 'views/Components/Infotip',
|
||||
name: 'Infotip',
|
||||
meta: {
|
||||
title: 'router.infotip'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/level',
|
||||
component: '#',
|
||||
redirect: '/level/menu1/menu1-1/menu1-1-1',
|
||||
name: 'Level',
|
||||
meta: {
|
||||
title: 'router.level',
|
||||
icon: 'carbon:skill-level-advanced'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'menu1',
|
||||
name: 'Menu1',
|
||||
component: '##',
|
||||
redirect: '/level/menu1/menu1-1/menu1-1-1',
|
||||
meta: {
|
||||
title: 'router.menu1'
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'menu1-1',
|
||||
name: 'Menu11',
|
||||
component: '##',
|
||||
redirect: '/level/menu1/menu1-1/menu1-1-1',
|
||||
meta: {
|
||||
title: 'router.menu11',
|
||||
alwaysShow: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'menu1-1-1',
|
||||
name: 'Menu111',
|
||||
component: 'views/Level/Menu111',
|
||||
meta: {
|
||||
title: 'router.menu111'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'menu1-2',
|
||||
name: 'Menu12',
|
||||
component: 'views/Level/Menu12',
|
||||
meta: {
|
||||
title: 'router.menu12'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'menu2',
|
||||
name: 'Menu2Demo',
|
||||
component: 'views/Level/Menu2',
|
||||
meta: {
|
||||
title: 'router.menu2'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/example',
|
||||
component: '#',
|
||||
redirect: '/example/example-dialog',
|
||||
name: 'Example',
|
||||
meta: {
|
||||
title: 'router.example',
|
||||
icon: 'ep:management',
|
||||
alwaysShow: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'example-dialog',
|
||||
component: 'views/Example/Dialog/ExampleDialog',
|
||||
name: 'ExampleDialog',
|
||||
meta: {
|
||||
title: 'router.exampleDialog'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'example-page',
|
||||
component: 'views/Example/Page/ExamplePage',
|
||||
name: 'ExamplePage',
|
||||
meta: {
|
||||
title: 'router.examplePage'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'example-add',
|
||||
component: 'views/Example/Page/ExampleAdd',
|
||||
name: 'ExampleAdd',
|
||||
meta: {
|
||||
title: 'router.exampleAdd',
|
||||
noTagsView: true,
|
||||
noCache: true,
|
||||
hidden: true,
|
||||
showMainRoute: true,
|
||||
activeMenu: '/example/example-page'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'example-edit',
|
||||
component: 'views/Example/Page/ExampleEdit',
|
||||
name: 'ExampleEdit',
|
||||
meta: {
|
||||
title: 'router.exampleEdit',
|
||||
noTagsView: true,
|
||||
noCache: true,
|
||||
hidden: true,
|
||||
showMainRoute: true,
|
||||
activeMenu: '/example/example-page'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'example-detail',
|
||||
component: 'views/Example/Page/ExampleDetail',
|
||||
name: 'ExampleDetail',
|
||||
meta: {
|
||||
title: 'router.exampleDetail',
|
||||
noTagsView: true,
|
||||
noCache: true,
|
||||
hidden: true,
|
||||
showMainRoute: true,
|
||||
activeMenu: '/example/example-page'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/error',
|
||||
component: '#',
|
||||
redirect: '/error/404',
|
||||
name: 'Error',
|
||||
meta: {
|
||||
title: 'router.errorPage',
|
||||
icon: 'ci:error',
|
||||
alwaysShow: true
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: '404-demo',
|
||||
component: 'views/Error/404',
|
||||
name: '404Demo',
|
||||
meta: {
|
||||
title: '404'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '403-demo',
|
||||
component: 'views/Error/403',
|
||||
name: '403Demo',
|
||||
meta: {
|
||||
title: '403'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '500-demo',
|
||||
component: 'views/Error/500',
|
||||
name: '500Demo',
|
||||
meta: {
|
||||
title: '500'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const testList: string[] = [
|
||||
'/dashboard',
|
||||
'/dashboard/analysis',
|
||||
'/dashboard/workplace',
|
||||
'/guide',
|
||||
'/guide/index',
|
||||
'/components',
|
||||
'/components/form',
|
||||
'/components/form/default-form',
|
||||
'/components/form/use-form',
|
||||
'/components/form/ref-form',
|
||||
'/components/table',
|
||||
'/components/table/default-table',
|
||||
'/components/table/use-table',
|
||||
'/components/table/ref-table',
|
||||
'/components/editor-demo',
|
||||
'/components/editor-demo/editor',
|
||||
'/components/search',
|
||||
'/components/descriptions',
|
||||
'/components/image-viewer',
|
||||
'/components/dialog',
|
||||
'/components/icon',
|
||||
'/components/echart',
|
||||
'/components/count-to',
|
||||
'/components/watermark',
|
||||
'/components/qrcode',
|
||||
'/components/highlight',
|
||||
'/components/infotip',
|
||||
'/level',
|
||||
'/level/menu1',
|
||||
'/level/menu1/menu1-1',
|
||||
'/level/menu1/menu1-1/menu1-1-1',
|
||||
'/level/menu1/menu1-2',
|
||||
'/level/menu2',
|
||||
'/example',
|
||||
'/example/example-dialog',
|
||||
'/example/example-page',
|
||||
'/example/example-add',
|
||||
'/example/example-edit',
|
||||
'/example/example-detail',
|
||||
'/error',
|
||||
'/error/404-demo',
|
||||
'/error/403-demo',
|
||||
'/error/500-demo'
|
||||
]
|
||||
|
||||
export default [
|
||||
// 列表接口
|
||||
{
|
||||
url: '/role/list',
|
||||
method: 'get',
|
||||
timeout,
|
||||
response: ({ query }) => {
|
||||
const { roleName } = query
|
||||
return {
|
||||
code: result_code,
|
||||
data: {
|
||||
list: roleName === 'admin' ? adminList : testList
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
] as MockMethod[]
|
||||
@ -0,0 +1,88 @@
|
||||
<script setup lang="ts">
|
||||
import { ContentWrap } from '@/components/ContentWrap'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { Table } from '@/components/Table'
|
||||
import { getUserListApi } from '@/api/login'
|
||||
import { UserType } from '@/api/login/types'
|
||||
import { ref, h } from 'vue'
|
||||
import { ElButton } from 'element-plus'
|
||||
|
||||
interface Params {
|
||||
pageIndex?: number
|
||||
pageSize?: number
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const columns: TableColumn[] = [
|
||||
{
|
||||
field: 'index',
|
||||
label: t('userDemo.index'),
|
||||
type: 'index'
|
||||
},
|
||||
{
|
||||
field: 'username',
|
||||
label: t('userDemo.username')
|
||||
},
|
||||
{
|
||||
field: 'password',
|
||||
label: t('userDemo.password')
|
||||
},
|
||||
{
|
||||
field: 'role',
|
||||
label: t('userDemo.role')
|
||||
},
|
||||
{
|
||||
field: 'remark',
|
||||
label: t('userDemo.remark'),
|
||||
formatter: (row: UserType) => {
|
||||
return h(
|
||||
'span',
|
||||
row.username === 'admin' ? t('userDemo.remarkMessage1') : t('userDemo.remarkMessage2')
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
label: t('userDemo.action')
|
||||
}
|
||||
]
|
||||
|
||||
const loading = ref(true)
|
||||
|
||||
let tableDataList = ref<UserType[]>([])
|
||||
|
||||
const getTableList = async (params?: Params) => {
|
||||
const res = await getUserListApi({
|
||||
params: params || {
|
||||
pageIndex: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
if (res) {
|
||||
tableDataList.value = res.data.list
|
||||
}
|
||||
}
|
||||
|
||||
getTableList()
|
||||
|
||||
const acitonFn = (data: TableSlotDefault) => {
|
||||
console.log(data)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContentWrap :title="t('userDemo.title')" :message="t('userDemo.message')">
|
||||
<Table :columns="columns" :data="tableDataList" :loading="loading" :selection="false">
|
||||
<template #action="data">
|
||||
<ElButton type="primary" @click="acitonFn(data as TableSlotDefault)">
|
||||
{{ t('tableDemo.action') }}
|
||||
</ElButton>
|
||||
</template>
|
||||
</Table>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
@ -0,0 +1,88 @@
|
||||
<script setup lang="ts">
|
||||
import { ContentWrap } from '@/components/ContentWrap'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { Table } from '@/components/Table'
|
||||
import { getUserListApi } from '@/api/login'
|
||||
import { UserType } from '@/api/login/types'
|
||||
import { ref, h } from 'vue'
|
||||
import { ElButton } from 'element-plus'
|
||||
|
||||
interface Params {
|
||||
pageIndex?: number
|
||||
pageSize?: number
|
||||
}
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
const columns: TableColumn[] = [
|
||||
{
|
||||
field: 'index',
|
||||
label: t('userDemo.index'),
|
||||
type: 'index'
|
||||
},
|
||||
{
|
||||
field: 'username',
|
||||
label: t('userDemo.username')
|
||||
},
|
||||
{
|
||||
field: 'password',
|
||||
label: t('userDemo.password')
|
||||
},
|
||||
{
|
||||
field: 'role',
|
||||
label: t('userDemo.role')
|
||||
},
|
||||
{
|
||||
field: 'remark',
|
||||
label: t('userDemo.remark'),
|
||||
formatter: (row: UserType) => {
|
||||
return h(
|
||||
'span',
|
||||
row.username === 'admin' ? t('userDemo.remarkMessage1') : t('userDemo.remarkMessage2')
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
label: t('userDemo.action')
|
||||
}
|
||||
]
|
||||
|
||||
const loading = ref(true)
|
||||
|
||||
let tableDataList = ref<UserType[]>([])
|
||||
|
||||
const getTableList = async (params?: Params) => {
|
||||
const res = await getUserListApi({
|
||||
params: params || {
|
||||
pageIndex: 1,
|
||||
pageSize: 10
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
if (res) {
|
||||
tableDataList.value = res.data.list
|
||||
}
|
||||
}
|
||||
|
||||
getTableList()
|
||||
|
||||
const acitonFn = (data: TableSlotDefault) => {
|
||||
console.log(data)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContentWrap :title="t('userDemo.title')" :message="t('userDemo.message')">
|
||||
<Table :columns="columns" :data="tableDataList" :loading="loading" :selection="false">
|
||||
<template #action="data">
|
||||
<ElButton type="primary" @click="acitonFn(data as TableSlotDefault)">
|
||||
{{ t('tableDemo.action') }}
|
||||
</ElButton>
|
||||
</template>
|
||||
</Table>
|
||||
</ContentWrap>
|
||||
</template>
|
||||
Loading…
Reference in New Issue