<template>
|
<div class="default-main">
|
<!-- 搜索表单区域 -->
|
<el-card shadow="never" class="search-card">
|
<el-form :inline="true" :model="query" class="query-form">
|
<!-- 第一行：产品名称(30%)、行业领域(25%)、单位工程(15%)、交易状态(30%) -->
|
<div class="form-row">
|
<el-form-item label="产品名称" class="col-28">
|
<el-input v-model="query.productName" placeholder="请输入产品名称" clearable style="width: 100%" />
|
</el-form-item>
|
<el-form-item label="行业领域" class="col-25">
|
<el-select v-model="query.industry" placeholder="请选择行业领域" clearable style="width: 100%" @change="handleIndustryChange">
|
<el-option v-for="item in industryOptions" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="" class="col-17">
|
<el-select v-model="query.unitProject" placeholder="请选择单位工程" clearable style="width: 100%">
|
<el-option v-for="item in unitProjectOptions" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
<el-form-item label="交易状态" class="col-30">
|
<el-select v-model="query.status" placeholder="全部" style="width: 100%">
|
<el-option v-for="s in statusOptions" :key="s.value" :label="s.label" :value="s.value" />
|
</el-select>
|
</el-form-item>
|
</div>
|
|
<!-- 第二行：订单编号(30%)、产品类型(25%)、产品类型子级(15%)、申请时间(30%) -->
|
<div class="form-row">
|
<el-form-item label="订单编号" class="col-28">
|
<el-input v-model="query.orderNo" placeholder="请输入订单编号" clearable style="width: 100%" />
|
</el-form-item>
|
<el-form-item label="产品类型" class="col-25">
|
<el-select v-model="query.productType" placeholder="请选择产品类型" clearable style="width: 100%" @change="handleProductTypeChange">
|
<el-option v-for="item in productTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
</el-select>
|
</el-form-item>
|
<!-- <el-form-item label="" class="col-17">-->
|
<!-- <el-select v-model="query.productSubType" placeholder="请选择产品类型子级" clearable style="width: 100%">-->
|
<!-- <el-option v-for="item in productSubTypeOptions" :key="item.value" :label="item.label" :value="item.value" />-->
|
<!-- </el-select>-->
|
<!-- </el-form-item>-->
|
<el-form-item label="申请时间" class="col-30">
|
<el-date-picker
|
v-model="query.dateRange"
|
type="datetimerange"
|
range-separator="至"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间"
|
format="YYYY-MM-DD HH:mm:ss"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</div>
|
|
<!-- 第三行：操作按钮（右对齐） -->
|
<div class="form-row actions">
|
<el-form-item class="row-actions">
|
<el-button type="primary" @click="handleSearch" :icon="Search">查询</el-button>
|
<el-button @click="reset" :icon="Refresh">重置</el-button>
|
</el-form-item>
|
</div>
|
</el-form>
|
</el-card>
|
|
<!-- 订单列表区域 -->
|
<el-card class="mt15" shadow="never">
|
<div class="table-container">
|
<el-table :data="orderList" border style="width: 100%" :row-class-name="getRowClassName" :span-method="objectSpanMethod" class="custom-table">
|
<!-- 订单信息 -->
|
<el-table-column label="订单信息" align="center">
|
<el-table-column label="软件产品名称" prop="productName" min-width="150">
|
<template #default="{ row }">
|
<div v-if="row.isMainOrder" class="main-order-info">
|
<div class="order-header">
|
<div class="order-item">
|
<span class="label">申请时间:</span>
|
<span class="value">{{ row.applyTime }}</span>
|
</div>
|
<div class="order-item">
|
<span class="label">订单编号:</span>
|
<span class="value">{{ row.orderNo }}</span>
|
</div>
|
<div class="order-item">
|
<span class="label">需求方:</span>
|
<span class="value">{{ row.demandSide }}</span>
|
</div>
|
<div class="order-item">
|
<span class="label">供应方:</span>
|
<span class="value">{{ row.supplySide }}</span>
|
</div>
|
<div class="order-item status-item">
|
<el-tag :type="getStatusType(row.status)" size="small">{{ row.statusName }}</el-tag>
|
</div>
|
</div>
|
</div>
|
<div v-else-if="row.isSpacer" class="spacer-cell"></div>
|
<div v-else class="product-name-merged">{{ row.productName }}</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="软件产品套件名称" prop="suiteName" min-width="150">
|
<template #default="{ row }">
|
<div v-if="row.isSpacer" class="spacer-cell"></div>
|
<div v-else-if="!row.isMainOrder" class="suite-name">{{ row.suiteName }}</div>
|
</template>
|
</el-table-column>
|
</el-table-column>
|
|
<!-- 购买方式 -->
|
<el-table-column label="购买方式" align="center">
|
<el-table-column label="销售形式/账户数量" width="150">
|
<template #default="{ row }">
|
<div v-if="row.isSpacer" class="spacer-cell"></div>
|
<div v-else-if="!row.isMainOrder" class="purchase-info-left">
|
<div class="purchase-item">
|
<span class="label">销售形式:</span>
|
<span class="value">{{ row.salesForm }}</span>
|
</div>
|
<div class="purchase-item">
|
<span class="label">账户数量:</span>
|
<span class="value">{{ row.accountCount }}</span>
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="客户对象/并发节点数量" width="130">
|
<template #default="{ row }">
|
<div v-if="row.isSpacer" class="spacer-cell"></div>
|
<div v-else-if="!row.isMainOrder" class="purchase-info-right">
|
<div class="purchase-item">
|
<span class="label">客户对象:</span>
|
<span class="value">{{ row.customerObject }}</span>
|
</div>
|
<div class="purchase-item">
|
<span class="label">并发节点数量:</span>
|
<span class="value">{{ row.concurrentCount }}</span>
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table-column>
|
|
<!-- 总价 -->
|
<el-table-column label="总价" align="center">
|
<el-table-column label="单价" prop="unitPrice" width="90">
|
<template #default="{ row }">
|
<div v-if="row.isSpacer" class="spacer-cell"></div>
|
<div v-else-if="!row.isMainOrder" class="price-info">
|
<span v-if="row.priceType === 'points'" class="price-points">
|
积分 {{ row.unitPrice }}
|
</span>
|
<span v-else-if="row.priceType === 'currency'" class="price-currency">
|
货币 {{ row.unitPrice }}
|
</span>
|
<span v-else-if="row.priceType === 'agreement'" class="price-agreement">
|
协议
|
</span>
|
<span v-else-if="row.priceType === 'free'" class="price-free">
|
免费
|
</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="数量" prop="quantity" width="50">
|
<template #default="{ row }">
|
<div v-if="row.isSpacer" class="spacer-cell"></div>
|
<div v-else-if="!row.isMainOrder" class="quantity">{{ row.quantity }}</div>
|
</template>
|
</el-table-column>
|
</el-table-column>
|
|
<!-- 期限(年) -->
|
<el-table-column label="期限(年)" align="center" width="80">
|
<el-table-column label="" prop="period" width="80">
|
<template #default="{ row }">
|
<div v-if="row.isSpacer" class="spacer-cell"></div>
|
<div v-else-if="!row.isMainOrder" class="period-info">
|
<span v-if="row.period === 0" class="permanent">永久</span>
|
<span v-else>{{ row.period }}</span>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table-column>
|
|
<!-- 操作 -->
|
<el-table-column label="操作" align="center" width="120" class="operation-column">
|
<el-table-column label="" width="120">
|
<template #default="{ row }">
|
<div v-if="row.isSpacer" class="spacer-cell"></div>
|
<div v-else-if="!row.isMainOrder" class="sub-order-actions-merged">
|
<div v-if="row.parentOrder && row.parentOrder.subOrders && row.parentOrder.subOrders.findIndex((sub: any) => sub.id === row.id) === 0" class="all-actions">
|
<div class="action-item">
|
<div class="action-buttons">
|
<template v-for="action in getAvailableActions(row.parentOrder)" :key="action.type">
|
<el-button
|
v-if="action.type === ActionType.VIEW"
|
type="primary"
|
link
|
size="small"
|
@click="handleAction(action, row.parentOrder)"
|
>
|
查看
|
</el-button>
|
<el-button
|
v-else-if="action.type === ActionType.TRACK"
|
type="primary"
|
link
|
size="small"
|
@click="handleAction(action, row.parentOrder)"
|
>
|
追踪
|
</el-button>
|
<el-button
|
v-else-if="action.type === ActionType.AUTHORIZE"
|
type="primary"
|
link
|
size="small"
|
@click="handleAction(action, row.parentOrder)"
|
>
|
授权
|
</el-button>
|
</template>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<!-- 分页 -->
|
<div class="mt15 pagination-container">
|
<el-pagination
|
v-model:current-page="page.current"
|
v-model:page-size="page.size"
|
:total="page.total"
|
:page-sizes="[10, 20, 50, 100]"
|
layout="total, sizes, prev, pager, next, jumper"
|
@size-change="handleSearch"
|
@current-change="handleSearch"
|
/>
|
</div>
|
</el-card>
|
|
<!-- 订单状态对话框 -->
|
<ProductOrderStatusDialog
|
v-model="orderStatusDialogVisible"
|
:order-id="currentOrderId"
|
/>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { onMounted, reactive, ref } from 'vue'
|
import { useRouter } from 'vue-router'
|
import { Search, Refresh } from '@element-plus/icons-vue'
|
import { ElMessage } from 'element-plus'
|
import { fetchApprovalPage, fetchApprovalPageWithProductConditions } from '@/api/approvalManage'
|
import orderApi from '@/api/orderApi'
|
import productApi from '@/api/productApi'
|
import { authorizeApproval, fetchApprovalByOrderId } from '@/api/approvalManage'
|
import { useUserInfo } from '@/stores/modules/userInfo'
|
import ProductOrderStatusDialog from '@/views/productManage/productOrderStatusDialog/index.vue'
|
import { OrderWorkflowController, OrderStatus, ActionType, PageType, StatusMapper } from '@/utils/orderWorkflow'
|
import { queryUserDetail } from '@/api/userInfo'
|
|
const router = useRouter()
|
const userStore = useUserInfo()
|
|
// 状态选项（更新为新的工作流程状态）
|
const statusOptions = [
|
{ label: '全部', value: '' },
|
{ label: '待上传文件', value: 'WAIT_UPLOAD' },
|
{ label: '待授权', value: 'WAIT_AUTHORIZE' },
|
{ label: '待交易确认', value: 'WAIT_CONFIRM' },
|
{ label: '已完成', value: 'COMPLETED' },
|
{ label: '已评价', value: 'EVALUATED' },
|
]
|
|
// 动态选项数据
|
const industryOptions = ref<any[]>([])
|
const unitProjectOptions = ref<any[]>([])
|
const productTypeOptions = ref<any[]>([])
|
const productSubTypeOptions = ref<any[]>([])
|
|
// 查询条件
|
const query = reactive({
|
productName: '',
|
industry: '',
|
unitProject: '',
|
productType: '',
|
productSubType: '',
|
orderNo: '',
|
status: '',
|
dateRange: [],
|
})
|
|
// 分页信息
|
const page = reactive({ current: 1, size: 10, total: 0 })
|
|
// 订单列表数据（包含主订单和子订单）
|
const orderList = ref<any[]>([])
|
|
// 订单状态对话框相关
|
const orderStatusDialogVisible = ref(false)
|
const currentOrderId = ref<string>('')
|
|
// 使用工作流程控制器的状态映射
|
const statusUiToServer: Record<string, string> = {
|
WAIT_UPLOAD: OrderStatus.WAIT_UPLOAD,
|
WAIT_AUTHORIZE: OrderStatus.WAIT_AUTHORIZE,
|
WAIT_CONFIRM: OrderStatus.WAIT_CONFIRM,
|
COMPLETED: OrderStatus.COMPLETED,
|
EVALUATED: OrderStatus.EVALUATED,
|
}
|
|
const statusServerToUi: Record<string, string> = {
|
[OrderStatus.WAIT_UPLOAD]: 'WAIT_UPLOAD',
|
[OrderStatus.WAIT_AUTHORIZE]: 'WAIT_AUTHORIZE',
|
[OrderStatus.WAIT_CONFIRM]: 'WAIT_CONFIRM',
|
[OrderStatus.COMPLETED]: 'COMPLETED',
|
[OrderStatus.EVALUATED]: 'EVALUATED',
|
}
|
|
const formatDateTime = (val?: string) => {
|
if (!val) return ''
|
// 后端 LocalDateTime 可能是 2025-05-21T10:00:00
|
return val.replace('T', ' ').slice(0, 19)
|
}
|
|
const normalizePriceType = (val?: string): 'points' | 'currency' | 'agreement' | 'free' => {
|
if (!val) return 'currency'
|
const s = String(val)
|
if (/(积分|points)/i.test(s)) return 'points'
|
if (/(协议|agreement)/i.test(s)) return 'agreement'
|
if (/(免费|free)/i.test(s)) return 'free'
|
return 'currency'
|
}
|
|
// 获取行业领域选项
|
const getIndustryOptions = async () => {
|
try {
|
const res = await productApi.getCategoryByParent({ parentCode: 'business_direction' })
|
if (res?.code === 200 && res.data) {
|
industryOptions.value = res.data.map((item: any) => ({
|
label: item.name,
|
value: item.id
|
}))
|
}
|
} catch (error) {
|
console.error('获取行业领域选项失败:', error)
|
}
|
}
|
|
// 获取产品类型选项
|
const getProductTypeOptions = async () => {
|
try {
|
const res = await productApi.getCategoryByParent({ parentCode: 'ProductTechnologyType' })
|
if (res?.code === 200 && res.data) {
|
productTypeOptions.value = res.data.map((item: any) => ({
|
label: item.name,
|
value: item.id
|
}))
|
}
|
} catch (error) {
|
console.error('获取产品类型选项失败:', error)
|
}
|
}
|
|
// 根据行业领域获取单位工程选项
|
const getUnitProjectOptions = async (industryCode: string) => {
|
if (!industryCode) {
|
unitProjectOptions.value = []
|
return
|
}
|
try {
|
const res = await productApi.getCategoryByParent({ parentId: industryCode })
|
if (res?.code === 200 && res.data) {
|
unitProjectOptions.value = res.data.map((item: any) => ({
|
label: item.name,
|
value: item.id
|
}))
|
}
|
} catch (error) {
|
console.error('获取单位工程选项失败:', error)
|
unitProjectOptions.value = []
|
}
|
}
|
|
// 根据产品类型获取产品子级选项
|
const getProductSubTypeOptions = async (productTypeCode: string) => {
|
if (!productTypeCode) {
|
productSubTypeOptions.value = []
|
return
|
}
|
try {
|
const res = await productApi.getCategoryByParent({ parentId: productTypeCode })
|
if (res?.code === 200 && res.data) {
|
productSubTypeOptions.value = res.data.map((item: any) => ({
|
label: item.name,
|
value: item.id
|
}))
|
}
|
} catch (error) {
|
console.error('获取产品子级选项失败:', error)
|
productSubTypeOptions.value = []
|
}
|
}
|
|
// 处理行业领域变化
|
const handleIndustryChange = async (value: string) => {
|
// 清空单位工程选择
|
query.unitProject = ''
|
// 获取对应的单位工程选项
|
await getUnitProjectOptions(value)
|
}
|
|
// 处理产品类型变化
|
const handleProductTypeChange = async (value: string) => {
|
// 清空产品子级选择
|
query.productSubType = ''
|
// 获取对应的产品子级选项
|
// await getProductSubTypeOptions(value)
|
}
|
|
// 获取状态类型
|
const getStatusType = (status: string) => {
|
const statusMap: Record<string, 'warning' | 'danger' | 'success' | 'info'> = {
|
WAIT_UPLOAD: 'warning',
|
WAIT_AUTHORIZE: 'warning',
|
WAIT_CONFIRM: 'warning',
|
COMPLETED: 'success',
|
EVALUATED: 'success',
|
}
|
return statusMap[status] || 'info'
|
}
|
|
// 获取行样式类名
|
const getRowClassName = ({ row }: { row: any }) => {
|
if (row.isMainOrder) {
|
return 'main-order-row'
|
}
|
return 'sub-order-row'
|
}
|
|
// 合并单元格方法
|
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
|
if (row.isSpacer) {
|
// 分隔行不做任何行列合并
|
return { colspan: 1, rowspan: 1 }
|
}
|
if (row.isMainOrder) {
|
// 主订单行，合并所有列显示订单信息
|
if (columnIndex === 0) { // 第一列，合并所有列
|
return {
|
colspan: 8, // 总共8列：订单信息2列 + 购买方式2列 + 总价2列 + 期限1列 + 操作1列
|
rowspan: 1
|
}
|
} else {
|
// 其他列隐藏
|
return {
|
colspan: 0,
|
rowspan: 0
|
}
|
}
|
} else {
|
// 子订单行
|
if (columnIndex === 0) { // 第一列（软件产品名称）
|
// 找到当前子订单所属的主订单
|
const parentOrder = row.parentOrder
|
if (parentOrder && parentOrder.subOrders) {
|
// 计算当前子订单在主订单中的位置
|
const subOrderIndex = parentOrder.subOrders.findIndex((sub: any) => sub.id === row.id)
|
if (subOrderIndex === 0) {
|
// 第一个子订单，合并所有子订单行
|
return {
|
colspan: 1,
|
rowspan: parentOrder.subOrders.length
|
}
|
} else {
|
// 其他子订单，隐藏
|
return {
|
colspan: 0,
|
rowspan: 0
|
}
|
}
|
}
|
} else if (columnIndex === 7) { // 操作列（第8列）
|
// 找到当前子订单所属的主订单
|
const parentOrder = row.parentOrder
|
if (parentOrder && parentOrder.subOrders) {
|
// 计算当前子订单在主订单中的位置
|
const subOrderIndex = parentOrder.subOrders.findIndex((sub: any) => sub.id === row.id)
|
if (subOrderIndex === 0) {
|
// 第一个子订单，合并所有子订单行
|
return {
|
colspan: 1,
|
rowspan: parentOrder.subOrders.length
|
}
|
} else {
|
// 其他子订单，隐藏
|
return {
|
colspan: 0,
|
rowspan: 0
|
}
|
}
|
}
|
}
|
// 其他列正常显示
|
return {
|
colspan: 1,
|
rowspan: 1
|
}
|
}
|
}
|
|
// 搜索处理（接入真实后端）
|
const handleSearch = async () => {
|
const payload: any = {
|
pageNum: page.current,
|
pageSize: page.size,
|
productName: query.productName || undefined,
|
orderId: query.orderNo || undefined,
|
}
|
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]
|
}
|
|
// 添加产品条件查询
|
if (query.industry) payload.industryId = query.industry
|
if (query.unitProject) payload.unitProjectId = query.unitProject
|
if (query.productType) payload.productTypeId = query.productType
|
if (query.productSubType) payload.productSubTypeId = query.productSubType
|
|
// 根据是否有产品条件选择不同的API
|
const hasProductConditions = query.industry || query.unitProject || query.productType || query.productSubType
|
const apiMethod = hasProductConditions ? fetchApprovalPageWithProductConditions : fetchApprovalPage
|
|
const res = (await apiMethod(payload)) as any
|
const pageData = res?.data
|
const list: any[] = Array.isArray(pageData?.list) ? pageData.list : []
|
page.total = Number(pageData?.total || 0)
|
|
|
const flatData: any[] = []
|
list.forEach((order: any, idx: number) => {
|
const uiStatus = statusServerToUi[order.orderStatus] || 'WAIT_UPLOAD'
|
const mainRow: any = {
|
id: order.orderId,
|
isMainOrder: true,
|
applyTime: formatDateTime(order.applyTime || ''),
|
orderNo: order.orderId,
|
demandSide: '',
|
supplySide: order.providerName || '',
|
status: uiStatus,
|
statusName: order.orderStatus || '',
|
orderStatus: StatusMapper.toUIStatus(order.orderStatus), // 转换为标准状态枚举
|
workFlowId: order.workflowId || ''
|
}
|
|
const subOrders: any[] = Array.isArray(order?.orderDetails)
|
? order?.orderDetails.map((d: any, i: number) => ({
|
id: `${order.orderId}-${i + 1}`,
|
isMainOrder: false,
|
productName: order.productName || '',
|
suiteName: d.suiteName,
|
salesForm: d.salesForm,
|
accountCount: d.accountLimit,
|
customerObject: d.customerType,
|
concurrentCount: d.concurrentNodes,
|
priceType: normalizePriceType(d.priceType),
|
unitPrice: d.unitPrice,
|
quantity: d.quantity,
|
period: d.duration,
|
}))
|
: []
|
|
// 供合并逻辑使用
|
;(mainRow as any).subOrders = subOrders
|
|
flatData.push(mainRow)
|
subOrders.forEach((sub) => flatData.push({ ...sub, parentOrder: mainRow }))
|
flatData.push({ isSpacer: true, isMainOrder: false, parentOrder: mainRow })
|
})
|
|
orderList.value = flatData
|
}
|
|
// 重置
|
const reset = () => {
|
Object.assign(query, {
|
productName: '',
|
industry: '',
|
unitProject: '',
|
productType: '',
|
productSubType: '',
|
orderNo: '',
|
status: '',
|
dateRange: [],
|
})
|
// 清空动态选项
|
unitProjectOptions.value = []
|
productSubTypeOptions.value = []
|
page.current = 1
|
handleSearch()
|
}
|
|
// 路由跳转
|
const toApprove = (row: any) => router.push({ name: 'tradeApproval', params: { id: row.id } })
|
const toCheckFiles = (row: any) => router.push({ name: 'tradeCheckFiles', params: { id: row.id } })
|
const toDetail = (row: any) => router.push({ name: 'tradeOrderDetail', params: { id: row.id } })
|
const toTrack = (row: any) => {
|
if (!row.workFlowId) {
|
ElMessage.warning('该订单暂无工作流信息')
|
return
|
}
|
router.push({ name: 'tradeTrack', params: { id: row.workFlowId } })
|
}
|
|
// 追踪订单 - 显示订单状态对话框
|
const showOrderTrack = (row: any) => {
|
currentOrderId.value = row.id
|
orderStatusDialogVisible.value = true
|
}
|
|
// 获取可用操作列表
|
const getAvailableActions = (order: any) => {
|
if (!order.orderStatus) return []
|
return OrderWorkflowController.getAvailableActions(PageType.TRADE_APPROVAL, order.orderStatus)
|
}
|
|
// 处理操作点击
|
const handleAction = (action: any, order: any) => {
|
switch (action.type) {
|
case ActionType.VIEW:
|
toDetail(order)
|
break
|
case ActionType.TRACK:
|
toTrack(order)
|
break
|
case ActionType.AUTHORIZE:
|
toAuthorize(order)
|
break
|
default:
|
console.warn('未知的操作类型:', action.type)
|
}
|
}
|
|
// 授权：跳转到授权页面
|
const toAuthorize = (row: any) => {
|
router.push({ name: 'tradeAuthorization', params: { id: row.id } })
|
}
|
|
onMounted(async ()=>{
|
// 获取用户信息
|
if (!userStore.getUserId) {
|
try {
|
const res: any = await queryUserDetail()
|
if (res?.code === 200 && res.data) {
|
userStore.updateUserDetail(res.data)
|
} else {
|
ElMessage.error(res?.msg || '无法获取用户信息，请先登录')
|
return
|
}
|
} catch (e) {
|
console.error('获取用户详情失败:', e)
|
ElMessage.error('获取用户信息失败，请稍后重试')
|
return
|
}
|
}
|
|
// 获取初始选项数据
|
await Promise.all([
|
getIndustryOptions(),
|
getProductTypeOptions()
|
])
|
|
// 执行搜索
|
handleSearch()
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.default-main {
|
padding: 20px;
|
background-color: #f5f5f5;
|
min-height: 100vh;
|
position: relative;
|
z-index: 1;
|
}
|
|
// 全局表头文字大小调整
|
:deep(.el-table__header) {
|
th {
|
.cell {
|
font-size: 14px !important;
|
font-weight: 700;
|
}
|
}
|
}
|
|
// 隐藏表头第二行的子标题
|
:deep(.el-table__header) {
|
tr:nth-child(2) {
|
th {
|
.cell {
|
display: none !important;
|
}
|
height: 5px !important;
|
padding: 0 !important;
|
background-color: #f0f2f5; // 与分隔行一致的背景色
|
border-bottom: 2px solid #e4e7ed; // 与分隔行一致的下边框
|
}
|
}
|
|
// 调整表头高度
|
tr:first-child {
|
th {
|
height: 40px !important;
|
}
|
}
|
}
|
|
.search-card {
|
margin-bottom: 20px;
|
|
.query-form {
|
.form-row {
|
display: flex;
|
gap: 0;
|
width: 100%;
|
margin-bottom: 8px;
|
|
&.actions {
|
justify-content: flex-end;
|
}
|
|
.el-form-item { margin-right: 0 !important; }
|
> .el-form-item { padding-right: 8px; }
|
> .el-form-item:last-child { padding-right: 0; }
|
.col-30 { flex: 0 0 30%; max-width: 30%; box-sizing: border-box; }
|
.col-28 { flex: 0 0 28%; max-width: 28%; box-sizing: border-box; }
|
.col-25 { flex: 0 0 25%; max-width: 25%; box-sizing: border-box; }
|
.col-17 { flex: 0 0 17%; max-width: 17%; box-sizing: border-box; }
|
.row-actions { margin-left: auto; margin-bottom: 0; }
|
}
|
|
.el-form-item {
|
margin-bottom: 16px;
|
margin-right: 20px;
|
|
&:last-child {
|
margin-right: 0;
|
}
|
}
|
}
|
}
|
|
.table-container {
|
position: relative;
|
z-index: 1;
|
|
.custom-table {
|
// 表头第二行文字大小调整
|
.el-table__header-wrapper {
|
.el-table__header {
|
th {
|
.cell {
|
font-size: 12px !important;
|
font-weight: 500;
|
}
|
}
|
}
|
}
|
|
// 确保表头所有行的文字大小一致
|
.el-table__header {
|
th {
|
.cell {
|
font-size: 12px !important;
|
font-weight: 500;
|
}
|
}
|
}
|
|
.el-table {
|
position: relative;
|
z-index: 1;
|
|
.main-order-row {
|
background-color: #f8f9fa;
|
font-weight: 600;
|
|
td {
|
border-bottom: 2px solid #e4e7ed;
|
}
|
}
|
|
.sub-order-row {
|
background-color: #ffffff;
|
|
td {
|
border-bottom: 1px solid #ebeef5;
|
}
|
}
|
}
|
}
|
}
|
|
.main-order-info {
|
.order-header {
|
display: flex;
|
flex-direction: row;
|
flex-wrap: nowrap;
|
gap: 20px;
|
align-items: center;
|
overflow: hidden;
|
|
.status-item{
|
flex-direction: row-reverse;
|
}
|
.order-item {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
flex-shrink: 0;
|
flex: 1;
|
|
.label {
|
color: #909399;
|
font-size: 12px;
|
min-width: 60px;
|
flex-shrink: 0;
|
}
|
|
.value {
|
color: #303133;
|
font-size: 12px;
|
font-weight: 500;
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
}
|
|
&.status-item {
|
justify-content: flex-start;
|
margin-left: 0;
|
}
|
}
|
}
|
}
|
|
.price-info {
|
font-size: 12px;
|
|
.price-points {
|
color: #e6a23c;
|
font-weight: 500;
|
}
|
|
.price-currency {
|
color: #67c23a;
|
font-weight: 500;
|
}
|
|
.price-agreement {
|
color: #409eff;
|
font-weight: 500;
|
}
|
|
.price-free {
|
color: #909399;
|
font-style: italic;
|
}
|
}
|
|
.period-info {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
font-size: 12px;
|
|
.permanent {
|
color: #909399;
|
font-size: 12px;
|
}
|
}
|
|
.product-name-merged {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 100%;
|
min-height: 60px;
|
font-weight: 500;
|
font-size: 14px;
|
color: #303133;
|
text-align: center;
|
line-height: 1.4;
|
}
|
|
.suite-name {
|
font-size: 12px;
|
color: #303133;
|
font-weight: 500;
|
}
|
|
.purchase-info-left,
|
.purchase-info-right {
|
.purchase-item {
|
display: flex;
|
align-items: center;
|
margin-bottom: 4px;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.label {
|
color: #909399;
|
font-size: 12px;
|
min-width: 60px;
|
flex-shrink: 0;
|
}
|
|
.value {
|
color: #303133;
|
font-size: 12px;
|
font-weight: 500;
|
}
|
}
|
}
|
|
.sub-order-actions-merged {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 100%;
|
min-height: 60px;
|
width: 100%;
|
font-weight: 500;
|
font-size: 14px;
|
color: #303133;
|
text-align: center;
|
line-height: 1.4;
|
|
.all-actions {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
gap: 6px;
|
width: 100%;
|
|
.action-item {
|
width: 100%;
|
|
.action-buttons {
|
display: flex;
|
flex-direction: column;
|
gap: 6px;
|
align-items: center;
|
justify-content: center;
|
width: 100%;
|
|
.el-button {
|
width: 100%;
|
text-align: center;
|
justify-content: center;
|
padding: 6px 12px;
|
font-size: 12px;
|
border-radius: 4px;
|
margin: 0;
|
height: auto;
|
line-height: 1.2;
|
}
|
|
.op-text {
|
margin: 4px 0;
|
text-align: center;
|
width: 100%;
|
padding: 4px 8px;
|
border-radius: 4px;
|
display: inline-block;
|
}
|
}
|
}
|
}
|
}
|
|
.sub-order-actions {
|
display: flex;
|
gap: 8px;
|
flex-wrap: wrap;
|
}
|
|
.op-text {
|
color: #606266;
|
font-size: 12px;
|
}
|
.op-text.warning {
|
color: #f59e0b;
|
font-size: 12px;
|
}
|
|
.quantity {
|
font-size: 12px;
|
color: #303133;
|
font-weight: 500;
|
}
|
|
.pagination-container {
|
display: flex;
|
justify-content: center;
|
margin-top: 20px;
|
}
|
|
// 确保表格不会覆盖页脚
|
:deep(.el-table) {
|
.el-table__fixed-right {
|
z-index: 2 !important;
|
}
|
|
.el-table__fixed-right-patch {
|
z-index: 2 !important;
|
}
|
|
// 操作列样式优化
|
.operation-column {
|
.cell {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 100%;
|
padding: 8px 4px;
|
}
|
}
|
}
|
|
// 确保页面整体层级正确
|
:deep(.el-card) {
|
position: relative;
|
z-index: 1;
|
}
|
|
// 修复可能的全局z-index冲突
|
:deep(.el-table__body-wrapper) {
|
z-index: 1 !important;
|
}
|
|
:deep(.el-table__header-wrapper) {
|
z-index: 1 !important;
|
}
|
|
.mt15 {
|
margin-top: 15px;
|
}
|
|
.spacer-cell {
|
height: 5px; // 与表头第二行保持一致
|
}
|
|
// 整个分隔行的可视样式
|
:deep(.el-table__body) tr:has(.spacer-cell) td {
|
background-color: #f0f2f5; // 柔和分隔色，便于区分每个订单块
|
}
|
|
:deep(.el-table__body) tr:has(.spacer-cell) td {
|
padding-top: 0 !important;
|
padding-bottom: 0 !important;
|
border-bottom: 2px solid #e4e7ed; // 显示分隔边框线
|
}
|
</style>
|
