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" @click="handleClose"></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.active }" @click="toggleSelect(item)">
					{{ item.name }}
				</view>
			</view>
			<view class="zydj-popup-btn-box">
				<button type="default" class="phone-green-btn" @click="confirmBtn">保存</button>
			</view>
		</view>
	</contentDialogVue>

</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import {
		getJiazhengZhiye,
	} 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,
		},
		mode: {
			type: String,
			default: 'duoxuan' // danxuan / duoxuan
		}
	});

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

	const data = reactive({
		list: [],
		// item: {
		// 	zyId: null,
		// 	zyName: null,
		//  active: true
		// }
	})



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

	}
	// 取消
	function handleClose() {
		commonPopup.value.handleClose();
	}
	// 确认
	function confirmBtn() {
		$emit('confirm-btn', data.list.filter(item => item.active).map(item => {
      return {
        name: item.name,
        id: item.id,
      }
    }));
		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,
							active: true
						}
					}
				}
				return {
					id: item.id,
					name: item.name,
					active: false
				}
			})
			commonPopup.value.handleShow();
		})
	}

	function toggleSelect(item) {
		item.active = !item.active;
		if (props.mode == 'danxuan') {
      data.list.map(cite => {
				if (cite.id != item.id) {
					cite.active = false;
				}
			})
		}
	}

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

<style scoped>

</style>