guomao/guomaoUniapp/components/pages/beijing/contract/xsContractDetail.vue

<template>
	<view style="margin: 25rpx 25rpx 75rpx 25rpx;">
		<uni-collapse :arrow = "true" :accordion="false" :head-style="{'font-size' : '16px'}">
			<u-form label-position = "left" label-width = "auto">
				<uni-collapse-item title="客户信息" :open="true">
					<view style = "background-color: #ffffff;padding: 0px 12px;">
						<u-form-item label="客户名称:"><u-input v-model="form.sellName" /></u-form-item>
						<u-form-item label="签约日期:"><u-input v-model="form.chooseTime" /></u-form-item>
						<u-form-item label="原产国:"><u-input v-model="form.countryOriginDesc" /></u-form-item>
						<u-form-item label="剩余信用额度:"><u-input v-model="form.currentRemainingCreditLine" /></u-form-item>
					</view>
				</uni-collapse-item>
				<uni-collapse-item title="合同信息" :open="true">
					<view style = "background-color: #ffffff;padding: 0px 12px;">
						<u-form-item label="合同号:"><u-input v-model="form.contractNo" /></u-form-item>
						<u-form-item label="合同周期:"><u-input v-model="form.contractPeriod" /></u-form-item>
					</view>
				</uni-collapse-item>
				<uni-collapse-item title="交货信息" :open="true">
					<view style = "background-color: #ffffff;padding: 0px 12px;">
						<u-form-item label="交货方式:"><u-input v-model="form.modeDeliveryDesc" /></u-form-item>
						<u-form-item label="交货地:"><u-input v-model="form.deliveryPointsDesc" /></u-form-item>
						<u-form-item label="溢短装:"><u-input v-model="form.overAndShort" /></u-form-item>
						<u-form-item label="交货时间:"><u-input v-model="form.deliveryTime" /></u-form-item>
					</view>
				</uni-collapse-item>
				<uni-collapse-item title="付款信息" :open="true">
					<view style = "background-color: #ffffff;padding: 0px 12px;">
						<u-form-item label="付款方式:"><u-input v-model="form.payWay" /></u-form-item>
						<u-form-item label="是否赊销:"><u-input v-model="form.isPrepaidDesc" /></u-form-item>
						<u-form-item label="合同重量:"><u-input v-model="form.contractWeight" /></u-form-item>
						<u-form-item label="合同不含税金额:"><u-input v-model="form.excludingTaxAmt" /></u-form-item>
						<u-form-item label="合同本币金额:"><u-input v-model="form.localCurrency" /></u-form-item>
					</view>
				</uni-collapse-item>
				<uni-collapse-item title="附件信息" :open="true">
					<view style = "background-color: #ffffff;padding: 0px 12px;">
						<u-form-item label="附件路径:">
							<view v-if="!!fileUrl" style="color: #ff0f07;" @click="downLoadFile()">点击查看附件</view>
							<view v-else >无</view>
						</u-form-item>
					</view>
				</uni-collapse-item>
			</u-form>
			<uni-collapse-item title="商品信息" :open="true">
					<view :style = "listHeight">
						<wyb-table :headers="headers" :contents="tableList" :width="tableWidth" :font-size="[20]" :default-col-width="120"></wyb-table>
					</view>
			</uni-collapse-item>
		</uni-collapse>
	</view>
</template>

<script>
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	export default {
		components:{wybTable},
		props:['businessKey', 'parentForm'],
		data() {
			return {
				form : {},
				tableList : [],
				headers: [{
							label: '商品名称',
							key: 'productName'
						}, {
							label: '商品分类',
							key: 'aciName'
						}, {
							label: '规格',
							key: 'specName'
						}, {
							label: '重量',
							key: 'weight'
						}, {
							label: '单价',
							key: 'localPrice'
						}, {
							label: '金额',
							key: 'localAmount'
						}, {
							label: '不含税金额',
							key: 'noTaxAmt'
						}, {
							label: '税率',
							key: 'rate'
						}, {
							label: '交货地点',
							key: 'deliveryPlace'
						}, {
							label: '备注',
							key: 'remark'
						}, {
							label: '价格变动记录',
							key: 'historyPrice'
						}],
				tableWidth : uni.getSystemInfoSync().screenWidth - 20 + 'px',
				fileUrl : '',
			}
		},
		beforeMount() {
			let self = this;
			// 克隆父组件数据
			this.form = JSON.parse(JSON.stringify(this.parentForm));
			// 付款方式
			if (!!uni.getStorageSync('PAYMENT_METHOD')) {
				self.payWayInit(uni.getStorageSync('PAYMENT_METHOD'))
			} else {
				self.admRequest({
					action : 'AppParamAction/getAppparList',
					data : {
						code : 'PAYMENT_METHOD'
					},
					success(r){
						var payWayList = r.data.data;
						if (!!payWayList) {
							uni.setStorageSync('PAYMENT_METHOD', payWayList);
						}
						self.payWayInit(payWayList)
					}
				})
			}
			
			// 信用额度
			self.admRequest({
				action : 'DomesticContractManageAction/selectCustomerCreditline',
				data : {
					customerId : self.form.sellId
				},
				success(r){
					self.form.currentRemainingCreditLine = r.data.remainingCreditLine;
					self.$forceUpdate();
				}
			})
			
			// 商品信息
			this.admRequest({
				action : 'CommonAction/queryContractDetail',
				data : {
					contractId : this.businessKey,
					payAmt : false
				},
				success(r){
					self.tableList = r.data.data;
				}
			})
			
			// 附件信息
			this.admRequest({
				action : 'ContractManageAction/selectContractResource',
				data : {
					contractId : this.businessKey
				},
				success(r){
					self.fileUrl = r.data.url;
				}
			})
		},
		methods:{
			payWayInit(payWayList){
				let payWayCheckList = this.form.payWay.split(",");
				for (let i = 0; i < payWayCheckList.length; i ++) {
					let pw = payWayCheckList[i];
					for (let p of payWayList) {
						if (p.value.indexOf(pw) != -1) {
							payWayCheckList[i] = p.showmsg;
						}
					}
				}
				this.form.payWay = payWayCheckList.toString();
			},
			downLoadFile(){
				let self = this;
				uni.showLoading({
					title:"加载中..."
				})
				uni.downloadFile({
					url : self.fileUrl,
					success: (res) => {
						let filePath = res.tempFilePath;
						if (res.statusCode === 200) {
							uni.openDocument({
								filePath: filePath,
								success: function (r) {
									console.log('打开文档成功');
								}
							});
						}
					},
					complete: (res)=> {
						uni.hideLoading();
					}
				})
			}
		}
	}
</script>

<style>
</style>