物资使用计划

src/api/materials/overallPlanMaterialSupply/index.ts

@@ -32,3 +32,5 @@ export const materialChangeSupplyplan = (data: any): AxiosPromise => {
     data
   });
 };
+
+

src/api/materials/usageMaterials/index.ts

@@ -39,3 +39,43 @@ export const queryMaterialsInfo = (id: any): AxiosPromise => {
         method: 'get',
     });
 };
+
+
+// 查询物资子数据列表
+export const materialsUsageDetails = (query: any): AxiosPromise => {
+    return request({
+        url: '/cailiaoshebei/physicalsupplySon/list',
+        method: 'get',
+        params: query
+    });
+};
+// 获取物资-使用情况子数据详细信息
+export const materialsSonDetails = (id: any): AxiosPromise => {
+    return request({
+        url: '/cailiaoshebei/physicalsupplySon/' + id,
+        method: 'get',
+    });
+};
+// 新增物资-使用情况子数据
+export const materialsSonAdd = (data: any): AxiosPromise => {
+    return request({
+        url: '/cailiaoshebei/physicalsupplySon',
+        method: 'post',
+        data
+    });
+};
+//修改物资-使用情况子数据
+export const materialsSonEdit = (data: any): AxiosPromise => {
+    return request({
+        url: '/cailiaoshebei/physicalsupplySon',
+        method: 'put',
+        data
+    });
+};
+//   删除物资-使用情况子数据
+export const materialsSonDel = (id: any): AxiosPromise => {
+    return request({
+        url: '/cailiaoshebei/physicalsupplySon/' + id,
+        method: 'delete',
+    });
+};

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

@@ -5,44 +5,9 @@
       <!-- 操作栏 -->
       <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 flex-wrap items-center gap-4">
-            <el-select 
-              v-model="searchForm.findType" 
-              placeholder="选择查询类型" 
-              class="w-[180px]"
-              @change="handleSearch"
-            >
-              <el-option label="采购" value="1"></el-option>
-              <el-option label="材料" value="2"></el-option>
-              <el-option label="查询所有" value="3"></el-option>
-            </el-select>
-            <el-input
-              v-model="searchForm.keyword"
-              placeholder="输入材料名称或供应商搜索"
-              class="w-[250px]"
-              clearable
-              @keyup.enter="handleSearch"
-            >
-              <template #append>
-                <el-button icon="Search" @click="handleSearch"></el-button>
-              </template>
-            </el-input>
-          </div> -->
           <!-- 操作按钮 -->
           <div class="flex gap-2">
-            <el-button 
+            <el-button icon="Refresh" @click="refreshData" class="transition-all duration-200 hover:shadow-md">
-              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>
@@ -51,25 +16,14 @@
 
       <!-- 数据表格 -->
       <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"
-          :data="tableData"
-          border
-          stripe
           :header-cell-style="{ 'background-color': '#f5f7fa', 'font-weight': 'bold' }"
-          :row-class-name="tableRowClassName"
+          :row-class-name="tableRowClassName">
-          @row-dblclick="handleRowDblClick"
-        >
           <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 
+          <el-table-column prop="findType" label="类型" width="100" align="center">
-            prop="findType" 
-            label="类型" 
-            width="100" 
-            align="center"
-          >
             <template #default="scope">
               <el-tag :type="scope.row.findType === '1' ? 'success' : 'info'">
                 {{ scope.row.findType === '1' ? '采购' : '材料' }}
@@ -77,45 +31,26 @@
             </template>
           </el-table-column>
           <el-table-column prop="installationQuantity" label="安装量" width="100" align="center"></el-table-column>
-          <el-table-column 
+          <el-table-column prop="contractSigning" label="合同签订时间" width="180" align="center">
-            prop="contractSigning" 
-            label="合同签订时间" 
-            width="180" 
-            align="center"
-          >
             <template #default="scope">
               {{ formatDate(scope.row.contractSigning) }}
             </template>
           </el-table-column>
-          <el-table-column 
+          <el-table-column prop="createTime" label="创建时间" width="180" align="center">
-            prop="createTime" 
-            label="创建时间" 
-            width="180" 
-            align="center"
-          >
             <template #default="scope">
               {{ formatDate(scope.row.createTime) }}
             </template>
           </el-table-column>
-          <el-table-column 
+          <el-table-column label="操作" width="180" align="center" fixed="right">
-            label="操作" 
-            width="180" 
-            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="Edit" 
+              <el-button size="small" icon="Edit" @click="handleEdit(scope.row)"
-                @click="handleEdit(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="Delete" 
-                @click="handleDelete(scope.row)"
-                class="text-red-600 hover:text-red-800 transition-colors"
-              ></el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -123,41 +58,20 @@
         <!-- 分页 -->
         <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
+          <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
-            v-model:current-page="currentPage"
+            :total="total" layout="prev, pager, next, jumper, sizes" @size-change="handleSizeChange"
-            v-model:page-size="pageSize"
+            @current-change="handleCurrentChange"></el-pagination>
-            :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>
-
-    <!-- 底部信息 -->
-    <footer class="bg-white border-t border-gray-200 py-3 px-6 text-center text-gray-500 text-sm">
-      © 2023 材料/采购管理系统 - 版权所有
-    </footer>
-
     <!-- 新增/编辑对话框 -->
-    <el-dialog
+    <el-dialog v-model="dialogVisible" :title="dialogType === 'add' ? '新增记录' : '编辑记录'" :width="dialogWidth"
-      v-model="dialogVisible"
+      :fullscreen="isFullscreen" :before-close="handleDialogClose">
-      :title="dialogType === 'add' ? '新增记录' : '编辑记录'"
+      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" class="space-y-4">
-      :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">
@@ -178,11 +92,8 @@
             </el-form-item>
           </el-col>
           <el-col :span="12">
-            <el-form-item label="类型" prop="findType">
+            <el-form-item label="运算周期(天)" prop="executionCycle">
-              <el-radio-group v-model="formData.findType">
+              <el-input v-model.number="formData.executionCycle" placeholder="请输入运算周期" type="number"></el-input>
-                <el-radio label="1">采购</el-radio>
-                <el-radio label="2">材料</el-radio>
-              </el-radio-group>
             </el-form-item>
           </el-col>
         </el-row>
