guomao/guomaoUniapp/components/pages/beijing/payment/qtPayFlowableDetail.vue

<template>
	<view style="margin: 25rpx 25rpx 75rpx 25rpx;">
		<view style = "text-align: center;font-size: 43rpx; margin-bottom:10rpx">国电投国际贸易（北京）有限公司<br>境内付款申请及确认单 </view>
		<view style = "margin-bottom:10rpx;text-align: right;">付款单编号：{{paymentData.payNumber}}</view>
		<view class="h-table" style="margin-bottom:20rpx">
			<view class="h-tr h-tr-4">
				<view class="h-td h-td-left">日    期</view>
				<view class="h-td h-td-left">{{paymentData.createTime}}</view>
				<view class="h-td h-td-left">部    门</view>
				<view class="h-td h-td-left">{{paymentData.roleName}}部</view>
			</view>
			<view class="h-tr h-tr-4">
				<view class="h-td h-td-left">合同编号</view>
				<view class="h-td h-td-left">{{paymentData.contractNo}}</view>
				<view class="h-td h-td-left">经 办 人</view>
				<view class="h-td h-td-left">{{paymentData.createUser}}</view>
			</view>
			<view class="h-tr h-tr-4">
				<view class="h-td h-td-left">合同总额</view>
				<view class="h-td h-td-left">{{paymentData.localCurrency}}</view>
				<view class="h-td h-td-left">已付金额</view>
				<view class="h-td h-td-left">{{paymentData.yfAmount}}</view>
			</view>
			<view class="h-tr h-tr-4">
				<view class="h-td h-td-left">收款单位</view>
				<view class="h-td h-td-left h-td-colspan">{{paymentData.companyName}}</view>
			</view>
			<view class="h-tr h-tr-4">
				<view class="h-td h-td-left">开 户 行</view>
				<view class="h-td h-td-left h-td-colspan">{{paymentData.bankName}}</view>
			</view>
			<view class="h-tr h-tr-4">
				<view class="h-td h-td-left">账    号</view>
				<view class="h-td h-td-left h-td-colspan">{{paymentData.bankNumber}}</view>
			</view>
			<view class="h-tr h-tr-4">
				<view class="h-td h-td-left">金额（元）</view>
				<view class="h-td h-td-left h-td-colspan" v-html="paymentData.payPrice"></view>
			</view>
			<view class="h-tr h-tr-4">
				<view class="h-td h-td-left">金额（大写）</view>
				<view class="h-td h-td-left h-td-colspan">{{paymentData.payPriceDX}}</view>
			</view>
			<view class="h-tr h-tr-4">
				<view class="h-td h-td-left">重    量</view>
				<view class="h-td h-td-left">{{paymentData.contractWeight}}</view>
				<view class="h-td h-td-left">单    价</view>
				<view class="h-td h-td-left">{{paymentData.contractPrice}}</view>
			</view>
			<view class="h-tr h-tr-4">
				<view class="h-td h-td-left">货品名称</view>
				<view class="h-td h-td-left">{{paymentData.categoryName}}</view>
				<view class="h-td h-td-left">付款期限</view>
				<view class="h-td h-td-left">{{paymentData.termsPayment}}</view>
			</view>
			<view class="h-tr h-tr-4">
				<view class="h-td h-td-left">备    注</view>
				<view class="h-td h-td-left h-td-colspan">{{paymentData.remarks}}</view>
			</view>
		</view>
		<view class="h-table">
			<view class="h-tr h-tr-4">
				<view class="h-td h-td-center h-td-colspan">审 批</view>
			</view>
			<view class="h-tr h-tr-4">
				<view class="h-td h-td-center" style = "width: 25%;">审查主体</view>
				<view class="h-td h-td-center" style = "width: 30%;">合规要求</view>
				<view class="h-td h-td-center" style = "width: 20%;">审查情况</view>
				<view class="h-td h-td-center" style = "width: 25%;">审查意见</view>
			</view>
			<view class="h-tr h-tr-4">
				<view class="h-td h-td-center" style = "width: 25%;">部门复核</view>
				<view class="h-td h-td-left" style = "width: 30%;" @click="openTextMask('1')">
					<text style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
						{{text1}}
					</text>
				</view>
				<view class="h-td h-td-center" style = "width: 20%;" @click="openRadioMask('1')">
					<text>
						{{radioText1}}
					</text>
				</view>
				<view class="h-td h-td-left" style = "width: 25%;">
					<text>
						{{yijian1}}
					</text>
				</view>
			</view>
			<view class="h-tr h-tr-4">
				<view class="h-td h-td-center" style = "width: 25%;">风控部负责人</view>
				<view class="h-td h-td-left" style = "width: 30%;" @click="openTextMask('2')">
					<text style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" >
						{{text2}}
					</text>
				</view>
				<view class="h-td h-td-center" style = "width: 20%;" @click="openRadioMask('2')">
					<text>
						{{radioText2}}
					</text>
				</view>
				<view class="h-td h-td-left" style = "width: 25%;">
					<text>
						{{yijian2}}
					</text>
				</view>
			</view>
			<view class="h-tr h-tr-4">
				<view class="h-td h-td-center" style = "width: 25%;">计财部负责人</view>
				<view class="h-td h-td-left" style = "width: 30%;" @click="openTextMask('3')">
					<text style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" >
						{{text3}}
					</text>
				</view>
				<view class="h-td h-td-center" style = "width: 20%;" @click="openRadioMask('3')">
					<text>
						{{radioText3}}
					</text>
				</view>
				<view class="h-td h-td-left" style = "width: 25%;">
					<text>
						{{yijian3}}
					</text>
				</view>
			</view>
			<view class="h-tr h-tr-4">
				<view class="h-td h-td-center" style = "width: 25%;">总经理</view>
				<view class="h-td h-td-left" style = "width: 30%;" @click="openTextMask('4')">
					<text style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">
						{{text4}}
					</text>
				</view>
				<view class="h-td h-td-center" style = "width: 20%;" @click="openRadioMask('4')">
					<text>
						{{radioText4}}
					</text>
				</view>
				<view class="h-td h-td-left" style = "width: 25%;">
					<text>
						{{yijian4}}
					</text>
				</view>
			</view>
		</view>
		<u-mask :show="textShow" :duration="400" :custom-style="{backgroundColor: '#2c2a2aeb'}" @click="closeMask()">
			<view style = "display: flex;align-items: center;justify-content: center;height: 100%;">
				<view style = "width: 600rpx;height: auto;background-color: #fff;border-radius: 10px; padding: 10px; min-height: 170rpx;">
					<text>
						{{showContent}}
					</text>
				</view>
			</view>
		</u-mask>
		<u-mask :show="radioShow" :duration="400" :custom-style="{backgroundColor: '#2c2a2aeb'}">
			<view style = "display: flex;align-items: center;justify-content: center;height: 100%;">
				<view style = "width: 600rpx;height: auto;background-color: #fff;border-radius: 10px; padding: 10px;">
					<u-radio-group v-for="(radioGroupItem, radioGroupIndex) in radioListCurrent" :key="radioGroupItem.name" v-model="radioGroupItem.value" style = "width: 100%;" width = "33%">
						<u-radio 
							v-for="(radioItem, index) in radioGroupItem.item" 
							:name="radioItem.value"  
							:key="radioItem.key" >
							{{radioItem.name}}
						</u-radio>
					</u-radio-group>
					<view style = "display: flex;margin-top: 20rpx;">
						<u-button size="medium" type="primary" style="margin: auto;" @click="closeMask()">取消</u-button>
						<u-button size="medium" type="success" style="margin: auto;" @click="radioSubmit()">确定</u-button>
					</view>
				</view>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import {convertCurrency} from '@/pages/common/chineseCash.js';
	export default {
		props:['parentPaymentData', 'processInstanceId'],
		data() {
			return {
				paymentData : {},
				textShow : false,
				showContent : '',
				text1 : '1.审核填写的《付款申请及确认》信息是否完整；\n2.审核收款单位名称、账户信息等是否与对应合同方一致；\n3.审核重量、单价是否填写正确，审核金额计算是否正确，且金额的大小写一致；\n4.审核付款事项与合同规定是否一致；涉及预付款事项的，审核合同是否明确预付款事项，支付比例和已付事项是否与合同规定一致；\n5.审核相应附件是否齐全，例如合同审批单或合同付款统计表、确认函、发货清单或收货凭据等；',
				text2 : '1.全面复核申请人的内控合规要求。',
				text3 : '1.复核经办部门填写的《付款申请及确认》及附件是否完整、准确，审核经办部门经办人、复核人、部门主任是否签字；\n2.复核计算金额是否正确，且金额的大小写是否一致；\n3.复核收款单位名称是否与合同附件的信息一致；\n4．复核相应附件是否齐全，例如合同审批单或合同付款确认单、确认函、发货清单或收货凭据等；',
				text4 : '1.对预算内500万元以内的资金支付进行审批，审核资金支出的合规性以及支付金额的准确性，确认付款申请经过了前置审查。',
				yijian1 : '意见:\n签名:\n日期:',
				yijian2 : '意见:\n签名:\n日期:',
				yijian3 : '意见:\n签名:\n日期:',
				yijian4 : '意见:\n签名:\n日期:',
				radioListCurrent : [],
				radioIndex : '',
				radioShow : false,
				radioList1 : [
					{name : 'u1', value : '1', item : [{name : '是', value : '1', key : 'u11'},{name : '否', value : '2', key : 'u12'},{name : '不适用', value : '3', key : 'u13'}]},
					{name : 'u2', value : '1',  item : [{name : '是', value : '1', key : 'u21'},{name : '否', value : '2', key : 'u22'},{name : '不适用', value : '3', key : 'u23'}]},
					{name : 'u3', value : '1',  item : [{name : '是', value : '1', key : 'u31'},{name : '否', value : '2', key : 'u32'},{name : '不适用', value : '3', key : 'u33'}]},
					{name : 'u4', value : '1',  item : [{name : '是', value : '1', key : 'u41'},{name : '否', value : '2', key : 'u42'},{name : '不适用', value : '3', key : 'u43'}]},
					{name : 'u5', value : '1',  item : [{name : '是', value : '1', key : 'u51'},{name : '否', value : '2', key : 'u52'},{name : '不适用', value : '3', key : 'u53'}]}
				],
				radioText1 : '是\n是\n是\n是\n是',
				radioList2 : [
					{name : 'fkzg1', value : '1', item : [{name : '是', value : '1', key : 'fkzg11'},{name : '否', value : '2', key : 'fkzg12'},{name : '不适用', value : '3', key : 'fkzg13'}]},
				],
				radioText2 : '是',
				radioList3 : [
					{name : 'cw1', value : '1', item : [{name : '是', value : '1', key : 'cw11'},{name : '否', value : '2', key : 'cw12'},{name : '不适用', value : '3', key : 'cw13'}]},
					{name : 'cw2', value : '1', item : [{name : '是', value : '1', key : 'cw21'},{name : '否', value : '2', key : 'cw22'},{name : '不适用', value : '3', key : 'cw23'}]},
					{name : 'cw3', value : '1', item : [{name : '是', value : '1', key : 'cw31'},{name : '否', value : '2', key : 'cw32'},{name : '不适用', value : '3', key : 'cw33'}]},
					{name : 'cw4', value : '1', item : [{name : '是', value : '1', key : 'cw41'},{name : '否', value : '2', key : 'cw42'},{name : '不适用', value : '3', key : 'cw43'}]}
				],
				radioText3 : '是\n是\n是\n是',
				radioList4 : [
					{name : 'zjl1', value : '1', item : [{name : '是', value : '1', key : 'zjl11'},{name : '否', value : '2', key : 'zjl12'},{name : '不适用', value : '3', key : 'zjl13'}]},
				],
				radioText4 : '是'
			}
		},
		beforeMount() {
			this.paymentData = JSON.parse(JSON.stringify(this.parentPaymentData));
			
			this.paymentData.originalAmount = convertCurrency(this.paymentData.originalAmount );
			
			this.paymentData.swiftCodeDesc = "";
			if (!!this.paymentData.swiftCode) {
				this.paymentData.swiftCodeDesc = "Swift code:" + this.paymentData.swiftCode;
			}
			if (!!this.paymentData.iban) {
				this.paymentData.swiftCodeDesc += "<br>IBAN" + this.paymentData.iban;
			}
			this.paymentData.payPriceDX = convertCurrency(this.paymentData.payPrice);
			
			let self = this;
			this.admRequest({
				action : 'ContractManageAction/selectContractInfo',
				data : {
					aciId : self.paymentData.contractId
				},
				success(res){
					let contractData = res.data.data[0];
					let localCurrency = contractData.localCurrency;
					let contractNo = contractData.contractNo;
					// 合同金额 和 合同号
					self.paymentData.localCurrency = localCurrency;
					self.paymentData.contractNo = contractNo;
					self.$forceUpdate();
				}
			})
			
			// 查询付款对应合同详情的产品信息 和 已付金额
			this.admRequest({
				action : 'CollectPayManageAction/payContractdetailInfo',
				data : {
					paymentId : self.paymentData.id,
					contractId : self.paymentData.contractId,
					payType : self.paymentData.payType
				},
				success(res){
					let payData = res.data;
					self.paymentData.categoryName = payData.categoryName;
					self.paymentData.contractWeight = payData.contractWeight;
					self.paymentData.contractPrice = payData.contractPrice;
					if (!!payData.yfAmount) {
						self.paymentData.yfAmount = payData.yfAmount;
					} else {
						self.paymentData.yfAmount = '0.00';
					}
					self.$forceUpdate();
				}
			})
			
			// 已填数据
			this.admRequest({
				action : 'ApprovalManageAction/approvalDetailFlowable',
				data : {
					id : self.paymentData.id,
					processId : self.processInstanceId
				},
				success(res){
					let inputDatas = res.data.data;
					for (let i = 0; i < inputDatas.length; i ++) {
						let inputData = inputDatas[i];
						let radioList = self['radioList' + (i+1)];
						let yijian = '意见:' + inputData.yijian + '\n' + '签名:' + inputData.qianming + '\n' + '日期:' + inputData.riqi.substring(0, 4) + "-" + inputData.riqi.substring(4, 6) + "-" + inputData.riqi.substring(6, 8);
						self['yijian' + (i+1)] = yijian;
						
						let checkedData = inputData.checkedData;
						let radioTextTemp = '';
						for(let key in checkedData){
							let v = checkedData[key];
							for (let r of radioList) {
								if (r.name == key) {
									r.value = v;
									let item = r.item;
									let value = r.value;
									for (let it of item) {
										if (it.value == value) {
											radioTextTemp += it.name + '\n';
										}
									}
									self['radioText' + (i+1)] = radioTextTemp;
									break;
								}
							}
						}
					}
				}
			})
			
			// 付款方式
			this.payTypeInit();
		},
		methods:{
			payTypeInit(){
				let self = this;
				let payTypeDesc = null;
				if (!!uni.getStorageSync('PAYMENT_METHOD_OUT')) {
					var payWayList = uni.getStorageSync('PAYMENT_METHOD_OUT');
					for (let p of payWayList) {
						if (self.paymentData.payType == p.value) {
							payTypeDesc = p.showmsg;
							self.paymentData.payTypeDesc = payTypeDesc;
							self.$forceUpdate();
						}
					}
				} else {
					self.admRequest({
						action : 'AppParamAction/getAppparList',
						data : {
							code : 'PAYMENT_METHOD_OUT'
						},
						success(r){
							var payWayList = r.data.data;
							if (!!payWayList) {
								uni.setStorageSync("PAYMENT_METHOD_OUT", payWayList);
							}
							for (let p of payWayList) {
								if (self.paymentData.payType == p.value) {
									payTypeDesc = p.showmsg;
									self.paymentData.payTypeDesc = payTypeDesc;
									self.$forceUpdate();
								}
							}
						}
					})
				}
				if (payTypeDesc == null) {
					if (!!uni.getStorageSync('PAYMENT_METHOD')) {
						var payWayList = uni.getStorageSync('PAYMENT_METHOD');
						for (let p of payWayList) {
							if (self.paymentData.payType == p.value) {
								payTypeDesc = p.showmsg;
								self.paymentData.payTypeDesc = payTypeDesc;
								self.$forceUpdate();
							}
						}
					} else {
						self.admRequest({
							action : 'AppParamAction/getAppparList',
							data : {
								code : 'PAYMENT_METHOD'
							},
							success(r){
								var payWayList = r.data.data;
								if (!!payWayList) {
									uni.setStorageSync("PAYMENT_METHOD", payWayList);
								}
								for (let p of payWayList) {
									if (self.paymentData.payType == p.value) {
										payTypeDesc = p.showmsg;
										self.paymentData.payTypeDesc = payTypeDesc;
										self.$forceUpdate();
									}
								}
							}
						})
					}
				}
			},
			openTextMask(index){
				this.showContent = this['text' + index];
				this.textShow = true;
			},
			closeMask(){
				this.textShow = false;
				this.radioShow = false;
			},
			openRadioMask(index){
				this.radioIndex = index;
				this.radioListCurrent = JSON.parse(JSON.stringify(this['radioList'+index]));
				this.radioShow = true;
			},
			radioSubmit(){
				let radioTextTemp = '';
				for (let r of this.radioListCurrent) {
					let item = r.item;
					let value = r.value;
					for (let it of item) {
						if (it.value == value) {
							radioTextTemp += it.name + '\n';
						}
					}
				}
				
				this['radioList' + this.radioIndex] = JSON.parse(JSON.stringify(this.radioListCurrent));
				this['radioText' + this.radioIndex] = radioTextTemp;
				this.radioShow = false;
			},
			getCallBackData(){
				let inputData = new Array();
				for (let i = 1; i <= 4; i ++) {
					let radioList = this['radioList' + i];
					let trData = {};
					for (let r of radioList) {
						trData[r.name] = r.value;
					}
					inputData.push(trData);
				}
				let data = {};
				data.param = {inputData : inputData};
				data.callBackUrl = "FlowableApiAction/payBackDeal";
				return data;
			}
		}
	}
</script>

<style lang="scss">
	/* 引入表格样式表 */
	@import "@/static/css/helang-table.scss";
</style>