menduner/src/views/recruit/enterprise/informationManagement/informationSettingsComponents/welfareLabel.vue

<!-- 福利标签 -->
<template>
  <span style="font-size: 16px;" class="mr-1">已选择标签</span>
  <span style="font-size: 14px; color: var(--color-666);">(最多10个标签)</span>
  <div class="mb-15">
    <v-chip
      v-for="(item, index) in chosen" :key="index"
      class="chip mx-2 mt-4"
      label color="#ea8d03"
    >
      {{ item }}
      <v-icon size="18" color="#ea8d03" style="margin-left: 6px;" @click="closeClick(item)">mdi-close-circle</v-icon>
    </v-chip>
    <div>
      <div v-if="customTag" class="d-flex align-center mx-2 mt-4">
        <TextUI class="mr-2" :item="textItem" @appendInnerClick.stop="appendInnerClick"></TextUI>
        <v-icon size="22" color="#ccc" style="cursor: pointer;" @click="customTag = false">mdi-close</v-icon>
      </div>
      <div v-else @click="customTag = true">
        <v-chip class="chip mx-2 mt-4" label color="#fd7b4ee6"><v-icon icon="mdi-plus" start></v-icon>自定义标签</v-chip>
      </div>
    </div>
  </div>
  <div v-for="(val, index) in chipList" :key="'welfareLabel' + index" class="mb-8">
    <span style="font-size: 16px;">{{ val?.nameCn || '--' }}</span>
    <div v-if="val?.children?.length">
      <v-chip
        v-for="(item, index) in val.children" :key="index"
        class="chip mx-2 mt-4"
        label color="#ea8d03"
        :disabled="chosen.includes(item?.nameCn )"
        @click="choseClick(item?.nameCn )"
      >
        <v-icon icon="mdi-plus" start></v-icon>
        {{ item?.nameCn || '--' }}
      </v-chip>
    </div>
  </div>
</template>

<script setup>
import TextUI from '@/components/FormUI/TextInput'
import Snackbar from '@/plugins/snackbar'
import Confirm from '@/plugins/confirm'
import { useI18n } from '@/hooks/web/useI18n'; const { t } = useI18n()
import { getEnterpriseBaseInfo, updateEnterpriseWelfare, getTagTreeDataApi } from '@/api/enterprise'
import { ref } from 'vue';
defineOptions({name: 'informationSettingsComponents-welfareLabel'})
const emit = defineEmits(['complete'])

const customTag = ref(false)
const limitNum = ref(10)
let chosen = ref([])
// 删除
const closeClick = (item) => {
  Confirm('系统提示', '是否确认删除？').then(async () => {
    chosen.value = chosen.value.filter(e => e !== item)
    handleSave('删除')
  })
}
// 从推荐标签添加
const choseClick = (item) => {
  if (chosen.value?.length >= limitNum.value) return Snackbar.warning('最多可加10个标签')
  chosen.value.push(item)
  handleSave('添加')
}
// 保存自定义
const appendInnerClick = (value) => {
  if (chosen.value?.length >= limitNum.value) return Snackbar.warning('最多可加10个标签')
  if (!value) return Snackbar.warning(t('common.pleaseEnter')+t('enterprise.infoSetting.welfareLabel'))
  const index = chosen.value.findIndex(e => e === value)
  if (index !== -1) return Snackbar.warning(t('common.alreadyExists'))
  chosen.value.push(value)
  handleSave('保存') // 保存自定义
}
// 保存
const handleSave = async (type) => {
  try {
    const appAdminEnterpriseWelfareReqVO = { tagList: chosen.value }
    await updateEnterpriseWelfare(appAdminEnterpriseWelfareReqVO)
    customTag.value = false
    Snackbar.success(`${type}成功`)
  }
  finally {
    setTimeout(() => { // 马上获取数据数据会不同步故setTimeout
      getData()
    }, 2000)
  }
}

// 推荐标签
const chipList = ref([])
// 根据类型获取标签信息
const getTagTreeData = async () => { // type: 标签类型-> 0人员画像标签 1职位标签 2招聘职位标签 3企业福利标签 4企业标签 
  const data = await getTagTreeDataApi({ type: 3 })
  chipList.value = data || []
}
getTagTreeData()

// 获取数据
const getData = async () => {
  const data = await getEnterpriseBaseInfo()
  chosen.value = data?.welfareList || []
  // 完成度展示
  emit('complete', { status: Boolean(chosen.value?.length), id: 'welfareLabel' })
}
getData()
const textItem = ref({
  type: 'text',
  width: 250,
  hideDetails: true,
  autofocus: true, // 聚焦。
  value: '',
  label: '请输入自定义标签',
  // appendInnerIcon: 'mdi-content-save-outline',
  appendInnerIcon: 'mdi-checkbox-marked-circle',
  appendInnerClick: appendInnerClick,
})
</script>
<style lang="scss" scoped>
.chip {
  cursor: pointer;
}
</style>