@@ -203,12 +114,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">
@@ -218,109 +125,44 @@
           </el-col>
         </el-row>
 
-        <el-row :gutter="20">
-          <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-col :span="12">
-            <el-form-item label="项目ID" prop="projectId">
-              <el-input v-model.number="formData.projectId" placeholder="请输入项目ID" 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
+              <el-input v-model="formData.supplyRequirements" placeholder="请输入供货要求" type="textarea" rows="3"></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="12">
-            <el-form-item label="采购提交状态" prop="purchaseSubmission">
-              <el-select v-model="formData.purchaseSubmission" placeholder="请选择">
-                <el-option label="已提交" value="已提交"></el-option>
-                <el-option label="未提交" value="未提交"></el-option>
-                <el-option label="处理中" value="处理中"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="材料提交状态" prop="submissionMaterials">
-              <el-select v-model="formData.submissionMaterials" placeholder="请选择">
-                <el-option label="已提交" value="已提交"></el-option>
-                <el-option label="未提交" value="未提交"></el-option>
-                <el-option label="处理中" value="处理中"></el-option>
-              </el-select>
-            </el-form-item>
-          </el-col>
-        </el-row>
-
         <el-row :gutter="20">
           <el-col :span="24">
             <el-form-item label="备注" prop="remark">
-              <el-input
+              <el-input v-model="formData.remark" placeholder="请输入备注信息" type="textarea" rows="3"></el-input>
-                v-model="formData.remark"
-                placeholder="请输入备注信息"
-                type="textarea"
-                rows="3"
-              ></el-input>
             </el-form-item>
           </el-col>
         </el-row>
-
-        <!-- 隐藏的创建和更新信息 -->
-        <el-form-item prop="id" class="hidden">
-          <el-input v-model="formData.id"></el-input>
-        </el-form-item>
-        <el-form-item prop="createTime" class="hidden">
-          <el-input v-model="formData.createTime"></el-input>
-        </el-form-item>
       </el-form>
 
       <template #footer>
         <div class="flex justify-end gap-2">
           <el-button @click="dialogVisible = false">取消</el-button>
-          <el-button 
+          <el-button type="primary" @click="handleSave" :loading="saveLoading">
-            type="primary" 
-            @click="handleSave"
-            :loading="saveLoading"
-          >
             保存
           </el-button>
         </div>
       </template>
     </el-dialog>
-
     <!-- 删除确认对话框 -->
-    <el-dialog
+    <el-dialog v-model="deleteDialogVisible" title="确认删除" width="300px" :show-close="false">
-      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>
+        <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 
+          <el-button type="danger" @click="confirmDelete" :loading="deleteLoading">
-            type="danger" 
-            @click="confirmDelete"
-            :loading="deleteLoading"
-          >
             确认删除
           </el-button>
         </div>
@@ -334,7 +176,9 @@ 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";
@@ -345,22 +189,19 @@ const currentPage = ref(1);
 const pageSize = ref(10);
 const loading = ref(false);
 
