修改前端文件

src/views/contractreview/ContractualTasks/ContractualTasksTable.vue

@@ -5,6 +5,9 @@
       <el-form-item label="文档名称">
         <el-input v-model="searchForm.documentName" placeholder="请输入文档名称" />
       </el-form-item>
+      <el-form-item label="单位名称">
+        <el-input v-model="searchForm.unitName" placeholder="请输入单位名称" />
+      </el-form-item>
       <el-form-item label="状态">
         <el-select 
           v-model="searchForm.progressStatus" 
@@ -216,6 +219,7 @@ const dictOptions = {
 // 搜索表单
 const searchForm = reactive({
   documentName: '',
+  unitName: '',
   progressStatus: '',
   resultType: '',
   problemPoint: '',

src/views/contractualInfo/ContractualInfo/ContractualInfoEdit.vue

@@ -109,7 +109,7 @@ onMounted(async () => {
 
     // 尝试加载PDF文件
     try {
-      if (props.record.id) {
+      if (props.record.taskId) {
         const response = await getPdfFile(props.record.taskId);
         if (response instanceof Blob) {
           pdfUrl.value = URL.createObjectURL(response);

src/views/contractualInfo/ContractualProductInfo/ContractualProductInfoEdit.vue

@@ -82,8 +82,8 @@
   
   <script setup lang="ts">
   import { ref, reactive, onMounted, nextTick, watch, computed } from 'vue';
-  import { ElMessage } from 'element-plus';
+  import { ElMessage, ElMessageBox } from 'element-plus';
-  import { updateContractualProductInfo,addContractualProductInfo } from '@/api/contractReview/ContractualProductInfo';
+  import { updateContractualProductInfo, addContractualProductInfo, delContractualProductInfo } from '@/api/contractReview/ContractualProductInfo';
   import { getPdfFile } from '@/api/contractReview/JyjcontractualTaskBatch';
   
   defineOptions({ name: 'ContractualProductInfoEdit' });
@@ -202,8 +202,41 @@
   };
   
   // 删除产品
-  const handleRemoveProduct = (index: number) => {
+  const handleRemoveProduct = async (index: number) => {
-    productList.value.splice(index, 1);
+    const currentProduct = productList.value[index];
+    
+    // 如果产品已有ID（已保存到数据库），则调用删除API
+    if (currentProduct.id) {
+      try {
+        // 添加用户确认
+        await ElMessageBox.confirm('确定要删除该产品记录吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        });
+        
+        loading.value = true;
+        const res = await delContractualProductInfo(currentProduct.id);
+        
+        if (res.code === 200) {
+          ElMessage.success('删除成功');
+          productList.value.splice(index, 1);
+          emit('success', null); // 通知父组件刷新数据
+        } else {
+          ElMessage.error(res.msg || '删除失败');
+        }
+      } catch (error: any) {
+        if (error !== 'cancel') {
+          console.error('删除失败', error);
+          ElMessage.error('删除失败');
+        }
+      } finally {
+        loading.value = false;
+      }
+    } else {
+      // 如果产品没有ID（未保存到数据库），直接从列表中移除
+      productList.value.splice(index, 1);
+    }
   };
   
   // 提交单个产品

src/views/contractualInfo/ContractualProductInfo/index.vue

@@ -1,20 +1,38 @@
 <template>
   <div class="page-container">
     <!-- 搜索区域 -->
-    <el-form :model="queryParams" ref="queryFormRef" :inline="true" class="searchbar">
+    <el-form :model="queryParams" ref="queryFormRef" :inline="true" class="searchbar" label-width="80px">
       <el-form-item label="合同名称" prop="fileName">
         <el-input v-model="queryParams.fileName" placeholder="请输入合同名称" clearable />
       </el-form-item>
-      <el-form-item label="采购人(甲方)" prop="purchaserName">
+      <el-form-item label="采购人" prop="purchaserName">
         <el-input v-model="queryParams.purchaserName" placeholder="请输入采购人名称" clearable />
       </el-form-item>
+      <el-form-item label="品牌" prop="brand">
+        <el-input v-model="queryParams.brand" placeholder="请输入品牌" clearable />
+      </el-form-item>
+      <el-form-item label="型号/版本" prop="versionStr" class="no-wrap-label">
+        <el-input v-model="queryParams.versionStr" placeholder="请输入型号或版本号" clearable />
+      </el-form-item>
+      <el-form-item label="CPU型号" prop="cpuModel" class="no-wrap-label">
+        <el-input v-model="queryParams.cpuModel" placeholder="请输入CPU型号" clearable />
+      </el-form-item>
       <!-- <el-form-item label="供应商(乙方)" prop="supplierName">
         <el-input v-model="queryParams.supplierName" placeholder="请输入供应商名称" clearable />
       </el-form-item> -->
       <el-form-item>
-        <el-button type="primary" @click="handleQuery">搜索</el-button>
+        <el-button type="primary" @click="handleQuery">
-        <el-button @click="resetQuery">重置</el-button>
+          <el-icon><Search /></el-icon>搜索
-        <el-button type="info" @click="showStatisticsDialog">查看统计</el-button>
+        </el-button>
+        <el-button @click="resetQuery">
+          <el-icon><Refresh /></el-icon>重置
+        </el-button>
+        <el-button type="info" @click="showStatisticsDialog">
+          <el-icon><DataAnalysis /></el-icon>查看统计
+        </el-button>
+        <el-button type="success" @click="handleExport">
+          <el-icon><Download /></el-icon>导出
+        </el-button>
       </el-form-item>
     </el-form>
     
@@ -57,29 +75,48 @@
                   <span v-else></span>
                 </template>
               </el-table-column>
-              <el-table-column v-for="col in tableColumns.filter(col => col.prop !== 'unitName')" :key="col.prop" :label="col.label" :prop="col.prop" />
+              
-              <!-- <el-table-column label="操作" fixed="right" width="200">
+              <!-- 文件名称列 - 可点击 -->
+              <el-table-column prop="fileName" label="文件名称">
+                <template #default="scope">
+                  <a href="javascript:;" class="clickable-filename" @click="handleOpenPdfDrawer(scope.row)">{{ scope.row.fileName }}</a>
+                </template>
+              </el-table-column>
+              
+              <!-- 其他列 -->
+              <el-table-column v-for="col in tableColumns.filter(col => col.prop !== 'unitName' && col.prop !== 'fileName')" 
+                :key="col.prop" 
+                :label="col.label" 
+                :prop="col.prop" 
+              />
+              
+              <!-- 操作列 -->
+              <el-table-column label="操作" width="120" fixed="right">
                 <template #default="{ row }">
-                  <el-button
-                    link
-                    type="primary"
-                    @click="handleEdit(row)"
-                  >编辑</el-button>
                   <el-popconfirm
-                    :title="`是否删除合同产品信息[${row.id}]?`"
+                    :title="`确定删除该合同产品信息吗?`"
-                    @confirm="handleDelete(row)"
+                    @confirm="handleDeleteItem(row)"
                   >
                     <template #reference>
                       <el-button
                         link
                         type="danger"
+                        size="small"
                       >删除</el-button>
                     </template>
                   </el-popconfirm>
                 </template>
-              </el-table-column> -->
+              </el-table-column>
             </el-table>
             
+            <!-- 子表操作工具栏 -->
+            <div class="child-table-toolbar" v-if="selectedRows[props.row.countyName]?.length > 0">
+              <el-button type="danger" size="small" @click="handleBatchDeleteItems(props.row.countyName)">
+                批量删除
+              </el-button>
+              <span class="selected-count">已选择 {{ selectedRows[props.row.countyName]?.length }} 项</span>
+            </div>
+            
             <!-- 子表分页 -->
             <el-pagination
               v-if="childTableData[props.row.countyName]?.total > 0"
@@ -164,11 +201,38 @@
     >
       <ShowTotal :tableData="allChildData" :total="allChildData.length" />
     </el-drawer>
+
+    <!-- PDF预览抽屉 -->
+    <el-drawer
+      v-model="pdfDrawerVisible"
+      title="合同文件预览"
+      size="80%"
+      direction="rtl"
+      destroy-on-close
+      :close-on-click-modal="true"
+      :close-on-press-escape="true"
+    >
+      <div class="pdf-drawer-container">
+        <div v-if="currentFileRow" class="pdf-header">
+          <div class="pdf-file-info">
+            <h3>{{ currentFileRow.fileName }}</h3>
+            <p v-if="currentFileRow.unitName">单位：{{ currentFileRow.unitName }}</p>
+          </div>
+        </div>
+        
+        <div v-loading="pdfLoading" class="pdf-container">
+          <embed v-if="pdfUrl" :src="pdfUrl" type="application/pdf" width="100%" height="100%" class="pdf-embed" />
+          <div v-else-if="!pdfLoading" class="pdf-empty">无法加载PDF文件</div>
+        </div>
+      </div>
+    </el-drawer>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, reactive, onMounted } from 'vue';
+import { ref, computed, reactive, onMounted, getCurrentInstance } from 'vue';
+import type { ComponentInternalInstance } from 'vue';
+import { Search, Refresh, DataAnalysis, Download } from '@element-plus/icons-vue';
 import ContractualProductInfoModal from './ContractualProductInfoModal.vue';
 import ContractualProductInfoEdit from './ContractualProductInfoEdit.vue';
 import ShowTotal from './showtotal.vue';
@@ -177,8 +241,12 @@ import {
   listContractualProductInfo, 
   addContractualProductInfo, 
   updateContractualProductInfo, 
-  delContractualProductInfo 
+  delContractualProductInfo,
+  exportContractualProductInfo 
 } from '@/api/contractReview/ContractualProductInfo';
+import { getPdfFile } from '@/api/contractReview/JyjcontractualTaskBatch';
+import { ContractualProductInfoQuery } from '@/api/contractReview/ContractualProductInfo/model';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 // 假设这个是新的API接口，用于获取父表数据    
 // 需要添加这个接口到你的API文件中
@@ -234,7 +302,10 @@ const queryParams = reactive({
   fileName: '',
   purchaserName: '',
   supplierName: '',
-  type: ''
+  brand: '',
+  type: '',
+  versionStr: '',
+  cpuModel: ''
 });
 
 // 标签页状态
@@ -279,6 +350,12 @@ const expandedRows = ref<Record<string, boolean>>({});
 // 子表分页状态
 const childPagination = ref<Record<string, { page: number, pageSize: number }>>({});
 
+// PDF预览相关
+const pdfDrawerVisible = ref(false);
+const pdfUrl = ref('');
+const pdfLoading = ref(false);
+const currentFileRow = ref<any>(null);
+
 // 加载父表数据
 const loadParentData = async () => {
   parentLoading.value = true;
@@ -379,6 +456,9 @@ const resetQuery = () => {
   queryParams.fileName = '';
   queryParams.purchaserName = '';
   queryParams.supplierName = '';
+  queryParams.brand = '';
+  queryParams.versionStr = '';
+  queryParams.cpuModel = '';
   queryParams.type = activeTab.value;
   
   // 重置表单并查询
@@ -535,12 +615,173 @@ const handleShowDetails = (row: any, event: Event) => {
   parentTableRef.value.toggleRowExpansion(row, true);
   expandedRows.value[row.countyName] = true;
   
-  // 如果当前行未加载过数据则加载数据
+  // 无论之前是否加载过，都重新加载子表数据
-  if (!childTableData.value[row.countyName]) {
+  childLoading.value[row.countyName] = true;
-    loadChildData(row.countyName);
+  loadChildData(row.countyName);
+};
+
+// 打开PDF预览抽屉
+const handleOpenPdfDrawer = async (row: any) => {
+  console.log('点击打开PDF预览，行数据:', row);
+  
+  if (!row) {
+    ElMessage.warning('行数据为空，无法预览文件');
+    return;
+  }
+  
+  if (!row.taskId) {
+    ElMessage.warning('该记录缺少任务ID，无法预览文件');
+    console.error('缺少taskId字段:', row);
+    return;
+  }
+  
+  currentFileRow.value = row;
+  pdfDrawerVisible.value = true;
+  pdfLoading.value = true;
+  pdfUrl.value = '';
+  
+  try {
+    console.log('开始获取PDF文件, taskId:', row.taskId);
+    const response = await getPdfFile(row.taskId);
+    
+    console.log('获取PDF文件响应:', response);
+    
+    if (response instanceof Blob) {
+      // 检查返回的Blob是否有效
+      if (response.size === 0) {
+        ElMessage.error('获取的PDF文件为空');
+        return;
+      }
+      
+      // 创建文件URL
+      pdfUrl.value = URL.createObjectURL(response);
+      console.log('创建的PDF URL:', pdfUrl.value);
+    } else {
+      ElMessage.error('获取PDF文件失败：返回的不是Blob对象');
+      console.error('API返回的不是Blob对象:', response);
+    }
+  } catch (error: any) {
+    console.error('获取PDF文件失败:', error);
+    ElMessage.error('获取文件失败：' + (error.message || '未知错误'));
+  } finally {
+    pdfLoading.value = false;
+  }
+};
+
+// 删除单条子表数据
+const handleDeleteItem = async (row: any) => {
+  if (!row || !row.id) {
+    ElMessage.warning('缺少ID，无法删除');
+    return;
+  }
+  
+  try {
+    // 显示加载状态
+    childLoading.value[row.unitName] = true;
+    
+    // 调用API删除数据
+    console.log('删除项目，ID:', row.id);
+    
+    // 调用实际的API
+    const res = await delContractualProductInfo(row.id);
+    
+    if (res.code === 200) {
+      // 成功提示
+      ElMessage.success('删除成功');
+      
+      // 重新加载子表数据
+      if (row.unitName) {
+        loadChildData(row.unitName, 
+                     childPagination.value[row.unitName]?.page || 1, 
+                     childPagination.value[row.unitName]?.pageSize || 10);
+      }
+      
+      // 更新父表数据
+      loadParentData();
+    } else {
+      ElMessage.error(res.msg || '删除失败');
+    }
+  } catch (error: any) {
+    console.error('删除失败:', error);
+    ElMessage.error('删除失败: ' + (error.message || '未知错误'));
+  } finally {
+    childLoading.value[row.unitName] = false;
+  }
+};
+
+// 批量删除子表数据
+const handleBatchDeleteItems = async (countyName: string) => {
+  const selectedItems = selectedRows.value[countyName] || [];
+  
+  if (selectedItems.length === 0) {
+    ElMessage.warning('请选择要删除的项目');
+    return;
+  }
+  
+  try {
+    await ElMessageBox.confirm(
+      `确定要删除选中的 ${selectedItems.length} 项数据吗？此操作不可恢复！`,
+      '批量删除确认',
+      {
+        confirmButtonText: '确定删除',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }
+    );
+    
+    // 显示加载状态
+    childLoading.value[countyName] = true;
+    
+    // 获取所有选中项的ID，并用逗号连接
+    const ids = selectedItems.map(item => item.id).join(',');
+    console.log('批量删除，IDs:', ids);
+    
+    // 调用删除API
+    const res = await delContractualProductInfo(ids);
+    
+    if (res.code === 200) {
+      ElMessage.success(`成功删除 ${selectedItems.length} 项数据`);
+      
+      // 清空选中状态
+      selectedRows.value[countyName] = [];
+      
+      // 重新加载子表数据
+      loadChildData(countyName, 
+                   childPagination.value[countyName]?.page || 1, 
+                   childPagination.value[countyName]?.pageSize || 10);
+                   
+      // 更新父表数据
+      loadParentData();
+    } else {
+      ElMessage.error(res.msg || '批量删除失败');
+    }
+  } catch (error: any) {
+    if (error !== 'cancel') { // 忽略取消操作的错误
+      console.error('批量删除失败:', error);
+      ElMessage.error('批量删除失败: ' + (error.message || '未知错误'));
+    }
+  } finally {
+    childLoading.value[countyName] = false;
   }
 };
 
+// 导出功能
+const handleExport = () => {
+  const params = {
+    ...queryParams,
+    type: activeTab.value,
+    pageNum: page.value,
+    pageSize: pageSize.value
+  };
+  
+  proxy?.download(
+    '/productManagement/ContractualProductInfo/export',
+    params,
+    `合同产品信息.xlsx`
+  );
+  // 直接打开下载链接
+};
+
 // 初始加载数据
 onMounted(() => {
   loadParentData();
@@ -556,6 +797,12 @@ onMounted(() => {
   background-color: #f5f7fa;
   padding: 20px;
   border-radius: 4px;
+  display: flex;
+  flex-wrap: wrap;
+}
+.searchbar :deep(.el-form-item) {
+  margin-right: 10px;
+  margin-bottom: 10px;
 }
 .table-toolbar {
   margin-bottom: 15px;
@@ -597,4 +844,90 @@ onMounted(() => {
 .filter-tabs {
   margin-bottom: 20px;
 }
+
+.pdf-drawer-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.pdf-header {
+  padding: 16px;
+  background-color: #f8f9fa;
+  border-bottom: 1px solid #ebeef5;
+}
+
+.pdf-file-info h3 {
+  margin: 0 0 8px 0;
+  font-size: 18px;
+  color: #303133;
+}
+
+.pdf-file-info p {
+  margin: 0;
+  color: #606266;
+}
+
+.pdf-container {
+  flex: 1;
+  height: calc(100% - 70px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #f0f2f5;
+  padding: 16px;
+  overflow: auto;
+}
+
+.pdf-embed {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: white;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.pdf-empty {
+  text-align: center;
+  color: #909399;
+  padding: 24px;
+  background: white;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.clickable-filename {
+  color: #409eff;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.clickable-filename:hover {
+  text-decoration: underline;
+  opacity: 0.8;
+}
+
+.child-table-toolbar {
+  margin: 10px 0;
+  padding: 8px;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+}
+
+.selected-count {
+  margin-left: 10px;
+  color: #606266;
+  font-size: 14px;
+}
+
+/* 防止标签文字换行 */
+.searchbar :deep(.el-form-item__label) {
+  white-space: nowrap;
+}
+
+.no-wrap-label {
+  min-width: 200px;
+}
 </style>