uniProject/components/selectZyLevel/index.vue

<template>
	<contentDialogVue ref="commonPopup" title="选择职业">
		<view class="phone-zydj-popup">
			<view class="icon-title-navBar-box">
				<view class="nav-bar-icon"></view>
				<text class="nav-bar-title">职业等级</text>
			</view>
			<!-- 技能块展示 -->
			<view class="phone-select-group">
				<view v-for="item in data.list" :key="item.id" class="phone-select-item"
					:class="{ selectActive: !!item.zyLevelName }" @click="toggleSelect(item)">
					{{ item.name }}
					<view class="select-item-tag" v-if="!!item.zyLevelName">{{item.zyLevelName[0]}}</view>
				</view>
			</view>
			<view class="zydj-popup-btn-box">
				<button type="default"  class="phone-green-btn" @click="confirmBtn">保存</button>
			</view>
		</view>
	</contentDialogVue>
	<!-- 弹窗 -->
	<contentDialogVue ref="commonPopup2" type="center" :showBtn="false" title="请选择职业等级">
		<view class="phone-common-dialog">
			<view class="common-body-box">
				<view class="common-title">选择等级</view>
				<!-- 等级选择 -->
				<view class="common-content">
					<view class="dj-select-item" v-for="item in data.zyLevelList" :key="item.id" @click="handleSelectLevelId(item)">
						{{item.name}}
					</view>
				</view>
			</view>
		</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).map(item => {
      item.zyId = item.id;
      return item;
    }));
    handleClose();
	}

	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>