行业类型

src/components/industryTypeCard/index.vue

@@ -10,7 +10,6 @@
               <div
                 v-else
                 class="jobItem"
-                :class="{'act': item.act}"
                 v-for="val in item.children" :key="val.id"
                 @click="handleClick(val)"
               >{{ val.nameCn }}</div>
@@ -24,41 +23,35 @@
 <script setup>
 import { getDict } from '@/hooks/web/useDictionaries'
 import { reactive, ref } from 'vue';
+import { useRoute } from 'vue-router';
 defineOptions({ name:'common-components-industryTypeCard'})
-const emits = defineEmits(['inputChange'])
+const emits = defineEmits(['handleClickIndustry'])
+
+const route = useRoute()
+const routeQuery = route?.query
 
 let items = ref()
+let idChecked = reactive([])
 getDict('industryTreeData', null, 'industryTreeData').then(({ data }) => {
   data = data?.length && data || []
   items.value = data
 })
+if (routeQuery && routeQuery.industryIds) {
+  idChecked = routeQuery.industryIds.split('_').map(e => Number(e))
+}
 
 // 设置选中ids
-const idChecked = reactive([])
 const handleClick = (val) => {
-  val.act = !val.act
-  console.log('val', val)
   const findIndex = idChecked?.length ? idChecked.findIndex(j => j === val.id) : -1
   if (findIndex === -1) {  
     idChecked.push(val.id) // 添加  
   } else {  
     idChecked.splice(findIndex, 1) // 删除  
   }
-  console.log('idChecked', idChecked)
-  if (idChecked?.length) emits('inputChange', idChecked)
-}
-
-// 选中样式判断
-const calcAct = (id) => {
-  if (!id) return false
-  if (Array.isArray(idChecked)) {
-    const index = idChecked.findIndex(itemToCheck => itemToCheck=== id)
-    const bool = index !== -1
-    return bool ? true : false; // 如果找到返回索引，否则返回 false
-  }
-  else return false
+  if (idChecked?.length) emits('handleClickIndustry', idChecked)
 }
 </script>
+
 <style lang="scss" scoped>
 .card { border-radius: 12px; }
 .rightCard {
@@ -70,7 +63,7 @@ const calcAct = (id) => {
   // .categoryName { font-size: 16px; line-height: 28px; margin-top: 6px; color: var(--v-primary-base)}
   .categoryName2 { font-size: 14px; color: #000; width: 150px; margin-right: 4px;}
   .jobItem { font-size: 14px; color: #333333; }
-  .act { color: var(--v-primary-base); }
+  .active { color: var(--v-primary-base); font-weight: 700; }
   .rowItem {
     padding: 8px 0;
   }

src/components/jobTypeCard/index.vue

@@ -69,6 +69,7 @@
 import { getPositionTreeClick } from '@/api/common/index'
 import { getDict } from '@/hooks/web/useDictionaries'
 import { reactive, ref, defineEmits } from 'vue';
+import { useRoute } from 'vue-router'
 defineOptions({ name:'common-components-jobTypeCard'})
 
 const emits = defineEmits(['handleJobClick', 'jobClick'])// 定义一个或多个自定义事件
@@ -77,14 +78,12 @@ const props = defineProps({
   page: { // 左侧数据是否分页（首页有分页）
     type: Boolean,
     default: false
-  },
-  params: {
-    Object,
-    default: () => {}
   }
 })
 const isPage = props.page
 const selectItems = ref([])
+const route = useRoute()
+const routeQuery = route?.query
 
 // 职位点击
 const handleJobClick = async (val) => {
@@ -132,8 +131,8 @@ const handleMouseOver = (val, index) => { // 鼠标移入
   leftIndex.value = index
   rightObj.data = val
   // 回显
-  if (props.params &&  props.params.positionId && props.params.positionId.length) {
-    selectItems.value = props.params.positionId.split('_').map(e => Number(e))
+  if (routeQuery && routeQuery.positionId) {
+    selectItems.value = routeQuery.positionId.split('_').map(e => Number(e))
   }
   rightObj.show = true
 }

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

@@ -1,15 +1,31 @@
 <template>
-  <commonStyle btnTitle="行业类型" :close-on-content-click="false">
-    <industryTypeCard></industryTypeCard>
-    <!-- <industryTypeCard @inputChange="val => emits('inputChange', val)"></industryTypeCard> -->
+  <commonStyle :btnTitle="title" :close-on-content-click="false">
+    <industryTypeCard @handleClickIndustry="handleIndustry"></industryTypeCard>
   </commonStyle>
 </template>
+
 <script setup>
 import commonStyle from './commonStyle.vue'
 import industryTypeCard from '@/components/industryTypeCard'
-
 defineOptions({name: 'conditionFilter-company-industry'})
-// const emits = defineEmits('inputChange')
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const routeQuery = route?.query
+
+const emits = defineEmits(['inputChange'])
+const title = ref('行业类型')
+if (routeQuery && routeQuery.industryIds) {
+  const arr = routeQuery.industryIds.split('_')
+  title.value = `行业类型(${arr.length})`
+}
+
+const handleIndustry = (val) => {
+  title.value = val.length ? `行业类型(${val.length})` : '行业类型'
+  emits('inputChange', { values: val, isEmit: true })
+}
 </script>
+
 <style lang="scss" scoped>
 </style>