<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%">
|
<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%">
|
<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 status-item">
|
<el-tag :type="getStatusType(row.status)" size="small">{{ row.statusName }}</el-tag>
|
</div>
|
<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>
|
</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">
|
{{ row.unitPrice }}
|
</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>{{ row.period }}</span>
|
<span v-if="row.isPermanent" class="permanent">永久</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">
|
<el-button v-if="row.parentOrder.canApprove" type="primary" link size="small" @click="toApprove(row.parentOrder)">审批</el-button>
|
<el-button v-if="row.parentOrder.canCheck" type="primary" link size="small" @click="toCheckFiles(row.parentOrder)">核查文件</el-button>
|
<el-button type="primary" link size="small" @click="toDetail(row.parentOrder)">查看</el-button>
|
<el-button type="primary" link size="small" @click="toTrack(row.parentOrder)">追踪</el-button>
|
</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>
|
</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 { fetchApprovalPage } from '@/api/approvalManage'
|
|
const router = useRouter()
|
|
// 状态选项
|
const statusOptions = [
|
{ label: '全部', value: '' },
|
{ label: '待审核', value: 'WAIT_APPROVAL' },
|
{ label: '待上传文件', value: 'WAIT_UPLOAD' },
|
{ label: '待核查文件', value: 'WAIT_CHECK' },
|
{ label: '待交易确认', value: 'WAIT_CONFIRM' },
|
{ label: '已驳回', value: 'REJECTED' },
|
{ label: '已完成', value: 'FINISH' },
|
]
|
|
// 行业领域选项
|
const industryOptions = [
|
{ label: '建筑工程', value: 'construction' },
|
{ label: '交通工程', value: 'transportation' },
|
{ label: '水利工程', value: 'water' },
|
{ label: '电力工程', value: 'power' },
|
]
|
|
// 单位工程选项
|
const unitProjectOptions = [
|
{ label: '土建工程', value: 'civil' },
|
{ label: '安装工程', value: 'installation' },
|
{ label: '装饰工程', value: 'decoration' },
|
]
|
|
// 产品类型选项
|
const productTypeOptions = [
|
{ label: '企业私有SaaS版许可', value: 'enterprise_private' },
|
{ label: '企业公有SaaS版许可', value: 'enterprise_public' },
|
{ label: '项目公有SaaS版许可', value: 'project_public' },
|
{ label: '个人公有SaaS版许可', value: 'personal_public' },
|
]
|
|
// 产品类型子级选项
|
const productSubTypeOptions = [
|
{ label: '基础版', value: 'basic' },
|
{ label: '标准版', value: 'standard' },
|
{ label: '高级版', value: 'premium' },
|
]
|
|
// 查询条件
|
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 mockData = [
|
{
|
id: '1',
|
isMainOrder: true,
|
applyTime: '2025-05-21 10:00:00',
|
orderNo: '4348442557619205545',
|
demandSide: '中交方远建设有限公司',
|
supplySide: '中交方远科技有限公司',
|
status: 'WAIT_APPROVAL',
|
statusName: '待审核',
|
canApprove: true,
|
canCheck: false,
|
subOrders: [
|
{
|
id: '1-1',
|
isMainOrder: false,
|
productName: '中交方远智能实测实量管理系统',
|
suiteName: '企业私有SaaS版许可',
|
salesForm: '买断',
|
accountCount: 50,
|
customerObject: '企业',
|
concurrentCount: 50,
|
priceType: 'points',
|
unitPrice: '50,000',
|
quantity: 1,
|
period: 1,
|
isPermanent: true,
|
},
|
{
|
id: '1-2',
|
isMainOrder: false,
|
productName: '中交方远智能实测实量管理系统',
|
suiteName: '企业私有SaaS版OTA升级服务',
|
salesForm: 'OTA服务',
|
accountCount: 50,
|
customerObject: '企业',
|
concurrentCount: 50,
|
priceType: 'currency',
|
unitPrice: '7,500',
|
quantity: 1,
|
period: 1,
|
isPermanent: false,
|
},
|
{
|
id: '1-3',
|
isMainOrder: false,
|
productName: '中交方远智能实测实量管理系统',
|
suiteName: '企业私有SaaS版用户增量包',
|
salesForm: '私有增量包',
|
accountCount: 100,
|
customerObject: '企业',
|
concurrentCount: 100,
|
priceType: 'agreement',
|
unitPrice: '协议价',
|
quantity: 1,
|
period: 1,
|
isPermanent: false,
|
},
|
{
|
id: '1-4',
|
isMainOrder: false,
|
productName: '中交方远智能实测实量管理系统',
|
suiteName: '个人公有SaaS版许可',
|
salesForm: '私有增量包',
|
accountCount: 50,
|
customerObject: '个人',
|
concurrentCount: 50,
|
priceType: 'free',
|
unitPrice: '0',
|
quantity: 1,
|
period: 3,
|
isPermanent: true,
|
},
|
],
|
},
|
{
|
id: '2',
|
isMainOrder: true,
|
applyTime: '2025-05-20 10:00:00',
|
orderNo: '4347442557619205545',
|
demandSide: '华为技术有限公司',
|
supplySide: '华为软件技术有限公司',
|
status: 'WAIT_UPLOAD',
|
statusName: '待上传文件',
|
canApprove: false,
|
canCheck: false,
|
subOrders: [
|
{
|
id: '2-1',
|
isMainOrder: false,
|
productName: '基于国产芯片宽窄融合自组网设备的应用',
|
suiteName: '企业公有SaaS版许可',
|
salesForm: '租赁',
|
accountCount: 100,
|
customerObject: '企业',
|
concurrentCount: 100,
|
priceType: 'currency',
|
unitPrice: '80,000',
|
quantity: 1,
|
period: 1,
|
isPermanent: false,
|
},
|
],
|
},
|
{
|
id: '3',
|
isMainOrder: true,
|
applyTime: '2025-05-19 10:00:00',
|
orderNo: '4347342557619205545',
|
demandSide: '中交第四航务工程局有限公司',
|
supplySide: '中交第四航务工程局有限公司',
|
status: 'WAIT_CHECK',
|
statusName: '待核查文件',
|
canApprove: true,
|
canCheck: true,
|
subOrders: [
|
{
|
id: '3-1',
|
isMainOrder: false,
|
productName: '高桩码头辅助出图工具箱',
|
suiteName: '项目公有SaaS版许可',
|
salesForm: '租赁',
|
accountCount: 50,
|
customerObject: '项目部',
|
concurrentCount: 50,
|
priceType: 'currency',
|
unitPrice: '60,000',
|
quantity: 1,
|
period: 1,
|
isPermanent: false,
|
},
|
],
|
},
|
{
|
id: '4',
|
isMainOrder: true,
|
applyTime: '2025-05-18 10:00:00',
|
orderNo: '4347442557619205545',
|
demandSide: '中国交通建设股份有限公司',
|
supplySide: '中交公路规划设计院有限公司',
|
status: 'WAIT_CONFIRM',
|
statusName: '待交易确认',
|
canApprove: false,
|
canCheck: false,
|
subOrders: [
|
{
|
id: '4-1',
|
isMainOrder: false,
|
productName: '公路数字化方案设计系统',
|
suiteName: '企业公有SaaS版许可',
|
salesForm: '租赁',
|
accountCount: 100,
|
customerObject: '企业',
|
concurrentCount: 100,
|
priceType: 'currency',
|
unitPrice: '80,000',
|
quantity: 1,
|
period: 1,
|
isPermanent: false,
|
},
|
],
|
},
|
{
|
id: '5',
|
isMainOrder: true,
|
applyTime: '2025-05-17 10:00:00',
|
orderNo: '4347342557619205545',
|
demandSide: '中交第三航务工程局有限公司',
|
supplySide: '中交第三航务工程局有限公司',
|
status: 'REJECTED',
|
statusName: '已驳回',
|
canApprove: false,
|
canCheck: false,
|
subOrders: [
|
{
|
id: '5-1',
|
isMainOrder: false,
|
productName: '基于无人机的企业级可视化项目管理系统',
|
suiteName: '项目公有SaaS版许可',
|
salesForm: '租赁',
|
accountCount: 50,
|
customerObject: '项目部',
|
concurrentCount: 50,
|
priceType: 'free',
|
unitPrice: '0',
|
quantity: 1,
|
period: 1,
|
isPermanent: true,
|
},
|
],
|
},
|
]
|
|
// 获取状态类型
|
const getStatusType = (status: string) => {
|
const statusMap: Record<string, 'warning' | 'danger' | 'success' | 'info'> = {
|
WAIT_APPROVAL: 'warning',
|
WAIT_UPLOAD: 'warning',
|
WAIT_CHECK: 'warning',
|
WAIT_CONFIRM: 'warning',
|
REJECTED: 'danger',
|
FINISH: '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 () => {
|
// 模拟API调用，实际项目中这里会调用真实的API
|
// const { data } = (await fetchApprovalPage({ ...query, pageNo: page.current, pageSize: page.size })) as any
|
|
// 使用模拟数据
|
const flatData: any[] = []
|
mockData.forEach(order => {
|
flatData.push(order)
|
if (order.subOrders) {
|
order.subOrders.forEach((subOrder: any) => {
|
flatData.push({ ...subOrder, parentOrder: order })
|
})
|
}
|
// 在每个订单块的末尾插入一个分隔空行
|
flatData.push({ isSpacer: true, isMainOrder: false, parentOrder: order })
|
})
|
|
orderList.value = flatData
|
page.total = mockData.length
|
}
|
|
// 重置
|
const reset = () => {
|
Object.assign(query, {
|
productName: '',
|
industry: '',
|
unitProject: '',
|
productType: '',
|
productSubType: '',
|
orderNo: '',
|
status: '',
|
dateRange: [],
|
})
|
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) => router.push({ name: 'tradeTrack', params: { id: row.id } })
|
|
onMounted(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;
|
|
.order-item {
|
display: flex;
|
align-items: center;
|
gap: 8px;
|
flex-shrink: 0;
|
|
.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;
|
}
|
}
|
}
|
}
|
|
.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>
|
