优化用户搜索交互展示，增加5个搜索类型，下拉展示用户id

src/pages/meeting/tencent-meeting/index.vue

@@ -126,7 +126,18 @@
           </el-col>
         </el-form-item> -->
         <el-form-item label="指定会议管理员">
-          <el-col :span="11">
+          <p style="line-height:24px;">（会议管理员有修改会议，复制、取消会议等所有管理本次会议的权限）</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="16">
             <el-select
               style="width: 100%"
               v-model="form.managers"
@@ -138,14 +149,13 @@
               :remote-method="fetchUserList"
               :loading="searchUsersloading"
             >
-              <el-option :label="user.nickname" :value="user.id" v-for="user in userList" :key="user.id" />
+              <el-option :label="user.nickname" :value="user.id" v-for="user in userList" :key="user.id" >
+                <span style="float: left">{{ user.nickname }}</span>
+                <span style="float: right; color: #8492a6; font-size: 13px; margin-left:10px;">{{ user.id }}</span>
+              </el-option>
             </el-select>
           </el-col>
-          <el-col :span="13" style="color: #999; height: 40px; position: relative; font-size: 12px; line-height: 18px">
-            <span style="position: absolute; left: 5px; top: 50%; transform: translateY(-50%)"
-              >（会议管理员有修改会议，复制、取消会议等所有管理本次会议的权限）</span
-            >
-          </el-col>
+          <p class="search-keywords-checked" v-if="searchKeywordsCheckMsg">{{searchKeywordsCheckMsg}}</p>
         </el-form-item>
         <el-form-item label="会议设置">
           <el-checkbox style="width: 120px" v-model="form.hasPwd">开启会议密码</el-checkbox>
@@ -223,6 +233,8 @@ import {
 } from '@/utils/dateAlgs'
 import { searchUserList, createMeeting, operateLog, getMeetingDetails, getNonpagedMeetingList, updateMeeting } from '@api/common'
 const DAY_TIMESTAMP = 8.64e7
+const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
+const EMAIL_REG = /^[A-Za-z0-9]+([_.][A-Za-z0-9]+)*@([A-Za-z0-9-]+\.)+[A-Za-z]{2,6}$/
 export default {
   data() {
     const now = new Date()
@@ -346,6 +358,15 @@ export default {
         }
       },
       userList: [],
+      searchType: 'username',
+      searchTypeOptions: {
+        username: '通过用户名搜索',
+        nickname: '通过昵称搜索',
+        email: '通过邮箱搜索',
+        mobile: '通过手机号搜索',
+        id: '通过ID搜索'
+      },
+      searchKeywordsCheckMsg: '',
       searchUsersloading: false,
       showSchedule: false,
       options: {
@@ -441,16 +462,21 @@ export default {
     endTimeOptions() {
       const { startDate, endDate, startTime } = this.form
       const fullDate = this.getFullDateTime(startDate, startTime)
+      const minutes = fullDate.getMinutes()
       let options
       if (this.isSameDate(startDate, endDate)) {
-        const startTime = getCurHalfHour('end', fullDate)
+        // 结束日期和开始日期同一天，会议最低半小时，则向后推半小时
+        const _date = fullDate.setMinutes(minutes + 30)
+        const startTime = dateFormat(_date, '{h}:{i}')
         options = {
           start: startTime,
           step: '00:30',
           end: '23:30'
         }
       } else {
-        const endTime = getCurHalfHour('start', fullDate)
+        // 结束时间和开始时间不能超过24小时，相隔一天，则向前推半小时
+        const _date = fullDate.setMinutes(minutes - 30)
+        const endTime = dateFormat(_date, '{h}:{i}')
         options = {
           start: '00:00',
           step: '00:30',
@@ -676,9 +702,17 @@ export default {
     },
     fetchUserList(val) {
       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 {
         const params = {
-        nickname: val
+          [this.searchType]: val
         };
+        this.searchKeywordsCheckMsg = ''
         this.searchUsersloading = true
         searchUserList(params)
           .then(res => {
@@ -688,6 +722,7 @@ export default {
             }
           })
           .catch(() => {})
+      }
     },
     getSubmitParams() {
       const form = this.form
@@ -822,6 +857,15 @@ export default {
   width: calc(100% - 70px);
   background: #52b837;
 }
+.search-keywords-checked{
+  color: #F56C6C;
+  font-size: 12px;
+  line-height: 1;
+  padding-top: 4px;
+  position: absolute;
+  top: 100%;
+  right: 0;
+}
 .right-container .el-scrollbar ::v-deep.el-scrollbar__wrap {
   /* overflow:hidden; */
 }

src/pages/system/account/index.vue

 <template>
   <div class="account">
-    <h5>账号管理 <el-button style="float:right;margin:12px 30px 0 0" size="mini"  type="primary" plain @click="handleAdd" v-if="isSuperAdmin">添加账号</el-button></h5>
+    <h5>账号管理 <el-button style="float:right;margin:12px 30px 0 0" size="mini"  type="primary" plain @click="handleAdd" v-if="!isSuperAdmin">添加账号</el-button></h5>
     <div class="inner">
       <el-table :data="listData" style="width: 100%" height="calc(100% - 32px)" v-loading="loading">
         <el-table-column prop="userid" label="ID" min-width="120"></el-table-column>
@@ -15,15 +15,27 @@
         </el-table-column>
       </el-table>
       <el-pagination :current-page.sync="curPage" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total" @current-change="pageChange" style="float:right;"></el-pagination>
-      <el-dialog :title="domicTitle" :visible.sync="dialogVisible" width="30%" center>
+      <el-dialog :title="domicTitle" :visible.sync="dialogVisible" width="420px" center>
         <el-form :model="form" :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm" v-show="dialogType === 'add' || dialogType === 'edit'">
           <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>
-            <el-select style="width:100%" v-model="form.userid" placeholder="搜索用户" size="small" filterable remote :remote-method="fetchUserList" :loading="searchUsersloading">
-              <el-option :label="user.nickname" :value="user.id" v-for="user in userList" :key="user.id" />
+          <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-select v-model="form.userid" placeholder="输入关键字搜索" size="small" filterable remote :remote-method="fetchUserList" :loading="searchUsersloading" style="width:220px;">
+              <el-option :label="user.nickname" :value="user.id" v-for="user in userList" :key="user.id" >
+                <span style="float: left">{{ 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>
@@ -48,10 +60,10 @@
 import { getAccountList, searchUserList, createAccount, updateAccount, deleteAccount, operateLog } from '@api/common'
 import { mapGetters } from 'vuex'
 import _ from 'lodash'
+const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
+const EMAIL_REG = /^[A-Za-z0-9]+([_.][A-Za-z0-9]+)*@([A-Za-z0-9-]+\.)+[A-Za-z]{2,6}$/
 export default {
   data () {
-    const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
-    const EMAIL_REG = /^[A-Za-z0-9]+([_.][A-Za-z0-9]+)*@([A-Za-z0-9-]+\.)+[A-Za-z]{2,6}$/
     const checkMobile = (rule, value, callback) => {
       if (value) {
         if (!MOBILE_REG.test(value)) {
@@ -95,6 +107,15 @@ export default {
           { validator: checkEmail, trigger: 'blur' }
         ]
       },
+      searchType: 'username',
+      searchTypeOptions: {
+        username: '用户名',
+        nickname: '昵称',
+        email: '邮箱',
+        mobile: '手机号',
+        id: 'ID'
+      },
+      searchKeywordsCheckMsg: '',
       searchUsersloading: false,
       userList: [],
       deleteId: '',
@@ -143,20 +164,29 @@ export default {
     handleBtn() {
       if (this.dialogType === 'delete') {
         this.fetchDeleteAccount()
+        this.dialogVisible = false
       } else {
         this.$refs.ruleForm.validate((valid) => {
           if (valid) {
             this.dialogType === 'add' ? this.fetchCreateAccount() : this.fetchUpdateAccount()
+            this.dialogVisible = false
           }
         });
       }
-      this.dialogVisible = false
     },
     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 = {
-          nickname: val
+            [this.searchType]: val
           }
+          this.searchKeywordsCheckMsg = ''
           this.searchUsersloading = true;
           searchUserList(params).then((res) => {
             this.searchUsersloading = false;
@@ -165,6 +195,7 @@ export default {
             }
           }).catch(() => {})
         }
+      }
     },
     fetchAccountList() {
       const params = {
@@ -255,6 +286,15 @@ h5{
   box-sizing:border-box;
   padding:14px 14px 6px;
 }
+.search-keywords-checked{
+  color: #F56C6C;
+  font-size: 12px;
+  line-height: 1;
+  padding-top: 4px;
+  position: absolute;
+  top: 100%;
+  right: 0;
+}
 .account ::v-deep.el-dialog__header{
   padding-top:14px;
 }