人才地图样式更改

src/views/recruit/enterprise/talentMap/index.vue

@@ -19,35 +19,35 @@
           >
             {{ val }}
           </v-btn>
-          <v-btn class="ml-0 my-1 py-0 px-2" density="comfortable" variant="tonal" color="error" @click="moreLabels">
+          <!-- <v-btn class="ml-0 my-1 py-0 px-2" density="comfortable" variant="tonal" color="error" @click="moreLabels">
             更多人才标签...
-          </v-btn>
-        </template>
-        <template v-else>
-          <v-btn
-            v-for="(val, index) in chosenLabels" :key="val + index"
-            class="mr-3 my-2 py-0 px-2"
-            density="comfortable"
-            color="primary" variant="tonal"
-            v-bind="props"
-          >
-            {{ val }}
-            <v-icon class="ml-1" style="margin-top: 1px;" @click="deleteChip(index)">mdi-close</v-icon>
-          </v-btn>
-          <v-btn
-            class="ml-0 my-1 py-0 px-2"
-            density="comfortable"
-            variant="tonal"
-            :color="chosenLabels?.length ? '' : 'primary'"
-            append-icon="mdi mdi-menu-down"
-            @click="moreLabels"
-          >
-            {{ chosenLabels?.length ? '选择其他人才标签' : '人才标签'}}
-          </v-btn>
+          </v-btn> -->
         </template>
       </div>
-      <!-- <v-btn color="primary" class="half-button" variant="tonal" @click="openDrawer">职位匹配</v-btn> -->
     </div>
+    <template v-if="!init">
+      <span class="mr-2 color-666" style="width: 68px; min-width: 68px;">人才标签：</span>
+      <v-btn
+        v-for="(val, index) in chosenLabels" :key="val + index"
+        class="mr-3 my-2 py-0 px-2"
+        density="comfortable"
+        color="primary" variant="tonal"
+        v-bind="props"
+      >
+        {{ val }}
+        <v-icon class="ml-1" style="margin-top: 1px;" @click="deleteChip(index)">mdi-close</v-icon>
+      </v-btn>
+      <v-btn
+        class="mr-3 my-2 py-0 px-0"
+        density="comfortable"
+        color="primary" variant="tonal"
+        @click="moreLabels"
+      >
+        <!-- {{ chosenLabels?.length ? '选择其他人才标签' : '人才标签'}} -->
+        <v-icon>mdi-plus-box</v-icon>
+      </v-btn>
+      <span v-if="chosenLabels?.length" class="my-2" style="font-size: 14px;cursor: pointer;color: var(--color-999);" @click="resetLabel">清空标签</span>
+    </template>
     <!-- 人员信息表单 -->
     <v-data-table
       v-if="dataList?.length"
@@ -168,6 +168,11 @@ const deleteChip = (index) => {
   handleConfirm()
 }
 
+const resetLabel = () => {
+  chosenLabels.value = []
+  handleConfirm()
+}
+
 const formItems = ref({
   options: [
     {
@@ -179,7 +184,7 @@ const formItems = ref({
       outlined: true,
       itemText: 'label',
       itemValue: 'value',
-      clearable: false,
+      clearable: true,
       items: [
         // { label: '标签', value: '0' },
       ]
@@ -214,7 +219,12 @@ const handleChangePage = (e) => {
 
 // 筛选
 const handleConfirm = () => {
-  if (!chosenLabels.value?.length && !content.value && init.value) return Snackbar.warning('请先输入内容或选择人才标签！')
+  if (!chosenLabels.value?.length && !content.value) { // && init.value
+    Snackbar.warning('请先输入内容或选择人才标签！')
+    init.value = true
+    dataList.value = []; total.value = 0
+    return
+  }
   pageInfo.pageNo = 1
   getData()
 }
@@ -234,7 +244,7 @@ const textItem = ref({
   // label: '职位匹配',
   label: '请输入职位匹配相关内容',
   placeholder: '回车开始人才匹配',
-  clearable: true,
+  clearable: false,
   // readonly: true,
   appendInnerIcon: 'mdi-magnify'
 })