style(admin): unify dialog layouts and dense readonly presentation

2026-10-20 10:11:31 +08:00
parent 7ff7c9914f
commit 3267679758
214 changed files with 10931 additions and 2654 deletions
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import '@/styles/adminDensity.css'
 import '../financeDensity.css'
-import { computed, onBeforeUnmount, onMounted, reactive, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ArrowLeft, CreditCard, Download, MinusCircle, PlusCircle, Save } from '@lucide/vue'
 import { ElMessage } from 'element-plus'
@@ -11,6 +11,7 @@ import { listPlatformTenants, type PlatformTenantResource } from '@/modules/iam'
 import { getApiErrorDetails, getApiErrorMessage, type ApiErrorDetails } from '@/shared/api/http'
 import AdminPage from '@/shared/components/AdminPage.vue'
 import AppDialog from '@/shared/components/AppDialog.vue'
+import InlineHelp from '@/shared/components/InlineHelp.vue'
 import ApiErrorMeta from '@/shared/components/ApiErrorMeta.vue'
 import DataTable, { type DataTableColumn } from '@/shared/components/DataTable.vue'
 import DetailPageLayout from '@/shared/components/DetailPageLayout.vue'
@@ -70,6 +71,8 @@ const voucherPreviewOpen = ref(false)
 const voucherPreviewLoading = ref(false)
 const voucherPreviewUrl = ref('')
 const voucherPreviewName = ref('付款凭证')
+let voucherPreviewRequest = 0
+watch(voucherPreviewOpen, value => { if (!value) clearVoucherPreview() })

 const canView = computed(() => access.can('platform:finance:customer-account:list'))
 const canListCustomers = computed(() => canView.value || access.can('platform:customer:list'))
