feat(scrm): tag user list

Author: Matrix-X

src/views/scrm/wecom/organization/user/components/tag-list/index.vue

@@ -6,17 +6,23 @@
     listWeComUsersPage,
     listWeComUsersPageRequest,
   } from '@/api/scrm/wecom/user';
+  import { consola } from 'consola';
   import styles from './index.module.less';
 
   const useWeComUser = useWeComUserStore();
 
   const handleSelectTag = async (tagId: number) => {
+    if (tagId == null || tagId <= 0 || tagId === useWeComUser.selectedTag) {
+      return;
+    }
+    // consola.log(tagId);
     // 这里可以添加其他业务逻辑
     const res = await listWeComUsersPage({
       weComTagId: tagId,
     } as listWeComUsersPageRequest);
     if (res) {
       useWeComUser.tagUserList = res.data.list || [];
+      useWeComUser.selectedTag = tagId;
     }
   };
 
@@ -36,7 +42,7 @@
       :key="item.tagId"
       :class="[
         styles.row,
-        { [styles.selected]: useWeComUser.selectedTag === item.tagId },
+        { [styles.selected]: useWeComUser.selectedTag === item.id },
       ]"
       @click="handleSelectTag(item.id!)"
     >

src/views/scrm/wecom/organization/user/components/tag-user-list/index.module.less

@@ -14,10 +14,27 @@
   }
 
   .action {
-  @apply flex flex-row w-full items-center justify-start w-full;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
     background-color: #E0E9F5;
     gap: 10px;
     padding: 10px 20px;
+    //border:1px solid red;
+
+    .left {
+    @apply flex flex-row w-full items-center justify-start w-full;
+      //border:1px solid yellow;
+      width: 100%;
+    }
+
+    .right {
+    @apply flex flex-row w-full items-center justify-end w-full;
+      //border:1px solid yellow;
+      width: 100%;
+    }
 
     .actionBtn {
       font-size: 12px !important;
@@ -30,4 +47,4 @@
       border-left: 1px solid #d9d9d9;
     }
   }
-}
+}

src/views/scrm/wecom/organization/user/components/tag-user-list/index.vue

@@ -55,6 +55,9 @@
   const onRemoveUser = () => {
     consola.log('remove');
   };
+  const onTagDetail = () => {
+    consola.log('tag detail');
+  };
 
   onMounted(() => {
     queryChange();
@@ -67,14 +70,24 @@
       <span>Tag名称（0人）</span>
     </div>
     <div :class="styles.action">
-      <a-button :class="styles.actionBtn" @click="onAddUser"
-        >添加部门/成员</a-button
-      >
-      <a-button :class="styles.actionBtn" @click="onBatchExportOrImport"
-        >批量导入/导出</a-button
-      >
-      <a-button :class="styles.actionBtn" @click="onRemoveUser">移除</a-button>
+      <div :class="styles.left">
+        <a-button :class="styles.actionBtn" @click="onAddUser"
+          >添加部门/成员</a-button
+        >
+        <a-button :class="styles.actionBtn" @click="onBatchExportOrImport"
+          >批量导入/导出</a-button
+        >
+        <a-button :class="styles.actionBtn" @click="onRemoveUser"
+          >移除</a-button
+        >
+      </div>
+      <div :class="styles.right">
+        <a-button :class="styles.actionBtn" @click="onTagDetail"
+          >标签详情</a-button
+        >
+      </div>
     </div>
+
     <a-table
       :data="useWeComUser.tagUserList"
       :loading="state.tableLoading"
@@ -89,7 +102,11 @@
             {{ record.name }}
           </template>
         </a-table-column>
-        <a-table-column title="部门" data-index="department" ellipsis />
+        <a-table-column title="部门" data-index="department" ellipsis>
+          <template #cell="{ record }">
+            {{ record.departments }}
+          </template>
+        </a-table-column>
       </template>
     </a-table>
   </div>