optimization: 个人详情增加登录时间/组织拓扑搜索优化 TencentBlueKing#73

yuri0528 · Oct 21, 2021 · 9ecd083 · 9ecd083
1 parent 4dc8b8f
commit 9ecd083
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 24 deletions.
diff --git a/src/pages/src/common/demand-import.js b/src/pages/src/common/demand-import.js
@@ -54,6 +54,7 @@ import {
   bkTable,
   bkTableColumn,
   bkTagInput,
+  bkTag,
   bkTimePicker,
   bkTimeline,
   bkTransfer,
@@ -112,6 +113,7 @@ Vue.use(bkTabPanel);
 Vue.use(bkTable);
 Vue.use(bkTableColumn);
 Vue.use(bkTagInput);
+Vue.use(bkTag);
 Vue.use(bkTimePicker);
 Vue.use(bkTimeline);
 Vue.use(bkTransfer);

diff --git a/src/pages/src/views/organization/details/UserMaterial.vue b/src/pages/src/views/organization/details/UserMaterial.vue
@@ -118,6 +118,20 @@
               <span class="text">{{passwordValidDays}}</span>
             </p>
           </div>
+          <div class="specific-text">
+            <span class="name">{{$t('创建时间')}}</span>
+            <span class="gap">：</span>
+            <p class="desc">
+              <span class="text">{{currentProfile.create_time}}</span>
+            </p>
+          </div>
+          <div class="specific-text">
+            <span class="name">{{$t('最近一次登录时间')}}</span>
+            <span class="gap">：</span>
+            <p class="desc">
+              <span class="text">{{currentProfile.update_time}}</span>
+            </p>
+          </div>
         </li>
       </ul>
     </div>

diff --git a/src/pages/src/views/organization/index.vue b/src/pages/src/views/organization/index.vue
@@ -325,6 +325,7 @@ import PullUser from './table/PullUser';
 import DetailsBar from './details/DetailsBar';
 
 import SetDepartment from '@/components/organization/SetDepartment';
+import moment from 'moment';
 
 export default {
   components: {
@@ -548,6 +549,14 @@ export default {
           {
             key: 'departments',
             name: 'departments',
+          },
+          {
+            key: 'create_time',
+            name: 'create_time',
+          },
+          {
+            key: 'update_time',
+            name: 'update_time',
           }
         );
         this.userMessage.tableHeardList = tableHeardList;
@@ -873,6 +882,8 @@ export default {
 
     // 查看当前用户的信息
     viewDetails(item) {
+      item.create_time = moment(item.create_time).format('YYYY-MM-DD HH:mm:ss');
+      item.update_time = moment(item.update_time).format('YYYY-MM-DD HH:mm:ss');
       this.currentProfile = item;
       this.detailsBarInfo.type = 'view';
       this.detailsBarInfo.title = this.currentProfile.display_name;

diff --git a/src/pages/src/views/organization/table/UserTable.vue b/src/pages/src/views/organization/table/UserTable.vue
@@ -47,7 +47,7 @@
                 <input type="checkbox" name="checkbox1" :checked="item.isCheck">
               </label>
             </td>
-            <td :class="{ 'hidden': ['id', 'isCheck', 'departments', 'originItem'].indexOf(key) !== -1 }"
+            <td :class="{ 'hidden': labelName.indexOf(key) !== -1 }"
                 v-for="(key, keyIndex) in Object.keys(item)"
                 :key="keyIndex">
               <!-- 组织 -->
@@ -144,11 +144,12 @@ export default {
       currentPage: null, // 当前加载了多少页
       pageLimit: 20, // 大于此条数前端分页
       lineHeight: 42, // 列表行高
+      labelName: ['id', 'isCheck', 'departments', 'originItem', 'create_time', 'update_time'],
     };
   },
   computed: {
     activeTableHeardList() {
-      const arr = ['id', 'isCheck', 'departments'];
+      const arr = ['id', 'isCheck', 'departments', 'create_time', 'update_time'];
       return this.userMessage.tableHeardList.filter(item => arr.indexOf(item.key) === -1);
     },
     enumInfo() {

diff --git a/src/pages/src/views/organization/tree/TreeSearch.vue b/src/pages/src/views/organization/tree/TreeSearch.vue
@@ -74,8 +74,12 @@
                       :key="'department' + index"
                       :class="{ 'active': (activeType === 'department' && activeIndex === index) }"
                       @click="handleSelect(item)">
-                    <p class="item-title">{{ item.name }}</p>
-                    <p class="item-detail">{{ getDepartmentDetail(item) }}</p>
+                    <div class="match-item-left">
+                      <p class="item-title">{{ item.name }}</p>
+                      <p class="item-detail">{{ getDepartmentDetail(item) }}</p>
+                    </div>
+                    <bk-tag
+                      v-if="!item.enabled">{{ $t('已删除') }}</bk-tag>
                   </li>
                 </ul>
               </div>
@@ -98,11 +102,15 @@
                       :key="'user' + index"
                       :class="{ 'active': (activeType === 'user' && activeIndex === index) }"
                       @click="handleSelect(item)">
-                    <p class="item-title">
-                      {{ item.username + '(' + item.display_name + ') ' }}
-                      <span class="category-label">{{item.category_name}}</span>
-                    </p>
-                    <p class="item-detail">{{ getUserDetail(item) }}</p>
+                    <div class="match-item-left">
+                      <p class="item-title">
+                        {{ item.username + '(' + item.display_name + ') ' }}
+                        <span class="category-label">{{item.category_name}}</span>
+                      </p>
+                      <p class="item-detail">{{ getUserDetail(item) }}</p>
+                    </div>
+                    <bk-tag
+                      v-if="item.status !== 'NORMAL'">{{ getStatus(item.status) }}</bk-tag>
                   </li>
                 </ul>
               </div>
@@ -163,6 +171,14 @@ export default {
       }
       return `${groupName}：${itemInfo[groupType]}`;
     },
+    getStatus(status) {
+      switch (status) {
+        case 'LOCKED':
+          return this.$t('已冻结');
+        case 'DISABLED':
+          return this.$t('已禁用');
+      }
+    },
     dealDepartmentPath(path) {
       const length = path.length;
       // 目前的宽度最多展示28个汉字
@@ -536,27 +552,38 @@ export default {
       display: block;
       padding: 10px 20px 12px;
       cursor: pointer;
-
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
       &.active,
       &:hover {
         background: #e1ecff;
       }
-
-      .item-title {
-        margin-bottom: 4px;
-        font-weight: bold;
-        color: #63656e;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-
-        .category-label {
-          font-weight: normal;
-          background: #f0f1f5;
-          padding: 2px 4px;
+      .match-item-left {
+        .item-title {
+          margin-bottom: 4px;
+          font-weight: bold;
+          color: #63656e;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+
+          .category-label {
+            font-weight: normal;
+            background: #f0f1f5;
+            padding: 2px 4px;
+          }
         }
       }
-
+      .bk-tag {
+        font-size: 13px;
+        height: 30px;
+        line-height: 30px;
+        color: #aaa;
+        background-color: #f2f2f2;
+        padding: 0 20px;
+        border: 1px solid #d7d7d7;
+      }
       .item-detail {
         overflow: hidden;
         text-overflow: ellipsis;