在招职位

src/components/Enterprise/components/positions.vue

@@ -13,12 +13,12 @@
       </div>
     </div>
     <div class="d-flex mt-3">
-      <areaType :list="areaList"></areaType>
+      <areaType v-if="areaList.length" :list="areaList"></areaType>
       <expType></expType>
       <educationType></educationType>
       <payScope></payScope>
-      <div style="width: 200px; height: 20px;">
-        <v-text-field  variant="outlined" placeholder="请输入职位名称">
+      <div style="width: 200px;">
+        <v-text-field  variant="outlined" placeholder="请输入职位名称" hide-details>
           <template #append-inner>
             <v-btn color="primary" size="x-small">搜索</v-btn>
           </template>
@@ -26,7 +26,8 @@
       </div>
     </div>
   </div>
-  <div class="bottom mt-5">
+  <v-divider class="mt-5"></v-divider>
+  <div class="bottom mt-4">
     <div 
       v-for="(val, i) in list" 
       :key="i" 
@@ -36,31 +37,31 @@
       @click="handlePosition(val)"
     >
       <div>
-          <p :class="['name', {'default-active': val.active }]">{{ val.name }}</p>
-          <div style="line-height: 40px;">
-            <span v-for="k in desc" :key="k.mdi" class="mr-5">
-              <v-icon color="#666" size="15">{{ k.mdi }}</v-icon>
-              <span class="ml-1 tag-text">{{ val[k.value] }}</span>
-            </span>
-          </div>
+        <p :class="['name', {'default-active': val.active }]">{{ val.name }}</p>
+        <div style="line-height: 40px;">
+          <span v-for="k in desc" :key="k.mdi" class="mr-5">
+            <v-icon color="#666" size="15">{{ k.mdi }}</v-icon>
+            <span class="ml-1 tag-text">{{ val[k.value] }}</span>
+          </span>
+        </div>
       </div>
       <div v-if="!val.active" class="text-right">
-          <p class="salary">{{ val.payFrom }}-{{ val.payTo }}k/{{ val.payName }}</p>
-          <div class="update-time">{{ timesTampChange(val.updateTime) }} 刷新</div>
+        <p class="salary">{{ val.payFrom }}-{{ val.payTo }}k/{{ val.payName }}</p>
+        <div class="update-time">{{ timesTampChange(val.updateTime) }} 刷新</div>
       </div>
       <div v-else class="account-info">
-          <v-avatar image="https://cdn.vuetifyjs.com/images/john.jpg"></v-avatar>
-          <span class="account-label">陈北方 · 人事经理</span>
-          <span>
-            <v-btn class="half-button" color="primary" size="small">立即沟通</v-btn>
-          </span>
+        <v-avatar image="https://cdn.vuetifyjs.com/images/john.jpg"></v-avatar>
+        <span class="account-label">陈北方 · 人事经理</span>
+        <span>
+          <v-btn class="half-button" color="primary" size="small">立即沟通</v-btn>
+        </span>
       </div>
     </div>
     <MPagination
-        :total="total"
-        :page="pageInfo.current"
-        :limit="pageInfo.size"
-        @handleChange="handleChangePage"
+      :total="total"
+      :page="pageInfo.current"
+      :limit="pageInfo.size"
+      @handleChange="handleChangePage"
     ></MPagination>
   </div>
 </template>
@@ -221,6 +222,7 @@ const desc = [
 :deep(.v-field__input) {
   height: 28px;
   padding: 0 0 0 10px;
-  font-size: 12px
+  font-size: 12px;
+  min-height: 28px;
 }
 </style>

src/views/recruit/position/components/conditionFilter/areaType.vue

@@ -1,12 +1,15 @@
 <template>
-  <commonStyle btnTitle="工作地点">
-    <v-list>
+  <commonStyle :btnTitle="title">
+    <v-list :items="items">
       <v-list-item
         color="primary"
-        :active="selectedItems.includes(item.value)"
-        v-for="item in items" :key="item.id" :value="item.value"
-        @click="handle(item.value)"
-      >
+        :active="selectedItems.includes(item.id)"
+        v-for="item in items" :key="item.id" :value="item.id"
+        @click="handle(item)"
+      > 
+        <template v-if="selectedItems.includes(item.id)" v-slot:append>
+          <v-icon icon="mdi-close"></v-icon>
+        </template>
         <v-list-item-title>{{ item.label }}</v-list-item-title>
       </v-list-item>
     </v-list>
@@ -24,18 +27,22 @@ const props = defineProps({
   list: Array
 })
 
+const title = ref('工作地点')
 let items = ref()
 let selectedItems = ref([])
 getDict('menduner_area_type', {}, 'areaList').then(({ data }) => {
   data = data?.length && data || []
-  items.value = props.list.map(e => {
+  const arr = props.list.map(e => {
     const { id, parentId, type, name: label } = data.find(k => Number(k.id) === Number(e.key))
-    return { id, label, number: e.value, parentId, type }
+    return { id, label, number: e.value, parentId, type, props: { appendIcon: '' } }
   })
+  items.value = [{ id: -1, label: '全部', props: { appendIcon: '' } }, ...arr]
 })
 const handle = (val) => {
-  // 单选
-  selectedItems.value = [val]
+  const obj = selectedItems.value.find(e => e === val.id)
+  title.value = obj ? '工作地点' : '工作地点(1)'
+  val.props.appendIcon = obj ? '' : 'mdi-check'
+  selectedItems.value = obj ? [] : [val.id]
   emits('selectedItems', selectedItems.value)
 }
 </script>