吉鹏 / gulu-admin

Download as
Browse Code »

Commit fe44789e30f574792576b91c094c6132d9fe7d43

Authored by BigBoss
1 parent 62b5353517
Exists in master

修改路由，新增页面

Showing 15 changed files with 3698 additions and 74 deletions   Show diff stats
1 { 1 {
2 "name": "vue-element-admin", 2 "name": "vue-element-admin",
3 "version": "4.2.1", 3 "version": "4.2.1",
4 "description": "A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features", 4 "description": "A magical vue admin. An out-of-box UI solution for enterprise applications. Newest development stack of vue. Lots of awesome features",
5 "author": "Pan <panfree23@gmail.com>", 5 "author": "Pan <panfree23@gmail.com>",
6 "license": "MIT", 6 "license": "MIT",
7 "scripts": { 7 "scripts": {
8 "dev": "vue-cli-service serve", 8 "dev": "vue-cli-service serve",
9 "build:prod": "vue-cli-service build", 9 "build:prod": "vue-cli-service build",
10 "build:stage": "vue-cli-service build --mode staging", 10 "build:stage": "vue-cli-service build --mode staging",
11 "preview": "node build/index.js --preview", 11 "preview": "node build/index.js --preview",
12 "lint": "eslint --fix --ext .js,.vue src", 12 "lint": "eslint --fix --ext .js,.vue src",
13 "test:unit": "jest --clearCache && vue-cli-service test:unit", 13 "test:unit": "jest --clearCache && vue-cli-service test:unit",
14 "test:ci": "npm run lint && npm run test:unit", 14 "test:ci": "npm run lint && npm run test:unit",
15 "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml", 15 "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
16 "new": "plop" 16 "new": "plop"
17 }, 17 },
18 "husky": { 18 "husky": {
19 "hooks": { 19 "hooks": {
20 "pre-commit": "lint-staged" 20 "pre-commit": "lint-staged"
21 } 21 }
22 }, 22 },
23 "lint-staged": { 23 "lint-staged": {
24 "src/**/*.{js,vue}": [ 24 "src/**/*.{js,vue}": [
25 "eslint --fix", 25 "eslint --fix",
26 "git add" 26 "git add"
27 ] 27 ]
28 }, 28 },
29 "keywords": [ 29 "keywords": [
30 "vue", 30 "vue",
31 "admin", 31 "admin",
32 "dashboard", 32 "dashboard",
33 "element-ui", 33 "element-ui",
34 "boilerplate", 34 "boilerplate",
35 "admin-template", 35 "admin-template",
36 "management-system" 36 "management-system"
37 ], 37 ],
38 "repository": { 38 "repository": {
39 "type": "git", 39 "type": "git",
40 "url": "git+https://github.com/PanJiaChen/vue-element-admin.git" 40 "url": "git+https://github.com/PanJiaChen/vue-element-admin.git"
41 }, 41 },
42 "bugs": { 42 "bugs": {
43 "url": "https://github.com/PanJiaChen/vue-element-admin/issues" 43 "url": "https://github.com/PanJiaChen/vue-element-admin/issues"
44 }, 44 },
45 "dependencies": { 45 "dependencies": {
46 "ant-design-vue": "^1.5.5", 46 "ant-design-vue": "^1.5.5",
47 "axios": "0.18.1", 47 "axios": "0.18.1",
48 "clipboard": "2.0.4", 48 "clipboard": "2.0.4",
49 "codemirror": "5.45.0", 49 "codemirror": "5.45.0",
50 "driver.js": "0.9.5", 50 "driver.js": "0.9.5",
51 "dropzone": "5.5.1", 51 "dropzone": "5.5.1",
52 "echarts": "4.2.1", 52 "echarts": "4.2.1",
53 "element-ui": "2.13.0", 53 "element-ui": "2.13.0",
54 "file-saver": "2.0.1", 54 "file-saver": "2.0.1",
55 "fuse.js": "3.4.4", 55 "fuse.js": "3.4.4",
56 "js-cookie": "2.2.0", 56 "js-cookie": "2.2.0",
57 "jsonlint": "1.6.3", 57 "jsonlint": "1.6.3",
58 "jszip": "3.2.1", 58 "jszip": "3.2.1",
59 "less-loader": "^6.1.0", 59 "less-loader": "^6.1.0",
60 "normalize.css": "7.0.0", 60 "normalize.css": "7.0.0",
61 "nprogress": "0.2.0", 61 "nprogress": "0.2.0",
62 "path-to-regexp": "2.4.0", 62 "path-to-regexp": "2.4.0",
63 "pinyin": "2.9.0", 63 "pinyin": "2.9.0",
64 "qs": "^6.9.4", 64 "qs": "^6.9.4",
65 "screenfull": "4.2.0", 65 "screenfull": "4.2.0",
66 "showdown": "1.9.0", 66 "showdown": "1.9.0",
67 "sortablejs": "1.8.4", 67 "sortablejs": "1.8.4",
68 "tui-editor": "1.3.3", 68 "tui-editor": "1.3.3",
69 "vant": "^2.8.0", 69 "vant": "^2.8.0",
70 "vue": "2.6.10", 70 "vue": "2.6.10",
71 "vue-count-to": "1.0.13", 71 "vue-count-to": "1.0.13",
72 "vue-giant-tree": "^0.1.2", 72 "vue-giant-tree": "^0.1.2",
73 "vue-i18n": "7.3.2", 73 "vue-i18n": "7.3.2",
74 "vue-router": "3.0.2", 74 "vue-router": "3.0.2",
75 "vue-splitpane": "1.0.4", 75 "vue-splitpane": "1.0.4",
76 "vue-ztree": "^1.0.0", 76 "vue-ztree": "^1.0.0",
77 "vuedraggable": "2.20.0", 77 "vuedraggable": "2.20.0",
78 "vuex": "3.1.0", 78 "vuex": "3.1.0",
79 "xlsx": "0.14.1" 79 "xlsx": "0.14.1"
80 }, 80 },
81 "devDependencies": { 81 "devDependencies": {
82 "@babel/core": "7.0.0", 82 "@babel/core": "7.0.0",
83 "@babel/register": "7.0.0", 83 "@babel/register": "7.0.0",
84 "@vue/cli-plugin-babel": "3.5.3", 84 "@vue/cli-plugin-babel": "3.5.3",
85 "@vue/cli-plugin-eslint": "^3.9.1", 85 "@vue/cli-plugin-eslint": "^3.9.1",
86 "@vue/cli-plugin-unit-jest": "3.5.3", 86 "@vue/cli-plugin-unit-jest": "3.5.3",
87 "@vue/cli-service": "3.5.3", 87 "@vue/cli-service": "3.5.3",
88 "@vue/test-utils": "1.0.0-beta.29", 88 "@vue/test-utils": "1.0.0-beta.29",
89 "autoprefixer": "^9.5.1", 89 "autoprefixer": "^9.5.1",
90 "babel-core": "7.0.0-bridge.0", 90 "babel-core": "7.0.0-bridge.0",
91 "babel-eslint": "10.0.1", 91 "babel-eslint": "10.0.1",
92 "babel-jest": "23.6.0", 92 "babel-jest": "23.6.0",
93 "chalk": "2.4.2", 93 "chalk": "2.4.2",
94 "chokidar": "2.1.5", 94 "chokidar": "2.1.5",
95 "connect": "3.6.6", 95 "connect": "3.6.6",
96 "eslint": "5.15.3", 96 "eslint": "^5.15.3",
97 "eslint-plugin-vue": "5.2.2", 97 "eslint-plugin-vue": "5.2.2",
98 "html-webpack-plugin": "3.2.0", 98 "html-webpack-plugin": "3.2.0",
99 "husky": "1.3.1", 99 "husky": "1.3.1",
100 "lint-staged": "8.1.5", 100 "lint-staged": "8.1.5",
101 "mockjs": "1.0.1-beta3", 101 "mockjs": "1.0.1-beta3",
102 "node-sass": "^4.9.0", 102 "node-sass": "^4.9.0",
103 "plop": "2.3.0", 103 "plop": "2.3.0",
104 "runjs": "^4.3.2", 104 "runjs": "^4.3.2",
105 "sass-loader": "^7.1.0", 105 "sass-loader": "^7.1.0",
106 "script-ext-html-webpack-plugin": "2.1.3", 106 "script-ext-html-webpack-plugin": "2.1.3",
107 "script-loader": "0.7.2", 107 "script-loader": "0.7.2",
108 "serve-static": "^1.13.2", 108 "serve-static": "^1.13.2",
109 "svg-sprite-loader": "4.1.3", 109 "svg-sprite-loader": "4.1.3",
110 "svgo": "1.2.0", 110 "svgo": "1.2.0",
111 "vue-template-compiler": "2.6.10" 111 "vue-template-compiler": "2.6.10"
112 }, 112 },
113 "engines": { 113 "engines": {
114 "node": ">=8.9", 114 "node": ">=8.9",
115 "npm": ">= 3.0.0" 115 "npm": ">= 3.0.0"
116 }, 116 },
117 "browserslist": [ 117 "browserslist": [
118 "> 1%", 118 "> 1%",
119 "last 2 versions" 119 "last 2 versions"
120 ] 120 ]
121 } 121 }
122 122
src/router/index.js
Diff comments   View file @fe44789
1 import Vue from 'vue' 1 import Vue from 'vue'
2 import Router from 'vue-router' 2 import Router from 'vue-router'
3 3
4 Vue.use(Router) 4 Vue.use(Router)
5 5
6 /* Layout */ 6 /* Layout */
7 import Layout from '@/layout' 7 import Layout from '@/layout'
8 8
9 /* Router Modules */ 9 /* Router Modules */
10 import componentsRouter from './modules/components' 10 // import componentsRouter from './modules/components'
11 // import chartsRouter from './modules/charts' 11 // import chartsRouter from './modules/charts'
12 // import tableRouter from './modules/table' 12 // import tableRouter from './modules/table'
13 // import nestedRouter from './modules/nested' 13 // import nestedRouter from './modules/nested'
14 import userRouter from './modules/user' 14 import userRouter from './modules/user'// 用户
15 import systemRouter from './modules/system' 15 import systemRouter from './modules/system'// 系统设置
16 import prodRouter from './modules/prod' 16 import prodRouter from './modules/prod'// 产品
17 import orderRouter from './modules/order' 17 import orderRouter from './modules/order'// 订单
18 import metaRouter from './modules/meta' 18 import metaRouter from './modules/meta'// 元定义
19 import sitesRouter from './modules/sites' 19 // import sitesRouter from './modules/sites'
20 import applicationRouter from './modules/application'// 应用
21 import operationsRouter from './modules/operations'// 运营官
22 import logisticsRouter from './modules/logistics'// 物流路由
23 import staffRouter from './modules/staff'// 员工
24 import recommendRouter from './modules/recommend'// 推荐
25 // import manufacturerRouter from './modules/manufacturer'
20 26
21 /** 27 /**
22 * Note: sub-menu only appear when route children.length >= 1 28 * Note: sub-menu only appear when route children.length >= 1
23 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html 29 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
24 * 30 *
25 * hidden: true if set true, item will not show in the sidebar(default is false) 31 * hidden: true if set true, item will not show in the sidebar(default is false)
26 * alwaysShow: true if set true, will always show the root menu 32 * alwaysShow: true if set true, will always show the root menu
27 * if not set alwaysShow, when item has more than one children route, 33 * if not set alwaysShow, when item has more than one children route,
28 * it will becomes nested mode, otherwise not show the root menu 34 * it will becomes nested mode, otherwise not show the root menu
29 * redirect: noRedirect if set noRedirect will no redirect in the breadcrumb 35 * redirect: noRedirect if set noRedirect will no redirect in the breadcrumb
30 * name:'router-name' the name is used by <keep-alive> (must set!!!) 36 * name:'router-name' the name is used by <keep-alive> (must set!!!)
31 * meta : { 37 * meta : {
32 roles: ['admin','assistant','runner', 'shoper'] control the page roles (you can set multiple roles) 38 roles: ['admin','assistant','runner', 'shoper'] control the page roles (you can set multiple roles)
33 title: 'title' the name show in sidebar and breadcrumb (recommend set) 39 title: 'title' the name show in sidebar and breadcrumb (recommend set)
34 icon: 'svg-name' the icon show in the sidebar 40 icon: 'svg-name' the icon show in the sidebar
35 noCache: true if set true, the page will no be cached(default is false) 41 noCache: true if set true, the page will no be cached(default is false)
36 affix: true if set true, the tag will affix in the tags-view 42 affix: true if set true, the tag will affix in the tags-view
37 breadcrumb: false if set false, the item will hidden in breadcrumb(default is true) 43 breadcrumb: false if set false, the item will hidden in breadcrumb(default is true)
38 activeMenu: '/example/list' if set path, the sidebar will highlight the path you set 44 activeMenu: '/example/list' if set path, the sidebar will highlight the path you set
39 } 45 }
40 */ 46 */
41 47
42 /** 48 /**
43 * constantRoutes 49 * constantRoutes
44 * a base page that does not have permission requirements 50 * a base page that does not have permission requirements
45 * all roles can be accessed 51 * all roles can be accessed
46 */ 52 */
47 export const constantRoutes = [{ 53 export const constantRoutes = [{
48 path: '/redirect', 54 path: '/redirect',
49 component: Layout, 55 component: Layout,
50 hidden: true, 56 hidden: true,
51 children: [{ 57 children: [{
52 path: '/redirect/:path*', 58 path: '/redirect/:path*',
53 component: () => import('@/views/redirect/index') 59 component: () => import('@/views/redirect/index')
54 }] 60 }]
55 }, 61 },
56 { 62 {
57 path: '/login', 63 path: '/login',
58 component: () => import('@/views/login/index'), 64 component: () => import('@/views/login/index'),
59 hidden: true 65 hidden: true
60 }, 66 },
61 { 67 {
62 path: '/auth-redirect', 68 path: '/auth-redirect',
63 component: () => import('@/views/login/auth-redirect'), 69 component: () => import('@/views/login/auth-redirect'),
64 hidden: true 70 hidden: true
65 }, 71 },
66 { 72 {
67 path: '/404', 73 path: '/404',
68 component: () => import('@/views/error-page/404'), 74 component: () => import('@/views/error-page/404'),
69 hidden: true 75 hidden: true
70 }, 76 },
71 { 77 {
72 path: '/500', 78 path: '/500',
73 component: () => import('@/views/error-page/500'), 79 component: () => import('@/views/error-page/500'),
74 hidden: true 80 hidden: true
75 }, 81 },
76 { 82 {
77 path: '/401', 83 path: '/401',
78 component: () => import('@/views/error-page/401'), 84 component: () => import('@/views/error-page/401'),
79 hidden: true 85 hidden: true
80 }, 86 },
81 { 87 {
82 path: '/', 88 path: '/',
83 component: Layout, 89 component: Layout,
84 redirect: '/dashboard', 90 redirect: '/dashboard',
85 children: [{ 91 children: [{
86 path: 'dashboard', 92 path: 'dashboard',
87 component: () => import('@/views/dashboard/index'), 93 component: () => import('@/views/dashboard/index'),
88 name: 'Dashboard', 94 name: 'Dashboard',
89 meta: { 95 meta: {
90 title: 'dashboard', 96 title: 'dashboard',
91 icon: 'dashboard', 97 icon: 'dashboard',
92 affix: true 98 affix: true
93 } 99 }
94 }] 100 }]
95 }, 101 }
96 // { 102 // {
97 // path: '/documentation', 103 // path: '/documentation',
98 // component: Layout, 104 // component: Layout,
99 // children: [ 105 // children: [
100 // { 106 // {
101 // path: 'index', 107 // path: 'index',
102 // component: () => import('@/views/documentation/index'), 108 // component: () => import('@/views/documentation/index'),
103 // name: 'Documentation', 109 // name: 'Documentation',
104 // meta: { title: 'documentation', icon: 'documentation', affix: true } 110 // meta: { title: 'documentation', icon: 'documentation', affix: true }
105 // } 111 // }
106 // ] 112 // ]
107 // }, 113 // },
108 { 114 // {
109 path: '/guide', 115 // path: '/guide',
110 component: Layout, 116 // component: Layout,
111 redirect: '/guide/index', 117 // redirect: '/guide/index',
112 children: [{ 118 // children: [{
113 path: 'index', 119 // path: 'index',
114 component: () => import('@/views/guide/index'), 120 // component: () => import('@/views/guide/index'),
115 name: 'Guide', 121 // name: 'Guide',
116 meta: { 122 // meta: {
117 title: 'guide', 123 // title: 'guide',
118 icon: 'guide', 124 // icon: 'guide',
119 noCache: true 125 // noCache: true
120 } 126 // }
121 }] 127 // }]
122 } 128 // }
123 // { 129 // {
124 // path: '/profile', 130 // path: '/profile',
125 // component: Layout, 131 // component: Layout,
126 // redirect: '/profile/index', 132 // redirect: '/profile/index',
127 // hidden: true, 133 // hidden: true,
128 // children: [ 134 // children: [
129 // { 135 // {
130 // path: 'index', 136 // path: 'index',
131 // component: () => import('@/views/profile/index'), 137 // component: () => import('@/views/profile/index'),
132 // name: 'Profile', 138 // name: 'Profile',
133 // meta: { title: 'profile', icon: 'user', noCache: true } 139 // meta: { title: 'profile', icon: 'user', noCache: true }
134 // } 140 // }
135 // ] 141 // ]
136 // } 142 // }
137 ] 143 ]
138 144
139 /** 145 /**
140 * asyncRoutes 146 * asyncRoutes
141 * the routes that need to be dynamically loaded based on user roles 147 * the routes that need to be dynamically loaded based on user roles
142 */ 148 */
143 export const asyncRoutes = [ 149 export const asyncRoutes = [
144 // { 150 // {
145 // path: '/permission', 151 // path: '/permission',
146 // component: Layout, 152 // component: Layout,
147 // redirect: '/permission/page', 153 // redirect: '/permission/page',
148 // alwaysShow: true, // will always show the root menu 154 // alwaysShow: true, // will always show the root menu
149 // name: 'Permission', 155 // name: 'Permission',
150 // meta: { 156 // meta: {
151 // title: 'permission', 157 // title: 'permission',
152 // icon: 'lock', 158 // icon: 'lock',
153 // roles: ['admin', 'assistant'] // you can set roles in root nav 159 // roles: ['admin', 'assistant'] // you can set roles in root nav
154 // }, 160 // },
155 // children: [ 161 // children: [
156 // { 162 // {
157 // path: 'page', 163 // path: 'page',
158 // component: () => import('@/views/permission/page'), 164 // component: () => import('@/views/permission/page'),
159 // name: 'PagePermission', 165 // name: 'PagePermission',
160 // meta: { 166 // meta: {
161 // title: 'pagePermission', 167 // title: 'pagePermission',
162 // roles: ['admin','assistant'] // or you can only set roles in sub nav 168 // roles: ['admin','assistant'] // or you can only set roles in sub nav
163 // } 169 // }
164 // }, 170 // },
165 // { 171 // {
166 // path: 'directive', 172 // path: 'directive',
167 // component: () => import('@/views/permission/directive'), 173 // component: () => import('@/views/permission/directive'),
168 // name: 'DirectivePermission', 174 // name: 'DirectivePermission',
169 // meta: { 175 // meta: {
170 // title: 'directivePermission', 176 // title: 'directivePermission',
171 // roles: ['admin', 'shoper'] 177 // roles: ['admin', 'shoper']
172 // // if do not set roles, means: this page does not require permission 178 // // if do not set roles, means: this page does not require permission
173 // } 179 // }
174 // }, 180 // },
175 // { 181 // {
176 // path: 'role', 182 // path: 'role',
177 // component: () => import('@/views/permission/role'), 183 // component: () => import('@/views/permission/role'),
178 // name: 'RolePermission', 184 // name: 'RolePermission',
179 // meta: { 185 // meta: {
180 // title: 'rolePermission', 186 // title: 'rolePermission',
181 // roles: ['admin', 'runner'] 187 // roles: ['admin', 'runner']
182 // } 188 // }
183 // } 189 // }
184 // ] 190 // ]
185 // }, 191 // },
186 // tableRouter, 192 // tableRouter,
187 metaRouter, 193 applicationRouter, // 应用
188 userRouter, 194 operationsRouter, // 运营官
189 prodRouter, 195 // manufacturerRouter,
190 orderRouter, 196 userRouter, // 用户
191 sitesRouter, 197 orderRouter, // 订单
192 systemRouter, 198 prodRouter, // 产品
193 componentsRouter, 199 logisticsRouter, // 物流
200 staffRouter, // 员工
201 recommendRouter, // 推荐
202 metaRouter, // 元定义
203 // sitesRouter,
204 systemRouter, // 系统设置
205 // componentsRouter,
194 // chartsRouter, 206 // chartsRouter,
195 // nestedRouter, 207 // nestedRouter,
196 // tableRouter, 208 // tableRouter,
197 { 209 {
198 path: '/icon', 210 path: '/icon',
199 component: Layout, 211 component: Layout,
200 children: [{ 212 children: [{
201 path: 'index', 213 path: 'index',
202 component: () => import('@/views/icons/index'), 214 component: () => import('@/views/icons/index'),
203 name: 'Icons', 215 name: 'Icons',
204 meta: { 216 meta: {
205 title: 'icons', 217 title: 'icons',
206 icon: 'icon', 218 icon: 'icon',
207 noCache: true 219 noCache: true
208 } 220 }
209 }] 221 }]
210 }, 222 },
211 /** when your routing map is too long, you can split it into small modules **/ 223 /** when your routing map is too long, you can split it into small modules **/
212 224
213 { 225 // {
214 path: '/example', 226 // path: '/example',
215 component: Layout, 227 // component: Layout,
216 redirect: '/example/list', 228 // redirect: '/example/list',
217 name: 'Example', 229 // name: 'Example',
218 meta: { 230 // meta: {
219 title: 'example', 231 // title: 'example',
220 icon: 'example' 232 // icon: 'example'
221 }, 233 // },
222 children: [{ 234 // children: [{
223 path: 'create', 235 // path: 'create',
224 component: () => import('@/views/example/create'), 236 // component: () => import('@/views/example/create'),
225 name: 'CreateArticle', 237 // name: 'CreateArticle',
226 meta: { 238 // meta: {
227 title: 'createArticle', 239 // title: 'createArticle',
228 icon: 'edit' 240 // icon: 'edit'
229 } 241 // }
230 }, 242 // },
231 { 243 // {
232 path: 'edit/:id(\\d+)', 244 // path: 'edit/:id(\\d+)',
233 component: () => import('@/views/example/edit'), 245 // component: () => import('@/views/example/edit'),
234 name: 'EditArticle', 246 // name: 'EditArticle',
235 meta: { 247 // meta: {
236 title: 'editArticle', 248 // title: 'editArticle',
237 noCache: true, 249 // noCache: true,
238 activeMenu: '/example/list' 250 // activeMenu: '/example/list'
239 }, 251 // },
240 hidden: true 252 // hidden: true
241 }, 253 // },
242 { 254 // {
243 path: 'list', 255 // path: 'list',
244 component: () => import('@/views/example/list'), 256 // component: () => import('@/views/example/list'),
245 name: 'ArticleList', 257 // name: 'ArticleList',
246 meta: { 258 // meta: {
247 title: 'articleList', 259 // title: 'articleList',
248 icon: 'list' 260 // icon: 'list'
249 } 261 // }
250 } 262 // }
251 ] 263 // ]
252 }, 264 // },
253 265
254 // { 266 // {
255 // path: '/tab', 267 // path: '/tab',
256 // component: Layout, 268 // component: Layout,
257 // children: [ 269 // children: [
258 // { 270 // {
259 // path: 'index', 271 // path: 'index',
260 // component: () => import('@/views/tab/index'), 272 // component: () => import('@/views/tab/index'),
261 // name: 'Tab', 273 // name: 'Tab',
262 // meta: { title: 'tab', icon: 'tab' } 274 // meta: { title: 'tab', icon: 'tab' }
263 // } 275 // }
264 // ] 276 // ]
265 // }, 277 // },
266 278
267 // { 279 // {
268 // path: '/error', 280 // path: '/error',
269 // component: Layout, 281 // component: Layout,
270 // redirect: 'noRedirect', 282 // redirect: 'noRedirect',
271 // name: 'ErrorPages', 283 // name: 'ErrorPages',
272 // meta: { 284 // meta: {
273 // title: 'errorPages', 285 // title: 'errorPages',
274 // icon: '404' 286 // icon: '404'
275 // }, 287 // },
276 // children: [ 288 // children: [
277 // { 289 // {
278 // path: '401', 290 // path: '401',
279 // component: () => import('@/views/error-page/401'), 291 // component: () => import('@/views/error-page/401'),
280 // name: 'Page401', 292 // name: 'Page401',
281 // meta: { title: 'page401', noCache: true } 293 // meta: { title: 'page401', noCache: true }
282 // }, 294 // },
283 // { 295 // {
284 // path: '404', 296 // path: '404',
285 // component: () => import('@/views/error-page/404'), 297 // component: () => import('@/views/error-page/404'),
286 // name: 'Page404', 298 // name: 'Page404',
287 // meta: { title: 'page404', noCache: true } 299 // meta: { title: 'page404', noCache: true }
288 // } 300 // }
289 // ] 301 // ]
290 // }, 302 // },
291 303
292 // { 304 // {
293 // path: '/error-log', 305 // path: '/error-log',
294 // component: Layout, 306 // component: Layout,
295 // children: [ 307 // children: [
296 // { 308 // {
297 // path: 'log', 309 // path: 'log',
298 // component: () => import('@/views/error-log/index'), 310 // component: () => import('@/views/error-log/index'),
299 // name: 'ErrorLog', 311 // name: 'ErrorLog',
300 // meta: { title: 'errorLog', icon: 'bug' } 312 // meta: { title: 'errorLog', icon: 'bug' }
301 // } 313 // }
302 // ] 314 // ]
303 // }, 315 // },
304 316
305 // { 317 // {
306 // path: '/excel', 318 // path: '/excel',
307 // component: Layout, 319 // component: Layout,
308 // redirect: '/excel/export-excel', 320 // redirect: '/excel/export-excel',
309 // name: 'Excel', 321 // name: 'Excel',
310 // meta: { 322 // meta: {
311 // title: 'excel', 323 // title: 'excel',
312 // icon: 'excel' 324 // icon: 'excel'
313 // }, 325 // },
314 // children: [ 326 // children: [
315 // { 327 // {
316 // path: 'export-excel', 328 // path: 'export-excel',
317 // component: () => import('@/views/excel/export-excel'), 329 // component: () => import('@/views/excel/export-excel'),
318 // name: 'ExportExcel', 330 // name: 'ExportExcel',
319 // meta: { title: 'exportExcel' } 331 // meta: { title: 'exportExcel' }
320 // }, 332 // },
321 // { 333 // {
322 // path: 'export-selected-excel', 334 // path: 'export-selected-excel',
323 // component: () => import('@/views/excel/select-excel'), 335 // component: () => import('@/views/excel/select-excel'),
324 // name: 'SelectExcel', 336 // name: 'SelectExcel',
325 // meta: { title: 'selectExcel' } 337 // meta: { title: 'selectExcel' }
326 // }, 338 // },
327 // { 339 // {
328 // path: 'export-merge-header', 340 // path: 'export-merge-header',
329 // component: () => import('@/views/excel/merge-header'), 341 // component: () => import('@/views/excel/merge-header'),
330 // name: 'MergeHeader', 342 // name: 'MergeHeader',
331 // meta: { title: 'mergeHeader' } 343 // meta: { title: 'mergeHeader' }
332 // }, 344 // },
333 // { 345 // {
334 // path: 'upload-excel', 346 // path: 'upload-excel',
335 // component: () => import('@/views/excel/upload-excel'), 347 // component: () => import('@/views/excel/upload-excel'),
336 // name: 'UploadExcel', 348 // name: 'UploadExcel',
337 // meta: { title: 'uploadExcel' } 349 // meta: { title: 'uploadExcel' }
338 // } 350 // }
339 // ] 351 // ]
340 // }, 352 // },
341 353
342 // { 354 // {
343 // path: '/zip', 355 // path: '/zip',
344 // component: Layout, 356 // component: Layout,
345 // redirect: '/zip/download', 357 // redirect: '/zip/download',
346 // alwaysShow: true, 358 // alwaysShow: true,
347 // name: 'Zip', 359 // name: 'Zip',
348 // meta: { title: 'zip', icon: 'zip' }, 360 // meta: { title: 'zip', icon: 'zip' },
349 // children: [ 361 // children: [
350 // { 362 // {
351 // path: 'download', 363 // path: 'download',
352 // component: () => import('@/views/zip/index'), 364 // component: () => import('@/views/zip/index'),
353 // name: 'ExportZip', 365 // name: 'ExportZip',
354 // meta: { title: 'exportZip' } 366 // meta: { title: 'exportZip' }
355 // } 367 // }
356 // ] 368 // ]
357 // }, 369 // },
358 370
359 // { 371 // {
360 // path: '/pdf', 372 // path: '/pdf',
361 // component: Layout, 373 // component: Layout,
362 // redirect: '/pdf/index', 374 // redirect: '/pdf/index',
363 // children: [ 375 // children: [
364 // { 376 // {
365 // path: 'index', 377 // path: 'index',
366 // component: () => import('@/views/pdf/index'), 378 // component: () => import('@/views/pdf/index'),
367 // name: 'PDF', 379 // name: 'PDF',
368 // meta: { title: 'pdf', icon: 'pdf' } 380 // meta: { title: 'pdf', icon: 'pdf' }
369 // } 381 // }
370 // ] 382 // ]
371 // }, 383 // },
372 // { 384 // {
373 // path: '/pdf/download', 385 // path: '/pdf/download',
374 // component: () => import('@/views/pdf/download'), 386 // component: () => import('@/views/pdf/download'),
375 // hidden: true 387 // hidden: true
376 // }, 388 // },
377 389
378 // { 390 // {
379 // path: '/theme', 391 // path: '/theme',
380 // component: Layout, 392 // component: Layout,
381 // children: [ 393 // children: [
382 // { 394 // {
383 // path: 'index', 395 // path: 'index',
384 // component: () => import('@/views/theme/index'), 396 // component: () => import('@/views/theme/index'),
385 // name: 'Theme', 397 // name: 'Theme',
386 // meta: { title: 'theme', icon: 'theme' } 398 // meta: { title: 'theme', icon: 'theme' }
387 // } 399 // }
388 // ] 400 // ]
389 // }, 401 // },
390 402
391 // { 403 // {
392 // path: '/clipboard', 404 // path: '/clipboard',
393 // component: Layout, 405 // component: Layout,
394 // children: [ 406 // children: [
395 // { 407 // {
396 // path: 'index', 408 // path: 'index',
397 // component: () => import('@/views/clipboard/index'), 409 // component: () => import('@/views/clipboard/index'),
398 // name: 'ClipboardDemo', 410 // name: 'ClipboardDemo',
399 // meta: { title: 'clipboardDemo', icon: 'clipboard' } 411 // meta: { title: 'clipboardDemo', icon: 'clipboard' }
400 // } 412 // }
401 // ] 413 // ]
402 // }, 414 // },
403 415
404 // { 416 // {
405 // path: '/i18n', 417 // path: '/i18n',
406 // component: Layout, 418 // component: Layout,
407 // children: [ 419 // children: [
408 // { 420 // {
409 // path: 'index', 421 // path: 'index',
410 // component: () => import('@/views/i18n-demo/index'), 422 // component: () => import('@/views/i18n-demo/index'),
411 // name: 'I18n', 423 // name: 'I18n',
412 // meta: { title: 'i18n', icon: 'international' } 424 // meta: { title: 'i18n', icon: 'international' }
413 // } 425 // }
414 // ] 426 // ]
415 // }, 427 // },
416 428
417 // { 429 // {
418 // path: 'external-link', 430 // path: 'external-link',
419 // component: Layout, 431 // component: Layout,
420 // children: [ 432 // children: [
421 // { 433 // {
422 // path: 'https://github.com/PanJiaChen/vue-element-admin', 434 // path: 'https://github.com/PanJiaChen/vue-element-admin',
423 // meta: { title: 'externalLink', icon: 'link' } 435 // meta: { title: 'externalLink', icon: 'link' }
424 // } 436 // }
425 // ] 437 // ]
426 // }, 438 // },
427 439
428 // 404 page must be placed at the end !!! 440 // 404 page must be placed at the end !!!
429 { 441 {
430 path: '*', 442 path: '*',
431 redirect: '/404', 443 redirect: '/404',
432 hidden: true 444 hidden: true
433 } 445 }
434 ] 446 ]
435 447
436 const createRouter = () => new Router({ 448 const createRouter = () => new Router({
437 // mode: 'history', // require service support 449 // mode: 'history', // require service support
438 scrollBehavior: () => ({ 450 scrollBehavior: () => ({
439 y: 0 451 y: 0
440 }), 452 }),
441 routes: constantRoutes 453 routes: constantRoutes
442 }) 454 })
443 455
444 const router = createRouter() 456 const router = createRouter()
445 457
446 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465 458 // Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
447 export function resetRouter() { 459 export function resetRouter() {
448 const newRouter = createRouter() 460 const newRouter = createRouter()
449 router.matcher = newRouter.matcher // reset router 461 router.matcher = newRouter.matcher // reset router
450 } 462 }
451 463
452 export default router 464 export default router
453 465
src/router/modules/application.js
Diff comments   View file @fe44789
File was created 1 import Layout from '@/layout'
2
3 const applicationRouter = {
4 path: '/application',
5 component: Layout,
6 redirect: '/application/page',
7 alwaysShow: true, // will always show the root menu
8 name: 'Application',
9 meta: {
10 title: '应用',
11 icon: 'component',
12 roles: ['admin', 'assistant'] // you can set roles in root nav
13 },
14 children: [{
15 path: 'appManage',
16 component: () => import('@/views/application/appManage'),
17 name: 'appManage',
18 meta: {
19 title: '应用管理',
20 icon: 'component',
21 roles: ['admin', 'assistant'] // or you can only set roles in sub nav
22 }
23 }]
24 }
25 export default applicationRouter
26
src/router/modules/logistics.js
Diff comments   View file @fe44789
File was created 1 import Layout from '@/layout'
2
3 const logisticsRouter = {
4 path: '/logistics',
5 component: Layout,
6 redirect: '/logistics/page',
7 alwaysShow: true, // will always show the root menu
8 name: 'logistics',
9 meta: {
10 title: '物流',
11 icon: 'tree-table',
12 roles: ['admin', 'assistant'] // you can set roles in root nav
13 },
14 children: [{
15 path: 'logisticspage',
16 component: () => import('@/views/logistics/logistics'),
17 name: 'logistics',
18 meta: {
19 title: '物流管理',
20 icon: 'tree-table',
21 roles: ['admin', 'assistant'] // or you can only set roles in sub nav
22 }
23 }]
24 }
25 export default logisticsRouter
26
src/router/modules/manufacturer.js
Diff comments   View file @fe44789
File was created 1 import Layout from '@/layout'
2
3 const manufacturerRouter = {
4 path: '/manufacturer',
5 component: Layout,
6 redirect: '/manufacturer/page',
7 alwaysShow: true, // will always show the root menu
8 name: 'manufacturer',
9 meta: {
10 title: '厂商',
11 icon: 'tree-table',
12 roles: ['admin', 'assistant'] // you can set roles in root nav
13 },
14 children: [{
15 path: 'manufacturerpage',
16 component: () => import('@/views/manufacturer/manufacturer'),
17 name: 'manufacturer',
18 meta: {
19 title: '厂商管理',
20 icon: 'tree-table',
21 roles: ['admin', 'assistant'] // or you can only set roles in sub nav
22 }
23 }]
24 }
25 export default manufacturerRouter
26
src/router/modules/meta.js
Diff comments   View file @fe44789
1 import Layout from '@/layout' 1 import Layout from '@/layout'
2 2
3 const metaRouter = { 3 const metaRouter = {
4 path: '/meta', 4 path: '/meta',
5 component: Layout, 5 component: Layout,
6 redirect: '/meta/page', 6 redirect: '/meta/page',
7 alwaysShow: true, // will always show the root menu 7 alwaysShow: true, // will always show the root menu
8 name: 'Meta', 8 name: 'Meta',
9 meta: { 9 meta: {
10 title: 'metas.metas', 10 title: '元定义',
11 icon: 'zip', 11 icon: 'tree',
12 roles: ['admin', 'assistant'] // you can set roles in root nav 12 roles: ['admin', 'assistant'] // you can set roles in root nav
13 }, 13 },
14 children: [{ 14 children: [{
15 path: 'metapage', 15 path: 'metapage',
16 component: () => import('@/views/meta/tree'), 16 component: () => import('@/views/meta/tree'),
17 name: 'MetaList', 17 name: 'MetaList',
18 meta: { 18 meta: {
19 title: 'metas.list', 19 title: 'metas.list',
20 icon: 'zip', 20 icon: 'tree',
21 roles: ['admin', 'assistant'] // or you can only set roles in sub nav 21 roles: ['admin', 'assistant'] // or you can only set roles in sub nav
22 } 22 }
23 }] 23 }]
24 } 24 }
25 export default metaRouter 25 export default metaRouter
26 26
src/router/modules/operations.js
Diff comments   View file @fe44789
File was created 1 import Layout from '@/layout'
2
3 const operationsRouter = {
4 path: '/operations',
5 component: Layout,
6 redirect: '/operations/page',
7 alwaysShow: true, // will always show the root menu
8 name: 'operations',
9 meta: {
10 title: '运营官',
11 icon: 'user',
12 roles: ['admin', 'assistant'] // you can set roles in root nav
13 },
14 children: [{
15 path: 'operationsManage',
16 component: () => import('@/views/operations/operations'),
17 name: 'operations',
18 meta: {
19 title: '运营官管理',
20 icon: 'user',
21 roles: ['admin', 'assistant'] // or you can only set roles in sub nav
22 }
23 }]
24 }
25 export default operationsRouter
26
src/router/modules/recommend.js
Diff comments   View file @fe44789
File was created 1 import Layout from '@/layout'
2
3 const recommendRouter = {
4 path: '/recommend',
5 component: Layout,
6 redirect: '/recommend/page',
7 alwaysShow: true, // will always show the root menu
8 name: 'recommend',
9 meta: {
10 title: '推荐',
11 icon: 'table',
12 roles: ['admin', 'assistant'] // you can set roles in root nav
13 },
14 children: [{
15 path: 'recommendpage',
16 component: () => import('@/views/recommend/recommend'),
17 name: 'recommend',
18 meta: {
19 title: '推荐系统',
20 icon: 'table',
21 roles: ['admin', 'assistant'] // or you can only set roles in sub nav
22 }
23 }]
24 }
25 export default recommendRouter
26
src/router/modules/staff.js
Diff comments   View file @fe44789
File was created 1 import Layout from '@/layout'
2
3 const staffRouter = {
4 path: '/staff',
5 component: Layout,
6 redirect: '/staff/page',
7 alwaysShow: true, // will always show the root menu
8 name: 'staff',
9 meta: {
10 title: '员工',
11 icon: 'people',
12 roles: ['admin', 'assistant'] // you can set roles in root nav
13 },
14 children: [{
15 path: 'staffpage',
16 component: () => import('@/views/staff/staff'),
17 name: 'staff',
18 meta: {
19 title: '员工管理',
20 icon: 'people',
21 roles: ['admin', 'assistant'] // or you can only set roles in sub nav
22 }
23 }]
24 }
25 export default staffRouter
26
src/views/application/appManage.vue
Diff comments   View file @fe44789
File was created 1 <template>
2 <div class="login-container">
3 <el-button
4 type="primary"
5 @click="() => addNode()"
6 >{{ $t('users.add') }}</el-button>
7 <el-tree
8 ref="tree"
9 :data="data"
10 show-checkbox
11 node-key="id"
12 highlight-current
13 check-strictly
14 indent="40"
15 icon-class="el-icon-pc"
16 :props="defaultProps"
17 >
18 <!-- <el-tree
19 :data="data"
20 show-checkbox
21 node-key="id"
22 default-expand-all
23 highlight-current
24 isLeaf
25 @node-contextmenu="()=>rightKey(node, data)"
26 check-strictly//在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
27 :expand-on-click-node="false"//是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
28 :props="defaultProps"
29 > -->
30 <span
31 slot-scope="{ node, data }"
32 class="custom-tree-node"
33 >
34 <span>{{ node.label }}</span>
35 <span>
36 <el-button
37 type="primary"
38 icon="el-icon-upload"
39 size="mini"
40 @click="() => append(data)"
41 >
42 {{ $t('users.add') }}
43 </el-button>
44 <el-button
45 type="primary"
46 icon="el-icon-edit"
47 size="mini"
48 @click="() => update(node, data)"
49 >
50 {{ $t('users.update') }}
51 </el-button>
52 <el-button
53 type="primary"
54 icon="el-icon-delete"
55 size="mini"
56 class="danger"
57 @click="() => remove(node, data)"
58 >
59 {{ $t('users.del') }}
60 </el-button>
61 </span>
62 </span>
63 </el-tree>
64
65 <!-- <div class="buttons">
66 <el-button @click="getCheckedNodes">通过 node 获取</el-button>
67 <el-button @click="getCheckedKeys">通过 key 获取</el-button>
68 <el-button @click="setCheckedNodes">通过 node 设置</el-button>
69 <el-button @click="setCheckedKeys">通过 key 设置</el-button>
70 <el-button @click="resetChecked">清空</el-button>
71 </div> -->
72 </div>
73 </template>
74 <script>
75 let id = 1000
76 export default {
77 data() {
78 return {
79 data: [
80 {
81 label: '成镜',
82 id: '1',
83 children: [
84 {
85 label: '款式',
86 id: '11',
87 children: [
88 { label: '青春学子风' },
89 { label: '休闲' },
90 { label: '商务' },
91 { label: '复古' },
92 { label: '时尚' },
93 { label: '质感哥特潮' },
94 { label: '轻简北欧风' },
95 { label: '理性几何派' },
96 { label: '多元新风尚' },
97 { label: '立体巴洛克' },
98 { label: '有机未来时' },
99 { label: '无界人文系' },
100 { label: '自然舒视角' },
101 { label: '流线洛可可' },
102 { label: '奶奶风' },
103 { label: '简约-极简文艺范' },
104 { label: '运动风' },
105 { label: '行政风' },
106 { label: '折射率' }
107 ]
108 },
109 { label: '个性化服务', id: '267', children: [] },
110 {
111 label: '赠品',
112 id: '259',
113 children: [{ label: '眼镜布' }, { label: '眼镜盒' }]
114 },
115 {
116 label: '场景',
117 id: '258',
118 children: [
119 { label: '学校场景' },
120 { label: '出行交际' },
121 { label: '夜店迷人' },
122 { label: '明星同款' }
123 ]
124 },
125 {
126 label: '销售保障',
127 id: '245',
128 children: [
129 { label: '可退' },
130 { label: '可换' },
131 { label: '可修' }
132 ]
133 },
134 {
135 label: '功能',
136 id: '140',
137 children: [
138 { label: '防踩压' },
139 { label: '防扭曲' },
140 { label: '抗过敏' },
141 { label: '防腐蚀' },
142 { label: '耐磨损' },
143 { label: '抗蓝光' }
144 ]
145 },
146 {
147 label: '品牌',
148 id: '71',
149 children: [
150 { label: '购易' },
151 { label: '海俪恩' },
152 { label: '沙漠风暴' },
153 { label: '古诗' },
154 { label: '暴龙' },
155 { label: '犀牛' },
156 { label: 'Ray-Ban雷朋' },
157 { label: 'PARIM派丽蒙' },
158 { label: '石狼' },
159 { label: '木九十' }
160 ]
161 },
162 {
163 label: '边形',
164 id: '49',
165 children: [
166 { label: '半框' },
167 { label: '全框' },
168 { label: '无框' }
169 ]
170 },
171 {
172 label: '性别',
173 id: '23',
174 children: [{ label: '男性' }, { label: '女性' }]
175 },
176 {
177 label: '梁型',
178 id: '20',
179 children: [{ label: '双梁' }, { label: '单梁' }]
180 },
181 {
182 label: '重量',
183 id: '19',
184 children: [{ label: '30克以下' }, { label: '80克以上' }]
185 },
186 {
187 label: '适用脸型',
188 id: '15',
189 children: [{ label: '方' }, { label: '圆' }, { label: '瓜子' }]
190 },
191 {
192 label: '形状',
193 id: '14',
194 children: [
195 { label: '正圆形' },
196 { label: '椭圆形' },
197 { label: '方圆' },
198 { label: '方形' },
199 { label: '多边形' },
200 { label: '内三角(蛤蟆)' },
201 { label: '外三角(蝶形)' }
202 ]
203 },
204 { label: '年龄', id: '12', children: [{ label: '通用' }] },
205 {
206 label: '材质',
207 id: '10',
208 children: [
209 { label: '板材' },
210 { label: '纯钛' },
211 { label: 'TR90' },
212 { label: '木质' },
213 { label: '竹质' },
214 { label: 'β钛' },
215 { label: 'PC' },
216 { label: 'ULTEM塑钢' },
217 { label: '钨钛塑钢' },
218 { label: '镁铝合金' },
219 { label: '碳纤维' }
220 ]
221 },
222 { label: '折射率', id: '286', children: [] },
223 {
224 label: '颜色',
225 id: '13',
226 children: [
227 { label: '金色' },
228 { label: '银色' },
229 { label: '黑色' },
230 { label: '彩色' },
231 { label: '枪色' }
232 ]
233 }
234 ]
235 },
236 {
237 label: '镜片',
238 id: '2',
239 children: [
240 {
241 label: '面型',
242 id: '85',
243 children: [{ label: '球面单光' }, { label: '非球面单光' }]
244 },
245 { label: '近视度数', id: '92', children: [] },
246 { label: '散光', id: '93', children: [] },
247 {
248 label: '功能',
249 id: '95',
250 children: [
251 { label: '防起雾' },
252 { label: '防蓝光' },
253 { label: '防紫外线' },
254 { label: '偏光' },
255 { label: '染色' },
256 { label: '抗疲劳' },
257 { label: '青少年渐进' },
258 { label: '内渐进' },
259 { label: '变色' },
260 { label: '双光' },
261 { label: '耐磨损' },
262 { label: '防尘' },
263 { label: '防水' },
264 { label: '防摔' },
265 { label: '防指纹' },
266 { label: '防反光' }
267 ]
268 },
269 {
270 label: '颜色',
271 id: '100',
272 children: [
273 { label: '透明' },
274 { label: '染色' },
275 { label: '变色' },
276 { label: '单色' }
277 ]
278 },
279 {
280 label: '折射率',
281 id: '101',
282 children: [
283 { label: '1.56' },
284 { label: '1.60' },
285 { label: '1.65' },
286 { label: '1.67' },
287 { label: '1.71' },
288 { label: '1.74' }
289 ]
290 },
291 { label: '阿贝数（色散）', id: '102', children: [] },
292 { label: '重量', id: '103', children: [] },
293 {
294 label: '材质',
295 id: '104',
296 children: [
297 { label: '树脂' },
298 { label: '玻璃' },
299 { label: '宇宙PC' },
300 { label: 'PC' }
301 ]
302 },
303 {
304 label: '品牌',
305 id: '118',
306 children: [
307 { label: '好视力' },
308 { label: 'RAISE锐视' },
309 { label: '依视路' },
310 { label: '凯米' },
311 { label: '蔡司' },
312 { label: '舒曼' }
313 ]
314 },
315 {
316 label: '销售保障',
317 id: '249',
318 children: [
319 { label: '可退' },
320 { label: '可换' },
321 { label: '可修' }
322 ]
323 }
324 ]
325 },
326 {
327 label: '隐形眼镜',
328 id: '88',
329 children: [
330 {
331 label: '颜色',
332 id: '105',
333 children: [
334 { label: '绿' },
335 { label: '灰' },
336 { label: '黑' },
337 { label: '紫' },
338 { label: '蓝' },
339 { label: '棕色' },
340 { label: '紫色' }
341 ]
342 },
343 {
344 label: '颜料',
345 id: '106',
346 children: [{ label: '水性' }, { label: '油性' }]
347 },
348 { label: '度数', id: '107', children: [] },
349 {
350 label: '周期',
351 id: '108',
352 children: [
353 { label: '日抛' },
354 { label: '周抛' },
355 { label: '双周抛' },
356 { label: '月抛' },
357 { label: '季抛' },
358 { label: '半年抛' },
359 { label: '年抛' }
360 ]
361 },
362 {
363 label: '品牌',
364 id: '133',
365 children: [
366 { label: 'HolyNara' },
367 { label: '爱尔康' },
368 { label: 'MaxLook' },
369 { label: 'NEO' },
370 { label: 'GEO' },
371 { label: '实瞳' },
372 { label: '茵洛' },
373 { label: 'DAZZSHOP' },
374 { label: 'O-LENS' },
375 { label: 'envie' },
376 { label: '曼秀雷敦' },
377 { label: '妃蜜莉' },
378 { label: '海俪恩' },
379 { label: '凯达' },
380 { label: '蔡司' },
381 { label: '酷视' },
382 { label: 'LILMOON' },
383 { label: 'RICHBABY' },
384 { label: 'T-Garden' },
385 { label: 'lenstown' },
386 { label: '新加坡P2' },
387 { label: '星欧' },
388 { label: '美尼康' },
389 { label: '美汐' },
390 { label: '欧舒天' },
391 { label: '海昌' },
392 { label: '菲士康' },
393 { label: '卫康' },
394 { label: '库博' },
395 { label: '安视优' },
396 { label: '美若康' },
397 { label: '视康' },
398 { label: '澜柏' },
399 { label: '3N' },
400 { label: 'BIJOU' },
401 { label: '依视明' },
402 { label: '博士伦' },
403 { label: '瞳昕' },
404 { label: '科莱博' },
405 { label: '绮芙莉' },
406 { label: '雅培' },
407 { label: '爱能视' },
408 { label: '女神秘语' },
409 { label: '博视顿' },
410 { label: '妆美堂' },
411 { label: '人鱼姬' },
412 { label: 'EverColor' },
413 { label: 'Sincere' }
414 ]
415 },
416 {
417 label: '工艺',
418 id: '159',
419 children: [{ label: '涂层工艺' }, { label: '三层夹色工艺' }]
420 },
421 {
422 label: '材质',
423 id: '164',
424 children: [{ label: '硅水凝胶' }, { label: '水凝胶' }]
425 },
426 {
427 label: '含水量',
428 id: '174',
429 children: [
430 { label: '0-40%' },
431 { label: '40-44%' },
432 { label: '45%以上' }
433 ]
434 },
435 {
436 label: '基弧',
437 id: '178',
438 children: [{ label: '0.0-8.4' }, { label: '8.4以上' }]
439 },
440 {
441 label: '直径',
442 id: '181',
443 children: [{ label: '13.4-14' }, { label: '14以上' }]
444 },
445 {
446 label: '中心厚度',
447 id: '184',
448 children: [
449 { label: '0.0 - 0.03' },
450 { label: '0.04 - 0.09' },
451 { label: '0.1以上' }
452 ]
453 },
454 { label: '销售保障', id: '253', children: [] },
455 { label: '赠品', id: '260', children: [] }
456 ]
457 },
458 {
459 label: '特种镜',
460 id: '146',
461 children: [
462 {
463 label: '镜面颜色',
464 id: '237',
465 children: [{ label: '透明' }, { label: '亮金色' }]
466 },
467 {
468 label: '品牌',
469 id: '238',
470 children: [{ label: '宁哥牌' }, { label: '秀野牌' }]
471 },
472 {
473 label: '销售保障',
474 id: '254',
475 children: [{ label: '包退' }, { label: '包换' }]
476 },
477 {
478 label: '功能',
479 id: '268',
480 children: [
481 { label: '防风镜' },
482 { label: '防爆溅工作镜' },
483 { label: '泳镜' },
484 { label: '智能镜' }
485 ]
486 }
487 ]
488 }
489 ],
490 defaultProps: {
491 children: 'children',
492 label: 'label'
493 }
494 }
495 },
496 methods: {
497 getCheckedNodes() {
498 console.log(this.$refs.tree.getCheckedNodes())
499 },
500 getCheckedKeys() {
501 console.log(this.$refs.tree.getCheckedKeys())
502 },
503 addNode() {
504 let h
505 this.$message({
506 message: h('p', null, [
507 h('span', null, '添加一个新节点 ')
508 // h("i", { style: "color: teal" }, "VNode")
509 ])
510 })
511 },
512 append(data) {
513 const newChild = { id: id++, label: 'testtest', children: [] }
514 if (!data.children) {
515 this.$set(data, 'children', [])
516 }
517 data.children.push(newChild)
518 },
519 remove(node, data) {
520 // 删除
521 const parent = node.parent
522 const children = parent.data.children || parent.data
523 const index = children.findIndex(d => d.id === data.id)
524 children.splice(index, 1)
525 },
526 rightKey(node, data) {
527 // 右键
528 const h = this.$createElement
529 // console.log(data, this.$refs.tree);
530 this.$message({
531 message: h('p', null, [
532 h('span', null, '右键了啊！ ' + node + data),
533 h('i', { style: 'color: teal' }, 'VNode')
534 ])
535 })
536 },
537 update(node, data) {
538 // 更新
539 const h = this.$createElement
540 this.$message({
541 message: h('p', null, [
542 h('span', null, '内容可以是 '),
543 h('i', { style: 'color: teal' }, 'VNode')
544 ])
545 })
546 },
547 setCheckedNodes() {
548 this.$refs.tree.setCheckedNodes([
549 {
550 id: 5,
551 label: '二级 2-1'
552 },
553 {
554 id: 9,
555 label: '三级 1-1-1'
556 }
557 ])
558 },
559 setCheckedKeys() {
560 this.$refs.tree.setCheckedKeys([3])
561 },
562 resetChecked() {
563 this.$refs.tree.setCheckedKeys([])
564 }
565 }
566 }
567 </script>
568 <style>
569 .custom-tree-node {
570 flex: 1;
571 display: flex;
572 align-items: center;
573 justify-content: space-between;
574 font-size: 14px;
575 padding-right: 8px;
576 }
577 </style>
578
src/views/logistics/logistics.vue
Diff comments   View file @fe44789
File was created 1 <template>
2 <div class="login-container">
3 <el-button
4 type="primary"
5 @click="() => addNode()"
6 >{{ $t('users.add') }}</el-button>
7 <el-tree
8 ref="tree"
9 :data="data"
10 show-checkbox
11 node-key="id"
12 highlight-current
13 check-strictly
14 indent="40"
15 icon-class="el-icon-pc"
16 :props="defaultProps"
17 >
18 <!-- <el-tree
19 :data="data"
20 show-checkbox
21 node-key="id"
22 default-expand-all
23 highlight-current
24 isLeaf
25 @node-contextmenu="()=>rightKey(node, data)"
26 check-strictly//在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
27 :expand-on-click-node="false"//是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
28 :props="defaultProps"
29 > -->
30 <span
31 slot-scope="{ node, data }"
32 class="custom-tree-node"
33 >
34 <span>{{ node.label }}</span>
35 <span>
36 <el-button
37 type="primary"
38 icon="el-icon-upload"
39 size="mini"
40 @click="() => append(data)"
41 >
42 {{ $t('users.add') }}
43 </el-button>
44 <el-button
45 type="primary"
46 icon="el-icon-edit"
47 size="mini"
48 @click="() => update(node, data)"
49 >
50 {{ $t('users.update') }}
51 </el-button>
52 <el-button
53 type="primary"
54 icon="el-icon-delete"
55 size="mini"
56 class="danger"
57 @click="() => remove(node, data)"
58 >
59 {{ $t('users.del') }}
60 </el-button>
61 </span>
62 </span>
63 </el-tree>
64
65 <!-- <div class="buttons">
66 <el-button @click="getCheckedNodes">通过 node 获取</el-button>
67 <el-button @click="getCheckedKeys">通过 key 获取</el-button>
68 <el-button @click="setCheckedNodes">通过 node 设置</el-button>
69 <el-button @click="setCheckedKeys">通过 key 设置</el-button>
70 <el-button @click="resetChecked">清空</el-button>
71 </div> -->
72 </div>
73 </template>
74 <script>
75 let id = 1000
76 export default {
77 data() {
78 return {
79 data: [
80 {
81 label: '成镜',
82 id: '1',
83 children: [
84 {
85 label: '款式',
86 id: '11',
87 children: [
88 { label: '青春学子风' },
89 { label: '休闲' },
90 { label: '商务' },
91 { label: '复古' },
92 { label: '时尚' },
93 { label: '质感哥特潮' },
94 { label: '轻简北欧风' },
95 { label: '理性几何派' },
96 { label: '多元新风尚' },
97 { label: '立体巴洛克' },
98 { label: '有机未来时' },
99 { label: '无界人文系' },
100 { label: '自然舒视角' },
101 { label: '流线洛可可' },
102 { label: '奶奶风' },
103 { label: '简约-极简文艺范' },
104 { label: '运动风' },
105 { label: '行政风' },
106 { label: '折射率' }
107 ]
108 },
109 { label: '个性化服务', id: '267', children: [] },
110 {
111 label: '赠品',
112 id: '259',
113 children: [{ label: '眼镜布' }, { label: '眼镜盒' }]
114 },
115 {
116 label: '场景',
117 id: '258',
118 children: [
119 { label: '学校场景' },
120 { label: '出行交际' },
121 { label: '夜店迷人' },
122 { label: '明星同款' }
123 ]
124 },
125 {
126 label: '销售保障',
127 id: '245',
128 children: [
129 { label: '可退' },
130 { label: '可换' },
131 { label: '可修' }
132 ]
133 },
134 {
135 label: '功能',
136 id: '140',
137 children: [
138 { label: '防踩压' },
139 { label: '防扭曲' },
140 { label: '抗过敏' },
141 { label: '防腐蚀' },
142 { label: '耐磨损' },
143 { label: '抗蓝光' }
144 ]
145 },
146 {
147 label: '品牌',
148 id: '71',
149 children: [
150 { label: '购易' },
151 { label: '海俪恩' },
152 { label: '沙漠风暴' },
153 { label: '古诗' },
154 { label: '暴龙' },
155 { label: '犀牛' },
156 { label: 'Ray-Ban雷朋' },
157 { label: 'PARIM派丽蒙' },
158 { label: '石狼' },
159 { label: '木九十' }
160 ]
161 },
162 {
163 label: '边形',
164 id: '49',
165 children: [
166 { label: '半框' },
167 { label: '全框' },
168 { label: '无框' }
169 ]
170 },
171 {
172 label: '性别',
173 id: '23',
174 children: [{ label: '男性' }, { label: '女性' }]
175 },
176 {
177 label: '梁型',
178 id: '20',
179 children: [{ label: '双梁' }, { label: '单梁' }]
180 },
181 {
182 label: '重量',
183 id: '19',
184 children: [{ label: '30克以下' }, { label: '80克以上' }]
185 },
186 {
187 label: '适用脸型',
188 id: '15',
189 children: [{ label: '方' }, { label: '圆' }, { label: '瓜子' }]
190 },
191 {
192 label: '形状',
193 id: '14',
194 children: [
195 { label: '正圆形' },
196 { label: '椭圆形' },
197 { label: '方圆' },
198 { label: '方形' },
199 { label: '多边形' },
200 { label: '内三角(蛤蟆)' },
201 { label: '外三角(蝶形)' }
202 ]
203 },
204 { label: '年龄', id: '12', children: [{ label: '通用' }] },
205 {
206 label: '材质',
207 id: '10',
208 children: [
209 { label: '板材' },
210 { label: '纯钛' },
211 { label: 'TR90' },
212 { label: '木质' },
213 { label: '竹质' },
214 { label: 'β钛' },
215 { label: 'PC' },
216 { label: 'ULTEM塑钢' },
217 { label: '钨钛塑钢' },
218 { label: '镁铝合金' },
219 { label: '碳纤维' }
220 ]
221 },
222 { label: '折射率', id: '286', children: [] },
223 {
224 label: '颜色',
225 id: '13',
226 children: [
227 { label: '金色' },
228 { label: '银色' },
229 { label: '黑色' },
230 { label: '彩色' },
231 { label: '枪色' }
232 ]
233 }
234 ]
235 },
236 {
237 label: '镜片',
238 id: '2',
239 children: [
240 {
241 label: '面型',
242 id: '85',
243 children: [{ label: '球面单光' }, { label: '非球面单光' }]
244 },
245 { label: '近视度数', id: '92', children: [] },
246 { label: '散光', id: '93', children: [] },
247 {
248 label: '功能',
249 id: '95',
250 children: [
251 { label: '防起雾' },
252 { label: '防蓝光' },
253 { label: '防紫外线' },
254 { label: '偏光' },
255 { label: '染色' },
256 { label: '抗疲劳' },
257 { label: '青少年渐进' },
258 { label: '内渐进' },
259 { label: '变色' },
260 { label: '双光' },
261 { label: '耐磨损' },
262 { label: '防尘' },
263 { label: '防水' },
264 { label: '防摔' },
265 { label: '防指纹' },
266 { label: '防反光' }
267 ]
268 },
269 {
270 label: '颜色',
271 id: '100',
272 children: [
273 { label: '透明' },
274 { label: '染色' },
275 { label: '变色' },
276 { label: '单色' }
277 ]
278 },
279 {
280 label: '折射率',
281 id: '101',
282 children: [
283 { label: '1.56' },
284 { label: '1.60' },
285 { label: '1.65' },
286 { label: '1.67' },
287 { label: '1.71' },
288 { label: '1.74' }
289 ]
290 },
291 { label: '阿贝数（色散）', id: '102', children: [] },
292 { label: '重量', id: '103', children: [] },
293 {
294 label: '材质',
295 id: '104',
296 children: [
297 { label: '树脂' },
298 { label: '玻璃' },
299 { label: '宇宙PC' },
300 { label: 'PC' }
301 ]
302 },
303 {
304 label: '品牌',
305 id: '118',
306 children: [
307 { label: '好视力' },
308 { label: 'RAISE锐视' },
309 { label: '依视路' },
310 { label: '凯米' },
311 { label: '蔡司' },
312 { label: '舒曼' }
313 ]
314 },
315 {
316 label: '销售保障',
317 id: '249',
318 children: [
319 { label: '可退' },
320 { label: '可换' },
321 { label: '可修' }
322 ]
323 }
324 ]
325 },
326 {
327 label: '隐形眼镜',
328 id: '88',
329 children: [
330 {
331 label: '颜色',
332 id: '105',
333 children: [
334 { label: '绿' },
335 { label: '灰' },
336 { label: '黑' },
337 { label: '紫' },
338 { label: '蓝' },
339 { label: '棕色' },
340 { label: '紫色' }
341 ]
342 },
343 {
344 label: '颜料',
345 id: '106',
346 children: [{ label: '水性' }, { label: '油性' }]
347 },
348 { label: '度数', id: '107', children: [] },
349 {
350 label: '周期',
351 id: '108',
352 children: [
353 { label: '日抛' },
354 { label: '周抛' },
355 { label: '双周抛' },
356 { label: '月抛' },
357 { label: '季抛' },
358 { label: '半年抛' },
359 { label: '年抛' }
360 ]
361 },
362 {
363 label: '品牌',
364 id: '133',
365 children: [
366 { label: 'HolyNara' },
367 { label: '爱尔康' },
368 { label: 'MaxLook' },
369 { label: 'NEO' },
370 { label: 'GEO' },
371 { label: '实瞳' },
372 { label: '茵洛' },
373 { label: 'DAZZSHOP' },
374 { label: 'O-LENS' },
375 { label: 'envie' },
376 { label: '曼秀雷敦' },
377 { label: '妃蜜莉' },
378 { label: '海俪恩' },
379 { label: '凯达' },
380 { label: '蔡司' },
381 { label: '酷视' },
382 { label: 'LILMOON' },
383 { label: 'RICHBABY' },
384 { label: 'T-Garden' },
385 { label: 'lenstown' },
386 { label: '新加坡P2' },
387 { label: '星欧' },
388 { label: '美尼康' },
389 { label: '美汐' },
390 { label: '欧舒天' },
391 { label: '海昌' },
392 { label: '菲士康' },
393 { label: '卫康' },
394 { label: '库博' },
395 { label: '安视优' },
396 { label: '美若康' },
397 { label: '视康' },
398 { label: '澜柏' },
399 { label: '3N' },
400 { label: 'BIJOU' },
401 { label: '依视明' },
402 { label: '博士伦' },
403 { label: '瞳昕' },
404 { label: '科莱博' },
405 { label: '绮芙莉' },
406 { label: '雅培' },
407 { label: '爱能视' },
408 { label: '女神秘语' },
409 { label: '博视顿' },
410 { label: '妆美堂' },
411 { label: '人鱼姬' },
412 { label: 'EverColor' },
413 { label: 'Sincere' }
414 ]
415 },
416 {
417 label: '工艺',
418 id: '159',
419 children: [{ label: '涂层工艺' }, { label: '三层夹色工艺' }]
420 },
421 {
422 label: '材质',
423 id: '164',
424 children: [{ label: '硅水凝胶' }, { label: '水凝胶' }]
425 },
426 {
427 label: '含水量',
428 id: '174',
429 children: [
430 { label: '0-40%' },
431 { label: '40-44%' },
432 { label: '45%以上' }
433 ]
434 },
435 {
436 label: '基弧',
437 id: '178',
438 children: [{ label: '0.0-8.4' }, { label: '8.4以上' }]
439 },
440 {
441 label: '直径',
442 id: '181',
443 children: [{ label: '13.4-14' }, { label: '14以上' }]
444 },
445 {
446 label: '中心厚度',
447 id: '184',
448 children: [
449 { label: '0.0 - 0.03' },
450 { label: '0.04 - 0.09' },
451 { label: '0.1以上' }
452 ]
453 },
454 { label: '销售保障', id: '253', children: [] },
455 { label: '赠品', id: '260', children: [] }
456 ]
457 },
458 {
459 label: '特种镜',
460 id: '146',
461 children: [
462 {
463 label: '镜面颜色',
464 id: '237',
465 children: [{ label: '透明' }, { label: '亮金色' }]
466 },
467 {
468 label: '品牌',
469 id: '238',
470 children: [{ label: '宁哥牌' }, { label: '秀野牌' }]
471 },
472 {
473 label: '销售保障',
474 id: '254',
475 children: [{ label: '包退' }, { label: '包换' }]
476 },
477 {
478 label: '功能',
479 id: '268',
480 children: [
481 { label: '防风镜' },
482 { label: '防爆溅工作镜' },
483 { label: '泳镜' },
484 { label: '智能镜' }
485 ]
486 }
487 ]
488 }
489 ],
490 defaultProps: {
491 children: 'children',
492 label: 'label'
493 }
494 }
495 },
496 methods: {
497 getCheckedNodes() {
498 console.log(this.$refs.tree.getCheckedNodes())
499 },
500 getCheckedKeys() {
501 console.log(this.$refs.tree.getCheckedKeys())
502 },
503 addNode() {
504 let h
505 this.$message({
506 message: h('p', null, [
507 h('span', null, '添加一个新节点 ')
508 // h("i", { style: "color: teal" }, "VNode")
509 ])
510 })
511 },
512 append(data) {
513 const newChild = { id: id++, label: 'testtest', children: [] }
514 if (!data.children) {
515 this.$set(data, 'children', [])
516 }
517 data.children.push(newChild)
518 },
519 remove(node, data) {
520 // 删除
521 const parent = node.parent
522 const children = parent.data.children || parent.data
523 const index = children.findIndex(d => d.id === data.id)
524 children.splice(index, 1)
525 },
526 rightKey(node, data) {
527 // 右键
528 const h = this.$createElement
529 // console.log(data, this.$refs.tree);
530 this.$message({
531 message: h('p', null, [
532 h('span', null, '右键了啊！ ' + node + data),
533 h('i', { style: 'color: teal' }, 'VNode')
534 ])
535 })
536 },
537 update(node, data) {
538 // 更新
539 const h = this.$createElement
540 this.$message({
541 message: h('p', null, [
542 h('span', null, '内容可以是 '),
543 h('i', { style: 'color: teal' }, 'VNode')
544 ])
545 })
546 },
547 setCheckedNodes() {
548 this.$refs.tree.setCheckedNodes([
549 {
550 id: 5,
551 label: '二级 2-1'
552 },
553 {
554 id: 9,
555 label: '三级 1-1-1'
556 }
557 ])
558 },
559 setCheckedKeys() {
560 this.$refs.tree.setCheckedKeys([3])
561 },
562 resetChecked() {
563 this.$refs.tree.setCheckedKeys([])
564 }
565 }
566 }
567 </script>
568 <style>
569 .custom-tree-node {
570 flex: 1;
571 display: flex;
572 align-items: center;
573 justify-content: space-between;
574 font-size: 14px;
575 padding-right: 8px;
576 }
577 </style>
578
src/views/manufacturer/manufacturer.vue
Diff comments   View file @fe44789
File was created 1 <template>
2 <div class="login-container">
3 <el-button
4 type="primary"
5 @click="() => addNode()"
6 >{{ $t('users.add') }}</el-button>
7 <el-tree
8 ref="tree"
9 :data="data"
10 show-checkbox
11 node-key="id"
12 highlight-current
13 check-strictly
14 indent="40"
15 icon-class="el-icon-pc"
16 :props="defaultProps"
17 >
18 <!-- <el-tree
19 :data="data"
20 show-checkbox
21 node-key="id"
22 default-expand-all
23 highlight-current
24 isLeaf
25 @node-contextmenu="()=>rightKey(node, data)"
26 check-strictly//在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
27 :expand-on-click-node="false"//是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
28 :props="defaultProps"
29 > -->
30 <span
31 slot-scope="{ node, data }"
32 class="custom-tree-node"
33 >
34 <span>{{ node.label }}</span>
35 <span>
36 <el-button
37 type="primary"
38 icon="el-icon-upload"
39 size="mini"
40 @click="() => append(data)"
41 >
42 {{ $t('users.add') }}
43 </el-button>
44 <el-button
45 type="primary"
46 icon="el-icon-edit"
47 size="mini"
48 @click="() => update(node, data)"
49 >
50 {{ $t('users.update') }}
51 </el-button>
52 <el-button
53 type="primary"
54 icon="el-icon-delete"
55 size="mini"
56 class="danger"
57 @click="() => remove(node, data)"
58 >
59 {{ $t('users.del') }}
60 </el-button>
61 </span>
62 </span>
63 </el-tree>
64
65 <!-- <div class="buttons">
66 <el-button @click="getCheckedNodes">通过 node 获取</el-button>
67 <el-button @click="getCheckedKeys">通过 key 获取</el-button>
68 <el-button @click="setCheckedNodes">通过 node 设置</el-button>
69 <el-button @click="setCheckedKeys">通过 key 设置</el-button>
70 <el-button @click="resetChecked">清空</el-button>
71 </div> -->
72 </div>
73 </template>
74 <script>
75 let id = 1000
76 export default {
77 data() {
78 return {
79 data: [
80 {
81 label: '成镜',
82 id: '1',
83 children: [
84 {
85 label: '款式',
86 id: '11',
87 children: [
88 { label: '青春学子风' },
89 { label: '休闲' },
90 { label: '商务' },
91 { label: '复古' },
92 { label: '时尚' },
93 { label: '质感哥特潮' },
94 { label: '轻简北欧风' },
95 { label: '理性几何派' },
96 { label: '多元新风尚' },
97 { label: '立体巴洛克' },
98 { label: '有机未来时' },
99 { label: '无界人文系' },
100 { label: '自然舒视角' },
101 { label: '流线洛可可' },
102 { label: '奶奶风' },
103 { label: '简约-极简文艺范' },
104 { label: '运动风' },
105 { label: '行政风' },
106 { label: '折射率' }
107 ]
108 },
109 { label: '个性化服务', id: '267', children: [] },
110 {
111 label: '赠品',
112 id: '259',
113 children: [{ label: '眼镜布' }, { label: '眼镜盒' }]
114 },
115 {
116 label: '场景',
117 id: '258',
118 children: [
119 { label: '学校场景' },
120 { label: '出行交际' },
121 { label: '夜店迷人' },
122 { label: '明星同款' }
123 ]
124 },
125 {
126 label: '销售保障',
127 id: '245',
128 children: [
129 { label: '可退' },
130 { label: '可换' },
131 { label: '可修' }
132 ]
133 },
134 {
135 label: '功能',
136 id: '140',
137 children: [
138 { label: '防踩压' },
139 { label: '防扭曲' },
140 { label: '抗过敏' },
141 { label: '防腐蚀' },
142 { label: '耐磨损' },
143 { label: '抗蓝光' }
144 ]
145 },
146 {
147 label: '品牌',
148 id: '71',
149 children: [
150 { label: '购易' },
151 { label: '海俪恩' },
152 { label: '沙漠风暴' },
153 { label: '古诗' },
154 { label: '暴龙' },
155 { label: '犀牛' },
156 { label: 'Ray-Ban雷朋' },
157 { label: 'PARIM派丽蒙' },
158 { label: '石狼' },
159 { label: '木九十' }
160 ]
161 },
162 {
163 label: '边形',
164 id: '49',
165 children: [
166 { label: '半框' },
167 { label: '全框' },
168 { label: '无框' }
169 ]
170 },
171 {
172 label: '性别',
173 id: '23',
174 children: [{ label: '男性' }, { label: '女性' }]
175 },
176 {
177 label: '梁型',
178 id: '20',
179 children: [{ label: '双梁' }, { label: '单梁' }]
180 },
181 {
182 label: '重量',
183 id: '19',
184 children: [{ label: '30克以下' }, { label: '80克以上' }]
185 },
186 {
187 label: '适用脸型',
188 id: '15',
189 children: [{ label: '方' }, { label: '圆' }, { label: '瓜子' }]
190 },
191 {
192 label: '形状',
193 id: '14',
194 children: [
195 { label: '正圆形' },
196 { label: '椭圆形' },
197 { label: '方圆' },
198 { label: '方形' },
199 { label: '多边形' },
200 { label: '内三角(蛤蟆)' },
201 { label: '外三角(蝶形)' }
202 ]
203 },
204 { label: '年龄', id: '12', children: [{ label: '通用' }] },
205 {
206 label: '材质',
207 id: '10',
208 children: [
209 { label: '板材' },
210 { label: '纯钛' },
211 { label: 'TR90' },
212 { label: '木质' },
213 { label: '竹质' },
214 { label: 'β钛' },
215 { label: 'PC' },
216 { label: 'ULTEM塑钢' },
217 { label: '钨钛塑钢' },
218 { label: '镁铝合金' },
219 { label: '碳纤维' }
220 ]
221 },
222 { label: '折射率', id: '286', children: [] },
223 {
224 label: '颜色',
225 id: '13',
226 children: [
227 { label: '金色' },
228 { label: '银色' },
229 { label: '黑色' },
230 { label: '彩色' },
231 { label: '枪色' }
232 ]
233 }
234 ]
235 },
236 {
237 label: '镜片',
238 id: '2',
239 children: [
240 {
241 label: '面型',
242 id: '85',
243 children: [{ label: '球面单光' }, { label: '非球面单光' }]
244 },
245 { label: '近视度数', id: '92', children: [] },
246 { label: '散光', id: '93', children: [] },
247 {
248 label: '功能',
249 id: '95',
250 children: [
251 { label: '防起雾' },
252 { label: '防蓝光' },
253 { label: '防紫外线' },
254 { label: '偏光' },
255 { label: '染色' },
256 { label: '抗疲劳' },
257 { label: '青少年渐进' },
258 { label: '内渐进' },
259 { label: '变色' },
260 { label: '双光' },
261 { label: '耐磨损' },
262 { label: '防尘' },
263 { label: '防水' },
264 { label: '防摔' },
265 { label: '防指纹' },
266 { label: '防反光' }
267 ]
268 },
269 {
270 label: '颜色',
271 id: '100',
272 children: [
273 { label: '透明' },
274 { label: '染色' },
275 { label: '变色' },
276 { label: '单色' }
277 ]
278 },
279 {
280 label: '折射率',
281 id: '101',
282 children: [
283 { label: '1.56' },
284 { label: '1.60' },
285 { label: '1.65' },
286 { label: '1.67' },
287 { label: '1.71' },
288 { label: '1.74' }
289 ]
290 },
291 { label: '阿贝数（色散）', id: '102', children: [] },
292 { label: '重量', id: '103', children: [] },
293 {
294 label: '材质',
295 id: '104',
296 children: [
297 { label: '树脂' },
298 { label: '玻璃' },
299 { label: '宇宙PC' },
300 { label: 'PC' }
301 ]
302 },
303 {
304 label: '品牌',
305 id: '118',
306 children: [
307 { label: '好视力' },
308 { label: 'RAISE锐视' },
309 { label: '依视路' },
310 { label: '凯米' },
311 { label: '蔡司' },
312 { label: '舒曼' }
313 ]
314 },
315 {
316 label: '销售保障',
317 id: '249',
318 children: [
319 { label: '可退' },
320 { label: '可换' },
321 { label: '可修' }
322 ]
323 }
324 ]
325 },
326 {
327 label: '隐形眼镜',
328 id: '88',
329 children: [
330 {
331 label: '颜色',
332 id: '105',
333 children: [
334 { label: '绿' },
335 { label: '灰' },
336 { label: '黑' },
337 { label: '紫' },
338 { label: '蓝' },
339 { label: '棕色' },
340 { label: '紫色' }
341 ]
342 },
343 {
344 label: '颜料',
345 id: '106',
346 children: [{ label: '水性' }, { label: '油性' }]
347 },
348 { label: '度数', id: '107', children: [] },
349 {
350 label: '周期',
351 id: '108',
352 children: [
353 { label: '日抛' },
354 { label: '周抛' },
355 { label: '双周抛' },
356 { label: '月抛' },
357 { label: '季抛' },
358 { label: '半年抛' },
359 { label: '年抛' }
360 ]
361 },
362 {
363 label: '品牌',
364 id: '133',
365 children: [
366 { label: 'HolyNara' },
367 { label: '爱尔康' },
368 { label: 'MaxLook' },
369 { label: 'NEO' },
370 { label: 'GEO' },
371 { label: '实瞳' },
372 { label: '茵洛' },
373 { label: 'DAZZSHOP' },
374 { label: 'O-LENS' },
375 { label: 'envie' },
376 { label: '曼秀雷敦' },
377 { label: '妃蜜莉' },
378 { label: '海俪恩' },
379 { label: '凯达' },
380 { label: '蔡司' },
381 { label: '酷视' },
382 { label: 'LILMOON' },
383 { label: 'RICHBABY' },
384 { label: 'T-Garden' },
385 { label: 'lenstown' },
386 { label: '新加坡P2' },
387 { label: '星欧' },
388 { label: '美尼康' },
389 { label: '美汐' },
390 { label: '欧舒天' },
391 { label: '海昌' },
392 { label: '菲士康' },
393 { label: '卫康' },
394 { label: '库博' },
395 { label: '安视优' },
396 { label: '美若康' },
397 { label: '视康' },
398 { label: '澜柏' },
399 { label: '3N' },
400 { label: 'BIJOU' },
401 { label: '依视明' },
402 { label: '博士伦' },
403 { label: '瞳昕' },
404 { label: '科莱博' },
405 { label: '绮芙莉' },
406 { label: '雅培' },
407 { label: '爱能视' },
408 { label: '女神秘语' },
409 { label: '博视顿' },
410 { label: '妆美堂' },
411 { label: '人鱼姬' },
412 { label: 'EverColor' },
413 { label: 'Sincere' }
414 ]
415 },
416 {
417 label: '工艺',
418 id: '159',
419 children: [{ label: '涂层工艺' }, { label: '三层夹色工艺' }]
420 },
421 {
422 label: '材质',
423 id: '164',
424 children: [{ label: '硅水凝胶' }, { label: '水凝胶' }]
425 },
426 {
427 label: '含水量',
428 id: '174',
429 children: [
430 { label: '0-40%' },
431 { label: '40-44%' },
432 { label: '45%以上' }
433 ]
434 },
435 {
436 label: '基弧',
437 id: '178',
438 children: [{ label: '0.0-8.4' }, { label: '8.4以上' }]
439 },
440 {
441 label: '直径',
442 id: '181',
443 children: [{ label: '13.4-14' }, { label: '14以上' }]
444 },
445 {
446 label: '中心厚度',
447 id: '184',
448 children: [
449 { label: '0.0 - 0.03' },
450 { label: '0.04 - 0.09' },
451 { label: '0.1以上' }
452 ]
453 },
454 { label: '销售保障', id: '253', children: [] },
455 { label: '赠品', id: '260', children: [] }
456 ]
457 },
458 {
459 label: '特种镜',
460 id: '146',
461 children: [
462 {
463 label: '镜面颜色',
464 id: '237',
465 children: [{ label: '透明' }, { label: '亮金色' }]
466 },
467 {
468 label: '品牌',
469 id: '238',
470 children: [{ label: '宁哥牌' }, { label: '秀野牌' }]
471 },
472 {
473 label: '销售保障',
474 id: '254',
475 children: [{ label: '包退' }, { label: '包换' }]
476 },
477 {
478 label: '功能',
479 id: '268',
480 children: [
481 { label: '防风镜' },
482 { label: '防爆溅工作镜' },
483 { label: '泳镜' },
484 { label: '智能镜' }
485 ]
486 }
487 ]
488 }
489 ],
490 defaultProps: {
491 children: 'children',
492 label: 'label'
493 }
494 }
495 },
496 methods: {
497 getCheckedNodes() {
498 console.log(this.$refs.tree.getCheckedNodes())
499 },
500 getCheckedKeys() {
501 console.log(this.$refs.tree.getCheckedKeys())
502 },
503 addNode() {
504 let h
505 this.$message({
506 message: h('p', null, [
507 h('span', null, '添加一个新节点 ')
508 // h("i", { style: "color: teal" }, "VNode")
509 ])
510 })
511 },
512 append(data) {
513 const newChild = { id: id++, label: 'testtest', children: [] }
514 if (!data.children) {
515 this.$set(data, 'children', [])
516 }
517 data.children.push(newChild)
518 },
519 remove(node, data) {
520 // 删除
521 const parent = node.parent
522 const children = parent.data.children || parent.data
523 const index = children.findIndex(d => d.id === data.id)
524 children.splice(index, 1)
525 },
526 rightKey(node, data) {
527 // 右键
528 const h = this.$createElement
529 // console.log(data, this.$refs.tree);
530 this.$message({
531 message: h('p', null, [
532 h('span', null, '右键了啊！ ' + node + data),
533 h('i', { style: 'color: teal' }, 'VNode')
534 ])
535 })
536 },
537 update(node, data) {
538 // 更新
539 const h = this.$createElement
540 this.$message({
541 message: h('p', null, [
542 h('span', null, '内容可以是 '),
543 h('i', { style: 'color: teal' }, 'VNode')
544 ])
545 })
546 },
547 setCheckedNodes() {
548 this.$refs.tree.setCheckedNodes([
549 {
550 id: 5,
551 label: '二级 2-1'
552 },
553 {
554 id: 9,
555 label: '三级 1-1-1'
556 }
557 ])
558 },
559 setCheckedKeys() {
560 this.$refs.tree.setCheckedKeys([3])
561 },
562 resetChecked() {
563 this.$refs.tree.setCheckedKeys([])
564 }
565 }
566 }
567 </script>
568 <style>
569 .custom-tree-node {
570 flex: 1;
571 display: flex;
572 align-items: center;
573 justify-content: space-between;
574 font-size: 14px;
575 padding-right: 8px;
576 }
577 </style>
578
src/views/operations/operations.vue
Diff comments   View file @fe44789
File was created 1 <template>
2 <div class="login-container">
3 <el-button
4 type="primary"
5 @click="() => addNode()"
6 >{{ $t('users.add') }}</el-button>
7 <el-tree
8 ref="tree"
9 :data="data"
10 show-checkbox
11 node-key="id"
12 highlight-current
13 check-strictly
14 indent="40"
15 icon-class="el-icon-pc"
16 :props="defaultProps"
17 >
18 <!-- <el-tree
19 :data="data"
20 show-checkbox
21 node-key="id"
22 default-expand-all
23 highlight-current
24 isLeaf
25 @node-contextmenu="()=>rightKey(node, data)"
26 check-strictly//在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
27 :expand-on-click-node="false"//是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
28 :props="defaultProps"
29 > -->
30 <span
31 slot-scope="{ node, data }"
32 class="custom-tree-node"
33 >
34 <span>{{ node.label }}</span>
35 <span>
36 <el-button
37 type="primary"
38 icon="el-icon-upload"
39 size="mini"
40 @click="() => append(data)"
41 >
42 {{ $t('users.add') }}
43 </el-button>
44 <el-button
45 type="primary"
46 icon="el-icon-edit"
47 size="mini"
48 @click="() => update(node, data)"
49 >
50 {{ $t('users.update') }}
51 </el-button>
52 <el-button
53 type="primary"
54 icon="el-icon-delete"
55 size="mini"
56 class="danger"
57 @click="() => remove(node, data)"
58 >
59 {{ $t('users.del') }}
60 </el-button>
61 </span>
62 </span>
63 </el-tree>
64
65 <!-- <div class="buttons">
66 <el-button @click="getCheckedNodes">通过 node 获取</el-button>
67 <el-button @click="getCheckedKeys">通过 key 获取</el-button>
68 <el-button @click="setCheckedNodes">通过 node 设置</el-button>
69 <el-button @click="setCheckedKeys">通过 key 设置</el-button>
70 <el-button @click="resetChecked">清空</el-button>
71 </div> -->
72 </div>
73 </template>
74 <script>
75 let id = 1000
76 export default {
77 data() {
78 return {
79 data: [
80 {
81 label: '成镜',
82 id: '1',
83 children: [
84 {
85 label: '款式',
86 id: '11',
87 children: [
88 { label: '青春学子风' },
89 { label: '休闲' },
90 { label: '商务' },
91 { label: '复古' },
92 { label: '时尚' },
93 { label: '质感哥特潮' },
94 { label: '轻简北欧风' },
95 { label: '理性几何派' },
96 { label: '多元新风尚' },
97 { label: '立体巴洛克' },
98 { label: '有机未来时' },
99 { label: '无界人文系' },
100 { label: '自然舒视角' },
101 { label: '流线洛可可' },
102 { label: '奶奶风' },
103 { label: '简约-极简文艺范' },
104 { label: '运动风' },
105 { label: '行政风' },
106 { label: '折射率' }
107 ]
108 },
109 { label: '个性化服务', id: '267', children: [] },
110 {
111 label: '赠品',
112 id: '259',
113 children: [{ label: '眼镜布' }, { label: '眼镜盒' }]
114 },
115 {
116 label: '场景',
117 id: '258',
118 children: [
119 { label: '学校场景' },
120 { label: '出行交际' },
121 { label: '夜店迷人' },
122 { label: '明星同款' }
123 ]
124 },
125 {
126 label: '销售保障',
127 id: '245',
128 children: [
129 { label: '可退' },
130 { label: '可换' },
131 { label: '可修' }
132 ]
133 },
134 {
135 label: '功能',
136 id: '140',
137 children: [
138 { label: '防踩压' },
139 { label: '防扭曲' },
140 { label: '抗过敏' },
141 { label: '防腐蚀' },
142 { label: '耐磨损' },
143 { label: '抗蓝光' }
144 ]
145 },
146 {
147 label: '品牌',
148 id: '71',
149 children: [
150 { label: '购易' },
151 { label: '海俪恩' },
152 { label: '沙漠风暴' },
153 { label: '古诗' },
154 { label: '暴龙' },
155 { label: '犀牛' },
156 { label: 'Ray-Ban雷朋' },
157 { label: 'PARIM派丽蒙' },
158 { label: '石狼' },
159 { label: '木九十' }
160 ]
161 },
162 {
163 label: '边形',
164 id: '49',
165 children: [
166 { label: '半框' },
167 { label: '全框' },
168 { label: '无框' }
169 ]
170 },
171 {
172 label: '性别',
173 id: '23',
174 children: [{ label: '男性' }, { label: '女性' }]
175 },
176 {
177 label: '梁型',
178 id: '20',
179 children: [{ label: '双梁' }, { label: '单梁' }]
180 },
181 {
182 label: '重量',
183 id: '19',
184 children: [{ label: '30克以下' }, { label: '80克以上' }]
185 },
186 {
187 label: '适用脸型',
188 id: '15',
189 children: [{ label: '方' }, { label: '圆' }, { label: '瓜子' }]
190 },
191 {
192 label: '形状',
193 id: '14',
194 children: [
195 { label: '正圆形' },
196 { label: '椭圆形' },
197 { label: '方圆' },
198 { label: '方形' },
199 { label: '多边形' },
200 { label: '内三角(蛤蟆)' },
201 { label: '外三角(蝶形)' }
202 ]
203 },
204 { label: '年龄', id: '12', children: [{ label: '通用' }] },
205 {
206 label: '材质',
207 id: '10',
208 children: [
209 { label: '板材' },
210 { label: '纯钛' },
211 { label: 'TR90' },
212 { label: '木质' },
213 { label: '竹质' },
214 { label: 'β钛' },
215 { label: 'PC' },
216 { label: 'ULTEM塑钢' },
217 { label: '钨钛塑钢' },
218 { label: '镁铝合金' },
219 { label: '碳纤维' }
220 ]
221 },
222 { label: '折射率', id: '286', children: [] },
223 {
224 label: '颜色',
225 id: '13',
226 children: [
227 { label: '金色' },
228 { label: '银色' },
229 { label: '黑色' },
230 { label: '彩色' },
231 { label: '枪色' }
232 ]
233 }
234 ]
235 },
236 {
237 label: '镜片',
238 id: '2',
239 children: [
240 {
241 label: '面型',
242 id: '85',
243 children: [{ label: '球面单光' }, { label: '非球面单光' }]
244 },
245 { label: '近视度数', id: '92', children: [] },
246 { label: '散光', id: '93', children: [] },
247 {
248 label: '功能',
249 id: '95',
250 children: [
251 { label: '防起雾' },
252 { label: '防蓝光' },
253 { label: '防紫外线' },
254 { label: '偏光' },
255 { label: '染色' },
256 { label: '抗疲劳' },
257 { label: '青少年渐进' },
258 { label: '内渐进' },
259 { label: '变色' },
260 { label: '双光' },
261 { label: '耐磨损' },
262 { label: '防尘' },
263 { label: '防水' },
264 { label: '防摔' },
265 { label: '防指纹' },
266 { label: '防反光' }
267 ]
268 },
269 {
270 label: '颜色',
271 id: '100',
272 children: [
273 { label: '透明' },
274 { label: '染色' },
275 { label: '变色' },
276 { label: '单色' }
277 ]
278 },
279 {
280 label: '折射率',
281 id: '101',
282 children: [
283 { label: '1.56' },
284 { label: '1.60' },
285 { label: '1.65' },
286 { label: '1.67' },
287 { label: '1.71' },
288 { label: '1.74' }
289 ]
290 },
291 { label: '阿贝数（色散）', id: '102', children: [] },
292 { label: '重量', id: '103', children: [] },
293 {
294 label: '材质',
295 id: '104',
296 children: [
297 { label: '树脂' },
298 { label: '玻璃' },
299 { label: '宇宙PC' },
300 { label: 'PC' }
301 ]
302 },
303 {
304 label: '品牌',
305 id: '118',
306 children: [
307 { label: '好视力' },
308 { label: 'RAISE锐视' },
309 { label: '依视路' },
310 { label: '凯米' },
311 { label: '蔡司' },
312 { label: '舒曼' }
313 ]
314 },
315 {
316 label: '销售保障',
317 id: '249',
318 children: [
319 { label: '可退' },
320 { label: '可换' },
321 { label: '可修' }
322 ]
323 }
324 ]
325 },
326 {
327 label: '隐形眼镜',
328 id: '88',
329 children: [
330 {
331 label: '颜色',
332 id: '105',
333 children: [
334 { label: '绿' },
335 { label: '灰' },
336 { label: '黑' },
337 { label: '紫' },
338 { label: '蓝' },
339 { label: '棕色' },
340 { label: '紫色' }
341 ]
342 },
343 {
344 label: '颜料',
345 id: '106',
346 children: [{ label: '水性' }, { label: '油性' }]
347 },
348 { label: '度数', id: '107', children: [] },
349 {
350 label: '周期',
351 id: '108',
352 children: [
353 { label: '日抛' },
354 { label: '周抛' },
355 { label: '双周抛' },
356 { label: '月抛' },
357 { label: '季抛' },
358 { label: '半年抛' },
359 { label: '年抛' }
360 ]
361 },
362 {
363 label: '品牌',
364 id: '133',
365 children: [
366 { label: 'HolyNara' },
367 { label: '爱尔康' },
368 { label: 'MaxLook' },
369 { label: 'NEO' },
370 { label: 'GEO' },
371 { label: '实瞳' },
372 { label: '茵洛' },
373 { label: 'DAZZSHOP' },
374 { label: 'O-LENS' },
375 { label: 'envie' },
376 { label: '曼秀雷敦' },
377 { label: '妃蜜莉' },
378 { label: '海俪恩' },
379 { label: '凯达' },
380 { label: '蔡司' },
381 { label: '酷视' },
382 { label: 'LILMOON' },
383 { label: 'RICHBABY' },
384 { label: 'T-Garden' },
385 { label: 'lenstown' },
386 { label: '新加坡P2' },
387 { label: '星欧' },
388 { label: '美尼康' },
389 { label: '美汐' },
390 { label: '欧舒天' },
391 { label: '海昌' },
392 { label: '菲士康' },
393 { label: '卫康' },
394 { label: '库博' },
395 { label: '安视优' },
396 { label: '美若康' },
397 { label: '视康' },
398 { label: '澜柏' },
399 { label: '3N' },
400 { label: 'BIJOU' },
401 { label: '依视明' },
402 { label: '博士伦' },
403 { label: '瞳昕' },
404 { label: '科莱博' },
405 { label: '绮芙莉' },
406 { label: '雅培' },
407 { label: '爱能视' },
408 { label: '女神秘语' },
409 { label: '博视顿' },
410 { label: '妆美堂' },
411 { label: '人鱼姬' },
412 { label: 'EverColor' },
413 { label: 'Sincere' }
414 ]
415 },
416 {
417 label: '工艺',
418 id: '159',
419 children: [{ label: '涂层工艺' }, { label: '三层夹色工艺' }]
420 },
421 {
422 label: '材质',
423 id: '164',
424 children: [{ label: '硅水凝胶' }, { label: '水凝胶' }]
425 },
426 {
427 label: '含水量',
428 id: '174',
429 children: [
430 { label: '0-40%' },
431 { label: '40-44%' },
432 { label: '45%以上' }
433 ]
434 },
435 {
436 label: '基弧',
437 id: '178',
438 children: [{ label: '0.0-8.4' }, { label: '8.4以上' }]
439 },
440 {
441 label: '直径',
442 id: '181',
443 children: [{ label: '13.4-14' }, { label: '14以上' }]
444 },
445 {
446 label: '中心厚度',
447 id: '184',
448 children: [
449 { label: '0.0 - 0.03' },
450 { label: '0.04 - 0.09' },
451 { label: '0.1以上' }
452 ]
453 },
454 { label: '销售保障', id: '253', children: [] },
455 { label: '赠品', id: '260', children: [] }
456 ]
457 },
458 {
459 label: '特种镜',
460 id: '146',
461 children: [
462 {
463 label: '镜面颜色',
464 id: '237',
465 children: [{ label: '透明' }, { label: '亮金色' }]
466 },
467 {
468 label: '品牌',
469 id: '238',
470 children: [{ label: '宁哥牌' }, { label: '秀野牌' }]
471 },
472 {
473 label: '销售保障',
474 id: '254',
475 children: [{ label: '包退' }, { label: '包换' }]
476 },
477 {
478 label: '功能',
479 id: '268',
480 children: [
481 { label: '防风镜' },
482 { label: '防爆溅工作镜' },
483 { label: '泳镜' },
484 { label: '智能镜' }
485 ]
486 }
487 ]
488 }
489 ],
490 defaultProps: {
491 children: 'children',
492 label: 'label'
493 }
494 }
495 },
496 methods: {
497 getCheckedNodes() {
498 console.log(this.$refs.tree.getCheckedNodes())
499 },
500 getCheckedKeys() {
501 console.log(this.$refs.tree.getCheckedKeys())
502 },
503 addNode() {
504 let h
505 this.$message({
506 message: h('p', null, [
507 h('span', null, '添加一个新节点 ')
508 // h("i", { style: "color: teal" }, "VNode")
509 ])
510 })
511 },
512 append(data) {
513 const newChild = { id: id++, label: 'testtest', children: [] }
514 if (!data.children) {
515 this.$set(data, 'children', [])
516 }
517 data.children.push(newChild)
518 },
519 remove(node, data) {
520 // 删除
521 const parent = node.parent
522 const children = parent.data.children || parent.data
523 const index = children.findIndex(d => d.id === data.id)
524 children.splice(index, 1)
525 },
526 rightKey(node, data) {
527 // 右键
528 const h = this.$createElement
529 // console.log(data, this.$refs.tree);
530 this.$message({
531 message: h('p', null, [
532 h('span', null, '右键了啊！ ' + node + data),
533 h('i', { style: 'color: teal' }, 'VNode')
534 ])
535 })
536 },
537 update(node, data) {
538 // 更新
539 const h = this.$createElement
540 this.$message({
541 message: h('p', null, [
542 h('span', null, '内容可以是 '),
543 h('i', { style: 'color: teal' }, 'VNode')
544 ])
545 })
546 },
547 setCheckedNodes() {
548 this.$refs.tree.setCheckedNodes([
549 {
550 id: 5,
551 label: '二级 2-1'
552 },
553 {
554 id: 9,
555 label: '三级 1-1-1'
556 }
557 ])
558 },
559 setCheckedKeys() {
560 this.$refs.tree.setCheckedKeys([3])
561 },
562 resetChecked() {
563 this.$refs.tree.setCheckedKeys([])
564 }
565 }
566 }
567 </script>
568 <style>
569 .custom-tree-node {
570 flex: 1;
571 display: flex;
572 align-items: center;
573 justify-content: space-between;
574 font-size: 14px;
575 padding-right: 8px;
576 }
577 </style>
578
src/views/recommend/recommend.vue
Diff comments   View file @fe44789
File was created 1 <template>
2 <div class="login-container">
3 <el-button
4 type="primary"
5 @click="() => addNode()"
6 >{{ $t('users.add') }}</el-button>
7 <el-tree
8 ref="tree"
9 :data="data"
10 show-checkbox
11 node-key="id"
12 highlight-current
13 check-strictly
14 indent="40"
15 icon-class="el-icon-pc"
16 :props="defaultProps"
17 >
18 <!-- <el-tree
19 :data="data"
20 show-checkbox
21 node-key="id"
22 default-expand-all
23 highlight-current
24 isLeaf
25 @node-contextmenu="()=>rightKey(node, data)"
26 check-strictly//在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
27 :expand-on-click-node="false"//是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
28 :props="defaultProps"
29 > -->
30 <span
31 slot-scope="{ node, data }"
32 class="custom-tree-node"
33 >
34 <span>{{ node.label }}</span>
35 <span>
36 <el-button
37 type="primary"
38 icon="el-icon-upload"
39 size="mini"
40 @click="() => append(data)"
41 >
42 {{ $t('users.add') }}
43 </el-button>
44 <el-button
45 type="primary"
46 icon="el-icon-edit"
47 size="mini"
48 @click="() => update(node, data)"
49 >
50 {{ $t('users.update') }}
51 </el-button>
52 <el-button
53 type="primary"
54 icon="el-icon-delete"
55 size="mini"
56 class="danger"
57 @click="() => remove(node, data)"
58 >
59 {{ $t('users.del') }}
60 </el-button>
61 </span>
62 </span>
63 </el-tree>
64
65 <!-- <div class="buttons">
66 <el-button @click="getCheckedNodes">通过 node 获取</el-button>
67 <el-button @click="getCheckedKeys">通过 key 获取</el-button>
68 <el-button @click="setCheckedNodes">通过 node 设置</el-button>
69 <el-button @click="setCheckedKeys">通过 key 设置</el-button>
70 <el-button @click="resetChecked">清空</el-button>
71 </div> -->
72 </div>
73 </template>
74 <script>
75 let id = 1000
76 export default {
77 data() {
78 return {
79 data: [
80 {
81 label: '成镜',
82 id: '1',
83 children: [
84 {
85 label: '款式',
86 id: '11',
87 children: [
88 { label: '青春学子风' },
89 { label: '休闲' },
90 { label: '商务' },
91 { label: '复古' },
92 { label: '时尚' },
93 { label: '质感哥特潮' },
94 { label: '轻简北欧风' },
95 { label: '理性几何派' },
96 { label: '多元新风尚' },
97 { label: '立体巴洛克' },
98 { label: '有机未来时' },
99 { label: '无界人文系' },
100 { label: '自然舒视角' },
101 { label: '流线洛可可' },
102 { label: '奶奶风' },
103 { label: '简约-极简文艺范' },
104 { label: '运动风' },
105 { label: '行政风' },
106 { label: '折射率' }
107 ]
108 },
109 { label: '个性化服务', id: '267', children: [] },
110 {
111 label: '赠品',
112 id: '259',
113 children: [{ label: '眼镜布' }, { label: '眼镜盒' }]
114 },
115 {
116 label: '场景',
117 id: '258',
118 children: [
119 { label: '学校场景' },
120 { label: '出行交际' },
121 { label: '夜店迷人' },
122 { label: '明星同款' }
123 ]
124 },
125 {
126 label: '销售保障',
127 id: '245',
128 children: [
129 { label: '可退' },
130 { label: '可换' },
131 { label: '可修' }
132 ]
133 },
134 {
135 label: '功能',
136 id: '140',
137 children: [
138 { label: '防踩压' },
139 { label: '防扭曲' },
140 { label: '抗过敏' },
141 { label: '防腐蚀' },
142 { label: '耐磨损' },
143 { label: '抗蓝光' }
144 ]
145 },
146 {
147 label: '品牌',
148 id: '71',
149 children: [
150 { label: '购易' },
151 { label: '海俪恩' },
152 { label: '沙漠风暴' },
153 { label: '古诗' },
154 { label: '暴龙' },
155 { label: '犀牛' },
156 { label: 'Ray-Ban雷朋' },
157 { label: 'PARIM派丽蒙' },
158 { label: '石狼' },
159 { label: '木九十' }
160 ]
161 },
162 {
163 label: '边形',
164 id: '49',
165 children: [
166 { label: '半框' },
167 { label: '全框' },
168 { label: '无框' }
169 ]
170 },
171 {
172 label: '性别',
173 id: '23',
174 children: [{ label: '男性' }, { label: '女性' }]
175 },
176 {
177 label: '梁型',
178 id: '20',
179 children: [{ label: '双梁' }, { label: '单梁' }]
180 },
181 {
182 label: '重量',
183 id: '19',
184 children: [{ label: '30克以下' }, { label: '80克以上' }]
185 },
186 {
187 label: '适用脸型',
188 id: '15',
189 children: [{ label: '方' }, { label: '圆' }, { label: '瓜子' }]
190 },
191 {
192 label: '形状',
193 id: '14',
194 children: [
195 { label: '正圆形' },
196 { label: '椭圆形' },
197 { label: '方圆' },
198 { label: '方形' },
199 { label: '多边形' },
200 { label: '内三角(蛤蟆)' },
201 { label: '外三角(蝶形)' }
202 ]
203 },
204 { label: '年龄', id: '12', children: [{ label: '通用' }] },
205 {
206 label: '材质',
207 id: '10',
208 children: [
209 { label: '板材' },
210 { label: '纯钛' },
211 { label: 'TR90' },
212 { label: '木质' },
213 { label: '竹质' },
214 { label: 'β钛' },
215 { label: 'PC' },
216 { label: 'ULTEM塑钢' },
217 { label: '钨钛塑钢' },
218 { label: '镁铝合金' },
219 { label: '碳纤维' }
220 ]
221 },
222 { label: '折射率', id: '286', children: [] },
223 {
224 label: '颜色',
225 id: '13',
226 children: [
227 { label: '金色' },
228 { label: '银色' },
229 { label: '黑色' },
230 { label: '彩色' },
231 { label: '枪色' }
232 ]
233 }
234 ]
235 },
236 {
237 label: '镜片',
238 id: '2',
239 children: [
240 {
241 label: '面型',
242 id: '85',
243 children: [{ label: '球面单光' }, { label: '非球面单光' }]
244 },
245 { label: '近视度数', id: '92', children: [] },
246 { label: '散光', id: '93', children: [] },
247 {
248 label: '功能',
249 id: '95',
250 children: [
251 { label: '防起雾' },
252 { label: '防蓝光' },
253 { label: '防紫外线' },
254 { label: '偏光' },
255 { label: '染色' },
256 { label: '抗疲劳' },
257 { label: '青少年渐进' },
258 { label: '内渐进' },
259 { label: '变色' },
260 { label: '双光' },
261 { label: '耐磨损' },
262 { label: '防尘' },
263 { label: '防水' },
264 { label: '防摔' },
265 { label: '防指纹' },
266 { label: '防反光' }
267 ]
268 },
269 {
270 label: '颜色',
271 id: '100',
272 children: [
273 { label: '透明' },
274 { label: '染色' },
275 { label: '变色' },
276 { label: '单色' }
277 ]
278 },
279 {
280 label: '折射率',
281 id: '101',
282 children: [
283 { label: '1.56' },
284 { label: '1.60' },
285 { label: '1.65' },
286 { label: '1.67' },
287 { label: '1.71' },
288 { label: '1.74' }
289 ]
290 },
291 { label: '阿贝数（色散）', id: '102', children: [] },
292 { label: '重量', id: '103', children: [] },
293 {
294 label: '材质',
295 id: '104',
296 children: [
297 { label: '树脂' },
298 { label: '玻璃' },
299 { label: '宇宙PC' },
300 { label: 'PC' }
301 ]
302 },
303 {
304 label: '品牌',
305 id: '118',
306 children: [
307 { label: '好视力' },
308 { label: 'RAISE锐视' },
309 { label: '依视路' },
310 { label: '凯米' },
311 { label: '蔡司' },
312 { label: '舒曼' }
313 ]
314 },
315 {
316 label: '销售保障',
317 id: '249',
318 children: [
319 { label: '可退' },
320 { label: '可换' },
321 { label: '可修' }
322 ]
323 }
324 ]
325 },
326 {
327 label: '隐形眼镜',
328 id: '88',
329 children: [
330 {
331 label: '颜色',
332 id: '105',
333 children: [
334 { label: '绿' },
335 { label: '灰' },
336 { label: '黑' },
337 { label: '紫' },
338 { label: '蓝' },
339 { label: '棕色' },
340 { label: '紫色' }
341 ]
342 },
343 {
344 label: '颜料',
345 id: '106',
346 children: [{ label: '水性' }, { label: '油性' }]
347 },
348 { label: '度数', id: '107', children: [] },
349 {
350 label: '周期',
351 id: '108',
352 children: [
353 { label: '日抛' },
354 { label: '周抛' },
355 { label: '双周抛' },
356 { label: '月抛' },
357 { label: '季抛' },
358 { label: '半年抛' },
359 { label: '年抛' }
360 ]
361 },
362 {
363 label: '品牌',
364 id: '133',
365 children: [
366 { label: 'HolyNara' },
367 { label: '爱尔康' },
368 { label: 'MaxLook' },
369 { label: 'NEO' },
370 { label: 'GEO' },
371 { label: '实瞳' },
372 { label: '茵洛' },
373 { label: 'DAZZSHOP' },
374 { label: 'O-LENS' },
375 { label: 'envie' },
376 { label: '曼秀雷敦' },
377 { label: '妃蜜莉' },
378 { label: '海俪恩' },
379 { label: '凯达' },
380 { label: '蔡司' },
381 { label: '酷视' },
382 { label: 'LILMOON' },
383 { label: 'RICHBABY' },
384 { label: 'T-Garden' },
385 { label: 'lenstown' },
386 { label: '新加坡P2' },
387 { label: '星欧' },
388 { label: '美尼康' },
389 { label: '美汐' },
390 { label: '欧舒天' },
391 { label: '海昌' },
392 { label: '菲士康' },
393 { label: '卫康' },
394 { label: '库博' },
395 { label: '安视优' },
396 { label: '美若康' },
397 { label: '视康' },
398 { label: '澜柏' },
399 { label: '3N' },
400 { label: 'BIJOU' },
401 { label: '依视明' },
402 { label: '博士伦' },
403 { label: '瞳昕' },
404 { label: '科莱博' },
405 { label: '绮芙莉' },
406 { label: '雅培' },
407 { label: '爱能视' },
408 { label: '女神秘语' },
409 { label: '博视顿' },
410 { label: '妆美堂' },
411 { label: '人鱼姬' },
412 { label: 'EverColor' },
413 { label: 'Sincere' }
414 ]
415 },
416 {
417 label: '工艺',
418 id: '159',
419 children: [{ label: '涂层工艺' }, { label: '三层夹色工艺' }]
420 },
421 {
422 label: '材质',
423 id: '164',
424 children: [{ label: '硅水凝胶' }, { label: '水凝胶' }]
425 },
426 {
427 label: '含水量',
428 id: '174',
429 children: [
430 { label: '0-40%' },
431 { label: '40-44%' },
432 { label: '45%以上' }
433 ]
434 },
435 {
436 label: '基弧',
437 id: '178',
438 children: [{ label: '0.0-8.4' }, { label: '8.4以上' }]
439 },
440 {
441 label: '直径',
442 id: '181',
443 children: [{ label: '13.4-14' }, { label: '14以上' }]
444 },
445 {
446 label: '中心厚度',
447 id: '184',
448 children: [
449 { label: '0.0 - 0.03' },
450 { label: '0.04 - 0.09' },
451 { label: '0.1以上' }
452 ]
453 },
454 { label: '销售保障', id: '253', children: [] },
455 { label: '赠品', id: '260', children: [] }
456 ]
457 },
458 {
459 label: '特种镜',
460 id: '146',
461 children: [
462 {
463 label: '镜面颜色',
464 id: '237',
465 children: [{ label: '透明' }, { label: '亮金色' }]
466 },
467 {
468 label: '品牌',
469 id: '238',
470 children: [{ label: '宁哥牌' }, { label: '秀野牌' }]
471 },
472 {
473 label: '销售保障',
474 id: '254',
475 children: [{ label: '包退' }, { label: '包换' }]
476 },
477 {
478 label: '功能',
479 id: '268',
480 children: [
481 { label: '防风镜' },
482 { label: '防爆溅工作镜' },
483 { label: '泳镜' },
484 { label: '智能镜' }
485 ]
486 }
487 ]
488 }
489 ],
490 defaultProps: {
491 children: 'children',
492 label: 'label'
493 }
494 }
495 },
496 methods: {
497 getCheckedNodes() {
498 console.log(this.$refs.tree.getCheckedNodes())
499 },
500 getCheckedKeys() {
501 console.log(this.$refs.tree.getCheckedKeys())
502 },
503 addNode() {
504 let h
505 this.$message({
506 message: h('p', null, [
507 h('span', null, '添加一个新节点 ')
508 // h("i", { style: "color: teal" }, "VNode")
509 ])
510 })
511 },
512 append(data) {
513 const newChild = { id: id++, label: 'testtest', children: [] }
514 if (!data.children) {
515 this.$set(data, 'children', [])
516 }
517 data.children.push(newChild)
518 },
519 remove(node, data) {
520 // 删除
521 const parent = node.parent
522 const children = parent.data.children || parent.data
523 const index = children.findIndex(d => d.id === data.id)
524 children.splice(index, 1)
525 },
526 rightKey(node, data) {
527 // 右键
528 const h = this.$createElement
529 // console.log(data, this.$refs.tree);
530 this.$message({
531 message: h('p', null, [
532 h('span', null, '右键了啊！ ' + node + data),
533 h('i', { style: 'color: teal' }, 'VNode')
534 ])
535 })
536 },
537 update(node, data) {
538 // 更新
539 const h = this.$createElement
540 this.$message({
541 message: h('p', null, [
542 h('span', null, '内容可以是 '),
543 h('i', { style: 'color: teal' }, 'VNode')
544 ])
545 })
546 },
547 setCheckedNodes() {
548 this.$refs.tree.setCheckedNodes([
549 {
550 id: 5,
551 label: '二级 2-1'
552 },
553 {
554 id: 9,
555 label: '三级 1-1-1'
556 }
557 ])
558 },
559 setCheckedKeys() {
560 this.$refs.tree.setCheckedKeys([3])
561 },
562 resetChecked() {
563 this.$refs.tree.setCheckedKeys([])
564 }
565 }
566 }
567 </script>
568 <style>
569 .custom-tree-node {
570 flex: 1;
571 display: flex;
572 align-items: center;
573 justify-content: space-between;
574 font-size: 14px;
575 padding-right: 8px;
576 }
577 </style>
578
src/views/staff/staff.vue
Diff comments   View file @fe44789
File was created 1 <template>
2 <div class="login-container">
3 <el-button
4 type="primary"
5 @click="() => addNode()"
6 >{{ $t('users.add') }}</el-button>
7 <el-tree
8 ref="tree"
9 :data="data"
10 show-checkbox
11 node-key="id"
12 highlight-current
13 check-strictly
14 indent="40"
15 icon-class="el-icon-pc"
16 :props="defaultProps"
17 >
18 <!-- <el-tree
19 :data="data"
20 show-checkbox
21 node-key="id"
22 default-expand-all
23 highlight-current
24 isLeaf
25 @node-contextmenu="()=>rightKey(node, data)"
26 check-strictly//在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
27 :expand-on-click-node="false"//是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
28 :props="defaultProps"
29 > -->
30 <span
31 slot-scope="{ node, data }"
32 class="custom-tree-node"
33 >
34 <span>{{ node.label }}</span>
35 <span>
36 <el-button
37 type="primary"
38 icon="el-icon-upload"
39 size="mini"
40 @click="() => append(data)"
41 >
42 {{ $t('users.add') }}
43 </el-button>
44 <el-button
45 type="primary"
46 icon="el-icon-edit"
47 size="mini"
48 @click="() => update(node, data)"
49 >
50 {{ $t('users.update') }}
51 </el-button>
52 <el-button
53 type="primary"
54 icon="el-icon-delete"
55 size="mini"
56 class="danger"
57 @click="() => remove(node, data)"
58 >
59 {{ $t('users.del') }}
60 </el-button>
61 </span>
62 </span>
63 </el-tree>
64
65 <!-- <div class="buttons">
66 <el-button @click="getCheckedNodes">通过 node 获取</el-button>
67 <el-button @click="getCheckedKeys">通过 key 获取</el-button>
68 <el-button @click="setCheckedNodes">通过 node 设置</el-button>
69 <el-button @click="setCheckedKeys">通过 key 设置</el-button>
70 <el-button @click="resetChecked">清空</el-button>
71 </div> -->
72 </div>
73 </template>
74 <script>
75 let id = 1000
76 export default {
77 data() {
78 return {
79 data: [
80 {
81 label: '成镜',
82 id: '1',
83 children: [
84 {
85 label: '款式',
86 id: '11',
87 children: [
88 { label: '青春学子风' },
89 { label: '休闲' },
90 { label: '商务' },
91 { label: '复古' },
92 { label: '时尚' },
93 { label: '质感哥特潮' },
94 { label: '轻简北欧风' },
95 { label: '理性几何派' },
96 { label: '多元新风尚' },
97 { label: '立体巴洛克' },
98 { label: '有机未来时' },
99 { label: '无界人文系' },
100 { label: '自然舒视角' },
101 { label: '流线洛可可' },
102 { label: '奶奶风' },
103 { label: '简约-极简文艺范' },
104 { label: '运动风' },
105 { label: '行政风' },
106 { label: '折射率' }
107 ]
108 },
109 { label: '个性化服务', id: '267', children: [] },
110 {
111 label: '赠品',
112 id: '259',
113 children: [{ label: '眼镜布' }, { label: '眼镜盒' }]
114 },
115 {
116 label: '场景',
117 id: '258',
118 children: [
119 { label: '学校场景' },
120 { label: '出行交际' },
121 { label: '夜店迷人' },
122 { label: '明星同款' }
123 ]
124 },
125 {
126 label: '销售保障',
127 id: '245',
128 children: [
129 { label: '可退' },
130 { label: '可换' },
131 { label: '可修' }
132 ]
133 },
134 {
135 label: '功能',
136 id: '140',
137 children: [
138 { label: '防踩压' },
139 { label: '防扭曲' },
140 { label: '抗过敏' },
141 { label: '防腐蚀' },
142 { label: '耐磨损' },
143 { label: '抗蓝光' }
144 ]
145 },
146 {
147 label: '品牌',
148 id: '71',
149 children: [
150 { label: '购易' },
151 { label: '海俪恩' },
152 { label: '沙漠风暴' },
153 { label: '古诗' },
154 { label: '暴龙' },
155 { label: '犀牛' },
156 { label: 'Ray-Ban雷朋' },
157 { label: 'PARIM派丽蒙' },
158 { label: '石狼' },
159 { label: '木九十' }
160 ]
161 },
162 {
163 label: '边形',
164 id: '49',
165 children: [
166 { label: '半框' },
167 { label: '全框' },
168 { label: '无框' }
169 ]
170 },
171 {
172 label: '性别',
173 id: '23',
174 children: [{ label: '男性' }, { label: '女性' }]
175 },
176 {
177 label: '梁型',
178 id: '20',
179 children: [{ label: '双梁' }, { label: '单梁' }]
180 },
181 {
182 label: '重量',
183 id: '19',
184 children: [{ label: '30克以下' }, { label: '80克以上' }]
185 },
186 {
187 label: '适用脸型',
188 id: '15',
189 children: [{ label: '方' }, { label: '圆' }, { label: '瓜子' }]
190 },
191 {
192 label: '形状',
193 id: '14',
194 children: [
195 { label: '正圆形' },
196 { label: '椭圆形' },
197 { label: '方圆' },
198 { label: '方形' },
199 { label: '多边形' },
200 { label: '内三角(蛤蟆)' },
201 { label: '外三角(蝶形)' }
202 ]
203 },
204 { label: '年龄', id: '12', children: [{ label: '通用' }] },
205 {
206 label: '材质',
207 id: '10',
208 children: [
209 { label: '板材' },
210 { label: '纯钛' },
211 { label: 'TR90' },
212 { label: '木质' },
213 { label: '竹质' },
214 { label: 'β钛' },
215 { label: 'PC' },
216 { label: 'ULTEM塑钢' },
217 { label: '钨钛塑钢' },
218 { label: '镁铝合金' },
219 { label: '碳纤维' }
220 ]
221 },
222 { label: '折射率', id: '286', children: [] },
223 {
224 label: '颜色',
225 id: '13',
226 children: [
227 { label: '金色' },
228 { label: '银色' },
229 { label: '黑色' },
230 { label: '彩色' },
231 { label: '枪色' }
232 ]
233 }
234 ]
235 },
236 {
237 label: '镜片',
238 id: '2',
239 children: [
240 {
241 label: '面型',
242 id: '85',
243 children: [{ label: '球面单光' }, { label: '非球面单光' }]
244 },
245 { label: '近视度数', id: '92', children: [] },
246 { label: '散光', id: '93', children: [] },
247 {
248 label: '功能',
249 id: '95',
250 children: [
251 { label: '防起雾' },
252 { label: '防蓝光' },
253 { label: '防紫外线' },
254 { label: '偏光' },
255 { label: '染色' },
256 { label: '抗疲劳' },
257 { label: '青少年渐进' },
258 { label: '内渐进' },
259 { label: '变色' },
260 { label: '双光' },
261 { label: '耐磨损' },
262 { label: '防尘' },
263 { label: '防水' },
264 { label: '防摔' },
265 { label: '防指纹' },
266 { label: '防反光' }
267 ]
268 },
269 {
270 label: '颜色',
271 id: '100',
272 children: [
273 { label: '透明' },
274 { label: '染色' },
275 { label: '变色' },
276 { label: '单色' }
277 ]
278 },
279 {
280 label: '折射率',
281 id: '101',
282 children: [
283 { label: '1.56' },
284 { label: '1.60' },
285 { label: '1.65' },
286 { label: '1.67' },
287 { label: '1.71' },
288 { label: '1.74' }
289 ]
290 },
291 { label: '阿贝数（色散）', id: '102', children: [] },
292 { label: '重量', id: '103', children: [] },
293 {
294 label: '材质',
295 id: '104',
296 children: [
297 { label: '树脂' },
298 { label: '玻璃' },
299 { label: '宇宙PC' },
300 { label: 'PC' }
301 ]
302 },
303 {
304 label: '品牌',
305 id: '118',
306 children: [
307 { label: '好视力' },
308 { label: 'RAISE锐视' },
309 { label: '依视路' },
310 { label: '凯米' },
311 { label: '蔡司' },
312 { label: '舒曼' }
313 ]
314 },
315 {
316 label: '销售保障',
317 id: '249',
318 children: [
319 { label: '可退' },
320 { label: '可换' },
321 { label: '可修' }
322 ]
323 }
324 ]
325 },
326 {
327 label: '隐形眼镜',
328 id: '88',
329 children: [
330 {
331 label: '颜色',
332 id: '105',
333 children: [
334 { label: '绿' },
335 { label: '灰' },
336 { label: '黑' },
337 { label: '紫' },
338 { label: '蓝' },
339 { label: '棕色' },
340 { label: '紫色' }
341 ]
342 },
343 {
344 label: '颜料',
345 id: '106',
346 children: [{ label: '水性' }, { label: '油性' }]
347 },
348 { label: '度数', id: '107', children: [] },
349 {
350 label: '周期',
351 id: '108',
352 children: [
353 { label: '日抛' },
354 { label: '周抛' },
355 { label: '双周抛' },
356 { label: '月抛' },
357 { label: '季抛' },
358 { label: '半年抛' },
359 { label: '年抛' }
360 ]
361 },
362 {
363 label: '品牌',
364 id: '133',
365 children: [
366 { label: 'HolyNara' },
367 { label: '爱尔康' },
368 { label: 'MaxLook' },
369 { label: 'NEO' },
370 { label: 'GEO' },
371 { label: '实瞳' },
372 { label: '茵洛' },
373 { label: 'DAZZSHOP' },
374 { label: 'O-LENS' },
375 { label: 'envie' },
376 { label: '曼秀雷敦' },
377 { label: '妃蜜莉' },
378 { label: '海俪恩' },
379 { label: '凯达' },
380 { label: '蔡司' },
381 { label: '酷视' },
382 { label: 'LILMOON' },
383 { label: 'RICHBABY' },
384 { label: 'T-Garden' },
385 { label: 'lenstown' },
386 { label: '新加坡P2' },
387 { label: '星欧' },
388 { label: '美尼康' },
389 { label: '美汐' },
390 { label: '欧舒天' },
391 { label: '海昌' },
392 { label: '菲士康' },
393 { label: '卫康' },
394 { label: '库博' },
395 { label: '安视优' },
396 { label: '美若康' },
397 { label: '视康' },
398 { label: '澜柏' },
399 { label: '3N' },
400 { label: 'BIJOU' },
401 { label: '依视明' },
402 { label: '博士伦' },
403 { label: '瞳昕' },
404 { label: '科莱博' },
405 { label: '绮芙莉' },
406 { label: '雅培' },
407 { label: '爱能视' },
408 { label: '女神秘语' },
409 { label: '博视顿' },
410 { label: '妆美堂' },
411 { label: '人鱼姬' },
412 { label: 'EverColor' },
413 { label: 'Sincere' }
414 ]
415 },
416 {
417 label: '工艺',
418 id: '159',
419 children: [{ label: '涂层工艺' }, { label: '三层夹色工艺' }]
420 },
421 {
422 label: '材质',
423 id: '164',
424 children: [{ label: '硅水凝胶' }, { label: '水凝胶' }]
425 },
426 {
427 label: '含水量',
428 id: '174',
429 children: [
430 { label: '0-40%' },
431 { label: '40-44%' },
432 { label: '45%以上' }
433 ]
434 },
435 {
436 label: '基弧',
437 id: '178',
438 children: [{ label: '0.0-8.4' }, { label: '8.4以上' }]
439 },
440 {
441 label: '直径',
442 id: '181',
443 children: [{ label: '13.4-14' }, { label: '14以上' }]
444 },
445 {
446 label: '中心厚度',
447 id: '184',
448 children: [
449 { label: '0.0 - 0.03' },
450 { label: '0.04 - 0.09' },
451 { label: '0.1以上' }
452 ]
453 },
454 { label: '销售保障', id: '253', children: [] },
455 { label: '赠品', id: '260', children: [] }
456 ]
457 },
458 {
459 label: '特种镜',
460 id: '146',
461 children: [
462 {
463 label: '镜面颜色',
464 id: '237',
465 children: [{ label: '透明' }, { label: '亮金色' }]
466 },
467 {
468 label: '品牌',
469 id: '238',
470 children: [{ label: '宁哥牌' }, { label: '秀野牌' }]
471 },
472 {
473 label: '销售保障',
474 id: '254',
475 children: [{ label: '包退' }, { label: '包换' }]
476 },
477 {
478 label: '功能',
479 id: '268',
480 children: [
481 { label: '防风镜' },
482 { label: '防爆溅工作镜' },
483 { label: '泳镜' },
484 { label: '智能镜' }
485 ]
486 }
487 ]
488 }
489 ],
490 defaultProps: {
491 children: 'children',
492 label: 'label'
493 }
494 }
495 },
496 methods: {
497 getCheckedNodes() {
498 console.log(this.$refs.tree.getCheckedNodes())
499 },
500 getCheckedKeys() {
501 console.log(this.$refs.tree.getCheckedKeys())
502 },
503 addNode() {
504 let h
505 this.$message({
506 message: h('p', null, [
507 h('span', null, '添加一个新节点 ')
508 // h("i", { style: "color: teal" }, "VNode")
509 ])
510 })
511 },
512 append(data) {
513 const newChild = { id: id++, label: 'testtest', children: [] }
514 if (!data.children) {
515 this.$set(data, 'children', [])
516 }
517 data.children.push(newChild)
518 },
519 remove(node, data) {
520 // 删除
521 const parent = node.parent
522 const children = parent.data.children || parent.data
523 const index = children.findIndex(d => d.id === data.id)
524 children.splice(index, 1)
525 },
526 rightKey(node, data) {
527 // 右键
528 const h = this.$createElement
529 // console.log(data, this.$refs.tree);
530 this.$message({
531 message: h('p', null, [
532 h('span', null, '右键了啊！ ' + node + data),
533 h('i', { style: 'color: teal' }, 'VNode')
534 ])
535 })
536 },
537 update(node, data) {
538 // 更新
539 const h = this.$createElement
540 this.$message({
541 message: h('p', null, [
542 h('span', null, '内容可以是 '),
543 h('i', { style: 'color: teal' }, 'VNode')
544 ])
545 })
546 },
547 setCheckedNodes() {
548 this.$refs.tree.setCheckedNodes([
549 {
550 id: 5,
551 label: '二级 2-1'
552 },
553 {
554 id: 9,
555 label: '三级 1-1-1'
556 }
557 ])
558 },
559 setCheckedKeys() {
560 this.$refs.tree.setCheckedKeys([3])
561 },
562 resetChecked() {
563 this.$refs.tree.setCheckedKeys([])
564 }
565 }
566 }
567 </script>
568 <style>
569 .custom-tree-node {
570 flex: 1;
571 display: flex;
572 align-items: center;
573 justify-content: space-between;
574 font-size: 14px;
575 padding-right: 8px;
576 }
577 </style>
578