diff --git a/src/views/erp/warehouselocation/WarehouseLocationForm.vue b/src/views/erp/warehouselocation/WarehouseLocationForm.vue
index f2fe9a1d..aa171569 100644
--- a/src/views/erp/warehouselocation/WarehouseLocationForm.vue
+++ b/src/views/erp/warehouselocation/WarehouseLocationForm.vue
@@ -1,113 +1,148 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
-    <el-form
-      ref="formRef"
-      :model="formData"
-      :rules="formRules"
-      label-width="120px"
-      v-loading="formLoading"
-    >
-      <el-form-item :label="t('ErpStock.WarehouseLocation.warehouseId')" prop="warehouseId">
-        <el-select
-          v-model="formData.warehouseId"
-          :placeholder="t('ErpStock.WarehouseLocation.placeholderWarehouseId')"
-          class="!w-1/1"
-          @change="handleWarehouseChange"
-        >
-          <el-option
-            v-for="item in warehouseList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.areaId')" prop="areaId">
-        <el-select
-          v-model="formData.areaId"
-          :placeholder="t('ErpStock.WarehouseLocation.placeholderAreaId')"
-          class="!w-1/1"
-        >
-          <el-option
-            v-for="item in filteredAreaList"
-            :key="item.id"
-            :label="item.areaName"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.code')" prop="code">
-        <el-row :gutter="10" class="!w-full">
-          <el-col :xs="24" :sm="18" :md="16" :lg="14" :xl="12">
-            <el-input v-model="formData.code" :placeholder="t('ErpStock.WarehouseLocation.placeholderCode')" :disabled="formData.isCode == true || formType === 'update'" />
-          </el-col>
-          <el-col :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
-            <div>
-              <el-switch v-model="formData.isCode" :disabled="formType === 'update'" />
-            </div>
-          </el-col>
-        </el-row>
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.name')" prop="name">
-        <el-input v-model="formData.name" :placeholder="t('ErpStock.WarehouseLocation.placeholderName')" />
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.areaSize')" prop="areaSize">
-        <el-input-number
-          v-model="formData.areaSize"
-          :placeholder="t('ErpStock.WarehouseLocation.placeholderAreaSize')"
-          :min="0"
-          :precision="2"
-          class="!w-1/1"
-        />
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.maxLoadWeight')" prop="maxLoadWeight">
-        <el-input-number
-          v-model="formData.maxLoadWeight"
-          :placeholder="t('ErpStock.WarehouseLocation.placeholderMaxLoadWeight')"
-          :min="0"
-          :precision="2"
-          class="!w-1/1"
-        />
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.positionX')" prop="positionX">
-        <el-input-number
-          v-model="formData.positionX"
-          :placeholder="t('ErpStock.WarehouseLocation.placeholderPositionX')"
-          :precision="0"
-          class="!w-1/1"
-        />
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.positionY')" prop="positionY">
-        <el-input-number
-          v-model="formData.positionY"
-          :placeholder="t('ErpStock.WarehouseLocation.placeholderPositionY')"
-          :precision="0"
-          class="!w-1/1"
-        />
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.positionZ')" prop="positionZ">
-        <el-input-number
-          v-model="formData.positionZ"
-          :placeholder="t('ErpStock.WarehouseLocation.placeholderPositionZ')"
-          :precision="0"
-          class="!w-1/1"
-        />
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.allowProductMix')" prop="allowProductMix">
-        <el-switch v-model="formData.allowProductMix" />
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.allowBatchMix')" prop="allowBatchMix">
-        <el-switch v-model="formData.allowBatchMix" />
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.status')" prop="status">
-        <el-switch v-model="formData.status" :active-value="CommonStatusEnum.ENABLE" :inactive-value="CommonStatusEnum.DISABLE" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
+  <div class="warehouse-location-panel">
+    <div class="warehouse-location-panel__header">
+      <div class="warehouse-location-panel__title">{{ dialogTitle }}</div>
+      <el-button text @click="closeForm">
+        <Icon icon="ep:close" />
+      </el-button>
+    </div>
+    <div class="warehouse-location-dialog" v-loading="formLoading">
+      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px">
+        <section class="warehouse-location-section">
+          <div class="warehouse-location-section__title">基本信息</div>
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item :label="t('ErpStock.WarehouseLocation.warehouseId')" prop="warehouseId">
+                <el-select
+                  v-model="formData.warehouseId"
+                  :placeholder="t('ErpStock.WarehouseLocation.placeholderWarehouseId')"
+                  class="!w-full"
+                  @change="handleWarehouseChange"
+                >
+                  <el-option
+                    v-for="item in warehouseList"
+                    :key="item.id"
+                    :label="item.name"
+                    :value="item.id"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('ErpStock.WarehouseLocation.areaId')" prop="areaId">
+                <el-select
+                  v-model="formData.areaId"
+                  :placeholder="t('ErpStock.WarehouseLocation.placeholderAreaId')"
+                  class="!w-full"
+                >
+                  <el-option
+                    v-for="item in filteredAreaList"
+                    :key="item.id"
+                    :label="item.areaName"
+                    :value="item.id"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('ErpStock.WarehouseLocation.code')" prop="code">
+                <el-row :gutter="10" class="!w-full">
+                  <el-col :span="18">
+                    <el-input v-model="formData.code" :placeholder="t('ErpStock.WarehouseLocation.placeholderCode')" :disabled="formData.isCode == true || formType === 'update'" />
+                  </el-col>
+                  <el-col :span="6">
+                    <el-switch v-model="formData.isCode" :disabled="formType === 'update'" />
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item :label="t('ErpStock.WarehouseLocation.name')" prop="name">
+                <el-input v-model="formData.name" :placeholder="t('ErpStock.WarehouseLocation.placeholderName')" class="!w-full" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('ErpStock.WarehouseLocation.areaSize')" prop="areaSize">
+                <el-input-number
+                  v-model="formData.areaSize"
+                  :placeholder="t('ErpStock.WarehouseLocation.placeholderAreaSize')"
+                  :min="0"
+                  :precision="2"
+                  class="!w-full"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('ErpStock.WarehouseLocation.maxLoadWeight')" prop="maxLoadWeight">
+                <el-input-number
+                  v-model="formData.maxLoadWeight"
+                  :placeholder="t('ErpStock.WarehouseLocation.placeholderMaxLoadWeight')"
+                  :min="0"
+                  :precision="2"
+                  class="!w-full"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item :label="t('ErpStock.WarehouseLocation.positionX')" prop="positionX">
+                <el-input-number
+                  v-model="formData.positionX"
+                  :placeholder="t('ErpStock.WarehouseLocation.placeholderPositionX')"
+                  :precision="0"
+                  class="!w-full"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('ErpStock.WarehouseLocation.positionY')" prop="positionY">
+                <el-input-number
+                  v-model="formData.positionY"
+                  :placeholder="t('ErpStock.WarehouseLocation.placeholderPositionY')"
+                  :precision="0"
+                  class="!w-full"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('ErpStock.WarehouseLocation.positionZ')" prop="positionZ">
+                <el-input-number
+                  v-model="formData.positionZ"
+                  :placeholder="t('ErpStock.WarehouseLocation.placeholderPositionZ')"
+                  :precision="0"
+                  class="!w-full"
+                />
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20">
+            <el-col :span="8">
+              <el-form-item :label="t('ErpStock.WarehouseLocation.allowProductMix')" prop="allowProductMix">
+                <el-switch v-model="formData.allowProductMix" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('ErpStock.WarehouseLocation.allowBatchMix')" prop="allowBatchMix">
+                <el-switch v-model="formData.allowBatchMix" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="t('ErpStock.WarehouseLocation.status')" prop="status">
+                <el-switch v-model="formData.status" :active-value="CommonStatusEnum.ENABLE" :inactive-value="CommonStatusEnum.DISABLE" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </section>
+      </el-form>
+    </div>
+    <div class="warehouse-location-footer">
+      <el-button @click="closeForm">{{ t('common.cancel') }}</el-button>
       <el-button @click="submitForm" type="primary" :disabled="formLoading">{{ t('common.ok') }}</el-button>
