zhangchao/cz-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat ui设计稿bug修复

Browse Source
This commit is contained in:
Ironsp
2026-10-01 10:53:13 +08:00
parent 9ab6253c81
commit 1601bdd82c
89 changed files with 4741 additions and 3652 deletions
Download Patch File Download Diff File Expand all files Collapse all files

317
src/views/finance/cpns/BillTable.vue
View File

@@ -1,7 +1,6 @@
<script setup lang="ts">
import { ref, watch } from 'vue'
import { StatusTag } from '@/components'
import type { Bill, BillStatus } from '@/types/business/finance'
import { computed, ref, watch } from 'vue'
import type { Bill } from '@/types/business/finance'
import { formatMoney } from '@/utils/format'
interface Props {
@@ -27,6 +26,14 @@ watch(
},
)
const allSelected = computed(
() => props.bills.length > 0 && props.bills.every((bill) => selection.value.has(bill.id)),
)
const someSelected = computed(
() => props.bills.some((bill) => selection.value.has(bill.id)) && !allSelected.value,
)
function toggle(id: string): void {
if (selection.value.has(id)) selection.value.delete(id)
else selection.value.add(id)
@@ -34,8 +41,7 @@ function toggle(id: string): void {
}
function toggleAll(): void {
const allSelected = props.bills.length > 0 && props.bills.every((b) => selection.value.has(b.id))
if (allSelected) {
if (allSelected.value) {
for (const bill of props.bills) selection.value.delete(bill.id)
}
else {
@@ -44,57 +50,81 @@ function toggleAll(): void {
emit('update:selection', [...selection.value])
}
const allSelected = () => props.bills.length > 0 && props.bills.every((b) => selection.value.has(b.id))
const STATUS_VARIANTS: Record<BillStatus, 'warning' | 'success' | 'info' | 'danger'> = {
待支付: 'warning',
已支付: 'success',
未到期: 'info',
已取消: 'danger',
}
/** 列宽（设计 30 表头实测：序号 x121.5 / 账单名称 x384.9 / 账单号 x695.09 / 流水号 x843.12 /
* 项目名称 x1237.19 / 订单金额 x1576.6 / 状态 x1673.6 / 操作 x1768.6） */
const COLUMNS = [
{ key: 'index', label: '序号', className: 'bill-table__col--index' },
{ key: 'planName', label: '账单名称', className: 'bill-table__col--name' },
{ key: 'billNo', label: '账单号', className: 'bill-table__col--no' },
{ key: 'tradeNo', label: '交易流水号', className: 'bill-table__col--trade' },
{ key: 'projectName', label: '项目名称', className: 'bill-table__col--project' },
{ key: 'amount', label: '订单金额', className: 'bill-table__col--amount' },
{ key: 'status', label: '状态', className: 'bill-table__col--status' },
{ key: 'ops', label: '操作', className: 'bill-table__col--ops' },
] as const
</script>
<template>
<div class="bill-table card">
<table class="bill-table__table">
<thead>
<tr>
<th class="bill-table__check">
<input
type="checkbox"
:checked="allSelected()"
@change="toggleAll"
>
</th>
<th>序号</th>
<th>账单名称</th>
<th>账单号</th>
<th>交易流水号</th>
<th>项目名称</th>
<th>订单金额</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(bill, index) in bills" :key="bill.id">
<td class="bill-table__check">
<input
type="checkbox"
:checked="selection.has(bill.id)"
@change="toggle(bill.id)"
>
</td>
<td>{{ index + 1 }}</td>
<td>{{ bill.planName }}</td>
<td>{{ bill.billNo }}</td>
<td>{{ bill.tradeNo ?? '—' }}</td>
<td>{{ bill.projectName }}</td>
<td class="bill-table__amount">¥{{ formatMoney(bill.amount) }}</td>
<td>
<StatusTag :label="bill.status" :variant="STATUS_VARIANTS[bill.status]" />
</td>
<td class="bill-table__ops">
<table class="bill-table">
<colgroup>
<col class="bill-table__col--check">
<col
v-for="column in COLUMNS"
:key="column.key"
:class="column.className"
>
</colgroup>
<thead>
<tr>
<th class="bill-table__cell bill-table__cell--check">
<input
type="checkbox"
:checked="allSelected"
:indeterminate="someSelected"
@change="toggleAll"
>
</th>
<th
v-for="column in COLUMNS"
:key="column.key"
class="bill-table__cell"
>
{{ column.label }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="(bill, index) in bills" :key="bill.id">
<td class="bill-table__cell bill-table__cell--check">
<input
type="checkbox"
:checked="selection.has(bill.id)"
@change="toggle(bill.id)"
>
</td>
<td class="bill-table__cell">
{{ index + 1 }}
</td>
<td class="bill-table__cell">
{{ bill.planName }}
</td>
<td class="bill-table__cell">
{{ bill.billNo }}
</td>
<td class="bill-table__cell">
{{ bill.tradeNo ?? '—' }}
</td>
<td class="bill-table__cell">
{{ bill.projectName }}
</td>
<td class="bill-table__cell">
{{ formatMoney(bill.amount, 0) }}
</td>
<td class="bill-table__cell">
{{ bill.status }}
</td>
<td class="bill-table__cell bill-table__cell--ops">
<span class="bill-table__ops">
<button
v-if="bill.status === '待支付'"
class="bill-table__link"
@@ -105,116 +135,147 @@ const STATUS_VARIANTS: Record<BillStatus, 'warning' | 'success' | 'info' | 'dang
<button class="bill-table__link" @click="emit('view', bill.id)">
详情
</button>
</td>
</tr>
<tr v-if="bills.length === 0">
<td colspan="9" class="bill-table__empty text-secondary">
暂无账单数据
</td>
</tr>
</tbody>
</table>
</div>
</span>
</td>
</tr>
<tr v-if="bills.length === 0">
<td colspan="9" class="bill-table__empty">
暂无账单数据
</td>
</tr>
</tbody>
</table>
</template>
<style lang="less" scoped>
// 设计 30：表格贴满白卡（外层 .bills__board 提供卡底），全网格浅灰线 + 浅灰表头
// 设计 30：表头 (77.5,344.5) 1765×41.77 底 #F1F3F5；行高 43.77；文字 12px #4B5563
.bill-table {
padding: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
overflow-x: auto;
width: 1765px;
margin: 6.5px 0 0 14.5px; // 表头 x77.5 / y344.5，卡片内缘 x71 / y338
border-collapse: collapse;
table-layout: fixed;
font-size: 12px;
color: @finance-entry-text;
&__table {
width: 100%;
border-collapse: collapse;
font-size: 11px;
color: @text-color;
// 列宽按设计表头 x 递推（表头起点 x78，实宽 1765）：
// 序号 x121.5｜账单名称 x384.9｜账单号 x695.09｜流水 x843.12｜项目 x1237.19｜金额 x1576.6｜状态 x1673.6｜操作 x1768.6
&__col--check { width: 51px; }
&__col--index { width: 235.4px; }
&__col--name { width: 310.2px; }
&__col--no { width: 148px; }
&__col--trade { width: 394.1px; }
&__col--project { width: 339.4px; }
&__col--amount { width: 97px; }
&__col--status { width: 95px; }
&__col--ops { width: 95.5px; }
th,
td {
padding: 11px 10px;
text-align: left;
white-space: nowrap;
border: 1px solid @project-divider;
&__cell {
height: 43.77px;
padding: 0;
border-bottom: 1px solid @project-divider;
text-align: left;
vertical-align: middle;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-sizing: border-box;
// 单元格统一左内缩 10（除已单独指定的列）
&:not(&--check):not(&--ops) {
padding-left: 10px;
}
th {
background: @finance-table-head-bg;
color: @text-color;
font-weight: 600;
text-align: center;
&--check {
padding-left: 43.5px; // 勾选框/序号文字 x121.5 → 表头起点 78
}
tbody tr:hover {
background: @bg-color-light;
// 操作列内层 flex 已负责右对齐；单元格本身只管纵向居中
&--ops {
padding-right: 22px;
text-align: right;
}
}
// 列对齐按设计 30：序号/账单号/流水号/金额/状态/操作居中，名称类左对齐
&__table th:nth-child(1),
&__table th:nth-child(2),
&__table td:nth-child(1),
&__table td:nth-child(2),
&__table th:nth-child(4),
&__table td:nth-child(4),
&__table th:nth-child(5),
&__table td:nth-child(5),
&__table th:nth-child(7),
&__table td:nth-child(7),
&__table th:nth-child(8),
&__table td:nth-child(8),
&__table th:nth-child(9),
&__table td:nth-child(9) {
text-align: center;
// 各列文字起点对齐设计 x（表头起点 78）：内缩 = 设计 x − 列起点
@col-pad-1: 43.5px; // 序号 121.5
@col-pad-2: 149.9px; // 账单名称 384.9
@col-pad-3: 8px; // 账单号 695.09
@col-pad-4: 17px; // 流水号 843.12
@col-pad-5: 5px; // 项目名称 1237.19
@col-pad-6: 14.6px; // 订单金额 1576.6
@col-pad-7: 4.6px; // 状态 1673.6
@col-pad-8: 6px; // 操作 1768.6（右对齐由内层 flex 兜）
thead &__cell,
tbody &__cell {
&:nth-child(1) { padding-left: @col-pad-1; }
&:nth-child(2) { padding-left: @col-pad-2; }
&:nth-child(3) { padding-left: @col-pad-3; }
&:nth-child(4) { padding-left: @col-pad-4; }
&:nth-child(5) { padding-left: @col-pad-5; }
&:nth-child(6) { padding-left: @col-pad-6; }
&:nth-child(7) { padding-left: @col-pad-7; }
&:nth-child(8) { padding-left: @col-pad-8; }
&:nth-child(9) { padding-left: 0; padding-right: 10px; }
}
&__check {
width: 44px;
text-align: center;
thead &__cell {
height: 41.77px;
background: @finance-table-head-bg;
border-right: 1px solid @project-divider;
color: @finance-entry-text;
font-size: 12px;
font-weight: 600;
input {
width: 14px;
height: 14px;
accent-color: @primary-strong;
vertical-align: middle;
&:first-child {
border-left: 1px solid @project-divider;
}
}
// 金额列与正文同色（设计 30 实取 #4B5563 常规字重）
&__amount {
color: @text-color;
font-weight: 400;
tbody tr:hover {
background: @bg-color-light;
}
&__cell--check input {
width: 14px;
height: 14px;
margin: 0;
accent-color: @primary-strong;
vertical-align: middle;
}
&__ops {
.flex(row, center, center);
gap: 12px;
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
white-space: nowrap;
}
&__link {
// 设计：操作列起点 1746，末位「详情」右缘 1820.36 → 单元格右缘 1842.5
padding: 0;
border: none;
background: transparent;
color: @primary-strong;
font-size: 11px;
font-size: 12px;
font-weight: 400;
transition: color 0.2s;
// 「去支付」「详情」并排：设计文字盒距 18.36
+ .bill-table__link {
margin-left: 18.36px;
}
&:hover {
color: @primary-color;
}
}
&__empty {
height: 43.77px;
color: @project-muted;
text-align: center;
padding: @spacing-xl 0;
}
// 状态列按设计 30 为纯文字（去底色徽标）
:deep(.status-tag) {
padding: 0;
background: transparent;
color: @text-color;
font-size: 11px;
line-height: 1.5;
}
}
</style>