From fa9f24d5da8d2e40d7c3661eabacb8f0474a7bf2 Mon Sep 17 00:00:00 2001 From: chenkl <321200875@qq.com> Date: Fri, 25 Dec 2020 17:15:40 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=E6=98=BE=E7=A4=BA?= =?UTF-8?q?=E6=9B=B4=E5=A4=9A=E7=BB=84=E5=BB=BA=E5=BC=80=E5=8F=91=E4=B8=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 4 +- src/components/More/index.vue | 84 +++++++ src/components/Setting/index.vue | 20 -- src/pages/index/layout/components/AppMain.vue | 2 +- src/pages/index/router/index.ts | 52 +++- src/pages/index/router/types.d.ts | 2 + src/pages/index/store/modules/app.ts | 20 -- src/pages/index/store/modules/permission.ts | 34 +-- .../views/components-demo/more/index.vue | 46 ++++ .../{example => example-dialog}/api.ts | 0 .../components/IfnoWrite.vue | 0 .../components/types.ts | 0 .../{example => example-dialog}/index.vue | 2 +- .../views/example-demo/example-page/api.ts | 22 ++ .../example-page/components/IfnoWrite.vue | 188 ++++++++++++++ .../example-page/components/types.ts | 18 ++ .../example-demo/example-page/example-add.vue | 30 +++ .../example-page/example-edit.vue | 34 +++ .../views/example-demo/example-page/index.vue | 229 ++++++++++++++++++ src/vue-bus/index.ts | 13 + yarn.lock | 8 +- 21 files changed, 723 insertions(+), 85 deletions(-) create mode 100644 src/components/More/index.vue create mode 100644 src/pages/index/views/components-demo/more/index.vue rename src/pages/index/views/example-demo/{example => example-dialog}/api.ts (100%) rename src/pages/index/views/example-demo/{example => example-dialog}/components/IfnoWrite.vue (100%) rename src/pages/index/views/example-demo/{example => example-dialog}/components/types.ts (100%) rename src/pages/index/views/example-demo/{example => example-dialog}/index.vue (99%) create mode 100644 src/pages/index/views/example-demo/example-page/api.ts create mode 100644 src/pages/index/views/example-demo/example-page/components/IfnoWrite.vue create mode 100644 src/pages/index/views/example-demo/example-page/components/types.ts create mode 100644 src/pages/index/views/example-demo/example-page/example-add.vue create mode 100644 src/pages/index/views/example-demo/example-page/example-edit.vue create mode 100644 src/pages/index/views/example-demo/example-page/index.vue create mode 100644 src/vue-bus/index.ts diff --git a/package.json b/package.json index 681661e..553ecf6 100644 --- a/package.json +++ b/package.json @@ -19,15 +19,15 @@ "clipboard": "^2.0.6", "core-js": "^3.6.5", "echarts": "^4.9.0", - "element-plus": "1.0.1-beta.11", + "element-plus": "1.0.1-beta.14", "highlight.js": "^10.4.0", "lodash-es": "^4.17.15", + "mitt": "^2.1.0", "mockjs": "^1.1.0", "normalize.css": "^8.0.1", "nprogress": "^0.2.0", "path-to-regexp": "^6.2.0", "qs": "^6.9.4", - "resize-observer-polyfill": "^1.5.1", "screenfull": "^5.0.2", "vditor": "^3.7.0", "vue": "3.0.4", diff --git a/src/components/More/index.vue b/src/components/More/index.vue new file mode 100644 index 0000000..0972698 --- /dev/null +++ b/src/components/More/index.vue @@ -0,0 +1,84 @@ + + + + + diff --git a/src/components/Setting/index.vue b/src/components/Setting/index.vue index 72cdc17..cbf3742 100644 --- a/src/components/Setting/index.vue +++ b/src/components/Setting/index.vue @@ -35,14 +35,6 @@
顶部菜单主题
--> -
界面显示
@@ -116,16 +108,6 @@ export default defineComponent({ appStore.SetCollapsed(false) } - // const fixedNavbar = ref(appStore.fixedNavbar) - // function setFixedNavbar(fixedNavbar: boolean) { - // appStore.SetFixedNavbar(fixedNavbar) - // } - - // const fixedTags = ref(appStore.fixedTags) - // function setFixedTags(fixedTags: boolean) { - // appStore.SetFixedTags(fixedTags) - // } - const fixedHeader = ref(appStore.fixedHeader) function setFixedHeader(fixedHeader: boolean) { appStore.SetFixedHeader(fixedHeader) @@ -179,8 +161,6 @@ export default defineComponent({ return { drawer, toggleClick, layout, setLayout, - // fixedNavbar, setFixedNavbar, - // fixedTags, setFixedTags, fixedHeader, setFixedHeader, navbar, setNavbar, hamburger, setHamburger, diff --git a/src/pages/index/layout/components/AppMain.vue b/src/pages/index/layout/components/AppMain.vue index dbdaf89..83a210c 100644 --- a/src/pages/index/layout/components/AppMain.vue +++ b/src/pages/index/layout/components/AppMain.vue @@ -26,7 +26,7 @@ export default defineComponent({ diff --git a/src/pages/index/router/index.ts b/src/pages/index/router/index.ts index 721975c..10466eb 100644 --- a/src/pages/index/router/index.ts +++ b/src/pages/index/router/index.ts @@ -24,6 +24,8 @@ const Layout = () => import('../layout/index.vue') affix: true 如果设置为true，则会一直固定在tag项中(默认 false) noTagsView: true 如果设置为true，则不会出现在tag中(默认 false) activeMenu: '/dashboard' 显示高亮的路由路径 + followAuth: '/dashboard' 跟随哪个路由进行权限过滤 + showMainRoute: true 设置为true即使hidden为true，也依然可以进行路由跳转(默认 false) } **/ @@ -178,6 +180,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [ meta: { title: '弹窗' } + }, + { + path: 'more', + component: () => import('_p/index/views/components-demo/more/index.vue'), + name: 'MoreDemo', + meta: { + title: '显示更多' + } } ] }, @@ -499,11 +509,45 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [ }, children: [ { - path: 'example', - component: () => import('_p/index/views/example-demo/example/index.vue'), - name: 'Example', + path: 'example-dialog', + component: () => import('_p/index/views/example-demo/example-dialog/index.vue'), + name: 'ExampleDialog', meta: { - title: '列表综合实例' + title: '列表综合实例-弹窗' + } + }, + { + path: 'example-page', + component: () => import('_p/index/views/example-demo/example-page/index.vue'), + name: 'ExamplePage', + meta: { + title: '列表综合实例-页面' + } + }, + { + path: 'example-add', + component: () => import('_p/index/views/example-demo/example-page/example-add.vue'), + name: 'ExampleAdd', + meta: { + title: '列表综合实例-新增', + noTagsView: true, + noCache: true, + hidden: true, + showMainRoute: true, + activeMenu: '/example-demo/example-page' + } + }, + { + path: 'example-edit', + component: () => import('_p/index/views/example-demo/example-page/example-edit.vue'), + name: 'ExampleEdit', + meta: { + title: '列表综合实例-编辑', + noTagsView: true, + noCache: true, + hidden: true, + showMainRoute: true, + activeMenu: '/example-demo/example-page' } } ] diff --git a/src/pages/index/router/types.d.ts b/src/pages/index/router/types.d.ts index 8de6f8f..43586ec 100644 --- a/src/pages/index/router/types.d.ts +++ b/src/pages/index/router/types.d.ts @@ -10,6 +10,8 @@ export interface RouteMeta { activeMenu?: string parent?: string noTagsView?: boolean + followAuth?: string + showMainRoute?: boolean } export interface AppRouteRecordRaw extends Omit { diff --git a/src/pages/index/store/modules/app.ts b/src/pages/index/store/modules/app.ts index ee3b584..97d8705 100644 --- a/src/pages/index/store/modules/app.ts +++ b/src/pages/index/store/modules/app.ts @@ -7,8 +7,6 @@ export interface AppState { showLogo: Boolean showNavbar: Boolean fixedHeader: Boolean - // fixedTags: Boolean - // fixedNavbar: Boolean layout: String showBreadcrumb: Boolean showHamburger: Boolean @@ -25,8 +23,6 @@ class App extends VuexModule implements AppState { public showLogo = true // 是否显示logo public showTags = true // 是否显示标签栏 public showNavbar = true // 是否显示navbar - // public fixedTags = true // 是否固定标签栏 - // public fixedNavbar = true // 是否固定navbar public fixedHeader = true // 是否固定header public layout = 'Classic' // layout布局 public showBreadcrumb = true // 是否显示面包屑 @@ -53,14 +49,6 @@ class App extends VuexModule implements AppState { private SET_NAVBAR(showNavbar: boolean): void { this.showNavbar = showNavbar } - // @Mutation - // private SET_FIXEDTAGS(fixedTags: boolean): void { - // this.fixedTags = fixedTags - // } - // @Mutation - // private SET_FIXEDNAVBAR(fixedNavbar: boolean): void { - // this.fixedNavbar = fixedNavbar - // } @Mutation private SET_FIXEDHEADER(fixedHeader: boolean): void { this.fixedHeader = fixedHeader @@ -114,14 +102,6 @@ class App extends VuexModule implements AppState { public SetFixedHeader(fixedHeader: boolean): void { this.SET_FIXEDHEADER(fixedHeader) } - // @Action - // public SetFixedTags(fixedTags: boolean): void { - // this.SET_FIXEDTAGS(fixedTags) - // } - // @Action - // public SetFixedNavbar(fixedNavbar: boolean): void { - // this.SET_FIXEDNAVBAR(fixedNavbar) - // } @Action public SetLayout(layout: 'Classic' | 'LeftTop' | 'Top' | 'Test'): void { this.SET_LAYOUT(layout) diff --git a/src/pages/index/store/modules/permission.ts b/src/pages/index/store/modules/permission.ts index f46d092..d3c7a95 100644 --- a/src/pages/index/store/modules/permission.ts +++ b/src/pages/index/store/modules/permission.ts @@ -51,45 +51,13 @@ class Permission extends VuexModule implements PermissionState { } } -// // 二级以上的菜单降级成二级菜单 -// function formatRouter(routes: AppRouteRecordRaw[], basePath = '/', list: AppRouteRecordRaw[] = [], parent: AppRouteRecordRaw) { -// routes.map((item: AppRouteRecordRaw) => { -// item.path = path.resolve(basePath, item.path) -// const meta: RouteMeta = item.meta || {} -// if (!meta.parent && parent) { -// meta.parent = parent.path -// item.meta = meta -// } -// if (item.redirect && item.redirect !== 'noredirect') { -// item.redirect = path.resolve(basePath, item.redirect as any) -// } -// if (item.children && item.children.length > 0) { -// const arr: AppRouteRecordRaw[] = formatRouter(item.children, item.path, list, item) -// delete item.children -// list.concat(arr) -// } -// list.push(item) -// }) -// return list -// } - -// // 菜单降级 -// function getFlatRoutes(routes: AppRouteRecordRaw[]): AppRouteRecordRaw[] { -// return routes.map((child: AppRouteRecordRaw) => { -// if (child.children && child.children.length > 0) { -// child.children = formatRouter(child.children, child.path, [], child) -// } -// return child -// }) -// } - // 路由过滤，主要用于权限控制 function generateRoutes(routes: AppRouteRecordRaw[]): AppRouteRecordRaw[] { const res: AppRouteRecordRaw[] = [] for (const route of routes) { // skip some route - if (route.meta && route.meta.hidden) { + if (route.meta && route.meta.hidden && !route.meta.showMainRoute) { continue } diff --git a/src/pages/index/views/components-demo/more/index.vue b/src/pages/index/views/components-demo/more/index.vue new file mode 100644 index 0000000..de9af5c --- /dev/null +++ b/src/pages/index/views/components-demo/more/index.vue @@ -0,0 +1,46 @@ + + + + + diff --git a/src/pages/index/views/example-demo/example/api.ts b/src/pages/index/views/example-demo/example-dialog/api.ts similarity index 100% rename from src/pages/index/views/example-demo/example/api.ts rename to src/pages/index/views/example-demo/example-dialog/api.ts diff --git a/src/pages/index/views/example-demo/example/components/IfnoWrite.vue b/src/pages/index/views/example-demo/example-dialog/components/IfnoWrite.vue similarity index 100% rename from src/pages/index/views/example-demo/example/components/IfnoWrite.vue rename to src/pages/index/views/example-demo/example-dialog/components/IfnoWrite.vue diff --git a/src/pages/index/views/example-demo/example/components/types.ts b/src/pages/index/views/example-demo/example-dialog/components/types.ts similarity index 100% rename from src/pages/index/views/example-demo/example/components/types.ts rename to src/pages/index/views/example-demo/example-dialog/components/types.ts diff --git a/src/pages/index/views/example-demo/example/index.vue b/src/pages/index/views/example-demo/example-dialog/index.vue similarity index 99% rename from src/pages/index/views/example-demo/example/index.vue rename to src/pages/index/views/example-demo/example-dialog/index.vue index f2aa74d..ef2a8df 100644 --- a/src/pages/index/views/example-demo/example/index.vue +++ b/src/pages/index/views/example-demo/example-dialog/index.vue @@ -112,7 +112,7 @@ const columns = [ ] export default defineComponent({ - // name: 'Example', + // name: 'ExampleDialog', components: { IfnoWrite }, diff --git a/src/pages/index/views/example-demo/example-page/api.ts b/src/pages/index/views/example-demo/example-page/api.ts new file mode 100644 index 0000000..f07d7e3 --- /dev/null +++ b/src/pages/index/views/example-demo/example-page/api.ts @@ -0,0 +1,22 @@ +import { fetch } from '_p/index/axios-config/axios' + +interface PropsData { + params?: any + data?: any +} + +export const getExampleListApi = ({ params }: PropsData): any => { + return fetch({ url: '/example/list', method: 'get', params }) +} + +export const delsExampApi = ({ data }: PropsData): any => { + return fetch({ url: '/example/delete', method: 'post', data }) +} + +export const saveExampApi = ({ data }: PropsData): any => { + return fetch({ url: '/example/save', method: 'post', data }) +} + +export const getExampDetApi = ({ params }: PropsData): any => { + return fetch({ url: '/example/detail', method: 'get', params }) +} diff --git a/src/pages/index/views/example-demo/example-page/components/IfnoWrite.vue b/src/pages/index/views/example-demo/example-page/components/IfnoWrite.vue new file mode 100644 index 0000000..7c5905d --- /dev/null +++ b/src/pages/index/views/example-demo/example-page/components/IfnoWrite.vue @@ -0,0 +1,188 @@ + + + + + diff --git a/src/pages/index/views/example-demo/example-page/components/types.ts b/src/pages/index/views/example-demo/example-page/components/types.ts new file mode 100644 index 0000000..2e5d6bb --- /dev/null +++ b/src/pages/index/views/example-demo/example-page/components/types.ts @@ -0,0 +1,18 @@ +export interface InfoWriteParams { + title: string + id?: string + author: string + content: string + importance: string + display_time: string + pageviews: number +} + +export interface InfoWriteRules { + title?: any[] + author?: any[] + content?: any[] + importance?: any[] + display_time?: any[] + pageviews?: any[] +} diff --git a/src/pages/index/views/example-demo/example-page/example-add.vue b/src/pages/index/views/example-demo/example-page/example-add.vue new file mode 100644 index 0000000..e1dd3aa --- /dev/null +++ b/src/pages/index/views/example-demo/example-page/example-add.vue @@ -0,0 +1,30 @@ + + + + + diff --git a/src/pages/index/views/example-demo/example-page/example-edit.vue b/src/pages/index/views/example-demo/example-page/example-edit.vue new file mode 100644 index 0000000..8e09987 --- /dev/null +++ b/src/pages/index/views/example-demo/example-page/example-edit.vue @@ -0,0 +1,34 @@ + + + + + diff --git a/src/pages/index/views/example-demo/example-page/index.vue b/src/pages/index/views/example-demo/example-page/index.vue new file mode 100644 index 0000000..dfa7b99 --- /dev/null +++ b/src/pages/index/views/example-demo/example-page/index.vue @@ -0,0 +1,229 @@ + + + + + diff --git a/src/vue-bus/index.ts b/src/vue-bus/index.ts new file mode 100644 index 0000000..cb8b25b --- /dev/null +++ b/src/vue-bus/index.ts @@ -0,0 +1,13 @@ +// 通过mitt实现vue-bus通信 + +import mitt from 'mitt' + +const bus: any = {} + +const emitter = mitt() + +bus.$on = emitter.on +bus.$off = emitter.off +bus.$emit = emitter.emit + +export default bus diff --git a/yarn.lock b/yarn.lock index 6c47ede..f3183e7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3990,10 +3990,10 @@ electron-to-chromium@^1.3.621: resolved "https://registry.npm.taobao.org/electron-to-chromium/download/electron-to-chromium-1.3.622.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felectron-to-chromium%2Fdownload%2Felectron-to-chromium-1.3.622.tgz#9726bd2e67a5462154750ce9701ca6af07d07877" integrity sha1-lya9LmelRiFUdQzpcBymrwfQeHc= -element-plus@1.0.1-beta.11: - version "1.0.1-beta.11" - resolved "https://registry.yarnpkg.com/element-plus/-/element-plus-1.0.1-beta.11.tgz#bcced187b44748b8d597c2681923c5097ee95fbe" - integrity sha512-qmael6DKlhJsOaEi/n7Zpw10qOCRO1irCXJ1LO8eqtl/7UCPZQNiOIIu6Gd1SgsJWbiW55NrFbHiRpfx37ZLIg== +element-plus@1.0.1-beta.14: + version "1.0.1-beta.14" + resolved "https://registry.yarnpkg.com/element-plus/-/element-plus-1.0.1-beta.14.tgz#67e6742ef0a380156d306d519d474220f8c3e03e" + integrity sha512-iqc8lAmj4yYTVQFlxwm5IWj3vxufgmF8FVwKgEKJfy1qQQVqA34R81IgywQpYh3jO/d+ofmHXhsm+z3ojXVp0A== dependencies: "@popperjs/core" "^2.4.4" async-validator "^3.4.0"