-      <el-button @click="dialogVisible = false">{{ t('common.cancel') }}</el-button>
-    </template>
-  </Dialog>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -122,7 +157,6 @@ defineOptions({ name: 'WarehouseLocationForm' })
 const { t } = useI18n()
 const message = useMessage()
 
-const dialogVisible = ref(false)
 const dialogTitle = ref('')
 const formLoading = ref(false)
 const formType = ref('')
@@ -164,7 +198,6 @@ const handleWarehouseChange = () => {
 }
 
 const open = async (type: string, id?: number) => {
-  dialogVisible.value = true
   dialogTitle.value = t('action.' + type)
   formType.value = type
   resetForm()
@@ -182,7 +215,7 @@ const open = async (type: string, id?: number) => {
 }
 defineExpose({ open })
 
-const emit = defineEmits(['success'])
+const emit = defineEmits(['success', 'closed'])
 const submitForm = async () => {
   await formRef.value.validate()
   formLoading.value = true
@@ -198,13 +231,17 @@ const submitForm = async () => {
       await WarehouseLocationApi.updateWarehouseLocation(data)
       message.success(t('common.updateSuccess'))
     }
-    dialogVisible.value = false
+    closeForm()
     emit('success')
   } finally {
     formLoading.value = false
   }
 }
 
