threeonecheck_web/pages/area/management.vue

<template>
	<view class="padding page">
		<!-- 区域列表 -->
		<view class="area-list" v-if="areaList.length > 0">
			<view class="padding bg-white radius margin-bottom" v-for="item in areaList" :key="item.id">
				<view class="flex justify-between">
					<view>
						<view class="text-bold text-black">{{ item.name || '区域名称' }}</view>
						<view class="margin-top flex align-center">
							<text>颜色：</text>
							<view class="color-dot" :style="{ backgroundColor: item.color }"></view>
							<text class="margin-left-xs">{{ item.color }}</text>
						</view>
					</view>
					<view>
						<button class="bg-blue cu-btn" @click="openEditPopup(item)">编辑</button>
						<button class="bg-red cu-btn margin-left" @click="handleDelete(item)">删除</button>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<text class="text-gray">暂无区域数据</text>
		</view>
		
		<!-- 新增按钮 -->
		<button class="add-btn cuIcon-add bg-blue round" @click="openAddPopup">新增公司区域</button>
		
		<!-- 新增/编辑弹窗组件 -->
		<AreaFormPopup 
			v-model:visible="showPopup"
			:isEdit="isEdit"
			:editData="editData"
			:loading="submitting"
			@submit="handleSubmit"
			@close="handlePopupClose"
		/>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import AreaFormPopup from '@/components/AreaFormPopup.vue';
import { 
	getAreaList, 
	getAreaDetail, 
	addArea, 
	updateArea, 
	deleteArea 
} from '@/request/three_one_api/area.js';

// 区域列表
const areaList = ref([]);

// 弹窗控制
const showPopup = ref(false);
const isEdit = ref(false);
const currentEditId = ref(null);
const submitting = ref(false);

// 编辑时的数据
const editData = ref({});

// 页面加载
onMounted(() => {
	loadAreaList();
});

// 加载区域列表
const loadAreaList = async () => {
	try {
		const res = await getAreaList();
		if (res.code === 0) {
			areaList.value = res.data.records || [];
		}
	} catch (err) {
		console.error('获取区域列表失败:', err);
	}
};

// 打开新增弹窗
const openAddPopup = () => {
	isEdit.value = false;
	currentEditId.value = null;
	editData.value = {};
	showPopup.value = true;
};

// 打开编辑弹窗
const openEditPopup = async (item) => {
	try {
		const res = await getAreaDetail({ id: item.id });
		if (res.code === 0) {
			isEdit.value = true;
			currentEditId.value = item.id;
			editData.value = {
				name: res.data.name || '',
				color: res.data.color || '#FF5733'
			};
			showPopup.value = true;
		}
	} catch (err) {
		console.error('获取区域详情失败:', err);
		uni.showToast({ title: '获取详情失败', icon: 'none' });
	}
};

// 弹窗关闭
const handlePopupClose = () => {
	isEdit.value = false;
	currentEditId.value = null;
	editData.value = {};
};

// 提交表单
const handleSubmit = async (formData) => {
	submitting.value = true;
	
	try {
		const submitData = {
			name: formData.name,
			color: formData.color
		};
		
		let res;
		if (isEdit.value) {
			submitData.id = currentEditId.value;
			res = await updateArea(submitData);
		} else {
			res = await addArea(submitData);
		}
		
		if (res.code === 0) {
			showPopup.value = false;
			uni.showToast({ 
				title: isEdit.value ? '修改成功' : '新增成功', 
				icon: 'success' 
			});
			loadAreaList();
		}
	} catch (err) {
		console.error('提交失败:', err);
		uni.showToast({ title: '操作失败', icon: 'none' });
	} finally {
		submitting.value = false;
	}
};

// 删除区域
const handleDelete = (item) => {
	uni.showModal({
		title: '确认删除',
		content: '确定要删除该区域吗？',
		confirmColor: '#e54d42',
		success: async (res) => {
			if (res.confirm) {
				try {
					const result = await deleteArea({ id: item.id });
					if (result.code === 0) {
						uni.showToast({ title: '删除成功', icon: 'success' });
						loadAreaList();
					}
				} catch (err) {
					console.error('删除失败:', err);
					uni.showToast({ title: '删除失败', icon: 'none' });
				}
			}
		}
	});
};
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background: #EBF2FC;
	padding-bottom: 120rpx;
}

// 区域列表
.area-list {
	padding-bottom: 20rpx;
}

// 空状态
.empty-state {
	padding: 200rpx 0;
	text-align: center;
}

// 新增按钮
.add-btn {
	position: fixed;
	bottom: 40rpx;
	left: 30rpx;
	right: 30rpx;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 44rpx;
	font-size: 32rpx;
}

// 颜色圆点
.color-dot {
	width: 30rpx;
	height: 30rpx;
	border-radius: 6rpx;
	flex-shrink: 0;
	margin-left: 10rpx;
}
</style>