detail.vue 8.32 KB
<template>
    <view class="page">
        <scroll-view class="scroll" scroll-y>
            <view class="detail-page">
                <view class="section">
                    <text class="row customer">{{ detail.code }}</text>
                    <view class="row"><text class="label">供方</text><text class="value">{{ detail.supplierName || '-'
                            }}</text></view>
                    <view class="row"><text class="label">需方</text><text class="value">{{ detail.buyerName || '-'
                            }}</text></view>
                    <view class="row"><text class="label">订货日期</text><text class="value">{{ detail.orderDate }}</text>
                    </view>
                    <view class="row"><text class="label">单位</text><text class="value">{{ detail.unit }}</text></view>
                </view>

                <view class="section1">
                    <ProductRel mode="view" :value="productList" />
                </view>

                <view class="section">
                    <view class="row"><text class="label">合计人民币金额(大写)</text><text class="value">{{
                        detail.totalAmountCapital || '-' }}</text></view>
                    <view class="row"><text class="label">交付定金、数额、时间</text><text class="value">{{ detail.depositInfo ||
                            '-' }}</text></view>
                    <view class="row"><text class="label">包装要求</text><text class="value">{{ detail.packagingRequirements
                            || '-' }}</text></view>
                    <view class="row"><text class="label">付款方式、付款期限</text><text class="value">{{ detail.paymentTerms ||
                            '-' }}</text></view>
                    <view class="row"><text class="label">运输方式</text><text class="value">{{ detail.transportMode || '-'
                            }}</text></view>
                    <view class="row"><text class="label">目的地</text><text class="value">{{ detail.destinationId || '-'
                            }}</text></view>
                    <view class="row"><text class="label">单价中是否已包含包装费</text><text class="value">{{
                        detail.includesPackagingFeeName || '-' }}</text></view>
                    <view class="row"><text class="label">单价中是否已包含运费</text><text class="value">{{
                        detail.includesTransportFeeName || '-' }}</text></view>
                    <view class="row"><text class="label">需方指定收货人</text><text class="value">{{
                        detail.designatedConsignee || '-' }}</text></view>

                    <view class="row"><text class="label">特别条款要求</text><text class="value">{{ detail.specialTermsName ||
                            '-' }}</text></view>
                    <view class="row"><text class="label">执行标准</text><text class="value">{{ detail.executionStandardName
                            || '-' }}</text></view>
                    <view class="row" v-if="detail.executionStandard === 'OTHER'"><text class="label">其他</text><text
                            class="value">{{ detail.executionStandardRemarks || '-' }}</text></view>
                    <view class="row"><text class="label">特别说明</text><text class="value">{{ detail.specialInstructions
                            || '-' }}</text></view>
                    <view class="row"><text class="label">备注</text><text class="value">{{ detail.remarks || '-'
                            }}</text></view>
                </view>

                <view class="section">
                    <view class="row"><text class="label">规范性合同</text><text class="value">{{ detail.standardFileName || '-'
                            }}</text></view>
                    <view class="row"><text class="label">合同是否规范</text><text class="value">{{ detail.standardStandardized ? '是' : '否' 
                            }}</text></view>
                </view>

                <view class="section">
                    <text class="row customer">具体质量要求</text>
                    <view class="row"><text class="label">件重条头</text><text class="value">{{ detail.pieceWeightHead ||
                            '-' }}</text></view>
                    <view class="row"><text class="label">表面</text><text class="value">{{ detail.surface || '-'
                            }}</text></view>
                    <view class="row"><text class="label">公差</text><text class="value">{{ detail.tolerance || '-'
                            }}</text></view>
                    <view class="row"><text class="label">性能</text><text class="value">{{ detail.performance || '-'
                            }}</text></view>
                    <view class="row"><text class="label">成分</text><text class="value">{{ detail.component || '-'
                            }}</text></view>
                    <view class="row"><text class="label">包装</text><text class="value">{{ detail.packaging || '-'
                            }}</text></view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { getContractApi } from '@/api/contract'
import ProductRel from './productRel.vue'
export default {
    name: 'ContractRetailDetail',
    components: { ProductRel },
    data() {
        return {
            id: '',
            detail: {
                code: '',
                supplier: '',
                supplierName: '',
                buyer: '',
                buyerName: '',
                orderDate: '',
                unit: '',
                designatedConsignee: '',
                specialTerms: '',
                specialTermsName: '',
                executionStandard: '',
                executionStandardName: '',
                executionStandardRemarks: '',
                includesPackagingFee: false,
                includesPackagingFeeName: '',
                includesTransportFee: false,
                includesTransportFeeName: '',
                totalAmountCapital: '',
                depositInfo: '',
                packagingRequirements: '',
                paymentTerms: '',
                transportMode: '',
                destinationId: '',
                specialInstructions: '',
                remarks: '',
                pieceWeightHead: '',
                surface: '',
                tolerance: '',
                performance: '',
                component: '',
                packaging: ''
            },
            productList: []
        }
    },
    onLoad(options) {
        const id = options && options.id ? options.id : ''
        this.id = id
        this.loadDetail()
    },
    methods: {
        async loadDetail() {
            if (!this.id) return
            try {
                const res = await getContractApi(this.id)
                const data = res && res.data ? res.data : {}
                const includesPackagingFeeName = data.includesPackagingFeeName || (data.includesPackagingFee ? '是' : '否')
                const includesTransportFeeName = data.includesTransportFeeName || (data.includesTransportFee ? '是' : '否')
                this.detail = { ...this.detail, ...data, includesPackagingFeeName, includesTransportFeeName }
                const lines = Array.isArray(data.contractDistributorLineList) ? data.contractDistributorLineList : []
                this.productList = lines
            } catch (e) {
                this.detail = { ...this.detail }
                this.productList = []
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.scroll {
    flex: 1;
    padding: 8rpx 0 144rpx;
}

.detail-page {
    background: #f3f3f3;
}

.section {
    padding: 32rpx;
    background: #fff;
    margin-bottom: 20rpx;
}
.section1 {
    background: #fff;
    margin-bottom: 20rpx;
}

.row {
    display: flex;
    margin-bottom: 20rpx;
    align-items: center;
}

.row:last-child {
    margin-bottom: 0;
}

.label {
    width: 280rpx;
    color: rgba(0, 0, 0, 0.6);
    font-size: 28rpx;
}

.value {
    flex: 1;
    text-align: right;
    color: rgba(0, 0, 0, 0.9);
    font-size: 28rpx;
}

.customer {
    font-weight: 600;
    font-size: 36rpx;
    color: rgba(0, 0, 0, 0.9);
    padding-bottom: 12rpx;
}
</style>