refactor(系统设置): 操作日志操作人搜索项搜索时显示用户名

--bug=1014108 --user=李玉号 【系统设置】操作日志-操作人搜索提示输入ID，但是列表操作人是name，建议改为一致的
https://www.tapd.cn/55049933/s/1184925

frontend/src/business/components/project/menu/Log.vue

@@ -23,21 +23,28 @@
                   </el-col>
                   <el-col :span="4">
                     <el-form-item :label="$t('operating_log.user')" prop="user">
-                      <el-autocomplete
+                      <el-select
-                        class="input-with-autocomplete"
                         v-model="condition.operUser"
-                        :placeholder="$t('member.input_id_or_email')"
+                        filterable
-                        :trigger-on-focus="false"
+                        remote
-                        :fetch-suggestions="querySearch"
+                        clearable
                         size="small"
-                        highlight-first-item
+                        style="width: 100%"
-                        value-key="email"
+                        @visible-change="visibleChange"
-                        @select="handleSelect">
+                        reserve-keyword
-                        <template v-slot:default="scope">
+                        :placeholder="$t('member.input_id_or_email_or_name')"
-                          <span class="ws-member-name">{{ scope.item.name }}</span>
+                        :remote-method="querySearch"
-                          <span class="ws-member-email">{{ scope.item.email }}</span>
+                        @clear="initTableData"
-                        </template>
+                        :loading="selectLoading">
-                      </el-autocomplete>
+                        <el-option
+                          v-for="item in options"
+                          :key="item.id"
+                          :label="item.name"
+                          :value="item.id">
+                          <span class="ws-member-name">{{ item.name }} &nbsp;&nbsp;</span>
+                          <span class="ws-member-email">{{ item.email }}</span>
+                        </el-option>
+                      </el-select>
                     </el-form-item>
                   </el-col>
 
