menduner/src/views/resume/components/jobIntention.vue

<template>
  <div class="resume-box">
    <div class="resume-header mb-3">
      <div class="resume-title">{{ $t('resume.jobIntention') }}</div>
      <v-btn v-if="!isAdd" variant="text" color="primary" prepend-icon="mdi-plus-box" @click="isAdd = true">{{ $t('common.add') }}</v-btn>
    </div>
    <div v-if="!isAdd">
      <div 
        :class="['position-item']" 
        v-for="(k, i) in positionList" 
        :key="i" 
        @mouseenter="k.active = true" 
        @mouseleave="k.active = false"
      >
        <span>{{ k.name }}</span>
        <span class="vline"></span>
        <span>{{k.payFrom}}-{{k.payTo}}k</span>
        <span class="vline"></span>
        <span class="grey-text">{{ k.industryIds }}</span>
        <span class="vline"></span>
        <span class="grey-text">{{ k.areaName }}</span>
        <span class="vline"></span>
        <span class="grey-text">{{ k.jobType }}</span>
        <span class="float-right" v-if="k.active">
          <v-btn variant="text" color="primary" prepend-icon="mdi-square-edit-outline">{{ $t('common.edit') }}</v-btn>
          <v-btn variant="text" color="primary" prepend-icon="mdi-trash-can-outline">{{ $t('common.delete') }}</v-btn>
        </span>
      </div>
    </div>
    <div v-if="isAdd" class="mt-2">
      <CtForm :items="items" style="width: 100%;">
        <template #positionId="{ item }">
          <v-menu :close-delay="1" :open-delay="0" v-bind="$attrs">
            <template v-slot:activator="{  props }">
              <textUI
                :modelValue="item.value"
                :item="item"
                @blur="item.blur"
                v-bind="props"
                style="position: relative;"
              ></textUI>
            </template>
            <jobTypeCard class="jobTypeCardBox" :isCustomer="true" @handleJobClick="handleJobClickItem"></jobTypeCard>
          </v-menu>
        </template>
        <template #industryIdList="{ item }">
          <v-menu :close-delay="1" :open-delay="0" v-bind="$attrs" :close-on-content-click="false">
            <template v-slot:activator="{  props }">
              <textUI
                v-model="item.value"
                :item="item"
                @blur="item.blur"
                v-bind="props"
                style="position: relative;"
              ></textUI>
            </template>
            <industryTypeCard @inputChange="handleIndustry"></industryTypeCard>
          </v-menu>
        </template>
      </CtForm>
      <div class="text-end">
        <v-btn class="half-button mr-3" variant="tonal" @click="isAdd = false">{{ $t('common.cancel') }}</v-btn>
        <v-btn color="primary" class="half-button">{{ $t('common.save') }}</v-btn>
      </div>
    </div>
  </div>
</template>

<script setup name="jobIntention">
import { ref } from 'vue'
import CtForm from '@/components/CtForm'
import textUI from '@/components/FormUI/TextInput'
import jobTypeCard from '@/components/jobTypeCard'
import industryTypeCard from '@/components/industryTypeCard'

const isAdd = ref(false)

const items = ref({
  options: [
    {
      slotName: 'positionId',
      key: 'positionId',
      value: '',
      col: 6,
      label: '期望岗位 *',
      flexStyle: 'mr-3',
      hideDetails: true,
      outlined: true,
      rules: [v => !!v || '请选择期望岗位']
    },
    {
      slotName: 'industryIdList',
      key: 'industryIdList',
      value: '不限',
      outlined: true,
      label: '期望行业 *',
      col: 6,
      rules: [v => !!v || '请选择期望行业']
    },
    {
      type: 'number',
      key: 'payFrom',
      value: null,
      placeholder: '期望薪资（最低要求） *',
      col: 6,
      flexStyle: 'mr-3',
      outlined: true,
      rules: [v => !!v || '请输入薪资最低要求']
    },
    {
      type: 'number',
      key: 'payTo',
      value: null,
      placeholder: '期望薪资（最高要求） *',
      col: 6,
      outlined: true,
      rules: [v => !!v || '请输入薪资最高要求']
    },
    {
      type: 'autocomplete',
      key: 'workAreaId',
      value: null,
      placeholder: '请选择工作城市 *',
      outlined: true,
      itemText: 'label',
      col: 6,
      itemValue: 'value',
      flexStyle: 'mr-3',
      rules: [v => !!v || '请选择工作城市'],
      items: []
    },
    {
      type: 'autocomplete',
      key: 'jobType',
      value: null,
      placeholder: '请选择求职类型 *',
      outlined: true,
      itemText: 'label',
      col: 6,
      itemValue: 'value',
      rules: [v => !!v || '请选择求职类型'],
      items: [
        { label: '全职', value: 0 },
        { label: '兼职', value: 1 },
        { label: '临时', value: 2 },
        { label: '实习', value: 3 }
      ]
    }
  ]
})

// 期望职位
const handleJobClickItem = (val) => {
  items.value.options.find(e => e.key === 'positionId').value = val.nameCn
}

const handleIndustry = (list) => {
  console.log(list, 'industry')
}

const positionList = ref([
  {
    name: '前端开发工程师',
    payFrom: 5,
    payTo: 20,
    industryIds: '行业不限',
    areaName: '广州',
    jobType: '全职',
    active: false
  },
  {
    name: '规控算法',
    payFrom: 9,
    payTo: 10,
    industryIds: '医疗设备',
    areaName: '广州',
    jobType: '兼职',
    active: false
  }
])
</script>

<style scoped lang="scss">
.jobTypeCardBox {
  position: absolute;
  top: 0;
  left: 0;
}
.position-item {
  cursor: pointer;
  border-radius: 6px;
  line-height: 36px;
  &:hover {
    background-color: #f8f8f8;
  }
  span {
    font-size: 15px;
  }
  .grey-text {
    color: #999;
  }
}
</style>