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>
@@ -83,7 +91,7 @@
 
               <el-col :span="8">
                 <div style="float: right">
-                  <el-button type="primary" size="small"  @click="search">
+                  <el-button type="primary" size="small" @click="search">
                     {{ $t('commons.adv_search.search') }}
                   </el-button>
                   <el-button size="small" @click="reset">
@@ -145,38 +153,53 @@ import {getUrl, LOG_MODULE_MAP, LOG_TYPE, LOG_TYPE_MAP, SYSLIST, WORKSYSLIST} fr
 import MsLogDetail from "./LogDetail";
 
 export default {
-    name: "OperatingLog",
+  name: "OperatingLog",
-    components: {
+  components: {
-      MsTablePagination, MsTableOperator, MsLogDetail
+    MsTablePagination, MsTableOperator, MsLogDetail
-    },
+  },
-    data() {
+  data() {
-      return {
+    return {
-        props: {
+      props: {
-          multiple: false,
+        multiple: false,
-        },
+      },
-        result: {},
+      result: {},
-        form: {},
+      form: {},
-        currentPage: 0,
+      currentPage: 0,
-        pageSize: 10,
+      pageSize: 10,
-        total: 0,
+      total: 0,
-        items: [],
+      items: [],
-        workspaceList: [],
+      workspaceList: [],
-        isSystem: false,
+      isSystem: false,
-        condition: {
+      condition: {
-          times: [new Date().getTime() - 3600 * 1000 * 24 * 7, new Date().getTime()],
+        times: [new Date().getTime() - 3600 * 1000 * 24 * 7, new Date().getTime()],
-        },
+      },
-        tableData: [],
+      tableData: [],
-        userList: [],
+      userList: [],
-        screenHeight: 'calc(100vh - 270px)',
+      screenHeight: 'calc(100vh - 270px)',
-        LOG_TYPE: new LOG_TYPE(this),
+      LOG_TYPE: new LOG_TYPE(this),
-        LOG_TYPE_MAP: new LOG_TYPE_MAP(this),
+      LOG_TYPE_MAP: new LOG_TYPE_MAP(this),
-        LOG_MODULE_MAP: new LOG_MODULE_MAP(this),
+      LOG_MODULE_MAP: new LOG_MODULE_MAP(this),
-        sysList: new SYSLIST(),
+      sysList: new SYSLIST(),
-        loading: false,
+      loading: false,
-      }
+      options: [],
-    },
+      selectLoading: false
-    mounted() {
+    }
-      switch (this.$route.name) {
+  },
+  mounted() {
+    switch (this.$route.name) {
+      case "system":
+        this.getWorkSpaceList();
+        this.getMember();
+        break;
+      case "workspace":
+        this.initProject("/project/listAll/" + getCurrentWorkspaceId());
+        this.getMember('/user/ws/current/member/list');
+        break;
+    }
+  },
+  watch: {
+    '$route'(to) {
+      switch (to.name) {
         case "system":
           this.getWorkSpaceList();
           this.getMember();
@@ -187,35 +210,22 @@ export default {
           break;
       }
     },
-    watch: {
+    '$route.path': {
-      '$route'(to) {
+      handler(toPath) {
-        switch (to.name) {
+        if (toPath === '/setting/operatingLog/workspace') {
-          case "system":
+          this.isSystem = false;
-            this.getWorkSpaceList();
+          this.sysList = new WORKSYSLIST();
-            this.getMember();
+          this.condition.workspaceId = getCurrentWorkspaceId();
-            break;
+        } else {
-          case "workspace":
+          this.isSystem = true;
-            this.initProject("/project/listAll/" + getCurrentWorkspaceId());
+          this.sysList = new SYSLIST();
-            this.getMember('/user/ws/current/member/list');
+          this.condition.workspaceId = '';
-            break;
         }
       },
-      '$route.path': {
+      deep: true,
-        handler(toPath) {
+      immediate: true
-          if (toPath === '/setting/operatingLog/workspace') {
-            this.isSystem = false;
-            this.sysList = new WORKSYSLIST();
-            this.condition.workspaceId = getCurrentWorkspaceId();
-          } else {
-            this.isSystem = true;
-            this.sysList = new SYSLIST();
-            this.condition.workspaceId = '';
-          }
-        },
-        deep: true,
-        immediate: true
-      },
     },
+  },
   methods: {
     isLink(row) {
       let uri = getUrl(row, this);
@@ -227,88 +237,103 @@ export default {
     clickResource(resource) {
       let uri = getUrl(resource, this);
       if (!resource.sourceId) {
-            this.toPage(uri);
+        this.toPage(uri);
+      }
+      let operModule = resource.operModule;
+      let module = this.getLogModule(operModule);
+      if (module === "系统-系统参数设置" || module === "系统-系統參數設置" || module === "System parameter setting") {
+        this.toPage(uri);
+      } else {
+        let resourceId = resource.sourceId;
+        if (resourceId && resourceId.startsWith("\"" || resourceId.startsWith("["))) {
+          resourceId = JSON.parse(resource.sourceId);
         }
-        let operModule = resource.operModule;
+        if (resourceId instanceof Array) {
-        let module = this.getLogModule(operModule);
+          resourceId = resourceId[0];
-        if (module === "系统-系统参数设置" || module === "系统-系統參數設置" || module === "System parameter setting") {
+        }
+        if (!this.isSystem) {
+          let user = getCurrentUser();
+          let permission = user.userGroups.filter(ug => ug.sourceId === resource.projectId);
+          if (!permission || (Array.isArray(permission) && permission.length === 0)) {
+            this.$warning(this.$t("commons.no_operation_permission"));
+            return;
+          }
+        }
+        this.$get('/user/update/currentByResourceId/' + resourceId, () => {
           this.toPage(uri);
-        } else {
-          let resourceId = resource.sourceId;
-          if (resourceId && resourceId.startsWith("\"" || resourceId.startsWith("["))) {
-            resourceId = JSON.parse(resource.sourceId);
-          }
-          if (resourceId instanceof Array) {
-            resourceId = resourceId[0];
-          }
-          if (!this.isSystem) {
-            let user = getCurrentUser();
-            let permission = user.userGroups.filter(ug => ug.sourceId === resource.projectId);
-            if (!permission || (Array.isArray(permission) && permission.length === 0)) {
-              this.$warning(this.$t("commons.no_operation_permission"));
-              return;
-            }
-          }
-          this.$get('/user/update/currentByResourceId/' + resourceId, () => {
-            this.toPage(uri);
-          });
-        }
-      },
-      toPage(uri) {
-        let id = "new_a";
-        let a = document.createElement("a");
-        a.setAttribute("href", uri);
-        a.setAttribute("target", "_blank");
-        a.setAttribute("id", id);
-        document.body.appendChild(a);
-        a.click();
-
-        let element = document.getElementById(id);
-        element.parentNode.removeChild(element);
-      },
-      handleSelect(item) {
-        this.$set(this.condition, "operUser", item.id);
-      },
-      getMember(url) {
-        if (!url) {
-          url = '/user/list';
-        }
-        this.result = this.$get(url, response => {
-          this.userList = response.data;
         });
-      },
+      }
-      createFilter(queryString) {
+    },
-        return (user) => {
+    toPage(uri) {
-          return (user.email.indexOf(queryString.toLowerCase()) === 0 || user.id.indexOf(queryString.toLowerCase()) === 0);
+      let id = "new_a";
-        };
+      let a = document.createElement("a");
-      },
+      a.setAttribute("href", uri);
-      querySearch(queryString, cb) {
+      a.setAttribute("target", "_blank");
-        let userList = this.userList;
+      a.setAttribute("id", id);
-        let results = queryString ? userList.filter(this.createFilter(queryString)) : userList;
+      document.body.appendChild(a);
-        // 调用 callback 返回建议列表的数据
+      a.click();
-        cb(results);
-      },
-      initTableData() {
-        if (this.condition.operModules && this.condition.operModules.length > 0) {
-          this.condition.operModule = this.condition.operModules[1];
-        }
-        if (this.isSystem) {
-          this.condition.projectIds = [];
-        } else {
-          this.condition.workspaceIds = [];
-        }
-        let url = "/operating/log/list/" + this.currentPage + "/" + this.pageSize;
-        this.loading = true;
-        this.$post(url, this.condition, response => {
-          this.tableData = response.data.listObject;
-          this.total = response.data.itemCount;
-          this.loading = false;
-        })
 
-      },
+      let element = document.getElementById(id);
+      element.parentNode.removeChild(element);
+    },
+    handleSelect(item) {
+      this.$set(this.condition, "operUser", item.id);
+    },
+    getMember(url) {
+      if (!url) {
+        url = '/user/list';
+      }
+      this.result = this.$get(url, response => {
+        this.userList = response.data;
+      });
+    },
+    createFilter(queryString) {
+      return (user) => {
+        return (user.email.indexOf(queryString.toLowerCase()) === 0
+          || user.id.indexOf(queryString.toLowerCase()) === 0
+          || (user.name && user.name.indexOf(queryString) === 0));
+      };
+    },
+    querySearch(query) {
+      if (query !== '') {
+        this.selectLoading = true;
+        setTimeout(() => {
+          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) {
+        this.condition.operModule = this.condition.operModules[1];
+      }
+      if (this.isSystem) {
+        this.condition.projectIds = [];
+      } else {
+        this.condition.workspaceIds = [];
+      }
+      let url = "/operating/log/list/" + this.currentPage + "/" + this.pageSize;
+      this.loading = true;
+      this.$post(url, this.condition, response => {
+        this.tableData = response.data.listObject;
+        this.total = response.data.itemCount;
+        this.loading = false;
+      })
+
+    },
     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() {
@@ -337,36 +362,36 @@ export default {
             let data = {id: item.id, label: item.name};
             this.items.push(data);
             projectIds.push(item.id);
-            })
+          })
-          }
+        }
-          this.condition.projectIds = projectIds;
+        this.condition.projectIds = projectIds;
-          this.initTableData();
-        })
-      },
-      getProject() {
-        this.condition.projectIds = [];
-        this.result = this.$get("/project/get/" + getCurrentProjectID(), response => {
-          let project = response.data;
-          this.items = [{id: project.id, label: project.name}];
-          this.condition.projectIds = [project.id];
-          this.condition.projectId = project.id;
-          this.initTableData();
-        });
-      },
-      getType(type) {
-        return this.LOG_TYPE_MAP.get(type);
-      },
-      getLogModule(val) {
-        return this.LOG_MODULE_MAP.get(val) ? this.LOG_MODULE_MAP.get(val) : val;
-      },
-      search() {
         this.initTableData();
-      },
+      })
-      openDetail(row) {
+    },
-        this.$refs.logDetail.open(row.id);
+    getProject() {
-      },
+      this.condition.projectIds = [];
-    }
+      this.result = this.$get("/project/get/" + getCurrentProjectID(), response => {
+        let project = response.data;
+        this.items = [{id: project.id, label: project.name}];
+        this.condition.projectIds = [project.id];
+        this.condition.projectId = project.id;
+        this.initTableData();
+      });
+    },
+    getType(type) {
+      return this.LOG_TYPE_MAP.get(type);
+    },
+    getLogModule(val) {
+      return this.LOG_MODULE_MAP.get(val) ? this.LOG_MODULE_MAP.get(val) : val;
+    },
+    search() {
+      this.initTableData();
+    },
+    openDetail(row) {
+      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: {