Squashed commit of the following:
commit90df51097fAuthor: 浅念 <email@sample.com> Date: Wed Sep 24 18:50:35 2025 +0800 备货单 采购单 commit7b1fdf3883Author: 浅念 <email@sample.com> Date: Wed Sep 24 11:15:31 2025 +0800 渠道筛选 commit1c81d3108cAuthor: 浅念 <email@sample.com> Date: Wed Sep 24 10:50:43 2025 +0800 客户列表 添加渠道筛选 commit2b877e9b4dAuthor: 浅念 <email@sample.com> Date: Mon Sep 22 10:20:46 2025 +0800 去掉编码显示 commitbee80af5afAuthor: 浅念 <email@sample.com> Date: Fri Sep 19 16:43:30 2025 +0800 港口添加 英文 commit045ce9289cAuthor: 浅念 <email@sample.com> Date: Thu Sep 18 15:17:30 2025 +0800 审批历史 和代办审批 commitc5ec4bb5e1Author: 浅念 <email@sample.com> Date: Thu Sep 18 11:31:22 2025 +0800 修改kpi commit9e260ddcd8Author: 浅念 <email@sample.com> Date: Thu Sep 18 09:49:33 2025 +0800 修改 kpi commit6feb3ace75Author: 浅念 <email@sample.com> Date: Thu Sep 18 09:42:44 2025 +0800 kpi 统计 commitec257a246dAuthor: 浅念 <email@sample.com> Date: Wed Sep 17 17:04:35 2025 +0800 修改 弹框表格 commitfa764852abAuthor: 浅念 <email@sample.com> Date: Wed Sep 17 15:54:35 2025 +0800 添加 账户简称 commit65f7f4a123Author: 浅念 <email@sample.com> Date: Wed Sep 17 15:10:28 2025 +0800 品牌加热门 修改 仪表盘接口 commit922cfec81dAuthor: 浅念 <email@sample.com> Date: Tue Sep 16 15:57:17 2025 +0800 调整备货单 crm 端页面 commit5c8df36f12Author: 浅念 <email@sample.com> Date: Mon Sep 15 17:14:38 2025 +0800 调整备货单 及各页面名称 commit5503a14408Author: 浅念 <email@sample.com> Date: Fri Sep 12 18:10:03 2025 +0800 账户添加公司 commit3439b45d9aAuthor: 浅念 <email@sample.com> Date: Fri Sep 12 17:53:26 2025 +0800 修改终版备货单 commit045d13eb7bAuthor: 浅念 <email@sample.com> Date: Fri Sep 12 17:49:07 2025 +0800 修改备货单 等页面 commitda690dfa06Author: 浅念 <email@sample.com> Date: Thu Sep 11 17:44:37 2025 +0800 修改 备货单 详情 commit853e9591b3Author: 浅念 <email@sample.com> Date: Wed Sep 10 18:11:39 2025 +0800 修改 备货单页面 commit9052bd1027Author: 浅念 <email@sample.com> Date: Tue Sep 9 20:53:30 2025 +0800 备货单 审核功能 commit079d9babb8Merge:ebd747991d810bAuthor: 浅念 <email@sample.com> Date: Tue Sep 9 14:51:43 2025 +0800 Merge branch 'feature/crm_pc' of http://219.157.255.213:25311/xinyouhe/art-design into feature/crm_vehicle commitebd7479573Merge:64e53b6459d306Author: 浅念 <email@sample.com> Date: Tue Sep 9 13:57:28 2025 +0800 Merge branch 'feature/crm_pc' of http://219.157.255.213:25311/xinyouhe/art-design into feature/crm_vehicle commit64e53b6ee9Author: 浅念 <email@sample.com> Date: Mon Sep 8 19:09:55 2025 +0800 备货单 加 审批流程 commit9bd7c89cb4Author: 浅念 <email@sample.com> Date: Thu Sep 4 15:09:17 2025 +0800 车辆信息，备货单 等页面 # Conflicts: # src/api/adminApi.ts # src/api/crmApi.ts # src/components/custom/OrderDetailContent.vue # src/composables/useOrderDetailDialog.ts # src/composables/useStockingForm.ts # src/views/admin/approval/stocking_auth.vue # src/views/admin/approval/stocking_auth_detil.vue # src/views/admin/stock/final_list_admin.vue # src/views/admin/stock/stocking_list_admin.vue # src/views/admin/user/index.vue # src/views/admin/vehicle/color.vue # src/views/admin/vehicle/modification.vue # src/views/admin/vehicle/port.vue # src/views/admin/vehicle/vehicle_list.vue # src/views/crmpc/approval/stocking_auth.vue # src/views/crmpc/stocking/Add.vue # src/views/crmpc/stocking/final_add.vue # src/views/crmpc/stocking/final_edit.vue # src/views/crmpc/stocking/final_list.vue # src/views/crmpc/stocking/stocking_edit.vue # src/views/crmpc/stocking/stocking_list.vue # src/views/crmpc/vehicle/color.vue # src/views/crmpc/vehicle/modification.vue # src/views/crmpc/vehicle/vehicle_list.vue
This commit is contained in:
浅念
@@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<div class="approval-timeline">
|
||||
<div v-for="(rec, idx) in records" :key="idx" class="timeline-item">
|
||||
<div class="left">
|
||||
<div class="avatar-box">
|
||||
<span class="initial">{{ rec.name?.slice(0, 1) || '—' }}</span>
|
||||
<i v-if="rec.approved" class="status-dot iconfont-sys"></i>
|
||||
<i v-if="rec.rejected" class="status-dot rejected"></i>
|
||||
<i v-else-if="rec.pending" class="status-dot pending iconfont-sys"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="row name-role">
|
||||
<span class="name">{{ rec.name }}</span>
|
||||
<span class="role">（{{ rec.role }}）</span>
|
||||
</div>
|
||||
<div >
|
||||
审核说明：{{ rec.comment }}
|
||||
</div>
|
||||
<div class="row time">{{ rec.time }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!records || !records.length" class="empty">暂无审批记录</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface ApprovalRecordItem {
|
||||
name?: string
|
||||
role?: string
|
||||
type?: string
|
||||
time?: string
|
||||
approved?: boolean
|
||||
rejected?: boolean
|
||||
pending?: boolean
|
||||
comment?: string
|
||||
}
|
||||
|
||||
defineProps<{ records: ApprovalRecordItem[] }>()
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 审批记录 时间线 */
|
||||
.approval-timeline {
|
||||
padding: 8px 4px 8px 0;
|
||||
}
|
||||
.timeline-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
position: relative;
|
||||
}
|
||||
.timeline-item + .timeline-item {
|
||||
margin-top: 50px;
|
||||
}
|
||||
.left {
|
||||
width: 46px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
.avatar-box {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
background: #3d7bff;
|
||||
border-radius: 10px;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
}
|
||||
.status-dot {
|
||||
position: absolute;
|
||||
right: -4px;
|
||||
bottom: -4px;
|
||||
font-size: 9px;
|
||||
padding: 3px 1px;
|
||||
border-radius: 50%;
|
||||
background: #22c55e;
|
||||
border: 2px solid #fff;
|
||||
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
.status-dot.pending {
|
||||
background: #3471ff;
|
||||
padding: 3px 3px;
|
||||
}
|
||||
.status-dot.rejected {
|
||||
background: #ff0000;
|
||||
padding: 3px 3px;
|
||||
}
|
||||
/* 连接下一个节点的虚线 */
|
||||
.timeline-item:not(:last-child) .left::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 52px; /* avatar 46px + 间距 6px */
|
||||
left: 23px; /* 盒子宽度一半，确保竖线居中 */
|
||||
width: 0;
|
||||
height: calc(100% + 16px); /* 加上相邻项之间的间距 */
|
||||
border-left: 2px dotted #bfbfbf;
|
||||
}
|
||||
.right {
|
||||
flex: 1;
|
||||
padding-top: 2px;
|
||||
}
|
||||
.row.name-role {
|
||||
color: #222;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.name {
|
||||
font-weight: 600;
|
||||
}
|
||||
.role {
|
||||
color: #666;
|
||||
margin-left: 4px;
|
||||
}
|
||||
.time {
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
margin-top: 2px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.empty {
|
||||
color: #999;
|
||||
padding: 8px 0 4px 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -8,7 +8,9 @@
|
||||
</div>
|
||||
<div class="basic-info-item">
|
||||
<span class="label">业务员:</span>
|
||||
<span class="value">{{ orderData.salesperson_snapshot || orderData.salesperson || '—' }}</span>
|
||||
<span class="value">{{
|
||||
orderData.salesperson_snapshot || orderData.salesperson || '—'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -26,19 +28,27 @@
|
||||
</td>
|
||||
<td>
|
||||
<span class="info-label"> 清关目的国:</span>
|
||||
<span class="info-value">{{ orderData.clearance_country_snapshot || orderData.clearanceCountry || '—' }}</span>
|
||||
<span class="info-value">{{
|
||||
orderData.clearance_country_snapshot || orderData.clearanceCountry || '—'
|
||||
}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="info-label"> 客户来源:</span>
|
||||
<span class="info-value">{{ orderData.customer_source_snapshot || orderData.customerSource || '—' }}</span>
|
||||
<span class="info-value">{{
|
||||
orderData.customer_source_snapshot || orderData.customerSource || '—'
|
||||
}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="info-label"> 客户名称:</span>
|
||||
<span class="info-value">{{ orderData.customer_snapshot || orderData.customerName || '—' }}</span>
|
||||
<span class="info-value">{{
|
||||
orderData.customer_snapshot || orderData.customerName || '—'
|
||||
}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="info-label"> 客户所在国:</span>
|
||||
<span class="info-value">{{ orderData.customer_country_snapshot || orderData.customerCountry || '—' }}</span>
|
||||
<span class="info-value">{{
|
||||
orderData.customer_country_snapshot || orderData.customerCountry || '—'
|
||||
}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
@@ -46,8 +56,16 @@
|
||||
|
||||
<!-- 订单详情表格（ArtTable） -->
|
||||
<div class="table-section">
|
||||
<ArtTable :data="vehItems" border :pagination="false">
|
||||
<ArtTable ref="tableRef" :data="vehItems" border :pagination="false">
|
||||
<template #default>
|
||||
<ElTableColumn type="expand" width="30">
|
||||
<template #default="scope">
|
||||
<div style="padding: 6px">
|
||||
<strong>备注：</strong>
|
||||
<span>{{ scope.row.remark || '暂无备注' }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="编号" width="60" align="center">
|
||||
<template #default="scope">{{ scope.$index + 1 }}</template>
|
||||
</ElTableColumn>
|
||||
@@ -61,66 +79,163 @@
|
||||
<template #default="scope">{{ scope.row.num ?? scope.row.quantity ?? 1 }}</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="颜色/外" align="center" prop="color_exterior_snapshot" />
|
||||
<ElTableColumn label="内饰" min-width="120" align="center" prop="color_interior_snapshot" />
|
||||
<ElTableColumn
|
||||
label="内饰"
|
||||
min-width="120"
|
||||
align="center"
|
||||
prop="color_interior_snapshot"
|
||||
/>
|
||||
<ElTableColumn label="改装" min-width="120" align="center" prop="modify" />
|
||||
<ElTableColumn label="官方指导价/二手挂牌价" min-width="175" align="center">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.mileage > 0">
|
||||
{{ scope.row.listing_price?.currency_info || scope.row.listing_price?.amount || scope.row.discount || '—' }}
|
||||
{{
|
||||
scope.row.listing_price?.currency_info ||
|
||||
scope.row.listing_price?.amount ||
|
||||
scope.row.discount ||
|
||||
'—'
|
||||
}}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ scope.row.official_price?.currency_info || scope.row.official_price?.amount || scope.row.discount || '—' }}
|
||||
{{
|
||||
scope.row.official_price?.currency_info ||
|
||||
scope.row.official_price?.amount ||
|
||||
scope.row.discount ||
|
||||
'—'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="优惠" min-width="120" align="center">
|
||||
<template #default="scope">
|
||||
<span v-if="scope.row.mileage > 0">
|
||||
{{ scope.row.reduction_price?.currency_info || scope.row.reduction_price?.amount || scope.row.discount || '—' }}
|
||||
{{
|
||||
scope.row.reduction_price?.currency_info ||
|
||||
scope.row.reduction_price?.amount ||
|
||||
scope.row.discount ||
|
||||
'—'
|
||||
}}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ scope.row.discount_price?.currency_info || scope.row.discount_price?.amount || scope.row.discount || '—' }}
|
||||
{{
|
||||
scope.row.discount_price?.currency_info ||
|
||||
scope.row.discount_price?.amount ||
|
||||
scope.row.discount ||
|
||||
'—'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="手续费" min-width="120" align="center">
|
||||
<template #default="scope">{{ scope.row.handling_fee?.currency_info || scope.row.handling_fee?.amount || scope.row.discount || '—' }}</template>
|
||||
<template #default="scope">{{
|
||||
scope.row.handling_fee?.currency_info ||
|
||||
scope.row.handling_fee?.amount ||
|
||||
scope.row.discount ||
|
||||
'—'
|
||||
}}</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="改装费" min-width="120" align="center">
|
||||
<template #default="scope">{{ scope.row.retrofit_fee?.currency_info || scope.row.retrofit_fee?.amount || scope.row.discount || '—' }}</template>
|
||||
<template #default="scope">{{
|
||||
scope.row.retrofit_fee?.currency_info ||
|
||||
scope.row.retrofit_fee?.amount ||
|
||||
scope.row.discount ||
|
||||
'—'
|
||||
}}</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="FOB运费" min-width="120" align="center">
|
||||
<template #default="scope">{{ scope.row.fob_transport_fee?.currency_info || scope.row.fob_transport_fee?.amount || scope.row.discount || '—' }}</template>
|
||||
<template #default="scope">{{
|
||||
scope.row.fob_transport_fee?.currency_info ||
|
||||
scope.row.fob_transport_fee?.amount ||
|
||||
scope.row.discount ||
|
||||
'—'
|
||||
}}</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="港杂费" min-width="120" align="center">
|
||||
<template #default="scope">{{ scope.row.port_misc_fee?.currency_info || scope.row.port_misc_fee?.amount || scope.row.discount || '—' }}</template>
|
||||
<template #default="scope">{{
|
||||
scope.row.port_misc_fee?.currency_info ||
|
||||
scope.row.port_misc_fee?.amount ||
|
||||
scope.row.discount ||
|
||||
'—'
|
||||
}}</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="海运费" min-width="120" align="center">
|
||||
<template #default="scope">{{ scope.row.ocean_freight?.currency_info || scope.row.ocean_freight?.amount || scope.row.discount || '—' }}</template>
|
||||
<template #default="scope">{{
|
||||
scope.row.ocean_freight?.currency_info ||
|
||||
scope.row.ocean_freight?.amount ||
|
||||
scope.row.discount ||
|
||||
'—'
|
||||
}}</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="佣金" min-width="120" align="center">
|
||||
<template #default="scope">{{
|
||||
scope.row.commission?.currency_info ||
|
||||
scope.row.commission?.amount ||
|
||||
scope.row.discount ||
|
||||
'—'
|
||||
}}</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="购置税" min-width="120" align="center">
|
||||
<template #default="scope">{{
|
||||
scope.row.purchase_tax?.currency_info ||
|
||||
scope.row.purchase_tax?.amount ||
|
||||
scope.row.discount ||
|
||||
'—'
|
||||
}}</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="预估退税额" min-width="120" align="center">
|
||||
<template #default="scope">{{
|
||||
scope.row.tax_refund?.currency_info ||
|
||||
scope.row.tax_refund?.amount ||
|
||||
scope.row.discount ||
|
||||
'—'
|
||||
}}</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="单价" min-width="120" align="center">
|
||||
<template #default="scope">{{ scope.row.unit_price?.currency_info || scope.row.unit_price?.amount || scope.row.discount || '—' }}</template>
|
||||
<template #default="scope">{{
|
||||
scope.row.unit_price?.currency_info ||
|
||||
scope.row.unit_price?.amount ||
|
||||
scope.row.discount ||
|
||||
'—'
|
||||
}}</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn label="总价" min-width="120" align="center">
|
||||
<template #default="scope">{{ scope.row.total_price?.currency_info || scope.row.total_price?.amount || scope.row.discount || '—' }}</template>
|
||||
<template #default="scope">{{
|
||||
scope.row.total_price?.currency_info ||
|
||||
scope.row.total_price?.amount ||
|
||||
scope.row.discount ||
|
||||
'—'
|
||||
}}</template>
|
||||
</ElTableColumn>
|
||||
<ElTableColumn fixed="right" label="利润" min-width="120" align="center">
|
||||
<template #default="scope">{{ scope.row.profit?.currency_info || scope.row.profit?.amount || scope.row.discount || '—' }}</template>
|
||||
<ElTableColumn fixed="right" label="利润" min-width="120" align="center">
|
||||
<template #default="scope">{{
|
||||
scope.row.profit?.currency_info ||
|
||||
scope.row.profit?.amount ||
|
||||
scope.row.discount ||
|
||||
'—'
|
||||
}}</template>
|
||||
</ElTableColumn>
|
||||
</template>
|
||||
</ArtTable>
|
||||
<div class="order-summary">
|
||||
<div class="summary-item">
|
||||
<span class="label">合同汇率:</span>
|
||||
<span class="value">{{ orderData.contract_exchange_rate || orderData.contractRate || '—' }}</span>
|
||||
<span class="value">{{
|
||||
orderData.contract_exchange_rate || orderData.contractRate || '—'
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="label">合计到岸价:</span>
|
||||
<span class="value">${{ formatPrice(Number(orderData.cif_total_amount?.amount ?? orderData.totalCif ?? 0)) }}</span>
|
||||
<span class="value"
|
||||
>${{
|
||||
formatPrice(Number(orderData.cif_total_amount?.amount ?? orderData.totalCif ?? 0))
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
<div class="summary-item">
|
||||
<span class="label">利润:</span>
|
||||
<span class="value">{{ orderData.profit_total?.currency_info || orderData.profit_total?.amount || '—' }}</span>
|
||||
<span class="value">{{
|
||||
orderData.profit_total?.currency_info || orderData.profit_total?.amount || '—'
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -131,34 +246,54 @@
|
||||
<tr>
|
||||
<td>
|
||||
<span class="info-label"> 清关人:</span>
|
||||
<span class="info-value">{{ orderData.declarant_name || orderData.declarant || '—' }}</span>
|
||||
<span class="info-value">{{
|
||||
orderData.declarant_name || orderData.declarant || '—'
|
||||
}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="info-label"> 预计发运日期:</span>
|
||||
<span class="info-value">{{ orderData.eta_ship_date || orderData.etaShipDate || '—' }}</span>
|
||||
<span class="info-value">{{
|
||||
orderData.eta_ship_date || orderData.etaShipDate || '—'
|
||||
}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="info-label"> 出运方式:</span>
|
||||
<span class="info-value">{{ orderData.shipping_method_snapshot || orderData.shippingMethod || '—' }}</span>
|
||||
<span class="info-value">{{
|
||||
orderData.shipping_method_snapshot || orderData.shippingMethod || '—'
|
||||
}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="info-label"> 国内收货港:</span>
|
||||
<span class="info-value">{{ orderData.domestic_port_snapshot || orderData.domesticPort || '—' }}</span>
|
||||
<span class="info-value">{{
|
||||
orderData.domestic_port_snapshot || orderData.domesticPort || '—'
|
||||
}}</span>
|
||||
</td>
|
||||
<td>
|
||||
<span class="info-label"> 贸易条款/清关目的港:</span>
|
||||
<span class="info-value">{{ orderData.trade_term_snapshot || orderData.tradeTerms || '—' }}/{{ orderData.clearance_port_snapshot || '—' }}</span>
|
||||
<span class="info-value"
|
||||
>{{ orderData.trade_term_snapshot || orderData.tradeTerms || '—' }}/{{
|
||||
orderData.clearance_port_snapshot || '—'
|
||||
}}</span
|
||||
>
|
||||
</td>
|
||||
<td>
|
||||
<span class="info-label"> 最迟到港时间:</span>
|
||||
<span class="info-value">{{ orderData.latest_arrival_date || orderData.latestArrival || '—' }}</span>
|
||||
<span class="info-value">{{
|
||||
orderData.latest_arrival_date || orderData.latestArrival || '—'
|
||||
}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- 计划收款信息 -->
|
||||
<div class="payment-section" v-if="(orderData.account_list && orderData.account_list.length) || (orderData.payments && orderData.payments.length)">
|
||||
<div
|
||||
class="payment-section"
|
||||
v-if="
|
||||
(orderData.account_list && orderData.account_list.length) ||
|
||||
(orderData.payments && orderData.payments.length)
|
||||
"
|
||||
>
|
||||
<div class="table-wrapper">
|
||||
<table class="payment-table">
|
||||
<thead>
|
||||
@@ -192,8 +327,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed } from 'vue'
|
||||
|
||||
import { defineComponent, computed, ref, onMounted, nextTick, watch } from 'vue'
|
||||
export default defineComponent({
|
||||
name: 'OrderDetailContent',
|
||||
props: {
|
||||
@@ -231,11 +365,34 @@
|
||||
const vehItems = computed(() => {
|
||||
return (props.orderData as any).veh_list || (props.orderData as any).items || []
|
||||
})
|
||||
const tableRef = ref()
|
||||
const expandWhenReady = () => {
|
||||
nextTick(() => {
|
||||
nextTick(() => {
|
||||
if (vehItems.value && vehItems.value.length) {
|
||||
tableRef.value?.expandAll?.()
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 默认展开所有行（等数据和表格渲染完成后再触发）
|
||||
expandWhenReady()
|
||||
})
|
||||
|
||||
watch(
|
||||
() => vehItems.value?.length,
|
||||
(len) => {
|
||||
if (len && len > 0) expandWhenReady()
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
return {
|
||||
paymentTableData,
|
||||
vehItems,
|
||||
formatPrice
|
||||
formatPrice,
|
||||
tableRef
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -406,7 +563,14 @@
|
||||
padding: 10px 8px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.el-table__expand-cell {
|
||||
padding: 0;
|
||||
border-top: none;
|
||||
}
|
||||
.el-table__expand-wrapper {
|
||||
padding: 10px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
/* 打印优化 */
|
||||
@media print {
|
||||
.order-detail-content {
|
||||
|
||||
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div class="detail-wrap">
|
||||
<div class="detail-grid">
|
||||
<div class="item">
|
||||
<span class="label">采购单号:</span>
|
||||
<span class="value">{{ detailData.order_no || '—' }}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">PI号:</span>
|
||||
<span class="value">{{ detailData.pi_no || '—' }}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">提交人:</span>
|
||||
<span class="value">{{ detailData.buyer_name || '—' }}</span>
|
||||
</div>
|
||||
<div class="item full">
|
||||
<span class="label">备注:</span>
|
||||
<span class="value">{{ detailData.remark || '—' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-block">
|
||||
<div class="block-title">合同文件</div>
|
||||
<div
|
||||
v-if="detailData.contract_file_url && detailData.contract_file_url.length"
|
||||
class="files-list"
|
||||
>
|
||||
<div class="file-row" v-for="(f, idx) in detailData.contract_file_url" :key="idx">
|
||||
<el-icon class="file-icon"><Document /></el-icon>
|
||||
<span class="file-name">{{ f.name }}</span>
|
||||
<a class="el-link el-link--primary" :href="f.url" target="_blank" rel="noopener">查看</a>
|
||||
<a class="el-link el-link--info" :href="f.url" :download="f.name">下载</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="empty-tip">无合同文件</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-block">
|
||||
<div class="block-title">备货单组</div>
|
||||
<div v-if="detailData.stock_order && detailData.stock_order.length" class="groups">
|
||||
<div class="group" v-for="(g, gi) in detailData.stock_order" :key="gi">
|
||||
<div class="group-head">
|
||||
<span class="order">{{ g.order_no || '备货单' }}</span>
|
||||
<span class="seller" v-if="g.salesperson_snapshot"
|
||||
>（{{ g.salesperson_snapshot }}）</span
|
||||
>
|
||||
<span class="date" v-if="g.biz_date">{{ g.biz_date }}</span>
|
||||
</div>
|
||||
<div class="chips">
|
||||
<span class="chip" v-for="(v, vi) in g.stock_order_items || []" :key="vi">
|
||||
{{ v.model_snapshot }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="empty-tip">无备货单数据</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { Document } from '@element-plus/icons-vue'
|
||||
import { PropType } from 'vue'
|
||||
|
||||
// 定义组件的数据类型
|
||||
interface DetailData {
|
||||
order_no?: string
|
||||
pi_no?: string
|
||||
buyer_name?: string
|
||||
remark?: string
|
||||
contract_file_url?: Array<{ name: string; url: string }>
|
||||
stock_order?: Array<{
|
||||
order_no?: string
|
||||
salesperson_snapshot?: string
|
||||
biz_date?: string
|
||||
stock_order_items?: Array<{ model_snapshot: string }>
|
||||
}>
|
||||
}
|
||||
|
||||
// 使用 Vue 的 props 传递数据
|
||||
export default {
|
||||
name: 'ProcurementDetailView',
|
||||
props: {
|
||||
detailData: {
|
||||
type: Object as PropType<DetailData>,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.detail-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px 16px;
|
||||
}
|
||||
.detail-grid .item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.detail-grid .item.full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.detail-grid .label {
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
.detail-grid .value {
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
.detail-block {
|
||||
border-top: 1px dashed var(--el-border-color-lighter);
|
||||
padding-top: 8px;
|
||||
}
|
||||
.block-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.files-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.file-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.file-name {
|
||||
flex: 1;
|
||||
}
|
||||
.empty-tip {
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
.groups {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 38vh;
|
||||
overflow-y: auto;
|
||||
gap: 12px;
|
||||
}
|
||||
.group {
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 10px;
|
||||
padding: 14px 6px 8px;
|
||||
background: var(--el-fill-color-blank);
|
||||
}
|
||||
.group-head {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
align-content: center;
|
||||
}
|
||||
.chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
.chip {
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
background: #f0f6ff;
|
||||
color: #3a7af3;
|
||||
border: 1px solid #e3edff;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div class="detail-wrap">
|
||||
<div class="detail-grid">
|
||||
<div class="item">
|
||||
<span class="label">采购单号:</span>
|
||||
<span class="value">{{ detailData.order_no || '—' }}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">PI号:</span>
|
||||
<span class="value">{{ detailData.pi_no || '—' }}</span>
|
||||
</div>
|
||||
<div class="item">
|
||||
<span class="label">提交人:</span>
|
||||
<span class="value">{{ detailData.buyer_name || '—' }}</span>
|
||||
</div>
|
||||
<div class="item full">
|
||||
<span class="label">备注:</span>
|
||||
<span class="value">{{ detailData.remark || '—' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-block">
|
||||
<div class="block-title">合同文件</div>
|
||||
<div
|
||||
v-if="detailData.contract_file_url && detailData.contract_file_url.length"
|
||||
class="files-list"
|
||||
>
|
||||
<div class="file-row" v-for="(f, idx) in detailData.contract_file_url" :key="idx">
|
||||
<el-icon class="file-icon"><Document /></el-icon>
|
||||
<span class="file-name">{{ f.name }}</span>
|
||||
<a class="el-link el-link--primary" :href="f.url" target="_blank" rel="noopener">查看</a>
|
||||
<a class="el-link el-link--info" :href="f.url" :download="f.name">下载</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="empty-tip">无合同文件</div>
|
||||
</div>
|
||||
|
||||
<div class="detail-block">
|
||||
<div class="block-title">备货单组</div>
|
||||
<div v-if="detailData.stock_order && detailData.stock_order.length" class="groups">
|
||||
<div class="group" v-for="(g, gi) in detailData.stock_order" :key="gi">
|
||||
<div class="group-head">
|
||||
<span class="order">{{ g.order_no || '备货单' }}</span>
|
||||
<span class="seller" v-if="g.salesperson_snapshot"
|
||||
>（{{ g.salesperson_snapshot }}）</span
|
||||
>
|
||||
<span class="date" v-if="g.biz_date">{{ g.biz_date }}</span>
|
||||
</div>
|
||||
<div class="chips">
|
||||
<span class="chip" v-for="(v, vi) in g.stock_order_items || []" :key="vi">
|
||||
{{ v.model_snapshot }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="empty-tip">无备货单数据</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Document } from '@element-plus/icons-vue'
|
||||
import { PropType } from 'vue'
|
||||
interface DetailData {
|
||||
order_no?: string
|
||||
pi_no?: string
|
||||
buyer_name?: string
|
||||
remark?: string
|
||||
contract_file_url?: Array<{ name: string; url: string }>
|
||||
stock_order?: Array<{
|
||||
order_no?: string
|
||||
salesperson_snapshot?: string
|
||||
biz_date?: string
|
||||
stock_order_items?: Array<{ model_snapshot: string }>
|
||||
}>
|
||||
}
|
||||
|
||||
defineProps({
|
||||
detailData: {
|
||||
type: Object as PropType<DetailData>,
|
||||
required: true
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.detail-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
.detail-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 10px 16px;
|
||||
}
|
||||
.detail-grid .item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.detail-grid .item.full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
.detail-grid .label {
|
||||
color: var(--el-text-color-regular);
|
||||
}
|
||||
.detail-grid .value {
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
.detail-block {
|
||||
border-top: 1px dashed var(--el-border-color-lighter);
|
||||
padding-top: 8px;
|
||||
}
|
||||
.block-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.files-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
.file-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
.file-name {
|
||||
flex: 1;
|
||||
}
|
||||
.empty-tip {
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
.groups {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 38vh;
|
||||
overflow-y: auto;
|
||||
gap: 12px;
|
||||
}
|
||||
.group {
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: 10px;
|
||||
padding: 14px 6px 8px;
|
||||
background: var(--el-fill-color-blank);
|
||||
}
|
||||
.group-head {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
align-content: center;
|
||||
}
|
||||
.chips {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
.chip {
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
background: #f0f6ff;
|
||||
color: #3a7af3;
|
||||
border: 1px solid #e3edff;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<el-drawer :with-header="false" :model-value="modelValue" :size="isMobile ? '100%' : '480px'" @close="$emit('update:modelValue', false)">
|
||||
<div class="chat-container">
|
||||
<div class="header">
|
||||
<div class="header-left">
|
||||
<span class="name">{{ title }}</span>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<el-icon class="icon-close" :size="20" @click="$emit('update:modelValue', false)">
|
||||
<Close />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="chat-messages" ref="messageContainer">
|
||||
<template v-for="(message, index) in messages" :key="index">
|
||||
<div :class="['message-item', String(message.user_id) === String(currentUserId) ? 'message-right' : 'message-left']">
|
||||
<el-avatar :size="32" :src="message.user_avatar" class="message-avatar" />
|
||||
<div class="message-content">
|
||||
<div class="message-info">
|
||||
<span class="sender-name">{{ message.user_name }}</span>
|
||||
<span class="message-time">{{ message.updated_at }}</span>
|
||||
</div>
|
||||
<div class="message-text" v-html="message.content"></div>
|
||||
<div class="message-attachments" v-if="message.attachment && message.attachment.length > 0">
|
||||
<div class="attachment-item" v-for="(attachment, attIndex) in message.attachment" :key="attIndex">
|
||||
<template v-if="/\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(attachment.original_name)">
|
||||
<img :src="attachment.storage_path_full" :alt="attachment.original_name" class="attachment-thumb" @click="handleChatImageClick(attachment.storage_path_full)" />
|
||||
</template>
|
||||
<template v-else-if="/\.(mp4|webm|ogg)$/i.test(attachment.original_name)">
|
||||
<video :src="attachment.storage_path_full" controls class="attachment-thumb" @click.prevent="handleChatVideoClick(attachment.storage_path_full)"></video>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="file-attachment">
|
||||
<el-icon class="file-icon"><Document /></el-icon>
|
||||
<span class="file-name">{{ attachment.original_name }}</span>
|
||||
<el-button type="primary" size="small" link @click="$emit('download', attachment)">下载</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<div class="chat-input" v-if="canAdd">
|
||||
<div class="chat-attachment-upload">
|
||||
<el-upload v-model:file-list="chatFileList" class="chat-upload" :action="actionImageUplode" :on-success="handleChatUploadSuccess" :headers="uploadHeaders" multiple :limit="5" :on-exceed="handleChatExceed" :show-file-list="false">
|
||||
<el-button type="primary" link>
|
||||
<el-icon><Paperclip /></el-icon>
|
||||
添加附件
|
||||
</el-button>
|
||||
</el-upload>
|
||||
<div class="uploaded-attachments" v-if="chatFileList.length > 0">
|
||||
<div class="attachment-preview-item" v-for="(file, idx) in chatFileList" :key="idx">
|
||||
<template v-if="/\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(file.name)">
|
||||
<img :src="file.file_url || file.response?.data?.file_url" :alt="file.name" class="preview-thumb" />
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-icon class="file-icon"><Document /></el-icon>
|
||||
</template>
|
||||
<span class="file-name">{{ file.name }}</span>
|
||||
<el-button type="danger" size="small" link @click="removeChatFile(idx)">
|
||||
<el-icon><Close /></el-icon>
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-input v-model="messageText" type="textarea" :rows="3" placeholder="输入消息" resize="none" />
|
||||
<div class="chat-input-actions">
|
||||
<el-button type="primary" @click="emitSend">发送</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 内置预览 -->
|
||||
<ElImageViewer v-if="imageViewerVisible" :url-list="chatImageList" :initial-index="imageViewerIndex" @close="closeImageViewer" />
|
||||
<ElDialog v-model="videoDialogVisible" width="60%" top="10vh" :show-close="true" append-to-body>
|
||||
<video v-if="currentVideoUrl" :src="currentVideoUrl" controls autoplay style="width: 100%; max-height: 70vh; display: block"></video>
|
||||
</ElDialog>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElImageViewer } from 'element-plus'
|
||||
import { Paperclip, Document, Close } from '@element-plus/icons-vue'
|
||||
const props = defineProps<{
|
||||
modelValue: boolean
|
||||
title?: string
|
||||
messages: any[]
|
||||
currentUserId: string | number
|
||||
canAdd?: boolean
|
||||
actionImageUplode?: string
|
||||
uploadHeaders?: Record<string, any>
|
||||
}>()
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: boolean): void
|
||||
(e: 'send', payload: { text: string; attachments: any[] }): void
|
||||
(e: 'download', attachment: any): void
|
||||
}>()
|
||||
|
||||
const { width } = useWindowSize()
|
||||
const isMobile = computed(() => width.value < 500)
|
||||
|
||||
const messageText = ref('')
|
||||
const chatFileList = ref<any[]>([])
|
||||
const messageContainer = ref<HTMLElement | null>(null)
|
||||
|
||||
watch(
|
||||
() => props.messages,
|
||||
() => {
|
||||
nextTick(() => {
|
||||
if (messageContainer.value) {
|
||||
messageContainer.value.scrollTop = messageContainer.value.scrollHeight
|
||||
}
|
||||
})
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
)
|
||||
|
||||
const handleChatUploadSuccess = (response: any, uploadFile: any, uploadFiles: any[]) => {
|
||||
chatFileList.value = uploadFiles
|
||||
.filter((item) => item.status === 'success')
|
||||
.map((item) => {
|
||||
const data = item.response?.data
|
||||
if (data) {
|
||||
return {
|
||||
name: data.original_name,
|
||||
file_url: data.storage_path_full,
|
||||
status: 'success',
|
||||
response: { data }
|
||||
}
|
||||
}
|
||||
return null
|
||||
})
|
||||
.filter(Boolean) as any[]
|
||||
}
|
||||
const handleChatExceed = () => {
|
||||
// no-op; parent can handle toast
|
||||
}
|
||||
const removeChatFile = (index: number) => {
|
||||
chatFileList.value.splice(index, 1)
|
||||
}
|
||||
const emitSend = () => {
|
||||
const text = messageText.value.trim()
|
||||
if (!text && chatFileList.value.length === 0) return
|
||||
const attachments = chatFileList.value.map((file) => {
|
||||
const data = file.response?.data
|
||||
if (data) {
|
||||
return {
|
||||
original_name: data.original_name,
|
||||
storage_path: data.storage_path || data.file_name
|
||||
}
|
||||
}
|
||||
return null
|
||||
}).filter(Boolean) as any[]
|
||||
emit('send', { text, attachments })
|
||||
messageText.value = ''
|
||||
chatFileList.value = []
|
||||
}
|
||||
|
||||
// 预览
|
||||
const chatImageList = ref<string[]>([])
|
||||
const imageViewerVisible = ref(false)
|
||||
const imageViewerIndex = ref(0)
|
||||
function handleChatImageClick(url: string) {
|
||||
chatImageList.value = [url]
|
||||
imageViewerIndex.value = 0
|
||||
imageViewerVisible.value = true
|
||||
}
|
||||
const currentVideoUrl = ref('')
|
||||
const videoDialogVisible = ref(false)
|
||||
function handleChatVideoClick(url: string) {
|
||||
currentVideoUrl.value = url
|
||||
videoDialogVisible.value = true
|
||||
}
|
||||
function closeImageViewer() {
|
||||
imageViewerVisible.value = false
|
||||
chatImageList.value = []
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 20px;
|
||||
.header-left .name { font-size: 16px; font-weight: 500; }
|
||||
.header-right .icon-close { cursor: pointer; }
|
||||
}
|
||||
.chat-container { display: flex; flex-direction: column; height: calc(100% - 70px); }
|
||||
.chat-messages { flex: 1; padding: 30px 16px; overflow-y: auto; border-top: 1px solid var(--el-border-color-lighter); }
|
||||
.message-item { display: flex; gap: 8px; align-items: flex-start; width: 100%; margin-bottom: 30px; }
|
||||
.message-item.message-left { justify-content: flex-start; }
|
||||
.message-item.message-right { flex-direction: row-reverse; }
|
||||
.message-content { display: flex; flex-direction: column; max-width: 70%; }
|
||||
.message-info { display: flex; gap: 8px; margin-bottom: 4px; font-size: 12px; }
|
||||
.message-text { font-size: 14px; color: var(--art-gray-900); border-radius: 6px; padding: 10px 14px; line-height: 1.4; white-space: pre-line; }
|
||||
.message-left .message-text { background-color: #f8f5ff; }
|
||||
.message-right .message-text { background-color: #e9f3ff; }
|
||||
.message-attachments { margin-top: 8px; }
|
||||
.message-attachments .attachment-thumb { max-width: 200px; max-height: 150px; border-radius: 6px; cursor: pointer; border: 1px solid var(--el-border-color-lighter); }
|
||||
.chat-input { padding: 16px 16px 0; }
|
||||
.chat-input-actions { display: flex; justify-content: right; margin-top: 12px; }
|
||||
.chat-attachment-upload { margin-bottom: 12px; }
|
||||
.uploaded-attachments { display: flex; flex-wrap: wrap; gap: 8px; }
|
||||
.attachment-preview-item { display: flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--el-fill-color-light); border-radius: 6px; border: 1px solid var(--el-border-color-lighter); max-width: 200px; }
|
||||
.preview-thumb { width: 40px; height: 40px; border-radius: 4px; object-fit: cover; }
|
||||
</style>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user