From a7b148bc968af508a107a5baa289f90717fe3268 Mon Sep 17 00:00:00 2001
From: fengsen <2548667232@qq.com>
Date: Fri, 15 Aug 2025 15:21:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=BB=BA=E7=AB=8B=E6=96=B0=E5=88=86=E6=94=AF?=
 =?UTF-8?q?=E5=87=86=E5=A4=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                              |   2 +-
 .../usageMaterials/material/index.vue         | 158 ++++----
 .../usageMaterials/material/indexSon.vue      | 364 ++++++++---------
 .../usageMaterials/purchase/index.vue         | 381 ++++++++----------
 .../usageMaterials/purchase/indexSon.vue      | 337 ++++++++--------
 5 files changed, 591 insertions(+), 651 deletions(-)

diff --git a/.env.development b/.env.development
index 21892b7..fe20df3 100644
--- a/.env.development
+++ b/.env.development
@@ -5,7 +5,7 @@ VITE_APP_TITLE = 新能源项目管理平台
 VITE_APP_ENV = 'development'
 
 # 开发环境
-VITE_APP_BASE_API = 'http://192.168.110.180:8898'
+VITE_APP_BASE_API = 'http://192.168.110.159:8898'
 
 # 无人机接口地址
 
diff --git a/src/views/materials/usageMaterials/material/index.vue b/src/views/materials/usageMaterials/material/index.vue
index 15ec4d5..7edc372 100644
--- a/src/views/materials/usageMaterials/material/index.vue
+++ b/src/views/materials/usageMaterials/material/index.vue
@@ -1,73 +1,66 @@
 <template>
-  <div class="min-h-screen bg-gray-50 flex flex-col">
+  <div class="p-5">
     <!-- 主要内容区 -->
-    <main class="flex-1 p-6">
-      <!-- 操作栏 -->
-      <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>
-        </div>
-      </div>
+    <el-card class="mb-5">
+      <el-button icon="Refresh" @click="refreshData" class="transition-all duration-200 hover:shadow-md">
+        刷新
+      </el-button>
+    </el-card>
 
-      <!-- 数据表格 -->
-      <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' }"
-          :row-class-name="tableRowClassName">
-          <el-table-column prop="id" label="ID" width="80" 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>
-          <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="contractSigning" label="合同签订时间" width="180" align="center">
-            <template #default="scope">
-              {{ formatDate(scope.row.contractSigning) }}
-            </template>
-          </el-table-column>
-          <el-table-column prop="createTime" label="创建时间" width="180" align="center">
-            <template #default="scope">
-              {{ formatDate(scope.row.createTime) }}
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" width="180" align="center" fixed="right">
-            <template #default="scope">
-              <!-- <el-button size="small" icon="Plus" @click="handleAddSon(scope.row)"
+    <!-- 数据表格 -->
+    <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="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>
+        <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="contractSigning" label="合同签订时间" width="180" align="center">
+          <template #default="scope">
+            {{ formatDate(scope.row.contractSigning) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="180" align="center">
+          <template #default="scope">
+            {{ formatDate(scope.row.createTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="180" align="center" fixed="right">
+          <template #default="scope">
+            <!-- <el-button size="small" icon="Plus" @click="handleAddSon(scope.row)"
                 class="text-blue-600 hover:text-blue-800 transition-colors"></el-button> -->
-              <el-button size="small" 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>
+            <el-button size="small" 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>
 
-        <!-- 分页 -->
-        <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)
-            }} 条
-          </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 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)
+          }} 条
         </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>
-    </main>
+    </div>
     <!-- 新增/编辑对话框 -->
     <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);
