合并

src/settings.ts

@@ -11,7 +11,7 @@ const setting: DefaultSettings = {
   /**
    * 侧边栏主题 深色主题theme-dark，浅色主题theme-light
    */
-  sideTheme: 'theme-dark',
+  sideTheme: 'theme-light',
   /**
    * 是否系统布局配置
    */
@@ -20,12 +20,12 @@ const setting: DefaultSettings = {
   /**
    * 是否显示顶部导航
    */
-  topNav: false,
+  topNav: true,
 
   /**
    * 是否显示 tagsView
    */
-  tagsView: true,
+  tagsView: false,
 
   /**
    * 是否固定头部

src/store/modules/app.ts

@@ -6,7 +6,7 @@ export const useAppStore = defineStore('app', () => {
   const sidebar = reactive({
     opened: sidebarStatus.value ? !!+sidebarStatus.value : true,
     withoutAnimation: false,
-    hide: false
+    hide: true
   });
   const device = ref<string>('desktop');
   const size = useStorage<'large' | 'default' | 'small'>('size', 'default');

src/views/materials/usageMaterials/material/index.vue

@@ -1,25 +1,19 @@
 <template>
-  <div class="min-h-screen bg-gray-50 flex flex-col">
+  <div class="p-5">
     <!-- 主要内容区 -->
-    <main class="flex-1 p-6">
+    <el-card class="mb-5">
-      <!-- 操作栏 -->
-      <div class="bg-white rounded-lg shadow-sm p-4 mb-6 transition-all duration-300 hover:shadow-md">
-        <div class="flex flex-wrap items-center justify-between gap-4">
-          <!-- 操作按钮 -->
-          <div class="flex gap-2">
       <el-button icon="Refresh" @click="refreshData" class="transition-all duration-200 hover:shadow-md">
         刷新
       </el-button>
-          </div>
+    </el-card>
-        </div>
-      </div>
 
     <!-- 数据表格 -->
     <div class="bg-white rounded-lg shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md">
       <el-table v-loading="loading" :data="tableData" border stripe
         :header-cell-style="{ 'background-color': '#f5f7fa', 'font-weight': 'bold' }"
+        style="width: 100%; margin-bottom: 20px; height: calc(100vh - 305px)"
         :row-class-name="tableRowClassName">
-          <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
+        <el-table-column prop="id" label="ID" width="180" align="center"></el-table-column>
         <el-table-column prop="name" label="材料名称" min-width="150"></el-table-column>
         <el-table-column prop="specification" label="规格" min-width="120"></el-table-column>
         <el-table-column prop="supplier" label="供应商" min-width="150"></el-table-column>
@@ -67,7 +61,6 @@
           @current-change="handleCurrentChange"></el-pagination>
       </div>
     </div>
-    </main>
     <!-- 新增/编辑对话框 -->
     <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增记录' : '编辑记录'" :width="dialogWidth"
       :fullscreen="isFullscreen" :before-close="handleDialogClose">
@@ -150,24 +143,6 @@
         </div>
       </template>
     </el-dialog>
-    <!-- 删除确认对话框 -->
-    <el-dialog v-model="deleteDialogVisible" title="确认删除" width="300px" :show-close="false">
-      <div class="text-center py-4">
-        <el-icon class="text-orange-500 text-4xl mb-3">
-          <WarningFilled />
-        </el-icon>
-        <p>确定要删除这条记录吗？</p>
-        <p class="text-gray-500 text-sm mt-2">此操作不可撤销，请谨慎操作</p>
-      </div>
-      <template #footer>
-        <div class="flex justify-center gap-2">
-          <el-button @click="deleteDialogVisible = false">取消</el-button>
-          <el-button type="danger" @click="confirmDelete" :loading="deleteLoading">
-            确认删除
-          </el-button>
-        </div>
-      </template>
-    </el-dialog>
   </div>
 </template>
 
@@ -180,7 +155,6 @@ import { useRouter } from 'vue-router';
 const userStore = useUserStoreHook();
 const router = useRouter();
 const currentProject = computed(() => userStore.selectedProject);
-const { proxy } = getCurrentInstance();
 import { useMaterialsQueryList, newMaterialsAdd, materialsEdit, materialsDel, queryMaterialsInfo } from "@/api/materials/usageMaterials/index";
 // 表格数据相关
 const tableData = ref([]);
@@ -195,7 +169,6 @@ const dialogType = ref('add'); // add 或 edit
 const dialogWidth = ref('70%');
 const isFullscreen = ref(false);
 const deleteDialogVisible = ref(false);
-const deleteDialogVisible2 = ref(false);
 const formRef = ref(null);
 const formRef2 = ref(null);
 const saveLoading = ref(false);
@@ -360,7 +333,22 @@ const handleAddSon = (row) => {
 // 删除
 const handleDelete = (row) => {
   currentRow.value = row;
-  deleteDialogVisible.value = true;
+  ElMessageBox.confirm(
+    '确定要删除这条记录吗？此操作不可撤销，请谨慎操作',
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  ).then(() => {
+    confirmDelete();
+  }).catch(() => {
+    ElMessage({
+      type: 'info',
+      message: '已取消删除',
+    })
+  })
 };
 
 
@@ -468,27 +456,4 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* 自定义表格行悬停样式 */
-::v-deep .el-table__row:hover>td {
-  background-color: #f0f7ff !important;
-}
-
-/* 表单间距优化 */
-::v-deep .el-form-item {
-  margin-bottom: 16px;
-}
-
-/* 对话框动画 */
-::v-deep .el-dialog__wrapper {
-  backdrop-filter: blur(2px);
-}
-
-/* 按钮样式优化 */
-::v-deep .el-button--primary {
-  transition: all 0.2s ease;
-}
-
-::v-deep .el-button--primary:hover {
-  transform: translateY(-2px);
-}
 </style>

src/views/materials/usageMaterials/material/indexSon.vue

@@ -1,8 +1,6 @@
 <template>
-    <div class="bg-white rounded-lg shadow-sm p-4 mb-6 transition-all duration-300 hover:shadow-md">
+    <div class="p-5">
-        <div class="flex flex-wrap items-center justify-between gap-4">
+        <el-card class="mb-5">
-            <!-- 操作按钮 -->
-            <div class="flex gap-2">
             <el-button type="primary" icon="Plus" @click="handleAdd"
                 class="transition-all duration-200 hover:shadow-md">
                 新增
@@ -10,17 +8,17 @@
             <el-button icon="Refresh" @click="refreshData" class="transition-all duration-200 hover:shadow-md">
                 刷新
             </el-button>
-            </div>
+        </el-card>
-        </div>
+        <div class="bg-white rounded-lg shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md">
-    </div>
             <!-- 数据表格 -->
-    <el-table v-loading="loading2" :data="tableData" stripe
+            <el-table v-loading="loading" :data="tableData" stripe
                 :header-cell-style="{ 'background-color': '#f5f7fa', 'font-weight': 'bold' }"
-        :row-class-name="tableRowClassName" style="width: 100%">
+                style="width: 100%; margin-bottom: 20px; height: calc(100vh - 305px)"
+                :row-class-name="tableRowClassName">
                 <!-- 基础信息列 -->
-        <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
+                <el-table-column prop="id" label="ID" width="180" align="center"></el-table-column>
-        <el-table-column prop="batch" label="批次" min-width="100"></el-table-column>
+                <el-table-column prop="batch" label="批次" align="center"></el-table-column>
-        <el-table-column prop="physicalsupplyId" label="使用情况ID" width="120" align="center"></el-table-column>
+                <el-table-column prop="physicalsupplyId" label="使用情况ID" width="180" align="center"></el-table-column>
                 <!-- 时间相关列 -->
                 <el-table-column prop="issuanceTime" label="联系单下达时间" min-width="160" align="center">
                     <template #default="scope">
@@ -60,7 +58,8 @@
                         </span>
                     </template>
                 </el-table-column>
-        <el-table-column prop="dhDifferenceQuantity" label="到货差异量" min-width="120" align="right"></el-table-column>
+                <el-table-column prop="dhDifferenceQuantity" label="到货差异量" min-width="120"
+                    align="right"></el-table-column>
 
                 <!-- 金额相关列 -->
                 <el-table-column prop="cargoAmount" label="货物金额" min-width="120" align="right">
@@ -148,7 +147,6 @@
                     </template>
                 </el-table-column>
             </el-table>
-
             <!-- 分页 -->
             <div class="flex flex-wrap items-center justify-between p-4 border-t gap-4">
                 <div class="text-gray-500 text-sm">
@@ -156,28 +154,12 @@
                         Math.min(currentPage * pageSize, total)
                     }} 条
                 </div>
