From fe44789e30f574792576b91c094c6132d9fe7d43 Mon Sep 17 00:00:00 2001
From: BigBoss <2280520255@qq.com>
Date: Tue, 23 Jun 2020 22:25:12 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=B7=AF=E7=94=B1=EF=BC=8C?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                            |   2 +-
 src/router/index.js                     | 152 +++++----
 src/router/modules/application.js       |  25 ++
 src/router/modules/logistics.js         |  25 ++
 src/router/modules/manufacturer.js      |  25 ++
 src/router/modules/meta.js              |   6 +-
 src/router/modules/operations.js        |  25 ++
 src/router/modules/recommend.js         |  25 ++
 src/router/modules/staff.js             |  25 ++
 src/views/application/appManage.vue     | 577 ++++++++++++++++++++++++++++++++
 src/views/logistics/logistics.vue       | 577 ++++++++++++++++++++++++++++++++
 src/views/manufacturer/manufacturer.vue | 577 ++++++++++++++++++++++++++++++++
 src/views/operations/operations.vue     | 577 ++++++++++++++++++++++++++++++++
 src/views/recommend/recommend.vue       | 577 ++++++++++++++++++++++++++++++++
 src/views/staff/staff.vue               | 577 ++++++++++++++++++++++++++++++++
 15 files changed, 3698 insertions(+), 74 deletions(-)
 create mode 100644 src/router/modules/application.js
 create mode 100644 src/router/modules/logistics.js
 create mode 100644 src/router/modules/manufacturer.js
 create mode 100644 src/router/modules/operations.js
 create mode 100644 src/router/modules/recommend.js
 create mode 100644 src/router/modules/staff.js
 create mode 100644 src/views/application/appManage.vue
 create mode 100644 src/views/logistics/logistics.vue
 create mode 100644 src/views/manufacturer/manufacturer.vue
 create mode 100644 src/views/operations/operations.vue
 create mode 100644 src/views/recommend/recommend.vue
 create mode 100644 src/views/staff/staff.vue

diff --git a/package.json b/package.json
index 0712f4f..7c5a8d3 100755
--- a/package.json
+++ b/package.json
@@ -93,7 +93,7 @@
     "chalk": "2.4.2",
     "chokidar": "2.1.5",
     "connect": "3.6.6",
-    "eslint": "5.15.3",
+    "eslint": "^5.15.3",
     "eslint-plugin-vue": "5.2.2",
     "html-webpack-plugin": "3.2.0",
     "husky": "1.3.1",
diff --git a/src/router/index.js b/src/router/index.js
index 32479fd..3c19154 100755
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,16 +7,22 @@ Vue.use(Router)
 import Layout from '@/layout'
 
 /* Router Modules */
-import componentsRouter from './modules/components'
+// import componentsRouter from './modules/components'
 // import chartsRouter from './modules/charts'
 // import tableRouter from './modules/table'
 // import nestedRouter from './modules/nested'
-import userRouter from './modules/user'
-import systemRouter from './modules/system'
-import prodRouter from './modules/prod'
-import orderRouter from './modules/order'
-import metaRouter from './modules/meta'
-import sitesRouter from './modules/sites'
+import userRouter from './modules/user'// 用户
+import systemRouter from './modules/system'// 系统设置
+import prodRouter from './modules/prod'// 产品
+import orderRouter from './modules/order'// 订单
+import metaRouter from './modules/meta'// 元定义
+// import sitesRouter from './modules/sites'
+import applicationRouter from './modules/application'// 应用
+import operationsRouter from './modules/operations'// 运营官
+import logisticsRouter from './modules/logistics'// 物流路由
+import staffRouter from './modules/staff'// 员工
+import recommendRouter from './modules/recommend'// 推荐
+// import manufacturerRouter from './modules/manufacturer'
 
 /**
  * Note: sub-menu only appear when route children.length >= 1
@@ -92,7 +98,7 @@ export const constantRoutes = [{
       affix: true
     }
   }]
-},
+}
 // {
 //   path: '/documentation',
 //   component: Layout,
@@ -105,21 +111,21 @@ export const constantRoutes = [{
 //     }
 //   ]
 // },
-{
-  path: '/guide',
-  component: Layout,
-  redirect: '/guide/index',
-  children: [{
-    path: 'index',
-    component: () => import('@/views/guide/index'),
-    name: 'Guide',
-    meta: {
-      title: 'guide',
-      icon: 'guide',
-      noCache: true
-    }
-  }]
-}
+// {
+//   path: '/guide',
+//   component: Layout,
+//   redirect: '/guide/index',
+//   children: [{
+//     path: 'index',
+//     component: () => import('@/views/guide/index'),
+//     name: 'Guide',
+//     meta: {
+//       title: 'guide',
+//       icon: 'guide',
+//       noCache: true
+//     }
+//   }]
+// }
   // {
   //   path: '/profile',
   //   component: Layout,
@@ -184,13 +190,19 @@ export const asyncRoutes = [
   //   ]
   // },
   // tableRouter,
-  metaRouter,
-  userRouter,
-  prodRouter,
-  orderRouter,
-  sitesRouter,
-  systemRouter,
-  componentsRouter,
+  applicationRouter, // 应用
+  operationsRouter, // 运营官
+  // manufacturerRouter,
+  userRouter, // 用户
+  orderRouter, // 订单
+  prodRouter, // 产品
+  logisticsRouter, // 物流
+  staffRouter, // 员工
+  recommendRouter, // 推荐
+  metaRouter, // 元定义
+  // sitesRouter,
+  systemRouter, // 系统设置
+  // componentsRouter,
   // chartsRouter,
   // nestedRouter,
   // tableRouter,
@@ -210,46 +222,46 @@ export const asyncRoutes = [
   },
   /** when your routing map is too long, you can split it into small modules **/
 
-  {
-    path: '/example',
-    component: Layout,
-    redirect: '/example/list',
-    name: 'Example',
-    meta: {
-      title: 'example',
-      icon: 'example'
-    },
-    children: [{
-      path: 'create',
-      component: () => import('@/views/example/create'),
-      name: 'CreateArticle',
-      meta: {
-        title: 'createArticle',
-        icon: 'edit'
-      }
-    },
-    {
-      path: 'edit/:id(\\d+)',
-      component: () => import('@/views/example/edit'),
-      name: 'EditArticle',
-      meta: {
-        title: 'editArticle',
-        noCache: true,
-        activeMenu: '/example/list'
-      },
-      hidden: true
-    },
-    {
-      path: 'list',
-      component: () => import('@/views/example/list'),
-      name: 'ArticleList',
-      meta: {
-        title: 'articleList',
-        icon: 'list'
-      }
-    }
-    ]
-  },
+  // {
+  //   path: '/example',
+  //   component: Layout,
+  //   redirect: '/example/list',
+  //   name: 'Example',
+  //   meta: {
+  //     title: 'example',
+  //     icon: 'example'
+  //   },
+  //   children: [{
+  //     path: 'create',
+  //     component: () => import('@/views/example/create'),
+  //     name: 'CreateArticle',
+  //     meta: {
+  //       title: 'createArticle',
+  //       icon: 'edit'
+  //     }
+  //   },
+  //   {
+  //     path: 'edit/:id(\\d+)',
+  //     component: () => import('@/views/example/edit'),
+  //     name: 'EditArticle',
+  //     meta: {
+  //       title: 'editArticle',
+  //       noCache: true,
+  //       activeMenu: '/example/list'
+  //     },
+  //     hidden: true
+  //   },
+  //   {
+  //     path: 'list',
+  //     component: () => import('@/views/example/list'),
+  //     name: 'ArticleList',
+  //     meta: {
+  //       title: 'articleList',
+  //       icon: 'list'
+  //     }
+  //   }
+  //   ]
+  // },
 
   // {
   //   path: '/tab',