@@ -241,7 +244,7 @@ function openAdjustment(account: FinanceAccountSummary, type: 'RECHARGE' | 'DEDU
  adjustmentOpen.value = true
 }
 async function submitAdjustment() {
-  if (!adjustmentAccount.value) return
+  if (adjustmentSaving.value || !adjustmentAccount.value) return
  const amount = amountInput(adjustmentForm.amount)
  if (!amount || !adjustmentForm.occurredDate || !adjustmentForm.paymentMethod) { ElMessage.warning('请填写有效金额、发生日期和付款方式'); return }
  adjustmentSaving.value = true
@@ -287,7 +290,7 @@ function handleAccountAction(command: string, account: FinanceAccountSummary) {
  else handleAccountMore(command, account)
 }
 async function submitCreditLimit() {
-  if (!adjustmentAccount.value) return
+  if (creditLimitSaving.value || !adjustmentAccount.value) return
  const raw = creditLimitForm.amount.trim()
  const amount = Number(raw)
  if (!Number.isFinite(amount) || amount < 0 || !/^\d+(?:\.\d{1,2})?$/.test(raw)) {
@@ -318,7 +321,7 @@ function openReview(request: FinanceRechargeRequest) {
  reviewOpen.value = true
 }
 async function submitReview() {
-  if (!reviewRequest.value) return
+  if (reviewSaving.value || !reviewRequest.value) return
  reviewSaving.value = true
  try {
    await reviewFinanceRechargeRequest(reviewRequest.value.requestId, {
@@ -331,21 +334,25 @@ async function submitReview() {
  finally { reviewSaving.value = false }
 }
 function clearVoucherPreview() {
+  voucherPreviewRequest++
  if (voucherPreviewUrl.value) URL.revokeObjectURL(voucherPreviewUrl.value)
  voucherPreviewUrl.value = ''
 }
 async function previewVoucher(request: FinanceRechargeRequest) {
  clearVoucherPreview()
+  const requestSequence = ++voucherPreviewRequest
  voucherPreviewName.value = request.voucherFileName || '付款凭证'
  voucherPreviewOpen.value = true
  voucherPreviewLoading.value = true
  try {
    const blob = await downloadFinanceRechargeVoucher(request.requestId)
+    if (requestSequence !== voucherPreviewRequest || !voucherPreviewOpen.value) return
    voucherPreviewUrl.value = URL.createObjectURL(blob)
  } catch (error) {
+    if (requestSequence !== voucherPreviewRequest || !voucherPreviewOpen.value) return
    voucherPreviewOpen.value = false
    ElMessage.error(getApiErrorMessage(error, '付款凭证加载失败'))
-  } finally { voucherPreviewLoading.value = false }
+  } finally { if (requestSequence === voucherPreviewRequest) voucherPreviewLoading.value = false }
 }
 function customerName(customerId: string, snapshot?: string) {
  const masterName = customers.value.find((item) => String(item.id) === String(customerId))?.tenantName?.trim()
@@ -483,20 +490,54 @@ onBeforeUnmount(clearVoucherPreview)
      </DetailPageLayout>
      </section>
    </AdminPage>
-    <AppDialog class="admin-density-dialog" v-model="adjustmentOpen" :title="adjustmentForm.type === 'RECHARGE' ? '手工充值' : '手工扣款'" width="min(720px, calc(100vw - 28px))" :confirm-text="adjustmentForm.type === 'RECHARGE' ? '确认充值' : '确认扣款'" :confirm-type="adjustmentForm.type === 'RECHARGE' ? 'primary' : 'danger'" :confirm-loading="adjustmentSaving" @confirm="submitAdjustment">
-      <el-alert :title="adjustmentForm.type === 'RECHARGE' ? '充值会先归还已用授信，剩余金额计入实际余额。' : '扣款先使用未冻结的实际余额，不足部分再使用可用授信。'" :type="adjustmentForm.type === 'RECHARGE' ? 'info' : 'warning'" :closable="false" />
-      <el-form label-position="top" class="wallet-form density-form"><div class="wallet-form__grid"><el-form-item label="客户名称"><el-input :model-value="adjustmentAccount ? customerName(adjustmentAccount.customerId, adjustmentAccount.customerName) : ''" readonly /></el-form-item><el-form-item label="当前实际余额"><el-input :model-value="money(adjustmentAccount?.actualBalance)" readonly /></el-form-item><el-form-item v-if="adjustmentForm.type === 'DEDUCTION'" label="当前可用余额"><el-input :model-value="money(adjustmentAccount?.availableBalance)" readonly /></el-form-item><el-form-item :label="adjustmentForm.type === 'RECHARGE' ? '充值金额' : '扣款金额'" required><el-input v-model="adjustmentForm.amount" inputmode="decimal" placeholder="请输入大于 0 的金额" /></el-form-item><el-form-item :label="adjustmentForm.type === 'RECHARGE' ? '到账日期' : '扣款日期'" required><el-date-picker v-model="adjustmentForm.occurredDate" type="date" value-format="YYYY-MM-DD" /></el-form-item><el-form-item :label="adjustmentForm.type === 'RECHARGE' ? '充值方式' : '扣款方式'" required><el-select v-model="adjustmentForm.paymentMethod"><el-option label="银行转账" value="BANK_TRANSFER" /><el-option label="现金" value="CASH" /><el-option label="其他" value="OTHER" /></el-select></el-form-item><el-form-item label="关联单据"><el-input v-model="adjustmentForm.referenceNo" maxlength="128" placeholder="请输入关联业务单号（选填）" /></el-form-item></div><el-form-item :label="adjustmentForm.type === 'RECHARGE' ? '充值备注' : '扣款备注'"><el-input v-model="adjustmentForm.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="请输入备注（选填）" /></el-form-item></el-form>
+    <AppDialog class="admin-density-dialog" v-model="adjustmentOpen" :title="`${adjustmentForm.type === 'RECHARGE' ? '手工充值' : '手工扣款'} · ${adjustmentAccount ? customerName(adjustmentAccount.customerId, adjustmentAccount.customerName) : '—'}`" width="min(720px, calc(100vw - 28px))" fullscreenable :confirm-text="adjustmentForm.type === 'RECHARGE' ? '确认充值' : '确认扣款'" :confirm-type="adjustmentForm.type === 'RECHARGE' ? 'primary' : 'danger'" :confirm-loading="adjustmentSaving" @confirm="submitAdjustment">
+      <div class="density-dialog-sections">
+        <section class="density-dialog-section" data-tone="summary" aria-label="当前账户资料">
+          <h3 class="density-dialog-section__title">当前账户（CNY） <InlineHelp v-if="adjustmentForm.type === 'RECHARGE'" title="充值说明">充值会先归还已用授信，剩余金额计入实际余额。</InlineHelp></h3>
+          <table class="density-table wallet-summary"><tbody>
+            <tr><th scope="row">客户名称</th><td colspan="3">{{ adjustmentAccount ? customerName(adjustmentAccount.customerId, adjustmentAccount.customerName) : '—' }}</td></tr>
+            <tr><th scope="row">当前实际余额</th><td :colspan="adjustmentForm.type === 'DEDUCTION' ? 1 : 3">{{ money(adjustmentAccount?.actualBalance) }}</td><template v-if="adjustmentForm.type === 'DEDUCTION'"><th scope="row">当前可用余额</th><td>{{ money(adjustmentAccount?.availableBalance) }}</td></template></tr>
+          </tbody></table>
+        </section>
+        <el-alert v-if="adjustmentForm.type === 'DEDUCTION'" title="扣款先使用未冻结的实际余额，不足部分再使用可用授信。" type="warning" :closable="false" />
+        <section class="density-dialog-section" data-tone="work" aria-label="账户变动登记">
+          <h3 class="density-dialog-section__title">{{ adjustmentForm.type === 'RECHARGE' ? '充值登记' : '扣款登记' }}</h3>
+          <el-form label-position="left" label-width="100px" class="density-form" :disabled="adjustmentSaving">
+            <table class="density-table density-table--editable wallet-adjustment-table"><tbody>
+              <tr><td><el-form-item :label="adjustmentForm.type === 'RECHARGE' ? '充值金额' : '扣款金额'" required><el-input v-model="adjustmentForm.amount" inputmode="decimal" placeholder="请输入大于 0 的金额" /></el-form-item></td><td><el-form-item :label="adjustmentForm.type === 'RECHARGE' ? '到账日期' : '扣款日期'" required><el-date-picker v-model="adjustmentForm.occurredDate" type="date" value-format="YYYY-MM-DD" /></el-form-item></td></tr>
+              <tr><td><el-form-item :label="adjustmentForm.type === 'RECHARGE' ? '充值方式' : '扣款方式'" required><el-select v-model="adjustmentForm.paymentMethod"><el-option label="银行转账" value="BANK_TRANSFER" /><el-option label="现金" value="CASH" /><el-option label="其他" value="OTHER" /></el-select></el-form-item></td><td><el-form-item label="关联单据"><el-input v-model="adjustmentForm.referenceNo" maxlength="128" placeholder="请输入关联业务单号（选填）" /></el-form-item></td></tr>
+              <tr><td colspan="2"><el-form-item :label="adjustmentForm.type === 'RECHARGE' ? '充值备注' : '扣款备注'"><el-input v-model="adjustmentForm.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="请输入备注（选填）" /></el-form-item></td></tr>
+            </tbody></table>
+          </el-form>
+        </section>
+      </div>
    </AppDialog>
-    <AppDialog class="admin-density-dialog" v-model="creditLimitOpen" title="设置授信额度" width="min(560px, calc(100vw - 28px))" confirm-text="保存授信额度" :confirm-loading="creditLimitSaving" @confirm="submitCreditLimit">
-      <el-alert title="授信到期日当天仍有效，次日授信失效；届时负数实际余额将阻止客户提交新订单。" type="warning" :closable="false" />
-      <el-form label-position="top" class="wallet-form density-form"><el-form-item label="客户名称"><el-input :model-value="adjustmentAccount ? customerName(adjustmentAccount.customerId, adjustmentAccount.customerName) : ''" readonly /></el-form-item><el-form-item label="当前已用授信"><el-input :model-value="money(adjustmentAccount?.creditUsed)" readonly /></el-form-item><el-form-item label="授信额度" required><el-input v-model="creditLimitForm.amount" inputmode="decimal" placeholder="请输入大于或等于 0 的金额" /></el-form-item><el-form-item label="授信到期日" required><el-date-picker v-model="creditLimitForm.expiresOn" type="date" value-format="YYYY-MM-DD" :disabled-date="disableCreditExpiry" placeholder="请选择今天以后的日期" /></el-form-item><el-form-item label="调整说明"><el-input v-model="creditLimitForm.remark" type="textarea" :rows="3" maxlength="500" show-word-limit placeholder="请输入授信调整说明（选填）" /></el-form-item></el-form>
+    <AppDialog class="admin-density-dialog" v-model="creditLimitOpen" :title="`设置授信额度 · ${adjustmentAccount ? customerName(adjustmentAccount.customerId, adjustmentAccount.customerName) : '—'}`" width="min(560px, calc(100vw - 28px))" fullscreenable confirm-text="保存授信额度" :confirm-loading="creditLimitSaving" @confirm="submitCreditLimit">
+      <div class="density-dialog-sections">
+        <section class="density-dialog-section" data-tone="summary" aria-label="当前授信资料"><h3 class="density-dialog-section__title">当前授信（CNY）</h3><table class="density-table wallet-summary"><tbody><tr><th scope="row">客户名称</th><td>{{ adjustmentAccount ? customerName(adjustmentAccount.customerId, adjustmentAccount.customerName) : '—' }}</td></tr><tr><th scope="row">当前已用授信</th><td>{{ money(adjustmentAccount?.creditUsed) }}</td></tr></tbody></table></section>
+        <el-alert title="授信到期日当天仍有效，次日授信失效；届时负数实际余额将阻止客户提交新订单。" type="warning" :closable="false" />
+        <section class="density-dialog-section" data-tone="work" aria-label="授信额度设置"><h3 class="density-dialog-section__title">授信设置</h3>
+          <el-form label-position="left" label-width="100px" class="density-form" :disabled="creditLimitSaving"><table class="density-table density-table--editable"><tbody>
+            <tr><td><el-form-item label="授信额度" required><el-input v-model="creditLimitForm.amount" inputmode="decimal" placeholder="请输入大于或等于 0 的金额" /></el-form-item></td></tr>
+            <tr><td><el-form-item label="授信到期日" required><el-date-picker v-model="creditLimitForm.expiresOn" type="date" value-format="YYYY-MM-DD" :disabled-date="disableCreditExpiry" placeholder="请选择今天以后的日期" /></el-form-item></td></tr>
+            <tr><td><el-form-item label="调整说明"><el-input v-model="creditLimitForm.remark" type="textarea" :rows="3" maxlength="500" show-word-limit placeholder="请输入授信调整说明（选填）" /></el-form-item></td></tr>
+          </tbody></table></el-form>
+        </section>
+      </div>
    </AppDialog>
-    <AppDialog class="admin-density-dialog" v-model="reviewOpen" title="审核充值申请" width="min(620px, calc(100vw - 28px))" confirm-text="确认审核" :confirm-loading="reviewSaving" @confirm="submitReview">
-      <el-descriptions class="density-descriptions" v-if="reviewRequest" :column="2" border><el-descriptions-item label="申请单号">{{ reviewRequest.requestNo }}</el-descriptions-item><el-descriptions-item label="充值金额">{{ money(reviewRequest.amount) }}</el-descriptions-item><el-descriptions-item label="付款凭证">{{ reviewRequest.voucherFileName || '—' }}</el-descriptions-item></el-descriptions>
-      <el-form label-position="top" class="review-form density-form"><el-form-item label="审核结果" required><el-radio-group v-model="reviewForm.decision"><el-radio value="APPROVE">通过</el-radio><el-radio value="REJECT">驳回</el-radio></el-radio-group></el-form-item><el-form-item label="审核备注"><el-input v-model="reviewForm.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="请输入审核备注（选填）" /></el-form-item></el-form>
+    <AppDialog class="admin-density-dialog" v-model="reviewOpen" :title="`审核充值申请 · ${reviewRequest?.requestNo || '—'}`" width="min(620px, calc(100vw - 28px))" fullscreenable confirm-text="确认审核" :confirm-loading="reviewSaving" @confirm="submitReview">
+      <div class="density-dialog-sections">
+        <section v-if="reviewRequest" class="density-dialog-section" data-tone="source" aria-label="充值申请资料"><h3 class="density-dialog-section__title">充值申请</h3><table class="density-table wallet-summary"><tbody><tr><th scope="row">申请单号</th><td>{{ reviewRequest.requestNo || '—' }}</td></tr><tr><th scope="row">充值金额（CNY）</th><td>{{ money(reviewRequest.amount) }}</td></tr><tr><th scope="row">付款凭证</th><td>{{ reviewRequest.voucherFileName || '—' }}</td></tr></tbody></table></section>
+        <section class="density-dialog-section" data-tone="work" aria-label="充值审核登记"><h3 class="density-dialog-section__title">审核登记</h3>
+          <el-form label-position="left" label-width="100px" class="density-form" :disabled="reviewSaving"><table class="density-table density-table--editable"><tbody>
+            <tr><td><el-form-item label="审核结果" required><el-radio-group v-model="reviewForm.decision"><el-radio value="APPROVE">通过</el-radio><el-radio value="REJECT">驳回</el-radio></el-radio-group></el-form-item></td></tr>
+            <tr><td><el-form-item label="审核备注"><el-input v-model="reviewForm.remark" type="textarea" :rows="3" maxlength="1000" show-word-limit placeholder="请输入审核备注（选填）" /></el-form-item></td></tr>
+          </tbody></table></el-form>
+        </section>
+      </div>
    </AppDialog>
-    <AppDialog class="admin-density-dialog" v-model="voucherPreviewOpen" :title="voucherPreviewName" width="min(920px, calc(100vw - 28px))" :show-footer="false" @closed="clearVoucherPreview">
-      <div v-loading="voucherPreviewLoading" class="voucher-preview"><img v-if="voucherPreviewUrl" class="voucher-preview__image" :src="voucherPreviewUrl" :alt="voucherPreviewName" /></div>
+    <AppDialog class="admin-density-dialog" v-model="voucherPreviewOpen" :title="voucherPreviewName" width="min(920px, calc(100vw - 28px))" fullscreenable :loading="voucherPreviewLoading" :show-footer="false">
+      <section class="density-dialog-section" data-tone="source" aria-label="付款凭证"><div class="voucher-preview"><img v-if="voucherPreviewUrl" class="voucher-preview__image" :src="voucherPreviewUrl" :alt="voucherPreviewName" /></div></section>
    </AppDialog>
  </AdminPage>
 </template>
@@ -628,21 +669,10 @@ onBeforeUnmount(clearVoucherPreview)
  color: var(--cc-muted);
 }

-.wallet-form,
-.review-form {
-  margin-top: var(--admin-space-5);
-}
-
-.wallet-form__grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 0 var(--admin-space-5);
-}
-
-.wallet-form :deep(.el-date-editor),
-.wallet-form :deep(.el-select) {
-  width: 100%;
-}
+.wallet-summary { table-layout: fixed; }
+.wallet-summary th { width: var(--admin-label-width); }
+.wallet-adjustment-table { table-layout: fixed; }
+.wallet-adjustment-table td:not([colspan]) { width: 50%; }

 .detail-footer {
  width: 100%;
@@ -675,12 +705,6 @@ onBeforeUnmount(clearVoucherPreview)
  }
 }

-@media (max-width: 720px) {
-  .wallet-form__grid {
-    grid-template-columns: 1fr;
-  }
-}
-
@media (max-width: 720px) {
  .detail-heading {
    align-items: stretch;