@@ -170,6 +177,8 @@ export default {
       LOG_TYPE_MAP: new LOG_TYPE_MAP(this),
       LOG_MODULE_MAP: new LOG_MODULE_MAP(this),
       sysList: new PROJECTSYSLIST(),
+      options: [],
+      selectLoading: false
     }
   },
   mounted() {
@@ -231,14 +240,26 @@ export default {
     },
     createFilter(queryString) {
       return (user) => {
-        return (user.email.indexOf(queryString.toLowerCase()) === 0 || user.id.indexOf(queryString.toLowerCase()) === 0);
+        return (user.email.indexOf(queryString.toLowerCase()) === 0
+          || user.id.indexOf(queryString.toLowerCase()) === 0
+          || (user.name && user.name.indexOf(queryString) === 0));
       };
     },
-    querySearch(queryString, cb) {
+    querySearch(query) {
-      let userList = this.userList;
+      if (query !== '') {
-      let results = queryString ? userList.filter(this.createFilter(queryString)) : userList;
+        this.selectLoading = true;
-      // 调用 callback 返回建议列表的数据
+        setTimeout(() => {
-      cb(results);
+          this.selectLoading = false;
+          this.options = this.userList.filter(this.createFilter(query));
+        }, 300);
+      } else {
+        this.options = [];
+      }
+    },
+    visibleChange(val) {
+      if (!val) {
+        this.querySearch('');
+      }
     },
     initTableData() {
       if (this.condition.operModules && this.condition.operModules.length > 0) {

frontend/src/business/components/settings/operatinglog/OperatingLog.vue

@@ -23,21 +23,28 @@
               </el-col>
               <el-col :span="8">
                 <el-form-item :label="$t('operating_log.user')" prop="user">
-                  <el-autocomplete
+                  <el-select
-                    class="input-with-autocomplete"
                     v-model="condition.operUser"
-                    :placeholder="$t('member.input_id_or_email')"
+                    filterable
-                    :trigger-on-focus="false"
+                    remote
-                    :fetch-suggestions="querySearch"
+                    clearable
                     size="small"
-                    highlight-first-item
+                    style="width: 95%"
-                    value-key="email"
+                    @visible-change="visibleChange"
-                    @select="handleSelect" style="width: 95%">
+                    reserve-keyword
-                    <template v-slot:default="scope">
+                    :placeholder="$t('member.input_id_or_email_or_name')"
-                      <span class="ws-member-name">{{ scope.item.name }}</span>
+                    :remote-method="querySearch"
-                      <span class="ws-member-email">{{ scope.item.email }}</span>
+                    @clear="initTableData"
-                    </template>
+                    :loading="selectLoading">
-                  </el-autocomplete>
+                    <el-option
+                      v-for="item in options"
+                      :key="item.id"
+                      :label="item.name"
+                      :value="item.id">
+                      <span class="ws-member-name">{{ item.name }} &nbsp;&nbsp;</span>
+                      <span class="ws-member-email">{{ item.email }}</span>
+                    </el-option>
+                  </el-select>
                 </el-form-item>
               </el-col>
 
@@ -63,7 +70,8 @@
             <el-row>
               <el-col :span="8">
                 <el-form-item :label="$t('operating_log.type')" prop="type">
-                  <el-select size="small" v-model="condition.operType" clearable @change="initTableData" style="width: 95%">
+                  <el-select size="small" v-model="condition.operType" clearable @change="initTableData"
+                             style="width: 95%">
                     <el-option v-for="o in LOG_TYPE" :key="o.id" :label="$t(o.label)" :value="o.id"/>
                   </el-select>
                 </el-form-item>
@@ -173,6 +181,8 @@ export default {
       LOG_MODULE_MAP: new LOG_MODULE_MAP(this),
       sysList: new SYSLIST(),
       loading: false,
+      options: [],
+      selectLoading: false
     }
   },
   mounted() {
@@ -279,14 +289,26 @@ export default {
     },
     createFilter(queryString) {
       return (user) => {
-          return (user.email.indexOf(queryString.toLowerCase()) === 0 || user.id.indexOf(queryString.toLowerCase()) === 0);
+        return (user.email.indexOf(queryString.toLowerCase()) === 0
+          || user.id.indexOf(queryString.toLowerCase()) === 0
+          || (user.name && user.name.indexOf(queryString) === 0));
       };
     },
-      querySearch(queryString, cb) {
+    querySearch(query) {
-        let userList = this.userList;
+      if (query !== '') {
-        let results = queryString ? userList.filter(this.createFilter(queryString)) : userList;
+        this.selectLoading = true;
-        // 调用 callback 返回建议列表的数据
+        setTimeout(() => {
-        cb(results);
+          this.selectLoading = false;
+          this.options = this.userList.filter(this.createFilter(query));
+        }, 300);
+      } else {
+        this.options = [];
+      }
+    },
+    visibleChange(val) {
+      if (!val) {
+        this.querySearch('');
+      }
     },
     initTableData() {
       if (this.condition.operModules && this.condition.operModules.length > 0) {
@@ -308,7 +330,10 @@ export default {
     },
     reset() {
       let projectIds = this.condition.projectIds;
-      this.condition = {projectIds: projectIds, times: [new Date().getTime() - 3600 * 1000 * 24 * 7, new Date().getTime()]};
+      this.condition = {
+        projectIds: projectIds,
+        times: [new Date().getTime() - 3600 * 1000 * 24 * 7, new Date().getTime()]
+      };
       this.initTableData();
     },
     getWorkSpaceList() {
@@ -366,7 +391,7 @@ export default {
       this.$refs.logDetail.open(row.id);
     },
   }
-  }
+}
 </script>
 
 <style scoped>

frontend/src/i18n/en-US.js

@@ -848,6 +848,7 @@ export default {
     remove_member: 'Are you sure you want to remove this member',
     org_remove_member: 'Removing the user from the organization will also remove permissions from all workspaces under the organization. Are you sure you want to remove the member ?',
     input_id_or_email: 'Please enter user ID, or user Email',
+    input_id_or_email_or_name: 'Please enter User ID, Username, or User Email',
     no_such_user: 'Without this user information, please enter the correct user ID or user Email!',
   },
   user: {

frontend/src/i18n/zh-CN.js

@@ -855,6 +855,7 @@ export default {
     remove_member: '确定要移除该成员吗',
     org_remove_member: '将该用户从组织中移除，将同时移除该组织下所有工作空间的权限，确定要移除该成员吗？',
     input_id_or_email: '请输入用户 ID, 或者 用户邮箱',
+    input_id_or_email_or_name: '请输入用户 ID, 用户名, 或者 用户邮箱',
     no_such_user: '无此用户信息, 请输入正确的用户 ID 或者 用户邮箱！',
   },
   user: {

frontend/src/i18n/zh-TW.js

@@ -852,6 +852,7 @@ export default {
     remove_member: '確定要移除該成員嗎',
     org_remove_member: '將該用戶從組織中移除，將同時移除該組織下所有工作空間的權限，確定要移除該成員嗎？',
     input_id_or_email: '請輸入用戶 ID, 或者 用戶郵箱',
+    input_id_or_email_or_name: '請輸入用戶 ID, 用戶名, 或者 用戶郵箱',
     no_such_user: '無此用戶信息, 請輸入正確的用戶 ID 或者 用戶郵箱！',
   },
   user: {