Skip to content

A
ant-design-pro-vue
Unverified Commit 33585345 by Sendya
Options

feat: use zTree

parent 88d83e56
Showing with 470 additions and 342 deletions
package.json
...@@ -23,6 +23,7 @@ ...@@ -23,6 +23,7 @@
"vue-cropper": "^0.4.4", "vue-cropper": "^0.4.4",
"vue-ls": "^3.2.0", "vue-ls": "^3.2.0",
"vue-router": "^3.0.1", "vue-router": "^3.0.1",
"vue-ztree-2.0": "^1.0.4",
"vuex": "^3.0.1" "vuex": "^3.0.1"
}, },
"devDependencies": { "devDependencies": {
......
src/config/router.config.js
import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/components/layouts' import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/components/layouts'
export const asyncRouterMap = [ export const asyncRouterMap = [
{ {
path: '/', path: '/',
name: 'index', name: 'index',
component: BasicLayout, component: BasicLayout,
meta: { title: '首页' }, meta: { title: '首页' },
redirect: '/dashboard/workplace', redirect: '/dashboard/workplace',
children: [ children: [
// dashboard // dashboard
{ {
path: '/dashboard', path: '/dashboard',
name: 'dashboard', name: 'dashboard',
redirect: '/dashboard/workplace', redirect: '/dashboard/workplace',
component: RouteView, component: RouteView,
meta: { title: '仪表盘', icon: 'dashboard', permission: [ 'dashboard' ] }, meta: { title: '仪表盘', icon: 'dashboard', permission: [ 'dashboard' ] },
children: [ children: [
{ {
path: '/dashboard/analysis', path: '/dashboard/analysis',
name: 'Analysis', name: 'Analysis',
component: () => import('@/views/dashboard/Analysis'), component: () => import('@/views/dashboard/Analysis'),
meta: { title: '分析页', permission: [ 'dashboard' ] } meta: { title: '分析页', permission: [ 'dashboard' ] }
}, },
{ {
path: '/dashboard/monitor', path: '/dashboard/monitor',
name: 'Monitor', name: 'Monitor',
hidden: true, hidden: true,
component: () => import('@/views/dashboard/Monitor'), component: () => import('@/views/dashboard/Monitor'),
meta: { title: '监控页', permission: [ 'dashboard' ] } meta: { title: '监控页', permission: [ 'dashboard' ] }
}, },
{ {
path: '/dashboard/workplace', path: '/dashboard/workplace',
name: 'Workplace', name: 'Workplace',
component: () => import('@/views/dashboard/Workplace'), component: () => import('@/views/dashboard/Workplace'),
meta: { title: '工作台', permission: [ 'dashboard' ] } meta: { title: '工作台', permission: [ 'dashboard' ] }
} }
] ]
}, },
// forms // forms
{ {
path: '/form', path: '/form',
redirect: '/form/basic-form', redirect: '/form/basic-form',
component: PageView, component: PageView,
meta: { title: '表单页', icon: 'form', permission: [ 'form' ] }, meta: { title: '表单页', icon: 'form', permission: [ 'form' ] },
children: [ children: [
{ {
path: '/form/base-form', path: '/form/base-form',
name: 'BaseForm', name: 'BaseForm',
component: () => import('@/views/form/BasicForm'), component: () => import('@/views/form/BasicForm'),
meta: { title: '基础表单', permission: [ 'form' ] } meta: { title: '基础表单', permission: [ 'form' ] }
}, },
{ {
path: '/form/step-form', path: '/form/step-form',
name: 'StepForm', name: 'StepForm',
component: () => import('@/views/form/stepForm/StepForm'), component: () => import('@/views/form/stepForm/StepForm'),
meta: { title: '分步表单', permission: [ 'form' ] } meta: { title: '分步表单', permission: [ 'form' ] }
}, },
{ {
path: '/form/advanced-form', path: '/form/advanced-form',
name: 'AdvanceForm', name: 'AdvanceForm',
component: () => import('@/views/form/advancedForm/AdvancedForm'), component: () => import('@/views/form/advancedForm/AdvancedForm'),
meta: { title: '高级表单', permission: [ 'form' ] } meta: { title: '高级表单', permission: [ 'form' ] }
} },
] {
}, path: '/form/ztree-demo',
name: 'ZtreeDemo',
// list component: () => import('@/views/form/ZtreeDemo'),
{ meta: { title: 'zTreeDemo', permission: [ 'form' ] }
path: '/list', },
name: 'list', ]
component: PageView, },
redirect: '/list/query-list',
meta: { title: '列表页', icon: 'table', permission: [ 'table' ] }, // list
children: [ {
{ path: '/list',
path: '/list/query-list', name: 'list',
name: 'QueryList', component: PageView,
component: () => import('@/views/list/TableList'), redirect: '/list/query-list',
meta: { title: '查询表格', permission: [ 'table' ] } meta: { title: '列表页', icon: 'table', permission: [ 'table' ] },
}, children: [
{ {
path: '/list/edit-table', path: '/list/query-list',
name: 'EditList', name: 'QueryList',
component: () => import('@/views/list/TableInnerEditList'), component: () => import('@/views/list/TableList'),
meta: { title: '内联编辑表格', permission: [ 'table' ] } meta: { title: '查询表格', permission: [ 'table' ] }
}, },
{ {
path: '/list/user-list', path: '/list/edit-table',
name: 'UserList', name: 'EditList',
component: () => import('@/views/list/UserList'), component: () => import('@/views/list/TableInnerEditList'),
meta: { title: '用户列表', permission: [ 'table' ] } meta: { title: '内联编辑表格', permission: [ 'table' ] }
}, },
{ {
path: '/list/role-list', path: '/list/user-list',
name: 'RoleList', name: 'UserList',
component: () => import('@/views/list/RoleList'), component: () => import('@/views/list/UserList'),
meta: { title: '角色列表', permission: [ 'table' ] } meta: { title: '用户列表', permission: [ 'table' ] }
}, },
{ {
path: '/list/system-role', path: '/list/role-list',
name: 'SystemRole', name: 'RoleList',
component: () => import('@/views/role/RoleList'), component: () => import('@/views/list/RoleList'),
meta: { title: '角色列表2', permission: [ 'table' ]} meta: { title: '角色列表', permission: [ 'table' ] }
}, },
{ {
path: '/list/permission-list', path: '/list/system-role',
name: 'PermissionList', name: 'SystemRole',
component: () => import('@/views/list/PermissionList'), component: () => import('@/views/role/RoleList'),
meta: { title: '权限列表', permission: [ 'table' ] } meta: { title: '角色列表2', permission: [ 'table' ]}
}, },
{ {
path: '/list/basic-list', path: '/list/permission-list',
name: 'BasicList', name: 'PermissionList',
component: () => import('@/views/list/StandardList'), component: () => import('@/views/list/PermissionList'),
meta: { title: '标准列表', permission: [ 'table' ] } meta: { title: '权限列表', permission: [ 'table' ] }
}, },
{ {
path: '/list/card', path: '/list/basic-list',
name: 'CardList', name: 'BasicList',
component: () => import('@/views/list/CardList'), component: () => import('@/views/list/StandardList'),
meta: { title: '卡片列表', permission: [ 'table' ] } meta: { title: '标准列表', permission: [ 'table' ] }
}, },
{ {
path: '/list/search', path: '/list/card',
name: 'SearchList', name: 'CardList',
component: () => import('@/views/list/search/SearchLayout'), component: () => import('@/views/list/CardList'),
redirect: '/list/search/article', meta: { title: '卡片列表', permission: [ 'table' ] }
meta: { title: '搜索列表', permission: [ 'table' ] }, },
children: [ {
{ path: '/list/search',
path: '/list/search/article', name: 'SearchList',
name: 'SearchArticles', component: () => import('@/views/list/search/SearchLayout'),
component: () => import('../views/list/TableList'), redirect: '/list/search/article',
meta: { title: '搜索列表（文章）', permission: [ 'table' ] } meta: { title: '搜索列表', permission: [ 'table' ] },
}, children: [
{ {
path: '/list/search/project', path: '/list/search/article',
name: 'SearchProjects', name: 'SearchArticles',
component: () => import('../views/list/TableList'), component: () => import('../views/list/TableList'),
meta: { title: '搜索列表（项目）', permission: [ 'table' ] } meta: { title: '搜索列表（文章）', permission: [ 'table' ] }
}, },
{ {
path: '/list/search/application', path: '/list/search/project',
name: 'SearchApplications', name: 'SearchProjects',
component: () => import('../views/list/TableList'), component: () => import('../views/list/TableList'),
meta: { title: '搜索列表（应用）', permission: [ 'table' ] } meta: { title: '搜索列表（项目）', permission: [ 'table' ] }
}, },
] {
}, path: '/list/search/application',
] name: 'SearchApplications',
}, component: () => import('../views/list/TableList'),
meta: { title: '搜索列表（应用）', permission: [ 'table' ] }
// profile },
{ ]
path: '/profile', },
name: 'profile', ]
component: RouteView, },
redirect: '/profile/basic',
meta: { title: '详情页', icon: 'profile', permission: [ 'profile' ] }, // profile
children: [ {
{ path: '/profile',
path: '/profile/basic', name: 'profile',
name: 'ProfileBasic', component: RouteView,
component: () => import('@/views/profile/basic/Index'), redirect: '/profile/basic',
meta: { title: '基础详情页', permission: [ 'profile' ] } meta: { title: '详情页', icon: 'profile', permission: [ 'profile' ] },
}, children: [
{ {
path: '/profile/advanced', path: '/profile/basic',
name: 'ProfileAdvanced', name: 'ProfileBasic',
component: () => import('@/views/profile/advanced/Advanced'), component: () => import('@/views/profile/basic/Index'),
meta: { title: '高级详情页', permission: [ 'profile' ] } meta: { title: '基础详情页', permission: [ 'profile' ] }
} },
] {
}, path: '/profile/advanced',
name: 'ProfileAdvanced',
// result component: () => import('@/views/profile/advanced/Advanced'),
{ meta: { title: '高级详情页', permission: [ 'profile' ] }
path: '/result', }
name: 'result', ]
component: PageView, },
redirect: '/result/success',
meta: { title: '结果页', icon: 'check-circle-o', permission: [ 'result' ] }, // result
children: [ {
{ path: '/result',
path: '/result/success', name: 'result',
name: 'ResultSuccess', component: PageView,
component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'), redirect: '/result/success',
meta: { title: '成功', hiddenHeaderContent: true, permission: [ 'result' ] } meta: { title: '结果页', icon: 'check-circle-o', permission: [ 'result' ] },
}, children: [
{ {
path: '/result/fail', path: '/result/success',
name: 'ResultFail', name: 'ResultSuccess',
component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'), component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'),
meta: { title: '失败', hiddenHeaderContent: true, permission: [ 'result' ] } meta: { title: '成功', hiddenHeaderContent: true, permission: [ 'result' ] }
} },
] {
}, path: '/result/fail',
name: 'ResultFail',
// Exception component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'),
{ meta: { title: '失败', hiddenHeaderContent: true, permission: [ 'result' ] }
path: '/exception', }
name: 'exception', ]
component: RouteView, },
redirect: '/exception/403',
meta: { title: '异常页', icon: 'warning', permission: [ 'exception' ] }, // Exception
children: [ {
{ path: '/exception',
path: '/exception/403', name: 'exception',
name: 'Exception403', component: RouteView,
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/403'), redirect: '/exception/403',
meta: { title: '403', permission: [ 'exception' ] } meta: { title: '异常页', icon: 'warning', permission: [ 'exception' ] },
}, children: [
{ {
path: '/exception/404', path: '/exception/403',
name: 'Exception404', name: 'Exception403',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'), component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/403'),
meta: { title: '404', permission: [ 'exception' ] } meta: { title: '403', permission: [ 'exception' ] }
}, },
{ {
path: '/exception/500', path: '/exception/404',
name: 'Exception500', name: 'Exception404',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/500'), component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'),
meta: { title: '500', permission: [ 'exception' ] } meta: { title: '404', permission: [ 'exception' ] }
} },
] {
}, path: '/exception/500',
name: 'Exception500',
// account component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/500'),
{ meta: { title: '500', permission: [ 'exception' ] }
path: '/account', }
component: RouteView, ]
name: 'account', },
meta: { title: '个人页', icon: 'user', keepAlive: true, permission: [ 'user' ] },
children: [ // account
{ {
path: '/account/center', path: '/account',
name: 'center', component: RouteView,
component: () => import('@/views/account/center/Index'), name: 'account',
meta: { title: '个人中心', keepAlive: true, permission: [ 'user' ] } meta: { title: '个人页', icon: 'user', keepAlive: true, permission: [ 'user' ] },
}, children: [
{ {
path: '/account/settings', path: '/account/center',
name: 'settings', name: 'center',
component: () => import('@/views/account/settings/Index'), component: () => import('@/views/account/center/Index'),
meta: { title: '个人设置', hideHeader: true, keepAlive: true, permission: [ 'user' ] }, meta: { title: '个人中心', keepAlive: true, permission: [ 'user' ] }
redirect: '/account/settings/base', },
alwaysShow: true, {
children: [ path: '/account/settings',
{ name: 'settings',
path: '/account/settings/base', component: () => import('@/views/account/settings/Index'),
name: 'BaseSettings', meta: { title: '个人设置', hideHeader: true, keepAlive: true, permission: [ 'user' ] },
component: () => import('@/views/account/settings/BaseSetting'), redirect: '/account/settings/base',
meta: { title: '基本设置', hidden: true, keepAlive: true, permission: [ 'user' ] } alwaysShow: true,
}, children: [
{ {
path: '/account/settings/security', path: '/account/settings/base',
name: 'SecuritySettings', name: 'BaseSettings',
component: () => import('@/views/account/settings/Security'), component: () => import('@/views/account/settings/BaseSetting'),
meta: { title: '安全设置', hidden: true, keepAlive: true, permission: [ 'user' ] } meta: { title: '基本设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
}, },
{ {
path: '/account/settings/custom', path: '/account/settings/security',
name: 'CustomSettings', name: 'SecuritySettings',
component: () => import('@/views/account/settings/Custom'), component: () => import('@/views/account/settings/Security'),
meta: { title: '个性化设置', hidden: true, keepAlive: true, permission: [ 'user' ] } meta: { title: '安全设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
}, },
{ {
path: '/account/settings/binding', path: '/account/settings/custom',
name: 'BindingSettings', name: 'CustomSettings',
component: () => import('@/views/account/settings/Binding'), component: () => import('@/views/account/settings/Custom'),
meta: { title: '账户绑定', hidden: true, keepAlive: true, permission: [ 'user' ] } meta: { title: '个性化设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
}, },
{ {
path: '/account/settings/notification', path: '/account/settings/binding',
name: 'NotificationSettings', name: 'BindingSettings',
component: () => import('@/views/account/settings/Notification'), component: () => import('@/views/account/settings/Binding'),
meta: { title: '新消息通知', hidden: true, keepAlive: true, permission: [ 'user' ] } meta: { title: '账户绑定', hidden: true, keepAlive: true, permission: [ 'user' ] }
}, },
] {
}, path: '/account/settings/notification',
] name: 'NotificationSettings',
} component: () => import('@/views/account/settings/Notification'),
] meta: { title: '新消息通知', hidden: true, keepAlive: true, permission: [ 'user' ] }
}, },
{ ]
path: '*', redirect: '/404', hidden: true },
} ]
] }
]
/** },
* 基础路由 {
* @type { *[] } path: '*', redirect: '/404', hidden: true
*/ }
export const constantRouterMap = [ ]
{
path: '/user', /**
component: UserLayout, * 基础路由
redirect: '/user/login', * @type { *[] }
hidden: true, */
children: [ export const constantRouterMap = [
{ {
path: 'login', path: '/user',
name: 'login', component: UserLayout,
component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login') redirect: '/user/login',
}, hidden: true,
{ children: [
path: 'register', {
name: 'register', path: 'login',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/Register') name: 'login',
}, component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login')
{ },
path: 'register-result', {
name: 'registerResult', path: 'register',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/RegisterResult') name: 'register',
} component: () => import(/* webpackChunkName: "user" */ '@/views/user/Register')
] },
}, {
path: 'register-result',
{ name: 'registerResult',
path: '/test', component: () => import(/* webpackChunkName: "user" */ '@/views/user/RegisterResult')
component: BlankLayout, }
redirect: '/test/home', ]
children: [ },
{
path: 'home', {
name: 'TestHome', path: '/test',
component: () => import('@/views/Home') component: BlankLayout,
} redirect: '/test/home',
] children: [
}, {
path: 'home',
{ name: 'TestHome',
path: '/404', component: () => import('@/views/Home')
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404') }
}, ]
},
]
{
path: '/404',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
},
]
src/main.js
...@@ -15,6 +15,11 @@ import '@/utils/filter' // base filter ...@@ -15,6 +15,11 @@ import '@/utils/filter' // base filter
import PermissionHelper from '@/utils/helper/permission' import PermissionHelper from '@/utils/helper/permission'
import { removeLoadingAnimate } from '@/utils/util' import { removeLoadingAnimate } from '@/utils/util'
import vueztree from 'vue-ztree-2.0/dist/vue-ztree-2.0.umd.min.js'
import 'vue-ztree-2.0/dist/vue-ztree-2.0.css'
Vue.use(vueztree)
import { import {
ACCESS_TOKEN, ACCESS_TOKEN,
DEFAULT_COLOR, DEFAULT_COLOR,
......
src/views/form/BasicForm.vue
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
label="客户" label="客户"
:labelCol="{lg: {span: 7}, sm: {span: 7}}" :labelCol="{lg: {span: 7}, sm: {span: 7}}"
:wrapperCol="{lg: {span: 10}, sm: {span: 17} }"> :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
<a-input <a-input
placeholder="请描述你服务的客户，内部客户直接 @姓名／工号" placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"
v-decorator="[ v-decorator="[
'customer', 'customer',
......
src/views/form/ZtreeDemo.vue 0 → 100644
<template>
<a-card :body-style="{padding: '24px 32px'}" :bordered="false">
<vue-ztree :list.sync='zTreeDataSource' :func='nodeClick' :expand='expandClick' :contextmenu='contextmenuClick' :is-open='true'></vue-ztree>
</a-card>
</template>
<script>
export default {
name: 'BaseForm',
data () {
return {
description: 'zTree',
value: 1,
zTreeDataSource:[{
id:1,
name:"音乐",
children:[],
url:"http://www.baidu.com"
},{
id:2,
name:"视频",
children:[{
id:3,
name:"电影",
children:[{
id:4,
name:"国产电影",
url:""
},{
id:5,
name:"好莱坞电影",
url:""
},{
id:6,
name:"小语种电影",
url:""
}]
},{
id:7,
name:"短片",
children:[{
id:9,
name:"电视剧",
url:""
},{
id:10,
name:"短片",
url:""
}]
}]
}]
}
},
methods: {
// 点击节点
nodeClick:function(m){
console.log(JSON.parse(JSON.stringify(m)));
},
// 右击事件
contextmenuClick:function(m){
console.log(m)
console.log("触发了自定义的contextmenuClick事件");
},
// 点击展开收起
expandClick:function(m){
console.log(JSON.parse(JSON.stringify(m)));
// 点击异步加载
if(m.isExpand) {
// 动态加载子节点, 模拟ajax请求数据
// 请注意 id 不能重复哦。
if(m.hasOwnProperty("children")){
m.loadNode = 1; // 正在加载节点
setTimeout(()=>{
m.loadNode = 2; // 节点加载完毕
m.isFolder = !m.isFolder;
m.children.push({
id:+new Date(),
name:"动态加载节点1",
path:"",
clickNode:false,
isFolder:false,
isExpand:false,
loadNode:0,
children:[{
id:+new Date()+1,
name:"动态加载末节点",
path:"",
clickNode:false,
isExpand:false,
isFolder:false,
loadNode:0
}]
})
},1000)
}
}
}
}
}
</script>
\ No newline at end of file
vue.config.js
...@@ -75,5 +75,6 @@ module.exports = { ...@@ -75,5 +75,6 @@ module.exports = {
} }
}, },
lintOnSave: undefined lintOnSave: undefined,
runtimeCompiler: true
} }
\ No newline at end of file
yarn.lock
...@@ -9125,6 +9125,11 @@ vue-template-es2015-compiler@^1.6.0: ...@@ -9125,6 +9125,11 @@ vue-template-es2015-compiler@^1.6.0:
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18" resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz#dc42697133302ce3017524356a6c61b7b69b4a18"
integrity sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg== integrity sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==
vue-ztree-2.0@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/vue-ztree-2.0/-/vue-ztree-2.0-1.0.4.tgz#4559519a31be2e84f3afa90c821e76b5b58c563c"
integrity sha512-d7KZsquEYpM0jD/k1uwOMFCd08L6++7zwRESaL2sF43OtRFCump8BxcLpjusBIHpFadPvOSMMnK5P41y+ZiTlA==
vue@^2.5.17, vue@^2.5.3: vue@^2.5.17, vue@^2.5.3:
version "2.5.17" version "2.5.17"
resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.17.tgz#0f8789ad718be68ca1872629832ed533589c6ada" resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.17.tgz#0f8789ad718be68ca1872629832ed533589c6ada"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment