基于mFilter封装select组件

components/FilterList/mFilter.vue

@@ -80,11 +80,8 @@ const props = defineProps({
 })
 
 const popup = ref()
-// const active = ref(0)
 const showList = ref([])
 
-// const showLabel = ref(null)
-
 watch(
   () => props.items,
   (val) => {
@@ -104,6 +101,10 @@ watch(
   () => props.value,
   (val) => {
     if (!val) {
+      showList.value = [{
+        choose: -1,
+        data: props.items
+      }]
       return
     }
     // 单选 设置回显
@@ -123,18 +124,20 @@ watch(
         }
       })
       emit('init', item[item.length - 1][props.itemLabel])
-      // showLabel.value = item[item.length - 1][props.itemLabel]
+      return
     }
     if (!Array.isArray(val)) {
+      showList.value = [{
+        choose: -1,
+        data: props.items
+      }]
       return
     }
     // 多选 设置回显
     const arr = []
     const label = []
-    console.log(val, props.items)
     val.forEach(e => {
       const item = findItem(e, props.items)
-      console.log(item)
       if (!item) {
         return
       }

components/FilterList/select.vue

@@ -0,0 +1,101 @@
+<template>
+  <m-filter
+    :label="props.label"
+    :items="props.items"
+    :item-label="props.itemLabel"
+    :item-value="props.itemValue"
+    :multiple="props.multiple"
+    :value="showValue"
+    @change="handleChange"
+    @init="handleInit"
+  >
+    <view class="content">
+      <view class="content-cover"></view>
+      <uni-easyinput v-model="showLabel" placeholder="请选择其它感兴趣的城市" :clearable="false"/>
+    </view>
+  </m-filter>
+</template>
+
+<script setup>
+import MFilter from './mFilter'
+import { ref, watch } from 'vue'
+
+const emit = defineEmits(['update:modelValue'])
+const props = defineProps({
+  modelValue: { // 传入值
+    type: [String, Number, Array, Object],
+    default: ''
+  },
+  label: {
+    type: String,
+    default: '请选择'
+  },
+  items: {
+    type: Array,
+    default: () => []
+  },
+  itemLabel: {
+    type: String,
+    default: 'label'
+  },
+  itemValue: {
+    type: String,
+    default: 'value'
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  }
+})
+// 回显使用id
+const showValue = ref(props.modelValue)
+const showLabel = ref(null)
+
+// const isChange = ref(false)
+watch(
+  () => props.modelValue,
+  (val) => {
+    showValue.value = val
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+const handleInit = (val) => {
+  showLabel.value = val
+  console.log('label', val)
+}
+
+const handleChange = (value, label, item) => {
+  console.log(111)
+  if (props.multiple) {
+    if (!value.length) {
+      showLabel.value = null
+      emit('update:modelValue', null)
+      return
+    }
+    showLabel.value = item.data.filter(e => value.includes(e[props.itemValue])).map(e => e[props.itemLabel])
+    emit('update:modelValue', value)
+    return
+  }
+  showLabel.value = label
+  emit('update:modelValue', value)
+}
+
+</script>
+
+<style lang="scss" scoped>
+.content {
+	position: relative;
+	&-cover {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		left: 0;
+		top: 0;
+		z-index: 3;
+	}
+}
+</style>

pagesA/resumeOnline/jobIntention.vue

@@ -6,21 +6,14 @@
 				<uni-data-picker popup-title="请选择期望岗位" v-model="formData.positionId" :localdata="dictObj?.positionTreeData || []" :clear-icon="false" :map="{ text: 'nameCn', value: 'id'}"></uni-data-picker>
 			</uni-forms-item>
       <uni-forms-item label="期望行业" name="industryIdList" required label-width="90px">
-				<m-filter
+				<m-select
 					label="请选择期望行业"
 					:items="dictObj?.industryTreeData || []"
 					item-label="nameCn"
 					item-value="id"
 					multiple
-					:value="industryIdObj.id"
-					@change="industryChange"
-					@init="industryInit"
-				>
-					<view class="content">
-						<view class="content-cover"></view>
-						<uni-easyinput v-model="industryIdObj.label" placeholder="请选择期望行业" :clearable="false"/>
-					</view>
-				</m-filter>
+					v-model="formData.industryIdList"
+				></m-select>
 				<!-- <uni-data-picker popup-title="请选择期望行业" v-model="formData.industryIdList" :localdata="dictObj?.industryTreeData || []" :clear-icon="false" :map="{ text: 'nameCn', value: 'id'}"></uni-data-picker> -->
 			</uni-forms-item>
       <uni-forms-item label="最低薪资" name="payFrom" required label-width="90px">
@@ -37,21 +30,15 @@
 			</uni-forms-item>
       <uni-forms-item label="其它感兴趣的城市" name="interestedAreaIdList" label-width="90px">
 				<!-- <uni-data-picker popup-title="其它感兴趣的城市" v-model="formData.interestedAreaIdList" :localdata="dictObj?.areaTreeData || []" :clear-icon="false" :map="{ text: 'name', value: 'id'}"></uni-data-picker> -->
-				<m-filter
+				<m-select
 					label="请选择其它感兴趣的城市"
 					:items="dictObj?.areaTreeData || []"
 					item-label="name"
 					item-value="id"
 					multiple
-					:value="interestedAreaIdObj.id"
-					@change="interestedAreaChange"
-					@init="interestedAreaInit"
+					v-model="formData.interestedAreaIdList"
 				>
-					<view class="content">
-						<view class="content-cover"></view>
-						<uni-easyinput v-model="interestedAreaIdObj.label" placeholder="请选择其它感兴趣的城市" :clearable="false"/>
-					</view>
-				</m-filter>
+				</m-select>
 			</uni-forms-item>
     </uni-forms>
     <view class="f-horizon-center">
@@ -67,24 +54,12 @@ import { dictObj } from '@/utils/position.js'
 import { saveResumeJobInterested, getResumeJobInterested, deleteResumeJobInterested } from '@/api/resume.js'
 import { onLoad } from '@dcloudio/uni-app'
 import { cloneDeep } from 'lodash-es'
-import MFilter from '@/components/FilterList/mFilter'
+import MSelect from '@/components/FilterList/select.vue'
 
 let formData = ref({ positionId: '', payFrom: 0, payTo: 0 })
 const form = ref()
 const editId = ref(null)
 
-// 预览 回显 期望行业
-const industryIdObj = ref({
-	id: null,
-	label: null
-})
-
-// 预览 回显 感兴趣城市
-const interestedAreaIdObj = ref({
-	id: null,
-	label: null
-})
-
 // 获取求职意向
 async function getJobInterested (id) {
   const { data } = await getResumeJobInterested()
@@ -93,11 +68,7 @@ async function getJobInterested (id) {
   }
   const obj = data.find(k => k.id === id)
 	formData.value = cloneDeep(obj)
-	// formData.value.industryIdList = obj.industryIdList?.length ? obj.industryIdList[0] : ''
-	industryIdObj.value.id = obj.industryIdList
-	// formData.value.interestedAreaIdList = obj.interestedAreaIdList
-	interestedAreaIdObj.value.id = obj.interestedAreaIdList.map(e => +e)
-	console.log(interestedAreaIdObj.value)
+	formData.value.interestedAreaIdList = obj.interestedAreaIdList.map(e => +e)
 	if (dictObj && dictObj?.areaTreeData) {
 		const type = typeof dictObj.areaTreeData[0].id
 		formData.value.workAreaId = type === 'string' ? obj.workAreaId.toString() : Number(obj.workAreaId)
@@ -185,34 +156,6 @@ const payChange = (val) => {
   payToMin.value = val
   if (val > formData.value.payTo) formData.value.payTo = val
 }
-// 选中
-const industryChange = (value, label, item) => {
-	if (!value.length) {
-		industryIdObj.value.label = null
-		formData.value.industryIdList = null
-		return
-	}
-	industryIdObj.value.label = item.data.filter(e => value.includes(e.id)).map(e => e.nameCn)
-	formData.value.industryIdList = value
-}
-// 回显
-const industryInit = (label) => {
-	industryIdObj.value.label = label
-}
-// 选中
-const interestedAreaChange = (value, label, item) => {
-	if (!value.length) {
-		interestedAreaIdObj.value.label = null
-		formData.value.interestedAreaIdList = null
-		return
-	}
-	interestedAreaIdObj.value.label = item.data.filter(e => value.includes(e.id)).map(e => e.name)
-	formData.value.interestedAreaIdList = value
-}
-// 回显
-const interestedAreaInit = (label) => {
-	interestedAreaIdObj.value.label = label
-}
 
 
 </script>