src/views/approveManage/tradeApproval/list.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/tradeManage/detail/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
src/views/approveManage/tradeApproval/list.vue
@@ -91,7 +91,7 @@ @click="btnClick('0','trade_point')" > <span class="numjx">积分待办</span> <!-- <span>{{ workFlowStatus.tradePointDealData }}</span>--> <span class="count-num">({{ workFlowStatus.tradePointDealData }})</span> </div> <div class="btnDiv" @@ -99,7 +99,7 @@ @click="btnClick('1','trade_point')" > <span class="numjx">积分已办</span> <!-- <span>{{ workFlowStatus.completedData }}</span>--> <span class="count-num">({{ workFlowStatus.tradePointCompletedData }})</span> </div> <div class="btnDiv" @@ -107,7 +107,7 @@ @click="btnClick('0','trade_agreement')" > <span class="numjx">协议待办</span> <!-- <span>{{ workFlowStatus.dealwithData }}</span>--> <span class="count-num">({{ workFlowStatus.tradeAgreementDealData }})</span> </div> <div class="btnDiv" @@ -115,7 +115,7 @@ @click="btnClick('1','trade_agreement')" > <span class="numjx">协议已办</span> <!-- <span>{{ workFlowStatus.completedData }}</span>--> <span class="count-num">({{ workFlowStatus.tradeAgreementCompletedData }})</span> </div> </div> </el-col> @@ -344,7 +344,6 @@ { label: '全部', value: '' }, { label: '待上传文件', value: 'WAIT_UPLOAD' }, { label: '待授权', value: 'WAIT_AUTHORIZE' }, { label: '待审批授权', value: 'WAIT_APPROVAL_AUTHORIZE' }, { label: '待交易确认', value: 'WAIT_CONFIRM' }, { label: '已完成', value: 'COMPLETED' }, { label: '已评价', value: 'EVALUATED' }, @@ -382,7 +381,12 @@ const workFlowStatus = reactive<any>({ btnClassShow: 'trade_point0', workFlowType: 0, businessType: 'trade_point' // trade_point businessType: 'trade_point', // trade_point // 订单数量统计 tradePointDealData: 1, // 积分待办数量 - 临时测试数据 tradePointCompletedData: 0, // 积分已办数量 tradeAgreementDealData: 2, // 协议待办数量 - 临时测试数据 tradeAgreementCompletedData: 0 // 协议已办数量 }) // 使用工作流程控制器的状态映射 @@ -400,7 +404,7 @@ [OrderStatus.WAIT_CONFIRM]: 'WAIT_CONFIRM', [OrderStatus.COMPLETED]: 'COMPLETED', [OrderStatus.EVALUATED]: 'EVALUATED', [OrderStatus.WAIT_APPROVAL_AUTHORIZE]: 'WAIT_APPROVAL_AUTHORIZE' [OrderStatus.CANCELED]: 'CANCELED' } const formatDateTime = (val?: string) => { @@ -553,10 +557,10 @@ const statusMap: Record<string, 'warning' | 'danger' | 'success' | 'info'> = { WAIT_UPLOAD: 'warning', WAIT_AUTHORIZE: 'warning', WAIT_APPROVAL_AUTHORIZE: 'warning', WAIT_CONFIRM: 'warning', COMPLETED: 'success', EVALUATED: 'success', CANCELED: 'danger' } return statusMap[status] || 'info' } @@ -640,6 +644,116 @@ } } // 根据当前选中的按钮类型更新对应的数量 const updateButtonCount = (total: number) => { const { workFlowType, businessType } = workFlowStatus console.log('updateButtonCount 被调用:', { total: total, workFlowType: workFlowType, businessType: businessType, currentButton: `${businessType}${workFlowType}` }) if (businessType === 'trade_point') { if (workFlowType == 0) { // 使用 == 而不是 === 来处理字符串和数字的比较 // 积分待办 workFlowStatus.tradePointDealData = total console.log('更新积分待办数量为:', total) } else if (workFlowType == 1) { // 使用 == 而不是 === 来处理字符串和数字的比较 // 积分已办 workFlowStatus.tradePointCompletedData = total console.log('更新积分已办数量为:', total) } } else if (businessType === 'trade_agreement') { if (workFlowType == 0) { // 使用 == 而不是 === 来处理字符串和数字的比较 // 协议待办 workFlowStatus.tradeAgreementDealData = total console.log('更新协议待办数量为:', total) } else if (workFlowType == 1) { // 使用 == 而不是 === 来处理字符串和数字的比较 // 协议已办 workFlowStatus.tradeAgreementCompletedData = total console.log('更新协议已办数量为:', total) } } console.log('更新后的按钮数量:', { tradePointDealData: workFlowStatus.tradePointDealData, tradePointCompletedData: workFlowStatus.tradePointCompletedData, tradeAgreementDealData: workFlowStatus.tradeAgreementDealData, tradeAgreementCompletedData: workFlowStatus.tradeAgreementCompletedData }) } // 获取订单统计数据(用于初始化和条件查询后更新) const getOrderCounts = async () => { try { // 获取统计数据时使用当前的搜索条件,但不包括状态筛选 const getCountForType = async (workFlowType: number, businessType: string) => { const payload: any = { pageNum: 1, pageSize: 10, // 与handleSearch保持一致 userId: userStore.getUserId, unitId: userStore.getUnitId, workFlowType: workFlowType, businessType: businessType, departmentId: userStore.getDepartmentId } // 添加产品条件查询(与handleSearch完全保持一致) if (query.industry) payload.industryId = query.industry if (query.unitProject.length > 0) payload.unitProjectId = query.unitProject if (query.importantDistrictIdList.length > 0) payload.importantDistrictId = query.importantDistrictIdList if (query.productType) payload.productTypeId = query.productType if (query.productSubType) payload.productSubTypeId = query.productSubType if (query.productName) payload.productName = query.productName if (query.orderNo) payload.orderId = query.orderNo // 包含状态筛选条件,确保统计数据反映当前的筛选条件 if (query.status) payload.orderStatus = statusUiToServer[query.status] if (Array.isArray(query.dateRange) && query.dateRange.length === 2) { payload.applyTimeStart = query.dateRange[0] payload.applyTimeEnd = query.dateRange[1] } // 根据是否有产品条件选择不同的API(与handleSearch保持一致) const hasProductConditions = query.industry || query.unitProject.length > 0 || query.productType || query.productSubType const apiMethod = hasProductConditions ? fetchApprovalPageWithProductConditions : fetchApprovalPage console.log(`统计数据-${businessType}${workFlowType}查询参数:`, payload) const res = await apiMethod(payload) as any console.log(`统计数据-${businessType}${workFlowType}API响应:`, res) return res?.data?.total || 0 } // 并行获取所有统计数据 const [pointDealCount, pointCompletedCount, agreementDealCount, agreementCompletedCount] = await Promise.all([ getCountForType(0, 'trade_point'), // 积分待办 getCountForType(1, 'trade_point'), // 积分已办 getCountForType(0, 'trade_agreement'), // 协议待办 getCountForType(1, 'trade_agreement') // 协议已办 ]) workFlowStatus.tradePointDealData = pointDealCount workFlowStatus.tradePointCompletedData = pointCompletedCount workFlowStatus.tradeAgreementDealData = agreementDealCount workFlowStatus.tradeAgreementCompletedData = agreementCompletedCount console.log('更新后的统计数据:', { tradePointDealData: workFlowStatus.tradePointDealData, tradePointCompletedData: workFlowStatus.tradePointCompletedData, tradeAgreementDealData: workFlowStatus.tradeAgreementDealData, tradeAgreementCompletedData: workFlowStatus.tradeAgreementCompletedData }) } catch (error) { console.error('获取统计数据失败:', error) // 如果获取失败,使用默认值 workFlowStatus.tradePointDealData = 0 workFlowStatus.tradePointCompletedData = 0 workFlowStatus.tradeAgreementDealData = 0 workFlowStatus.tradeAgreementCompletedData = 0 } } // 搜索处理(接入真实后端) const handleSearch = async () => { const payload: any = { @@ -674,6 +788,12 @@ const pageData = res?.data const list: any[] = Array.isArray(pageData?.list) ? pageData.list : [] page.total = Number(pageData?.total || 0) console.log('搜索参数:', payload) console.log('API响应:', res) console.log('列表数据:', list) console.log('总记录数:', page.total) console.log('当前页记录数:', list.length) const flatData: any[] = [] @@ -719,11 +839,14 @@ }) orderList.value = flatData // 条件查询后,重新获取所有4种类型的订单总数并更新按钮显示 await getOrderCounts() } const btnClick = (workFlowType?: any,businessType?: any) => { workFlowStatus.btnClassShow = businessType+workFlowType workFlowStatus.workFlowType = workFlowType workFlowStatus.workFlowType = Number(workFlowType) // 确保转换为数字类型 workFlowStatus.businessType = businessType // 获取list数据 @@ -819,6 +942,9 @@ getIndustryOptions(), getProductTypeOptions() ]) // 获取初始统计数据 await getOrderCounts() // 执行搜索 handleSearch() @@ -1232,6 +1358,10 @@ .btnDivClass { background-color: #2f4589 !important; color: #fff; .count-num { color: #fff !important; } } .btnDiv { @@ -1248,6 +1378,15 @@ cursor: pointer; background-color: #FFFFFF; .numjx { padding-right: 5px; } .count-num { color: #f04844; font-weight: 500; } span :nth-child(2) { color: #f04844; } src/views/tradeManage/detail/index.vue
@@ -2,84 +2,103 @@ <div class="default-main"> <!-- 订单信息 + 申请人信息 + 交易内容(合并为同一卡片) --> <el-card shadow="never"> <el-descriptions :column="2" border class="mt10 order-desc fixed-label" label-width="180px" :label-style="labelStyle" :content-style="contentStyle" > <el-descriptions-item :span="2" class="section-header"> <template #label> <!-- 订单信息 - 使用自定义表格布局 --> <div class="order-info-section"> <div class="section-header"> <el-icon class="section-icon"><Document /></el-icon> <span>订单信息</span> </template> <template #default></template> </el-descriptions-item> <el-descriptions-item label="订单编号">{{ detail.orderNo }}</el-descriptions-item> <el-descriptions-item label="交易资源类型">{{ detail.resourceTypeName }}</el-descriptions-item> <el-descriptions-item label="申请时间">{{ detail.applyTime }}</el-descriptions-item> <el-descriptions-item label="交易状态"> </div> <div class="order-info-grid"> <div class="order-info-item"> <div class="order-label">订单编号</div> <div class="order-content">{{ detail.orderNo }}</div> </div> <div class="order-info-item"> <div class="order-label">交易资源类型</div> <div class="order-content">{{ detail.resourceTypeName }}</div> </div> <div class="order-info-item"> <div class="order-label">申请时间</div> <div class="order-content">{{ detail.applyTime }}</div> </div> <div class="order-info-item"> <div class="order-label">交易状态</div> <div class="order-content"> <el-tag :type="getStatusType(detail.status)" size="small">{{ detail.statusName }}</el-tag> </el-descriptions-item> </el-descriptions> </div> </div> </div> </div> <!-- 申请人信息(与订单信息同卡片,复用分隔标题样式) --> <el-descriptions :column="2" border class="mt15 order-desc fixed-label" label-width="180px" :label-style="labelStyle" :content-style="contentStyle" > <el-descriptions-item :span="2" class="section-header"> <template #label> <!-- 申请人信息 - 使用自定义表格布局 --> <div class="applicant-info-section"> <div class="section-header"> <el-icon class="section-icon"><User /></el-icon> <span>申请人信息</span> </template> <template #default></template> </el-descriptions-item> <el-descriptions-item label="姓名">{{ detail.userName || '-' }}</el-descriptions-item> <el-descriptions-item label="单位">{{ detail.unitName || '-' }}</el-descriptions-item> <el-descriptions-item label="部门">{{ detail.userDept || '-' }}</el-descriptions-item> <el-descriptions-item label="用户名">{{ detail.userAccount || '-' }}</el-descriptions-item> </el-descriptions> </div> <div class="applicant-info-grid"> <div class="applicant-info-item"> <div class="applicant-label">姓名</div> <div class="applicant-content">{{ detail.userName || '-' }}</div> </div> <div class="applicant-info-item"> <div class="applicant-label">单位</div> <div class="applicant-content">{{ detail.unitName || '-' }}</div> </div> <div class="applicant-info-item"> <div class="applicant-label">部门</div> <div class="applicant-content">{{ detail.userDept || '-' }}</div> </div> <div class="applicant-info-item"> <div class="applicant-label">用户名</div> <div class="applicant-content">{{ detail.userAccount || '-' }}</div> </div> </div> </div> <!-- 交易内容(紧随申请人信息,同卡片,复用分隔标题样式) --> <el-descriptions :column="2" border class="mt15 order-desc fixed-label" label-width="180px" :label-style="labelStyle" :content-style="contentStyle" > <el-descriptions-item :span="2" class="section-header"> <template #label> <!-- 交易内容 - 使用自定义表格布局 --> <div class="transaction-content-section"> <div class="section-header"> <el-icon class="section-icon"><Goods /></el-icon> <span>交易内容</span> </template> <template #default></template> </el-descriptions-item> <el-descriptions-item label="产品名称"> </div> <div class="transaction-content-grid"> <div class="transaction-content-item"> <div class="transaction-label">产品名称</div> <div class="transaction-content"> <el-link type="primary" :underline="false">{{ detail.productName }}</el-link> </el-descriptions-item> <el-descriptions-item label="提供者">{{ detail.supplier }}</el-descriptions-item> <el-descriptions-item label="行业领域">{{ detail.industry }}</el-descriptions-item> <el-descriptions-item label="单位工程"> </div> </div> <div class="transaction-content-item"> <div class="transaction-label">提供者</div> <div class="transaction-content">{{ detail.supplier }}</div> </div> <div class="transaction-content-item"> <div class="transaction-label">行业领域</div> <div class="transaction-content">{{ detail.industry }}</div> </div> <div class="transaction-content-item"> <div class="transaction-label">单位工程</div> <div class="transaction-content"> <el-tooltip effect="dark" :content="detail.projectUnit || '-'" placement="top" :disabled="!(detail.projectUnit && String(detail.projectUnit).trim())" popper-class="tooltip-wrap"> <div class="ellipsis-1">{{ detail.projectUnit || '-' }}</div> </el-tooltip> </el-descriptions-item> <el-descriptions-item label="产品类型">{{ detail.productType || '-' }}</el-descriptions-item> <el-descriptions-item label="产品简介"> </div> </div> <div class="transaction-content-item"> <div class="transaction-label">产品类型</div> <div class="transaction-content">{{ detail.productType || '-' }}</div> </div> <div class="transaction-content-item"> <div class="transaction-label">产品简介</div> <div class="transaction-content"> <el-tooltip effect="dark" :content="detail.productDesc || '-'" placement="top" :disabled="!(detail.productDesc && String(detail.productDesc).trim())" popper-class="tooltip-wrap" trigger="click"> <div class="desc-wrap ellipsis-3">{{ detail.productDesc || '-' }}</div> </el-tooltip> </el-descriptions-item> </el-descriptions> </div> </div> </div> </div> <!-- 订单详情(移动到交易内容下面,同一卡片内) --> <div ref="orderTableWrapRef"> @@ -382,6 +401,7 @@ }) const labelStyle = { width: '180px', maxWidth: '180px' } const contentStyle = { width: 'calc(50% - 180px)' } // 文件相关 const fileList = ref<any[]>([]) @@ -1086,6 +1106,160 @@ width: calc(50% - 180px) !important; } /* 订单信息自定义布局样式 */ .order-info-section { border: 1px solid #e4e7ed; border-radius: 4px; margin-top: 10px; overflow: hidden; } .order-info-section .section-header { background: #f3f6fb; padding: 12px 16px; border-bottom: 1px solid #e4e7ed; font-weight: 600; display: flex; align-items: center; } .order-info-section .section-icon { margin-right: 6px; color: #409eff; } .order-info-grid { display: grid; grid-template-columns: 15% 30% 15% 40%; width: 100%; } .order-info-item { display: contents; } .order-info-item .order-label { padding: 12px 16px; background: #fafafa; border: 1px solid #e4e7ed; font-size: 14px; color: #606266; display: flex; align-items: center; } .order-info-item .order-content { padding: 12px 16px; border: 1px solid #e4e7ed; font-size: 14px; color: #303133; display: flex; align-items: center; } /* 申请人信息自定义布局样式 */ .applicant-info-section { border: 1px solid #e4e7ed; border-radius: 4px; margin-top: 15px; overflow: hidden; } .applicant-info-section .section-header { background: #f3f6fb; padding: 12px 16px; border-bottom: 1px solid #e4e7ed; font-weight: 600; display: flex; align-items: center; } .applicant-info-section .section-icon { margin-right: 6px; color: #409eff; } .applicant-info-grid { display: grid; grid-template-columns: 15% 30% 15% 40%; width: 100%; } .applicant-info-item { display: contents; } .applicant-info-item .applicant-label { padding: 12px 16px; background: #fafafa; border: 1px solid #e4e7ed; font-size: 14px; color: #606266; display: flex; align-items: center; } .applicant-info-item .applicant-content { padding: 12px 16px; border: 1px solid #e4e7ed; font-size: 14px; color: #303133; display: flex; align-items: center; } /* 交易内容自定义布局样式 */ .transaction-content-section { border: 1px solid #e4e7ed; border-radius: 4px; margin-top: 15px; overflow: hidden; } .transaction-content-section .section-header { background: #f3f6fb; padding: 12px 16px; border-bottom: 1px solid #e4e7ed; font-weight: 600; display: flex; align-items: center; } .transaction-content-section .section-icon { margin-right: 6px; color: #409eff; } .transaction-content-grid { display: grid; grid-template-columns: 15% 30% 15% 40%; width: 100%; } .transaction-content-item { display: contents; } .transaction-content-item .transaction-label { padding: 12px 16px; background: #fafafa; border: 1px solid #e4e7ed; font-size: 14px; color: #606266; display: flex; align-items: center; } .transaction-content-item .transaction-content { padding: 12px 16px; border: 1px solid #e4e7ed; font-size: 14px; color: #303133; display: flex; align-items: center; } .desc-wrap { white-space: pre-wrap; line-height: 22px;