chore: update

src/modules/label/components/LabelType.vue

@@ -5,6 +5,12 @@ import { ElMessageBox, ElMessage } from 'element-plus'
 import { deleteLabelType } from '../api'
 import { useLabelType } from '../composables/useLabelType'
 
+defineProps<{ activeId: string }>()
+
+defineEmits<{
+  (e: 'select', id: string): void
+}>()
+
 const LabelTypeFormDialog = defineAsyncComponent(() => import('../components/LabelTypeFormDialog.vue'))
 
 const { labelCount, typeList, fetchTypeList } = useLabelType()
@@ -34,15 +40,13 @@ function handleRemove(row: LabelType) {
 </script>
 
 <template>
-  <el-button type="primary" style="width: 100%" @click="handleAdd" v-permission="'experiment_tag_type_create'"
-    >添加标签类型</el-button
-  >
-  <div class="label-type-total">
+  <el-button type="primary" style="width: 100%" @click="handleAdd" v-permission="'experiment_tag_type_create'">添加标签类型</el-button>
+  <div class="label-type-total" @click="$emit('select', '')">
     <h4>全部标签</h4>
     <p>{{ labelCount }}</p>
   </div>
   <ul>
-    <li class="label-type-item" v-for="item in typeList" :key="item.id">
+    <li class="label-type-item" :class="{ 'is-active': item.id === activeId }" v-for="item in typeList" :key="item.id" @click="$emit('select', item.id)">
       <svg
         xmlns="http://www.w3.org/2000/svg"
         :fill="item.url"
@@ -56,21 +60,13 @@ function handleRemove(row: LabelType) {
       </svg>
       <p>{{ item.name }}</p>
       <div class="label-type-actions">
-        <el-icon class="label-type-item__edit" @click="handleUpdate(item)" v-permission="'experiment_tag_type_update'"
-          ><Edit
-        /></el-icon>
-        <el-icon class="label-type-item__remove" @click="handleRemove(item)" v-permission="'experiment_tag_type_delete'"
-          ><Delete
-        /></el-icon>
+        <el-icon class="label-type-item__edit" @click.stop="handleUpdate(item)" v-permission="'experiment_tag_type_update'"><Edit /></el-icon>
+        <el-icon class="label-type-item__remove" @click.stop="handleRemove(item)" v-permission="'experiment_tag_type_delete'"><Delete /></el-icon>
       </div>
     </li>
   </ul>
 
-  <LabelTypeFormDialog
-    v-model="formVisible"
-    :data="currentRow"
-    @update="fetchTypeList"
-    v-if="formVisible"></LabelTypeFormDialog>
+  <LabelTypeFormDialog v-model="formVisible" :data="currentRow" @update="fetchTypeList" v-if="formVisible"></LabelTypeFormDialog>
 </template>
 
 <style lang="scss">
@@ -80,6 +76,7 @@ function handleRemove(row: LabelType) {
   align-items: center;
   justify-content: space-between;
   font-size: 12px;
+  cursor: pointer;
 }
 .label-type-item {
   display: flex;
@@ -91,9 +88,15 @@ function handleRemove(row: LabelType) {
   p {
     padding: 0 10px;
     flex: 1;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    cursor: pointer;
   }
+  &.is-active,
   &:hover {
-    background: #efefef;
+    color: var(--main-color);
+    background: #f8e8ec;
     .label-type-actions {
       display: flex;
     }

src/modules/label/views/Index.vue

@@ -26,8 +26,13 @@ const listOptions = computed(() => {
       httpRequest: getLabelList,
       params: listParams,
       beforeRequest(params: any, isReset: boolean) {
-        if (isReset) listParams.updated_operator = ''
+        if (isReset) {
+          listParams.updated_operator = ''
+          listParams.type_id = ''
+        } else {
           params.updated_operator = listParams.updated_operator
+          params.type_id = listParams.type_id
+        }
         return params
       }
     },
@@ -109,17 +114,20 @@ function handleRule(row: Label) {
   currentRow = row
   ruleVisible = true
 }
+
+function handleSelect(id: string) {
+  listParams.type_id = id
+  appList?.refetch()
+}
 </script>
 
 <template>
   <AppCard>
     <div class="label-wrap">
-      <div class="label-left"><LabelType></LabelType></div>
+      <div class="label-left"><LabelType :active-id="listParams.type_id" @select="handleSelect"></LabelType></div>
       <AppList v-bind="listOptions" ref="appList" class="label-right">
         <template #header-buttons>
-          <el-button type="primary" :icon="Plus" @click="handleAdd" v-permission="'experiment_tag_create'"
-            >新建</el-button
-          >
+          <el-button type="primary" :icon="Plus" @click="handleAdd" v-permission="'experiment_tag_create'">新建</el-button>
         </template>
         <template #filter-user>
           <SelectUser v-model="listParams.updated_operator" placeholder="更新人" @change="handleRefresh"></SelectUser>
@@ -128,22 +136,14 @@ function handleRule(row: Label) {
         <template #table-x="{ row }">
           <el-button type="primary" plain @click="handleRule(row)">规则</el-button>
           <el-button type="primary" plain @click="handleView(row)">查看</el-button>
-          <el-button type="primary" plain @click="handleUpdate(row)" v-permission="'experiment_tag_update'"
-            >编辑</el-button
-          >
-          <el-button type="primary" plain @click="handleRemove(row)" v-permission="'experiment_tag_delete'"
-            >删除</el-button
-          >
+          <el-button type="primary" plain @click="handleUpdate(row)" v-permission="'experiment_tag_update'">编辑</el-button>
+          <el-button type="primary" plain @click="handleRemove(row)" v-permission="'experiment_tag_delete'">删除</el-button>
         </template>
       </AppList>
     </div>
   </AppCard>
   <!-- 新建/修改标签 -->
-  <LabelFormDialog
-    v-model="formVisible"
-    :data="currentRow"
-    @update="handleRefresh"
-    v-if="formVisible"></LabelFormDialog>
+  <LabelFormDialog v-model="formVisible" :data="currentRow" @update="handleRefresh" v-if="formVisible"></LabelFormDialog>
   <!-- 查看标签 -->
   <LabelViewDialog v-model="viewVisible" :data="currentRow" v-if="viewVisible && currentRow"></LabelViewDialog>
   <!-- 规则 -->
@@ -160,6 +160,8 @@ function handleRule(row: Label) {
   margin-right: 20px;
   flex: 0 0 200px;
   border-right: 1px solid rgb(187, 187, 187);
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 .label-right {
   flex: 1;