优化库位和库区管理的仓库选择交互,将下拉选择改为弹窗选择模式,新增库位必填字段验证,调整盘点管理导入功能从列表操作移至详情操作,优化查询条件从ID改为名称模糊查询

src/views/assets/zone/component/editZone.vue

@@ -22,9 +22,11 @@
 			<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-input v-model="warehouseDisplayName" placeholder="请选择仓库" readonly style="width: 100%" @click="onSelectWarehouse">
+							<template #append>
+								<el-button :icon="Search" @click="onSelectWarehouse" />
+							</template>
+						</el-input>
 					</el-form-item>
 				</el-col>
 				<el-col :span="12">
@@ -54,6 +56,7 @@
 			</span>
 		</template>
 	</el-dialog>
+	<SelectWarehouseDialog ref="selectWarehouseRef" @confirm="onWarehouseSelected" />
 </template>
 
 <script lang="ts">
@@ -65,8 +68,10 @@ export default {
 <script setup lang="ts">
 import { ref, reactive } from 'vue';
 import { ElMessage } from 'element-plus';
+import { Search } from '@element-plus/icons-vue';
 import type { FormInstance, FormRules } from 'element-plus';
 import { createZone, updateZone, getZone } from '/@/api/assets/zone';
+import SelectWarehouseDialog from '/@/views/assets/component/selectWarehouseDialog.vue';
 
 // 定义props
 defineProps<{
@@ -84,6 +89,22 @@ const isShowDialog = ref(false);
 const isEdit = ref(false);
 const submitLoading = ref(false);
 
+// 仓库选择弹窗ref
+const selectWarehouseRef = ref();
+// 仓库显示名称
+const warehouseDisplayName = ref('');
+
+// 打开仓库选择弹窗
+const onSelectWarehouse = () => {
+	selectWarehouseRef.value?.openDialog();
+};
+
+// 仓库选择确认
+const onWarehouseSelected = (row: any) => {
+	ruleForm.warehouseId = row.id;
+	warehouseDisplayName.value = row.warehouseName;
+};
+
 // 表单数据
 const ruleForm = reactive({
 	id: '',
@@ -110,6 +131,7 @@ const resetForm = () => {
 	ruleForm.zoneType = '';
 	ruleForm.warehouseId = '';
 	ruleForm.remark = '';
+	warehouseDisplayName.value = '';
 };
 
 // 打开弹窗
@@ -126,6 +148,7 @@ const openDialog = async (row?: any) => {
 			ruleForm.zoneCode = data.zoneCode || '';
 			ruleForm.zoneType = data.zoneType || '';
 			ruleForm.warehouseId = data.warehouseId || '';
+			warehouseDisplayName.value = data.warehouseName || '';
 			ruleForm.remark = data.remark || '';
 		} catch (error) {
 			console.error('获取库区详情失败:', error);

src/views/assets/zone/index.vue

@@ -8,9 +8,7 @@
 							<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-input size="default" v-model="tableData.param.warehouseName" placeholder="请输入仓库名称" clearable style="width: 180px" />
 						</el-form-item>
 						<el-form-item label="状态">
 							<el-select size="default" v-model="tableData.param.status" placeholder="请选择状态" clearable style="width: 120px">
@@ -101,7 +99,7 @@ const tableData = reactive({
 	loading: false,
 	param: {
 		keyword: '',
-		warehouseId: '',
+		warehouseName: '',
 		status: undefined as string | undefined,
 		pageNum: 1,
 		pageSize: 10,
@@ -150,7 +148,7 @@ const getZoneList = async () => {
 // 重置查询
 const onResetQuery = () => {
 	tableData.param.keyword = '';
-	tableData.param.warehouseId = '';
+	tableData.param.warehouseName = '';
 	tableData.param.status = undefined;
 	tableData.param.pageNum = 1;
 	getZoneList();