多选

components/FilterList/mFilter.vue

@@ -4,7 +4,7 @@
       <slot></slot>
     </view>
     <uni-popup ref="popup">
-      <view class="popup-content">
+      <view class="popup-content" :style="props.popupStyle">
         <view class="popup-content-label">
           <view class="popup-content-label-item active">{{ label }}</view>
         </view>
@@ -43,8 +43,16 @@
 
 <script setup>
 import { ref, watch } from 'vue'
-const emit = defineEmits(['change'])
+const emit = defineEmits(['change', 'init'])
 const props = defineProps({
+  popupStyle: {
+    type: [String, Object],
+    default: ''
+  },
+  value: {
+    type: [String, Array, Number, Object],
+    default: null
+  },
   items: {  // 树结构
     type: Array,
     default: () => []
@@ -64,6 +72,10 @@ const props = defineProps({
   itemValue: {
     type: String,
     default: 'value'
+  },
+  children: {
+    type: String,
+    default: 'children'
   }
 })
 
@@ -71,6 +83,8 @@ const popup = ref()
 // const active = ref(0)
 const showList = ref([])
 
+// const showLabel = ref(null)
+
 watch(
   () => props.items,
   (val) => {
@@ -86,6 +100,98 @@ watch(
   }
 )
 
+watch(
+  () => props.value,
+  (val) => {
+    if (!val) {
+      return
+    }
+    // 单选 设置回显
+    if (!props.multiple) {
+      const item = findItem(val, props.items)
+      if (!item) {
+        showList.value = [{
+          choose: -1,
+          data: props.items
+        }]
+        return
+      }
+      showList.value = item.map(e => {
+        return {
+          choose: e[props.itemValue],
+          data: e.data
+        }
+      })
+      emit('init', item[item.length - 1][props.itemLabel])
+      // showLabel.value = item[item.length - 1][props.itemLabel]
+    }
+    if (!Array.isArray(val)) {
+      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
+      }
+      label.push(item[item.length - 1][props.itemLabel])
+      if (!arr.length) {
+        arr.push(...item.map((e, i) => {
+          return {
+            choose: i === item.length - 1 ? [e[props.itemValue]] : e[props.itemValue],
+            data: e.data
+          }
+        }))
+        return
+      }
+      arr[arr.length - 1].choose.push(item[item.length - 1][props.itemValue])
+    })
+    if (!arr.length) {
+      showList.value = [{
+        choose: -1,
+        data: props.items
+      }]
+      return
+    }
+    showList.value = arr
+    emit('init', label)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+const findItem = (value, lists) => {
+  let level = -1
+  return check(value, lists)
+  function check (val, items, arr = []) {
+    let i = 0
+    level++
+    while (i < items.length) {
+      arr[level] = {
+        ...items[i],
+        data: items
+      }
+      if (items[i][props.itemValue] === val) {
+        return arr
+      }
+      if (items[i][props.children] && items[i][props.children].length > 0) {
+        const data = check(val, items[i][props.children], arr)
+        if (data) {
+          return data
+        }
+      }
+      i++
+    }
+    level--
+    return false
+  }
+}
 
 const handleOpen = () => {
   popup.value.open('bottom')
@@ -96,11 +202,11 @@ const handleNext = (item, index) => {
   // active.value = _i
   showList.value.splice(_i, showList.value.length - _i)
   showList.value[index].label = item[props.itemLabel]
-  if (item.children && item.children.length) {
+  if (item[props.children] && item[props.children].length) {
     showList.value[index].choose = item[props.itemValue]
     showList.value.push({
       choose: -1,
-      data: item.children
+      data: item[props.children]
     })
     return
   }
@@ -137,11 +243,11 @@ const submit = () => {
       popup.value.close()
       return
     }
-    emit('change', props.multiple ? [_item.choose] : _item.choose, props.multiple ? showList.value[0].label : _item.label)
+    emit('change', props.multiple ? [_item.choose] : _item.choose, props.multiple ? showList.value[0].label : _item.label, item)
     popup.value.close()
     return
   }
-  emit('change', item.choose, props.multiple ? showList.value[0].label : item.label)
+  emit('change', item.choose, props.multiple ? showList.value[0].label : item.label, item)
   popup.value.close()
 }
 
@@ -152,7 +258,7 @@ const submit = () => {
   height: 580px;
   background: #FFF;
   border-radius: 20rpx 20rpx 0 0;
-  padding: 10px 10px 80px 10px;
+  padding: 10px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;

pagesA/resumeOnline/jobIntention.vue

@@ -1,27 +1,57 @@
 <!--  -->
 <template>
   <view class="ss-m-x-30 ss-m-y-30">
-    <uni-forms ref="form" :modelValue="formData" :rules="rules" validateTrigger="bind" label-width="90px">
-      <uni-forms-item label="期望岗位" name="positionId" required>
+    <uni-forms ref="form" :modelValue="formData" :rules="rules" validateTrigger="bind">
+      <uni-forms-item label="期望岗位" name="positionId" required label-width="90px">
 				<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>
-				<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 label="期望行业" name="industryIdList" required label-width="90px">
+				<m-filter
+					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>
+				<!-- <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>
+      <uni-forms-item label="最低薪资" name="payFrom" required label-width="90px">
         <uni-number-box v-model="formData.payFrom" :min="1" :max="999999999" :step="1000" :width="150" @change="payChange"></uni-number-box>
 			</uni-forms-item>
-      <uni-forms-item label="最高薪资" name="payTo" required>
+      <uni-forms-item label="最高薪资" name="payTo" required label-width="90px">
         <uni-number-box v-model="formData.payTo" :min="payToMin" :max="999999999" :step="1000" :width="150"></uni-number-box>
 			</uni-forms-item>
-      <uni-forms-item label="求职类型" name="jobType" required>
+      <uni-forms-item label="求职类型" name="jobType" required label-width="90px">
 				<uni-data-picker popup-title="请选择求职类型" v-model="formData.jobType" :localdata="dictObj?.jobType || []" :clear-icon="false" :map="{ text: 'label', value: 'value'}"></uni-data-picker>
 			</uni-forms-item>
-      <uni-forms-item label="工作城市" name="workAreaId" required>
+      <uni-forms-item label="工作城市" name="workAreaId" required label-width="90px">
 				<uni-data-picker popup-title="请选择工作城市" v-model="formData.workAreaId" :localdata="dictObj?.areaTreeData || []" :clear-icon="false" :map="{ text: 'name', value: 'id'}"></uni-data-picker>
 			</uni-forms-item>
-      <uni-forms-item label="其它感兴趣的城市" name="interestedAreaIdList">
-				<uni-data-picker popup-title="其它感兴趣的城市" v-model="formData.interestedAreaIdList" :localdata="dictObj?.areaTreeData || []" :clear-icon="false" :map="{ text: 'name', value: 'id'}"></uni-data-picker>
+      <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
+					label="请选择其它感兴趣的城市"
+					:items="dictObj?.areaTreeData || []"
+					item-label="name"
+					item-value="id"
+					multiple
+					:value="interestedAreaIdObj.id"
+					@change="interestedAreaChange"
+					@init="interestedAreaInit"
+				>
+					<view class="content">
+						<view class="content-cover"></view>
+						<uni-easyinput v-model="interestedAreaIdObj.label" placeholder="请选择其它感兴趣的城市" :clearable="false"/>
+					</view>
+				</m-filter>
 			</uni-forms-item>
     </uni-forms>
     <view class="f-horizon-center">
@@ -37,11 +67,24 @@ 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'
 
 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()
@@ -50,11 +93,14 @@ 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] : ''
+	// 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)
 	if (dictObj && dictObj?.areaTreeData) {
 		const type = typeof dictObj.areaTreeData[0].id
 		formData.value.workAreaId = type === 'string' ? obj.workAreaId.toString() : Number(obj.workAreaId)
-		formData.value.interestedAreaIdList = type === 'string' && obj.interestedAreaIdList.length ? obj.interestedAreaIdList[0].toString() : Number(obj.interestedAreaIdList[0])
 	}
 }
 
@@ -70,9 +116,9 @@ const submit = async () => {
   const valid = await unref(form).validate()
   if (!valid) return
 	// 后续做多选
-	const query = {...formData.value, industryIdList: [formData.value.industryIdList], interestedAreaIdList: [formData.value.interestedAreaIdList]}
+	// const query = {...formData.value, industryIdList: formData.value.industryIdList, interestedAreaIdList: formData.value.interestedAreaIdList}
 	try {
-		await saveResumeJobInterested(query)
+		await saveResumeJobInterested(formData.value)
 		uni.showToast({
 			icon: 'success',
 			title: '保存成功'
@@ -129,7 +175,7 @@ const rules = {
 	jobType:{
 		rules: [{required: true, errorMessage: '请选择求职类型' }]
 	},
-	workAreaProvinceId:{
+	workAreaId:{
 		rules: [{required: true, errorMessage: '请选择工作城市' }]
 	},
 }
@@ -139,8 +185,48 @@ 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>
 
 <style lang="scss" scoped>
+.content {
+	position: relative;
+	&-cover {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		left: 0;
+		top: 0;
+		z-index: 3;
+	}
+}
 </style>