-// 搜索表单
-const searchForm = reactive({
-  findType: '3', // 默认查询所有
-  keyword: ''
-});
-
 // 对话框相关
 const dialogVisible = ref(false);
 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({
@@ -368,16 +209,16 @@ const formData = reactive({
   name: '',
   specification: '',
   supplier: '',
-  findType: '1', // 默认采购
+  findType: 2, // 默认采购
   installationQuantity: '',
   installationRatio: '',
   contractSigning: '',
   productionPhase: null,
   executionCycle: null,
-  projectId: null,
+  projectId: currentProject.value?.id,
   supplyRequirements: '',
-  purchaseSubmission: '',
+  //   purchaseSubmission: '',
-  submissionMaterials: '',
+  //   submissionMaterials: '',
   remark: '',
   createTime: '',
   createBy: null,
@@ -400,10 +241,7 @@ const formRules = reactive({
   ]
 });
 
-// 初始化页面
+
-onMounted(() => {
-  fetchData();
-});
 
 // 格式化日期
 const formatDate = (dateString) => {
@@ -491,18 +329,41 @@ const handleEdit = (row) => {
 
   dialogVisible.value = true;
 };
-
+const handleAddSon = (row) => {
-// 双击行编辑
+  ElMessageBox.confirm(
-const handleRowDblClick = (row) => {
+    '确认提交',
-  handleEdit(row);
+    'Warning',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  ).then(() => {
+    materialsEdit(formData).then(res=>{
+      let { code } = res
+      if (code === 200) {
+        ElMessage({
+          type: 'success',
+          message: '提交成功',
+        })
+      }
+    })
+  }).catch(() => {
+    ElMessage({
+      type: 'info',
+      message: '已取消提交',
+    })
+  })
 };
 
+
 // 删除
 const handleDelete = (row) => {
   currentRow.value = row;
   deleteDialogVisible.value = true;
 };
 
+
 // 确认删除
 const confirmDelete = async () => {
   if (!currentRow.value) return;
@@ -510,14 +371,15 @@ const confirmDelete = async () => {
   deleteLoading.value = true;
   try {
     // 模拟API请求
-    await new Promise(resolve => setTimeout(resolve, 500));
+    const res = await materialsDel(currentRow.value.id)
-    
+    const { code } = res;
-    // 从表格中移除数据
+    if (code === 200) {
-    tableData.value = tableData.value.filter(item => item.id !== currentRow.value.id);
-    total.value--;
-    
-    deleteDialogVisible.value = false;
       ElMessage.success('删除成功');
+      deleteDialogVisible.value = false;
+      fetchData();
+    } else {
+      ElMessage.error('删除失败');
+    }
   } catch (error) {
     ElMessage.error('删除失败：' + error.message);
     console.error(error);
@@ -525,6 +387,9 @@ const confirmDelete = async () => {
     deleteLoading.value = false;
   }
 };
+// 
+
+
 
 // 保存
 const handleSave = async () => {
@@ -532,38 +397,25 @@ const handleSave = async () => {
   if (!formRef.value) return;
   const valid = await formRef.value.validate();
   if (!valid) return;
-  
   saveLoading.value = true;
   try {
     // 模拟API请求
-    await new Promise(resolve => setTimeout(resolve, 800));
-    
-    const form = toRaw(formData);
-    
     if (dialogType.value === 'add') {
       // 新增
-      const newId = Math.max(...tableData.value.map(item => item.id), 0) + 1;
+      formData.projectId = currentProject.value?.id;
-      const newItem = {
+      const res = await newMaterialsAdd(formData)
-        ...form,
+      let { code } = res
-        id: newId,
+      if (code === 200) {
-        createTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
-        createBy: 1, // 假设当前用户ID为1
-        updateTime: null,
-        updateBy: null
-      };
-      tableData.value.unshift(newItem);
-      total.value++;
         ElMessage.success('新增成功');
+        fetchData();
+      }
     } else {
       // 编辑
-      const index = tableData.value.findIndex(item => item.id === form.id);
+      const res = await materialsEdit(formData)
-      if (index !== -1) {
+      let { code } = res
-        tableData.value[index] = {
+      if (code === 200) {
-          ...form,
+        ElMessage.success('保存成功');
-          updateTime: new Date().toISOString().slice(0, 19).replace('T', ' '),
+        fetchData();
-          updateBy: 1 // 假设当前用户ID为1
-        };
-        ElMessage.success('更新成功');
       }
     }
 
@@ -588,7 +440,7 @@ const resetForm = () => {
   });
 
   // 设置默认值
-  formData.findType = '1';
+  formData.findType = 2;
   formData.id = '';
 };
 
@@ -597,6 +449,22 @@ const handleDialogClose = () => {
   resetForm();
   dialogVisible.value = false;
 };
+
+// 跳转
+const jumpRouter = (row) => {
+  router.push({
+    path: `/materials/usageMaterials/materialSon`,
+    query: {
+      id: row.id,
+      type: 'update'
+    }
+  });
+};
+// 初始化页面
+onMounted(() => {
+  fetchData();
+});
+
 </script>
 
 <style scoped>

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

@@ -0,0 +1,575 @@
+<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>
+                    </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">
+            <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>
+        <!-- 表单内容 -->
+        <el-form ref="formRef" :model="form" :rules="formRules" label-width="140px" class="space-y-4">
+            <!-- 第一行 -->
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="批次" prop="batch">
+                        <el-input v-model="form.batch" placeholder="请输入批次信息"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="联系单下达时间" prop="issuanceTime">
+                        <el-date-picker v-model="form.issuanceTime" type="datetime" placeholder="选择联系单下达时间"
+                            value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 第二行 -->
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="要求到货数量" prop="requiredQuantity">
+                        <el-input v-model="form.requiredQuantity" placeholder="请输入要求到货数量"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="要求到货时间" prop="requireDelivery">
+                        <el-date-picker v-model="form.requireDelivery" type="datetime" placeholder="选择要求到货时间"
+                            value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 第三行 -->
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="计划到货数量" prop="plannedQuantity">
+                        <el-input v-model="form.plannedQuantity" placeholder="请输入计划到货数量"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="计划到货时间" prop="scheduledDelivery">
+                        <el-date-picker v-model="form.scheduledDelivery" type="datetime" placeholder="选择计划到货时间"
+                            value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 第四行 -->
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="实际到货验收数量" prop="actualAcceptance">
+                        <el-input v-model="form.actualAcceptance" placeholder="请输入实际到货验收数量"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="实际到货时间" prop="actualDelivery">
+                        <el-date-picker v-model="form.actualDelivery" type="datetime" placeholder="选择实际到货时间"
+                            value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 第五行 -->
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="差异量" prop="differenceQuantity">
+                        <el-input v-model="form.differenceQuantity" placeholder="请输入差异量"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="到货差异量" prop="dhDifferenceQuantity">
+                        <el-input v-model="form.dhDifferenceQuantity" placeholder="请输入到货差异量"></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 第六行 -->
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="验收移交时间" prop="acceptanceCheck">
+                        <el-date-picker v-model="form.acceptanceCheck" 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="expectedState">
+                        <el-select v-model="form.expectedState" placeholder="请选择逾期状态">
+                            <el-option label="未逾期" value="未逾期"></el-option>
+                            <el-option label="已逾期" value="已逾期"></el-option>
+                            <el-option label="即将逾期" value="即将逾期"></el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 第七行 - 金额信息 -->
+            <el-row :gutter="20">
+                <el-col :span="6">
+                    <el-form-item label="货物金额" prop="cargoAmount">
+                        <el-input v-model="form.cargoAmount" placeholder="0.00" prefix="¥"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="预付款" prop="advance">
+                        <el-input v-model="form.advance" placeholder="0.00" prefix="¥"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="投料款" prop="feed">
+                        <el-input v-model="form.feed" placeholder="0.00" prefix="¥"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="到货验收款" prop="acceptancePayment">
+                        <el-input v-model="form.acceptancePayment" placeholder="0.00" prefix="¥"></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 第八行 - 金额信息 -->
+            <el-row :gutter="20">
+                <el-col :span="8">
+                    <el-form-item label="调试款" prop="debugging">
+                        <el-input v-model="form.debugging" placeholder="0.00" prefix="¥"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="质保金" prop="qualityGuarantee">
+                        <el-input v-model="form.qualityGuarantee" placeholder="0.00" prefix="¥"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="结算金额" prop="settlementAmount">
+                        <el-input v-model="form.settlementAmount" placeholder="0.00" prefix="¥"></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 第九行 -->
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="交接方式" prop="associate">
+                        <el-input v-model="form.associate" placeholder="请输入交接方式"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="转换为合同" prop="transition">
+                        <el-select v-model="form.transition" placeholder="请选择是否转换为合同">
+                            <el-option label="是" value="是"></el-option>
+                            <el-option label="否" value="否"></el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 第十行 -->
+            <el-row :gutter="20">
+                <el-col :span="24">
+                    <el-form-item label="到货要求" prop="deliveryRequirements">
+                        <el-input v-model="form.deliveryRequirements" placeholder="请输入到货要求" type="textarea"
+                            rows="3"></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 第十一行 - 备注信息 -->
+            <el-row :gutter="20">
+                <el-col :span="8">
+                    <el-form-item label="采购备注" prop="cgRemark">
+                        <el-input v-model="form.cgRemark" placeholder="请输入采购备注" type="textarea" rows="4"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="到货备注" prop="dhRemark">
+                        <el-input v-model="form.dhRemark" placeholder="请输入到货备注" type="textarea" rows="4"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="供应商备注" prop="gysRemark">
+                        <el-input v-model="form.gysRemark" placeholder="请输入供应商备注" type="textarea" rows="4"></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 第十二行 -->
+            <el-row :gutter="20">
+                <el-col :span="24">
+                    <el-form-item label="结算备注" prop="jsRemark">
+                        <el-input v-model="form.jsRemark" placeholder="请输入结算备注" type="textarea" rows="3"></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+        <!-- 底部按钮 -->
+        <template #footer>
+            <div class="flex justify-end gap-3">
+                <el-button @click="handleCancel" class="transition-all duration-200">
+                    取消
+                </el-button>
+                <el-button type="primary" @click="handleSubmit" :loading="submitLoading"
+                    class="transition-all duration-200">
+                    {{ dialogType2 === 'addSon' ? '新增' : '保存' }}
+                </el-button>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+<script setup>
+import { ref, reactive, onMounted, toRaw, getCurrentInstance } from 'vue';
+import { materialsUsageDetails, materialsSonAdd, materialsSonDel, materialsSonEdit } from "@/api/materials/usageMaterials/index";
+import { routerRename } from '@/api/air';
+const { proxy } = getCurrentInstance();
+const dialogVisible2 = ref(false);
+const dialogType2 = ref('addSon'); // add 或 edit
+const deleteDialogVisible2 = ref(false);
+const currentRow2 = ref(null);
+const tableData = ref([]);
+const loading2 = ref(false);
+const submitLoading = ref(false);
+const routeParams = ref({})
+const currentPage = ref(1);
+const total = ref(0);
+const pageSize = ref(10);
+const formRef = ref(null);
+const deleteLoading = ref(false);
+const tableRowClassName = ({ row, rowIndex }) => {
+    return rowIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50';
+};
+const form = reactive({
+    id:  '',
+    acceptanceCheck: '',
+    acceptancePayment: '',
+    actualAcceptance: '',
+    actualDelivery: '',
+    advance: '',
+    associate: '',
+    batch: '',
+    cargoAmount: '',
+    cgRemark: '',
+    createTime: '',
+    debugging: '',
+    deliveryRequirements: '',
+    dhDifferenceQuantity: '',
+    dhRemark: '',
+    differenceQuantity: '',
+    expectedState: '',
+    feed: '',
+    gysRemark: '',
+    issuanceTime: '',
+    jsRemark: '',
+    physicalsupplyId: null,
+    plannedQuantity: '',
+    qualityGuarantee: '',
+    requireDelivery: '',
+    requiredQuantity: '',
+    scheduledDelivery: '',
+    settlementAmount: '',
+    transition: '',
+    updateBy: null,
+    updateTime: ''
+});
+const handleAdd = ()=>{
+    dialogVisible2.value = true;
+    dialogType2.value = 'addSon';
+    resetForm();
+}
+const resetForm = () => {
+    if (formRef.value) {
+        formRef.value.resetFields();
+    }
+
+    // 重置表单数据
+    Object.keys(form).forEach(key => {
+        form[key] = '';
+    });
+
+    // 设置默认值
+    form.findType = 1;
+    form.id = '';
+};
+
+const handleEdit2 = (row) => {
+    dialogType2.value = 'editSon';
+    currentRow2.value = row;
+    resetForm();
+
+    // 填充表单数据
+    Object.keys(form).forEach(key => {
+        if (row.hasOwnProperty(key)) {
+            form[key] = row[key];
+        }
+    });
+
+    dialogVisible2.value = true;
+};
+const handleDelete2 = (row) => {
+    currentRow2.value = row;
+    deleteDialogVisible2.value = true;
+};
+const confirmDelete2 = async () => {
+    if (!currentRow2.value) return;
+
+    deleteLoading.value = true;
+    try {
+        // 模拟API请求
+        const res = await materialsSonDel(currentRow2.value.id)
+        const { code } = res;
+        if (code === 200) {
+            ElMessage.success('删除成功');
+            deleteDialogVisible2.value = false;
+            materialsUsageDetails1();
+        } else {
+            ElMessage.error('删除失败');
+        }
+    } catch (error) {
+        ElMessage.error('删除失败：' + error.message);
+        console.error(error);
+    } finally {
+        deleteLoading.value = false;
+    }
+};
+const handleSubmit = async () => {
+    if (!formRef.value) return;
+    // 表单验证
+    const valid = await formRef.value.validate();
+    if (!valid) return;
+
+    submitLoading.value = true;
+
+    try {
+        // 准备提交的数据
+        const submitData = { ...toRaw(form) };
+
+        // 如果是新增，清除id
+        if (dialogType2.value === 'addSon') {
+            submitData.physicalsupplyId = routeParams.value.id
+            const res = await materialsSonAdd(submitData)
+            const { code } = res;
+            if (code === 200) {
+                ElMessage.success('新增成功');
+                materialsUsageDetails1();
+            }
+        } else {
+            const res = await materialsSonEdit(submitData)
+            const { code } = res;
+            if (code === 200) {
+                ElMessage.success('保存成功');
+                materialsUsageDetails1();
+            }
+        }
+        // 重置表单
+        resetForm();
+    } catch (error) {
+        ElMessage.error(`${dialogType2 === 'addSon' ? '新增' : '保存'}失败: ${error.message}`);
+    } finally {
+        submitLoading.value = false;
+        dialogVisible2.value = false;
+    }
+};
+const materialsUsageDetails1 = () => {
+    materialsUsageDetails({ physicalsupplyId: routeParams.value.id }).then(res => {
+        tableData.value = res.rows
+    })
+}
+// 格式化日期
+const formatDate = (dateString) => {
+    if (!dateString) return '-';
+    const date = new Date(dateString);
+    return date.toLocaleString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit'
+    }).replace(',', ' ');
+};
+function handleCancel() {
+    dialogVisible2.value = false;
+    currentRow2.value = null;
+}
+const refreshData = () => {
+    materialsUsageDetails1();
+    ElMessage.success('数据已刷新');
+};
+function handleSizeChange() { }
+onMounted(() => {
+    routeParams.value = proxy.$route.query;
+    console.log('routeParams.value', routeParams.value);
+    materialsUsageDetails1();
+})
+
+</script>

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

@@ -1,176 +1,533 @@
 <template>
-    <div class="overall-plan-material-supply">
+    <div class="min-h-screen bg-gray-50 flex flex-col">
-        <!-- tabPosition="left" -->
+        <!-- 主要内容区 -->
-        <el-card shadow="always">
+        <main class="flex-1 p-6">
-            <el-form :inline="true">
+            <!-- 操作栏 -->
-                <el-form-item v-if="state.masterData.status == 'draft'">
+            <div class="bg-white rounded-lg shadow-sm p-4 mb-6 transition-all duration-300 hover:shadow-md">
-                    <el-button type="primary" icon="edit" @click="clickApprovalSheet1()">审批</el-button>
+                <div class="flex flex-wrap items-center justify-between gap-4">
-                </el-form-item>
+                    <!-- 操作按钮 -->
-                <el-form-item v-if="state.masterData.status == 'waiting' || state.masterData.status == 'finish'">
+                    <div class="flex gap-2">
-                    <el-button icon="view" @click="lookApprovalFlow()" type="warning">查看流程</el-button>
+                        <el-button type="primary" icon="Plus" @click="handleAdd"
-                </el-form-item>
+                            class="transition-all duration-200 hover:shadow-md">
-            </el-form>
+                            新增
-        </el-card>
+                        </el-button>
-        <el-table :data="state.tableData" v-loading="state.loading.list" stripe
+                        <el-button icon="Refresh" @click="refreshData"
-            style="width: 100%; margin-bottom: 20px; height: calc(100vh - 230px)" row-key="id" border>
+                            class="transition-all duration-200 hover:shadow-md">
-            <el-table-column prop="num" label="编号" />
+                            刷新
-            <el-table-column prop="name" label="工程或费用名称" />
+                        </el-button>
-            <el-table-column prop="unit" label="单位" />
+                    </div>
-            <el-table-column prop="quantity" label="数量" />
+                </div>
-            <el-table-column prop="remark" label="备注" />
+            </div>
-            <el-table-column label="操作">
+
-                <template #default="{ row }">
+            <!-- 数据表格 -->
-                    <el-button :disabled="state.masterData.status == 'waiting' || state.masterData.status == 'finish'" type="primary" @click="editApprovalSheet(row)">修改</el-button>
+            <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>
-        <!-- 编辑 -->
+
-        <el-dialog v-model="visible" title="修改物料信息" :width="800" :close-on-click-modal="false" @close="handleClose">
+                <!-- 分页 -->
+                <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="batchNumber">
+                        <el-form-item label="材料名称" prop="name">
-                            <el-input disabled v-model="formData.batchNumber" placeholder="请输入批次号" clearable />
+                            <el-input v-model="formData.name" placeholder="请输入材料名称"></el-input>
                         </el-form-item>
                     </el-col>
                     <el-col :span="12">
-                        <el-form-item label="品牌" prop="brand">
+                        <el-form-item label="规格" prop="specification">
-                            <el-input v-model="formData.brand" placeholder="请输入品牌" clearable />
+                            <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="texture">
+                        <el-form-item label="供应商" prop="supplier">
-                            <el-input v-model="formData.texture" placeholder="请输入材质" clearable />
+                            <el-input v-model="formData.supplier" placeholder="请输入供应商"></el-input>
                         </el-form-item>
                     </el-col>
                     <el-col :span="12">
-                        <el-form-item label="质量标准" prop="qualityStandard">
+                        <el-form-item label="运算周期(天)" prop="executionCycle">
-                            <el-input v-model="formData.qualityStandard" placeholder="请输入质量标准" clearable />
+                            <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="partUsed">
+                        <el-form-item label="安装量" prop="installationQuantity">
-                            <el-input v-model="formData.partUsed" placeholder="请输入使用部位" clearable />
+                            <el-input v-model="formData.installationQuantity" placeholder="请输入安装量"></el-input>
                         </el-form-item>
                     </el-col>
                     <el-col :span="12">
-                        <el-form-item label="交货地点" prop="deliveryPoints">
+                        <el-form-item label="安装比例" prop="installationRatio">
-                            <el-input v-model="formData.deliveryPoints" placeholder="请输入交货地点" clearable />
+                            <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="dateService">
+                        <el-form-item label="合同签订时间" prop="contractSigning">
-                            <el-date-picker v-model="formData.dateService" type="date" placeholder="选择预计使用日期"
+                            <el-date-picker v-model="formData.contractSigning" type="datetime" placeholder="选择合同签订时间"
-                                format="YYYY-MM-DD" />
+                                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>
+
+                <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 v-model="formData.remark" placeholder="请输入备注信息" type="textarea"
+                                rows="3"></el-input>
                         </el-form-item>
                     </el-col>
                 </el-row>
             </el-form>
+
             <template #footer>
-                <el-button @click="handleClose">取消</el-button>
+                <div class="flex justify-end gap-2">
-                <el-button type="primary" @click="handleSubmit">确定</el-button>
+                    <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>
 </template>
 
-<script setup name="billofQuantities">
+<script setup>
-import { ref, reactive, onMounted, computed, getCurrentInstance } from 'vue';
+import { ref, reactive, onMounted, computed, toRaw } from 'vue';
-import { obtainMasterDataList, totalsupplyplan, totalSupplyplanDetails, materialChangeSupplyplan } from '@/api/materials/overallPlanMaterialSupply/index';
+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();
-const visible = ref(false);
+import { useMaterialsQueryList, newMaterialsAdd, materialsEdit, materialsDel, queryMaterialsInfo } from "@/api/materials/usageMaterials/index";
-const formRef = ref(null);
+// 表格数据相关
-const state = reactive({
+const tableData = ref([]);
-    tableData: [],
+const total = ref(0);
-    queryForm: {
+const currentPage = ref(1);
-        projectId: currentProject.value?.id,
+const pageSize = ref(10);
-        versions: '',
+const loading = ref(false);
-        sheet: '',
-        pageSize: 20,
-        pageNum: 1
-    },
-    loading: {
-        versions: false,
-        sheets: false,
-        list: false
-    },
-    // 主id
-    masterData: {}
 
+// 搜索表单
+const searchForm = reactive({
+    findType: '3', // 默认查询所有
+    keyword: ''
 });
+
+// 对话框相关
+const dialogVisible = ref(false);
+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({
-    batchNumber: '',
+    id: '',
-    brand: '',
-    compileDate: '',
-    dateService: '',
-    deliveryPoints: '',
-    id: undefined,
     name: '',
-    num: '',
-    partUsed: '',
-    planNumber: '',
-    projectId: undefined,
-    qualityStandard: '',
-    quantity: 0,
-    remark: '',
     specification: '',
-    status: '',
+    supplier: '',
-    texture: '',
+    findType: 2, // 默认采购
-    unit: ''
+    installationQuantity: '',
+    installationRatio: '',
+    contractSigning: '',
+    productionPhase: null,
+    executionCycle: null,
+    projectId: currentProject.value?.id,
+    supplyRequirements: '',
+    //   purchaseSubmission: '',
+    //   submissionMaterials: '',
+    remark: '',
+    createTime: '',
+    createBy: null,
+    updateTime: '',
+    updateBy: null
 });
+
 // 表单验证规则
 const formRules = reactive({
     name: [
-        { required: true, message: '请输入名称', trigger: 'blur' },
+        { required: true, message: '请输入材料名称', trigger: 'blur' },
-        { max: 100, message: '名称长度不能超过100个字符', trigger: 'blur' }
+        { max: 50, message: '材料名称不能超过50个字符', trigger: 'blur' }
     ],
-    num: [
+    supplier: [
-        { required: true, message: '请输入编号', trigger: 'blur' },
+        { required: true, message: '请输入供应商', trigger: 'blur' },
-        { max: 50, message: '编号长度不能超过50个字符', trigger: 'blur' }
+        { max: 100, message: '供应商名称不能超过100个字符', trigger: 'blur' }
     ],
-    quantity: [
+    findType: [
-        { required: true, message: '请输入数量', trigger: 'blur' },
+        { required: true, message: '请选择类型', trigger: 'change' }
-        { type: 'number', min: 0, message: '数量不能为负数', trigger: 'blur' }
-    ],
-    compileDate: [
-        { required: true, message: '请选择编制日期', trigger: 'change' }
     ]
 });
-// 获取主表数据
+
-onMounted(() => {
+
-    getMasterDataList();
+
+// 格式化日期
+const formatDate = (dateString) => {
+    if (!dateString) return '-';
+    const date = new Date(dateString);
+    return date.toLocaleString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit'
+    }).replace(',', ' ');
+};
+
+// 表格行样式
+const tableRowClassName = ({ row, rowIndex }) => {
+    return rowIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50';
+};
+
+// 获取数据
+const fetchData = async () => {
+    loading.value = true;
+    try {
+        const res = await useMaterialsQueryList({
+            projectId: currentProject.value?.id,
+            findType: 1
+        });
+
+        tableData.value = res.rows;
+        total.value = res.total;
+        loading.value = false;
+    } catch (error) {
+        ElMessage.error('获取数据失败：' + error.message);
+        console.error(error);
+    } finally {
+        loading.value = false;
+    }
+};
+
+// 搜索
+const handleSearch = () => {
+    currentPage.value = 1; // 重置到第一页
+    fetchData();
+};
+
+// 刷新数据
+const refreshData = () => {
+    fetchData();
+    ElMessage.success('数据已刷新');
+};
+
+// 分页大小改变
+const handleSizeChange = (val) => {
+    pageSize.value = val;
+    currentPage.value = 1;
+    fetchData();
+};
+
+// 当前页改变
+const handleCurrentChange = (val) => {
+    currentPage.value = val;
+    fetchData();
+};
+
+// 新增
+const handleAdd = () => {
+    dialogType.value = 'add';
+    resetForm();
+    dialogVisible.value = true;
+};
+
+// 
+
+
+
+// 编辑
+const handleEdit = (row) => {
+    dialogType.value = 'edit';
+    currentRow.value = row;
+    resetForm();
+
+    // 填充表单数据
+    Object.keys(formData).forEach(key => {
+        if (row.hasOwnProperty(key)) {
+            formData[key] = row[key];
+        }
+    });
+
+    dialogVisible.value = true;
+};
+const handleAddSon = (row) => {
+  ElMessageBox.confirm(
+    '确认提交',
+    '提示',
+    {
+      confirmButtonText: '确认',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  ).then(() => {
+    materialsEdit({id:row.id,purchaseSubmission:'1'}).then(res=>{
+      let { code } = res
+      if (code === 200) {
+        ElMessage({
+          type: 'success',
+          message: '提交成功',
         })
-</script>
+      }
-<style>
+    })
-.overall-plan-material-supply {
+  }).catch(() => {
-    padding: 20px;
+    ElMessage({
+      type: 'info',
+      message: '已取消提交',
+    })
+  })
+};
+
+// 删除
+const handleDelete = (row) => {
+    currentRow.value = row;
+    deleteDialogVisible.value = true;
+};
+
+
+// 确认删除
+const confirmDelete = async () => {
+    if (!currentRow.value) return;
+
+    deleteLoading.value = true;
+    try {
+        // 模拟API请求
+        const res = await materialsDel(currentRow.value.id)
+        const { code } = res;
+        if (code === 200) {
+            ElMessage.success('删除成功');
+            deleteDialogVisible.value = false;
+            fetchData();
+        } else {
+            ElMessage.error('删除失败');
+        }
+    } catch (error) {
+        ElMessage.error('删除失败：' + error.message);
+        console.error(error);
+    } finally {
+        deleteLoading.value = false;
+    }
+};
+// 
+
+
+
+// 保存
+const handleSave = async () => {
+    // 表单验证
+    if (!formRef.value) return;
+    const valid = await formRef.value.validate();
+    if (!valid) return;
+
+    saveLoading.value = true;
+    try {
+        // 模拟API请求
+        const form = toRaw(formData);
+
+        if (dialogType.value === 'add') {
+            // 新增
+            formData.projectId = currentProject.value?.id;
+            const res = await newMaterialsAdd(formData)
+            let { code } = res
+            if (code === 200) {
+                ElMessage.success('新增成功');
+                fetchData();
+            }
+        } else {
+            // 编辑
+            const res = await materialsEdit(formData)
+            let { code } = res
+            if (code === 200) {
+                ElMessage.success('保存成功');
+                fetchData();
+            }
         }
 
-.space-y-4>.el-row {
+        dialogVisible.value = false;
+    } catch (error) {
+        ElMessage.error('保存失败：' + error.message);
+        console.error(error);
+    } finally {
+        saveLoading.value = false;
+    }
+};
+
+// 重置表单
+const resetForm = () => {
+    if (formRef.value) {
+        formRef.value.resetFields();
+    }
+
+    // 重置表单数据
+    Object.keys(formData).forEach(key => {
+        formData[key] = '';
+    });
+
+    // 设置默认值
+    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();
+    dialogVisible.value = false;
+};
+
+// 跳转
+const jumpRouter = (row) => {
+  router.push({
+    path: `/materials/usageMaterials/purchaseSon`,
+    query: {
+      id: row.id,
+      type: 'update'
+    }
+  });
+};
+// 初始化页面
+onMounted(() => {
+    fetchData();
+});
+
+</script>
+
+<style scoped>
+/* 自定义表格行悬停样式 */
+::v-deep .el-table__row:hover>td {
+    background-color: #f0f7ff !important;
+}
+
+/* 表单间距优化 */
+::v-deep .el-form-item {
     margin-bottom: 16px;
 }
 
-.space-y-4>.el-row:last-child {
+/* 对话框动画 */
-    margin-bottom: 0;
+::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

@@ -0,0 +1,575 @@
+<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>
+                    </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">
+            <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>
+        <!-- 表单内容 -->
+        <el-form ref="formRef" :model="form" :rules="formRules" label-width="140px" class="space-y-4">
+            <!-- 第一行 -->
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="批次" prop="batch">
+                        <el-input v-model="form.batch" placeholder="请输入批次信息"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="联系单下达时间" prop="issuanceTime">
+                        <el-date-picker v-model="form.issuanceTime" type="datetime" placeholder="选择联系单下达时间"
+                            value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 第二行 -->
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="要求到货数量" prop="requiredQuantity">
+                        <el-input v-model="form.requiredQuantity" placeholder="请输入要求到货数量"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="要求到货时间" prop="requireDelivery">
+                        <el-date-picker v-model="form.requireDelivery" type="datetime" placeholder="选择要求到货时间"
+                            value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 第三行 -->
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="计划到货数量" prop="plannedQuantity">
+                        <el-input v-model="form.plannedQuantity" placeholder="请输入计划到货数量"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="计划到货时间" prop="scheduledDelivery">
+                        <el-date-picker v-model="form.scheduledDelivery" type="datetime" placeholder="选择计划到货时间"
+                            value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 第四行 -->
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="实际到货验收数量" prop="actualAcceptance">
+                        <el-input v-model="form.actualAcceptance" placeholder="请输入实际到货验收数量"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="实际到货时间" prop="actualDelivery">
+                        <el-date-picker v-model="form.actualDelivery" type="datetime" placeholder="选择实际到货时间"
+                            value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 第五行 -->
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="差异量" prop="differenceQuantity">
+                        <el-input v-model="form.differenceQuantity" placeholder="请输入差异量"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="到货差异量" prop="dhDifferenceQuantity">
+                        <el-input v-model="form.dhDifferenceQuantity" placeholder="请输入到货差异量"></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 第六行 -->
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="验收移交时间" prop="acceptanceCheck">
+                        <el-date-picker v-model="form.acceptanceCheck" 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="expectedState">
+                        <el-select v-model="form.expectedState" placeholder="请选择逾期状态">
+                            <el-option label="未逾期" value="未逾期"></el-option>
+                            <el-option label="已逾期" value="已逾期"></el-option>
+                            <el-option label="即将逾期" value="即将逾期"></el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 第七行 - 金额信息 -->
+            <el-row :gutter="20">
+                <el-col :span="6">
+                    <el-form-item label="货物金额" prop="cargoAmount">
+                        <el-input v-model="form.cargoAmount" placeholder="0.00" prefix="¥"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="预付款" prop="advance">
+                        <el-input v-model="form.advance" placeholder="0.00" prefix="¥"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="投料款" prop="feed">
+                        <el-input v-model="form.feed" placeholder="0.00" prefix="¥"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="6">
+                    <el-form-item label="到货验收款" prop="acceptancePayment">
+                        <el-input v-model="form.acceptancePayment" placeholder="0.00" prefix="¥"></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 第八行 - 金额信息 -->
+            <el-row :gutter="20">
+                <el-col :span="8">
+                    <el-form-item label="调试款" prop="debugging">
+                        <el-input v-model="form.debugging" placeholder="0.00" prefix="¥"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="质保金" prop="qualityGuarantee">
+                        <el-input v-model="form.qualityGuarantee" placeholder="0.00" prefix="¥"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="结算金额" prop="settlementAmount">
+                        <el-input v-model="form.settlementAmount" placeholder="0.00" prefix="¥"></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 第九行 -->
+            <el-row :gutter="20">
+                <el-col :span="12">
+                    <el-form-item label="交接方式" prop="associate">
+                        <el-input v-model="form.associate" placeholder="请输入交接方式"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                    <el-form-item label="转换为合同" prop="transition">
+                        <el-select v-model="form.transition" placeholder="请选择是否转换为合同">
+                            <el-option label="是" value="是"></el-option>
+                            <el-option label="否" value="否"></el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 第十行 -->
+            <el-row :gutter="20">
+                <el-col :span="24">
+                    <el-form-item label="到货要求" prop="deliveryRequirements">
+                        <el-input v-model="form.deliveryRequirements" placeholder="请输入到货要求" type="textarea"
+                            rows="3"></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 第十一行 - 备注信息 -->
+            <el-row :gutter="20">
+                <el-col :span="8">
+                    <el-form-item label="采购备注" prop="cgRemark">
+                        <el-input v-model="form.cgRemark" placeholder="请输入采购备注" type="textarea" rows="4"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="到货备注" prop="dhRemark">
+                        <el-input v-model="form.dhRemark" placeholder="请输入到货备注" type="textarea" rows="4"></el-input>
+                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                    <el-form-item label="供应商备注" prop="gysRemark">
+                        <el-input v-model="form.gysRemark" placeholder="请输入供应商备注" type="textarea" rows="4"></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <!-- 第十二行 -->
+            <el-row :gutter="20">
+                <el-col :span="24">
+                    <el-form-item label="结算备注" prop="jsRemark">
+                        <el-input v-model="form.jsRemark" placeholder="请输入结算备注" type="textarea" rows="3"></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+        </el-form>
+        <!-- 底部按钮 -->
+        <template #footer>
+            <div class="flex justify-end gap-3">
+                <el-button @click="handleCancel" class="transition-all duration-200">
+                    取消
+                </el-button>
+                <el-button type="primary" @click="handleSubmit" :loading="submitLoading"
+                    class="transition-all duration-200">
+                    {{ dialogType2 === 'addSon' ? '新增' : '保存' }}
+                </el-button>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+<script setup>
+import { ref, reactive, onMounted, toRaw, getCurrentInstance } from 'vue';
+import { materialsUsageDetails, materialsSonAdd, materialsSonDel, materialsSonEdit } from "@/api/materials/usageMaterials/index";
+import { routerRename } from '@/api/air';
+const { proxy } = getCurrentInstance();
+const dialogVisible2 = ref(false);
+const dialogType2 = ref('addSon'); // add 或 edit
+const deleteDialogVisible2 = ref(false);
+const currentRow2 = ref(null);
+const tableData = ref([]);
+const loading2 = ref(false);
+const submitLoading = ref(false);
+const routeParams = ref({})
+const currentPage = ref(1);
+const total = ref(0);
+const pageSize = ref(10);
+const formRef = ref(null);
+const deleteLoading = ref(false);
+const tableRowClassName = ({ row, rowIndex }) => {
+    return rowIndex % 2 === 0 ? 'bg-white' : 'bg-gray-50';
+};
+const form = reactive({
+    id:  '',
+    acceptanceCheck: '',
+    acceptancePayment: '',
+    actualAcceptance: '',
+    actualDelivery: '',
+    advance: '',
+    associate: '',
+    batch: '',
+    cargoAmount: '',
+    cgRemark: '',
+    createTime: '',
+    debugging: '',
+    deliveryRequirements: '',
+    dhDifferenceQuantity: '',
+    dhRemark: '',
+    differenceQuantity: '',
+    expectedState: '',
+    feed: '',
+    gysRemark: '',
+    issuanceTime: '',
+    jsRemark: '',
+    physicalsupplyId: null,
+    plannedQuantity: '',
+    qualityGuarantee: '',
+    requireDelivery: '',
+    requiredQuantity: '',
+    scheduledDelivery: '',
+    settlementAmount: '',
+    transition: '',
+    updateBy: null,
+    updateTime: ''
+});
+const handleAdd = ()=>{
+    dialogVisible2.value = true;
+    dialogType2.value = 'addSon';
+    resetForm();
+}
+const resetForm = () => {
+    if (formRef.value) {
+        formRef.value.resetFields();
+    }
+
+    // 重置表单数据
+    Object.keys(form).forEach(key => {
+        form[key] = '';
+    });
+
+    // 设置默认值
+    form.findType = 1;
+    form.id = '';
+};
+
+const handleEdit2 = (row) => {
+    dialogType2.value = 'editSon';
+    currentRow2.value = row;
+    resetForm();
+
+    // 填充表单数据
+    Object.keys(form).forEach(key => {
+        if (row.hasOwnProperty(key)) {
+            form[key] = row[key];
+        }
+    });
+
+    dialogVisible2.value = true;
+};
+const handleDelete2 = (row) => {
+    currentRow2.value = row;
+    deleteDialogVisible2.value = true;
+};
+const confirmDelete2 = async () => {
+    if (!currentRow2.value) return;
+
+    deleteLoading.value = true;
+    try {
+        // 模拟API请求
+        const res = await materialsSonDel(currentRow2.value.id)
+        const { code } = res;
+        if (code === 200) {
+            ElMessage.success('删除成功');
+            deleteDialogVisible2.value = false;
+            materialsUsageDetails1();
+        } else {
+            ElMessage.error('删除失败');
+        }
+    } catch (error) {
+        ElMessage.error('删除失败：' + error.message);
+        console.error(error);
+    } finally {
+        deleteLoading.value = false;
+    }
+};
+const handleSubmit = async () => {
+    if (!formRef.value) return;
+    // 表单验证
+    const valid = await formRef.value.validate();
+    if (!valid) return;
+
+    submitLoading.value = true;
+
+    try {
+        // 准备提交的数据
+        const submitData = { ...toRaw(form) };
+
+        // 如果是新增，清除id
+        if (dialogType2.value === 'addSon') {
+            submitData.physicalsupplyId = routeParams.value.id
+            const res = await materialsSonAdd(submitData)
+            const { code } = res;
+            if (code === 200) {
+                ElMessage.success('新增成功');
+                materialsUsageDetails1();
+            }
+        } else {
+            const res = await materialsSonEdit(submitData)
+            const { code } = res;
+            if (code === 200) {
+                ElMessage.success('保存成功');
+                materialsUsageDetails1();
+            }
+        }
+        // 重置表单
+        resetForm();
+    } catch (error) {
+        ElMessage.error(`${dialogType2 === 'addSon' ? '新增' : '保存'}失败: ${error.message}`);
+    } finally {
+        submitLoading.value = false;
+        dialogVisible2.value = false;
+    }
+};
+const materialsUsageDetails1 = () => {
+    materialsUsageDetails({ physicalsupplyId: routeParams.value.id }).then(res => {
+        tableData.value = res.rows
+    })
+}
+// 格式化日期
+const formatDate = (dateString) => {
+    if (!dateString) return '-';
+    const date = new Date(dateString);
+    return date.toLocaleString('zh-CN', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit'
+    }).replace(',', ' ');
+};
+function handleCancel() {
+    dialogVisible2.value = false;
+    currentRow2.value = null;
+}
+const refreshData = () => {
+    materialsUsageDetails1();
+    ElMessage.success('数据已刷新');
+};
+function handleSizeChange() { }
+onMounted(() => {
+    routeParams.value = proxy.$route.query;
+    console.log('routeParams.value', routeParams.value);
+    materialsUsageDetails1();
+})
+
+</script>