地区选择

src/views/recruit/enterprise/positionManagement/components/jobRequirements.vue

@@ -1,30 +1,15 @@
 <template>
   <div style="width: 100%;">
-    <CtForm ref="formPageRef" :items="items" style="width: 600px;">
-      <template #areaId="{ item }">
-        <v-menu :close-delay="1" :open-delay="0" v-bind="$attrs">
-            <template v-slot:activator="{  props }">
-              <textUI
-                v-model="item.value"
-                :item="item"
-                v-bind="props"
-                style="position: relative;"
-              ></textUI>
-            </template>
-            <areaType :select="[query.areaId].filter(Boolean)" @handleAreaClick="handleArea" class="jobTypeCardBox" isSingle></areaType>
-          </v-menu>
-      </template>
-    </CtForm>
+    <CtForm ref="formPageRef" :items="items" style="width: 600px;"></CtForm>
   </div>
 </template>
 
 <script setup>
 defineOptions({ name: 'position-add-job-requirements'})
 import CtForm from '@/components/CtForm'
-import areaType from '@/components/AreaSelect'
-import textUI from '@/components/FormUI/TextInput'
 import { reactive, ref, defineExpose, watch } from 'vue'
 import { getDict } from '@/hooks/web/useDictionaries'
+import { cityToProvince } from '@/utils/areaDeal'
 
 const props = defineProps({
   itemData: Object
@@ -45,31 +30,6 @@ const items = ref({
       rules: [v => !!v || '招聘类型'],
       items: []
     },
-    {
-      type: 'autocomplete',
-      key: 'eduType',
-      value: null,
-      label: '最高学历 *',
-      itemText: 'label',
-      itemValue: 'value',
-      col: 6,
-      flexStyle: 'mr-3',
-      dictTypeName: 'menduner_education_type',
-      rules: [v => !!v || '请选择最高学历'],
-      items: []
-    },
-    {
-      type: 'autocomplete',
-      key: 'expType',
-      value: null,
-      label: '工作经验 *',
-      itemText: 'label',
-      itemValue: 'value',
-      col: 6,
-      dictTypeName: 'menduner_exp_type',
-      rules: [v => !!v || '请选择工作经验'],
-      items: []
-    },
     {
       type: 'text',
       key: 'payFrom',
@@ -120,13 +80,58 @@ const items = ref({
       items: []
     },
     {
-      slotName: 'areaId',
-      key: 'areaId',
+      type: 'autocomplete',
+      key: 'eduType',
       value: null,
+      label: '最高学历 *',
+      itemText: 'label',
+      itemValue: 'value',
+      col: 6,
+      flexStyle: 'mr-3',
+      dictTypeName: 'menduner_education_type',
+      rules: [v => !!v || '请选择最高学历'],
+      items: []
+    },
+    {
+      type: 'autocomplete',
+      key: 'expType',
+      value: null,
+      label: '工作经验 *',
+      itemText: 'label',
+      itemValue: 'value',
+      col: 6,
+      dictTypeName: 'menduner_exp_type',
+      rules: [v => !!v || '请选择工作经验'],
+      items: []
+    },
+    {
+      type: 'autocomplete',
+      key: 'workAreaProvinceId',
+      value: null,
+      label: '工作城市：省 *',
+      outlined: true,
+      itemText: 'name',
+      itemValue: 'id',
+      returnSelect: true,
       noParam: true,
-      labelKey: 'areaName',
-      label: '工作城市 *',
-      rules: [v => !!v || '请选择工作城市']
+      col: 6,
+      flexStyle: 'mr-3',
+      rules: [v => !!v || '请选择工作城市：省'],
+      items: [],
+      change: null
+    },
+    {
+      type: 'autocomplete',
+      key: 'areaId',
+      value: null,
+      label: '工作城市：市 *',
+      outlined: true,
+      itemText: 'name',
+      itemValue: 'id',
+      col: 6,
+      rules: [v => !!v || '请选择工作城市：市'],
+      items: [],
+      change: null
     },
     {
       type: 'text',
@@ -148,17 +153,26 @@ const getDictData = async () => {
   })
 }
 
-// 工作城市
-const handleArea = (list, name) => {
-  if (!list.length) {
-    delete query.areaId
-    items.value.options.find(e => e.key === 'areaId').value = ''
-    return
-  }
-  query.areaId = list[0]
-  const obj = items.value.options.find(e => e.key === 'areaId')
-  obj.value = name
+const provinceChange = (value, val, obj) => {
+  const item = items.value.options.find(e => e.key === 'areaId')
+  if (!item) return
+  item.items = obj.children || []
+  item.value = null
 }
+getDict('areaTreeData', null, 'areaTreeData').then(({ data }) => {
+  data = data?.length && data || []
+  if (!data?.length) return console.error('areaTreeData获取失败！')
+  //
+  const china = data.find(e => e.id === '1')
+  const chinaTreeData = china?.children?.length ? china.children : []
+  //
+  if (!chinaTreeData?.length) return console.error('chinaTreeData获取失败！')
+  const item = items.value.options.find(e => e.key === 'workAreaProvinceId')
+  if (item?.items) {
+    item.items = chinaTreeData
+    item.change = provinceChange
+  }
+})
 
 const getQuery = async () => {
   const { valid } = await formPageRef.value.formRef.validate()
@@ -179,6 +193,7 @@ watch(
     await getDictData()
     if (!Object.keys(val).length) return
     // 编辑
+    let workAreaId = ''
     items.value.options.forEach(e => {
       if (e.labelKey) {
         query[e.key] = val[e.key]
@@ -187,7 +202,17 @@ watch(
       }
       if (e.noParam) return
       e.value = val[e.key]
+      if (e.key === 'areaId' && val[e.key]) workAreaId = val[e.key]
     })
+    if (workAreaId) { // 省份回显
+      const province = items.value.options.find(pv => pv.key === 'workAreaProvinceId')
+      if (province) {
+        const dealReturnObj = await cityToProvince(workAreaId, {}, province.items || [])
+        const city = items.value.options.find(pv => pv.key === 'areaId')
+        if (city) city.items = dealReturnObj.cityList || []
+        province.value = dealReturnObj.pid || ''
+      }
+    }
   },
   { immediate: true },
   { deep: true }

src/views/recruit/personal/remuse/components/basicInfo.vue

@@ -30,11 +30,11 @@
       <div style="flex: 1;" class="mr-8 mt-5">
         <!-- 编辑 -->
         <div v-if="isEdit">
-          <CtForm ref="CtFormRef" :items="formItems" style="width: 100%;">
+          <CtForm ref="CtFormRef" :items="items" style="width: 100%;">
             <template v-slot:phone>
               <v-btn variant="text" class="ml-2" color="primary">{{ $t('common.change') }}</v-btn>
             </template>
-            <template #areaType="{ item }">
+            <!-- <template #areaType="{ item }">
               <v-menu :close-delay="1" :open-delay="0" v-bind="$attrs">
                 <template v-slot:activator="{  props }">
                   <textUI
@@ -46,7 +46,7 @@
                 </template>
                 <areaType :isIntType="false" :select="[baseInfo?.areaId].filter(Boolean)" @handleAreaClick="handleArea" class="jobTypeCardBox" isSingle></areaType>
               </v-menu>
-            </template>
+            </template> -->
           </CtForm>
           <div class="text-end">
             <v-btn class="half-button mr-3" variant="tonal" @click="isEdit = false">{{ $t('common.cancel') }}</v-btn>
@@ -117,9 +117,10 @@
 <script setup>
 import CtForm from '@/components/CtForm'
 import Snackbar from '@/plugins/snackbar'
-import areaType from '@/components/AreaSelect'
-import textUI from '@/components/FormUI/TextInput'
+// import areaType from '@/components/AreaSelect'
+// import textUI from '@/components/FormUI/TextInput'
 import { getDict } from '@/hooks/web/useDictionaries'
+import { cityToProvince } from '@/utils/areaDeal'
 import { getTimeStamp, timesTampChange } from '@/utils/date'
 import { updatePersonAvatar, saveResumeBasicInfo } from '@/api/recruit/personal/resume'
 import { useUserStore } from '@/store/user'
@@ -163,7 +164,7 @@ const handleUploadFile = async (e) => {
   getBasicInfo()
 }
 
-const formItems = ref({
+const items = ref({
   options: [
     {
       type: 'text',
@@ -214,16 +215,16 @@ const formItems = ref({
       // disabled: true,
       // slotName: 'phone',
     },
-    {
-      slotName: 'areaType',
-      key: 'areaId',
-      value: null,
-      label: '所在城市 *',
-      nameKey: 'areaName', // 展示出来id对应的内容
-      col: 6,
-      flexStyle: 'mr-3',
-      rules: [v => !!v || '请选择所在城市']
-    },
+    // {
+    //   slotName: 'areaType',
+    //   key: 'areaId',
+    //   value: null,
+    //   label: '所在城市 *',
+    //   nameKey: 'areaName', // 展示出来id对应的内容
+    //   col: 6,
+    //   flexStyle: 'mr-3',
+    //   rules: [v => !!v || '请选择所在城市']
+    // },
     {
       type: 'text',
       key: 'email',
@@ -304,6 +305,35 @@ const formItems = ref({
       rules: [v => !!v || '请选择婚姻状况'],
       items: []
     },
+    {
+      type: 'autocomplete',
+      key: 'workAreaProvinceId',
+      value: null,
+      label: '所在城市：省 *',
+      outlined: true,
+      itemText: 'name',
+      itemValue: 'id',
+      returnSelect: true,
+      noParam: true,
+      col: 6,
+      flexStyle: 'mr-3',
+      rules: [v => !!v || '请选择所在城市：省'],
+      items: [],
+      change: null
+    },
+    {
+      type: 'autocomplete',
+      key: 'areaId',
+      value: null,
+      label: '所在城市：市 *',
+      outlined: true,
+      itemText: 'name',
+      itemValue: 'id',
+      col: 6,
+      rules: [v => !!v || '请选择所在城市：市'],
+      items: [],
+      change: null
+    },
     {
       type: 'datePicker',
       key: 'firstWorkTime',
@@ -326,7 +356,7 @@ const handleSave = async () => {
   const { valid } = await CtFormRef.value.formRef.validate()
   if (!valid) return
   const obj = {}
-  formItems.value.options.forEach(e => {
+  items.value.options.forEach(e => {
     if (e.type === 'datepicker') obj[e.key] = getTimeStamp(e.value)
     else obj[e.key] = e.value
   })
@@ -339,28 +369,41 @@ const handleSave = async () => {
 }
 
 // 城市
-const setValue = (key, id, name) => {
-  const item =  formItems.value.options.find(e => e.key === key)
-  if (item) {
-    item.value = id
-    item[item.nameKey] = name
-  }
-}
-const handleArea = (list, name) => {
-  if (!list.length) return
-  const id = list[0]
-  setValue('areaId', id, name)
-}
+// const setValue = (key, id, name) => {
+//   const item =  items.value.options.find(e => e.key === key)
+//   if (item) {
+//     item.value = id
+//     item[item.nameKey] = name
+//   }
+// }
+// const handleArea = (list, name) => {
+//   if (!list.length) return
+//   const id = list[0]
+//   setValue('areaId', id, name)
+// }
 
 // 获取字典内容
 const getDictData = async (dictTypeName) => {
-  const item = formItems.value.options.find(e => e.dictTypeName === dictTypeName)
+  const item = items.value.options.find(e => e.dictTypeName === dictTypeName)
   if (item) {
     const { data } = await getDict(dictTypeName)
     item.items = data
   }
 }
-formItems.value.options.forEach((e, index) => {
+let workAreaId = ''
+const deal = async () => {
+  if (workAreaId) { // 省份回显
+    const province = items.value.options.find(pv => pv.key === 'workAreaProvinceId')
+    if (province) {
+      const dealReturnObj = await cityToProvince(workAreaId, {}, province.items || [])
+      const city = items.value.options.find(pv => pv.key === 'areaId')
+      if (city) city.items = dealReturnObj.cityList || []
+      province.value = dealReturnObj.pid || ''
+      console.log(dealReturnObj, 'dealReturnObj', province)
+    }
+  }
+}
+items.value.options.forEach((e, index) => {
   if ((index + 2) % 2 === 0) e.flexStyle = 'mr-3'
   if (e.dictTypeName) getDictData(e.dictTypeName) // 查字典set options
   // formItems回显
@@ -369,7 +412,32 @@ formItems.value.options.forEach((e, index) => {
   // 日期相关
   if (e.type === 'datepicker') e.value = timesTampChange(e.value).slice(0, 10)
   // 所在城市回显
-  if (infoExist && e.nameKey) e[e.nameKey] = baseInfo.value[e.nameKey]
+  // if (infoExist && e.nameKey) e[e.nameKey] = baseInfo.value[e.nameKey]
+  if (infoExist && e.key === 'areaId' && baseInfo.value[e.key]) {
+    workAreaId = baseInfo.value[e.key]
+    deal()
+  }
+})
+
+const provinceChange = (value, val, obj) => {
+  const item = items.value.options.find(e => e.key === 'areaId')
+  if (!item) return
+  item.items = obj.children || []
+  item.value = null
+}
+getDict('areaTreeData', null, 'areaTreeData').then(({ data }) => {
+  data = data?.length && data || []
+  if (!data?.length) return console.error('areaTreeData获取失败！')
+  //
+  const china = data.find(e => e.id === '1')
+  const chinaTreeData = china?.children?.length ? china.children : []
+  //
+  if (!chinaTreeData?.length) return console.error('chinaTreeData获取失败！')
+  const item = items.value.options.find(e => e.key === 'workAreaProvinceId')
+  if (item?.items) {
+    item.items = chinaTreeData
+    item.change = provinceChange
+  }
 })
 </script>
 

src/views/recruit/personal/remuse/components/jobIntention.vue

@@ -61,19 +61,6 @@
             <industryTypeCard :select="query.industryIdList" :currentData="currentSelect" showSelect @handleClickIndustry="handleIndustry"></industryTypeCard>
           </v-menu>
         </template>
-        <!-- <template #workAreaId_old="{ item }">
-          <v-menu :close-delay="1" :open-delay="0" v-bind="$attrs">
-            <template v-slot:activator="{  props }">
-              <textUI
-                v-model="item.value"
-                :item="item"
-                v-bind="props"
-                style="position: relative;"
-              ></textUI>
-            </template>
-            <areaType :select="[query.workAreaId_old].filter(Boolean)" @handleAreaClick="handleArea" class="jobTypeCardBox" isSingle></areaType>
-          </v-menu>
-        </template> -->
       </CtForm>
       <div class="text-end">
         <v-btn class="half-button mr-3" variant="tonal" @click="isAdd = false; resetForm()">{{ $t('common.cancel') }}</v-btn>
@@ -89,7 +76,6 @@ import CtForm from '@/components/CtForm'
 import textUI from '@/components/FormUI/TextInput'
 import jobTypeCard from '@/components/jobTypeCard'
 import industryTypeCard from '@/components/industryTypeCard'
-// import areaType from '@/components/AreaSelect'
 import Snackbar from '@/plugins/snackbar'
 import Confirm from '@/plugins/confirm'
 import { saveResumeJobInterested, getResumeJobInterested, deleteResumeJobInterested } from '@/api/recruit/personal/resume'
@@ -143,29 +129,6 @@ const items = ref({
       outlined: true,
       rules: [v => !!v || '请输入薪资最高要求']
     },
-    // {
-    //   slotName: 'workAreaId_old',
-    //   key: 'workAreaId_old',
-    //   value: null,
-    //   label: '工作城市 *',
-    //   valueKey: 'workArea',
-    //   col: 6,
-    //   flexStyle: 'mr-3',
-    //   rules: [v => !!v || '请选择工作城市']
-    // },
-    // {
-    //   type: 'nestedListGroup',
-    //   key: 'workAreaId',
-    //   value: null,
-    //   label: '工作城市 *',
-    //   itemText: 'name',
-    //   itemValue: 'id',
-    //   col: 6,
-    //   flexStyle: 'mr-3',
-    //   selectLevel: 2,
-    //   items: [],
-    //   rules: [v => !!v || '请选择工作城市'],
-    // },
     {
       type: 'autocomplete',
       key: 'workAreaProvinceId',
@@ -213,7 +176,6 @@ const items = ref({
     }
   ]
 })
-// items.value.options.forEach((e, index) => { if (index%2 === 0 && !e.flexStyle) { e.flexStyle = 'mr-3' } }) // 
 
 const provinceChange = (value, val, obj) => {
   const item = items.value.options.find(e => e.key === 'workAreaId')
@@ -267,13 +229,6 @@ const handleIndustry = (list, arr) => {
   setValue('industryIdList', str)
 }
 
-// // 工作城市
-// const handleArea = (list, name) => {
-//   if (!list.length) return
-//   query.workAreaId_old = list[0]
-//   setValue('workAreaId_old', name)
-// }
-
 const resetForm = () => {
   items.value.options.forEach(e => {
     if (e.key === 'industryIdList') e.value = ''