+const closeForm = () => {
+  emit('closed')
+}
+
 const resetForm = () => {
   formData.value = {
     id: undefined,
@@ -225,3 +262,93 @@ const resetForm = () => {
   formRef.value?.resetFields()
 }
 </script>
+
+<style lang="scss" scoped>
+.warehouse-location-panel {
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: var(--el-box-shadow-light);
+}
+
+.warehouse-location-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.warehouse-location-panel__title {
+  color: #1f2937;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.warehouse-location-dialog {
+  max-height: calc(100vh - 220px);
+  padding: 20px 20px 0;
+  padding-right: 16px;
+  overflow-y: auto;
+}
+
+.warehouse-location-section {
+  margin-bottom: 16px;
+  padding: 16px 18px 8px;
+  background: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 10px;
+  box-shadow: 0 4px 14px rgb(15 23 42 / 4%);
+}
+
+.warehouse-location-section__title {
+  position: relative;
+  margin-bottom: 16px;
+  padding-left: 10px;
+  color: #1f2937;
+  font-size: 15px;
+  font-weight: 600;
+
+  &::before {
+    position: absolute;
+    top: 2px;
+    left: 0;
+    width: 3px;
+    height: 16px;
+    background: var(--el-color-primary);
+    border-radius: 999px;
+    content: '';
+  }
+}
+
+.warehouse-location-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+  width: 100%;
+  padding: 16px 20px 20px;
+  border-top: 1px solid #ebeef5;
+}
+
+@media (max-width: 1200px) {
+  .warehouse-location-dialog :deep(.el-col) {
+    max-width: 100%;
+    flex: 0 0 100%;
+  }
+}
+
+@media (max-width: 768px) {
+  .warehouse-location-panel__header {
+    padding: 14px 16px;
+  }
+
+  .warehouse-location-dialog {
+    max-height: none;
+    padding: 16px 16px 0;
+    overflow-y: visible;
+  }
+
+  .warehouse-location-footer {
+    padding: 16px;
+  }
+}
+</style>
diff --git a/src/views/erp/warehouselocation/index.vue b/src/views/erp/warehouselocation/index.vue
index 147ef28f..817ae239 100644
--- a/src/views/erp/warehouselocation/index.vue
+++ b/src/views/erp/warehouselocation/index.vue
@@ -1,175 +1,179 @@
 <template>
-  <ContentWrap>
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="auto"
-    >
-      <el-form-item :label="t('ErpStock.WarehouseLocation.warehouseId')" prop="warehouseId">
-        <el-select
-          v-model="queryParams.warehouseId"
-          :placeholder="t('ErpStock.WarehouseLocation.placeholderWarehouseId')"
-          clearable
-          class="!w-240px"
-          @change="handleWarehouseChange"
+  <div class="warehouse-location-page">
+    <template v-if="!formVisible">
+      <ContentWrap>
+        <el-form
+          class="-mb-15px"
+          :model="queryParams"
+          ref="queryFormRef"
+          :inline="true"
+          label-width="auto"
         >
-          <el-option
-            v-for="item in warehouseList"
-            :key="item.id"
-            :label="item.name"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.areaId')" prop="areaId">
-        <el-select
-          v-model="queryParams.areaId"
-          :placeholder="t('ErpStock.WarehouseLocation.placeholderAreaId')"
-          clearable
-          class="!w-240px"
+          <el-form-item :label="t('ErpStock.WarehouseLocation.warehouseId')" prop="warehouseId">
+            <el-select
+              v-model="queryParams.warehouseId"
+              :placeholder="t('ErpStock.WarehouseLocation.placeholderWarehouseId')"
+              clearable
+              class="!w-240px"
+              @change="handleWarehouseChange"
+            >
+              <el-option
+                v-for="item in warehouseList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="t('ErpStock.WarehouseLocation.areaId')" prop="areaId">
+            <el-select
+              v-model="queryParams.areaId"
+              :placeholder="t('ErpStock.WarehouseLocation.placeholderAreaId')"
+              clearable
+              class="!w-240px"
+            >
+              <el-option
+                v-for="item in filteredAreaList"
+                :key="item.id"
+                :label="item.areaName"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="t('ErpStock.WarehouseLocation.code')" prop="code">
+            <el-input
+              v-model="queryParams.code"
+              :placeholder="t('ErpStock.WarehouseLocation.placeholderCode')"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item :label="t('ErpStock.WarehouseLocation.name')" prop="name" v-show="showAllFilters">
+            <el-input
+              v-model="queryParams.name"
+              :placeholder="t('ErpStock.WarehouseLocation.placeholderName')"
+              clearable
+              @keyup.enter="handleQuery"
+              class="!w-240px"
+            />
+          </el-form-item>
+          <el-form-item :label="t('ErpStock.WarehouseLocation.status')" prop="status" v-show="showAllFilters">
+            <el-select
+              v-model="queryParams.status"
+              :placeholder="t('ErpStock.WarehouseLocation.placeholderStatus')"
+              clearable
+              class="!w-240px"
+            >
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="filterCount > 3">
+            <el-button type="text" class="text-primary" @click="toggleFilters">
+              <Icon :icon="showAllFilters ? 'ep:arrow-up' : 'ep:arrow-down'" class="mr-5px" />
+              {{ showAllFilters ? t('FactoryModeling.FactoryStructure.collapseText') :
+                t('FactoryModeling.FactoryStructure.expandText') }}
+            </el-button>
+          </el-form-item>
+          <el-form-item>
+            <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> {{ t('common.query') }}</el-button>
+            <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{ t('common.reset') }}</el-button>
+            <el-button
+              type="primary"
+              plain
+              @click="openForm('create')"
+              v-hasPermi="['erp:warehouse-location:create']"
+            >
+              <Icon icon="ep:plus" class="mr-5px" /> {{ t('action.add') }}
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </ContentWrap>
+
+      <ContentWrap>
+        <el-table
+          v-loading="loading"
+          :data="list"
+          :stripe="true"
+          :show-overflow-tooltip="true"
+          row-key="id"
         >