diff --git a/src/router/modules/application.js b/src/router/modules/application.js
new file mode 100644
index 0000000..1c580c6
--- /dev/null
+++ b/src/router/modules/application.js
@@ -0,0 +1,25 @@
+import Layout from '@/layout'
+
+const applicationRouter = {
+  path: '/application',
+  component: Layout,
+  redirect: '/application/page',
+  alwaysShow: true, // will always show the root menu
+  name: 'Application',
+  meta: {
+    title: '应用',
+    icon: 'component',
+    roles: ['admin', 'assistant'] // you can set roles in root nav
+  },
+  children: [{
+    path: 'appManage',
+    component: () => import('@/views/application/appManage'),
+    name: 'appManage',
+    meta: {
+      title: '应用管理',
+      icon: 'component',
+      roles: ['admin', 'assistant'] // or you can only set roles in sub nav
+    }
+  }]
+}
+export default applicationRouter
diff --git a/src/router/modules/logistics.js b/src/router/modules/logistics.js
new file mode 100644
index 0000000..df14fcd
--- /dev/null
+++ b/src/router/modules/logistics.js
@@ -0,0 +1,25 @@
+import Layout from '@/layout'
+
+const logisticsRouter = {
+  path: '/logistics',
+  component: Layout,
+  redirect: '/logistics/page',
+  alwaysShow: true, // will always show the root menu
+  name: 'logistics',
+  meta: {
+    title: '物流',
+    icon: 'tree-table',
+    roles: ['admin', 'assistant'] // you can set roles in root nav
+  },
+  children: [{
+    path: 'logisticspage',
+    component: () => import('@/views/logistics/logistics'),
+    name: 'logistics',
+    meta: {
+      title: '物流管理',
+      icon: 'tree-table',
+      roles: ['admin', 'assistant'] // or you can only set roles in sub nav
+    }
+  }]
+}
+export default logisticsRouter
diff --git a/src/router/modules/manufacturer.js b/src/router/modules/manufacturer.js
new file mode 100644
index 0000000..d352e2d
--- /dev/null
+++ b/src/router/modules/manufacturer.js
@@ -0,0 +1,25 @@
+import Layout from '@/layout'
+
+const manufacturerRouter = {
+  path: '/manufacturer',
+  component: Layout,
+  redirect: '/manufacturer/page',
+  alwaysShow: true, // will always show the root menu
+  name: 'manufacturer',
+  meta: {
+    title: '厂商',
+    icon: 'tree-table',
+    roles: ['admin', 'assistant'] // you can set roles in root nav
+  },
+  children: [{
+    path: 'manufacturerpage',
+    component: () => import('@/views/manufacturer/manufacturer'),
+    name: 'manufacturer',
+    meta: {
+      title: '厂商管理',
+      icon: 'tree-table',
+      roles: ['admin', 'assistant'] // or you can only set roles in sub nav
+    }
+  }]
+}
+export default manufacturerRouter
diff --git a/src/router/modules/meta.js b/src/router/modules/meta.js
index 85746d4..0444b2e 100644
--- a/src/router/modules/meta.js
+++ b/src/router/modules/meta.js
@@ -7,8 +7,8 @@ const metaRouter = {
   alwaysShow: true, // will always show the root menu
   name: 'Meta',
   meta: {
-    title: 'metas.metas',
-    icon: 'zip',
+    title: '元定义',
+    icon: 'tree',
     roles: ['admin', 'assistant'] // you can set roles in root nav
   },
   children: [{
@@ -17,7 +17,7 @@ const metaRouter = {
     name: 'MetaList',
     meta: {
       title: 'metas.list',
-      icon: 'zip',
+      icon: 'tree',
       roles: ['admin', 'assistant'] // or you can only set roles in sub nav
     }
   }]
diff --git a/src/router/modules/operations.js b/src/router/modules/operations.js
new file mode 100644
index 0000000..1f59b64
--- /dev/null
+++ b/src/router/modules/operations.js
@@ -0,0 +1,25 @@
+import Layout from '@/layout'
+
+const operationsRouter = {
+  path: '/operations',
+  component: Layout,
+  redirect: '/operations/page',
+  alwaysShow: true, // will always show the root menu
+  name: 'operations',
+  meta: {
+    title: '运营官',
+    icon: 'user',
+    roles: ['admin', 'assistant'] // you can set roles in root nav
+  },
+  children: [{
+    path: 'operationsManage',
+    component: () => import('@/views/operations/operations'),
+    name: 'operations',
+    meta: {
+      title: '运营官管理',
+      icon: 'user',
+      roles: ['admin', 'assistant'] // or you can only set roles in sub nav
+    }
+  }]
+}
+export default operationsRouter
diff --git a/src/router/modules/recommend.js b/src/router/modules/recommend.js
new file mode 100644
index 0000000..b384d7b
--- /dev/null
+++ b/src/router/modules/recommend.js
@@ -0,0 +1,25 @@
+import Layout from '@/layout'
+
+const recommendRouter = {
+  path: '/recommend',
+  component: Layout,
+  redirect: '/recommend/page',
+  alwaysShow: true, // will always show the root menu
+  name: 'recommend',
+  meta: {
+    title: '推荐',
+    icon: 'table',
+    roles: ['admin', 'assistant'] // you can set roles in root nav
+  },
+  children: [{
+    path: 'recommendpage',
+    component: () => import('@/views/recommend/recommend'),
+    name: 'recommend',
+    meta: {
+      title: '推荐系统',
+      icon: 'table',
+      roles: ['admin', 'assistant'] // or you can only set roles in sub nav
+    }
+  }]
+}
+export default recommendRouter
diff --git a/src/router/modules/staff.js b/src/router/modules/staff.js
new file mode 100644
index 0000000..86104dd
--- /dev/null
+++ b/src/router/modules/staff.js
@@ -0,0 +1,25 @@
+import Layout from '@/layout'
+
+const staffRouter = {
+  path: '/staff',
+  component: Layout,
+  redirect: '/staff/page',
+  alwaysShow: true, // will always show the root menu
+  name: 'staff',
+  meta: {
+    title: '员工',
+    icon: 'people',
+    roles: ['admin', 'assistant'] // you can set roles in root nav
+  },
+  children: [{
+    path: 'staffpage',
+    component: () => import('@/views/staff/staff'),
+    name: 'staff',
+    meta: {
+      title: '员工管理',
+      icon: 'people',
+      roles: ['admin', 'assistant'] // or you can only set roles in sub nav
+    }
+  }]
+}
+export default staffRouter
diff --git a/src/views/application/appManage.vue b/src/views/application/appManage.vue
new file mode 100644
index 0000000..10bde58
--- /dev/null
+++ b/src/views/application/appManage.vue
@@ -0,0 +1,577 @@
+<template>
+  <div class="login-container">
+    <el-button
+      type="primary"
+      @click="() => addNode()"
+    >{{ $t('users.add') }}</el-button>
+    <el-tree
+      ref="tree"
+      :data="data"
+      show-checkbox
+      node-key="id"
+      highlight-current
+      check-strictly
+      indent="40"
+      icon-class="el-icon-pc"
+      :props="defaultProps"
+    >
+      <!-- <el-tree
+      :data="data"
+      show-checkbox
+      node-key="id"
+      default-expand-all
+      highlight-current
+      isLeaf
+      @node-contextmenu="()=>rightKey(node, data)"
+      check-strictly//在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
+      :expand-on-click-node="false"//是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
+      :props="defaultProps"
+    > -->
+      <span
+        slot-scope="{ node, data }"
+        class="custom-tree-node"
+      >
+        <span>{{ node.label }}</span>
+        <span>
+          <el-button
+            type="primary"
+            icon="el-icon-upload"
+            size="mini"
+            @click="() => append(data)"
+          >
+            {{ $t('users.add') }}
+          </el-button>
+          <el-button
+            type="primary"
+            icon="el-icon-edit"
+            size="mini"
+            @click="() => update(node, data)"
+          >
+            {{ $t('users.update') }}
+          </el-button>
+          <el-button
+            type="primary"
+            icon="el-icon-delete"
+            size="mini"
+            class="danger"
+            @click="() => remove(node, data)"
+          >
+            {{ $t('users.del') }}
+          </el-button>
+        </span>
+      </span>
+    </el-tree>
+
+    <!-- <div class="buttons">
+      <el-button @click="getCheckedNodes">通过 node 获取</el-button>
+      <el-button @click="getCheckedKeys">通过 key 获取</el-button>
+      <el-button @click="setCheckedNodes">通过 node 设置</el-button>
+      <el-button @click="setCheckedKeys">通过 key 设置</el-button>
+      <el-button @click="resetChecked">清空</el-button>
+    </div> -->
+  </div>
+</template>
+<script>
+let id = 1000
+export default {
+  data() {
+    return {
+      data: [
+        {
+          label: '成镜',
+          id: '1',
+          children: [
+            {
+              label: '款式',
+              id: '11',
+              children: [
+                { label: '青春学子风' },
+                { label: '休闲' },
+                { label: '商务' },
+                { label: '复古' },
+                { label: '时尚' },
+                { label: '质感哥特潮' },
+                { label: '轻简北欧风' },
+                { label: '理性几何派' },
+                { label: '多元新风尚' },
+                { label: '立体巴洛克' },
+                { label: '有机未来时' },
+                { label: '无界人文系' },
+                { label: '自然舒视角' },
+                { label: '流线洛可可' },
+                { label: '奶奶风' },
+                { label: '简约-极简文艺范' },
+                { label: '运动风' },
+                { label: '行政风' },
+                { label: '折射率' }
+              ]
+            },
+            { label: '个性化服务', id: '267', children: [] },
+            {
+              label: '赠品',
+              id: '259',
+              children: [{ label: '眼镜布' }, { label: '眼镜盒' }]
+            },
+            {
+              label: '场景',
+              id: '258',
+              children: [
+                { label: '学校场景' },
+                { label: '出行交际' },
+                { label: '夜店迷人' },
+                { label: '明星同款' }
+              ]
+            },
+            {
+              label: '销售保障',
+              id: '245',
+              children: [
+                { label: '可退' },
+                { label: '可换' },
+                { label: '可修' }
+              ]
+            },
+            {
+              label: '功能',
+              id: '140',
+              children: [
+                { label: '防踩压' },
+                { label: '防扭曲' },
+                { label: '抗过敏' },
+                { label: '防腐蚀' },
+                { label: '耐磨损' },
+                { label: '抗蓝光' }
+              ]
+            },
+            {
+              label: '品牌',
+              id: '71',
+              children: [
+                { label: '购易' },
+                { label: '海俪恩' },
+                { label: '沙漠风暴' },
+                { label: '古诗' },
+                { label: '暴龙' },
+                { label: '犀牛' },
+                { label: 'Ray-Ban雷朋' },
+                { label: 'PARIM派丽蒙' },
+                { label: '石狼' },
+                { label: '木九十' }
+              ]
+            },
+            {
+              label: '边形',
+              id: '49',
+              children: [
+                { label: '半框' },
+                { label: '全框' },
+                { label: '无框' }
+              ]
+            },
+            {
+              label: '性别',
+              id: '23',
+              children: [{ label: '男性' }, { label: '女性' }]
+            },
+            {
+              label: '梁型',
+              id: '20',
+              children: [{ label: '双梁' }, { label: '单梁' }]
+            },
+            {
+              label: '重量',
+              id: '19',
+              children: [{ label: '30克以下' }, { label: '80克以上' }]
+            },
+            {
+              label: '适用脸型',
+              id: '15',
+              children: [{ label: '方' }, { label: '圆' }, { label: '瓜子' }]
+            },
+            {
+              label: '形状',
+              id: '14',
+              children: [
+                { label: '正圆形' },
+                { label: '椭圆形' },
+                { label: '方圆' },
+                { label: '方形' },
+                { label: '多边形' },
+                { label: '内三角(蛤蟆)' },
+                { label: '外三角(蝶形)' }
+              ]
+            },
+            { label: '年龄', id: '12', children: [{ label: '通用' }] },
+            {
+              label: '材质',
+              id: '10',
+              children: [
+                { label: '板材' },
+                { label: '纯钛' },
+                { label: 'TR90' },
+                { label: '木质' },
+                { label: '竹质' },
+                { label: 'β钛' },
+                { label: 'PC' },
+                { label: 'ULTEM塑钢' },
+                { label: '钨钛塑钢' },
+                { label: '镁铝合金' },
+                { label: '碳纤维' }
+              ]
+            },
+            { label: '折射率', id: '286', children: [] },
+            {
+              label: '颜色',
+              id: '13',
+              children: [
+                { label: '金色' },
+                { label: '银色' },
+                { label: '黑色' },
+                { label: '彩色' },
+                { label: '枪色' }
+              ]
+            }
+          ]
+        },
+        {
+          label: '镜片',
+          id: '2',
+          children: [
+            {
+              label: '面型',
+              id: '85',
+              children: [{ label: '球面单光' }, { label: '非球面单光' }]
+            },
+            { label: '近视度数', id: '92', children: [] },
+            { label: '散光', id: '93', children: [] },
+            {
+              label: '功能',
+              id: '95',
+              children: [
+                { label: '防起雾' },
+                { label: '防蓝光' },
+                { label: '防紫外线' },
+                { label: '偏光' },
+                { label: '染色' },
+                { label: '抗疲劳' },
+                { label: '青少年渐进' },
+                { label: '内渐进' },
+                { label: '变色' },
+                { label: '双光' },
+                { label: '耐磨损' },
+                { label: '防尘' },
+                { label: '防水' },
+                { label: '防摔' },
+                { label: '防指纹' },
+                { label: '防反光' }
+              ]
+            },
+            {
+              label: '颜色',
+              id: '100',
+              children: [
+                { label: '透明' },
+                { label: '染色' },
+                { label: '变色' },
+                { label: '单色' }
+              ]
+            },
+            {
+              label: '折射率',
+              id: '101',
+              children: [
+                { label: '1.56' },
+                { label: '1.60' },
+                { label: '1.65' },
+                { label: '1.67' },
+                { label: '1.71' },
+                { label: '1.74' }
+              ]
+            },
+            { label: '阿贝数（色散）', id: '102', children: [] },
+            { label: '重量', id: '103', children: [] },
+            {
+              label: '材质',
+              id: '104',
+              children: [
+                { label: '树脂' },
+                { label: '玻璃' },
+                { label: '宇宙PC' },
+                { label: 'PC' }
+              ]
+            },
+            {
+              label: '品牌',
+              id: '118',
+              children: [
+                { label: '好视力' },
+                { label: 'RAISE锐视' },
+                { label: '依视路' },
+                { label: '凯米' },
+                { label: '蔡司' },
+                { label: '舒曼' }
+              ]
+            },
+            {
+              label: '销售保障',
+              id: '249',
+              children: [
+                { label: '可退' },
+                { label: '可换' },
+                { label: '可修' }
+              ]
+            }
+          ]
+        },
+        {
+          label: '隐形眼镜',
+          id: '88',
+          children: [
+            {
+              label: '颜色',
+              id: '105',
+              children: [
+                { label: '绿' },
+                { label: '灰' },
+                { label: '黑' },
+                { label: '紫' },
+                { label: '蓝' },
+                { label: '棕色' },
+                { label: '紫色' }
+              ]
+            },
+            {
+              label: '颜料',
+              id: '106',
+              children: [{ label: '水性' }, { label: '油性' }]
+            },
+            { label: '度数', id: '107', children: [] },
+            {
+              label: '周期',
+              id: '108',
+              children: [
+                { label: '日抛' },
+                { label: '周抛' },
+                { label: '双周抛' },
+                { label: '月抛' },
+                { label: '季抛' },
+                { label: '半年抛' },
+                { label: '年抛' }
+              ]
+            },
+            {
+              label: '品牌',
+              id: '133',
+              children: [
+                { label: 'HolyNara' },
+                { label: '爱尔康' },
+                { label: 'MaxLook' },
+                { label: 'NEO' },
+                { label: 'GEO' },
+                { label: '实瞳' },
+                { label: '茵洛' },
+                { label: 'DAZZSHOP' },
+                { label: 'O-LENS' },
+                { label: 'envie' },
+                { label: '曼秀雷敦' },
+                { label: '妃蜜莉' },
+                { label: '海俪恩' },
+                { label: '凯达' },
+                { label: '蔡司' },
+                { label: '酷视' },
+                { label: 'LILMOON' },
+                { label: 'RICHBABY' },
+                { label: 'T-Garden' },
+                { label: 'lenstown' },
+                { label: '新加坡P2' },
+                { label: '星欧' },
+                { label: '美尼康' },
+                { label: '美汐' },
+                { label: '欧舒天' },
+                { label: '海昌' },
+                { label: '菲士康' },
+                { label: '卫康' },
+                { label: '库博' },
+                { label: '安视优' },
+                { label: '美若康' },
+                { label: '视康' },
+                { label: '澜柏' },
+                { label: '3N' },
+                { label: 'BIJOU' },
+                { label: '依视明' },
+                { label: '博士伦' },
+                { label: '瞳昕' },
+                { label: '科莱博' },
+                { label: '绮芙莉' },
+                { label: '雅培' },
+                { label: '爱能视' },
+                { label: '女神秘语' },
+                { label: '博视顿' },
+                { label: '妆美堂' },
+                { label: '人鱼姬' },
+                { label: 'EverColor' },
+                { label: 'Sincere' }
+              ]
+            },
+            {
+              label: '工艺',
+              id: '159',
+              children: [{ label: '涂层工艺' }, { label: '三层夹色工艺' }]
+            },
+            {
+              label: '材质',
+              id: '164',
+              children: [{ label: '硅水凝胶' }, { label: '水凝胶' }]
+            },
+            {
+              label: '含水量',
+              id: '174',
+              children: [
+                { label: '0-40%' },
+                { label: '40-44%' },
+                { label: '45%以上' }
+              ]
+            },
+            {
+              label: '基弧',
+              id: '178',
+              children: [{ label: '0.0-8.4' }, { label: '8.4以上' }]
+            },
+            {
+              label: '直径',
+              id: '181',
+              children: [{ label: '13.4-14' }, { label: '14以上' }]
+            },
+            {
+              label: '中心厚度',
+              id: '184',
+              children: [
+                { label: '0.0 - 0.03' },
+                { label: '0.04 - 0.09' },
+                { label: '0.1以上' }
+              ]
+            },
+            { label: '销售保障', id: '253', children: [] },
+            { label: '赠品', id: '260', children: [] }
+          ]
+        },
+        {
+          label: '特种镜',
+          id: '146',
+          children: [
+            {
+              label: '镜面颜色',
+              id: '237',
+              children: [{ label: '透明' }, { label: '亮金色' }]
+            },
+            {
+              label: '品牌',
+              id: '238',
+              children: [{ label: '宁哥牌' }, { label: '秀野牌' }]
+            },
+            {
+              label: '销售保障',
+              id: '254',
+              children: [{ label: '包退' }, { label: '包换' }]
+            },
+            {
+              label: '功能',
+              id: '268',
+              children: [
+                { label: '防风镜' },
+                { label: '防爆溅工作镜' },
+                { label: '泳镜' },
+                { label: '智能镜' }
+              ]
+            }
+          ]
+        }
+      ],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      }
+    }
+  },
+  methods: {
+    getCheckedNodes() {
+      console.log(this.$refs.tree.getCheckedNodes())
+    },
+    getCheckedKeys() {
+      console.log(this.$refs.tree.getCheckedKeys())
+    },
+    addNode() {
+      let h
+      this.$message({
+        message: h('p', null, [
+          h('span', null, '添加一个新节点 ')
+          // h("i", { style: "color: teal" }, "VNode")
+        ])
+      })
+    },
+    append(data) {
+      const newChild = { id: id++, label: 'testtest', children: [] }
+      if (!data.children) {
+        this.$set(data, 'children', [])
+      }
+      data.children.push(newChild)
+    },
+    remove(node, data) {
+      // 删除
+      const parent = node.parent
+      const children = parent.data.children || parent.data
+      const index = children.findIndex(d => d.id === data.id)
+      children.splice(index, 1)
+    },
+    rightKey(node, data) {
+      // 右键
+      const h = this.$createElement
+      // console.log(data, this.$refs.tree);
+      this.$message({
+        message: h('p', null, [
+          h('span', null, '右键了啊！ ' + node + data),
+          h('i', { style: 'color: teal' }, 'VNode')
+        ])
+      })
+    },
+    update(node, data) {
+      // 更新
+      const h = this.$createElement
+      this.$message({
+        message: h('p', null, [
+          h('span', null, '内容可以是 '),
+          h('i', { style: 'color: teal' }, 'VNode')
+        ])
+      })
+    },
+    setCheckedNodes() {
+      this.$refs.tree.setCheckedNodes([
+        {
+          id: 5,
+          label: '二级 2-1'
+        },
+        {
+          id: 9,
+          label: '三级 1-1-1'
+        }
+      ])
+    },
+    setCheckedKeys() {
+      this.$refs.tree.setCheckedKeys([3])
+    },
+    resetChecked() {
+      this.$refs.tree.setCheckedKeys([])
+    }
+  }
+}
+</script>
+<style>
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+</style>
diff --git a/src/views/logistics/logistics.vue b/src/views/logistics/logistics.vue
new file mode 100644
index 0000000..10bde58
--- /dev/null
+++ b/src/views/logistics/logistics.vue
@@ -0,0 +1,577 @@
+<template>
+  <div class="login-container">
+    <el-button
+      type="primary"
+      @click="() => addNode()"
+    >{{ $t('users.add') }}</el-button>
+    <el-tree
+      ref="tree"
+      :data="data"
+      show-checkbox
+      node-key="id"
+      highlight-current
+      check-strictly
+      indent="40"
+      icon-class="el-icon-pc"
+      :props="defaultProps"
+    >
+      <!-- <el-tree
+      :data="data"
+      show-checkbox
+      node-key="id"
+      default-expand-all
+      highlight-current
+      isLeaf
+      @node-contextmenu="()=>rightKey(node, data)"
+      check-strictly//在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
+      :expand-on-click-node="false"//是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
+      :props="defaultProps"
+    > -->
+      <span
+        slot-scope="{ node, data }"
+        class="custom-tree-node"
+      >
+        <span>{{ node.label }}</span>
+        <span>
+          <el-button
+            type="primary"
+            icon="el-icon-upload"
+            size="mini"
+            @click="() => append(data)"
+          >
+            {{ $t('users.add') }}
+          </el-button>
+          <el-button
+            type="primary"
+            icon="el-icon-edit"
+            size="mini"
+            @click="() => update(node, data)"
+          >
+            {{ $t('users.update') }}
+          </el-button>
+          <el-button
+            type="primary"
+            icon="el-icon-delete"
+            size="mini"
+            class="danger"
+            @click="() => remove(node, data)"
+          >
+            {{ $t('users.del') }}
+          </el-button>
+        </span>
+      </span>
+    </el-tree>
+
+    <!-- <div class="buttons">
+      <el-button @click="getCheckedNodes">通过 node 获取</el-button>
+      <el-button @click="getCheckedKeys">通过 key 获取</el-button>
+      <el-button @click="setCheckedNodes">通过 node 设置</el-button>
+      <el-button @click="setCheckedKeys">通过 key 设置</el-button>
+      <el-button @click="resetChecked">清空</el-button>
+    </div> -->
+  </div>
+</template>
+<script>
+let id = 1000
+export default {
+  data() {
+    return {
+      data: [
+        {
+          label: '成镜',
+          id: '1',
+          children: [
+            {
+              label: '款式',
+              id: '11',
+              children: [
+                { label: '青春学子风' },
+                { label: '休闲' },
+                { label: '商务' },
+                { label: '复古' },
+                { label: '时尚' },
+                { label: '质感哥特潮' },
+                { label: '轻简北欧风' },
+                { label: '理性几何派' },
+                { label: '多元新风尚' },
+                { label: '立体巴洛克' },
+                { label: '有机未来时' },
+                { label: '无界人文系' },
+                { label: '自然舒视角' },
+                { label: '流线洛可可' },
+                { label: '奶奶风' },
+                { label: '简约-极简文艺范' },
+                { label: '运动风' },
+                { label: '行政风' },
+                { label: '折射率' }
+              ]
+            },
+            { label: '个性化服务', id: '267', children: [] },
+            {
+              label: '赠品',
+              id: '259',
+              children: [{ label: '眼镜布' }, { label: '眼镜盒' }]
+            },
+            {
+              label: '场景',
+              id: '258',
+              children: [
+                { label: '学校场景' },
+                { label: '出行交际' },
+                { label: '夜店迷人' },
+                { label: '明星同款' }
+              ]
+            },
+            {
+              label: '销售保障',
+              id: '245',
+              children: [
+                { label: '可退' },
+                { label: '可换' },
+                { label: '可修' }
+              ]
+            },
+            {
+              label: '功能',
+              id: '140',
+              children: [
+                { label: '防踩压' },
+                { label: '防扭曲' },
+                { label: '抗过敏' },
+                { label: '防腐蚀' },
+                { label: '耐磨损' },
+                { label: '抗蓝光' }
+              ]
+            },
+            {
+              label: '品牌',
+              id: '71',
+              children: [
+                { label: '购易' },
+                { label: '海俪恩' },
+                { label: '沙漠风暴' },
+                { label: '古诗' },
+                { label: '暴龙' },
+                { label: '犀牛' },
+                { label: 'Ray-Ban雷朋' },
+                { label: 'PARIM派丽蒙' },
+                { label: '石狼' },
+                { label: '木九十' }
+              ]
+            },
+            {
+              label: '边形',
+              id: '49',
+              children: [
+                { label: '半框' },
+                { label: '全框' },
+                { label: '无框' }
+              ]
+            },
+            {
+              label: '性别',
+              id: '23',
+              children: [{ label: '男性' }, { label: '女性' }]
+            },
+            {
+              label: '梁型',
+              id: '20',
+              children: [{ label: '双梁' }, { label: '单梁' }]
+            },
+            {
+              label: '重量',
+              id: '19',
+              children: [{ label: '30克以下' }, { label: '80克以上' }]
+            },
+            {
+              label: '适用脸型',
+              id: '15',
+              children: [{ label: '方' }, { label: '圆' }, { label: '瓜子' }]
+            },
+            {
+              label: '形状',
+              id: '14',
+              children: [
+                { label: '正圆形' },
+                { label: '椭圆形' },
+                { label: '方圆' },
+                { label: '方形' },
+                { label: '多边形' },
+                { label: '内三角(蛤蟆)' },
+                { label: '外三角(蝶形)' }
+              ]
+            },
+            { label: '年龄', id: '12', children: [{ label: '通用' }] },
+            {
+              label: '材质',
+              id: '10',
+              children: [
+                { label: '板材' },
+                { label: '纯钛' },
+                { label: 'TR90' },
+                { label: '木质' },
+                { label: '竹质' },
+                { label: 'β钛' },
+                { label: 'PC' },
+                { label: 'ULTEM塑钢' },
+                { label: '钨钛塑钢' },
+                { label: '镁铝合金' },
+                { label: '碳纤维' }
+              ]
+            },
+            { label: '折射率', id: '286', children: [] },
+            {
+              label: '颜色',
+              id: '13',
+              children: [
+                { label: '金色' },
+                { label: '银色' },
+                { label: '黑色' },
+                { label: '彩色' },
+                { label: '枪色' }
+              ]
+            }
+          ]
+        },
+        {
+          label: '镜片',
+          id: '2',
+          children: [
+            {
+              label: '面型',
+              id: '85',
+              children: [{ label: '球面单光' }, { label: '非球面单光' }]
+            },
+            { label: '近视度数', id: '92', children: [] },
+            { label: '散光', id: '93', children: [] },
+            {
+              label: '功能',
+              id: '95',
+              children: [
+                { label: '防起雾' },
+                { label: '防蓝光' },
+                { label: '防紫外线' },
+                { label: '偏光' },
+                { label: '染色' },
+                { label: '抗疲劳' },
+                { label: '青少年渐进' },
+                { label: '内渐进' },
+                { label: '变色' },
+                { label: '双光' },
+                { label: '耐磨损' },
+                { label: '防尘' },
+                { label: '防水' },
+                { label: '防摔' },
+                { label: '防指纹' },
+                { label: '防反光' }
+              ]
+            },
+            {
+              label: '颜色',
+              id: '100',
+              children: [
+                { label: '透明' },
+                { label: '染色' },
+                { label: '变色' },
+                { label: '单色' }
+              ]
+            },
+            {
+              label: '折射率',
+              id: '101',
+              children: [
+                { label: '1.56' },
+                { label: '1.60' },
+                { label: '1.65' },
+                { label: '1.67' },
+                { label: '1.71' },
+                { label: '1.74' }
+              ]
+            },
+            { label: '阿贝数（色散）', id: '102', children: [] },
+            { label: '重量', id: '103', children: [] },
+            {
+              label: '材质',
+              id: '104',
+              children: [
+                { label: '树脂' },
+                { label: '玻璃' },
+                { label: '宇宙PC' },
+                { label: 'PC' }
+              ]
+            },
+            {
+              label: '品牌',
+              id: '118',
+              children: [
+                { label: '好视力' },
+                { label: 'RAISE锐视' },
+                { label: '依视路' },
+                { label: '凯米' },
+                { label: '蔡司' },
+                { label: '舒曼' }
+              ]
+            },
+            {
+              label: '销售保障',
+              id: '249',
+              children: [
+                { label: '可退' },
+                { label: '可换' },
+                { label: '可修' }
+              ]
+            }
+          ]
+        },
+        {
+          label: '隐形眼镜',
+          id: '88',
+          children: [
+            {
+              label: '颜色',
+              id: '105',
+              children: [
+                { label: '绿' },
+                { label: '灰' },
+                { label: '黑' },
+                { label: '紫' },
+                { label: '蓝' },
+                { label: '棕色' },
+                { label: '紫色' }
+              ]
+            },
+            {
+              label: '颜料',
+              id: '106',
+              children: [{ label: '水性' }, { label: '油性' }]
+            },
+            { label: '度数', id: '107', children: [] },
+            {
+              label: '周期',
+              id: '108',
+              children: [
+                { label: '日抛' },
+                { label: '周抛' },
+                { label: '双周抛' },
+                { label: '月抛' },
+                { label: '季抛' },
+                { label: '半年抛' },
+                { label: '年抛' }
+              ]
+            },
+            {
+              label: '品牌',
+              id: '133',
+              children: [
+                { label: 'HolyNara' },
+                { label: '爱尔康' },
+                { label: 'MaxLook' },
+                { label: 'NEO' },
+                { label: 'GEO' },
+                { label: '实瞳' },
+                { label: '茵洛' },
+                { label: 'DAZZSHOP' },
+                { label: 'O-LENS' },
+                { label: 'envie' },
+                { label: '曼秀雷敦' },
+                { label: '妃蜜莉' },
+                { label: '海俪恩' },
+                { label: '凯达' },
+                { label: '蔡司' },
+                { label: '酷视' },
+                { label: 'LILMOON' },
+                { label: 'RICHBABY' },
+                { label: 'T-Garden' },
+                { label: 'lenstown' },
+                { label: '新加坡P2' },
+                { label: '星欧' },
+                { label: '美尼康' },
+                { label: '美汐' },
+                { label: '欧舒天' },
+                { label: '海昌' },
+                { label: '菲士康' },
+                { label: '卫康' },
+                { label: '库博' },
+                { label: '安视优' },
+                { label: '美若康' },
+                { label: '视康' },
+                { label: '澜柏' },
+                { label: '3N' },
+                { label: 'BIJOU' },
+                { label: '依视明' },
+                { label: '博士伦' },
+                { label: '瞳昕' },
+                { label: '科莱博' },
+                { label: '绮芙莉' },
+                { label: '雅培' },
+                { label: '爱能视' },
+                { label: '女神秘语' },
+                { label: '博视顿' },
+                { label: '妆美堂' },
+                { label: '人鱼姬' },
+                { label: 'EverColor' },
+                { label: 'Sincere' }
+              ]
+            },
+            {
+              label: '工艺',
+              id: '159',
+              children: [{ label: '涂层工艺' }, { label: '三层夹色工艺' }]
+            },
+            {
+              label: '材质',
+              id: '164',
+              children: [{ label: '硅水凝胶' }, { label: '水凝胶' }]
+            },
+            {
+              label: '含水量',
+              id: '174',
+              children: [
+                { label: '0-40%' },
+                { label: '40-44%' },
+                { label: '45%以上' }
+              ]
+            },
+            {
+              label: '基弧',
+              id: '178',
+              children: [{ label: '0.0-8.4' }, { label: '8.4以上' }]
+            },
+            {
+              label: '直径',
+              id: '181',
+              children: [{ label: '13.4-14' }, { label: '14以上' }]
+            },
+            {
+              label: '中心厚度',
+              id: '184',
+              children: [
+                { label: '0.0 - 0.03' },
+                { label: '0.04 - 0.09' },
+                { label: '0.1以上' }
+              ]
+            },
+            { label: '销售保障', id: '253', children: [] },
+            { label: '赠品', id: '260', children: [] }
+          ]
+        },
+        {
+          label: '特种镜',
+          id: '146',
+          children: [
+            {
+              label: '镜面颜色',
+              id: '237',
+              children: [{ label: '透明' }, { label: '亮金色' }]
+            },
+            {
+              label: '品牌',
+              id: '238',
+              children: [{ label: '宁哥牌' }, { label: '秀野牌' }]
+            },
+            {
+              label: '销售保障',
+              id: '254',
+              children: [{ label: '包退' }, { label: '包换' }]
+            },
+            {
+              label: '功能',
+              id: '268',
+              children: [
+                { label: '防风镜' },
+                { label: '防爆溅工作镜' },
+                { label: '泳镜' },
+                { label: '智能镜' }
+              ]
+            }
+          ]
+        }
+      ],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      }
+    }
+  },
+  methods: {
+    getCheckedNodes() {
+      console.log(this.$refs.tree.getCheckedNodes())
+    },
+    getCheckedKeys() {
+      console.log(this.$refs.tree.getCheckedKeys())
+    },
+    addNode() {
+      let h
+      this.$message({
+        message: h('p', null, [
+          h('span', null, '添加一个新节点 ')
+          // h("i", { style: "color: teal" }, "VNode")
+        ])
+      })
+    },
+    append(data) {
+      const newChild = { id: id++, label: 'testtest', children: [] }
+      if (!data.children) {
+        this.$set(data, 'children', [])
+      }
+      data.children.push(newChild)
+    },
+    remove(node, data) {
+      // 删除
+      const parent = node.parent
+      const children = parent.data.children || parent.data
+      const index = children.findIndex(d => d.id === data.id)
+      children.splice(index, 1)
+    },
+    rightKey(node, data) {
+      // 右键
+      const h = this.$createElement
+      // console.log(data, this.$refs.tree);
+      this.$message({
+        message: h('p', null, [
+          h('span', null, '右键了啊！ ' + node + data),
+          h('i', { style: 'color: teal' }, 'VNode')
+        ])
+      })
+    },
+    update(node, data) {
+      // 更新
+      const h = this.$createElement
+      this.$message({
+        message: h('p', null, [
+          h('span', null, '内容可以是 '),
+          h('i', { style: 'color: teal' }, 'VNode')
+        ])
+      })
+    },
+    setCheckedNodes() {
+      this.$refs.tree.setCheckedNodes([
+        {
+          id: 5,
+          label: '二级 2-1'
+        },
+        {
+          id: 9,
+          label: '三级 1-1-1'
+        }
+      ])
+    },
+    setCheckedKeys() {
+      this.$refs.tree.setCheckedKeys([3])
+    },
+    resetChecked() {
+      this.$refs.tree.setCheckedKeys([])
+    }
+  }
+}
+</script>
+<style>
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+</style>
diff --git a/src/views/manufacturer/manufacturer.vue b/src/views/manufacturer/manufacturer.vue
new file mode 100644
index 0000000..10bde58
--- /dev/null
+++ b/src/views/manufacturer/manufacturer.vue
@@ -0,0 +1,577 @@
+<template>
+  <div class="login-container">
+    <el-button
+      type="primary"
+      @click="() => addNode()"
+    >{{ $t('users.add') }}</el-button>
+    <el-tree
+      ref="tree"
+      :data="data"
+      show-checkbox
+      node-key="id"
+      highlight-current
+      check-strictly
+      indent="40"
+      icon-class="el-icon-pc"
+      :props="defaultProps"
+    >
+      <!-- <el-tree
+      :data="data"
+      show-checkbox
+      node-key="id"
+      default-expand-all
+      highlight-current
+      isLeaf
+      @node-contextmenu="()=>rightKey(node, data)"
+      check-strictly//在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
+      :expand-on-click-node="false"//是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
+      :props="defaultProps"
+    > -->
+      <span
+        slot-scope="{ node, data }"
+        class="custom-tree-node"
+      >
+        <span>{{ node.label }}</span>
+        <span>
+          <el-button
+            type="primary"
+            icon="el-icon-upload"
+            size="mini"
+            @click="() => append(data)"
+          >
+            {{ $t('users.add') }}
+          </el-button>
+          <el-button
+            type="primary"
+            icon="el-icon-edit"
+            size="mini"
+            @click="() => update(node, data)"
+          >
+            {{ $t('users.update') }}
+          </el-button>
+          <el-button
+            type="primary"
+            icon="el-icon-delete"
+            size="mini"
+            class="danger"
+            @click="() => remove(node, data)"
+          >
+            {{ $t('users.del') }}
+          </el-button>
+        </span>
+      </span>
+    </el-tree>
+
+    <!-- <div class="buttons">
+      <el-button @click="getCheckedNodes">通过 node 获取</el-button>
+      <el-button @click="getCheckedKeys">通过 key 获取</el-button>
+      <el-button @click="setCheckedNodes">通过 node 设置</el-button>
+      <el-button @click="setCheckedKeys">通过 key 设置</el-button>
+      <el-button @click="resetChecked">清空</el-button>
+    </div> -->
+  </div>
+</template>
+<script>
+let id = 1000
+export default {
+  data() {
+    return {
+      data: [
+        {
+          label: '成镜',
+          id: '1',
+          children: [
+            {
+              label: '款式',
+              id: '11',
+              children: [
+                { label: '青春学子风' },
+                { label: '休闲' },
+                { label: '商务' },
+                { label: '复古' },
+                { label: '时尚' },
+                { label: '质感哥特潮' },
+                { label: '轻简北欧风' },
+                { label: '理性几何派' },
+                { label: '多元新风尚' },
+                { label: '立体巴洛克' },
+                { label: '有机未来时' },
+                { label: '无界人文系' },
+                { label: '自然舒视角' },
+                { label: '流线洛可可' },
+                { label: '奶奶风' },
+                { label: '简约-极简文艺范' },
+                { label: '运动风' },
+                { label: '行政风' },
+                { label: '折射率' }
+              ]
+            },
+            { label: '个性化服务', id: '267', children: [] },
+            {
+              label: '赠品',
+              id: '259',
+              children: [{ label: '眼镜布' }, { label: '眼镜盒' }]
+            },
+            {
+              label: '场景',
+              id: '258',
+              children: [
+                { label: '学校场景' },
+                { label: '出行交际' },
+                { label: '夜店迷人' },
+                { label: '明星同款' }
+              ]
+            },
+            {
+              label: '销售保障',
+              id: '245',
+              children: [
+                { label: '可退' },
+                { label: '可换' },
+                { label: '可修' }
+              ]
+            },
+            {
+              label: '功能',
+              id: '140',
+              children: [
+                { label: '防踩压' },
+                { label: '防扭曲' },
+                { label: '抗过敏' },
+                { label: '防腐蚀' },
+                { label: '耐磨损' },
+                { label: '抗蓝光' }
+              ]
+            },
+            {
+              label: '品牌',
+              id: '71',
+              children: [
+                { label: '购易' },
+                { label: '海俪恩' },
+                { label: '沙漠风暴' },
+                { label: '古诗' },
+                { label: '暴龙' },
+                { label: '犀牛' },
+                { label: 'Ray-Ban雷朋' },
+                { label: 'PARIM派丽蒙' },
+                { label: '石狼' },
+                { label: '木九十' }
+              ]
+            },
+            {
+              label: '边形',
+              id: '49',
+              children: [
+                { label: '半框' },
+                { label: '全框' },
+                { label: '无框' }
+              ]
+            },
+            {
+              label: '性别',
+              id: '23',
+              children: [{ label: '男性' }, { label: '女性' }]
+            },
+            {
+              label: '梁型',
+              id: '20',
+              children: [{ label: '双梁' }, { label: '单梁' }]
+            },
+            {
+              label: '重量',
+              id: '19',
+              children: [{ label: '30克以下' }, { label: '80克以上' }]
+            },
+            {
+              label: '适用脸型',
+              id: '15',
+              children: [{ label: '方' }, { label: '圆' }, { label: '瓜子' }]
+            },
+            {
+              label: '形状',
+              id: '14',
+              children: [
+                { label: '正圆形' },
+                { label: '椭圆形' },
+                { label: '方圆' },
+                { label: '方形' },
+                { label: '多边形' },
+                { label: '内三角(蛤蟆)' },
+                { label: '外三角(蝶形)' }
+              ]
+            },
+            { label: '年龄', id: '12', children: [{ label: '通用' }] },
+            {
+              label: '材质',
+              id: '10',
+              children: [
+                { label: '板材' },
+                { label: '纯钛' },
+                { label: 'TR90' },
+                { label: '木质' },
+                { label: '竹质' },
+                { label: 'β钛' },
+                { label: 'PC' },
+                { label: 'ULTEM塑钢' },
+                { label: '钨钛塑钢' },
+                { label: '镁铝合金' },
+                { label: '碳纤维' }
+              ]
+            },
+            { label: '折射率', id: '286', children: [] },
+            {
+              label: '颜色',
+              id: '13',
+              children: [
+                { label: '金色' },
+                { label: '银色' },
+                { label: '黑色' },
+                { label: '彩色' },
+                { label: '枪色' }
+              ]
+            }
+          ]
+        },
+        {
+          label: '镜片',
+          id: '2',
+          children: [
+            {
+              label: '面型',
+              id: '85',
+              children: [{ label: '球面单光' }, { label: '非球面单光' }]
+            },
+            { label: '近视度数', id: '92', children: [] },
+            { label: '散光', id: '93', children: [] },
+            {
+              label: '功能',
+              id: '95',
+              children: [
+                { label: '防起雾' },
+                { label: '防蓝光' },
+                { label: '防紫外线' },
+                { label: '偏光' },
+                { label: '染色' },
+                { label: '抗疲劳' },
+                { label: '青少年渐进' },
+                { label: '内渐进' },
+                { label: '变色' },
+                { label: '双光' },
+                { label: '耐磨损' },
+                { label: '防尘' },
+                { label: '防水' },
+                { label: '防摔' },
+                { label: '防指纹' },
+                { label: '防反光' }
+              ]
+            },
+            {
+              label: '颜色',
+              id: '100',
+              children: [
+                { label: '透明' },
+                { label: '染色' },
+                { label: '变色' },
+                { label: '单色' }
+              ]
+            },
+            {
+              label: '折射率',
+              id: '101',
+              children: [
+                { label: '1.56' },
+                { label: '1.60' },
+                { label: '1.65' },
+                { label: '1.67' },
+                { label: '1.71' },
+                { label: '1.74' }
+              ]
+            },
+            { label: '阿贝数（色散）', id: '102', children: [] },
+            { label: '重量', id: '103', children: [] },
+            {
+              label: '材质',
+              id: '104',
+              children: [
+                { label: '树脂' },
+                { label: '玻璃' },
+                { label: '宇宙PC' },
+                { label: 'PC' }
+              ]
+            },
+            {
+              label: '品牌',
+              id: '118',
+              children: [
+                { label: '好视力' },
+                { label: 'RAISE锐视' },
+                { label: '依视路' },
+                { label: '凯米' },
+                { label: '蔡司' },
+                { label: '舒曼' }
+              ]
+            },
+            {
+              label: '销售保障',
+              id: '249',
+              children: [
+                { label: '可退' },
+                { label: '可换' },
+                { label: '可修' }
+              ]
+            }
+          ]
+        },
+        {
+          label: '隐形眼镜',
+          id: '88',
+          children: [
+            {
+              label: '颜色',
+              id: '105',
+              children: [
+                { label: '绿' },
+                { label: '灰' },
+                { label: '黑' },
+                { label: '紫' },
+                { label: '蓝' },
+                { label: '棕色' },
+                { label: '紫色' }
+              ]
+            },
+            {
+              label: '颜料',
+              id: '106',
+              children: [{ label: '水性' }, { label: '油性' }]
+            },
+            { label: '度数', id: '107', children: [] },
+            {
+              label: '周期',
+              id: '108',
+              children: [
+                { label: '日抛' },
+                { label: '周抛' },
+                { label: '双周抛' },
+                { label: '月抛' },
+                { label: '季抛' },
+                { label: '半年抛' },
+                { label: '年抛' }
+              ]
+            },
+            {
+              label: '品牌',
+              id: '133',
+              children: [
+                { label: 'HolyNara' },
+                { label: '爱尔康' },
+                { label: 'MaxLook' },
+                { label: 'NEO' },
+                { label: 'GEO' },
+                { label: '实瞳' },
+                { label: '茵洛' },
+                { label: 'DAZZSHOP' },
+                { label: 'O-LENS' },
+                { label: 'envie' },
+                { label: '曼秀雷敦' },
+                { label: '妃蜜莉' },
+                { label: '海俪恩' },
+                { label: '凯达' },
+                { label: '蔡司' },
+                { label: '酷视' },
+                { label: 'LILMOON' },
+                { label: 'RICHBABY' },
+                { label: 'T-Garden' },
+                { label: 'lenstown' },
+                { label: '新加坡P2' },
+                { label: '星欧' },
+                { label: '美尼康' },
+                { label: '美汐' },
+                { label: '欧舒天' },
+                { label: '海昌' },
+                { label: '菲士康' },
+                { label: '卫康' },
+                { label: '库博' },
+                { label: '安视优' },
+                { label: '美若康' },
+                { label: '视康' },
+                { label: '澜柏' },
+                { label: '3N' },
+                { label: 'BIJOU' },
+                { label: '依视明' },
+                { label: '博士伦' },
+                { label: '瞳昕' },
+                { label: '科莱博' },
+                { label: '绮芙莉' },
+                { label: '雅培' },
+                { label: '爱能视' },
+                { label: '女神秘语' },
+                { label: '博视顿' },
+                { label: '妆美堂' },
+                { label: '人鱼姬' },
+                { label: 'EverColor' },
+                { label: 'Sincere' }
+              ]
+            },
+            {
+              label: '工艺',
+              id: '159',
+              children: [{ label: '涂层工艺' }, { label: '三层夹色工艺' }]
+            },
+            {
+              label: '材质',
+              id: '164',
+              children: [{ label: '硅水凝胶' }, { label: '水凝胶' }]
+            },
+            {
+              label: '含水量',
+              id: '174',
+              children: [
+                { label: '0-40%' },
+                { label: '40-44%' },
+                { label: '45%以上' }
+              ]
+            },
+            {
+              label: '基弧',
+              id: '178',
+              children: [{ label: '0.0-8.4' }, { label: '8.4以上' }]
+            },
+            {
+              label: '直径',
+              id: '181',
+              children: [{ label: '13.4-14' }, { label: '14以上' }]
+            },
+            {
+              label: '中心厚度',
+              id: '184',
+              children: [
+                { label: '0.0 - 0.03' },
+                { label: '0.04 - 0.09' },
+                { label: '0.1以上' }
+              ]
+            },
+            { label: '销售保障', id: '253', children: [] },
+            { label: '赠品', id: '260', children: [] }
+          ]
+        },
+        {
+          label: '特种镜',
+          id: '146',
+          children: [
+            {
+              label: '镜面颜色',
+              id: '237',
+              children: [{ label: '透明' }, { label: '亮金色' }]
+            },
+            {
+              label: '品牌',
+              id: '238',
+              children: [{ label: '宁哥牌' }, { label: '秀野牌' }]
+            },
+            {
+              label: '销售保障',
+              id: '254',
+              children: [{ label: '包退' }, { label: '包换' }]
+            },
+            {
+              label: '功能',
+              id: '268',
+              children: [
+                { label: '防风镜' },
+                { label: '防爆溅工作镜' },
+                { label: '泳镜' },
+                { label: '智能镜' }
+              ]
+            }
+          ]
+        }
+      ],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      }
+    }
+  },
+  methods: {
+    getCheckedNodes() {
+      console.log(this.$refs.tree.getCheckedNodes())
+    },
+    getCheckedKeys() {
+      console.log(this.$refs.tree.getCheckedKeys())
+    },
+    addNode() {
+      let h
+      this.$message({
+        message: h('p', null, [
+          h('span', null, '添加一个新节点 ')
+          // h("i", { style: "color: teal" }, "VNode")
+        ])
+      })
+    },
+    append(data) {
+      const newChild = { id: id++, label: 'testtest', children: [] }
+      if (!data.children) {
+        this.$set(data, 'children', [])
+      }
+      data.children.push(newChild)
+    },
+    remove(node, data) {
+      // 删除
+      const parent = node.parent
+      const children = parent.data.children || parent.data
+      const index = children.findIndex(d => d.id === data.id)
+      children.splice(index, 1)
+    },
+    rightKey(node, data) {
+      // 右键
+      const h = this.$createElement
+      // console.log(data, this.$refs.tree);
+      this.$message({
+        message: h('p', null, [
+          h('span', null, '右键了啊！ ' + node + data),
+          h('i', { style: 'color: teal' }, 'VNode')
+        ])
+      })
+    },
+    update(node, data) {
+      // 更新
+      const h = this.$createElement
+      this.$message({
+        message: h('p', null, [
+          h('span', null, '内容可以是 '),
+          h('i', { style: 'color: teal' }, 'VNode')
+        ])
+      })
+    },
+    setCheckedNodes() {
+      this.$refs.tree.setCheckedNodes([
+        {
+          id: 5,
+          label: '二级 2-1'
+        },
+        {
+          id: 9,
+          label: '三级 1-1-1'
+        }
+      ])
+    },
+    setCheckedKeys() {
+      this.$refs.tree.setCheckedKeys([3])
+    },
+    resetChecked() {
+      this.$refs.tree.setCheckedKeys([])
+    }
+  }
+}
+</script>
+<style>
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+</style>
diff --git a/src/views/operations/operations.vue b/src/views/operations/operations.vue
new file mode 100644
index 0000000..10bde58
--- /dev/null
+++ b/src/views/operations/operations.vue
@@ -0,0 +1,577 @@
+<template>
+  <div class="login-container">
+    <el-button
+      type="primary"
+      @click="() => addNode()"
+    >{{ $t('users.add') }}</el-button>
+    <el-tree
+      ref="tree"
+      :data="data"
+      show-checkbox
+      node-key="id"
+      highlight-current
+      check-strictly
+      indent="40"
+      icon-class="el-icon-pc"
+      :props="defaultProps"
+    >
+      <!-- <el-tree
+      :data="data"
+      show-checkbox
+      node-key="id"
+      default-expand-all
+      highlight-current
+      isLeaf
+      @node-contextmenu="()=>rightKey(node, data)"
+      check-strictly//在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
+      :expand-on-click-node="false"//是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
+      :props="defaultProps"
+    > -->
+      <span
+        slot-scope="{ node, data }"
+        class="custom-tree-node"
+      >
+        <span>{{ node.label }}</span>
+        <span>
+          <el-button
+            type="primary"
+            icon="el-icon-upload"
+            size="mini"
+            @click="() => append(data)"
+          >
+            {{ $t('users.add') }}
+          </el-button>
+          <el-button
+            type="primary"
+            icon="el-icon-edit"
+            size="mini"
+            @click="() => update(node, data)"
+          >
+            {{ $t('users.update') }}
+          </el-button>
+          <el-button
+            type="primary"
+            icon="el-icon-delete"
+            size="mini"
+            class="danger"
+            @click="() => remove(node, data)"
+          >
+            {{ $t('users.del') }}
+          </el-button>
+        </span>
+      </span>
+    </el-tree>
+
+    <!-- <div class="buttons">
+      <el-button @click="getCheckedNodes">通过 node 获取</el-button>
+      <el-button @click="getCheckedKeys">通过 key 获取</el-button>
+      <el-button @click="setCheckedNodes">通过 node 设置</el-button>
+      <el-button @click="setCheckedKeys">通过 key 设置</el-button>
+      <el-button @click="resetChecked">清空</el-button>
+    </div> -->
+  </div>
+</template>
+<script>
+let id = 1000
+export default {
+  data() {
+    return {
+      data: [
+        {
+          label: '成镜',
+          id: '1',
+          children: [
+            {
+              label: '款式',
+              id: '11',
+              children: [
+                { label: '青春学子风' },
+                { label: '休闲' },
+                { label: '商务' },
+                { label: '复古' },
+                { label: '时尚' },
+                { label: '质感哥特潮' },
+                { label: '轻简北欧风' },
+                { label: '理性几何派' },
+                { label: '多元新风尚' },
+                { label: '立体巴洛克' },
+                { label: '有机未来时' },
+                { label: '无界人文系' },
+                { label: '自然舒视角' },
+                { label: '流线洛可可' },
+                { label: '奶奶风' },
+                { label: '简约-极简文艺范' },
+                { label: '运动风' },
+                { label: '行政风' },
+                { label: '折射率' }
+              ]
+            },
+            { label: '个性化服务', id: '267', children: [] },
+            {
+              label: '赠品',
+              id: '259',
+              children: [{ label: '眼镜布' }, { label: '眼镜盒' }]
+            },
+            {
+              label: '场景',
+              id: '258',
+              children: [
+                { label: '学校场景' },
+                { label: '出行交际' },
+                { label: '夜店迷人' },
+                { label: '明星同款' }
+              ]
+            },
+            {
+              label: '销售保障',
+              id: '245',
+              children: [
+                { label: '可退' },
+                { label: '可换' },
+                { label: '可修' }
+              ]
+            },
+            {
+              label: '功能',
+              id: '140',
+              children: [
+                { label: '防踩压' },
+                { label: '防扭曲' },
+                { label: '抗过敏' },
+                { label: '防腐蚀' },
+                { label: '耐磨损' },
+                { label: '抗蓝光' }
+              ]
+            },
+            {
+              label: '品牌',
+              id: '71',
+              children: [
+                { label: '购易' },
+                { label: '海俪恩' },
+                { label: '沙漠风暴' },
+                { label: '古诗' },
+                { label: '暴龙' },
+                { label: '犀牛' },
+                { label: 'Ray-Ban雷朋' },
+                { label: 'PARIM派丽蒙' },
+                { label: '石狼' },
+                { label: '木九十' }
+              ]
+            },
+            {
+              label: '边形',
+              id: '49',
+              children: [
+                { label: '半框' },
+                { label: '全框' },
+                { label: '无框' }
+              ]
+            },
+            {
+              label: '性别',
+              id: '23',
+              children: [{ label: '男性' }, { label: '女性' }]
+            },
+            {
+              label: '梁型',
+              id: '20',
+              children: [{ label: '双梁' }, { label: '单梁' }]
+            },
+            {
+              label: '重量',
+              id: '19',
+              children: [{ label: '30克以下' }, { label: '80克以上' }]
+            },
+            {
+              label: '适用脸型',
+              id: '15',
+              children: [{ label: '方' }, { label: '圆' }, { label: '瓜子' }]
+            },
+            {
+              label: '形状',
+              id: '14',
+              children: [
+                { label: '正圆形' },
+                { label: '椭圆形' },
+                { label: '方圆' },
+                { label: '方形' },
+                { label: '多边形' },
+                { label: '内三角(蛤蟆)' },
+                { label: '外三角(蝶形)' }
+              ]
+            },
+            { label: '年龄', id: '12', children: [{ label: '通用' }] },
+            {
+              label: '材质',
+              id: '10',
+              children: [
+                { label: '板材' },
+                { label: '纯钛' },
+                { label: 'TR90' },
+                { label: '木质' },
+                { label: '竹质' },
+                { label: 'β钛' },
+                { label: 'PC' },
+                { label: 'ULTEM塑钢' },
+                { label: '钨钛塑钢' },
+                { label: '镁铝合金' },
+                { label: '碳纤维' }
+              ]
+            },
+            { label: '折射率', id: '286', children: [] },
+            {
+              label: '颜色',
+              id: '13',
+              children: [
+                { label: '金色' },
+                { label: '银色' },
+                { label: '黑色' },
+                { label: '彩色' },
+                { label: '枪色' }
+              ]
+            }
+          ]
+        },
+        {
+          label: '镜片',
+          id: '2',
+          children: [
+            {
+              label: '面型',
+              id: '85',
+              children: [{ label: '球面单光' }, { label: '非球面单光' }]
+            },
+            { label: '近视度数', id: '92', children: [] },
+            { label: '散光', id: '93', children: [] },
+            {
+              label: '功能',
+              id: '95',
+              children: [
+                { label: '防起雾' },
+                { label: '防蓝光' },
+                { label: '防紫外线' },
+                { label: '偏光' },
+                { label: '染色' },
+                { label: '抗疲劳' },
+                { label: '青少年渐进' },
+                { label: '内渐进' },
+                { label: '变色' },
+                { label: '双光' },
+                { label: '耐磨损' },
+                { label: '防尘' },
+                { label: '防水' },
+                { label: '防摔' },
+                { label: '防指纹' },
+                { label: '防反光' }
+              ]
+            },
+            {
+              label: '颜色',
+              id: '100',
+              children: [
+                { label: '透明' },
+                { label: '染色' },
+                { label: '变色' },
+                { label: '单色' }
+              ]
+            },
+            {
+              label: '折射率',
+              id: '101',
+              children: [
+                { label: '1.56' },
+                { label: '1.60' },
+                { label: '1.65' },
+                { label: '1.67' },
+                { label: '1.71' },
+                { label: '1.74' }
+              ]
+            },
+            { label: '阿贝数（色散）', id: '102', children: [] },
+            { label: '重量', id: '103', children: [] },
+            {
+              label: '材质',
+              id: '104',
+              children: [
+                { label: '树脂' },
+                { label: '玻璃' },
+                { label: '宇宙PC' },
+                { label: 'PC' }
+              ]
+            },
+            {
+              label: '品牌',
+              id: '118',
+              children: [
+                { label: '好视力' },
+                { label: 'RAISE锐视' },
+                { label: '依视路' },
+                { label: '凯米' },
+                { label: '蔡司' },
+                { label: '舒曼' }
+              ]
+            },
+            {
+              label: '销售保障',
+              id: '249',
+              children: [
+                { label: '可退' },
+                { label: '可换' },
+                { label: '可修' }
+              ]
+            }
+          ]
+        },
+        {
+          label: '隐形眼镜',
+          id: '88',
+          children: [
+            {
+              label: '颜色',
+              id: '105',
+              children: [
+                { label: '绿' },
+                { label: '灰' },
+                { label: '黑' },
+                { label: '紫' },
+                { label: '蓝' },
+                { label: '棕色' },
+                { label: '紫色' }
+              ]
+            },
+            {
+              label: '颜料',
+              id: '106',
+              children: [{ label: '水性' }, { label: '油性' }]
+            },
+            { label: '度数', id: '107', children: [] },
+            {
+              label: '周期',
+              id: '108',
+              children: [
+                { label: '日抛' },
+                { label: '周抛' },
+                { label: '双周抛' },
+                { label: '月抛' },
+                { label: '季抛' },
+                { label: '半年抛' },
+                { label: '年抛' }
+              ]
+            },
+            {
+              label: '品牌',
+              id: '133',
+              children: [
+                { label: 'HolyNara' },
+                { label: '爱尔康' },
+                { label: 'MaxLook' },
+                { label: 'NEO' },
+                { label: 'GEO' },
+                { label: '实瞳' },
+                { label: '茵洛' },
+                { label: 'DAZZSHOP' },
+                { label: 'O-LENS' },
+                { label: 'envie' },
+                { label: '曼秀雷敦' },
+                { label: '妃蜜莉' },
+                { label: '海俪恩' },
+                { label: '凯达' },
+                { label: '蔡司' },
+                { label: '酷视' },
+                { label: 'LILMOON' },
+                { label: 'RICHBABY' },
+                { label: 'T-Garden' },
+                { label: 'lenstown' },
+                { label: '新加坡P2' },
+                { label: '星欧' },
+                { label: '美尼康' },
+                { label: '美汐' },
+                { label: '欧舒天' },
+                { label: '海昌' },
+                { label: '菲士康' },
+                { label: '卫康' },
+                { label: '库博' },
+                { label: '安视优' },
+                { label: '美若康' },
+                { label: '视康' },
+                { label: '澜柏' },
+                { label: '3N' },
+                { label: 'BIJOU' },
+                { label: '依视明' },
+                { label: '博士伦' },
+                { label: '瞳昕' },
+                { label: '科莱博' },
+                { label: '绮芙莉' },
+                { label: '雅培' },
+                { label: '爱能视' },
+                { label: '女神秘语' },
+                { label: '博视顿' },
+                { label: '妆美堂' },
+                { label: '人鱼姬' },
+                { label: 'EverColor' },
+                { label: 'Sincere' }
+              ]
+            },
+            {
+              label: '工艺',
+              id: '159',
+              children: [{ label: '涂层工艺' }, { label: '三层夹色工艺' }]
+            },
+            {
+              label: '材质',
+              id: '164',
+              children: [{ label: '硅水凝胶' }, { label: '水凝胶' }]
+            },
+            {
+              label: '含水量',
+              id: '174',
+              children: [
+                { label: '0-40%' },
+                { label: '40-44%' },
+                { label: '45%以上' }
+              ]
+            },
+            {
+              label: '基弧',
+              id: '178',
+              children: [{ label: '0.0-8.4' }, { label: '8.4以上' }]
+            },
+            {
+              label: '直径',
+              id: '181',
+              children: [{ label: '13.4-14' }, { label: '14以上' }]
+            },
+            {
+              label: '中心厚度',
+              id: '184',
+              children: [
+                { label: '0.0 - 0.03' },
+                { label: '0.04 - 0.09' },
+                { label: '0.1以上' }
+              ]
+            },
+            { label: '销售保障', id: '253', children: [] },
+            { label: '赠品', id: '260', children: [] }
+          ]
+        },
+        {
+          label: '特种镜',
+          id: '146',
+          children: [
+            {
+              label: '镜面颜色',
+              id: '237',
+              children: [{ label: '透明' }, { label: '亮金色' }]
+            },
+            {
+              label: '品牌',
+              id: '238',
+              children: [{ label: '宁哥牌' }, { label: '秀野牌' }]
+            },
+            {
+              label: '销售保障',
+              id: '254',
+              children: [{ label: '包退' }, { label: '包换' }]
+            },
+            {
+              label: '功能',
+              id: '268',
+              children: [
+                { label: '防风镜' },
+                { label: '防爆溅工作镜' },
+                { label: '泳镜' },
+                { label: '智能镜' }
+              ]
+            }
+          ]
+        }
+      ],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      }
+    }
+  },
+  methods: {
+    getCheckedNodes() {
+      console.log(this.$refs.tree.getCheckedNodes())
+    },
+    getCheckedKeys() {
+      console.log(this.$refs.tree.getCheckedKeys())
+    },
+    addNode() {
+      let h
+      this.$message({
+        message: h('p', null, [
+          h('span', null, '添加一个新节点 ')
+          // h("i", { style: "color: teal" }, "VNode")
+        ])
+      })
+    },
+    append(data) {
+      const newChild = { id: id++, label: 'testtest', children: [] }
+      if (!data.children) {
+        this.$set(data, 'children', [])
+      }
+      data.children.push(newChild)
+    },
+    remove(node, data) {
+      // 删除
+      const parent = node.parent
+      const children = parent.data.children || parent.data
+      const index = children.findIndex(d => d.id === data.id)
+      children.splice(index, 1)
+    },
+    rightKey(node, data) {
+      // 右键
+      const h = this.$createElement
+      // console.log(data, this.$refs.tree);
+      this.$message({
+        message: h('p', null, [
+          h('span', null, '右键了啊！ ' + node + data),
+          h('i', { style: 'color: teal' }, 'VNode')
+        ])
+      })
+    },
+    update(node, data) {
+      // 更新
+      const h = this.$createElement
+      this.$message({
+        message: h('p', null, [
+          h('span', null, '内容可以是 '),
+          h('i', { style: 'color: teal' }, 'VNode')
+        ])
+      })
+    },
+    setCheckedNodes() {
+      this.$refs.tree.setCheckedNodes([
+        {
+          id: 5,
+          label: '二级 2-1'
+        },
+        {
+          id: 9,
+          label: '三级 1-1-1'
+        }
+      ])
+    },
+    setCheckedKeys() {
+      this.$refs.tree.setCheckedKeys([3])
+    },
+    resetChecked() {
+      this.$refs.tree.setCheckedKeys([])
+    }
+  }
+}
+</script>
+<style>
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+</style>
diff --git a/src/views/recommend/recommend.vue b/src/views/recommend/recommend.vue
new file mode 100644
index 0000000..10bde58
--- /dev/null
+++ b/src/views/recommend/recommend.vue
@@ -0,0 +1,577 @@
+<template>
+  <div class="login-container">
+    <el-button
+      type="primary"
+      @click="() => addNode()"
+    >{{ $t('users.add') }}</el-button>
+    <el-tree
+      ref="tree"
+      :data="data"
+      show-checkbox
+      node-key="id"
+      highlight-current
+      check-strictly
+      indent="40"
+      icon-class="el-icon-pc"
+      :props="defaultProps"
+    >
+      <!-- <el-tree
+      :data="data"
+      show-checkbox
+      node-key="id"
+      default-expand-all
+      highlight-current
+      isLeaf
+      @node-contextmenu="()=>rightKey(node, data)"
+      check-strictly//在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
+      :expand-on-click-node="false"//是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
+      :props="defaultProps"
+    > -->
+      <span
+        slot-scope="{ node, data }"
+        class="custom-tree-node"
+      >
+        <span>{{ node.label }}</span>
+        <span>
+          <el-button
+            type="primary"
+            icon="el-icon-upload"
+            size="mini"
+            @click="() => append(data)"
+          >
+            {{ $t('users.add') }}
+          </el-button>
+          <el-button
+            type="primary"
+            icon="el-icon-edit"
+            size="mini"
+            @click="() => update(node, data)"
+          >
+            {{ $t('users.update') }}
+          </el-button>
+          <el-button
+            type="primary"
+            icon="el-icon-delete"
+            size="mini"
+            class="danger"
+            @click="() => remove(node, data)"
+          >
+            {{ $t('users.del') }}
+          </el-button>
+        </span>
+      </span>
+    </el-tree>
+
+    <!-- <div class="buttons">
+      <el-button @click="getCheckedNodes">通过 node 获取</el-button>
+      <el-button @click="getCheckedKeys">通过 key 获取</el-button>
+      <el-button @click="setCheckedNodes">通过 node 设置</el-button>
+      <el-button @click="setCheckedKeys">通过 key 设置</el-button>
+      <el-button @click="resetChecked">清空</el-button>
+    </div> -->
+  </div>
+</template>
+<script>
+let id = 1000
+export default {
+  data() {
+    return {
+      data: [
+        {
+          label: '成镜',
+          id: '1',
+          children: [
+            {
+              label: '款式',
+              id: '11',
+              children: [
+                { label: '青春学子风' },
+                { label: '休闲' },
+                { label: '商务' },
+                { label: '复古' },
+                { label: '时尚' },
+                { label: '质感哥特潮' },
+                { label: '轻简北欧风' },
+                { label: '理性几何派' },
+                { label: '多元新风尚' },
+                { label: '立体巴洛克' },
+                { label: '有机未来时' },
+                { label: '无界人文系' },
+                { label: '自然舒视角' },
+                { label: '流线洛可可' },
+                { label: '奶奶风' },
+                { label: '简约-极简文艺范' },
+                { label: '运动风' },
+                { label: '行政风' },
+                { label: '折射率' }
+              ]
+            },
+            { label: '个性化服务', id: '267', children: [] },
+            {
+              label: '赠品',
+              id: '259',
+              children: [{ label: '眼镜布' }, { label: '眼镜盒' }]
+            },
+            {
+              label: '场景',
+              id: '258',
+              children: [
+                { label: '学校场景' },
+                { label: '出行交际' },
+                { label: '夜店迷人' },
+                { label: '明星同款' }
+              ]
+            },
+            {
+              label: '销售保障',
+              id: '245',
+              children: [
+                { label: '可退' },
+                { label: '可换' },
+                { label: '可修' }
+              ]
+            },
+            {
+              label: '功能',
+              id: '140',
+              children: [
+                { label: '防踩压' },
+                { label: '防扭曲' },
+                { label: '抗过敏' },
+                { label: '防腐蚀' },
+                { label: '耐磨损' },
+                { label: '抗蓝光' }
+              ]
+            },
+            {
+              label: '品牌',
+              id: '71',
+              children: [
+                { label: '购易' },
+                { label: '海俪恩' },
+                { label: '沙漠风暴' },
+                { label: '古诗' },
+                { label: '暴龙' },
+                { label: '犀牛' },
+                { label: 'Ray-Ban雷朋' },
+                { label: 'PARIM派丽蒙' },
+                { label: '石狼' },
+                { label: '木九十' }
+              ]
+            },
+            {
+              label: '边形',
+              id: '49',
+              children: [
+                { label: '半框' },
+                { label: '全框' },
+                { label: '无框' }
+              ]
+            },
+            {
+              label: '性别',
+              id: '23',
+              children: [{ label: '男性' }, { label: '女性' }]
+            },
+            {
+              label: '梁型',
+              id: '20',
+              children: [{ label: '双梁' }, { label: '单梁' }]
+            },
+            {
+              label: '重量',
+              id: '19',
+              children: [{ label: '30克以下' }, { label: '80克以上' }]
+            },
+            {
+              label: '适用脸型',
+              id: '15',
+              children: [{ label: '方' }, { label: '圆' }, { label: '瓜子' }]
+            },
+            {
+              label: '形状',
+              id: '14',
+              children: [
+                { label: '正圆形' },
+                { label: '椭圆形' },
+                { label: '方圆' },
+                { label: '方形' },
+                { label: '多边形' },
+                { label: '内三角(蛤蟆)' },
+                { label: '外三角(蝶形)' }
+              ]
+            },
+            { label: '年龄', id: '12', children: [{ label: '通用' }] },
+            {
+              label: '材质',
+              id: '10',
+              children: [
+                { label: '板材' },
+                { label: '纯钛' },
+                { label: 'TR90' },
+                { label: '木质' },
+                { label: '竹质' },
+                { label: 'β钛' },
+                { label: 'PC' },
+                { label: 'ULTEM塑钢' },
+                { label: '钨钛塑钢' },
+                { label: '镁铝合金' },
+                { label: '碳纤维' }
+              ]
+            },
+            { label: '折射率', id: '286', children: [] },
+            {
+              label: '颜色',
+              id: '13',
+              children: [
+                { label: '金色' },
+                { label: '银色' },
+                { label: '黑色' },
+                { label: '彩色' },
+                { label: '枪色' }
+              ]
+            }
+          ]
+        },
+        {
+          label: '镜片',
+          id: '2',
+          children: [
+            {
+              label: '面型',
+              id: '85',
+              children: [{ label: '球面单光' }, { label: '非球面单光' }]
+            },
+            { label: '近视度数', id: '92', children: [] },
+            { label: '散光', id: '93', children: [] },
+            {
+              label: '功能',
+              id: '95',
+              children: [
+                { label: '防起雾' },
+                { label: '防蓝光' },
+                { label: '防紫外线' },
+                { label: '偏光' },
+                { label: '染色' },
+                { label: '抗疲劳' },
+                { label: '青少年渐进' },
+                { label: '内渐进' },
+                { label: '变色' },
+                { label: '双光' },
+                { label: '耐磨损' },
+                { label: '防尘' },
+                { label: '防水' },
+                { label: '防摔' },
+                { label: '防指纹' },
+                { label: '防反光' }
+              ]
+            },
+            {
+              label: '颜色',
+              id: '100',
+              children: [
+                { label: '透明' },
+                { label: '染色' },
+                { label: '变色' },
+                { label: '单色' }
+              ]
+            },
+            {
+              label: '折射率',
+              id: '101',
+              children: [
+                { label: '1.56' },
+                { label: '1.60' },
+                { label: '1.65' },
+                { label: '1.67' },
+                { label: '1.71' },
+                { label: '1.74' }
+              ]
+            },
+            { label: '阿贝数（色散）', id: '102', children: [] },
+            { label: '重量', id: '103', children: [] },
+            {
+              label: '材质',
+              id: '104',
+              children: [
+                { label: '树脂' },
+                { label: '玻璃' },
+                { label: '宇宙PC' },
+                { label: 'PC' }
+              ]
+            },
+            {
+              label: '品牌',
+              id: '118',
+              children: [
+                { label: '好视力' },
+                { label: 'RAISE锐视' },
+                { label: '依视路' },
+                { label: '凯米' },
+                { label: '蔡司' },
+                { label: '舒曼' }
+              ]
+            },
+            {
+              label: '销售保障',
+              id: '249',
+              children: [
+                { label: '可退' },
+                { label: '可换' },
+                { label: '可修' }
+              ]
+            }
+          ]
+        },
+        {
+          label: '隐形眼镜',
+          id: '88',
+          children: [
+            {
+              label: '颜色',
+              id: '105',
+              children: [
+                { label: '绿' },
+                { label: '灰' },
+                { label: '黑' },
+                { label: '紫' },
+                { label: '蓝' },
+                { label: '棕色' },
+                { label: '紫色' }
+              ]
+            },
+            {
+              label: '颜料',
+              id: '106',
+              children: [{ label: '水性' }, { label: '油性' }]
+            },
+            { label: '度数', id: '107', children: [] },
+            {
+              label: '周期',
+              id: '108',
+              children: [
+                { label: '日抛' },
+                { label: '周抛' },
+                { label: '双周抛' },
+                { label: '月抛' },
+                { label: '季抛' },
+                { label: '半年抛' },
+                { label: '年抛' }
+              ]
+            },
+            {
+              label: '品牌',
+              id: '133',
+              children: [
+                { label: 'HolyNara' },
+                { label: '爱尔康' },
+                { label: 'MaxLook' },
+                { label: 'NEO' },
+                { label: 'GEO' },
+                { label: '实瞳' },
+                { label: '茵洛' },
+                { label: 'DAZZSHOP' },
+                { label: 'O-LENS' },
+                { label: 'envie' },
+                { label: '曼秀雷敦' },
+                { label: '妃蜜莉' },
+                { label: '海俪恩' },
+                { label: '凯达' },
+                { label: '蔡司' },
+                { label: '酷视' },
+                { label: 'LILMOON' },
+                { label: 'RICHBABY' },
+                { label: 'T-Garden' },
+                { label: 'lenstown' },
+                { label: '新加坡P2' },
+                { label: '星欧' },
+                { label: '美尼康' },
+                { label: '美汐' },
+                { label: '欧舒天' },
+                { label: '海昌' },
+                { label: '菲士康' },
+                { label: '卫康' },
+                { label: '库博' },
+                { label: '安视优' },
+                { label: '美若康' },
+                { label: '视康' },
+                { label: '澜柏' },
+                { label: '3N' },
+                { label: 'BIJOU' },
+                { label: '依视明' },
+                { label: '博士伦' },
+                { label: '瞳昕' },
+                { label: '科莱博' },
+                { label: '绮芙莉' },
+                { label: '雅培' },
+                { label: '爱能视' },
+                { label: '女神秘语' },
+                { label: '博视顿' },
+                { label: '妆美堂' },
+                { label: '人鱼姬' },
+                { label: 'EverColor' },
+                { label: 'Sincere' }
+              ]
+            },
+            {
+              label: '工艺',
+              id: '159',
+              children: [{ label: '涂层工艺' }, { label: '三层夹色工艺' }]
+            },
+            {
+              label: '材质',
+              id: '164',
+              children: [{ label: '硅水凝胶' }, { label: '水凝胶' }]
+            },
+            {
+              label: '含水量',
+              id: '174',
+              children: [
+                { label: '0-40%' },
+                { label: '40-44%' },
+                { label: '45%以上' }
+              ]
+            },
+            {
+              label: '基弧',
+              id: '178',
+              children: [{ label: '0.0-8.4' }, { label: '8.4以上' }]
+            },
+            {
+              label: '直径',
+              id: '181',
+              children: [{ label: '13.4-14' }, { label: '14以上' }]
+            },
+            {
+              label: '中心厚度',
+              id: '184',
+              children: [
+                { label: '0.0 - 0.03' },
+                { label: '0.04 - 0.09' },
+                { label: '0.1以上' }
+              ]
+            },
+            { label: '销售保障', id: '253', children: [] },
+            { label: '赠品', id: '260', children: [] }
+          ]
+        },
+        {
+          label: '特种镜',
+          id: '146',
+          children: [
+            {
+              label: '镜面颜色',
+              id: '237',
+              children: [{ label: '透明' }, { label: '亮金色' }]
+            },
+            {
+              label: '品牌',
+              id: '238',
+              children: [{ label: '宁哥牌' }, { label: '秀野牌' }]
+            },
+            {
+              label: '销售保障',
+              id: '254',
+              children: [{ label: '包退' }, { label: '包换' }]
+            },
+            {
+              label: '功能',
+              id: '268',
+              children: [
+                { label: '防风镜' },
+                { label: '防爆溅工作镜' },
+                { label: '泳镜' },
+                { label: '智能镜' }
+              ]
+            }
+          ]
+        }
+      ],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      }
+    }
+  },
+  methods: {
+    getCheckedNodes() {
+      console.log(this.$refs.tree.getCheckedNodes())
+    },
+    getCheckedKeys() {
+      console.log(this.$refs.tree.getCheckedKeys())
+    },
+    addNode() {
+      let h
+      this.$message({
+        message: h('p', null, [
+          h('span', null, '添加一个新节点 ')
+          // h("i", { style: "color: teal" }, "VNode")
+        ])
+      })
+    },
+    append(data) {
+      const newChild = { id: id++, label: 'testtest', children: [] }
+      if (!data.children) {
+        this.$set(data, 'children', [])
+      }
+      data.children.push(newChild)
+    },
+    remove(node, data) {
+      // 删除
+      const parent = node.parent
+      const children = parent.data.children || parent.data
+      const index = children.findIndex(d => d.id === data.id)
+      children.splice(index, 1)
+    },
+    rightKey(node, data) {
+      // 右键
+      const h = this.$createElement
+      // console.log(data, this.$refs.tree);
+      this.$message({
+        message: h('p', null, [
+          h('span', null, '右键了啊！ ' + node + data),
+          h('i', { style: 'color: teal' }, 'VNode')
+        ])
+      })
+    },
+    update(node, data) {
+      // 更新
+      const h = this.$createElement
+      this.$message({
+        message: h('p', null, [
+          h('span', null, '内容可以是 '),
+          h('i', { style: 'color: teal' }, 'VNode')
+        ])
+      })
+    },
+    setCheckedNodes() {
+      this.$refs.tree.setCheckedNodes([
+        {
+          id: 5,
+          label: '二级 2-1'
+        },
+        {
+          id: 9,
+          label: '三级 1-1-1'
+        }
+      ])
+    },
+    setCheckedKeys() {
+      this.$refs.tree.setCheckedKeys([3])
+    },
+    resetChecked() {
+      this.$refs.tree.setCheckedKeys([])
+    }
+  }
+}
+</script>
+<style>
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+</style>
diff --git a/src/views/staff/staff.vue b/src/views/staff/staff.vue
new file mode 100644
index 0000000..10bde58
--- /dev/null
+++ b/src/views/staff/staff.vue
@@ -0,0 +1,577 @@
+<template>
+  <div class="login-container">
+    <el-button
+      type="primary"
+      @click="() => addNode()"
+    >{{ $t('users.add') }}</el-button>
+    <el-tree
+      ref="tree"
+      :data="data"
+      show-checkbox
+      node-key="id"
+      highlight-current
+      check-strictly
+      indent="40"
+      icon-class="el-icon-pc"
+      :props="defaultProps"
+    >
+      <!-- <el-tree
+      :data="data"
+      show-checkbox
+      node-key="id"
+      default-expand-all
+      highlight-current
+      isLeaf
+      @node-contextmenu="()=>rightKey(node, data)"
+      check-strictly//在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
+      :expand-on-click-node="false"//是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。
+      :props="defaultProps"
+    > -->
+      <span
+        slot-scope="{ node, data }"
+        class="custom-tree-node"
+      >
+        <span>{{ node.label }}</span>
+        <span>
+          <el-button
+            type="primary"
+            icon="el-icon-upload"
+            size="mini"
+            @click="() => append(data)"
+          >
+            {{ $t('users.add') }}
+          </el-button>
+          <el-button
+            type="primary"
+            icon="el-icon-edit"
+            size="mini"
+            @click="() => update(node, data)"
+          >
+            {{ $t('users.update') }}
+          </el-button>
+          <el-button
+            type="primary"
+            icon="el-icon-delete"
+            size="mini"
+            class="danger"
+            @click="() => remove(node, data)"
+          >
+            {{ $t('users.del') }}
+          </el-button>
+        </span>
+      </span>
+    </el-tree>
+
+    <!-- <div class="buttons">
+      <el-button @click="getCheckedNodes">通过 node 获取</el-button>
+      <el-button @click="getCheckedKeys">通过 key 获取</el-button>
+      <el-button @click="setCheckedNodes">通过 node 设置</el-button>
+      <el-button @click="setCheckedKeys">通过 key 设置</el-button>
+      <el-button @click="resetChecked">清空</el-button>
+    </div> -->
+  </div>
+</template>
+<script>
+let id = 1000
+export default {
+  data() {
+    return {
+      data: [
+        {
+          label: '成镜',
+          id: '1',
+          children: [
+            {
+              label: '款式',
+              id: '11',
+              children: [
+                { label: '青春学子风' },
+                { label: '休闲' },
+                { label: '商务' },
+                { label: '复古' },
+                { label: '时尚' },
+                { label: '质感哥特潮' },
+                { label: '轻简北欧风' },
+                { label: '理性几何派' },
+                { label: '多元新风尚' },
+                { label: '立体巴洛克' },
+                { label: '有机未来时' },
+                { label: '无界人文系' },
+                { label: '自然舒视角' },
+                { label: '流线洛可可' },
+                { label: '奶奶风' },
+                { label: '简约-极简文艺范' },
+                { label: '运动风' },
+                { label: '行政风' },
+                { label: '折射率' }
+              ]
+            },
+            { label: '个性化服务', id: '267', children: [] },
+            {
+              label: '赠品',
+              id: '259',
+              children: [{ label: '眼镜布' }, { label: '眼镜盒' }]
+            },
+            {
+              label: '场景',
+              id: '258',
+              children: [
+                { label: '学校场景' },
+                { label: '出行交际' },
+                { label: '夜店迷人' },
+                { label: '明星同款' }
+              ]
+            },
+            {
+              label: '销售保障',
+              id: '245',
+              children: [
+                { label: '可退' },
+                { label: '可换' },
+                { label: '可修' }
+              ]
+            },
+            {
+              label: '功能',
+              id: '140',
+              children: [
+                { label: '防踩压' },
+                { label: '防扭曲' },
+                { label: '抗过敏' },
+                { label: '防腐蚀' },
+                { label: '耐磨损' },
+                { label: '抗蓝光' }
+              ]
+            },
+            {
+              label: '品牌',
+              id: '71',
+              children: [
+                { label: '购易' },
+                { label: '海俪恩' },
+                { label: '沙漠风暴' },
+                { label: '古诗' },
+                { label: '暴龙' },
+                { label: '犀牛' },
+                { label: 'Ray-Ban雷朋' },
+                { label: 'PARIM派丽蒙' },
+                { label: '石狼' },
+                { label: '木九十' }
+              ]
+            },
+            {
+              label: '边形',
+              id: '49',
+              children: [
+                { label: '半框' },
+                { label: '全框' },
+                { label: '无框' }
+              ]
+            },
+            {
+              label: '性别',
+              id: '23',
+              children: [{ label: '男性' }, { label: '女性' }]
+            },
+            {
+              label: '梁型',
+              id: '20',
+              children: [{ label: '双梁' }, { label: '单梁' }]
+            },
+            {
+              label: '重量',
+              id: '19',
+              children: [{ label: '30克以下' }, { label: '80克以上' }]
+            },
+            {
+              label: '适用脸型',
+              id: '15',
+              children: [{ label: '方' }, { label: '圆' }, { label: '瓜子' }]
+            },
+            {
+              label: '形状',
+              id: '14',
+              children: [
+                { label: '正圆形' },
+                { label: '椭圆形' },
+                { label: '方圆' },
+                { label: '方形' },
+                { label: '多边形' },
+                { label: '内三角(蛤蟆)' },
+                { label: '外三角(蝶形)' }
+              ]
+            },
+            { label: '年龄', id: '12', children: [{ label: '通用' }] },
+            {
+              label: '材质',
+              id: '10',
+              children: [
+                { label: '板材' },
+                { label: '纯钛' },
+                { label: 'TR90' },
+                { label: '木质' },
+                { label: '竹质' },
+                { label: 'β钛' },
+                { label: 'PC' },
+                { label: 'ULTEM塑钢' },
+                { label: '钨钛塑钢' },
+                { label: '镁铝合金' },
+                { label: '碳纤维' }
+              ]
+            },
+            { label: '折射率', id: '286', children: [] },
+            {
+              label: '颜色',
+              id: '13',
+              children: [
+                { label: '金色' },
+                { label: '银色' },
+                { label: '黑色' },
+                { label: '彩色' },
+                { label: '枪色' }
+              ]
+            }
+          ]
+        },
+        {
+          label: '镜片',
+          id: '2',
+          children: [
+            {
+              label: '面型',
+              id: '85',
+              children: [{ label: '球面单光' }, { label: '非球面单光' }]
+            },
+            { label: '近视度数', id: '92', children: [] },
+            { label: '散光', id: '93', children: [] },
+            {
+              label: '功能',
+              id: '95',
+              children: [
+                { label: '防起雾' },
+                { label: '防蓝光' },
+                { label: '防紫外线' },
+                { label: '偏光' },
+                { label: '染色' },
+                { label: '抗疲劳' },
+                { label: '青少年渐进' },
+                { label: '内渐进' },
+                { label: '变色' },
+                { label: '双光' },
+                { label: '耐磨损' },
+                { label: '防尘' },
+                { label: '防水' },
+                { label: '防摔' },
+                { label: '防指纹' },
+                { label: '防反光' }
+              ]
+            },
+            {
+              label: '颜色',
+              id: '100',
+              children: [
+                { label: '透明' },
+                { label: '染色' },
+                { label: '变色' },
+                { label: '单色' }
+              ]
+            },
+            {
+              label: '折射率',
+              id: '101',
+              children: [
+                { label: '1.56' },
+                { label: '1.60' },
+                { label: '1.65' },
+                { label: '1.67' },
+                { label: '1.71' },
+                { label: '1.74' }
+              ]
+            },
+            { label: '阿贝数（色散）', id: '102', children: [] },
+            { label: '重量', id: '103', children: [] },
+            {
+              label: '材质',
+              id: '104',
+              children: [
+                { label: '树脂' },
+                { label: '玻璃' },
+                { label: '宇宙PC' },
+                { label: 'PC' }
+              ]
+            },
+            {
+              label: '品牌',
+              id: '118',
+              children: [
+                { label: '好视力' },
+                { label: 'RAISE锐视' },
+                { label: '依视路' },
+                { label: '凯米' },
+                { label: '蔡司' },
+                { label: '舒曼' }
+              ]
+            },
+            {
+              label: '销售保障',
+              id: '249',
+              children: [
+                { label: '可退' },
+                { label: '可换' },
+                { label: '可修' }
+              ]
+            }
+          ]
+        },
+        {
+          label: '隐形眼镜',
+          id: '88',
+          children: [
+            {
+              label: '颜色',
+              id: '105',
+              children: [
+                { label: '绿' },
+                { label: '灰' },
+                { label: '黑' },
+                { label: '紫' },
+                { label: '蓝' },
+                { label: '棕色' },
+                { label: '紫色' }
+              ]
+            },
+            {
+              label: '颜料',
+              id: '106',
+              children: [{ label: '水性' }, { label: '油性' }]
+            },
+            { label: '度数', id: '107', children: [] },
+            {
+              label: '周期',
+              id: '108',
+              children: [
+                { label: '日抛' },
+                { label: '周抛' },
+                { label: '双周抛' },
+                { label: '月抛' },
+                { label: '季抛' },
+                { label: '半年抛' },
+                { label: '年抛' }
+              ]
+            },
+            {
+              label: '品牌',
+              id: '133',
+              children: [
+                { label: 'HolyNara' },
+                { label: '爱尔康' },
+                { label: 'MaxLook' },
+                { label: 'NEO' },
+                { label: 'GEO' },
+                { label: '实瞳' },
+                { label: '茵洛' },
+                { label: 'DAZZSHOP' },
+                { label: 'O-LENS' },
+                { label: 'envie' },
+                { label: '曼秀雷敦' },
+                { label: '妃蜜莉' },
+                { label: '海俪恩' },
+                { label: '凯达' },
+                { label: '蔡司' },
+                { label: '酷视' },
+                { label: 'LILMOON' },
+                { label: 'RICHBABY' },
+                { label: 'T-Garden' },
+                { label: 'lenstown' },
+                { label: '新加坡P2' },
+                { label: '星欧' },
+                { label: '美尼康' },
+                { label: '美汐' },
+                { label: '欧舒天' },
+                { label: '海昌' },
+                { label: '菲士康' },
+                { label: '卫康' },
+                { label: '库博' },
+                { label: '安视优' },
+                { label: '美若康' },
+                { label: '视康' },
+                { label: '澜柏' },
+                { label: '3N' },
+                { label: 'BIJOU' },
+                { label: '依视明' },
+                { label: '博士伦' },
+                { label: '瞳昕' },
+                { label: '科莱博' },
+                { label: '绮芙莉' },
+                { label: '雅培' },
+                { label: '爱能视' },
+                { label: '女神秘语' },
+                { label: '博视顿' },
+                { label: '妆美堂' },
+                { label: '人鱼姬' },
+                { label: 'EverColor' },
+                { label: 'Sincere' }
+              ]
+            },
+            {
+              label: '工艺',
+              id: '159',
+              children: [{ label: '涂层工艺' }, { label: '三层夹色工艺' }]
+            },
+            {
+              label: '材质',
+              id: '164',
+              children: [{ label: '硅水凝胶' }, { label: '水凝胶' }]
+            },
+            {
+              label: '含水量',
+              id: '174',
+              children: [
+                { label: '0-40%' },
+                { label: '40-44%' },
+                { label: '45%以上' }
+              ]
+            },
+            {
+              label: '基弧',
+              id: '178',
+              children: [{ label: '0.0-8.4' }, { label: '8.4以上' }]
+            },
+            {
+              label: '直径',
+              id: '181',
+              children: [{ label: '13.4-14' }, { label: '14以上' }]
+            },
+            {
+              label: '中心厚度',
+              id: '184',
+              children: [
+                { label: '0.0 - 0.03' },
+                { label: '0.04 - 0.09' },
+                { label: '0.1以上' }
+              ]
+            },
+            { label: '销售保障', id: '253', children: [] },
+            { label: '赠品', id: '260', children: [] }
+          ]
+        },
+        {
+          label: '特种镜',
+          id: '146',
+          children: [
+            {
+              label: '镜面颜色',
+              id: '237',
+              children: [{ label: '透明' }, { label: '亮金色' }]
+            },
+            {
+              label: '品牌',
+              id: '238',
+              children: [{ label: '宁哥牌' }, { label: '秀野牌' }]
+            },
+            {
+              label: '销售保障',
+              id: '254',
+              children: [{ label: '包退' }, { label: '包换' }]
+            },
+            {
+              label: '功能',
+              id: '268',
+              children: [
+                { label: '防风镜' },
+                { label: '防爆溅工作镜' },
+                { label: '泳镜' },
+                { label: '智能镜' }
+              ]
+            }
+          ]
+        }
+      ],
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      }
+    }
+  },
+  methods: {
+    getCheckedNodes() {
+      console.log(this.$refs.tree.getCheckedNodes())
+    },
+    getCheckedKeys() {
+      console.log(this.$refs.tree.getCheckedKeys())
+    },
+    addNode() {
+      let h
+      this.$message({
+        message: h('p', null, [
+          h('span', null, '添加一个新节点 ')
+          // h("i", { style: "color: teal" }, "VNode")
+        ])
+      })
+    },
+    append(data) {
+      const newChild = { id: id++, label: 'testtest', children: [] }
+      if (!data.children) {
+        this.$set(data, 'children', [])
+      }
+      data.children.push(newChild)
+    },
+    remove(node, data) {
+      // 删除
+      const parent = node.parent
+      const children = parent.data.children || parent.data
+      const index = children.findIndex(d => d.id === data.id)
+      children.splice(index, 1)
+    },
+    rightKey(node, data) {
+      // 右键
+      const h = this.$createElement
+      // console.log(data, this.$refs.tree);
+      this.$message({
+        message: h('p', null, [
+          h('span', null, '右键了啊！ ' + node + data),
+          h('i', { style: 'color: teal' }, 'VNode')
+        ])
+      })
+    },
+    update(node, data) {
+      // 更新
+      const h = this.$createElement
+      this.$message({
+        message: h('p', null, [
+          h('span', null, '内容可以是 '),
+          h('i', { style: 'color: teal' }, 'VNode')
+        ])
+      })
+    },
+    setCheckedNodes() {
+      this.$refs.tree.setCheckedNodes([
+        {
+          id: 5,
+          label: '二级 2-1'
+        },
+        {
+          id: 9,
+          label: '三级 1-1-1'
+        }
+      ])
+    },
+    setCheckedKeys() {
+      this.$refs.tree.setCheckedKeys([3])
+    },
+    resetChecked() {
+      this.$refs.tree.setCheckedKeys([])
+    }
+  }
+}
+</script>
+<style>
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+</style>
-- 
2.0.0