@@ -339,7 +312,7 @@ const handleAddSon = (row) => {
       type: 'warning',
     }
   ).then(() => {
-    materialsEdit(formData).then(res=>{
+    materialsEdit(formData).then(res => {
       let { code } = res
       if (code === 200) {
         ElMessage({
@@ -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: '已取消删除',
+    })
+  })
 };
 
 
diff --git a/src/views/materials/usageMaterials/material/indexSon.vue b/src/views/materials/usageMaterials/material/indexSon.vue
index 01f63db..9288c74 100644
--- a/src/views/materials/usageMaterials/material/indexSon.vue
+++ b/src/views/materials/usageMaterials/material/indexSon.vue
@@ -1,183 +1,165 @@
 <template>
-    <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 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>
-    <!-- 数据表格 -->
-    <el-table v-loading="loading2" :data="tableData" stripe
-        :header-cell-style="{ 'background-color': '#f5f7fa', 'font-weight': 'bold' }"
-        :row-class-name="tableRowClassName" style="width: 100%">
-        <!-- 基础信息列 -->
-        <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
-        <el-table-column prop="batch" label="批次" min-width="100"></el-table-column>
-        <el-table-column prop="physicalsupplyId" label="使用情况ID" width="120" align="center"></el-table-column>
-        <!-- 时间相关列 -->
-        <el-table-column prop="issuanceTime" label="联系单下达时间" min-width="160" align="center">
-            <template #default="scope">
-                {{ formatDate(scope.row.issuanceTime) }}
-            </template>
-        </el-table-column>
-        <el-table-column prop="requireDelivery" label="要求到货时间" min-width="160" align="center">
-            <template #default="scope">
-                {{ formatDate(scope.row.requireDelivery) }}
-            </template>
-        </el-table-column>
-        <el-table-column prop="scheduledDelivery" label="计划到货时间" min-width="160" align="center">
-            <template #default="scope">
-                {{ formatDate(scope.row.scheduledDelivery) }}
-            </template>
-        </el-table-column>
-        <el-table-column prop="actualDelivery" label="实际到货时间" min-width="160" align="center">
-            <template #default="scope">
-                {{ formatDate(scope.row.actualDelivery) }}
-            </template>
-        </el-table-column>
-        <el-table-column prop="acceptanceCheck" label="验收移交时间" min-width="160" align="center">
-            <template #default="scope">
-                {{ formatDate(scope.row.acceptanceCheck) }}
-            </template>
-        </el-table-column>
-
-        <!-- 数量相关列 -->
-        <el-table-column prop="requiredQuantity" label="要求到货数量" min-width="120" align="right"></el-table-column>
-        <el-table-column prop="plannedQuantity" label="计划到货数量" min-width="120" align="right"></el-table-column>
-        <el-table-column prop="actualAcceptance" label="实际验收数量" min-width="120" align="right"></el-table-column>
-        <el-table-column prop="differenceQuantity" label="差异量" min-width="100" align="right">
-            <template #default="scope">
-                <span
-                    :class="scope.row.differenceQuantity && parseFloat(scope.row.differenceQuantity) !== 0 ? 'text-red-500' : ''">
-                    {{ scope.row.differenceQuantity || '-' }}
-                </span>
-            </template>
-        </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">
-            <template #default="scope">
-                {{ scope.row.cargoAmount }}
-            </template>
-        </el-table-column>
-        <el-table-column prop="advance" label="预付款" min-width="100" align="right">
-            <template #default="scope">
-                {{ scope.row.advance }}
-            </template>
-        </el-table-column>
-        <el-table-column prop="feed" label="投料款" min-width="100" align="right">
-            <template #default="scope">
-                {{ scope.row.feed }}
-            </template>
-        </el-table-column>
-        <el-table-column prop="acceptancePayment" label="到货验收款" min-width="120" align="right">
-            <template #default="scope">
-                {{ scope.row.acceptancePayment }}
-            </template>
-        </el-table-column>
-        <el-table-column prop="debugging" label="调试款" min-width="100" align="right">
-            <template #default="scope">
-                {{ scope.row.debugging }}
-            </template>
-        </el-table-column>
-        <el-table-column prop="qualityGuarantee" label="质保金" min-width="100" align="right">
-            <template #default="scope">
-                {{ scope.row.qualityGuarantee }}
-            </template>
-        </el-table-column>
-        <el-table-column prop="settlementAmount" label="结算金额" min-width="120" align="right">
-            <template #default="scope">
-                {{ scope.row.settlementAmount }}
-            </template>
-        </el-table-column>
-
-        <!-- 状态和备注列 -->
-        <el-table-column prop="expectedState" label="逾期状态" min-width="100" align="center">
-            <template #default="scope">
-                <!-- :type="getTagType(scope.row.expectedState)" -->
-                <el-tag :effect="scope.row.expectedState ? 'dark' : 'plain'">
-                    {{ scope.row.expectedState || '-' }}
-                </el-tag>
-            </template>
-        </el-table-column>
-        <el-table-column prop="associate" label="交接方式" min-width="120"></el-table-column>
-        <el-table-column prop="deliveryRequirements" label="到货要求" min-width="150"></el-table-column>
-        <el-table-column prop="transition" label="转换为合同" min-width="120" align="center">
-            <!-- <template #default="scope"> -->
-            <!-- <el-switch v-model="scope.row.transition" active-value="是" inactive-value="否"
-                                            @change="handleTransitionChange(scope.row)"></el-switch> -->
-            <!-- </template> -->
-        </el-table-column>
-
-        <!-- 备注信息列（可展开） -->
-        <el-table-column label="备注信息" min-width="120">
-            <template #default="scope">
-                <el-popover placement="top" width="300" trigger="click">
-                    <template #reference>
-                        <el-button size="small" type="text">查看详情</el-button>
+    <div class="p-5">
+        <el-card class="mb-5">
+            <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>
+        </el-card>
+        <div class="bg-white rounded-lg shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md">
+            <!-- 数据表格 -->
+            <el-table v-loading="loading" :data="tableData" 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="180" align="center"></el-table-column>
+                <el-table-column prop="batch" label="批次" 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">
+                        {{ formatDate(scope.row.issuanceTime) }}
                     </template>
-                    <div class="space-y-2 text-sm">
-                        <p><span class="font-medium">采购备注：</span>{{ scope.row.cgRemark || '-' }}
-                        </p>
-                        <p><span class="font-medium">到货备注：</span>{{ scope.row.dhRemark || '-' }}
-                        </p>
-                        <p><span class="font-medium">供应商备注：</span>{{ scope.row.gysRemark || '-'
-                            }}</p>
-                        <p><span class="font-medium">结算备注：</span>{{ scope.row.jsRemark || '-' }}
-                        </p>
-                    </div>
-                </el-popover>
-            </template>
-        </el-table-column>
+                </el-table-column>
+                <el-table-column prop="requireDelivery" label="要求到货时间" min-width="160" align="center">
+                    <template #default="scope">
+                        {{ formatDate(scope.row.requireDelivery) }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="scheduledDelivery" label="计划到货时间" min-width="160" align="center">
+                    <template #default="scope">
+                        {{ formatDate(scope.row.scheduledDelivery) }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="actualDelivery" label="实际到货时间" min-width="160" align="center">
+                    <template #default="scope">
+                        {{ formatDate(scope.row.actualDelivery) }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="acceptanceCheck" label="验收移交时间" min-width="160" align="center">
+                    <template #default="scope">
+                        {{ formatDate(scope.row.acceptanceCheck) }}
+                    </template>
+                </el-table-column>
 
-        <!-- 操作列 -->
-        <el-table-column label="操作" min-width="120" align="center" fixed="right">
-            <template #default="scope">
-                <el-button size="small" icon="Edit" @click="handleEdit2(scope.row)"
-                    class="text-blue-600 hover:text-blue-800 transition-colors"></el-button>
-                <el-button size="small" icon="Delete" @click="handleDelete2(scope.row)"
-                    class="text-red-600 hover:text-red-800 transition-colors"></el-button>
-            </template>
-        </el-table-column>
-    </el-table>
+                <!-- 数量相关列 -->
+                <el-table-column prop="requiredQuantity" label="要求到货数量" min-width="120" align="right"></el-table-column>
+                <el-table-column prop="plannedQuantity" label="计划到货数量" min-width="120" align="right"></el-table-column>
+                <el-table-column prop="actualAcceptance" label="实际验收数量" min-width="120" align="right"></el-table-column>
+                <el-table-column prop="differenceQuantity" label="差异量" min-width="100" align="right">
+                    <template #default="scope">
+                        <span
+                            :class="scope.row.differenceQuantity && parseFloat(scope.row.differenceQuantity) !== 0 ? 'text-red-500' : ''">
+                            {{ scope.row.differenceQuantity || '-' }}
+                        </span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="dhDifferenceQuantity" label="到货差异量" min-width="120"
+                    align="right"></el-table-column>
 
-    <!-- 分页 -->
-    <div class="flex flex-wrap items-center justify-between p-4 border-t gap-4">
-        <div class="text-gray-500 text-sm">
-            共 {{ 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" 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>
+                <!-- 金额相关列 -->
+                <el-table-column prop="cargoAmount" label="货物金额" min-width="120" align="right">
+                    <template #default="scope">
+                        {{ scope.row.cargoAmount }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="advance" label="预付款" min-width="100" align="right">
+                    <template #default="scope">
+                        {{ scope.row.advance }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="feed" label="投料款" min-width="100" align="right">
+                    <template #default="scope">
+                        {{ scope.row.feed }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="acceptancePayment" label="到货验收款" min-width="120" align="right">
+                    <template #default="scope">
+                        {{ scope.row.acceptancePayment }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="debugging" label="调试款" min-width="100" align="right">
+                    <template #default="scope">
+                        {{ scope.row.debugging }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="qualityGuarantee" label="质保金" min-width="100" align="right">
+                    <template #default="scope">
+                        {{ scope.row.qualityGuarantee }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="settlementAmount" label="结算金额" min-width="120" align="right">
+                    <template #default="scope">
+                        {{ scope.row.settlementAmount }}
+                    </template>
+                </el-table-column>
+
+                <!-- 状态和备注列 -->
+                <el-table-column prop="expectedState" label="逾期状态" min-width="100" align="center">
+                    <template #default="scope">
+                        <!-- :type="getTagType(scope.row.expectedState)" -->
+                        <el-tag :effect="scope.row.expectedState ? 'dark' : 'plain'">
+                            {{ scope.row.expectedState || '-' }}
+                        </el-tag>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="associate" label="交接方式" min-width="120"></el-table-column>
+                <el-table-column prop="deliveryRequirements" label="到货要求" min-width="150"></el-table-column>
+                <el-table-column prop="transition" label="转换为合同" min-width="120" align="center">
+                    <!-- <template #default="scope"> -->
+                    <!-- <el-switch v-model="scope.row.transition" active-value="是" inactive-value="否"
+                                            @change="handleTransitionChange(scope.row)"></el-switch> -->
+                    <!-- </template> -->
+                </el-table-column>
+
+                <!-- 备注信息列（可展开） -->
+                <el-table-column label="备注信息" min-width="120">
+                    <template #default="scope">
+                        <el-popover placement="top" width="300" trigger="click">
+                            <template #reference>
+                                <el-button size="small" type="text">查看详情</el-button>
+                            </template>
+                            <div class="space-y-2 text-sm">
+                                <p><span class="font-medium">采购备注：</span>{{ scope.row.cgRemark || '-' }}
+                                </p>
+                                <p><span class="font-medium">到货备注：</span>{{ scope.row.dhRemark || '-' }}
+                                </p>
+                                <p><span class="font-medium">供应商备注：</span>{{ scope.row.gysRemark || '-'
+                                }}</p>
+                                <p><span class="font-medium">结算备注：</span>{{ scope.row.jsRemark || '-' }}
+                                </p>
+                            </div>
+                        </el-popover>
+                    </template>
+                </el-table-column>
+
+                <!-- 操作列 -->
+                <el-table-column label="操作" min-width="120" align="center" fixed="right">
+                    <template #default="scope">
+                        <el-button size="small" icon="Edit" @click="handleEdit2(scope.row)"
+                            class="text-blue-600 hover:text-blue-800 transition-colors"></el-button>
+                        <el-button size="small" icon="Delete" @click="handleDelete2(scope.row)"
+                            class="text-red-600 hover:text-red-800 transition-colors"></el-button>
+                    </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">
+                    共 {{ 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" small></el-pagination>
             </div>
-        </template>
-    </el-dialog>
+        </div>
+    </div>
     <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);
@@ -409,7 +391,7 @@ const tableRowClassName = ({ row, rowIndex }) => {
     return rowIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50';
 };
 const form = reactive({
-    id:  '',
+    id: '',
     acceptanceCheck: '',
     acceptancePayment: '',
     actualAcceptance: '',
@@ -441,7 +423,7 @@ const form = reactive({
     updateBy: null,
     updateTime: ''
 });
-const handleAdd = ()=>{
+const handleAdd = () => {
     dialogVisible2.value = true;
     dialogType2.value = 'addSon';
     resetForm();
@@ -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,9 +537,14 @@ 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; 
+     })
 }
 // 格式化日期
 const formatDate = (dateString) => {
diff --git a/src/views/materials/usageMaterials/purchase/index.vue b/src/views/materials/usageMaterials/purchase/index.vue
index 10fffb5..d9c522f 100644
--- a/src/views/materials/usageMaterials/purchase/index.vue
+++ b/src/views/materials/usageMaterials/purchase/index.vue
@@ -1,215 +1,157 @@
 <template>
-  <div class="min-h-screen bg-gray-50 flex flex-col">
-    <!-- 主要内容区 -->
-    <main class="flex-1 p-6">
-      <!-- 操作栏 -->
-      <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 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 style="padding: 20px;">
+    <el-card class="mb-5">
+      <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>
+    </el-card>
+
+    <!-- 数据表格 -->
+    <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
+        style="width: 100%; margin-bottom: 20px; height: calc(100vh - 305px)"
+        :header-cell-style="{ 'background-color': '#f5f7fa', 'font-weight': 'bold' }"
+        :row-class-name="tableRowClassName">
+        <el-table-column prop="id" label="ID" width="180" align="center"></el-table-column>
+        <el-table-column prop="name" label="材料名称" align="center"></el-table-column>
+        <el-table-column prop="specification" label="规格" align="center"></el-table-column>
+        <el-table-column prop="supplier" label="供应商" align="center"></el-table-column>
+        <el-table-column prop="findType" label="类型" 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="安装量" align="center"></el-table-column>
+        <el-table-column prop="contractSigning" label="合同签订时间" width="180" align="center">
+          <template #default="scope">
+            {{ formatDate(scope.row.contractSigning) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间" width="180" align="center">
+          <template #default="scope">
+            {{ formatDate(scope.row.createTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="240" align="center" fixed="right">
+          <template #default="scope">
+            <el-button size="small" icon="Plus" @click="handleAddSon(scope.row)"
+              class="text-blue-600 hover:text-blue-800 transition-colors"></el-button>
+            <el-button size="small" 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>
+
+      <!-- 分页 -->
+      <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)
+          }} 条
         </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 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' }"
-          :row-class-name="tableRowClassName"
-        >
-          <el-table-column prop="id" label="ID" width="80" 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>
-          <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="contractSigning" label="合同签订时间" width="180" align="center">
-            <template #default="scope">
-              {{ formatDate(scope.row.contractSigning) }}
-            </template>
-          </el-table-column>
-          <el-table-column prop="createTime" label="创建时间" width="180" align="center">
-            <template #default="scope">
-              {{ formatDate(scope.row.createTime) }}
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" width="240" align="center" fixed="right">
-            <template #default="scope">
-              <el-button
-                size="small"
-                icon="Plus"
-                @click="handleAddSon(scope.row)"
-                class="text-blue-600 hover:text-blue-800 transition-colors"
-              ></el-button>
-              <el-button
-                size="small"
-                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>
-
-        <!-- 分页 -->
-        <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) }} 条
-          </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
-      v-model="dialogVisible"
-      :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">
-            <el-form-item label="材料名称" prop="name">
-              <el-input v-model="formData.name" placeholder="请输入材料名称"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="规格" prop="specification">
-              <el-input v-model="formData.specification" placeholder="请输入规格"></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="供应商" prop="supplier">
-              <el-input v-model="formData.supplier" placeholder="请输入供应商"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="运算周期(天)" prop="executionCycle">
-              <el-input v-model.number="formData.executionCycle" placeholder="请输入运算周期" type="number"></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="安装量" prop="installationQuantity">
-              <el-input v-model="formData.installationQuantity" placeholder="请输入安装量"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="安装比例" prop="installationRatio">
-              <el-input v-model="formData.installationRatio" placeholder="请输入安装比例" suffix="%"></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <el-row :gutter="20">
-          <el-col :span="12">
-            <el-form-item label="合同签订时间" prop="contractSigning">
-              <el-date-picker
-                v-model="formData.contractSigning"
-                type="datetime"
-                placeholder="选择合同签订时间"
-                value-format="YYYY-MM-DD HH:mm:ss"
-              ></el-date-picker>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="生产周期(天)" prop="productionPhase">
-              <el-input v-model.number="formData.productionPhase" placeholder="请输入生产周期" type="number"></el-input>
-            </el-form-item>
-          </el-col>
-        </el-row>
-
-        <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-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-form-item>
-          </el-col>
-        </el-row>
-      </el-form>
-
-      <template #footer>
-        <div class="flex justify-end gap-2">
-          <el-button @click="dialogVisible = false">取消</el-button>
-          <el-button type="primary" @click="handleSave" :loading="saveLoading"> 保存 </el-button>
-        </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>
   </div>
+  <!-- 新增/编辑对话框 -->
+  <el-dialog v-model="dialogVisible" :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">
+          <el-form-item label="材料名称" prop="name">
+            <el-input v-model="formData.name" placeholder="请输入材料名称"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="规格" prop="specification">
+            <el-input v-model="formData.specification" placeholder="请输入规格"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="供应商" prop="supplier">
+            <el-input v-model="formData.supplier" placeholder="请输入供应商"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="运算周期(天)" prop="executionCycle">
+            <el-input v-model.number="formData.executionCycle" placeholder="请输入运算周期" type="number"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="安装量" prop="installationQuantity">
+            <el-input v-model="formData.installationQuantity" placeholder="请输入安装量"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="安装比例" prop="installationRatio">
+            <el-input v-model="formData.installationRatio" placeholder="请输入安装比例" suffix="%"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="合同签订时间" prop="contractSigning">
+            <el-date-picker v-model="formData.contractSigning" type="datetime" placeholder="选择合同签订时间"
+              value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="生产周期(天)" prop="productionPhase">
+            <el-input v-model.number="formData.productionPhase" placeholder="请输入生产周期" type="number"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <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-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-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <template #footer>
+      <div class="flex justify-end gap-2">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleSave" :loading="saveLoading"> 保存 </el-button>
+      </div>
+    </template>
+  </el-dialog>
 </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();
@@ -516,7 +451,7 @@ onMounted(() => {
 
 <style scoped>
 /* 自定义表格行悬停样式 */
-::v-deep .el-table__row:hover > td {
+::v-deep .el-table__row:hover>td {
   background-color: #f0f7ff !important;
 }
 
diff --git a/src/views/materials/usageMaterials/purchase/indexSon.vue b/src/views/materials/usageMaterials/purchase/indexSon.vue
index 01f63db..2a27c1b 100644
--- a/src/views/materials/usageMaterials/purchase/indexSon.vue
+++ b/src/views/materials/usageMaterials/purchase/indexSon.vue
@@ -1,165 +1,165 @@
 <template>
-    <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 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 class="p-5">
+        <el-card class="mb-5">
+            <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>
+        </el-card>
+        <!-- 数据表格 -->
+        <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' }"
+                style="width: 100%; margin-bottom: 20px; height: calc(100vh - 305px)"
+                :row-class-name="tableRowClassName">
+                <!-- 基础信息列 -->
+                <el-table-column prop="id" label="ID" width="180" align="center"></el-table-column>
+                <el-table-column prop="batch" label="批次" align="center"></el-table-column>
+                <el-table-column prop="physicalsupplyId" label="使用情况ID"  align="center"></el-table-column>
+                <!-- 时间相关列 -->
+                <el-table-column prop="issuanceTime" label="联系单下达时间" min-width="160" align="center">
+                    <template #default="scope">
+                        {{ formatDate(scope.row.issuanceTime) }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="requireDelivery" label="要求到货时间" min-width="160" align="center">
+                    <template #default="scope">
+                        {{ formatDate(scope.row.requireDelivery) }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="scheduledDelivery" label="计划到货时间" min-width="160" align="center">
+                    <template #default="scope">
+                        {{ formatDate(scope.row.scheduledDelivery) }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="actualDelivery" label="实际到货时间" min-width="160" align="center">
+                    <template #default="scope">
+                        {{ formatDate(scope.row.actualDelivery) }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="acceptanceCheck" label="验收移交时间" min-width="160" align="center">
+                    <template #default="scope">
+                        {{ formatDate(scope.row.acceptanceCheck) }}
+                    </template>
+                </el-table-column>
+
+                <!-- 数量相关列 -->
+                <el-table-column prop="requiredQuantity" label="要求到货数量" min-width="120" align="right"></el-table-column>
+                <el-table-column prop="plannedQuantity" label="计划到货数量" min-width="120" align="right"></el-table-column>
+                <el-table-column prop="actualAcceptance" label="实际验收数量" min-width="120" align="right"></el-table-column>
+                <el-table-column prop="differenceQuantity" label="差异量" min-width="100" align="right">
+                    <template #default="scope">
+                        <span
+                            :class="scope.row.differenceQuantity && parseFloat(scope.row.differenceQuantity) !== 0 ? 'text-red-500' : ''">
+                            {{ scope.row.differenceQuantity || '-' }}
+                        </span>
+                    </template>
+                </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">
+                    <template #default="scope">
+                        {{ scope.row.cargoAmount }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="advance" label="预付款" min-width="100" align="right">
+                    <template #default="scope">
+                        {{ scope.row.advance }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="feed" label="投料款" min-width="100" align="right">
+                    <template #default="scope">
+                        {{ scope.row.feed }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="acceptancePayment" label="到货验收款" min-width="120" align="right">
+                    <template #default="scope">
+                        {{ scope.row.acceptancePayment }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="debugging" label="调试款" min-width="100" align="right">
+                    <template #default="scope">
+                        {{ scope.row.debugging }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="qualityGuarantee" label="质保金" min-width="100" align="right">
+                    <template #default="scope">
+                        {{ scope.row.qualityGuarantee }}
+                    </template>
+                </el-table-column>
+                <el-table-column prop="settlementAmount" label="结算金额" min-width="120" align="right">
+                    <template #default="scope">
+                        {{ scope.row.settlementAmount }}
+                    </template>
+                </el-table-column>
+
+                <!-- 状态和备注列 -->
+                <el-table-column prop="expectedState" label="逾期状态" min-width="100" align="center">
+                    <template #default="scope">
+                        <!-- :type="getTagType(scope.row.expectedState)" -->
+                        <el-tag :effect="scope.row.expectedState ? 'dark' : 'plain'">
+                            {{ scope.row.expectedState || '-' }}
+                        </el-tag>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="associate" label="交接方式" min-width="120"></el-table-column>
+                <el-table-column prop="deliveryRequirements" label="到货要求" min-width="150"></el-table-column>
+                <el-table-column prop="transition" label="转换为合同" min-width="120" align="center">
+                    <!-- <template #default="scope"> -->
+                    <!-- <el-switch v-model="scope.row.transition" active-value="是" inactive-value="否"
+                                                @change="handleTransitionChange(scope.row)"></el-switch> -->
+                    <!-- </template> -->
+                </el-table-column>
+
+                <!-- 备注信息列（可展开） -->
+                <el-table-column label="备注信息" min-width="120">
+                    <template #default="scope">
+                        <el-popover placement="top" width="300" trigger="click">
+                            <template #reference>
+                                <el-button size="small" type="text">查看详情</el-button>
+                            </template>
+                            <div class="space-y-2 text-sm">
+                                <p><span class="font-medium">采购备注：</span>{{ scope.row.cgRemark || '-' }}
+                                </p>
+                                <p><span class="font-medium">到货备注：</span>{{ scope.row.dhRemark || '-' }}
+                                </p>
+                                <p><span class="font-medium">供应商备注：</span>{{ scope.row.gysRemark || '-'
+                                }}</p>
+                                <p><span class="font-medium">结算备注：</span>{{ scope.row.jsRemark || '-' }}
+                                </p>
+                            </div>
+                        </el-popover>
+                    </template>
+                </el-table-column>
+
+                <!-- 操作列 -->
+                <el-table-column label="操作" min-width="120" align="center" fixed="right">
+                    <template #default="scope">
+                        <el-button size="small" icon="Edit" @click="handleEdit2(scope.row)"
+                            class="text-blue-600 hover:text-blue-800 transition-colors"></el-button>
+                        <el-button size="small" icon="Delete" @click="handleDelete2(scope.row)"
+                            class="text-red-600 hover:text-red-800 transition-colors"></el-button>
+                    </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">
+                    共 {{ 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" small></el-pagination>
             </div>
         </div>
     </div>
-    <!-- 数据表格 -->
-    <el-table v-loading="loading2" :data="tableData" stripe
-        :header-cell-style="{ 'background-color': '#f5f7fa', 'font-weight': 'bold' }"
-        :row-class-name="tableRowClassName" style="width: 100%">
-        <!-- 基础信息列 -->
-        <el-table-column prop="id" label="ID" width="80" align="center"></el-table-column>
-        <el-table-column prop="batch" label="批次" min-width="100"></el-table-column>
-        <el-table-column prop="physicalsupplyId" label="使用情况ID" width="120" align="center"></el-table-column>
-        <!-- 时间相关列 -->
-        <el-table-column prop="issuanceTime" label="联系单下达时间" min-width="160" align="center">
-            <template #default="scope">
-                {{ formatDate(scope.row.issuanceTime) }}
-            </template>
-        </el-table-column>
-        <el-table-column prop="requireDelivery" label="要求到货时间" min-width="160" align="center">
-            <template #default="scope">
-                {{ formatDate(scope.row.requireDelivery) }}
-            </template>
-        </el-table-column>
-        <el-table-column prop="scheduledDelivery" label="计划到货时间" min-width="160" align="center">
-            <template #default="scope">
-                {{ formatDate(scope.row.scheduledDelivery) }}
-            </template>
-        </el-table-column>
-        <el-table-column prop="actualDelivery" label="实际到货时间" min-width="160" align="center">
-            <template #default="scope">
-                {{ formatDate(scope.row.actualDelivery) }}
-            </template>
-        </el-table-column>
-        <el-table-column prop="acceptanceCheck" label="验收移交时间" min-width="160" align="center">
-            <template #default="scope">
-                {{ formatDate(scope.row.acceptanceCheck) }}
-            </template>
-        </el-table-column>
-
-        <!-- 数量相关列 -->
-        <el-table-column prop="requiredQuantity" label="要求到货数量" min-width="120" align="right"></el-table-column>
-        <el-table-column prop="plannedQuantity" label="计划到货数量" min-width="120" align="right"></el-table-column>
-        <el-table-column prop="actualAcceptance" label="实际验收数量" min-width="120" align="right"></el-table-column>
-        <el-table-column prop="differenceQuantity" label="差异量" min-width="100" align="right">
-            <template #default="scope">
-                <span
-                    :class="scope.row.differenceQuantity && parseFloat(scope.row.differenceQuantity) !== 0 ? 'text-red-500' : ''">
-                    {{ scope.row.differenceQuantity || '-' }}
-                </span>
-            </template>
-        </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">
-            <template #default="scope">
-                {{ scope.row.cargoAmount }}
-            </template>
-        </el-table-column>
-        <el-table-column prop="advance" label="预付款" min-width="100" align="right">
-            <template #default="scope">
-                {{ scope.row.advance }}
-            </template>
-        </el-table-column>
-        <el-table-column prop="feed" label="投料款" min-width="100" align="right">
-            <template #default="scope">
-                {{ scope.row.feed }}
-            </template>
-        </el-table-column>
-        <el-table-column prop="acceptancePayment" label="到货验收款" min-width="120" align="right">
-            <template #default="scope">
-                {{ scope.row.acceptancePayment }}
-            </template>
-        </el-table-column>
-        <el-table-column prop="debugging" label="调试款" min-width="100" align="right">
-            <template #default="scope">
-                {{ scope.row.debugging }}
-            </template>
-        </el-table-column>
-        <el-table-column prop="qualityGuarantee" label="质保金" min-width="100" align="right">
-            <template #default="scope">
-                {{ scope.row.qualityGuarantee }}
-            </template>
-        </el-table-column>
-        <el-table-column prop="settlementAmount" label="结算金额" min-width="120" align="right">
-            <template #default="scope">
-                {{ scope.row.settlementAmount }}
-            </template>
-        </el-table-column>
-
-        <!-- 状态和备注列 -->
-        <el-table-column prop="expectedState" label="逾期状态" min-width="100" align="center">
-            <template #default="scope">
-                <!-- :type="getTagType(scope.row.expectedState)" -->
-                <el-tag :effect="scope.row.expectedState ? 'dark' : 'plain'">
-                    {{ scope.row.expectedState || '-' }}
-                </el-tag>
-            </template>
-        </el-table-column>
-        <el-table-column prop="associate" label="交接方式" min-width="120"></el-table-column>
-        <el-table-column prop="deliveryRequirements" label="到货要求" min-width="150"></el-table-column>
-        <el-table-column prop="transition" label="转换为合同" min-width="120" align="center">
-            <!-- <template #default="scope"> -->
-            <!-- <el-switch v-model="scope.row.transition" active-value="是" inactive-value="否"
-                                            @change="handleTransitionChange(scope.row)"></el-switch> -->
-            <!-- </template> -->
-        </el-table-column>
-
-        <!-- 备注信息列（可展开） -->
-        <el-table-column label="备注信息" min-width="120">
-            <template #default="scope">
-                <el-popover placement="top" width="300" trigger="click">
-                    <template #reference>
-                        <el-button size="small" type="text">查看详情</el-button>
-                    </template>
-                    <div class="space-y-2 text-sm">
-                        <p><span class="font-medium">采购备注：</span>{{ scope.row.cgRemark || '-' }}
-                        </p>
-                        <p><span class="font-medium">到货备注：</span>{{ scope.row.dhRemark || '-' }}
-                        </p>
-                        <p><span class="font-medium">供应商备注：</span>{{ scope.row.gysRemark || '-'
-                            }}</p>
-                        <p><span class="font-medium">结算备注：</span>{{ scope.row.jsRemark || '-' }}
-                        </p>
-                    </div>
-                </el-popover>
-            </template>
-        </el-table-column>
-
-        <!-- 操作列 -->
-        <el-table-column label="操作" min-width="120" align="center" fixed="right">
-            <template #default="scope">
-                <el-button size="small" icon="Edit" @click="handleEdit2(scope.row)"
-                    class="text-blue-600 hover:text-blue-800 transition-colors"></el-button>
-                <el-button size="small" icon="Delete" @click="handleDelete2(scope.row)"
-                    class="text-red-600 hover:text-red-800 transition-colors"></el-button>
-            </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">
-            共 {{ 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" small></el-pagination>
-    </div>
     <!-- 删除确认对话框 -->
     <el-dialog v-model="deleteDialogVisible2" title="确认删除" width="300px" :show-close="false">
         <div class="text-center py-4">
@@ -409,7 +409,7 @@ const tableRowClassName = ({ row, rowIndex }) => {
     return rowIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50';
 };
 const form = reactive({
-    id:  '',
+    id: '',
     acceptanceCheck: '',
     acceptancePayment: '',
     actualAcceptance: '',
@@ -441,7 +441,7 @@ const form = reactive({
     updateBy: null,
     updateTime: ''
 });
-const handleAdd = ()=>{
+const handleAdd = () => {
     dialogVisible2.value = true;
     dialogType2.value = 'addSon';
     resetForm();
@@ -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;