求职意向-其它意向城市调整

src/components/FormUI/TextInput/index.vue

@@ -30,7 +30,9 @@
       @keyup.enter="handleKeyup"
       @click:clear="handleClear"
       @blur="handleBlur"
-    ></v-text-field>
+    >
+      <slot name="default"></slot>
+    </v-text-field>
   </div>
 </template>
 <script setup>

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

@@ -58,7 +58,11 @@
                 v-model="item.value"
                 :item="item"
                 v-bind="props"
-              ></textUI>
+              >
+                <template #default>
+                  <v-chip v-for="k in currentSelect" :key="k.id" class="mr-1" closable @click:close="handleIndustryClear(k)">{{ k.nameCn }}</v-chip>
+                </template>
+              </textUI>
             </template>
             <industryTypeCard :select="query.industryIdList" :currentData="currentSelect" showSelect @handleClickIndustry="handleIndustry"></industryTypeCard>
           </v-menu>
@@ -72,7 +76,11 @@
                 :item="item"
                 v-bind="props"
                 style="position: relative;"
-              ></TextInput>
+              >
+                <template #default>
+                  <v-chip v-for="k in areaSelect" :key="k.id" class="mr-1" closable @click:close="handleAreaClear(k)">{{ k.name }}</v-chip>
+                </template>
+              </TextInput>
             </template>
             <AreaSelect :select="query.interestedAreaIdList" :currentData="areaSelect" :limit="false" showSelect @handleClick="handleArea"></AreaSelect>
           </v-menu>
@@ -122,9 +130,9 @@ const items = ref({
       key: 'industryIdList',
       value: '',
       outlined: true,
-      label: '期望行业 *',
+      placeholder: '期望行业 *',
       col: 6,
-      rules: [v => !!v || '请选择期望行业']
+      // rules: [v => !!v || '请选择期望行业']
     },
     {
       type: 'number',
@@ -193,8 +201,9 @@ const items = ref({
     {
       slotName: 'interestedAreaIdList',
       key: 'interestedAreaIdList',
-      value: null,
-      label: '其它感兴趣的城市'
+      value: '',
+      placeholder: '其它感兴趣的城市'
+      // label: '其它感兴趣的城市'
     }
   ]
 })
@@ -247,8 +256,15 @@ const handleIndustry = (list, arr) => {
   if (!list.length) return setValue('industryIdList', '')
   query.industryIdList = list
   currentSelect = arr
-  const str = arr.map(e => e.nameCn).join('、')
-  setValue('industryIdList', str)
+  // const str = arr.map(e => e.nameCn).join('、')
+  // setValue('industryIdList', str)
+}
+
+const handleIndustryClear = (k) => {
+  query.industryIdList = query.industryIdList.filter(i => i !== k.id)
+  const index = currentSelect.findIndex(i => i.id === k.id)
+  if (index !== -1) currentSelect.splice(index, 1)
+  console.log(k, 'industry', query.industryIdList, currentSelect)
 }
 
 // 其它感兴趣的城市
@@ -257,8 +273,13 @@ const handleArea = (list, arr) => {
   if (!list.length) return setValue('interestedAreaIdList', '')
   query.interestedAreaIdList = list
   areaSelect = arr
-  const str = arr.map(e => e.name).join('、')
-  setValue('interestedAreaIdList', str)
+  // const str = arr.map(e => e.name).join('、')
+  // setValue('interestedAreaIdList', str)
+}
+const handleAreaClear = (k) => {
+  query.interestedAreaIdList = query.interestedAreaIdList.filter(i => i !== k.id)
+  const index = areaSelect.findIndex(i => i.id === k.id)
+  if (index !== -1) areaSelect.splice(index, 1)
 }
 
 const resetForm = () => {
@@ -279,6 +300,7 @@ const handleSave = async () => {
   items.value.options.forEach(e => {
     if (arr.includes(e.key)) query[e.key] = e.value 
   })
+  if (!query.industryIdList || !query.industryIdList.length) return Snackbar.warning('请选择您的期望行业')
   if (editId.value) query.id = editId.value
   await saveResumeJobInterested(query)
   Snackbar.success('保存成功')
@@ -295,9 +317,11 @@ const handleEdit = async (item) => {
     if (e.valueKey) {
       e.value = item[e.valueKey]
     } else e.value = item[e.key]
-    if (e.key === 'industryIdList') e.value = item.industry.map(e => e.nameCn).join('、')
+    // if (e.key === 'industryIdList') e.value = item.industry.map(e => e.nameCn).join('、')
+    if (e.key === 'industryIdList') e.value = null
     if (e.key === 'interestedAreaIdList') {
-      e.value = item.interestedArea && item.interestedArea.length ? item.interestedArea.map(e => e.name).join('、') : []
+      // e.value = item.interestedArea && item.interestedArea.length ? item.interestedArea.map(e => e.name).join('、') : []
+      e.value = null
       query.interestedAreaIdList = item.interestedAreaIdList && item.interestedAreaIdList.length ? item.interestedAreaIdList : []
     }
     if (e.key === 'workAreaId' && item[e.key]) workAreaId = item[e.key]