diff --git a/src/assets/styles/adminIndex.scss b/src/assets/styles/adminIndex.scss
index 856a062..c982b16 100644
--- a/src/assets/styles/adminIndex.scss
+++ b/src/assets/styles/adminIndex.scss
@@ -258,7 +258,7 @@ img:not([src]) {
 
   .img_box {
     width: 100%;
-    height: 148px;
+    height: 140px;
   }
 
   img {
diff --git a/src/components/Crud/CRUD.operation.vue b/src/components/Crud/CRUD.operation.vue
index 20fd0db..88c0073 100644
--- a/src/components/Crud/CRUD.operation.vue
+++ b/src/components/Crud/CRUD.operation.vue
@@ -2,7 +2,7 @@
   <div class="crud-opts">
     <span class="crud-opts-left">
       <!--左侧插槽-->
-      <slot name="left" />
+      <slot name="left"></slot>
       <el-button
         v-if="crud.optShow.add"
         v-permission="permission.add"
@@ -51,7 +51,7 @@
         @click="crud.doExport"
       >导出</el-button>
       <!--右侧-->
-      <slot name="right" />
+      <slot name="right"></slot>
     </span>
     <el-button-group class="crud-opts-right">
       <el-button
@@ -79,7 +79,7 @@
           <i
             class="fa fa-caret-down"
             aria-hidden="true"
-          />
+          ></i>
         </el-button>
         <el-checkbox
           v-model="allColumnsSelected"
diff --git a/src/layout/components/Sidebar/Item.vue b/src/layout/components/Sidebar/Item.vue
index 4835b02..b515f61 100644
--- a/src/layout/components/Sidebar/Item.vue
+++ b/src/layout/components/Sidebar/Item.vue
@@ -21,7 +21,7 @@ export default {
     }
 
     if (title) {
-      vnodes.push(<span class='test' slot='title'>{(title)}</span>)
+      vnodes.push(<span slot='title'>{(title)}</span>)
     }
     return vnodes
   }
diff --git a/src/layout/components/Sidebar/SidebarItem.vue b/src/layout/components/Sidebar/SidebarItem.vue
index 4d5be65..82cf232 100644
--- a/src/layout/components/Sidebar/SidebarItem.vue
+++ b/src/layout/components/Sidebar/SidebarItem.vue
@@ -23,7 +23,6 @@ import { isExternal } from '@/utils/validate'
 import Item from './Item'
 import AppLink from './Link'
 import FixiOSBug from './FixiOSBug'
-// import { FetchChildMenus } from '@/api/system/menu'
 export default {
   name: 'SidebarItem',
   components: { Item, AppLink },
@@ -48,20 +47,6 @@ export default {
     return {}
   },
   methods: {
-    getChildMenu(item) {
-      // console.log(item)
-      // const param = {
-      //   id: item.id
-      // }
-      // console.log(param)
-      // FetchChildMenus(param).then(res => {
-      //   if (res.code == 200) {
-      //     console.log(res)
-      //   } else {
-      //     return this.$message.error('获取子菜单失败数据失败！')
-      //   }
-      // })
-    },
     hasOneShowingChild(children = [], parent) {
       const showingChildren = children.filter((item) => {
         if (item.hidden) {
@@ -72,9 +57,6 @@ export default {
         }
       })
 
-      // console.log(showingChildren)
-      // console.log(showingChildren.length)
-
       if (showingChildren.length === 1) {
         return true
       }
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 1a2624c..8848dd5 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -1,34 +1,25 @@
 <template>
   <div id="tags-view-container" class="tags-view-container">
     <scroll-pane ref="scrollPane" class="tags-view-wrapper">
-      <router-link
+      <div
         v-for="tag in visitedViews"
-        ref="tag"
         :key="tag.path"
-        :class="isActive(tag) ? 'active' : ''"
-        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
-        tag="span"
-        class="tags-view-item"
-        @click.middle.native="closeSelectedTag(tag)"
-        @contextmenu.prevent.native="openMenu(tag, $event)"
       >
-        {{ tag.name }}
-        <!-- <span
-          v-if="!tag.meta.affix"
-          class="el-icon-close"
-          @click.prevent.stop="closeSelectedTag(tag)"
-        ></span> -->
-      </router-link>
+        <div>
+          <router-link
+            v-for="item in tag.children"
+            ref="tag"
+            :key="item.path"
+            :class="isActive(item) ? 'active' : ''"
+            :to="{ path: tag.path +'/'+ item.path }"
+            tag="span"
+            class="tags-view-item"
+          >
+            {{ item.meta.title }}
+          </router-link>
+        </div>
+      </div>
     </scroll-pane>
-    <!-- <ul v-show="visible" :style="{ left: left + 'px', top: top + 'px' }" class="contextmenu">
-      <li @click="refreshSelectedTag(selectedTag)">刷新</li>
-      <li
-        v-if="!(selectedTag.meta && selectedTag.meta.affix)"
-        @click="closeSelectedTag(selectedTag)"
-      >关闭</li>
-      <li @click="closeOthersTags">关闭其他</li>
-      <li @click="closeAllTags(selectedTag)">关闭全部</li>
-    </ul> -->
   </div>
 </template>
 
@@ -44,12 +35,14 @@ export default {
       top: 0,
       left: 0,
       selectedTag: {},
-      affixTags: []
+      affixTags: [],
+      isShowTagView: false
     }
   },
   computed: {
     visitedViews() {
       console.log(this.$store.state.permission.addRouters)
+      console.log(this.$store.state.permission)
       return this.$store.state.permission.addRouters
     },
     routes() {
@@ -75,7 +68,12 @@ export default {
   },
   methods: {
     isActive(route) {
-      return route.path === this.$route.path
+      // console.log(route)
+      // console.log('111')
+      // console.log(route.path)
+      // console.log('222')
+      // console.log(this.$route)
+      return this.$route.path.indexOf(route.path) != -1
     },
     filterAffixTags(routes, basePath = '/') {
       let tags = []
@@ -266,6 +264,9 @@ export default {
       }
     }
   }
+  ::v-deep .el-scrollbar__view{
+    display: flex;
+  }
 }
 </style>
 
diff --git a/src/views/content/material/materialList/index.vue b/src/views/content/material/materialList/index.vue
index bdea991..b9b925c 100644
--- a/src/views/content/material/materialList/index.vue
+++ b/src/views/content/material/materialList/index.vue
@@ -713,6 +713,9 @@ export default {
   }
   .item_cont {
     border-color: #dcdde3;
+    .img_box{
+      height: 148px;
+    }
     img {
       width: 100%;
       height: 148px;
diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue
index 6e73d99..3cd51c7 100644
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -19,17 +19,18 @@
           </div>
         </el-col>
         <el-col class="page_add" :span="4">
-          <el-button class="table_add" type="primary" round @click="roleFormVisible = true">新增</el-button>
+          <el-button class="table_add" type="primary" round @click="addRole">新增</el-button>
         </el-col>
       </el-row>
     </div>
     <!-- 角色新增-表单 -->
     <el-dialog
       append-to-body
+      :title="layerTitle"
       :close-on-click-modal="false"
       :show-close="false"
       :visible.sync="roleFormVisible"
-      width="960px"
+      width="600px"
       top="20px"
     >
       <el-form
@@ -40,38 +41,28 @@
         size="small"
         label-width="80px"
       >
-        <el-form-item label="角色名称" prop="roleName">
-          <el-input v-model="form.roleName" style="width: 380px;" />
+        <el-form-item label="角色名称" prop="name">
+          <el-input v-model="form.name" style="width: 380px;" />
         </el-form-item>
         <el-form-item label="描述" prop="description">
           <el-input v-model="form.description" style="width: 380px;" />
         </el-form-item>
-        <el-form-item
-          v-for="(item, index) in roleTree"
-          :key="index"
-          :label="item.name"
-          class="press_form"
-        >
-          <el-checkbox
-            v-model="item.isCheck"
-            :indeterminate="item.isIndeterminate"
-            class="check_all"
-            @change="handleCheckAllChange(index, $event)"
-          >全选</el-checkbox>
-          <div class="check_list">
-            <el-checkbox
-              v-for="(items, i) in item.children"
-              :key="i"
-              v-model="items.isCheck"
-              :label="items.name"
-              @change="handleCheckedCitiesChange(index, items.Key, $event)"
-            >{{ items.name }}</el-checkbox>
-          </div>
+        <el-form-item label="权限" prop="permissionAll">
+          <el-checkbox v-model="treeCheckAll" @change="handleCheckedAll">全选</el-checkbox>
+          <el-tree
+            ref="role"
+            :data="roleTree"
+            :default-expand-all="true"
+            :props="defaultProps"
+            show-checkbox
+            node-key="id"
+            @check-change="handleCheckChange"
+          />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" round>新增</el-button>
-        <el-button round @click="roleFormVisible=false">关闭</el-button>
+        <el-button type="primary" round @click="submitForm('form')">保存</el-button>
+        <el-button round @click="resetForm('form')">关闭</el-button>
       </div>
     </el-dialog>
     <!-- 记录 -->
@@ -146,24 +137,36 @@
 
 <script>
 import { FetchRolesList } from '@/api/system/role'
-import roleTree from './role.json'
+import roleTree from './role2.json'
 
 export default {
   name: 'Role',
   components: { },
   data() {
+    var validatePass = (rule, value, callback) => {
+      const arr = this.$refs.role.getCheckedKeys() // 在此获取选中的树形数据
+      if (arr.length == 0 || !arr) {
+        callback(new Error('请选择功能权限设置'))
+      } else {
+        callback()
+      }
+    }
     return {
       roleList: [],
+      menuIds: [],
+      layerTitle: '',
+      roleTree: null,
+      defaultProps: { children: 'children', label: 'label' },
+      treeCheckAll: false,
+      tags: [],
+      currentChecked: null,
       page: 1,
       size: 10,
       total: 0,
       blurry: null,
       form: {
-        id: null,
-        roleName: null,
+        name: null,
         permissionAll: [],
-        library: [],
-        publish: [],
         description: null
       },
       roleFormVisible: false,
@@ -173,24 +176,6 @@ export default {
         edit: ['admin', 'roles:edit'],
         del: ['admin', 'roles:del']
       },
-      roleData: [
-        {
-          id: 1,
-          roleName: '机构超级管理员',
-          description: '系统内置',
-          permissionList: [
-            { name: '紧急通知' },
-            { name: '内容发布服务' },
-            { name: '播放列表服务' },
-            { name: '主题模版' },
-            { name: '设备列表' },
-            { name: '开关机配置' },
-            { name: '素材库' },
-            { name: '权限管理' },
-            { name: '用户管理' }
-          ]
-        }
-      ],
       recordData: [
         {
           id: 1,
@@ -201,16 +186,15 @@ export default {
           date: '2021-1-1 14:00'
         }
       ],
-      roleTree: null,
-      ischeckAll: [],
       rules: {
-        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
-        permission: [{ required: true, message: '请输入权限', trigger: 'blur' }]
+        name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
+        permissionAll: [{ required: true, validator: validatePass, trigger: 'change' }]
       }
     }
   },
   created() {
     this.roleTree = roleTree
+    console.log(this.roleTree.length)
   },
   mounted: function() {
     this.getRolesList()
@@ -231,6 +215,53 @@ export default {
         }
       })
     },
+    addRole() {
+      this.roleFormVisible = true
+      this.layerTitle = '新增'
+    },
+    handleCheckedAll() {
+      if (this.treeCheckAll) {
+        this.$refs.role.setCheckedNodes(this.roleTree)
+      } else {
+        this.$refs.role.setCheckedKeys([])
+      }
+    },
+    handleCheckChange(data, checked) {
+      this.tags.push(data.label)
+      this.form.permissionAll = this.$refs.role.getCheckedKeys().concat(this.$refs.role.getHalfCheckedKeys())
+      console.log(this.form.permissionAll, '选中的节点')
+      this.currentChecked = checked
+      for (var i = 0; i <= this.tags.length; i++) {
+        if (this.currentChecked == false) {
+          this.tags.splice(this.tags.indexOf(this.i), 1)
+        }
+      }
+
+      console.log(this.$refs.role.getCheckedNodes())
+      console.log(this.tags)
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          console.log(this.form)
+          alert('submit!')
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+      this.roleFormVisible = false
+    },
+    getMenuDatas(node, resolve) {
+      setTimeout(() => {
+        // getMenusTree(node.data.id ? node.data.id : 0).then(res => {
+        //   resolve(res)
+        // })
+      }, 100)
+    },
     // 每条显示数据改变时的事件
     handleSizeChange(size) {
       // 整理参数
@@ -238,40 +269,41 @@ export default {
       this.getRolesList()
     },
     // 全选反选的多选框
-    handleCheckAllChange(index, e) {
-      this.roleTree[index].isCheck = e
-      if (e == false) this.roleTree[index].isIndeterminate = false
-      const childrenArray = this.roleTree[index].children
-      if (childrenArray) for (let i = 0, len = childrenArray.length; i < len; i++) childrenArray[i].isCheck = e
-    },
-    handleCheckedCitiesChange(index, Key, e) {
-      const childrenArray = this.roleTree[index].children
-      let tickCount = 0
-      let unTickCount = 0
-      const len = childrenArray.length
-      for (let i = 0; i < len; i++) {
-        if (Key == childrenArray[i].Key) childrenArray[i].isCheck = e
-        if (childrenArray[i].isCheck == true) tickCount++
-        if (childrenArray[i].isCheck == false) unTickCount++
-      }
-      if (tickCount == len) {
-        // 二级全勾选
-        this.roleTree[index].isCheck = true
-        this.roleTree[index].isIndeterminate = false
-      } else if (unTickCount == len) {
-        // 二级全不勾选
-        this.roleTree[index].isCheck = false
-        this.roleTree[index].isIndeterminate = false
-      } else {
-        this.roleTree[index].isCheck = false
-        this.roleTree[index].isIndeterminate = true
-      }
-    },
+    // handleCheckAllChange(index, e) {
+    //   this.roleTree[index].isCheck = e
+    //   if (e == false) this.roleTree[index].isIndeterminate = false
+    //   const childrenArray = this.roleTree[index].children
+    //   if (childrenArray) for (let i = 0, len = childrenArray.length; i < len; i++) childrenArray[i].isCheck = e
+    // },
+    // handleCheckedCitiesChange(index, Key, e) {
+    //   const childrenArray = this.roleTree[index].children
+    //   let tickCount = 0
+    //   let unTickCount = 0
+    //   const len = childrenArray.length
+    //   for (let i = 0; i < len; i++) {
+    //     if (Key == childrenArray[i].Key) childrenArray[i].isCheck = e
+    //     if (childrenArray[i].isCheck == true) tickCount++
+    //     if (childrenArray[i].isCheck == false) unTickCount++
+    //   }
+    //   if (tickCount == len) {
+    //     // 二级全勾选
+    //     this.roleTree[index].isCheck = true
+    //     this.roleTree[index].isIndeterminate = false
+    //   } else if (unTickCount == len) {
+    //     // 二级全不勾选
+    //     this.roleTree[index].isCheck = false
+    //     this.roleTree[index].isIndeterminate = false
+    //   } else {
+    //     this.roleTree[index].isCheck = false
+    //     this.roleTree[index].isIndeterminate = true
+    //   }
+    // },
     checkboxT(row) {
       return row.level >= this.level
     },
     editFormData(index, row) {
       this.roleFormVisible = true
+      this.layerTitle = '编辑'
       this.form.roleName = row.roleName
       this.form.description = row.description
     },