找人

src/views/recruit/enterprise/search/components/common.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="d-flex align-center color-666">
+    <span class="font-size-14">{{ title }}：</span>
+    <v-chip-group v-model="select" selected-class="text-primary" mandatory @update:modelValue="handleSelect">
+      <v-chip v-for="val in items" :key="val.id" :text="val.label" :value="val.value" label filter size="small"></v-chip>
+    </v-chip-group>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'search-common'})
+import { ref } from 'vue'
+import { getDict } from '@/hooks/web/useDictionaries'
+
+const emit = defineEmits(['select'])
+const props = defineProps({
+  dictType: String,
+  title: String
+})
+
+const select = ref(-1)
+const items = ref([])
+getDict(props.dictType).then(({ data }) => {
+  items.value = [{ value: -1, label: '不限' }, ...data] || []
+})
+
+const handleSelect = (val) => {
+  emit('select', val)
+}
+</script>
+
+<style scoped lang="scss">
+</style>

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

@@ -15,7 +15,7 @@ import { ref } from 'vue'
 import searchRecommend from './recommend/index.vue'
 import searchRetrieval from './retrieval/index.vue'
 
-const tab = ref(0)
+const tab = ref(1)
 </script>
 
 <style scoped lang="scss">

src/views/recruit/enterprise/search/retrieval/components/area.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="font-size-15 d-flex align-center color-666">
+    <span style="display: block; width: 71px; text-align: end;">地区：</span>
+    <v-menu :close-delay="1" :open-delay="0" v-bind="$attrs" :close-on-content-click="true">
+      <template v-slot:activator="{  props }">
+        <div>
+          <v-chip v-for="k in areaSelect" :key="k.id" class="mr-3" closable label size="small" @click:close="handleAreaClear(k)">{{ k.name }}</v-chip>
+          <v-btn icon="mdi-plus" v-bind="props" variant="outlined" size="x-small"></v-btn>
+        </div>
+      </template>
+      <AreaSelect :select="select" :currentData="areaSelect" :limit="1" @handleClick="handleArea"></AreaSelect>
+    </v-menu>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'search-retrieval-area' })
+import { ref } from 'vue'
+
+const select = ref([])
+const areaSelect = ref([])
+
+const handleArea = (list, arr) => {
+  select.value = list
+  areaSelect.value = arr
+}
+
+const handleAreaClear = (k) => {
+  select.value = select.value.filter(item => item !== k.id)
+  const index = areaSelect.value.findIndex(item => item.id === k.id)
+  if (index !== -1) areaSelect.value.splice(index, 1)
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/recruit/enterprise/search/retrieval/components/industry.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="d-flex font-size-14">
+    <div v-for="val in items" :key="val.id" class="mr-5 cursor-pointer" :class="{'active': val.active}" @click="handleFirst(val)">{{ val.nameCn }}</div>
+  </div>
+  <div class="mt-5 font-size-14">
+    <span 
+      v-for="k in children" 
+      :key="k.id" 
+      class="d-inline-block mr-10 cursor-pointer color-666 mb-2" 
+      :class="{'active': select.findIndex(e => e.id === k.id) !== -1}"
+      @click="handleSecond(k)"
+    >{{ k.nameCn }}</span>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'search-screen-industry'})
+import { ref, watch } from 'vue'
+import { getDict } from '@/hooks/web/useDictionaries'
+
+const emit = defineEmits(['select'])
+const props = defineProps({
+  selectData: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const items = ref([])
+const select = ref([])
+const children = ref([])
+getDict('positionTreeData', {}, 'positionTreeData').then(({ data }) => {
+  if (!data) return
+  items.value = data.map(e => {
+    e.active = false
+    return e
+  })
+})
+
+watch(
+  () => props.selectData,
+  (val) => {
+    select.value = val
+  },
+  { deep: true }
+)
+
+const handleFirst = (val) => {
+  items.value.forEach(e => e.active = false)
+  val.active = !val.active
+  children.value = val.children || []
+}
+
+const handleSecond = (val) => {
+  const index = select.value.findIndex(e => e.id === val.id)
+  if (index !== -1) {
+    select.value.splice(index, 1)
+  } else select.value.push(val)
+  emit('select', select.value)
+}
+</script>
+
+<style scoped lang="scss">
+.active {
+  color: var(--v-primary-base);
+  font-weight: bold;
+}
+</style>

src/views/recruit/enterprise/search/retrieval/index.vue

@@ -1,11 +1,54 @@
 <template>
-  <div>searchRetrieval</div>
+  <div class="mt-3">
+    <div class="d-flex justify-center">
+      <TextInput :item="textItem" @enter="val => handleSearch('content', val)" @appendInnerClick="val => handleSearch('content', val)"></TextInput>
+    </div>
+    <Industry :selectData="industry" @select="val => industry = val"></Industry>
+    <Area></Area>
+    <CommonPage class="my-3" dictType="menduner_education_type" title="最高学历" @select="val => handleSearch('eduType', val)"></CommonPage>
+    <CommonPage dictType="menduner_exp_type" title="工作经验" @select="val => handleSearch('expType', val)"></CommonPage>
+    <v-divider class="mt-1 mb-3"></v-divider>
+    <div>
+      <div>
+        <v-chip v-for="k in industry" :key="k.id" label class="mr-3" closable @click:close="handleClose(k)">{{ k.nameCn }}</v-chip>
+      </div>
+      <div v-if="industry.length" class="text-end font-size-15 color-999 cursor-pointer tips" @click="handleClear">清除选择</div>
+    </div>
+  </div>
 </template>
 
 <script setup>
 defineOptions({ name: 'searchRetrieval' })
+import { ref } from 'vue'
+import CommonPage from '../components/common.vue'
+import Industry from './components/industry.vue'
+import Area from './components/area.vue';
+
+const textItem = ref({
+  type: 'text',
+  width: 600,
+  value: '',
+  label: '输入关键字',
+  clearable: true,
+  appendInnerIcon: 'mdi-magnify'
+})
+
+const industry = ref([])
+const handleSearch = (key, value) => {
+  console.log(key, value, 'search')
+}
+
+const handleClose = (item) => {
+  industry.value = industry.value.filter(k => k.id !== item.id)
+}
+
+const handleClear = () => {
+  industry.value = []
+}
 </script>
 
 <style scoped lang="scss">
-
+.tips:hover {
+  color: var(--v-primary-base)
+}
 </style>