Merge branch 'dev' of https://git.citupro.com/zhengnaiwen_citu/menduner into dev

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

@@ -1,19 +1,35 @@
 <template>
-  <commonStyle btnTitle="求职类型">
-    <div></div>
+  <commonStyle btnTitle="求职类型" :close-on-content-click="false">
+    <v-list>
+      <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)"
+      >
+        <v-list-item-title>{{ item.label }}</v-list-item-title>
+      </v-list-item>
+    </v-list>
   </commonStyle>
 </template>
 <script setup>
 import commonStyle from './commonStyle.vue'
 import { getDict } from '@/hooks/web/useDictionaries'
-import { ref } from 'vue';
+import { ref, defineEmits } from 'vue';
 
 defineOptions({name: 'conditionFilter-JobType'})
+const emits = defineEmits(['selectedItems'])
 let items = ref()
+const selectedItems = ref([])
 getDict('menduner_job_type').then(({ data }) => { // 求职类型
   data = data?.length && data || []
   items.value = data
 })
+const handle = (val) => {
+  if (selectedItems.value.includes(val)) selectedItems.value = selectedItems.value.filter(i => i !== val)
+  else selectedItems.value.push(val)
+  emits('selectedItems', selectedItems.value)
+}
 </script>
 <style lang="scss" scoped>
 </style>

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

@@ -1,20 +1,28 @@
 <template>
-  <v-menu open-on-hover>
-    <template v-slot:activator="{ props }">
-      <div class="d-flex align-center" v-bind="props">
-        <div class="btn" @mouseover="drawer = true" @mouseleave="drawer = false">
+  <v-menu open-on-hover v-bind="$attrs">
+    <template v-slot:activator="{ isActive, props }">
+      <v-btn
+        class="mr-3"
+        density="comfortable"
+        :append-icon="isActive ? 'mdi mdi-menu-up' : 'mdi mdi-menu-down'"
+        color="primary" variant="tonal"
+        v-bind="props"
+      >
+        {{ defineProps.btnTitle }}
+      </v-btn>
+      <!-- <div class="d-flex align-center">
+        <div class="btn" v-bind="props">
           <span class="mr-2">{{ defineProps.btnTitle }}</span>
-          <span v-if="drawer" class="mdi mdi-menu-up"></span>
-          <span v-if="!drawer" class="mdi mdi-menu-down"></span>
+          <span v-if="isActive" class="mdi mdi-menu-up"></span>
+          <span v-if="!isActive" class="mdi mdi-menu-down"></span>
         </div>
-      </div>
+      </div> -->
     </template>
     <!-- <jobTypeCard @click.stop=""></jobTypeCard> -->
     <slot></slot>
   </v-menu>
 </template>
 <script setup>
-import { ref } from 'vue';
 
 defineOptions({name: 'conditionFilter-index-page'})
 const defineProps = defineProps({
@@ -23,20 +31,19 @@ const defineProps = defineProps({
     default: 'Text'
   }
 })
-const drawer = ref(false)
 </script>
 <style lang="scss" scoped>
-.btn {
-  color: #333333;
-  background-color: var(--default-bgc);
-  padding: 4px 12px 4px 12px;
-  border-radius: 4px;
-  margin-right: 20px;
-  margin-bottom: 4px;
-  cursor: pointer;
-  &:hover {
-    color: var(--v-primary-base);
-    background-color: #d5e6e8;
-  }
-}
+// .btn {
+//   color: #333333;
+//   background-color: var(--default-bgc);
+//   padding: 4px 12px 4px 12px;
+//   border-radius: 4px;
+//   margin-right: 20px;
+//   margin-bottom: 4px;
+//   cursor: pointer;
+//   &:hover {
+//     color: var(--v-primary-base);
+//     background-color: #d5e6e8;
+//   }
+// }
 </style>

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

@@ -1,19 +1,35 @@
 <template>
-  <commonStyle btnTitle="工作经验">
-    <div></div>
+  <commonStyle btnTitle="工作经验" :close-on-content-click="false">
+    <v-list>
+      <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)"
+      >
+        <v-list-item-title>{{ item.label }}</v-list-item-title>
+      </v-list-item>
+    </v-list>
   </commonStyle>
 </template>
 <script setup>
 import commonStyle from './commonStyle.vue'
 import { getDict } from '@/hooks/web/useDictionaries'
-import { ref } from 'vue';
+import { ref, defineEmits } from 'vue';
 
 defineOptions({name: 'conditionFilter-expType'})
+const emits = defineEmits(['selectedItems'])
 let items = ref()
+const selectedItems = ref([])
 getDict('menduner_exp_type').then(({ data }) => { // 工作经验
   data = data?.length && data || []
   items.value = data
 })
+const handle = (val) => {
+  if (selectedItems.value.includes(val)) selectedItems.value = selectedItems.value.filter(i => i !== val)
+  else selectedItems.value.push(val)
+  emits('selectedItems', selectedItems.value)
+}
 </script>
 <style lang="scss" scoped>
 </style>

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

@@ -1,19 +1,35 @@
 <template>
   <commonStyle btnTitle="薪资待遇">
-    <div></div>
+    <v-list>
+      <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)"
+      >
+        <v-list-item-title>{{ item.label }}</v-list-item-title>
+      </v-list-item>
+    </v-list>
   </commonStyle>
 </template>
 <script setup>
 import commonStyle from './commonStyle.vue'
 import { getDict } from '@/hooks/web/useDictionaries'
-import { ref } from 'vue';
+import { ref, defineEmits } from 'vue';
 
 defineOptions({name: 'conditionFilter-payScope'})
+const emits = defineEmits(['selectedItems'])
 let items = ref()
-getDict('menduner_pay_scope').then(({ data }) => { // 薪资待遇
+let selectedItems = ref([])
+getDict('menduner_pay_scope').then(({ data }) => { // 求职类型
   data = data?.length && data || []
   items.value = data
 })
+const handle = (val) => {
+  // 单选
+  selectedItems.value = [val]
+  emits('selectedItems', selectedItems.value)
+}
 </script>
 <style lang="scss" scoped>
 </style>