menduner-uniapp/pagesA/resumeOnline/vocationalSkills.vue

<!-- 1职业技能 -->
<template>
  <view class="ss-m-x-30 ss-m-y-30">
    <!-- 已选中 -->
    <view class="chose borderLine">
      <view class="choseTitle">当前职业技能</view>
      <view class="tags">
        <view
          v-for="tag in skillExp"
          :key="tag.id"
          class="tag"
          style="color: #00B760; border: 2rpx solid #00B760;"
          @tap="handleDelete(tag.id)"
        >
          {{ tag.title }}
          <uni-icons type="clear" size="16" color="#00B760"></uni-icons>
        </view>
      </view>
    </view>

    <uni-section title="新增" type="line">
      <uni-forms ref="form" :modelValue="formData" :rules="rules" validateTrigger="bind" label-width="90px" class="ss-m-t-50">
        <uni-forms-item label="技能名称" name="skillId" required>
          <uni-data-picker :localdata="skill" v-model="formData.skillId" :map="{ text: 'nameCn', value: 'id' }" placeholder="技能名称" popup-title="请选择技能名称"></uni-data-picker>
        </uni-forms-item>
        <uni-forms-item label="熟练度" name="level" required>
          <uni-data-picker :localdata="skillLevelArr" v-model="formData.level" :map="{ text: 'label', value: 'value' }" placeholder="熟练度" popup-title="请选择熟练度"></uni-data-picker>
        </uni-forms-item>
      </uni-forms>
      <view class="f-horizon-center">
        <button size="default" class="send-button" @click="submit">提 交</button>
      </view>
    </uni-section>
  </view>
</template>

<script setup>
import { ref, unref } from 'vue'
import { saveResumePersonSkill, deleteResumePersonSkill, getResumePersonSkill, getSkillTree } from '@/api/resume.js'
import { getDict } from '@/hooks/useDictionaries'
import { getText } from '@/utils/getText'

let formData = ref({})
const form = ref()
const rules = {
	skillId:{
		rules: [{required: true, errorMessage: '请选择技能名称' }]
	},
	level:{
		rules: [{required: true, errorMessage: '请选择熟练度' }]
	}
}

// 熟练度
const skillLevelArr = ref([])
getDict('menduner_skill_level').then(({ data }) => {
  data = data.data?.length && data.data || []
  skillLevelArr.value = data
})
const skillList = ref([])
getDict('skillList', {}, 'skillList').then(({ data }) => {
  data = data.data?.length && data.data || []
  skillList.value = data
})

// 获取 职业技能选项
const skill = ref([])
const getSkillTreeFunc = async () => {
  const { data } = await getSkillTree()
  skill.value = data || []
}
getSkillTreeFunc()

// 职业技能
const skillExp = ref([])
async function getSkillExpData () {
  const { data } = await getResumePersonSkill()
  if (!data || !data.length) {
    return
  }
  skillExp.value = data.map(e => {
    return {
      ...e,
      title: `${getText(e.skillId, skillList.value, 'nameCn', 'id')} / ${getText(e.level, skillLevelArr.value)}`
    }
  })
}
getSkillExpData()

// 保存
const submit = async () => {
  const valid = await unref(form).validate()
  if (!valid) return
  try {
    await saveResumePersonSkill(formData.value)
    uni.showToast({
			icon: 'success',
			title: '新增成功'
		})
		setTimeout(() => {
      getSkillExpData()
    })
  } catch (err) {
		uni.showToast({
			icon: 'none',
			title: err.msg
		})
	}
}

// 删除
const handleDelete = async (id) => {
	try {
		await deleteResumePersonSkill(id)
		uni.showToast({
			icon: 'success',
			title: '删除成功'
		})
		setTimeout(() => {
			getSkillExpData()
		})
	} catch (err) {
		uni.showToast({
			icon: 'none',
			title: err.msg
		})
	}
}
</script>

<style lang="scss" scoped>
.borderLine {
  border-bottom: 2rpx solid #f5f5f5;
}
.chose {
  margin-bottom: 30rpx;
  .choseTitle {
    margin-bottom: 30rpx;
  }
}
.tags {
  padding: 30rpx 0;
  display: flex;
  flex-wrap: wrap;
  .tag {
    margin: 0 15rpx 12rpx 0;
    border: 2rpx 15rpx #00B760;
    color: #00B760;
    white-space: nowrap;
    padding: 4rpx 10rpx;
    border-radius: 10rpx;
    font-size: 24rpx;
  }
}
:deep(.uni-section .uni-section-header__decoration) {
  background-color: #00B760 !important;
}
</style>