uniProject/components/selectZyLevel/index.vue

<template>
	<contentDialogVue ref="commonPopup" @confirm-btn="confirmBtn" title="选择职业">
		<view   style="height: 100vh">
			<!-- 技能块展示 -->
			<view v-for="item in data.list" :key="item.id" class="phone-radio-item"
				:class="{ radioActive: !!item.zyLevelName }" @click="toggleSelect(item)">
				{{ item.name }}
				<view class="radio-item-tag" v-if="!!item.zyLevelName">{{item.zyLevelName[0]}}</view>
			</view>
		</view>
	</contentDialogVue>
	<!-- 弹窗 -->
	<contentDialogVue ref="commonPopup2" type="center" :showBtn="false" title="请选择职业等级">
		<!-- 等级选择 -->
		<view v-for="item in data.zyLevelList" :key="item.id" @click="handleSelectLevelId(item)">
			{{item.name}}
		</view>
	</contentDialogVue>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		getJiazhengZhiye,
		getJiazhengLevel
	} from "@/api/jiazheng.js"
	import contentDialogVue from '@/components/dialog/contentDialog.vue';


	const props = defineProps({
		title: {
			type: String,
			default: ''
		},
		content: {
			type: String,
			require: true,
			default: ''
		},
		dialogContentClass: {
			type: String,
			require: true,
			default: 'content-center-class'
		},
		notBtn: {
			type: String,
			require: true,
			default: '取消'
		},
		okBtn: {
			type: String,
			require: true,
			default: '确认'
		},
		id: {
			type: Number,
		}
	});

	const commonPopup = ref(null);
	const commonPopup2 = ref(null);
	const $emit = defineEmits(['confirm-btn'])

	const data = reactive({
		list: [],
		// item: {
		// 	zyId: null,
		// 	zyName: null,
		// 	zyLevel: null,
		// 	zyLevelName: null
		// }
		activeId: null, // 激活的zyId
		zyLevelList: [],
	})



	// 打开弹窗
	function handleShow(mdata) {
		getZyList(mdata)

	}
	// 取消
	function handleClose() {
		commonPopup.value.handleClose();
	}
	// 确认
	function confirmBtn() {
		$emit('confirm-btn', data.list.filter(item => item.zyLevelName));
	}

	function getZyList(alreadySelect) {
		getJiazhengZhiye({
			id: props.id
		}).then(res => {
			data.list = res.data.map(item => {
				if (alreadySelect) {
					const da1 = alreadySelect.find(ite => ite.zyId == item.id);
					if (da1) {
						return {
							id: item.id,
							name: item.name,
							zyLevel: da1.zyLevel,
							zyLevelName: da1.zyLevelName
						}
					}
				}
				return {
					id: item.id,
					name: item.name,
					zyLevel: null,
					zyLevelName: null
				}
			})
			commonPopup.value.handleShow();
		})
	}

	function toggleSelect(item) {
		if (item.zyLevelName) {
			item.zyLevel = null;
			item.zyLevelName = null
		} else {
			data.activeId = item.id;
			getLevelList(item);
		}
	}

	function getLevelList() {
		getJiazhengLevel({jgId: props.id,zyId: data.activeId}).then(res => {
			data.zyLevelList = res.data;
			commonPopup2.value.handleShow();
		})
	}

	function handleSelectLevelId(item) {
		data.list.map(ite => {
			if (ite.id === data.activeId) {
				ite.zyLevel = item.id;
				ite.zyLevelName = item.name
			}
			return ite;
		})
		commonPopup2.value.handleClose()
	}

	defineExpose({
		handleShow,
		handleClose
	})
</script>

<style scoped>

</style>