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

--bug=1014108 --user=李玉号【系统设置】操作日志-操作人搜索提示输入ID，但是列表操作人是name，建议改为一致的 https://www.tapd.cn/55049933/s/1184925
2022-06-17 11:22:27 +08:00 · 2022-06-17 11:22:27 +08:00 · 084035fe37
parent 4e7016ad39
commit 084035fe37
5 changed files with 245 additions and 196 deletions
--- a/frontend/src/business/components/project/menu/Log.vue
+++ b/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
-                        class="input-with-autocomplete"
+                      <el-select
                        v-model="condition.operUser"
-                        :placeholder="$t('member.input_id_or_email')"
-                        :trigger-on-focus="false"
-                        :fetch-suggestions="querySearch"
+                        filterable
+                        remote
+                        clearable
                        size="small"
-                        highlight-first-item
-                        value-key="email"
-                        @select="handleSelect">
-                        <template v-slot:default="scope">
-                          <span class="ws-member-name">{{ scope.item.name }}</span>
-                          <span class="ws-member-email">{{ scope.item.email }}</span>
-                        </template>
-                      </el-autocomplete>
+                        style="width: 100%"
+                        @visible-change="visibleChange"
+                        reserve-keyword
+                        :placeholder="$t('member.input_id_or_email_or_name')"
+                        :remote-method="querySearch"
+                        @clear="initTableData"
+                        :loading="selectLoading">
+                        <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) {
-      let userList = this.userList;
-      let results = queryString ? userList.filter(this.createFilter(queryString)) : userList;
-      // 调用 callback 返回建议列表的数据
-      cb(results);
+    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) {
--- a/frontend/src/business/components/settings/operatinglog/OperatingLog.vue
+++ b/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
-                    class="input-with-autocomplete"
+                  <el-select
                    v-model="condition.operUser"
-                    :placeholder="$t('member.input_id_or_email')"
-                    :trigger-on-focus="false"
-                    :fetch-suggestions="querySearch"
+                    filterable
+                    remote
+                    clearable
                    size="small"
-                    highlight-first-item
-                    value-key="email"
-                    @select="handleSelect" style="width: 95%">
-                    <template v-slot:default="scope">
-                      <span class="ws-member-name">{{ scope.item.name }}</span>
-                      <span class="ws-member-email">{{ scope.item.email }}</span>
-                    </template>
-                  </el-autocomplete>
+                    style="width: 95%"
+                    @visible-change="visibleChange"
+                    reserve-keyword
+                    :placeholder="$t('member.input_id_or_email_or_name')"
+                    :remote-method="querySearch"
+                    @clear="initTableData"
+                    :loading="selectLoading">
+                    <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) {
-        let userList = this.userList;
-        let results = queryString ? userList.filter(this.createFilter(queryString)) : userList;
-        // 调用 callback 返回建议列表的数据
-        cb(results);
+    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) {
@ -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() {
--- a/frontend/src/i18n/en-US.js
+++ b/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: {
--- a/frontend/src/i18n/zh-CN.js
+++ b/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: {
--- a/frontend/src/i18n/zh-TW.js
+++ b/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: {