-        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
+                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
-            :total="total" layout="prev, pager, next, jumper, sizes" @size-change="handleSizeChange"
+                    :page-sizes="[10, 20, 50, 100]" :total="total" layout="prev, pager, next, jumper, sizes"
-            @current-change="handleCurrentChange" small></el-pagination>
+                    @size-change="handleSizeChange" @current-change="handleCurrentChange" small></el-pagination>
             </div>
-    <!-- 删除确认对话框 -->
-    <el-dialog v-model="deleteDialogVisible2" title="确认删除" width="300px" :show-close="false">
-        <div class="text-center py-4">
-            <el-icon class="text-orange-500 text-4xl mb-3">
-                <WarningFilled />
-            </el-icon>
-            <p>确定要删除这条记录吗？</p>
-            <p class="text-gray-500 text-sm mt-2">此操作不可撤销，请谨慎操作</p>
         </div>
-        <template #footer>
-            <div class="flex justify-center gap-2">
-                <el-button @click="deleteDialogVisible2 = false">取消</el-button>
-                <el-button type="danger" @click="confirmDelete2" :loading="deleteLoading">
-                    确认删除
-                </el-button>
     </div>
-        </template>
-    </el-dialog>
     <el-dialog v-model="dialogVisible2" :title="dialogType2 === 'addSon' ? '新增采购信息' : '编辑采购信息'" :width="dialogWidth"
         :fullscreen="isFullscreen" :close-on-click-modal="false" :before-close="handleClose" destroy-on-close>
         <!-- 表单内容 -->
