| | |
| | | <template> |
| | | <view class="account-view"> |
| | | <!-- 使用通用页面头部组件 --> |
| | | <PageHeader title="台账详情" @back="goBack" /> |
| | | |
| | | <PageHeader title="台账详情" |
| | | @back="goBack" /> |
| | | <!-- 基本信息展示 --> |
| | | <view class="info-section"> |
| | | <view class="section-title">基本信息</view> |
| | |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <!-- 产品信息展示 --> |
| | | <view class="product-section" v-if="productData && productData.length > 0"> |
| | | <view class="product-section" |
| | | v-if="productData && productData.length > 0"> |
| | | <view class="section-title">产品信息</view> |
| | | <view class="product-card" v-for="(product, idx) in productData" :key="idx"> |
| | | <view class="product-card" |
| | | v-for="(product, idx) in productData" |
| | | :key="idx"> |
| | | <view class="product-header"> |
| | | <view class="product-title"> |
| | | <!-- 替换 van-icon 为 u-icon --> |
| | | <u-icon name="file-text" color="#2979ff" size="15" /> |
| | | <u-icon name="file-text" |
| | | color="#2979ff" |
| | | size="15" /> |
| | | <text class="product-productCategory">产品 {{ idx + 1 }}</text> |
| | | </view> |
| | | </view> |
| | | |
| | | <view class="product-info"> |
| | | <view class="info-grid"> |
| | | <view class="info-item"> |
| | |
| | | <text class="info-label">规格型号</text> |
| | | <text class="info-value">{{ product.specificationModel }}</text> |
| | | </view> |
| | | <view class="info-item"> |
| | | <!-- <view class="info-item"> |
| | | <text class="info-label">绑定机器</text> |
| | | <text class="info-value">{{ product.speculativeTradingName }}</text> |
| | | </view> |
| | | </view> --> |
| | | <view class="info-item"> |
| | | <text class="info-label">单位</text> |
| | | <text class="info-value">{{ product.unit }}</text> |
| | |
| | | </view> |
| | | </view> |
| | | </view> |
| | | |
| | | <view v-else class="no-product"> |
| | | <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 PageHeader from '@/components/PageHeader.vue'; |
| | | import { onMounted, ref } from "vue"; |
| | | import { getSalesLedgerWithProducts } from "@/api/salesManagement/salesLedger"; |
| | | import PageHeader from "@/components/PageHeader.vue"; |
| | | |
| | | // 获取页面参数 |
| | | const editData = ref(null); |
| | | // 获取页面参数 |
| | | const editData = ref(null); |
| | | |
| | | const form = ref({ |
| | | id: '', |
| | | salesContractNo: '', |
| | | customerContractNo: '', |
| | | customerId: '', |
| | | customerName: '', |
| | | projectName: '', |
| | | executionDate: '', |
| | | paymentMethod: '', |
| | | entryPerson: '', |
| | | entryPersonName: '', |
| | | entryDate: '', |
| | | salesman: '' |
| | | }); |
| | | |
| | | // 产品数据 |
| | | const productData = ref([]); |
| | | |
| | | // 返回上一页 |
| | | const goBack = () => { |
| | | // 清理本地存储的数据 |
| | | uni.removeStorageSync('editData'); |
| | | uni.navigateBack(); |
| | | }; |
| | | |
| | | // 填充表单数据 |
| | | const fillFormData = () => { |
| | | if (!editData.value) return; |
| | | |
| | | // 获取完整的产品信息 |
| | | getSalesLedgerWithProducts({ id: editData.value.id, type: 1 }).then((res) => { |
| | | productData.value = res.productData || []; |
| | | form.value = {...res} |
| | | const form = ref({ |
| | | id: "", |
| | | salesContractNo: "", |
| | | customerContractNo: "", |
| | | customerId: "", |
| | | customerName: "", |
| | | projectName: "", |
| | | executionDate: "", |
| | | paymentMethod: "", |
| | | entryPerson: "", |
| | | entryPersonName: "", |
| | | entryDate: "", |
| | | salesman: "", |
| | | }); |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | // 获取编辑数据并填充表单 |
| | | const editDataStr = uni.getStorageSync('editData'); |
| | | if (editDataStr) { |
| | | try { |
| | | editData.value = JSON.parse(editDataStr); |
| | | // 使用 nextTick 确保数据加载完成后再填充 |
| | | setTimeout(() => { |
| | | fillFormData(); |
| | | }, 100); |
| | | } catch (error) { |
| | | console.error('解析编辑数据失败:', error); |
| | | // 产品数据 |
| | | const productData = ref([]); |
| | | |
| | | // 返回上一页 |
| | | const goBack = () => { |
| | | // 清理本地存储的数据 |
| | | uni.removeStorageSync("editData"); |
| | | uni.navigateBack(); |
| | | }; |
| | | |
| | | // 填充表单数据 |
| | | const fillFormData = () => { |
| | | if (!editData.value) return; |
| | | |
| | | // 获取完整的产品信息 |
| | | getSalesLedgerWithProducts({ id: editData.value.id, type: 1 }).then(res => { |
| | | productData.value = res.productData || []; |
| | | form.value = { ...res }; |
| | | }); |
| | | }; |
| | | |
| | | onMounted(() => { |
| | | // 获取编辑数据并填充表单 |
| | | const editDataStr = uni.getStorageSync("editData"); |
| | | if (editDataStr) { |
| | | try { |
| | | editData.value = JSON.parse(editDataStr); |
| | | // 使用 nextTick 确保数据加载完成后再填充 |
| | | setTimeout(() => { |
| | | fillFormData(); |
| | | }, 100); |
| | | } catch (error) { |
| | | console.error("解析编辑数据失败:", error); |
| | | } |
| | | } |
| | | } |
| | | }); |
| | | }); |
| | | </script> |
| | | |
| | | <style scoped lang="scss"> |
| | | .account-view { |
| | | min-height: 100vh; |
| | | background: #f8f9fa; |
| | | padding-bottom: 2rem; |
| | | } |
| | | .account-view { |
| | | min-height: 100vh; |
| | | background: #f8f9fa; |
| | | padding-bottom: 2rem; |
| | | } |
| | | |
| | | .header { |
| | | display: flex; |
| | | align-items: center; |
| | | background: #fff; |
| | | padding: 1rem 1.25rem; |
| | | border-bottom: 0.0625rem solid #f0f0f0; |
| | | position: sticky; |
| | | top: 0; |
| | | z-index: 100; |
| | | } |
| | | .header { |
| | | display: flex; |
| | | align-items: center; |
| | | background: #fff; |
| | | padding: 1rem 1.25rem; |
| | | border-bottom: 0.0625rem solid #f0f0f0; |
| | | position: sticky; |
| | | top: 0; |
| | | z-index: 100; |
| | | } |
| | | |
| | | .title { |
| | | flex: 1; |
| | | text-align: center; |
| | | font-size: 1.125rem; |
| | | font-weight: 600; |
| | | color: #333; |
| | | } |
| | | .title { |
| | | flex: 1; |
| | | text-align: center; |
| | | font-size: 1.125rem; |
| | | font-weight: 600; |
| | | color: #333; |
| | | } |
| | | |
| | | .info-section { |
| | | background: #fff; |
| | | margin: 1rem; |
| | | padding: 1rem; |
| | | border-radius: 0.5rem; |
| | | box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.04); |
| | | } |
| | | .info-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-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-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: 0.5rem; |
| | | border-bottom: 0.0625rem solid #e8e8e8; |
| | | } |
| | | .section-title { |
| | | font-size: 1rem; |
| | | font-weight: 600; |
| | | color: #333; |
| | | margin-bottom: 1rem; |
| | | padding-bottom: 0.5rem; |
| | | border-bottom: 0.0625rem solid #e8e8e8; |
| | | } |
| | | |
| | | .info-grid { |
| | | display: grid; |
| | | grid-template-columns: 1fr 1fr; |
| | | gap: 0.75rem; |
| | | } |
| | | .info-grid { |
| | | display: grid; |
| | | grid-template-columns: 1fr 1fr; |
| | | gap: 0.75rem; |
| | | } |
| | | |
| | | .info-item { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 0.25rem; |
| | | } |
| | | .info-item { |
| | | display: flex; |
| | | flex-direction: column; |
| | | gap: 0.25rem; |
| | | } |
| | | |
| | | .info-label { |
| | | font-size: 0.75rem; |
| | | color: #666; |
| | | font-weight: 400; |
| | | } |
| | | .info-label { |
| | | font-size: 0.75rem; |
| | | color: #666; |
| | | font-weight: 400; |
| | | } |
| | | |
| | | .info-value { |
| | | font-size: 0.875rem; |
| | | color: #333; |
| | | font-weight: 500; |
| | | } |
| | | .info-value { |
| | | font-size: 0.875rem; |
| | | color: #333; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .info-value.highlight { |
| | | color: #2979ff; |
| | | font-weight: 600; |
| | | } |
| | | .info-value.highlight { |
| | | color: #2979ff; |
| | | font-weight: 600; |
| | | } |
| | | |
| | | .product-card { |
| | | background: #f8f9fa; |
| | | border-radius: 0.5rem; |
| | | padding: 1rem; |
| | | margin-bottom: 1rem; |
| | | border: 0.0625rem solid #e8e8e8; |
| | | } |
| | | .product-card { |
| | | background: #f8f9fa; |
| | | border-radius: 0.5rem; |
| | | padding: 1rem; |
| | | margin-bottom: 1rem; |
| | | border: 0.0625rem solid #e8e8e8; |
| | | } |
| | | |
| | | .product-header { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | margin-bottom: 1rem; |
| | | padding-bottom: 0.5rem; |
| | | border-bottom: 0.0625rem solid #e8e8e8; |
| | | } |
| | | .product-header { |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | margin-bottom: 1rem; |
| | | padding-bottom: 0.5rem; |
| | | border-bottom: 0.0625rem solid #e8e8e8; |
| | | } |
| | | |
| | | .product-title { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 0.5rem; |
| | | } |
| | | .product-title { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 0.5rem; |
| | | } |
| | | |
| | | .product-productCategory { |
| | | font-size: 0.875rem; |
| | | font-weight: 500; |
| | | color: #333; |
| | | } |
| | | .product-productCategory { |
| | | font-size: 0.875rem; |
| | | font-weight: 500; |
| | | color: #333; |
| | | } |
| | | |
| | | .product-info .info-grid { |
| | | grid-template-columns: 1fr 1fr; |
| | | gap: 0.5rem; |
| | | } |
| | | .product-info .info-grid { |
| | | grid-template-columns: 1fr 1fr; |
| | | gap: 0.5rem; |
| | | } |
| | | |
| | | .no-product { |
| | | text-align: center; |
| | | padding: 2rem; |
| | | color: #999; |
| | | font-size: 0.875rem; |
| | | } |
| | | .no-product { |
| | | text-align: center; |
| | | padding: 2rem; |
| | | color: #999; |
| | | font-size: 0.875rem; |
| | | } |
| | | </style> |