职业技能编辑

api/resume.js

@@ -159,12 +159,17 @@ export const saveResumeWorkExp = async (data) => {
 //   })
 // }
 
-// // 获取-技能树形
-// export const getSkillTree = async () => {
-//   return await request.get({
-//     url: '/app-api/menduner/system/skill/get/tree'
-//   })
-// }
+// 获取-技能树形
+export const getSkillTree = async () => {
+  return request({
+    url: '/app-api/menduner/system/skill/get/tree',
+    method: 'GET',
+    custom: {
+      showLoading: false,
+      auth: true
+    }
+  })
+}
 
 // 获取-职业技能
 export const getResumePersonSkill = async () => {
@@ -178,20 +183,30 @@ export const getResumePersonSkill = async () => {
   })
 }
 
-// // 删除-职业技能
-// export const deleteResumePersonSkill = async (id) => {
-//   return await request.delete({
-//     url: '/app-api/menduner/system/person/resume/person/skill/remove?id=' + id
-//   })
-// }
+// 删除-职业技能
+export const deleteResumePersonSkill = async (id) => {
+  return request({
+    url: '/app-api/menduner/system/person/resume/person/skill/remove?id=' + id,
+    method: 'DELETE',
+    custom: {
+      auth: true,
+      showLoading: false
+    }
+  })
+}
 
-// // 保存-职业技能
-// export const saveResumePersonSkill = async (data) => {
-//   return await request.post({
-//     url: '/app-api/menduner/system/person/resume/person/skill/save',
-//     data
-//   })
-// }
+// 保存-职业技能
+export const saveResumePersonSkill = async (data) => {
+  return request({
+    url: '/app-api/menduner/system/person/resume/person/skill/save',
+    method: 'POST',
+    data,
+    custom: {
+      showLoading: false,
+      auth: true
+    }
+  })
+}
 
 // 保存求职意向
 export const saveResumeJobInterested = async (data) => {

pages.json

@@ -92,6 +92,12 @@
 						"navigationBarTitleText": "培训经历"
 					}
 				},
+				{
+					"path": "resumeOnline/vocationalSkills",
+					"style": {
+						"navigationBarTitleText": "职业技能"
+					}
+				},
 				{
 					"path": "resume/index",
 					"style": {

pagesA/resumeOnline/index.vue

@@ -217,6 +217,7 @@
           color="#666"
           custom-prefix="iconfont"
           size="18"
+          @tap.stop="handleTo('vocationalSkills')"
         ></uni-icons>
       </view>
       <view class="tags">

pagesA/resumeOnline/vocationalSkills.vue

@@ -1,9 +1,158 @@
-<!--  -->
+<!-- 1职业技能 -->
 <template>
-  <view>职业技能</view>
+  <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: #00897B; border: 2rpx solid #00897B;"
+          @tap="handleDelete(tag.id)"
+        >
+          {{ tag.title }}
+          <uni-icons type="clear" size="16" color="#00897B"></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 #008978;
+    color: #008978;
+    white-space: nowrap;
+    padding: 4rpx 10rpx;
+    border-radius: 10rpx;
+    font-size: 24rpx;
+  }
+}
+:deep(.uni-section .uni-section-header__decoration) {
+  background-color: #00897B !important;
+}
 </style>