style: 修改仓储管理中库位信息的新增/编辑弹框样式

src/views/erp/warehouselocation/WarehouseLocationForm.vue

@@ -1,17 +1,22 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible">
+  <div class="warehouse-location-panel">
-    <el-form
+    <div class="warehouse-location-panel__header">
-      ref="formRef"
+      <div class="warehouse-location-panel__title">{{ dialogTitle }}</div>
-      :model="formData"
+      <el-button text @click="closeForm">
-      :rules="formRules"
+        <Icon icon="ep:close" />
-      label-width="120px"
+      </el-button>
-      v-loading="formLoading"
+    </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-1/1"
+                  class="!w-full"
                   @change="handleWarehouseChange"
                 >
                   <el-option
@@ -22,11 +27,13 @@
                   />
                 </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-1/1"
+                  class="!w-full"
                 >
                   <el-option
                     v-for="item in filteredAreaList"
@@ -36,78 +43,106 @@
                   />
                 </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 :xs="24" :sm="18" :md="16" :lg="14" :xl="12">
+                  <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 :xs="24" :sm="6" :md="4" :lg="3" :xl="2">
+                  <el-col :span="6">
-            <div>
                     <el-switch v-model="formData.isCode" :disabled="formType === 'update'" />
-            </div>
                   </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')" />
+                <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-1/1"
+                  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-1/1"
+                  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-1/1"
+                  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-1/1"
+                  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-1/1"
+                  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>
-    <template #footer>
+    </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>
+    </div>
-    </template>
+  </div>
-  </Dialog>
 </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>

src/views/erp/warehouselocation/index.vue

@@ -1,4 +1,6 @@
 <template>
+  <div class="warehouse-location-page">
+    <template v-if="!formVisible">
       <ContentWrap>
         <el-form
           class="-mb-15px"
@@ -168,8 +170,10 @@
           @pagination="getList"
         />
       </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) => {
+  formVisible.value = true
+  nextTick(() => {
     formRef.value.open(type, id)
+  })
 }
 
 const handleDelete = async (id: number) => {