From 6c4f0bb95f2dc021d376ba7c8ba49279435250ca Mon Sep 17 00:00:00 2001
From: wangpeng <wangpeng@zcloudchina.com>
Date: Wed, 24 Jan 2024 09:56:09 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=81=E4=B8=9A=E8=B7=AF=E7=94=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   3 +-
 src/main.js                                   |   3 +
 .../system/permission/route-per/index.vue     | 360 +++++++++++
 .../system/permission/route-per/indexcopu.vue | 310 +++++++++
 src/views/system/route/components/button.vue  | 266 ++++++++
 src/views/system/route/components/list.vue    | 592 ++++++++++++++++++
 src/views/system/route/index.vue              |  26 +
 src/views/system/route/svg-icons.js           |  10 +
 8 files changed, 1569 insertions(+), 1 deletion(-)
 create mode 100644 src/views/system/permission/route-per/index.vue
 create mode 100644 src/views/system/permission/route-per/indexcopu.vue
 create mode 100644 src/views/system/route/components/button.vue
 create mode 100644 src/views/system/route/components/list.vue
 create mode 100644 src/views/system/route/index.vue
 create mode 100644 src/views/system/route/svg-icons.js

diff --git a/package.json b/package.json
index 55b8321..4f31e84 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "author": "",
   "private": true,
   "scripts": {
-    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js  --host 192.168.0.112",
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js  --host 192.168.0.69 --open",
     "start": "npm run dev",
     "unit": "jest --config test/unit/jest.conf.js --coverage",
     "e2e": "node test/e2e/runner.js",
@@ -15,6 +15,7 @@
     "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
   },
   "dependencies": {
+    "@icon-park/vue": "^1.4.2",
     "@riophae/vue-treeselect": "^0.4.0",
     "axios": "^0.21.1",
     "default-passive-events": "^2.0.0",
diff --git a/src/main.js b/src/main.js
index c11733d..88689ae 100644
--- a/src/main.js
+++ b/src/main.js
@@ -45,6 +45,9 @@ Vue.use(BaiduMap, {
   ak: 'OElqFYoKiAH8KFtph8ftLKF5NlNrbCUr'
 })
 
+import { install } from '@icon-park/vue/es/all'
+install(Vue, 'icon')
+
 import Print from 'vue-print-nb'// 打印
 Vue.use(Print) // 注册
 
diff --git a/src/views/system/permission/route-per/index.vue b/src/views/system/permission/route-per/index.vue
new file mode 100644
index 0000000..88877d5
--- /dev/null
+++ b/src/views/system/permission/route-per/index.vue
@@ -0,0 +1,360 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-button-group>
+        <el-button type="primary" icon="el-icon-document-add" @click="handleCreate(0)">新增组</el-button>
+        <el-button type="primary" icon="el-icon-edit" @click="handleUpdate()">修改组</el-button>
+        <el-button v-if="ROLE_ID!=1" type="primary" icon="el-icon-delete" @click="handleDelete()">删除组</el-button>
+        <el-button type="primary" icon="el-icon-collection-tag" @click="handleTree('routeqx',activeTab)">账号菜单权限</el-button>
+      </el-button-group>
+    </div>
+    <el-tabs v-model="activeTab" type="border-card" @tab-click="handleClick">
+      <el-tab-pane v-for="role in roleList" :name="role.role_ID" :key="role.role_ID" :label="role.role_NAME">
+        <el-table
+          v-loading="listLoading"
+          :data="roleList_z"
+          :header-cell-style="{
+            'font-weight': 'bold',
+            'color': '#000'
+          }"
+          border
+          fit
+          highlight-current-row>
+          <el-table-column type="index" label="序号" width="50" align="center" />
+          <el-table-column prop="role_NAME" label="角色" width="180" />
+          <el-table-column prop="rnumber" label="编码" />
+          <el-table-column label="增" align="center" width="60">
+            <template slot-scope="{row}">
+              <el-button icon="el-icon-document-add" circle @click="handleTree('routeqxButton',row.role_ID,'add_qx')" />
+            </template>
+          </el-table-column>
+          <el-table-column label="删" align="center" width="60">
+            <template slot-scope="{row}">
+              <el-button icon="el-icon-delete" circle @click="handleTree('routeqxButton',row.role_ID,'del_qx')"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="改" align="center" width="60">
+            <template slot-scope="{row}">
+              <el-button icon="el-icon-edit" circle @click="handleTree('routeqxButton',row.role_ID,'edit_qx')"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="查" align="center" width="60">
+            <template slot-scope="{row}">
+              <el-button icon="el-icon-view" circle @click="handleTree('routeqxButton',row.role_ID,'cha_qx')"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="290">
+            <template slot-scope="scope">
+              <el-button type="success" icon="el-icon-collection-tag" size="mini" @click="handleTree('routeqx',scope.row.role_ID)">权限</el-button>
+              <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleUpdate(scope.row)">编辑</el-button>
+              <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row.role_ID, scope.row.role_NAME)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
+    <div class="page-btn-group">
+      <div>
+        <el-button type="primary" icon="el-icon-plus" @click="handleCreate(activeTab)">新增</el-button>
+      </div>
+      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getRoleList" />
+    </div>
+
+    <el-dialog :visible.sync="dialogFormVisible" :title="dialogType==='edit'?'编辑角色':'新增角色'" width="600px">
+      <el-form ref="roleForm" :model="form" :rules="formRules" label-width="120px" style="width: 500px;">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="form.name" autocomplete="off" placeholder="这里输入名称..." />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number :min="0" v-model="form.sort" style="width: 100%;" controls-position="right" autocomplete="off" placeholder="这里输入排序..." />
+        </el-form-item>
+        <!--     v-if="!isEditGroup"    -->
+        <el-form-item :label="insertLabel">
+          <el-radio-group v-model="form.isMain">
+            <el-radio :label="'1'">是</el-radio>
+            <el-radio :label="'0'">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="confirmRole">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog :visible.sync="dialogFormTree" title="授权权限" width="500px">
+      <el-tree
+        ref="tree"
+        :data="treeData"
+        :props="defaultProps"
+        show-checkbox
+        node-key="ROUTE_ID"/>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormTree = false">取 消</el-button>
+        <el-button type="primary" @click="confirmTree">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
+import { requestFN } from '@/utils/request'
+export default {
+  components: { Pagination },
+  data() {
+    return {
+      activeTab: '1',
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 10
+      },
+      total: 0,
+      roleList: [], // list 列出组(页面横向排列的一级组)
+      roleList_z: [], // list 列出此组下架角色
+      pd: [], // map
+      ROLE_ID: '1',	// 角色ID
+      dialogFormVisible: false,
+      dialogType: 'add',
+      dialogFormTree: false,
+      isEditGroup: true,
+      insertLabel: '是否主角色',
+      form: {
+        id: '',
+        parent_id: '',
+        name: '',
+        sort: 0,
+        isMain: '0'
+      },
+      formRules: {
+        name: [
+          { required: true, message: '名称不能为空', trigger: 'blur' },
+          { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
+        ],
+        sort: [
+          { required: true, message: '排序不能为空', trigger: 'blur' }
+        ]
+      },
+      treeData: [],
+      confirmTreeForm: {
+        url: '',
+        id: '',
+        msg: ''
+      },
+      defaultProps: {
+        children: 'children',
+        label: 'PARENT_NAME'
+      }
+    }
+  },
+  created() {
+    this.getRoleList(this.ROLE_ID)
+  },
+  methods: {
+    handleClick(tab) {
+      this.ROLE_ID = tab.name
+      this.roleList_z = []
+      this.listQuery.page = 1
+      this.getRoleList(this.ROLE_ID)
+    },
+    getRoleList(ROLE_ID) {
+      this.listLoading = true
+      this.ROLE_ID = ROLE_ID
+      requestFN(
+        '/role/list',
+        {
+          ROLE_ID: ROLE_ID
+        }
+      ).then((data) => {
+        this.listLoading = false
+        this.activeTab = ROLE_ID
+        this.roleList = data.roleList
+        this.roleList_z = data.roleList_z.filter((item, index) => index < this.listQuery.limit * this.listQuery.page && index >= this.listQuery.limit * (this.listQuery.page - 1))
+        this.total = data.roleList_z.length
+        this.pd = data.pd
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+    handleCreate(parentId) {
+      this.dialogType = 'add'
+      if (parentId == 0) {
+        this.isEditGroup = true
+        this.insertLabel = '是否主角色组'
+      } else {
+        this.isEditGroup = false
+        this.insertLabel = '是否主角色'
+      }
+      this.form.name = ''
+      this.form.sort = ''
+      this.form.isMain = '0'
+      this.form.parent_id = parentId
+      this.$refs.roleForm && this.$refs.roleForm.clearValidate()
+      this.dialogFormVisible = true
+    },
+    handleUpdate(role) {
+      this.$refs.roleForm && this.$refs.roleForm.clearValidate()
+      this.dialogType = 'edit'
+      if (role && role.role_ID) {
+        this.isEditGroup = false
+        this.form.id = role.role_ID
+        this.form.parent_id = role.parent_ID
+        this.form.name = role.role_NAME
+        this.form.isMain = role.ismain
+        this.form.sort = role.sort
+      } else {
+        for (const role of this.roleList) {
+          if (role.role_ID === this.activeTab) {
+            this.isEditGroup = true
+            this.form.id = role.role_ID
+            this.form.name = role.role_NAME
+          }
+        }
+      }
+      this.dialogFormVisible = true
+    },
+    handleDelete(roleId, roleName) {
+      if (roleId) {
+        this.form.id = roleId
+        this.form.name = roleName
+      } else {
+        for (let i = 0; i < this.roleList.length; i++) {
+          if (this.roleList[i].role_ID === this.activeTab) {
+            this.form.id = this.roleList[i].role_ID
+            this.form.name = this.roleList[i].role_NAME
+            break
+          }
+        }
+      }
+      this.$confirm('确定要删除[' + this.form.name + ']吗?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.listLoading = true
+        requestFN(
+          '/role/delete',
+          {
+            ROLE_ID: this.form.id
+          }
+        ).then(() => {
+          this.$message({
+            message: '删除成功',
+            type: 'success'
+          })
+          this.listLoading = false
+          this.roleList = []
+          this.roleList_z = []
+          this.listQuery.page = 1
+          this.getRoleList('1')
+        }).catch((e) => {
+          this.listLoading = false
+        })
+      }).catch(() => {
+      })
+    },
+    handleTree(url, roldId, msg) {
+      if (url === 'routeqx') {
+        this.confirmTreeForm.str = 'saveRouteqx'
+      } else {
+        this.confirmTreeForm.str = 'saveRouteqxButton'
+      }
+      this.confirmTreeForm.id = roldId
+      this.confirmTreeForm.msg = msg || ''
+      this.listLoading = true
+      requestFN(
+        '/role/' + url,
+        {
+          ROLE_ID: roldId,
+          msg: msg
+        }
+      ).then((data) => {
+        this.listLoading = false
+        this.treeData = data.routeList
+        this.dialogFormTree = true
+        this.$nextTick(() => {
+          var checkedMenuIds = []
+          this.getCheckNode(this.treeData, checkedMenuIds)
+          this.$refs.tree.setCheckedKeys(checkedMenuIds) // 设置目前勾选的节点
+        })
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+    confirmRole() {
+      this.$refs.roleForm.validate(valid => {
+        if (valid) {
+          this.listLoading = true
+          requestFN(
+            '/role/' + this.dialogType,
+            {
+              ROLE_ID: this.form.id,
+              ROLE_NAME: this.form.name,
+              PARENT_ID: this.form.parent_id,
+              SORT: this.form.sort,
+              ISMAIN: this.form.isMain
+            }
+          ).then((data) => {
+            this.$message({
+              message: '设置成功',
+              type: 'success'
+            })
+            this.listLoading = false
+            this.dialogFormVisible = false
+            this.roleList = []
+            this.roleList_z = []
+            this.listQuery.page = 1
+            this.getRoleList(this.form.parent_id)
+            // if (data.pd.PARENT_ID === '0') {
+            //
+            // } else {
+            //   this.getRoleList(this.form.parent_id)
+            // }
+          }).catch((e) => {
+            this.listLoading = false
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    confirmTree() {
+      this.listLoading = true
+      console.log('this.$refs.tree.getCheckedKeys() -> ' + this.$refs.tree.getCheckedKeys())
+      console.log('this.$refs.tree.getHalfCheckedKeys() -> ' + this.$refs.tree.getHalfCheckedKeys())
+      const ids = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
+      requestFN(
+        '/role/' + this.confirmTreeForm.str,
+        {
+          ROLE_ID: this.confirmTreeForm.id,
+          routeIds: ids.join(','),
+          msg: this.confirmTreeForm.msg
+        }
+      ).then((data) => {
+        this.$message({
+          message: '设置成功',
+          type: 'success'
+        })
+        this.listLoading = false
+        this.dialogFormTree = false
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+    getCheckNode(routeList, checkedMenuIds) {
+      if (routeList != null && routeList.length > 0) {
+        for (let i = 0; i < routeList.length; i++) {
+          const menu = routeList[i]
+          if ((menu.children == null || menu.children.length === 0) && menu.checked.toString() === 'true') {
+            checkedMenuIds.push(menu.ROUTE_ID)
+          }
+          if (menu.children != null && menu.children.length > 0) {
+            this.getCheckNode(menu.children, checkedMenuIds)
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
diff --git a/src/views/system/permission/route-per/indexcopu.vue b/src/views/system/permission/route-per/indexcopu.vue
new file mode 100644
index 0000000..4f6a863
--- /dev/null
+++ b/src/views/system/permission/route-per/indexcopu.vue
@@ -0,0 +1,310 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-button-group>
+        <el-button type="primary" icon="el-icon-document-add" @click="handleCreate(0)">新增组</el-button>
+        <el-button type="primary" icon="el-icon-edit" @click="handleUpdate()">修改组</el-button>
+        <el-button v-if="ROLE_ID!=1" type="primary" icon="el-icon-delete" @click="handleDelete()">删除组</el-button>
+        <el-button type="primary" icon="el-icon-collection-tag" @click="handleTree('routeqx',activeTab)">账号菜单权限</el-button>
+      </el-button-group>
+    </div>
+    <el-tabs v-model="activeTab" type="border-card" @tab-click="handleClick">
+      <el-tab-pane v-for="role in roleList" :name="role.role_ID" :key="role.role_ID" :label="role.role_NAME">
+        <el-table
+          v-loading="listLoading"
+          :data="roleList_z"
+          :header-cell-style="{
+            'font-weight': 'bold',
+            'color': '#000'
+          }"
+          border
+          fit
+          highlight-current-row>
+          <el-table-column type="index" label="序号" width="50" align="center" />
+          <el-table-column prop="role_NAME" label="角色" width="180" />
+          <el-table-column prop="rnumber" label="编码" />
+          <el-table-column label="增" align="center" width="60">
+            <template slot-scope="{row}">
+              <el-button icon="el-icon-document-add" circle @click="handleTree('b4Button',row.role_ID,'add_qx')" />
+            </template>
+          </el-table-column>
+          <el-table-column label="删" align="center" width="60">
+            <template slot-scope="{row}">
+              <el-button icon="el-icon-delete" circle @click="handleTree('b4Button',row.role_ID,'del_qx')"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="改" align="center" width="60">
+            <template slot-scope="{row}">
+              <el-button icon="el-icon-edit" circle @click="handleTree('b4Button',row.role_ID,'edit_qx')"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="查" align="center" width="60">
+            <template slot-scope="{row}">
+              <el-button icon="el-icon-view" circle @click="handleTree('b4Button',row.role_ID,'cha_qx')"/>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" width="290">
+            <template slot-scope="scope">
+              <el-button type="success" icon="el-icon-collection-tag" size="mini" @click="handleTree('routeqx',scope.row.role_ID)">权限</el-button>
+              <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleUpdate(scope.row.role_ID, scope.row.role_NAME)">编辑</el-button>
+              <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row.role_ID, scope.row.role_NAME)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-tab-pane>
+    </el-tabs>
+    <div class="page-btn-group">
+      <div>
+        <el-button type="primary" icon="el-icon-plus" @click="handleCreate(activeTab)">新增</el-button>
+      </div>
+      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getRoleList" />
+    </div>
+
+    <el-dialog :visible.sync="dialogFormVisible" :title="dialogType==='edit'?'修改组':'新增组'" width="600px">
+      <el-form ref="roleForm" :model="form" :rules="formRules" label-width="120px" style="width: 500px;">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="form.name" autocomplete="off" placeholder="这里输入名称..." />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="confirmRole">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog :visible.sync="dialogFormTree" title="授权'新增'权限" width="500px">
+      <el-tree
+        ref="tree"
+        :data="treeData"
+        :props="defaultProps"
+        show-checkbox
+        node-key="ROUTE_ID"/>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormTree = false">取 消</el-button>
+        <el-button type="primary" @click="confirmTree">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
+import { requestFN } from '@/utils/request'
+export default {
+  components: { Pagination },
+  data() {
+    return {
+      activeTab: '1',
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 10
+      },
+      total: 0,
+      roleList: [], // list 列出组(页面横向排列的一级组)
+      roleList_z: [], // list 列出此组下架角色
+      pd: [], // map
+      ROLE_ID: '1',	// 角色ID
+      dialogFormVisible: false,
+      dialogType: 'add',
+      dialogFormTree: false,
+      form: {
+        id: '',
+        parent_id: '',
+        name: ''
+      },
+      formRules: {
+        name: [
+          { required: true, message: '名不能为空', trigger: 'change' },
+          { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
+        ]
+      },
+      treeData: [],
+      confirmTreeForm: {
+        url: '',
+        id: '',
+        msg: ''
+      },
+      defaultProps: {
+        children: 'children',
+        label: 'name'
+      }
+    }
+  },
+  created() {
+    this.getRoleList(this.ROLE_ID)
+  },
+  methods: {
+    handleClick(tab) {
+      this.ROLE_ID = tab.name
+      this.roleList_z = []
+      this.listQuery.page = 1
+      this.getRoleList(this.ROLE_ID)
+    },
+    getRoleList(ROLE_ID) {
+      this.listLoading = true
+      this.ROLE_ID = ROLE_ID
+      requestFN(
+        '/role/list',
+        {
+          ROLE_ID: ROLE_ID
+        }
+      ).then((data) => {
+        this.listLoading = false
+        this.activeTab = ROLE_ID
+        this.roleList = data.roleList
+        this.roleList_z = data.roleList_z.filter((item, index) => index < this.listQuery.limit * this.listQuery.page && index >= this.listQuery.limit * (this.listQuery.page - 1))
+        this.total = data.roleList_z.length
+        this.pd = data.pd
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+    handleCreate(parentId) {
+      this.dialogType = 'add'
+      this.form.name = ''
+      this.form.parent_id = parentId
+      this.dialogFormVisible = true
+    },
+    handleUpdate(roleId, roleName) {
+      this.dialogType = 'edit'
+      if (roleId) {
+        this.form.id = roleId
+        this.form.name = roleName
+      } else {
+        for (const role of this.roleList) {
+          if (role.role_ID === this.activeTab) {
+            this.form.id = role.role_ID
+            this.form.name = role.role_NAME
+          }
+        }
+      }
+      this.dialogFormVisible = true
+    },
+    handleDelete(roleId, roleName) {
+      if (roleId) {
+        this.form.id = roleId
+        this.form.name = roleName
+      } else {
+        for (const role of this.roleList) {
+          if (role.role_ID === this.activeTab) {
+            this.form.id = role.role_ID
+            this.form.name = role.role_NAME
+          }
+        }
+      }
+      this.$confirm('确定要删除[' + this.form.name + ']吗?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.listLoading = true
+        requestFN(
+          '/role/delete',
+          {
+            ROLE_ID: this.form.id
+          }
+        ).then(() => {
+          this.listLoading = false
+          this.roleList = []
+          this.roleList_z = []
+          this.listQuery.page = 1
+          this.getRoleList('1')
+        }).catch((e) => {
+          this.listLoading = false
+        })
+      }).catch(() => {
+      })
+    },
+    handleTree(url, roldId, msg) {
+      if (url === 'routeqx') {
+        this.confirmTreeForm.str = 'saveRouteqx'
+      } else {
+        this.confirmTreeForm.str = 'saveB4Button'
+      }
+      this.confirmTreeForm.id = roldId
+      this.confirmTreeForm.msg = msg || ''
+      this.listLoading = true
+      requestFN(
+        '/role/' + url,
+        {
+          ROLE_ID: roldId,
+          msg: msg
+        }
+      ).then((data) => {
+        this.listLoading = false
+        this.treeData = data.routeList
+        this.dialogFormTree = true
+        this.$nextTick(() => {
+          var checkedMenuIds = []
+          this.getCheckNode(this.treeData, checkedMenuIds)
+          this.$refs.tree.setCheckedKeys(checkedMenuIds) // 设置目前勾选的节点
+        })
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+    confirmRole() {
+      this.$refs.roleForm.validate(valid => {
+        if (valid) {
+          this.listLoading = true
+          requestFN(
+            '/role/' + this.dialogType,
+            {
+              ROLE_ID: this.form.id,
+              ROLE_NAME: this.form.name,
+              PARENT_ID: this.form.parent_id
+            }
+          ).then((data) => {
+            this.listLoading = false
+            this.dialogFormVisible = false
+            this.roleList = []
+            this.roleList_z = []
+            this.listQuery.page = 1
+            this.getRoleList(this.form.parent_id)
+            // if (data.pd.PARENT_ID === '0') {
+            //
+            // } else {
+            //   this.getRoleList(this.form.parent_id)
+            // }
+          }).catch((e) => {
+            this.listLoading = false
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    confirmTree() {
+      this.listLoading = true
+      const ids = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys())
+      requestFN(
+        '/role/' + this.confirmTreeForm.str,
+        {
+          ROLE_ID: this.confirmTreeForm.id,
+          routeIds: ids.join(','),
+          msg: this.confirmTreeForm.msg
+        }
+      ).then((data) => {
+        this.listLoading = false
+        this.dialogFormTree = false
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+    getCheckNode(routeList, checkedMenuIds) {
+      if (routeList != null && routeList.length > 0) {
+        for (let i = 0; i < routeList.length; i++) {
+          const menu = routeList[i]
+          if ((menu.children == null || menu.children.length === 0) && menu.checked.toString() === 'true') {
+            checkedMenuIds.push(menu.ROUTE_ID)
+          }
+          if (menu.children != null && menu.children.length > 0) {
+            this.getCheckNode(menu.children, checkedMenuIds)
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+
diff --git a/src/views/system/route/components/button.vue b/src/views/system/route/components/button.vue
new file mode 100644
index 0000000..588da82
--- /dev/null
+++ b/src/views/system/route/components/button.vue
@@ -0,0 +1,266 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-input v-model="KEYWORDS" placeholder="搜索" class="filter-item" style="width: 200px;"/>
+      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getQuery">
+        搜索
+      </el-button>
+    </div>
+    <el-table
+      v-loading="listLoading"
+      ref="multipleTable"
+      :data="varList"
+      :row-key="getRowKey"
+      :header-cell-style="{
+        'font-weight': 'bold',
+        'color': '#000'
+      }"
+      tooltip-effect="dark"
+      border
+      fit
+      highlight-current-row
+    >
+      <el-table-column
+        :reserve-selection="true"
+        type="selection"
+        width="55"
+        align="center"/>
+      <el-table-column type="index" label="序号" width="50" align="center" />
+      <el-table-column prop="NAME" label="名称" />
+      <el-table-column prop="SHIRO_KEY" label="权限标识" />
+      <el-table-column prop="BZ" label="备注" />
+      <el-table-column label="操作" align="center" width="200">
+        <template slot-scope="{row}">
+          <el-button v-show="edit" type="primary" icon="el-icon-edit" size="mini" @click="handleEdit(row)">编辑</el-button>
+          <el-button v-show="del" type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(row.FHBUTTON_ID, row.NAME)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="page-btn-group">
+      <div>
+        <el-button v-show="add" type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
+        <el-button type="info" icon="el-icon-arrow-left" @click="goBack">返回</el-button>
+        <!--        <el-button v-show="del" type="danger" icon="el-icon-delete" plain @click="batchDel">删除</el-button>-->
+      </div>
+      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
+    </div>
+
+    <el-dialog :visible.sync="dialogFormEdit" :title="dialogType==='edit'?'修改':'新增'" width="600px">
+      <el-form ref="form" :rules="rules" :model="pd" label-width="110px" style="width: 500px;">
+        <el-form-item label="按钮名称" prop="NAME">
+          <el-input v-model="pd.NAME" placeholder="这里输入按钮名称..." />
+        </el-form-item>
+        <el-form-item label="权限标识" prop="SHIRO_KEY">
+          <el-input v-model="pd.SHIRO_KEY" placeholder="这里输入权限标识..." />
+        </el-form-item>
+        <el-form-item label="备注说明">
+          <el-input v-model="pd.BZ" placeholder="这里输入备注说明..." />
+        </el-form-item>
+        <el-form-item label="标签代码">
+          <el-input v-model="code" :autosize="{ minRows: 4}" type="textarea" disabled/>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormEdit = false">取 消</el-button>
+        <el-button type="primary" @click="confirm">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
+import { requestFN } from '@/utils/request'
+import waves from '@/directive/waves' // waves directive
+export default {
+  components: { Pagination },
+  directives: { waves },
+  data() {
+    return {
+      listLoading: true,
+      add: false,
+      del: false,
+      edit: false,
+      listQuery: {
+        page: 1,
+        limit: 10
+      },
+      total: 0,
+      KEYWORDS: '',
+      varList: [],
+      pd: [],
+      multipleSelectionAll: [], // 所有选中的数据包含跨页数据
+      multipleSelection: [], // 当前页选中的数据
+      dialogFormEdit: false,
+      dialogType: 'add',
+      rules: {
+        NAME: [{ required: true, message: '按钮名称不能为空', trigger: 'blur' }],
+        SHIRO_KEY: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }]
+      },
+      MENU_ID: ''
+    }
+  },
+  computed: {
+    code: {
+      get() {
+        if (this.pd.SHIRO_KEY) {
+          return '<a v-show="' + this.pd.SHIRO_KEY + '" class="btn btn-light btn-sm">按钮</a>'
+        } else {
+          return ''
+        }
+      },
+      set(val) {
+
+      }
+    }
+  },
+  created() {
+    this.MENU_ID = this.$parent.MENU_ID
+    this.getList(this.ROLE_ID)
+    this.hasButton()
+  },
+  methods: {
+    getRowKey(row) {
+      return row.FHBUTTON_ID
+    },
+    handleAdd() {
+      this.dialogType = 'add'
+      this.pd = {}
+      this.code = ''
+      this.dialogFormEdit = true
+    },
+    goBack() {
+      this.$parent.activeName = 'list'
+    },
+    handleEdit(row) {
+      this.dialogType = 'edit'
+      this.pd = Object.assign({}, row)
+      this.dialogFormEdit = true
+    },
+    getQuery() {
+      this.$refs.multipleTable.clearSelection()
+      this.getList()
+    },
+    getList() {
+      this.listLoading = true
+      requestFN(
+        '/fhbutton/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
+        {
+          KEYWORDS: this.KEYWORDS,
+          MENU_ID: this.MENU_ID
+        }
+      ).then((data) => {
+        this.listLoading = false
+        this.varList = data.varList
+        this.total = data.page.totalResult
+        this.pd = data.pd
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+    confirm() {
+      this.$refs.form.validate(valid => {
+        if (valid) {
+          this.listLoading = true
+          requestFN(
+            '/fhbutton/' + this.dialogType,
+            {
+              FHBUTTON_ID: this.pd.FHBUTTON_ID,
+              NAME: this.pd.NAME,
+              SHIRO_KEY: this.pd.SHIRO_KEY,
+              BZ: this.pd.BZ,
+              MENU_ID: this.MENU_ID
+            }
+          ).then((data) => {
+            this.listLoading = false
+            this.dialogFormEdit = false
+            this.varList = []
+            this.listQuery.page = 1
+            this.getList()
+          }).catch((e) => {
+            this.listLoading = false
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    handleDelete(id, name) {
+      this.$confirm('确定要删除[' + name + ']吗?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.listLoading = true
+        requestFN(
+          '/fhbutton/delete',
+          {
+            FHBUTTON_ID: id
+          }
+        ).then(() => {
+          this.listLoading = false
+          this.varList = []
+          this.listQuery.page = 1
+          this.getList()
+        }).catch((e) => {
+          this.listLoading = false
+        })
+      }).catch(() => {
+      })
+    },
+    batchDel() {
+      const _selectData = this.$refs.multipleTable.selection
+      if (_selectData == null || _selectData.length == 0) {
+        this.$message({
+          message: '请选中要删除的项...',
+          type: 'error'
+        })
+        return false
+      }
+      const ids = _selectData.map((item, index) => {
+        return item.FHBUTTON_ID
+      }).join(',')
+
+      this.$confirm('确定要删除选中的数据吗?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.listLoading = true
+        requestFN(
+          '/fhbutton/deleteAll',
+          {
+            DATA_IDS: ids
+          }
+        ).then(() => {
+          this.listLoading = false
+          this.varList = []
+          this.listQuery.page = 1
+          this.$refs.multipleTable.clearSelection()
+          this.getList()
+        }).catch((e) => {
+          this.listLoading = false
+        })
+      }).catch(() => {
+      })
+    },
+    // 判断按钮权限，用于是否显示按钮
+    hasButton: function() {
+      var keys = 'fhbutton:add,fhbutton:del,fhbutton:edit'
+      requestFN(
+        '/head/hasButton',
+        {
+          keys: keys
+        }
+      ).then((data) => {
+        this.add = data.fhbuttonfhadminadd
+        this.del = data.fhbuttonfhadmindel
+        this.edit = data.fhbuttonfhadminedit
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    }
+  }
+}
+</script>
+
diff --git a/src/views/system/route/components/list.vue b/src/views/system/route/components/list.vue
new file mode 100644
index 0000000..8ee6bb1
--- /dev/null
+++ b/src/views/system/route/components/list.vue
@@ -0,0 +1,592 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <div class="filter-row">
+        <el-button type="primary" class="mb" @click="fnAddRouter({}, '新增一级菜单')">
+          新增一级菜单
+        </el-button>
+      </div>
+    </div>
+    <el-table
+      v-loading="listLoading"
+      ref="multipleTable"
+      :data="varList"
+      :header-cell-style="{
+        'font-weight': 'bold',
+        'color': '#000'
+      }"
+      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
+      row-key="ROUTE_ID"
+      tooltip-effect="dark"
+      border
+      fit
+      highlight-current-row
+    >
+      <el-table-column label="名称" prop="meta.title" />
+      <el-table-column label="路由地址" prop="path" show-overflow-tooltip />
+      <el-table-column label="文件位置" show-overflow-tooltip>
+        <template slot-scope="{row}">
+          {{
+            row.component === "children"
+              ? "/src/components/children/index.vue"
+              : "/src/views/" + row.component + ".vue"
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column label="序号" prop="ROUTE_ORDER" width="50" />
+      <el-table-column label="是否显示在菜单">
+        <template slot-scope="{row}">
+          {{
+            row.meta && row.meta.isMenu !== false && !row.meta.activeMenu && row.path
+              ? "是"
+              : "否"
+          }}
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="400">
+        <template slot-scope="{row}">
+          <el-button v-if="row.meta && row.meta.isMenu !== false && !row.meta.activeMenu && row.path" type="success" icon="el-icon-picture-outline-round" size="mini" @click="handleEditIcon(row.ROUTE_ID)">图标</el-button>
+          <el-button type="primary" icon="el-icon-edit-outline" size="mini" @click="fnAddRouter(row, '编辑')">编辑</el-button>
+          <el-button v-if="row.component === 'children'" type="primary" icon="el-icon-circle-plus-outline" size="mini" @click="fnAddRouter(row, '新增下级')">新增下级</el-button>
+          <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDelete(row.ROUTE_ID, row.meta.title)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog
+      :visible.sync="dialog.visible"
+      :title="dialog.title"
+      width="60%"
+      @close="dialog.visible = false">
+      <el-form
+        ref="formRef"
+        :model="dialog.form"
+        :rules="dialog.rules"
+        label-position="top"
+      >
+        <el-form-item label="上级菜单" prop="parentMenuId">
+          {{ dialog.form.parentName }}
+        </el-form-item>
+        <el-form-item label="菜单名称" prop="title">
+          <el-input v-model="dialog.form.title" />
+        </el-form-item>
+        <el-form-item label="路由地址(从/开始)" prop="path">
+          <el-input v-model="dialog.form.path" />
+        </el-form-item>
+        <el-form-item
+          label="路由重定向地址(重定向到哪一个路由，子级路由第一个的路由地址，（没有子级路由不需要填写）)"
+          prop="redirect"
+        >
+          <el-input v-model="dialog.form.redirect" />
+        </el-form-item>
+        <el-form-item
+          label="文件位置(路由对应的组件位置（必填，views下的文件，views和.vue不需要填写，如果是children只需要填写children）)"
+          prop="component"
+        >
+          <el-input v-model="dialog.form.component" />
+        </el-form-item>
+        <el-form-item
+          label="model(归类到头部导航哪一级中（一级路由需要填写）)"
+          prop="model"
+        >
+          <el-select v-model="dialog.form.model" clearable>
+            <el-option
+              v-for="item in MENU"
+              :key="item.model"
+              :label="item.title"
+              :value="item.model"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="权限标识" prop="permissionId">
+          <el-input v-model="dialog.form.permissionId" />
+        </el-form-item>
+        <el-form-item label="序号" prop="index">
+          <el-input v-model.number="dialog.form.index" />
+        </el-form-item>
+        <el-form-item
+          label="选中的菜单(当前路由选中状态是哪个导航（只有当父级路由或祖先级路由’当前菜单是否显示子菜单为否‘时需要填写，设置‘当前菜单是否显示子菜单为否’的路由地址）)"
+          prop="activeMenu"
+        >
+          <el-input v-model="dialog.form.activeMenu" />
+        </el-form-item>
+        <el-form-item label="是否显示当前菜单" prop="isMenu">
+          <el-select v-model="dialog.form.isMenu">
+            <el-option :value="true" label="是" />
+            <el-option :value="false" label="否" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="是否需要登录才可以访问" prop="isLogin">
+          <el-select v-model="dialog.form.isLogin">
+            <el-option :value="true" label="是" />
+            <el-option :value="false" label="否" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="当前页是否显示在面包屑中" prop="breadcrumb">
+          <el-select v-model="dialog.form.breadcrumb">
+            <el-option :value="true" label="是" />
+            <el-option :value="false" label="否" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="当前页是否显示面包屑" prop="isBreadcrumb">
+          <el-select v-model="dialog.form.isBreadcrumb">
+            <el-option :value="true" label="是" />
+            <el-option :value="false" label="否" />
+          </el-select>
+        </el-form-item>
+        <el-form-item
+          label="当前菜单是否显示子菜单(菜单有增删改查等等子路由的情况下需要勾选为否)"
+          prop="isSubMenu"
+        >
+          <el-select v-model="dialog.form.isSubMenu">
+            <el-option :value="true" label="是" />
+            <el-option :value="false" label="否" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialog.visible = false">取 消</el-button>
+        <el-button type="primary" @click="confirm">确 定</el-button>
+      </div>
+    </el-dialog>
+
+    <el-dialog
+      :visible.sync="iconDialog.visible"
+      :close-on-click-modal="false"
+      title="设置图标"
+      width="40%"
+      @close="iconDialog.visible = false">
+      <div>
+        <a href="https://iconpark.oceanengine.com/official" target="_blank">
+          点击此处
+        </a>
+        查看所有图标
+      </div>
+      <div class="mt">
+        <el-form label-width="80px">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="图标名称">
+                <el-input v-model="iconDialog.KEYWORDS" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label-width="10px">
+                <el-button type="primary" @click="fnSearchIcon">搜索</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+      <div class="icon_container">
+        <div v-for="(item, index) in iconDialog.svgList" :key="index">
+          <el-tooltip :content="item.title">
+            <div
+              :class="{ active: iconDialog.iconIndex === index }"
+              class="item"
+              @click="iconDialog.iconIndex = index"
+            >
+              <component
+                :is="'icon-' + item.name"
+                :stroke-width="3"
+                theme="filled"
+                fill="#a5b2c2"
+                size="38"
+              />
+            </div>
+          </el-tooltip>
+        </div>
+      </div>
+      <div class="mt flex-end">
+        <pagination
+          :total="iconDialog.pagination.total"
+          :page.sync="iconDialog.pagination.currentPage"
+          :limit.sync="iconDialog.pagination.pageSize"
+          small
+          layout="total, sizes, prev, pager, next, jumper"
+          @pagination="fnSearchIcon" />
+      </div>
+      <template #footer>
+        <el-button type="primary" @click="confirmIcon">保存</el-button>
+        <el-button @click="iconDialog.visible = false">关闭</el-button>
+      </template>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
+import icons from '@icon-park/vue/icons.json'
+import { requestFN } from '@/utils/request'
+
+export default {
+  name: 'Icons',
+  components: { Pagination },
+  data() {
+    return {
+      activeName: '1',
+      listLoading: false,			// 加载状态
+      radio: 1,
+      dialogType: 'add',
+      // 列表
+      varList: [],	// list
+      ROUTE_ID: '0',	// 主键ID
+      add: false,
+      del: false,
+      edit: false,
+      MENU: [
+        { title: '双重预防', model: 'prevention' },
+        { title: '教育培训', model: 'educationAndTraining' },
+        { title: '高危作业管理', model: 'highRisk' },
+        { title: '监测预警', model: 'monitor' },
+        { title: '综合管理', model: 'comprehensive' }
+      ],
+      dialog: {
+        visible: false,
+        title: '',
+        form: {
+          parentMenuId: '',
+          parentName: '',
+          parentIdS: '',
+          title: '',
+          path: '',
+          redirect: '',
+          component: '',
+          model: '',
+          permissionId: '',
+          index: '',
+          activeMenu: '',
+          menuId: '',
+          isMenu: true,
+          isLogin: true,
+          breadcrumb: true,
+          isBreadcrumb: true,
+          isSubMenu: true
+        },
+        rules: {
+          component: [
+            { required: true, message: '请输入文件位置', trigger: 'blur' }
+          ],
+          index: [
+            { required: true, message: '请输入序号', trigger: 'blur' },
+            { type: 'number', message: '序号必须是数字', trigger: 'blur' }
+          ]
+        }
+      },
+      iconDialog: {
+        visible: false,
+        svgList: [],
+        pagination: {
+          currentPage: 1,
+          pageSize: 50,
+          total: icons.length
+        },
+        iconIndex: '',
+        menuId: '',
+        KEYWORDS: ''
+      }
+    }
+  },
+  created() {
+    this.getList(this.ROUTE_ID)
+    this.fnInitIcon()
+  },
+  methods: {
+    indexMethod(index) {
+      return index + 1
+    },
+    handleNodeClick(node, data, value) {
+      this.handleEdit(node.id)
+    },
+    fnAddRouter(row, type) {
+      this.resetForm()
+      this.dialogType = 'add'
+      if (type === '编辑') {
+        this.dialog.form = {
+          menuId: row.ROUTE_ID,
+          index: +row.ROUTE_ORDER,
+          permissionId: row.SHIRO_KEY,
+          path: row.path,
+          redirect: row.REDIRECT,
+          component: row.component,
+          parentMenuId: row.PARENT_ID,
+          parentName: row.PARENT_NAME,
+          parentIdS: row.PARENT_IDS,
+          title: row.meta.title,
+          model: row.meta.model,
+          activeMenu: row.meta.activeMenu,
+          isMenu: row.meta.isMenu,
+          isLogin: row.meta.isLogin,
+          breadcrumb: row.meta.breadcrumb,
+          isBreadcrumb: row.meta.isBreadcrumb,
+          isSubMenu: row.meta.isSubMenu
+        }
+      } else if (type === '新增下级') {
+        this.dialog.form.parentMenuId = row.ROUTE_ID
+        this.dialog.form.parentName = row.meta.title
+        this.dialog.form.parentIdS = (this.isEmpty(row.PARENT_IDS) ? ',' : row.PARENT_IDS) + row.ROUTE_ID + ','
+        if (row.meta.isSubMenu === false) this.dialog.form.activeMenu = row.path
+        else this.dialog.form.activeMenu = row.meta.activeMenu || ''
+        if (row.children) {
+          this.dialog.form.index = row.children.length + 1
+        } else {
+          this.dialog.form.index = 1
+        }
+      } else {
+        this.dialog.form.parentMenuId = row.PARENT_ID === '0' ? '' : row.PARENT_ID
+        this.dialog.form.parentName = '（无）'
+        this.dialog.form.parentIdS = ''
+        this.dialog.form.index = this.varList.length + 1
+      }
+      this.dialog.visible = true
+      this.dialog.title = type
+    },
+    isEmpty(value) {
+      return (
+        value === undefined ||
+        value === null ||
+        (typeof value === 'object' && Object.keys(value).length === 0) ||
+        (typeof value === 'string' && value.trim().length === 0)
+      )
+    },
+    handleEdit(ROUTE_ID) {
+      this.resetForm()
+      this.dialogType = 'edit'
+      requestFN(
+        '/route/toEdit',
+        {
+          ROUTE_ID: ROUTE_ID
+        }
+      ).then((data) => {
+        this.dialog.form = data.pd // copy obj
+      }).catch((e) => {
+        this.listLoading = false
+      })
+      this.dialog.visible = true
+    },
+
+    buttonList(ROUTE_ID) {
+      this.$parent.ROUTE_ID = ROUTE_ID
+      this.$parent.activeName = 'button'
+    },
+    confirm() {
+      this.$refs.formRef.validate(valid => {
+        if (valid) {
+          this.listLoading = true
+          console.log(this.dialog.form)
+          const meta = {
+            title: this.dialog.form.title,
+            model: this.dialog.form.model,
+            activeMenu: this.dialog.form.activeMenu,
+            isMenu: this.dialog.form.isMenu,
+            isLogin: this.dialog.form.isLogin,
+            breadcrumb: this.dialog.form.breadcrumb,
+            isBreadcrumb: this.dialog.form.isBreadcrumb,
+            isSubMenu: this.dialog.form.isSubMenu
+          }
+          const params = {
+            NAME: this.dialog.form.title,
+            PATH: this.dialog.form.path,
+            PARENT_ID: this.dialog.form.parentMenuId || '0',
+            PARENT_IDS: this.dialog.form.parentIdS,
+            ROUTE_ORDER: this.dialog.form.index,
+            COMPONENT: this.dialog.form.component,
+            SHIRO_KEY: this.dialog.form.permissionId,
+            REDIRECT: this.dialog.form.redirect,
+            ROUTE_STATE: this.dialog.form.isMenu ? 1 : 0,
+            SHOW_MODEL: this.dialog.form.model,
+            META: JSON.stringify(meta)
+          }
+          requestFN(
+            '/route/' + this.dialogType,
+            {
+              ...params,
+              ROUTE_ID: this.dialog.form.ROUTE_ID
+            }
+          ).then((data) => {
+            this.$message({
+              message: '保存成功',
+              type: 'success'
+            })
+            this.listLoading = false
+            this.dialog.visible = false
+            this.getList()
+          }).catch((e) => {
+            this.listLoading = false
+          })
+        } else {
+          return false
+        }
+      })
+    },
+    handleDelete(id, name) {
+      this.$confirm('确定要删除[' + name + ']吗?', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.listLoading = true
+        requestFN(
+          '/route/delete',
+          {
+            ROUTE_ID: id
+          }
+        ).then(() => {
+          this.$message({
+            message: '删除成功',
+            type: 'success'
+          })
+          this.listLoading = false
+          this.getList(this.ROUTE_ID)
+        }).catch((e) => {
+          this.listLoading = false
+        })
+      }).catch(() => {
+      })
+    },
+    fnInitIcon() {
+      this.iconDialog.pagination = {
+        currentPage: 1,
+        pageSize: 50,
+        total: icons.length
+      }
+      this.iconDialog.svgList = this.paging(
+        icons,
+        this.iconDialog.pagination.currentPage,
+        this.iconDialog.pagination.pageSize
+      )
+      console.log(this.iconDialog.svgList)
+    },
+    fnSearchIcon() {
+      const { KEYWORDS } = this.iconDialog
+      const filterIcons = icons.filter(
+        (item) =>
+          item.name.indexOf(KEYWORDS) !== -1 || item.title.indexOf(KEYWORDS) !== -1
+      )
+      this.iconDialog.svgList = this.paging(
+        filterIcons,
+        this.iconDialog.pagination.currentPage,
+        this.iconDialog.pagination.pageSize
+      )
+      this.iconDialog.pagination.total = filterIcons.length
+    },
+    paging(list, currentPage, pageSize) {
+      return list.filter((item, index) => {
+        return (
+          index < +currentPage * +pageSize &&
+          index >= (+currentPage - 1) * +pageSize
+        )
+      })
+    },
+
+    handleEditIcon(ROUTE_ID) {
+      this.iconDialog.visible = true
+      this.iconDialog.iconIndex = ''
+      this.ROUTE_ID = ROUTE_ID
+    },
+    confirmIcon() {
+      this.listLoading = true
+      requestFN(
+        '/route/icon',
+        {
+          ROUTE_ID: this.ROUTE_ID,
+          ICON: this.iconDialog.iconIndex
+            ? this.iconDialog.svgList[this.iconDialog.iconIndex].name
+            : ''
+        }
+      ).then((data) => {
+        this.listLoading = false
+        this.iconDialog.visible = false
+        this.getList(this.ROUTE_ID)
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+    generateIconCode(symbol) {
+      return `<svg-icon icon-class="${symbol}" />`
+    },
+    getList(ROUTE_ID) {
+      this.listLoading = true
+      this.varList = []
+      this.ROUTE_ID = ROUTE_ID
+      requestFN(
+        '/route/treeAll',
+        {
+          ROUTE_ID: this.ROUTE_ID
+        }
+      ).then((data) => {
+        this.listLoading = false
+        this.varList = data.menuList
+        this.hasButton()
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    },
+    resetForm() {
+      this.dialog.form = {
+        parentMenuId: '',
+        parentName: '',
+        parentIdS: '',
+        title: '',
+        path: '',
+        redirect: '',
+        component: '',
+        model: '',
+        permissionId: '',
+        index: '',
+        activeMenu: '',
+        menuId: '',
+        isMenu: true,
+        isLogin: true,
+        breadcrumb: true,
+        isBreadcrumb: true,
+        isSubMenu: true
+      }
+    },
+    hasButton: function() {
+      var keys = 'menu:add,menu:del,menu:edit'
+      requestFN(
+        '/head/hasButton',
+        {
+          keys: keys
+        }
+      ).then((data) => {
+        this.add = data.menufhadminadd
+        this.del = data.menufhadmindel
+        this.edit = data.menufhadminedit
+      }).catch((e) => {
+        this.listLoading = false
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  .icon_container {
+    display: flex;
+    flex-wrap: wrap;
+
+    .item {
+      flex-basis: calc(5% - 10px);
+      border: 1px solid #fff;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin-top: 10px;
+      margin-right: 13px;
+      padding: 10px;
+      cursor: pointer;
+      box-sizing: border-box;
+
+      &:nth-child(10n) {
+        margin-right: 0;
+      }
+
+      &:hover,
+      &.active {
+        border: 1px solid #79bbff;
+      }
+    }
+  }
+</style>
diff --git a/src/views/system/route/index.vue b/src/views/system/route/index.vue
new file mode 100644
index 0000000..8e5a829
--- /dev/null
+++ b/src/views/system/route/index.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <List v-show="activeName=='list'" />
+    <Button v-if="activeName=='button'" />
+  </div>
+</template>
+
+<script>
+import button from './components/button'
+import list from './components/list'
+export default {
+  components: {
+    Button: button,
+    List: list
+  },
+  data() {
+    return {
+      activeName: 'list',
+      MENU_ID: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/system/route/svg-icons.js b/src/views/system/route/svg-icons.js
new file mode 100644
index 0000000..b538086
--- /dev/null
+++ b/src/views/system/route/svg-icons.js
@@ -0,0 +1,10 @@
+const req = require.context('../../../icons/svg', false, /\.svg$/)
+const requireAll = requireContext => requireContext.keys()
+
+const re = /\.\/(.*)\.svg/
+
+const svgIcons = requireAll(req).map(i => {
+  return i.match(re)[1]
+})
+
+export default svgIcons