-          <el-option
-            v-for="item in filteredAreaList"
-            :key="item.id"
-            :label="item.areaName"
-            :value="item.id"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.code')" prop="code">
-        <el-input
-          v-model="queryParams.code"
-          :placeholder="t('ErpStock.WarehouseLocation.placeholderCode')"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.name')" prop="name" v-show="showAllFilters">
-        <el-input
-          v-model="queryParams.name"
-          :placeholder="t('ErpStock.WarehouseLocation.placeholderName')"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
+          <el-table-column :label="t('ErpStock.WarehouseLocation.warehouseId')" align="center" prop="warehouseId" sortable>
+            <template #default="scope">
+              {{ getWarehouseName(scope.row.warehouseId) }}
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('ErpStock.WarehouseLocation.areaId')" align="center" prop="areaId" sortable>
+            <template #default="scope">
+              {{ getAreaName(scope.row.areaId) }}
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('ErpStock.WarehouseLocation.code')" align="center" prop="code" sortable />
+          <el-table-column :label="t('ErpStock.WarehouseLocation.name')" align="center" prop="name" sortable />
+          <el-table-column :label="t('ErpStock.WarehouseLocation.areaSize')" align="center" prop="areaSize" />
+          <el-table-column :label="t('ErpStock.WarehouseLocation.maxLoadWeight')" align="center" prop="maxLoadWeight" />
+          <el-table-column :label="t('ErpStock.WarehouseLocation.position')" align="center">
+            <template #default="scope">
+              {{ scope.row.positionX ?? '-' }}, {{ scope.row.positionY ?? '-' }}, {{ scope.row.positionZ ?? '-' }}
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('ErpStock.WarehouseLocation.allowProductMix')" align="center" prop="allowProductMix">
+            <template #default="scope">
+              <el-tag :type="scope.row.allowProductMix ? 'success' : 'danger'" size="small">
+                {{ scope.row.allowProductMix ? t('common.yes') : t('common.no') }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('ErpStock.WarehouseLocation.allowBatchMix')" align="center" prop="allowBatchMix">
+            <template #default="scope">
+              <el-tag :type="scope.row.allowBatchMix ? 'success' : 'danger'" size="small">
+                {{ scope.row.allowBatchMix ? t('common.yes') : t('common.no') }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('ErpStock.WarehouseLocation.status')" align="center" prop="status" sortable>
+            <template #default="scope">
+              <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('ErpStock.WarehouseLocation.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180px" sortable />
+          <el-table-column :label="t('common.operate')" align="center" width="150px">
+            <template #default="scope">
+              <el-button
+                link
+                type="primary"
+                @click="openForm('update', scope.row.id)"
+                v-hasPermi="['erp:warehouse-location:update']"
+              >
+                {{ t('action.edit') }}
+              </el-button>
+              <el-button
+                link
+                type="danger"
+                @click="handleDelete(scope.row.id)"
+                v-hasPermi="['erp:warehouse-location:delete']"
+              >
+                {{ t('action.del') }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <Pagination
+          :total="total"
+          v-model:page="queryParams.pageNo"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getList"
         />
-      </el-form-item>
-      <el-form-item :label="t('ErpStock.WarehouseLocation.status')" prop="status" v-show="showAllFilters">
-        <el-select
-          v-model="queryParams.status"
-          :placeholder="t('ErpStock.WarehouseLocation.placeholderStatus')"
-          clearable
-          class="!w-240px"
-        >
-          <el-option
-            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
-            :key="dict.value"
-            :label="dict.label"
-            :value="dict.value"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item v-if="filterCount > 3">
-        <el-button type="text" class="text-primary" @click="toggleFilters">
-          <Icon :icon="showAllFilters ? 'ep:arrow-up' : 'ep:arrow-down'" class="mr-5px" />
-          {{ showAllFilters ? t('FactoryModeling.FactoryStructure.collapseText') :
-            t('FactoryModeling.FactoryStructure.expandText') }}
-        </el-button>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> {{ t('common.query') }}</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{ t('common.reset') }}</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['erp:warehouse-location:create']"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> {{ t('action.add') }}
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
-
-  <ContentWrap>
-    <el-table
-      v-loading="loading"
-      :data="list"
-      :stripe="true"
-      :show-overflow-tooltip="true"
-      row-key="id"
-    >
-      <el-table-column :label="t('ErpStock.WarehouseLocation.warehouseId')" align="center" prop="warehouseId" sortable>
-        <template #default="scope">
-          {{ getWarehouseName(scope.row.warehouseId) }}
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('ErpStock.WarehouseLocation.areaId')" align="center" prop="areaId" sortable>
-        <template #default="scope">
-          {{ getAreaName(scope.row.areaId) }}
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('ErpStock.WarehouseLocation.code')" align="center" prop="code" sortable />
-      <el-table-column :label="t('ErpStock.WarehouseLocation.name')" align="center" prop="name" sortable />
-      <el-table-column :label="t('ErpStock.WarehouseLocation.areaSize')" align="center" prop="areaSize" />
-      <el-table-column :label="t('ErpStock.WarehouseLocation.maxLoadWeight')" align="center" prop="maxLoadWeight" />
-      <el-table-column :label="t('ErpStock.WarehouseLocation.position')" align="center">
-        <template #default="scope">
-          {{ scope.row.positionX ?? '-' }}, {{ scope.row.positionY ?? '-' }}, {{ scope.row.positionZ ?? '-' }}
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('ErpStock.WarehouseLocation.allowProductMix')" align="center" prop="allowProductMix">
-        <template #default="scope">
-          <el-tag :type="scope.row.allowProductMix ? 'success' : 'danger'" size="small">
-            {{ scope.row.allowProductMix ? t('common.yes') : t('common.no') }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('ErpStock.WarehouseLocation.allowBatchMix')" align="center" prop="allowBatchMix">
-        <template #default="scope">
-          <el-tag :type="scope.row.allowBatchMix ? 'success' : 'danger'" size="small">
-            {{ scope.row.allowBatchMix ? t('common.yes') : t('common.no') }}
-          </el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('ErpStock.WarehouseLocation.status')" align="center" prop="status" sortable>
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('ErpStock.WarehouseLocation.createTime')" align="center" prop="createTime" :formatter="dateFormatter" width="180px" sortable />
-      <el-table-column :label="t('common.operate')" align="center" width="150px">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['erp:warehouse-location:update']"
-          >
-            {{ t('action.edit') }}
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['erp:warehouse-location:delete']"
-          >
-            {{ t('action.del') }}
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
+      </ContentWrap>
+    </template>
 
-  <WarehouseLocationForm ref="formRef" @success="getList" />
+    <WarehouseLocationForm v-else ref="formRef" @success="getList" @closed="formVisible = false" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -206,6 +210,8 @@ const toggleFilters = () => {
 const warehouseList = ref<any[]>([])
 const areaList = ref<any[]>([])
 
+const formVisible = ref(false)
+
 const filteredAreaList = computed(() => {
   if (!queryParams.warehouseId) return areaList.value
   return areaList.value.filter((item) => item.warehouseId === queryParams.warehouseId)
@@ -255,7 +261,10 @@ const resetQuery = () => {
 
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
-  formRef.value.open(type, id)
+  formVisible.value = true
+  nextTick(() => {
+    formRef.value.open(type, id)
+  })
 }
 
 const handleDelete = async (id: number) => {