vueadmin/src/pages/system/area/components/AreaModal.vue

<template>
	<a-modal :title="titleMap[mode]" :open="visible" :width="500" :destroy-on-close="true" :mask-closable="false"
		:footer="null" @cancel="handleCancel">
		<a-form :model="form" :rules="rules" :disabled="mode === 'show'" ref="dialogForm" :label-col="{ span: 5 }"
			:wrapper-col="{ span: 18 }">
			<a-form-item v-if="mode === 'add'" label="地区编码" name="code">
				<a-input v-model:value="form.code" placeholder="请输入地区编码" allow-clear />
			</a-form-item>
			<a-form-item label="地区名称" name="title">
				<a-input v-model:value="form.title" placeholder="请输入地区名称" allow-clear />
			</a-form-item>
			<a-form-item label="上级地区" name="parent_code">
				<a-tree-select v-model:value="form.parent_code" :tree-data="areaTreeData"
					:field-names="{ label: 'title', value: 'code', children: 'children' }" tree-default-expand-all
					show-search placeholder="请选择上级地区" allow-clear tree-node-filter-prop="title" />
			</a-form-item>
			<a-form-item label="状态" name="status">
				<a-radio-group v-model:value="form.status">
					<a-radio :value="1">正常</a-radio>
					<a-radio :value="0">禁用</a-radio>
				</a-radio-group>
			</a-form-item>
		</a-form>
		<template #footer>
			<a-button @click="handleCancel">取 消</a-button>
			<a-button v-if="mode !== 'show'" type="primary" :loading="isSaveing" @click="submit">保 存</a-button>
		</template>
	</a-modal>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import systemApi from '@/api/system'

const emit = defineEmits(['success', 'closed'])

const mode = ref('add')
const titleMap = {
	add: '新增地区',
	edit: '编辑地区',
	show: '查看地区'
}
const visible = ref(false)
const isSaveing = ref(false)

// 表单数据
const form = reactive({
	id: null,
	code: '',
	title: '',
	parent_code: null,
	status: 1
})

// 表单引用
const dialogForm = ref()

// 验证规则
const rules = {
	code: [
		{ required: true, message: '请输入地区编码', trigger: 'blur' }
	],
	title: [
		{ required: true, message: '请输入地区名称', trigger: 'blur' }
	]
}

// 地区树数据
const areaTreeData = ref([])

// 显示对话框
const open = (openMode = 'add') => {
	mode.value = openMode
	visible.value = true
	if (openMode !== 'show') {
		loadAreaTree()
	}
	return {
		setData,
		open,
		close
	}
}

// 关闭对话框
const close = () => {
	visible.value = false
}

// 处理取消
const handleCancel = () => {
	emit('closed')
	visible.value = false
}

// 加载地区树数据
const loadAreaTree = async () => {
	try {
		const res = await systemApi.area.list.get({ pageSize: 1000 })
		if (res.code === 1) {
			const list = res.data.list || res.data || []
			areaTreeData.value = buildTree(list)
		}
	} catch (error) {
		console.error('加载地区树失败:', error)
	}
}

// 构建树结构
const buildTree = (list) => {
	const map = {}
	const roots = []

	// 创建映射，以 code 作为键
	list.forEach((item) => {
		map[item.code] = { ...item, children: [] }
	})

	// 构建树，通过 parent_code 关联
	list.forEach((item) => {
		if (item.parent_code && map[item.parent_code]) {
			map[item.parent_code].children.push(map[item.code])
		} else if (item.parent_code === '0' || !item.parent_code) {
			roots.push(map[item.code])
		}
	})

	return roots
}

// 表单提交方法
const submit = async () => {
	try {
		await dialogForm.value.validate()
		isSaveing.value = true
		let res = {}
		if (mode.value === 'add') {
			res = await systemApi.area.add.post(form)
		} else {
			res = await systemApi.area.edit.post(form)
		}

		isSaveing.value = false
		if (res.code === 1) {
			emit('success', form, mode.value)
			visible.value = false
			message.success('操作成功')
		} else {
			message.error(res.message || '操作失败')
		}
	} catch (error) {
		isSaveing.value = false
		console.error('表单验证失败', error)
	}
}

// 表单注入数据
const setData = (data) => {
	form.id = data.id
	form.code = data.code
	form.title = data.title
	form.parent_code = data.parent_code
	form.status = data.status ?? 1
}

// 暴露方法给父组件
defineExpose({
	open,
	setData,
	close
})
</script>

<style scoped lang="scss">
// 弹窗样式可根据需要添加
</style>