zhjwxt/admin/src/app/views/personnel/components/personnel-edit.vue

<template>
	<el-dialog
		v-model="showDialog"
		:title="formData.id ? t('updatePersonnel') : t('addPersonnel')"
		width="70%"
		class="personnel-edit-dialog"
		:destroy-on-close="true"
		:close-on-click-modal="false"
	>

		<el-tabs v-model="activeTab" class="personnel-tabs">
			<!-- Tab 1: 基本信息 -->
			<el-tab-pane label="基本信息" name="base">
				<div class="tab-content">
					<BaseInfoForm
						ref="baseInfoFormRef"
						:id="formData.id"
					/>
				</div>
			</el-tab-pane>

			<!-- Tab 2: 详情信息 -->
			<el-tab-pane label="详情信息" name="info">
				<div class="tab-content">
					<DetailInfoForm
						ref="detailInfoFormRef"
						:id="formData.id"
					/>
				</div>
			</el-tab-pane>
		</el-tabs>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="showDialog = false">{{ t('cancel') }}</el-button>
					<el-button type="primary" :loading="loading"
						@click="confirm">{{ t('confirm') }}</el-button>
				</span>
			</template>
	</el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { t } from '@/lang'
import {
	addPersonnel,
	editPersonnel,
	getPersonnelInfo,
} from '@/app/api/personnel'
import BaseInfoForm from './BaseInfoForm.vue'
import DetailInfoForm from './DetailInfoForm.vue'

let showDialog = ref(false)
const loading = ref(false)
const activeTab = ref('base')

// 表单组件引用
const baseInfoFormRef = ref()
const detailInfoFormRef = ref()

/**
 * 表单数据
 */
const initialFormData = {
	id: '',
	info: {}
}

const formData: Record<string, any> = reactive({ ...initialFormData })

const emit = defineEmits(['complete'])

/**
 * 确认
 */
const confirm = async () => {
	if (loading.value) return

	// 获取两个表单组件的数据
	const baseInfoValid = await baseInfoFormRef.value?.validateForm()
	const detailInfoValid = await detailInfoFormRef.value?.validateForm()

	if (!baseInfoValid) {
		activeTab.value = 'base'
		return
	}

	loading.value = true

	try {
		// 合并两个表单的数据
		const baseData = baseInfoFormRef.value?.getFormData() || {}
		const detailData = detailInfoFormRef.value?.getFormData() || {}

		const submitData = {
			...baseData,
			...formData,
			info: detailData
		}

		const save = formData.id ? editPersonnel : addPersonnel

		await save(submitData)

		loading.value = false
		showDialog.value = false
		emit('complete')
	} catch (err) {
		loading.value = false
	}
}

/**
 * 设置表单数据
 */
const setFormData = async (row: any = null) => {
	Object.assign(formData, initialFormData)
	loading.value = true

	try {
		if (row) {
			const data = await (await getPersonnelInfo(row.id)).data
			if (data) {
				formData.id = data.id
				// 设置基本信息表单数据
				await baseInfoFormRef.value?.setFormData(data)
				// 设置详情信息表单数据
				await detailInfoFormRef.value?.setFormData(data.info || {})
			}
		} else {
			// 新增时重置表单
			await baseInfoFormRef.value?.setFormData()
			await detailInfoFormRef.value?.setFormData()
		}
	} catch (error) {
		console.error('设置表单数据失败:', error)
	} finally {
		loading.value = false
	}
}

defineExpose({
	showDialog,
	setFormData,
})
</script>

<style lang="scss" scoped>
.personnel-edit-dialog {
	:deep(.el-dialog) {
		border-radius: 8px;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	}

	:deep(.el-dialog__header) {
		padding: 20px 24px 16px;
		border-bottom: 1px solid #f0f0f0;
		background: #fafafa;
		border-radius: 8px 8px 0 0;

		.el-dialog__title {
			font-size: 18px;
			font-weight: 600;
			color: #1f2937;
		}
	}

	:deep(.el-dialog__body) {
		padding: 24px;
		max-height: 70vh;
		overflow-y: auto;
	}

	:deep(.el-dialog__footer) {
		padding: 16px 24px 20px;
		border-top: 1px solid #f0f0f0;
		background: #fafafa;
		border-radius: 0 0 8px 8px;
	}
}

.personnel-tabs {
	:deep(.el-tabs__header) {
		margin-bottom: 24px;
		border-bottom: 2px solid #e5e7eb;

		.el-tabs__nav-wrap {
			&::after {
				display: none;
			}
		}

		.el-tabs__item {
			padding: 12px 24px;
			font-size: 15px;
			font-weight: 500;
			color: #6b7280;
			border-bottom: none;
			transition: all 0.3s ease;

			&:hover {
				color: #3b82f6;
			}

			&.is-active {
				color: #3b82f6;
				background: #eff6ff;
				border: 1px solid #3b82f6;
				border-bottom: 1px solid #eff6ff;
				border-radius: 8px 8px 0 0;
				position: relative;
				top: 2px;
			}
		}
	}

	.tab-content {
		padding: 20px;
		background: #ffffff;
		border: 1px solid #e5e7eb;
		border-radius: 8px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	}
}

.dialog-footer {
	.el-button {
		padding: 10px 24px;
		font-size: 14px;
		font-weight: 500;
		border-radius: 6px;
		transition: all 0.3s ease;

		&:hover {
			transform: translateY(-1px);
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		}
	}
}
</style>

<style lang="scss">
.personnel-edit-dialog .el-form-item__label {
	height: auto !important;
	line-height: 1.6;
}

.personnel-edit-dialog .el-tabs__content {
	overflow: visible;
}

.personnel-edit-dialog .el-dialog__body {
	padding: 24px;
}

// 美化滚动条
.personnel-edit-dialog .el-dialog__body::-webkit-scrollbar {
	width: 6px;
}

.personnel-edit-dialog .el-dialog__body::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 3px;
}

.personnel-edit-dialog .el-dialog__body::-webkit-scrollbar-thumb {
	background: #c1c1c1;
	border-radius: 3px;

	&:hover {
		background: #a8a8a8;
	}
}
</style>