| | |
| | | </view> |
| | | <view class="info-item"> |
| | | <text class="info-label">客户合同号</text> |
| | | <text class="info-value">{{ form.customerContractNo }}</text> |
| | | <text class="info-value highlight">{{ form.customerContractNo }}</text> |
| | | </view> |
| | | <view class="info-item"> |
| | | <text class="info-label">客户名称</text> |
| | |
| | | </view> |
| | | <view class="info-item"> |
| | | <text class="info-label">未开票金额(元)</text> |
| | | <text class="info-value redlight">{{ form.noInvoiceAmountTotal }}</text> |
| | | <text class="info-value highlight">{{ form.noInvoiceAmountTotal }}</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | |
| | | <view class="product-card" v-for="(product, idx) in productData" :key="idx"> |
| | | <view class="product-header"> |
| | | <view class="product-title"> |
| | | <van-icon name="description" color="#2979ff" size="15" /> |
| | | <!-- 使用u-icon替代up-icon --> |
| | | <u-icon name="file-text" color="#2979ff" size="15" /> |
| | | <text class="product-productCategory">产品 {{ idx + 1 }}</text> |
| | | </view> |
| | | </view> |
| | |
| | | <text class="info-label">数量</text> |
| | | <text class="info-value highlight">{{ product.quantity }}</text> |
| | | </view> |
| | | <view class="info-item"> |
| | | <text class="info-label">含税单价(元)</text> |
| | | <text class="info-value highlight">{{ product.taxInclusiveUnitPrice }}</text> |
| | | </view> |
| | | <view class="info-item"> |
| | | <text class="info-label">含税单价(元)</text> |
| | | <text class="info-value highlight">{{ product.taxInclusiveUnitPrice }}</text> |
| | | </view> |
| | | <view class="info-item"> |
| | | <text class="info-label">含税总价(元)</text> |
| | | <text class="info-value highlight">{{ product.taxInclusiveTotalPrice }}</text> |
| | |
| | | </view> |
| | | <view class="info-item"> |
| | | <text class="info-label">未开票金额(元)</text> |
| | | <text class="info-value redlight">{{ product.noInvoiceAmount }}</text> |
| | | <text class="info-value highlight">{{ product.noInvoiceAmount }}</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 无产品信息提示 --> |
| | | <view class="no-product" v-else> |
| | | |
| | | <view v-else class="no-product"> |
| | | <text>暂无产品信息</text> |
| | | </view> |
| | | </view> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { onMounted, ref } from 'vue'; |
| | | import { getSalesLedgerWithProducts } from "@/api/salesManagement/salesLedger"; |
| | | import {onMounted, ref} from 'vue'; |
| | | import {getSalesLedgerWithProducts} from "@/api/salesManagement/salesLedger"; |
| | | |
| | | // 表单数据 |
| | | const form = ref({ |
| | |
| | | // 获取完整的产品信息 |
| | | getSalesLedgerWithProducts({ id: editData.value.id, type: 1 }).then((res) => { |
| | | productData.value = res.productData || []; |
| | | form.value = {...editData.value} |
| | | }); |
| | | |
| | | // 填充基本信息 |
| | | form.value.salesContractNo = editData.value.salesContractNo || ''; |
| | | form.value.customerContractNo = editData.value.customerContractNo || ''; |
| | | form.value.customerName = editData.value.customerName || ''; |
| | | form.value.projectName = editData.value.projectName || ''; |
| | | form.value.executionDate = editData.value.executionDate || ''; |
| | | form.value.contractAmount = editData.value.contractAmount || ''; |
| | | form.value.salesman = editData.value.salesman || ''; |
| | | form.value.invoiceTotal = editData.value.invoiceTotal || 0; |
| | | form.value.noInvoiceAmountTotal = editData.value.noInvoiceAmountTotal || 0; |
| | | form.value.id = editData.value.id || ''; |
| | | form.value.customerId = editData.value.customerId || ''; |
| | | }; |
| | | |
| | | onMounted(() => { |
| | |
| | | position: sticky; |
| | | top: 0; |
| | | z-index: 100; |
| | | /* 兼容 iOS 刘海/灵动岛安全区 */ |
| | | padding-top: env(safe-area-inset-top); |
| | | } |
| | | |
| | | .title { |
| | |
| | | box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04); |
| | | } |
| | | |
| | | .product-section { |
| | | background: #fff; |
| | | margin: 1rem; |
| | | padding: 1rem; |
| | | border-radius: 0.5rem; |
| | | box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04); |
| | | } |
| | | |
| | | .section-title { |
| | | font-size: 1rem; |
| | | font-weight: 600; |
| | | color: #333; |
| | | margin-bottom: 1rem; |
| | | padding-bottom: 1rem; |
| | | padding-bottom: 0.5rem; |
| | | border-bottom: 0.0625rem solid #e8e8e8; |
| | | } |
| | | |
| | |
| | | color: #2979ff; |
| | | font-weight: 600; |
| | | } |
| | | .info-value.redlight { |
| | | color: red; |
| | | font-weight: 600; |
| | | } |
| | | |
| | | .product-section { |
| | | background: #fff; |
| | | margin: 1rem; |
| | | padding: 1rem; |
| | | border-radius: 0.5rem; |
| | | box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04); |
| | | } |
| | | |
| | | .product-card { |
| | | background: #f8f9fa; |
| | | border-radius: 0.5rem; |
| | | padding: 1rem; |
| | | margin-bottom: 1rem; |
| | | } |
| | | |
| | | .product-card:last-child { |
| | | margin-bottom: 0; |
| | | border: 0.0625rem solid #e8e8e8; |
| | | } |
| | | |
| | | .product-header { |
| | | display: flex; |
| | | align-items: center; |
| | | padding-bottom: 0.75rem; |
| | | border-bottom: 0.0625rem solid #e8e8e8; |
| | | justify-content: space-between; |
| | | margin-bottom: 1rem; |
| | | padding-bottom: 0.5rem; |
| | | border-bottom: 0.0625rem solid #e8e8e8; |
| | | } |
| | | |
| | | .product-title { |