From 23cc5b22f8f6bfa509820b841f1a109a3e9e8c23 Mon Sep 17 00:00:00 2001
From: WUSIJIAN <13825895+wsj0228@user.noreply.gitee.com>
Date: Mon, 26 Jan 2026 17:51:36 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=B5=84=E5=BA=93=E5=8C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/assets/zone/index.ts                 |  67 ++++++
 src/views/assets/zone/component/editZone.vue | 209 +++++++++++++++++++
 src/views/assets/zone/index.vue              | 200 ++++++++++++++++++
 3 files changed, 476 insertions(+)
 create mode 100644 src/api/assets/zone/index.ts
 create mode 100644 src/views/assets/zone/component/editZone.vue
 create mode 100644 src/views/assets/zone/index.vue

diff --git a/src/api/assets/zone/index.ts b/src/api/assets/zone/index.ts
new file mode 100644
index 0000000..d7416de
--- /dev/null
+++ b/src/api/assets/zone/index.ts
@@ -0,0 +1,67 @@
+import { newService } from '/@/utils/request';
+
+// 库区查询参数
+export interface ZoneQueryParams {
+	keyword?: string;
+	warehouseId?: string;
+	status?: string;
+	pageNum?: number;
+	pageSize?: number;
+}
+
+// 库区数据接口
+export interface ZoneData {
+	id?: string;
+	zoneName: string;
+	zoneCode?: string;
+	zoneType?: string;
+	warehouseId: string;
+	capacity?: number;
+	status?: number;
+	remark?: string;
+}
+
+// 获取库区列表
+export function listZones(params?: ZoneQueryParams) {
+	return newService({
+		url: '/assets/zone/listZones',
+		method: 'get',
+		params,
+	});
+}
+
+// 获取库区详情
+export function getZone(id: string) {
+	return newService({
+		url: '/assets/zone/getZone',
+		method: 'get',
+		params: { id },
+	});
+}
+
+// 创建库区
+export function createZone(data: ZoneData) {
+	return newService({
+		url: '/assets/zone/createZone',
+		method: 'post',
+		data,
+	});
+}
+
+// 更新库区
+export function updateZone(data: ZoneData) {
+	return newService({
+		url: '/assets/zone/updateZone',
+		method: 'put',
+		data,
+	});
+}
+
+// 删除库区
+export function deleteZone(id: string) {
+	return newService({
+		url: '/assets/zone/deleteZone',
+		method: 'delete',
+		params: { id },
+	});
+}
diff --git a/src/views/assets/zone/component/editZone.vue b/src/views/assets/zone/component/editZone.vue
new file mode 100644
index 0000000..e6b7be3
--- /dev/null
+++ b/src/views/assets/zone/component/editZone.vue
@@ -0,0 +1,209 @@
+<template>
+	<el-dialog
+		:title="isEdit ? '修改库区' : '新增库区'"
+		v-model="isShowDialog"
+		width="600px"
+		:close-on-click-modal="false"
+		@close="onCancel"
+	>
+		<el-form ref="formRef" :model="ruleForm" :rules="rules" label-width="100px">
+			<el-row :gutter="20">
+				<el-col :span="12">
+					<el-form-item label="库区名称" prop="zoneName">
+						<el-input v-model="ruleForm.zoneName" placeholder="请输入库区名称" clearable />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12">
+					<el-form-item label="库区编码" prop="zoneCode">
+						<el-input v-model="ruleForm.zoneCode" placeholder="请输入库区编码" clearable />
+					</el-form-item>
+				</el-col>
+			</el-row>
+			<el-row :gutter="20">
+				<el-col :span="12">
+					<el-form-item label="所属仓库" prop="warehouseId">
+						<el-select v-model="ruleForm.warehouseId" placeholder="请选择仓库" clearable style="width: 100%">
+							<el-option v-for="item in warehouseOptions" :key="item.id" :label="item.warehouseName" :value="item.id" />
+						</el-select>
+					</el-form-item>
+				</el-col>
+				<el-col :span="12">
+					<el-form-item label="库区类型" prop="zoneType">
+						<el-select v-model="ruleForm.zoneType" placeholder="请选择库区类型" clearable style="width: 100%">
+							<el-option label="存储区" value="存储区" />
+							<el-option label="拣货区" value="拣货区" />
+							<el-option label="暂存区" value="暂存区" />
+							<el-option label="退货区" value="退货区" />
+							<el-option label="发货区" value="发货区" />
+						</el-select>
+					</el-form-item>
+				</el-col>
+			</el-row>
+			<el-row :gutter="20">
+				<el-col :span="12">
+					<el-form-item label="容量" prop="capacity">
+						<el-input-number v-model="ruleForm.capacity" :min="0" placeholder="请输入容量" style="width: 100%" />
+					</el-form-item>
+				</el-col>
+				<el-col :span="12">
+					<el-form-item label="状态" prop="status">
+						<el-radio-group v-model="ruleForm.status">
+							<el-radio :value="1">启用</el-radio>
+							<el-radio :value="0">禁用</el-radio>
+						</el-radio-group>
+					</el-form-item>
+				</el-col>
+			</el-row>
+			<el-row :gutter="20">
+				<el-col :span="24">
+					<el-form-item label="备注" prop="remark">
+						<el-input v-model="ruleForm.remark" type="textarea" :rows="3" placeholder="请输入备注" />
+					</el-form-item>
+				</el-col>
+			</el-row>
+		</el-form>
+		<template #footer>
+			<span class="dialog-footer">
+				<el-button @click="onCancel">取 消</el-button>
+				<el-button type="primary" @click="onSubmit" :loading="submitLoading">{{ isEdit ? '修 改' : '添 加' }}</el-button>
+			</span>
+		</template>
+	</el-dialog>
+</template>
+
+<script lang="ts">
+export default {
+	name: 'editZone',
+};
+</script>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue';
+import { ElMessage } from 'element-plus';
+import type { FormInstance, FormRules } from 'element-plus';
+import { createZone, updateZone, getZone } from '/@/api/assets/zone';
+
+// 定义props
+defineProps<{
+	warehouseOptions: any[];
+}>();
+
+// 定义事件
+const emit = defineEmits(['getZoneList']);
+
+// 表单ref
+const formRef = ref<FormInstance>();
+
+// 弹窗状态
+const isShowDialog = ref(false);
+const isEdit = ref(false);
+const submitLoading = ref(false);
+
+// 表单数据
+const ruleForm = reactive({
+	id: '',
+	zoneName: '',
+	zoneCode: '',
+	zoneType: '',
+	warehouseId: '',
+	capacity: 0,
+	status: 1,
+	remark: '',
+});
+
+// 表单验证规则
+const rules = reactive<FormRules>({
+	zoneName: [{ required: true, message: '请输入库区名称', trigger: 'blur' }],
+	warehouseId: [{ required: true, message: '请选择所属仓库', trigger: 'change' }],
+});
+
+// 重置表单
+const resetForm = () => {
+	ruleForm.id = '';
+	ruleForm.zoneName = '';
+	ruleForm.zoneCode = '';
+	ruleForm.zoneType = '';
+	ruleForm.warehouseId = '';
+	ruleForm.capacity = 0;
+	ruleForm.status = 1;
+	ruleForm.remark = '';
+};
+
+// 打开弹窗
+const openDialog = async (row?: any) => {
+	resetForm();
+	isEdit.value = !!row;
+	
+	if (row) {
+		try {
+			const res: any = await getZone(row.id);
+			const data = res.data;
+			ruleForm.id = data.id || '';
+			ruleForm.zoneName = data.zoneName || '';
+			ruleForm.zoneCode = data.zoneCode || '';
+			ruleForm.zoneType = data.zoneType || '';
+			ruleForm.warehouseId = data.warehouseId || '';
+			ruleForm.capacity = data.capacity || 0;
+			ruleForm.status = (data.status === '1' || data.status === 1 || data.status === true) ? 1 : 0;
+			ruleForm.remark = data.remark || '';
+		} catch (error) {
+			console.error('获取库区详情失败:', error);
+		}
+	}
+	
+	isShowDialog.value = true;
+};
+
+// 取消
+const onCancel = () => {
+	isShowDialog.value = false;
+	formRef.value?.resetFields();
+};
+
+// 提交
+const onSubmit = async () => {
+	const form = formRef.value;
+	if (!form) return;
+	
+	form.validate(async (valid: boolean) => {
+		if (valid) {
+			submitLoading.value = true;
+			try {
+				const data = {
+					id: ruleForm.id || undefined,
+					zoneName: ruleForm.zoneName,
+					zoneCode: ruleForm.zoneCode,
+					zoneType: ruleForm.zoneType,
+					warehouseId: ruleForm.warehouseId,
+					capacity: ruleForm.capacity,
+					status: ruleForm.status,
+					remark: ruleForm.remark,
+				};
+				
+				if (isEdit.value) {
+					await updateZone(data);
+					ElMessage.success('修改成功');
+				} else {
+					await createZone(data);
+					ElMessage.success('添加成功');
+				}
+				
+				isShowDialog.value = false;
+				emit('getZoneList');
+			} catch (error) {
+				console.error('提交失败:', error);
+			} finally {
+				submitLoading.value = false;
+			}
+		}
+	});
+};
+
+// 暴露方法
+defineExpose({
+	openDialog,
+});
+</script>
+
+<style scoped lang="scss">
+</style>
diff --git a/src/views/assets/zone/index.vue b/src/views/assets/zone/index.vue
new file mode 100644
index 0000000..a63ce93
--- /dev/null
+++ b/src/views/assets/zone/index.vue
@@ -0,0 +1,200 @@
+<template>
+	<div class="assets-zone-page">
+		<div class="assets-zone-container">
+			<el-card shadow="hover">
+				<div class="assets-zone-search mb15">
+					<el-form :inline="true" :model="tableData.param">
+						<el-form-item label="库区名称">
+							<el-input size="default" v-model="tableData.param.keyword" placeholder="请输入库区名称" clearable style="width: 200px" />
+						</el-form-item>
+						<el-form-item label="所属仓库">
+							<el-select size="default" v-model="tableData.param.warehouseId" placeholder="请选择仓库" clearable style="width: 180px">
+								<el-option v-for="item in warehouseOptions" :key="item.id" :label="item.warehouseName" :value="item.id" />
+							</el-select>
+						</el-form-item>
+						<el-form-item label="状态">
+							<el-select size="default" v-model="tableData.param.status" placeholder="请选择状态" clearable style="width: 120px">
+								<el-option label="启用" value="1" />
+								<el-option label="禁用" value="0" />
+							</el-select>
+						</el-form-item>
+						<el-form-item>
+							<el-button size="default" type="primary" @click="getZoneList">
+								<el-icon><ele-Search /></el-icon>
+								查询
+							</el-button>
+							<el-button size="default" @click="onResetQuery">
+								<el-icon><ele-Refresh /></el-icon>
+								重置
+							</el-button>
+							<el-button size="default" type="success" @click="onOpenAdd">
+								<el-icon><ele-Plus /></el-icon>
+								新增
+							</el-button>
+						</el-form-item>
+					</el-form>
+				</div>
+				<el-table :data="tableData.data" style="width: 100%" v-loading="tableData.loading" border>
+					<el-table-column type="index" label="序号" width="60" align="center" />
+					<el-table-column prop="zoneName" label="库区名称" min-width="150" show-overflow-tooltip />
+					<el-table-column prop="zoneCode" label="库区编码" width="120" show-overflow-tooltip />
+					<el-table-column prop="zoneType" label="库区类型" width="100" show-overflow-tooltip />
+					<el-table-column prop="warehouseName" label="所属仓库" width="150" show-overflow-tooltip />
+					<el-table-column prop="capacity" label="容量" width="100" align="center" />
+					<el-table-column prop="status" label="状态" width="100" align="center">
+						<template #default="scope">
+							<el-tag :type="scope.row.status == '1' || scope.row.status === 1 ? 'success' : 'danger'">
+								{{ scope.row.status == '1' || scope.row.status === 1 ? '启用' : '禁用' }}
+							</el-tag>
+						</template>
+					</el-table-column>
+					<el-table-column prop="createdAt" label="创建时间" width="170" show-overflow-tooltip />
+					<el-table-column label="操作" width="150" fixed="right" align="center">
+						<template #default="scope">
+							<el-button size="small" text type="primary" @click="onEdit(scope.row)">修改</el-button>
+							<el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
+						</template>
+					</el-table-column>
+				</el-table>
+				<!-- 分页 -->
+				<div class="mt15" style="text-align: right">
+					<el-pagination
+						v-model:current-page="tableData.param.pageNum"
+						v-model:page-size="tableData.param.pageSize"
+						:page-sizes="[10, 20, 50, 100]"
+						:total="tableData.total"
+						layout="total, sizes, prev, pager, next, jumper"
+						@size-change="onSizeChange"
+						@current-change="onCurrentChange"
+					/>
+				</div>
+			</el-card>
+		</div>
+		<EditZone ref="editZoneRef" :warehouseOptions="warehouseOptions" @getZoneList="getZoneList" />
+	</div>
+</template>
+
+<script lang="ts">
+export default {
+	name: 'assetsZone',
+};
+</script>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { listZones, deleteZone } from '/@/api/assets/zone';
+import { listWarehouses } from '/@/api/assets/warehouse';
+import EditZone from './component/editZone.vue';
+
+// 表格数据
+const tableData = reactive({
+	data: [] as any[],
+	total: 0,
+	loading: false,
+	param: {
+		keyword: '',
+		warehouseId: '',
+		status: undefined as string | undefined,
+		pageNum: 1,
+		pageSize: 10,
+	},
+});
+
+// 仓库选项
+const warehouseOptions = ref<any[]>([]);
+
+// 编辑弹窗ref
+const editZoneRef = ref();
+
+// 获取仓库列表
+const getWarehouseOptions = async () => {
+	try {
+		const res: any = await listWarehouses({ pageNum: 1, pageSize: 1000 });
+		warehouseOptions.value = res.data?.list || [];
+	} catch (error) {
+		console.error('获取仓库列表失败:', error);
+	}
+};
+
+// 获取库区列表
+const getZoneList = async () => {
+	tableData.loading = true;
+	try {
+		const res: any = await listZones(tableData.param);
+		tableData.data = res.data?.list || [];
+		tableData.total = res.data?.total || 0;
+	} catch (error) {
+		console.error('获取库区列表失败:', error);
+	} finally {
+		tableData.loading = false;
+	}
+};
+
+// 重置查询
+const onResetQuery = () => {
+	tableData.param.keyword = '';
+	tableData.param.warehouseId = '';
+	tableData.param.status = undefined;
+	tableData.param.pageNum = 1;
+	getZoneList();
+};
+
+// 打开新增弹窗
+const onOpenAdd = () => {
+	editZoneRef.value.openDialog();
+};
+
+// 打开编辑弹窗
+const onEdit = (row: any) => {
+	editZoneRef.value.openDialog(row);
+};
+
+// 删除库区
+const onRowDel = (row: any) => {
+	ElMessageBox.confirm(`确定要删除库区【${row.zoneName}】吗？`, '提示', {
+		confirmButtonText: '确定',
+		cancelButtonText: '取消',
+		type: 'warning',
+	}).then(async () => {
+		try {
+			await deleteZone(row.id);
+			ElMessage.success('删除成功');
+			getZoneList();
+		} catch (error) {
+			console.error('删除失败:', error);
+		}
+	}).catch(() => {});
+};
+
+// 分页大小改变
+const onSizeChange = (size: number) => {
+	tableData.param.pageSize = size;
+	getZoneList();
+};
+
+// 当前页改变
+const onCurrentChange = (page: number) => {
+	tableData.param.pageNum = page;
+	getZoneList();
+};
+
+// 页面加载时获取数据
+onMounted(() => {
+	getWarehouseOptions();
+	getZoneList();
+});
+</script>
+
+<style scoped lang="scss">
+.assets-zone-page {
+	padding: 15px;
+	.assets-zone-container {
+		.assets-zone-search {
+			.el-form-item {
+				margin-bottom: 0;
+			}
+		}
+	}
+}
+</style>