用户搜索支持邮箱手机号自动匹配；菜单系统管理只有管理员可见

src/components/layout/Sidebar/index.vue

@@ -28,48 +28,79 @@
 <script>
 import { mapGetters } from 'vuex'
 import MenuItem from './MenuItem'
+const defaultMenu = [
+  {
+    title: '直播日历',
+    icon: 'el-icon-date',
+    path: '/calendar',
+    meta: {}
+  },
+  {
+    title: '系统管理',
+    icon: 'el-icon-setting',
+    path: '/system',
+    meta: {
+      roles: ['administrator']
+    },
+    children: [
+      {
+        title: '角色管理',
+        icon: 'el-icon-s-check',
+        path: '/system/role'
+      },
+      {
+        title: '账号管理',
+        icon: 'el-icon-key',
+        path: '/system/account'
+      }
+    ]
+  },
+  {
+    title: '个人设置',
+    icon: 'el-icon-user',
+    path: '/my'
+  }
+]
+/**
+ * Use meta.role to determine if the current user has permission
+ * @param roles
+ * @param route
+ */
+function hasPermission(roles, route) {
+  if (route.meta && route.meta.roles) {
+    return roles.some(role => route.meta.roles.includes(role))
+  } else {
+    return true
+  }
+}
+
+/**
+ * Filter asynchronous routing tables by recursion
+ * @param routes asyncRoutes
+ * @param roles
+ */
+export function filterAsyncRoutes(routes, roles) {
+  const res = []
+  routes.forEach(route => {
+    const tmp = { ...route }
+    if (hasPermission(roles, tmp)) {
+      if (tmp.children) {
+        tmp.children = filterAsyncRoutes(tmp.children, roles)
+      }
+      res.push(tmp)
+    }
+  })
+  return res
+}
 export default {
   data() {
     return {
       defaultActive: '/calendar',
-      menu: [
-        // {
-        //   title: '创建直播',
-        //   icon: 'el-icon-video-camera',
-        //   path: '/create-live'
-        // },
-        {
-          title: '直播日历',
-          icon: 'el-icon-date',
-          path: '/calendar'
-        },
-        {
-          title: '系统管理',
-          icon: 'el-icon-setting',
-          path: '/system',
-          children: [
-            {
-              title: '角色管理',
-              icon: 'el-icon-s-check',
-              path: '/system/role'
-            },
-            {
-              title: '账号管理',
-              icon: 'el-icon-key',
-              path: '/system/account'
-            }
-          ]
-        },
-        {
-          title: '个人设置',
-          icon: 'el-icon-user',
-          path: '/my'
-        }
-      ]
+      menu: []
     }
   },
   computed: {
-    ...mapGetters(['sidebar']),
+    ...mapGetters(['sidebar', 'roles']),
     isCollapse() {
       return !this.sidebar.opened
     }
@@ -82,6 +113,18 @@ export default {
         else this.defaultActive = ''
       },
       immediate: true
+    },
+    roles: {
+      handler: function(nv) {
+        let roleList
+        if (Array.isArray(nv)) {
+          roleList = nv.map(item => item.name)
+        }
+        const menus = filterAsyncRoutes(defaultMenu, roleList)
+        this.menu = menus
+      },
+      immediate: true,
+      deep: true
     }
   },
   methods: {

src/pages/meeting/tencent-meeting/components/MeetingForm.vue

@@ -65,20 +65,10 @@
     </el-form-item>
     <el-form-item label="指定会议管理员">
       <p style="line-height:24px;font-size:12px;">(会议管理员有修改会议，复制、取消会议等所有管理本次会议的权限)</p>
-      <!-- <el-col :span="8">
-        <el-dropdown style="width:100%;"  @command="(val) => searchType = val">
-          <el-button size="small" style="width:calc(100% - 5px);">
-            {{searchTypeOptions[searchType]}}<i class="el-icon-arrow-down el-icon--right"></i>
-          </el-button>
-          <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item :command="key" v-for="(value, key) in searchTypeOptions" :key="key">{{value}}</el-dropdown-item>
-          </el-dropdown-menu>
-        </el-dropdown>
-      </el-col> -->
       <el-col :span="24">
         <el-select style="width: 100%" v-model="form.managers" placeholder="输入关键字搜索" size="small" multiple filterable remote :remote-method="fetchUserList" :loading="searchUsersloading" >
           <el-option :label="user.username" :value="user.id" v-for="user in userList" :key="user.id" >
-            <span style="float: left">{{ user.username }}</span>
+            <span style="float: left">{{ user.real_name || user.nickname }}</span>
             <span style="float: right; color: #8492a6; font-size: 13px; margin:0 20px 0 10px;">{{ user.id }}</span>
           </el-option>
         </el-select>
@@ -254,7 +244,6 @@ export default {
         mobile: '通过手机号搜索',
         id: '通过ID搜索'
       },
-      searchKeywordsCheckMsg: '',
       searchUsersloading: false,
       rules: {
         subject: [{ required: true, message: '请填写会议主题', trigger: 'blur' }],
@@ -566,19 +555,17 @@ export default {
       return params
     },
     fetchUserList(val) {
-      this.searchKeywordsCheckMsg = ''
-      if (!val) return
-      if (this.searchType === 'email' && !EMAIL_REG.test(val)) {
-        this.searchKeywordsCheckMsg = '邮箱格式错误'
-        this.userList = []
-      } else if (this.searchType === 'mobile' && !MOBILE_REG.test(val)) {
-        this.searchKeywordsCheckMsg = '手机号格式错误'
-        this.userList = []
-      } else {
+      let searchType = 'username'
+      if (EMAIL_REG.test(val)) {
+        searchType = 'email'
+      } else if (MOBILE_REG.test(val)) {
+        searchType = 'mobile'
+      }
+      if (!val) return false
+      else {
         const params = {
-          [this.searchType]: val
-        };
-        this.searchKeywordsCheckMsg = ''
+          [searchType]: val
+        }
         this.searchUsersloading = true
         searchUserList(params)
           .then(res => {

src/pages/system/account/index.vue

@@ -20,22 +20,13 @@
           <el-form-item label="ID" prop="userid" v-if="dialogType === 'edit'">
             <el-input v-model="form.userid" size="small" disabled></el-input>
           </el-form-item>
-          <el-form-item label="ID" prop="userid" v-else style="position:relative;">
-            <!-- <el-dropdown @command="(val) => searchType = val">
-              <el-button style="width:85px;" size="small">
-                {{searchTypeOptions[searchType]}}<i class="el-icon-arrow-down el-icon--right"></i>
-              </el-button>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item :command="key" v-for="(value, key) in searchTypeOptions" :key="key">{{value}}</el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown> -->
+          <el-form-item label="ID" prop="userid" v-else>
             <el-select v-model="form.userid" placeholder="输入关键字搜索" size="small" filterable remote :remote-method="fetchUserList" :loading="searchUsersloading" style="width:310px;">
               <el-option :label="user.username" :value="user.id" v-for="user in userList" :key="user.id" >
-                <span style="float: left">{{ user.username }}</span>
+                <span style="float: left">{{ user.real_name || user.nickname }}</span>
                 <span style="float: right; color: #8492a6; font-size: 13px; margin-left:10px;">{{ user.id }}</span>
               </el-option>
             </el-select>
-            <p class="search-keywords-checked" v-if="searchKeywordsCheckMsg">{{searchKeywordsCheckMsg}}</p>
           </el-form-item>
           <el-form-item label="名称" prop="username">
             <el-input v-model="form.username" size="small"></el-input>
@@ -115,7 +106,6 @@ export default {
         mobile: '手机号',
         id: 'ID'
       },
-      searchKeywordsCheckMsg: '',
       searchUsersloading: false,
       userList: [],
       deleteId: '',
@@ -175,28 +165,26 @@ export default {
       }
     },
     fetchUserList(val) {
-      if (val) {
-        if (this.searchType === 'email' && !EMAIL_REG.test(val)) {
-          this.searchKeywordsCheckMsg = '邮箱格式错误'
-          this.userList = []
-        } else if (this.searchType === 'mobile' && !MOBILE_REG.test(val)) {
-          this.searchKeywordsCheckMsg = '手机号格式错误'
-          this.userList = []
-        } else {
-          const params = {
-            [this.searchType]: val
-          }
-          this.searchKeywordsCheckMsg = ''
-          this.searchUsersloading = true;
-          searchUserList(params).then((res) => {
-            this.searchUsersloading = false;
+      let searchType = 'username'
+      if (EMAIL_REG.test(val)) {
+        searchType = 'email'
+      } else if (MOBILE_REG.test(val)) {
+        searchType = 'mobile'
+      }
+      if (!val) return false
+      else {
+        const params = {
+          [searchType]: val
+        }
+        this.searchUsersloading = true
+        searchUserList(params)
+          .then(res => {
+            this.searchUsersloading = false
             if (res.data && Array.isArray(res.data.items)) {
               this.userList = res.data.items
             }
-          }).catch(() => {})
-        }
-      } else {
-        this.searchKeywordsCheckMsg = ''
+          })
+          .catch(() => {})
       }
     },
     fetchAccountList() {