@@ -397,7 +379,7 @@ const dialogType2 = ref('addSon'); // add 或 edit
 const deleteDialogVisible2 = ref(false);
 const currentRow2 = ref(null);
 const tableData = ref([]);
-const loading2 = ref(false);
+const loading = ref(false);
 const submitLoading = ref(false);
 const routeParams = ref({})
 const currentPage = ref(1);
@@ -477,9 +459,24 @@ const handleEdit2 = (row) => {
 };
 const handleDelete2 = (row) => {
     currentRow2.value = row;
-    deleteDialogVisible2.value = true;
+    ElMessageBox.confirm(
+        '确定要删除这条记录吗？此操作不可撤销，请谨慎操作',
+        '提示',
+        {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            type: 'warning',
+        }
+    ).then(() => {
+        confirmDelete();
+    }).catch(() => {
+        ElMessage({
+            type: 'info',
+            message: '已取消删除',
+        })
+    })
 };
-const confirmDelete2 = async () => {
+const confirmDelete = async () => {
     if (!currentRow2.value) return;
 
     deleteLoading.value = true;
@@ -540,8 +537,13 @@ const handleSubmit = async () => {
     }
 };
 const materialsUsageDetails1 = () => {
+    loading.value = true;
     materialsUsageDetails({ physicalsupplyId: routeParams.value.id }).then(res => {
         tableData.value = res.rows
+    }).catch(() => {   
+        loading.value = false; 
+    }).finally(() => {  
+        loading.value = false; 
      })
 }
 // 格式化日期

src/views/materials/usageMaterials/purchase/index.vue

@@ -1,40 +1,31 @@
 <template>
-  <div class="min-h-screen bg-gray-50 flex flex-col">
+  <div style="padding: 20px;">
-    <!-- 主要内容区 -->
+    <el-card class="mb-5">
-    <main class="flex-1 p-6">
+      <el-button type="primary" icon="Plus" @click="handleAdd" class="transition-all duration-200 hover:shadow-md">
-      <!-- 操作栏 -->
+        新增
-      <div class="bg-white rounded-lg shadow-sm p-4 mb-6 transition-all duration-300 hover:shadow-md">
+      </el-button>
-        <div class="flex flex-wrap items-center justify-between gap-4">
+      <el-button icon="Refresh" @click="refreshData" class="transition-all duration-200 hover:shadow-md"> 刷新
-          <!-- 操作按钮 -->
+      </el-button>
-          <div class="flex gap-2">
+    </el-card>
-            <el-button type="primary" icon="Plus" @click="handleAdd" class="transition-all duration-200 hover:shadow-md"> 新增 </el-button>
-            <el-button icon="Refresh" @click="refreshData" class="transition-all duration-200 hover:shadow-md"> 刷新 </el-button>
-          </div>
-        </div>
-      </div>
 
     <!-- 数据表格 -->
     <div class="bg-white rounded-lg shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md">
-        <el-table
+      <el-table v-loading="loading" :data="tableData" border stripe
-          v-loading="loading"
+        style="width: 100%; margin-bottom: 20px; height: calc(100vh - 305px)"
-          :data="tableData"
-          border
-          stripe
         :header-cell-style="{ 'background-color': '#f5f7fa', 'font-weight': 'bold' }"
-          :row-class-name="tableRowClassName"
+        :row-class-name="tableRowClassName">
-        >
+        <el-table-column prop="id" label="ID" width="180" align="center"></el-table-column>
-          <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
+        <el-table-column prop="name" label="材料名称" align="center"></el-table-column>
-          <el-table-column prop="name" label="材料名称" min-width="150"></el-table-column>
+        <el-table-column prop="specification" label="规格" align="center"></el-table-column>
-          <el-table-column prop="specification" label="规格" min-width="120"></el-table-column>
+        <el-table-column prop="supplier" label="供应商" align="center"></el-table-column>
-          <el-table-column prop="supplier" label="供应商" min-width="150"></el-table-column>
+        <el-table-column prop="findType" label="类型" align="center">
-          <el-table-column prop="findType" label="类型" width="100" align="center">
           <template #default="scope">
             <el-tag :type="scope.row.findType === '1' ? 'success' : 'info'">
               {{ scope.row.findType === '1' ? '采购' : '材料' }}
             </el-tag>
           </template>
         </el-table-column>
-          <el-table-column prop="installationQuantity" label="安装量" width="100" align="center"></el-table-column>
+        <el-table-column prop="installationQuantity" label="安装量" align="center"></el-table-column>
         <el-table-column prop="contractSigning" label="合同签订时间" width="180" align="center">
           <template #default="scope">
             {{ formatDate(scope.row.contractSigning) }}
@@ -47,30 +38,14 @@
         </el-table-column>
         <el-table-column label="操作" width="240" align="center" fixed="right">
           <template #default="scope">
-              <el-button
+            <el-button size="small" icon="Plus" @click="handleAddSon(scope.row)"
-                size="small"
+              class="text-blue-600 hover:text-blue-800 transition-colors"></el-button>
-                icon="Plus"
+            <el-button size="small" icon="Edit" @click="handleEdit(scope.row)"
-                @click="handleAddSon(scope.row)"
+              class="text-blue-600 hover:text-blue-800 transition-colors"></el-button>
-                class="text-blue-600 hover:text-blue-800 transition-colors"
+            <el-button size="small" icon="View" @click="jumpRouter(scope.row)"
-              ></el-button>
+              class="text-blue-600 hover:text-blue-800 transition-colors"></el-button>
-              <el-button
+            <el-button size="small" icon="Delete" @click="handleDelete(scope.row)"
-                size="small"
+              class="text-red-600 hover:text-red-800 transition-colors"></el-button>
-                icon="Edit"
-                @click="handleEdit(scope.row)"
-                class="text-blue-600 hover:text-blue-800 transition-colors"
-              ></el-button>
-              <el-button
-                size="small"
-                icon="View"
-                @click="jumpRouter(scope.row)"
-                class="text-blue-600 hover:text-blue-800 transition-colors"
-              ></el-button>
-              <el-button
-                size="small"
-                icon="Delete"
-                @click="handleDelete(scope.row)"
-                class="text-red-600 hover:text-red-800 transition-colors"
-              ></el-button>
           </template>
         </el-table-column>
       </el-table>
@@ -78,28 +53,18 @@
       <!-- 分页 -->
       <div class="flex items-center justify-between p-4 border-t">
         <div class="text-gray-500 text-sm">
-            共 {{ total }} 条记录，当前显示第 {{ (currentPage - 1) * pageSize + 1 }} 至 {{ Math.min(currentPage * pageSize, total) }} 条
+          共 {{ total }} 条记录，当前显示第 {{ (currentPage - 1) * pageSize + 1 }} 至 {{ Math.min(currentPage * pageSize, total)
+          }} 条
+        </div>
+        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
+          :total="total" layout="prev, pager, next, jumper, sizes" @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"></el-pagination>
       </div>
-          <el-pagination
-            v-model:current-page="currentPage"
-            v-model:page-size="pageSize"
-            :page-sizes="[10, 20, 50, 100]"
-            :total="total"
-            layout="prev, pager, next, jumper, sizes"
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-          ></el-pagination>
     </div>
   </div>
-    </main>
   <!-- 新增/编辑对话框 -->
-    <el-dialog
+  <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增记录' : '编辑记录'" :width="dialogWidth"
-      v-model="dialogVisible"
+    :fullscreen="isFullscreen" :before-close="handleDialogClose">
-      :title="dialogType === 'add' ? '新增记录' : '编辑记录'"
-      :width="dialogWidth"
-      :fullscreen="isFullscreen"
-      :before-close="handleDialogClose"
-    >
     <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" class="space-y-4">
       <el-row :gutter="20">
         <el-col :span="12">
@@ -143,12 +108,8 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="合同签订时间" prop="contractSigning">
-              <el-date-picker
+            <el-date-picker v-model="formData.contractSigning" type="datetime" placeholder="选择合同签订时间"
-                v-model="formData.contractSigning"
+              value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
-                type="datetime"
-                placeholder="选择合同签订时间"
-                value-format="YYYY-MM-DD HH:mm:ss"
-              ></el-date-picker>
           </el-form-item>
         </el-col>
         <el-col :span="12">
@@ -161,14 +122,14 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item label="供货要求" prop="supplyRequirements">
-              <el-input v-model="formData.supplyRequirements" placeholder="请输入供货要求" type="textarea" rows="3"></el-input>
+            <el-input v-model="formData.supplyRequirements" placeholder="请输入供货要求" type="textarea" :rows="3"></el-input>
           </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="formData.remark" placeholder="请输入备注信息" type="textarea" rows="3"></el-input>
+            <el-input v-model="formData.remark" placeholder="请输入备注信息" type="textarea" :rows="3"></el-input>
           </el-form-item>
         </el-col>
       </el-row>
@@ -181,35 +142,16 @@
       </div>
     </template>
   </el-dialog>
-    <!-- 删除确认对话框 -->
-    <el-dialog v-model="deleteDialogVisible" title="确认删除" width="300px" :show-close="false">
-      <div class="text-center py-4">
-        <el-icon class="text-orange-500 text-4xl mb-3">
-          <WarningFilled />
-        </el-icon>
-        <p>确定要删除这条记录吗？</p>
-        <p class="text-gray-500 text-sm mt-2">此操作不可撤销，请谨慎操作</p>
-      </div>
-      <template #footer>
-        <div class="flex justify-center gap-2">
-          <el-button @click="deleteDialogVisible = false">取消</el-button>
-          <el-button type="danger" @click="confirmDelete" :loading="deleteLoading"> 确认删除 </el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
 </template>
 
 <script setup>
 import { ref, reactive, onMounted, computed, toRaw } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { WarningFilled } from '@element-plus/icons-vue';
 import { useUserStoreHook } from '@/store/modules/user';
 import { useRouter } from 'vue-router';
 const userStore = useUserStoreHook();
 const router = useRouter();
 const currentProject = computed(() => userStore.selectedProject);
-const { proxy } = getCurrentInstance();
 import { useMaterialsQueryList, newMaterialsAdd, materialsEdit, materialsDel, queryMaterialsInfo } from '@/api/materials/usageMaterials/index';
 // 表格数据相关
 const tableData = ref([]);
@@ -230,13 +172,9 @@ const dialogType = ref('add'); // add 或 edit
 const dialogWidth = ref('70%');
 const isFullscreen = ref(false);
 const deleteDialogVisible = ref(false);
-const deleteDialogVisible2 = ref(false);
 const formRef = ref(null);
-const formRef2 = ref(null);
-const saveLoading = ref(false);
 const deleteLoading = ref(false);
 const currentRow = ref(null);
-const submitLoading = ref(false);
 
 // 表单数据
 const formData = reactive({
@@ -306,12 +244,11 @@ const fetchData = async () => {
 
     tableData.value = res.rows;
     total.value = res.total;
-    loading.value = false;
   } catch (error) {
     ElMessage.error('获取数据失败：' + error.message);
     console.error(error);
   } finally {
-    loading.value = false;
+    loading.value = false;//
   }
 };
 
@@ -392,7 +329,22 @@ const handleAddSon = (row) => {
 // 删除
 const handleDelete = (row) => {
   currentRow.value = row;
-  deleteDialogVisible.value = true;
+  ElMessageBox.confirm(
+    '确定要删除这条记录吗？此操作不可撤销，请谨慎操作',
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  ).then(() => {
+    confirmDelete();
+  }).catch(() => {
+    ElMessage({
+      type: 'info',
+      message: '已取消删除',
+    })
+  })
 };
 
 // 确认删除
@@ -475,23 +427,6 @@ const resetForm = () => {
   formData.findType = 1;
   formData.id = '';
 };
-// 重置表单
-const resetForm2 = () => {
-  if (formRef.value) {
-    formRef.value.resetFields();
-  }
-
-  // 重置表单数据
-  Object.keys(form).forEach((key) => {
-    form[key] = '';
-  });
-
-  // 设置默认值
-  form.findType = 1;
-  form.id = '';
-};
-// 提交表单
-
 // 关闭对话框
 const handleDialogClose = () => {
   resetForm();
@@ -515,27 +450,4 @@ onMounted(() => {
 </script>
 
 <style scoped>
-/* 自定义表格行悬停样式 */
-::v-deep .el-table__row:hover > td {
-  background-color: #f0f7ff !important;
-}
-
-/* 表单间距优化 */
-::v-deep .el-form-item {
-  margin-bottom: 16px;
-}
-
-/* 对话框动画 */
-::v-deep .el-dialog__wrapper {
-  backdrop-filter: blur(2px);
-}
-
-/* 按钮样式优化 */
-::v-deep .el-button--primary {
-  transition: all 0.2s ease;
-}
-
-::v-deep .el-button--primary:hover {
-  transform: translateY(-2px);
-}
 </style>

src/views/materials/usageMaterials/purchase/indexSon.vue

@@ -1,8 +1,6 @@
 <template>
-    <div class="bg-white rounded-lg shadow-sm p-4 mb-6 transition-all duration-300 hover:shadow-md">
+    <div class="p-5">
-        <div class="flex flex-wrap items-center justify-between gap-4">
+        <el-card class="mb-5">
-            <!-- 操作按钮 -->
-            <div class="flex gap-2">
             <el-button type="primary" icon="Plus" @click="handleAdd"
                 class="transition-all duration-200 hover:shadow-md">
                 新增
@@ -10,17 +8,17 @@
             <el-button icon="Refresh" @click="refreshData" class="transition-all duration-200 hover:shadow-md">
                 刷新
             </el-button>
-            </div>
+        </el-card>
-        </div>
-    </div>
         <!-- 数据表格 -->
+        <div class="bg-white rounded-lg shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md">
             <el-table v-loading="loading2" :data="tableData" stripe
                 :header-cell-style="{ 'background-color': '#f5f7fa', 'font-weight': 'bold' }"
-        :row-class-name="tableRowClassName" style="width: 100%">
+                style="width: 100%; margin-bottom: 20px; height: calc(100vh - 305px)"
+                :row-class-name="tableRowClassName">
                 <!-- 基础信息列 -->
-        <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
+                <el-table-column prop="id" label="ID" width="180" align="center"></el-table-column>
-        <el-table-column prop="batch" label="批次" min-width="100"></el-table-column>
+                <el-table-column prop="batch" label="批次" align="center"></el-table-column>
-        <el-table-column prop="physicalsupplyId" label="使用情况ID" width="120" align="center"></el-table-column>
+                <el-table-column prop="physicalsupplyId" label="使用情况ID" width="180" align="center"></el-table-column>
                 <!-- 时间相关列 -->
                 <el-table-column prop="issuanceTime" label="联系单下达时间" min-width="160" align="center">
                     <template #default="scope">
@@ -60,7 +58,8 @@
                         </span>
                     </template>
                 </el-table-column>
-        <el-table-column prop="dhDifferenceQuantity" label="到货差异量" min-width="120" align="right"></el-table-column>
+                <el-table-column prop="dhDifferenceQuantity" label="到货差异量" min-width="120"
+                    align="right"></el-table-column>
 
                 <!-- 金额相关列 -->
                 <el-table-column prop="cargoAmount" label="货物金额" min-width="120" align="right">
@@ -148,7 +147,6 @@
                     </template>
                 </el-table-column>
             </el-table>
-
             <!-- 分页 -->
             <div class="flex flex-wrap items-center justify-between p-4 border-t gap-4">
                 <div class="text-gray-500 text-sm">
@@ -156,9 +154,11 @@
                         Math.min(currentPage * pageSize, total)
                     }} 条
                 </div>
-        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
+                <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
-            :total="total" layout="prev, pager, next, jumper, sizes" @size-change="handleSizeChange"
+                    :page-sizes="[10, 20, 50, 100]" :total="total" layout="prev, pager, next, jumper, sizes"
-            @current-change="handleCurrentChange" small></el-pagination>
+                    @size-change="handleSizeChange" @current-change="handleCurrentChange" small></el-pagination>
+            </div>
+        </div>
     </div>
     <!-- 删除确认对话框 -->
     <el-dialog v-model="deleteDialogVisible2" title="确认删除" width="300px" :show-close="false">
@@ -477,7 +477,22 @@ const handleEdit2 = (row) => {
 };
 const handleDelete2 = (row) => {
     currentRow2.value = row;
-    deleteDialogVisible2.value = true;
+    ElMessageBox.confirm(
+        '确定要删除这条记录吗？此操作不可撤销，请谨慎操作',
+        '提示',
+        {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            type: 'warning',
+        }
+    ).then(() => {
+        confirmDelete2();
+    }).catch(() => {
+        ElMessage({
+            type: 'info',
+            message: '已取消删除',
+        })
+    })
 };
 const confirmDelete2 = async () => {
     if (!currentRow2.value) return;