programs_info/三资项目/删除前备份/前段代码/workflow/components/myProcess/applyPayConfirm.vue

<template>
	<!--    发起付款申请/发起审核 -->
	<el-dialog
	 :close-on-click-modal="false"
	 :close-on-press-escape="false"
	 :title="dialogTitle"
	 :visible.sync="dialogVisible"
	 top="50px"
	 width="75%"
	>
		<div class="tabsdom">
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="付款申请" name="first">
					<el-card shadow="always" style="padding: 15px 5px 5px 15px">

						<el-form
						 ref="elformData"
						 :model="formData"
						 :rules="rules"
						 class="payform"
						 label-width="200px"
						 size="medium"
						>
							<el-card style="padding:0px 20px;margin-bottom: 25px">
								<h3 style="margin-top: 8px;"><span style="color: red">*</span> 订单详情</h3>
								<el-row :gutter="15">
									<el-col :span="24">
										<el-form-item
										 :style="{width: '100%'}"
										 clearable
										 label="采购单号"
										 label-width="160px"
										>
											<el-select
											 v-model="formData.orderId"
											 disabled
											 filterable
											 placeholder="采购单号"
											 @change="selectOutOrderDetails"
											>
												<el-option
												 v-for="(item,index) in OutOrderList"
												 :key="index"
												 :label="item.custName+item.orderNo"
												 :value="item.id"
												>
													<span style="float: left">{{ item.custName }}</span>
													<span style="float: right; color: #8492a6; font-size: 13px">
                            {{ item.orderNo }}
                          </span>
												</el-option>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="关联项目名称" label-width="160px" prop="proId">

											<el-input v-model="formData.projectName" readonly/>

										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="客户名称" label-width="160px">
											<el-input v-model="formData.custName" readonly/>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="发包日期" label-width="160px">
											<el-date-picker
											 v-model="formData.dealAt"
											 placeholder="发包日期"
											 readonly
											 style="width: 100%"
											 type="datetime"
											 value-format="yyyy-MM-dd HH:mm:ss"
											/>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="要求完成时间" label-width="160px">
											<el-date-picker
											 v-model="formData.outTimeline"
											 placeholder="要求完成时间"
											 readonly
											 style="width: 100%"
											 type="datetime"
											 value-format="yyyy-MM-dd HH:mm:ss"
											/>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="供应商" label-width="160px" prop="bizId">
											<el-input v-model="formData.supplierName" readonly/>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="联系人" label-width="160px" prop="bizBy">
											<el-select
											 v-model="formData.bizBy"
											 disabled
											 placeholder="选择联系人"
											>
												<el-option
												 v-for="item in bizByList"
												 :key="item.id"
												 :label="item.username"
												 :value="item.id"
												/>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="订单总金额" label-width="160px" prop="orderAmount">
											<el-input v-model="formData.orderAmount" readonly type="number"/>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="税率(%)" label-width="160px" prop="taxRate">
											<el-input v-model="formData.taxRate" readonly type="number"/>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="支付方式" label-width="160px">
											<el-select v-model="formData.payType" disabled placeholder="支付方式">
												<el-option
												 v-for="item in dc_data.PAY_TYPE"
												 :key="item.value"
												 :label="item.label"
												 :value="item.value"
												/>
											</el-select>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="下单人" label-width="160px">
											<el-input v-model="formData.dealBy" readonly/>
										</el-form-item>
									</el-col>
									<el-col :span="24">
										<el-form-item label="支付说明" label-width="160px">
											<el-input
											 v-model="formData.remark"
											 :rows="3"
											 readonly
											 type="textarea"
											/>
										</el-form-item>
									</el-col>
								</el-row>
								<!--								<el-row v-if="isPayInfo">-->
								<!--									<el-col style="padding-bottom: 10px">-->
								<!--										<span class="card_title">支付列表</span>-->
								<!--										<el-card shadow="always" style="padding:0px 20px 20px 20px">-->
								<!--											<el-row>-->
								<!--												<el-col :span="24">-->
								<!--													<el-table-->
								<!--													 :data="payDetailData"-->
								<!--													 row-class-name="g_table_row"-->
								<!--													 stripe-->
								<!--													>-->
								<!--														<el-table-column label="支付日期" prop="payAt"/>-->
								<!--														<el-table-column label="付款名称" prop="payName"/>-->
								<!--														<el-table-column label="付款金额" prop="payAmount"/>-->
								<!--														<el-table-column label="发票号" prop="invoiceNo"/>-->
								<!--														<el-table-column label="发票金额" prop="invoiceAmount"/>-->
								<!--														<el-table-column label="申请人" prop="applyByName"/>-->
								<!--														<el-table-column label="申请日期" prop="applyTime"/>-->
								<!--													</el-table>-->
								<!--												</el-col>-->
								<!--											</el-row>-->
								<!--										</el-card>-->
								<!--									</el-col>-->
								<!--								</el-row>-->

							</el-card>

							<el-card style="padding:0px 20px;margin-bottom: 25px">
								<h3 style="margin-top: 8px;"><span style="color: red">*</span>支付信息</h3>
								<el-row :gutter="15">
									<el-col :span="12">
										<el-form-item
										 label="项目累计已回款金额（元）"
										>
											<div style="line-height: 40px;height: 40px">{{ formData.totalReturnMoney }}</div>
											<!--										<el-input-->
											<!--										 v-model="formData.totalReturnMoney"-->
											<!--										 :style="{width: '100%'}"-->
											<!--										 clearable-->
											<!--										 placeholder="请输入项目累计已回款金额（元）"-->
											<!--										 readonly-->
											<!--										/>-->
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="订单累计已支付金额（元）" prop="totalPayMoney">
											<div style="line-height: 40px;height: 40px">{{ formData.totalPayMoney }}</div>
											<!--										<el-input-->
											<!--										 v-model="formData.totalPayMoney"-->
											<!--										 :style="{width: '100%'}"-->
											<!--										 clearable-->
											<!--										 placeholder="请输入订单累计已支付金额（元）"-->
											<!--										 readonly-->
											<!--										/>-->
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="付款名称" prop="payName">
											<el-input
											 v-model="formData.payName"
											 :style="{width: '100%'}"
											 clearable
											 placeholder="请输入付款名称"
											 readonly
											/>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="付款金额" prop="payMoney">
											<el-input
											 v-model="formData.payMoney"
											 :style="{width: '100%'}"
											 clearable
											 placeholder="请输入付款金额"
											 readonly
											/>
										</el-form-item>
									</el-col>
									<!--								<el-col :span="24">-->
									<!--									<el-form-item label="费用成本归属" prop="costsType">-->
									<!--										<el-select-->
									<!--										 v-model="formData.costsType"-->
									<!--										 clearable-->
									<!--										 disabled-->
									<!--										 filterable-->
									<!--										 placeholder="请选择"-->
									<!--										>-->
									<!--											<el-option-->
									<!--											 v-for="item in dc_data.BUDGET_CB"-->
									<!--											 :key="item.value"-->
									<!--											 :label="item.label"-->
									<!--											 :value="item.value"-->
									<!--											/>-->
									<!--										</el-select>-->
									<!--									</el-form-item>-->
									<!--								</el-col>-->
								</el-row>
							</el-card>
							<el-card style="padding:0px 20px;margin-bottom: 25px">
								<h3 style="margin-top: 8px;">
									<span style="color: red">*</span>
									发票信息
								</h3>
								<el-row :gutter="15">
									<el-col :span="12">
										<el-form-item label="发票类型" label-width="160px" prop="billType">
											<el-radio-group v-model="formData.billType" disabled size="mini">
												<el-radio
												 v-for="(item, index) in billTypeOptions"
												 :key="index"
												 :disabled="item.disabled"
												 :label="item.value"
												>
													{{ item.label }}
												</el-radio>
											</el-radio-group>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="开票金额" label-width="160px" prop="billMoney">
											<el-input
											 v-model="formData.billMoney"
											 :style="{width: '100%'}"
											 clearable
											 placeholder="请输入开票金额"
											 readonly
											/>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="发票号" label-width="160px" prop="billNumber">
											<el-input
											 v-model="formData.billNumber"
											 :style="{width: '100%'}"
											 clearable
											 placeholder="请输入发票号"
											 readonly
											/>
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="税率" label-width="160px" prop="billRate">
											<el-input
											 v-model="formData.billRate"
											 :style="{width: '100%'}"
											 clearable
											 placeholder="请输入税率"
											 readonly
											/>
										</el-form-item>
									</el-col>
									<el-col :span="24">
										<el-form-item label="上传" label-width="160px" prop="fileDataIds">
											<el-upload
											 :action="$constant.BASE_URI+'/FileController/upload'"
											 :file-list="formData.fileUrlList"
											 class="upload-demo"
											 disabled
											 multiple
											 show-file-list
											>
												<el-button size="small" type="primary">点击上传</el-button>
												<div slot="file" slot-scope="{file}">
													<a :href="file.url">{{ file.name }}</a>
													<span class="el-upload-list__item-actions">

                          </span>
												</div>
											</el-upload>
										</el-form-item>
									</el-col>
								</el-row>
							</el-card>
							<el-row :gutter="15">
								<el-col :span="24">
									<el-form-item label="抄送" label-width="160px" prop="field119"
																style="padding-left: 35px;padding-right: 41px"
									>
										<user-select
										 ref="defaultSelect"
										 :default-select="selectList"
										 :multiple="true"
										 disab
										 style="padding-left: 0"
										 width="700"

										/>

									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item
									 label="发起人" label-width="160px" prop="field119"
									 style="padding-left: 38px;"
									>
										<el-input v-model="formData.createdByString"></el-input>
									</el-form-item>

								</el-col>
								<el-col :span="12">
									<el-form-item
									 label="发起时间"
									 label-width="160px"
									 prop="field119"
									 style="padding-left: 35px;padding-right: 41px"
									>
										<el-input v-model="formData.createdAt"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</el-card>
					<el-card v-if="zffhStatus" style="margin-top: 10px;">
						<h3 style="margin:0">支付复核 </h3>
						<el-form
						 ref="confirmForm"
						 :model="confirmForm"
						 class="cost_form"
						 label-width="100px"
						 style="width: 100%;padding: 5px"
						>
							<el-row :gutter="10">
								<el-col :span="24">
									<el-form-item label="实际支付日期" style="margin-bottom: 15px">
										<el-date-picker
										 v-model="confirmForm.payTime"
										 placeholder="处理日期"
										 style="width: 100%"
										 type="date"
										 value-format="yyyy-MM-dd"
										/>
									</el-form-item>
								</el-col>

								<el-col :span="24">
									<el-form-item label="备注" style="margin-bottom: 0">
										<el-input v-model="confirmForm.payRemark" style="margin-top:10px" type="textarea"/>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
					</el-card>

					<h3>流程历史</h3>
					<el-card>
						<div class="tableDom">
							<el-table
							 :data="tableData"
							 :header-cell-style="{
                  background:'#1890FF !important',
                  color:'white'
                }"
							 border
							 style="width: 100%"
							>
								<el-table-column fixed label="序号" type="index" width="60"/>
								<el-table-column
								 label="节点名称"
								 prop="nodeName"
								 width="180"
								/>
								<el-table-column
								 label="处理人"
								 prop="auditUserName"
								 width="180"
								/>
								<el-table-column
								 label="审核结果"
								 prop="auditResultString"
								/>
								<el-table-column
								 label="审核意见"
								 prop="auditContent"
								/>
								<el-table-column
								 label="发起/审核时间"
								 prop="createdAt"
								>
									<template slot-scope="scope">
										{{ $common.transTime(scope.row.createdAt) }}
									</template>
								</el-table-column>
							</el-table>
						</div>

					</el-card>
					<h3>处理</h3>
					<el-card shadow="always" style="padding: 0px 5px 5px 15px">
						<el-form
						 ref="confirmForm"
						 :model="confirmForm"
						 class="cost_form"
						 label-width="100px"
						 style="width: 100%;padding: 5px"
						>
							<el-row :gutter="10">
								<el-col :span="24">
									<el-form-item label="处理结果" style="margin-bottom: 15px">
										<el-radio-group v-model="confirmForm.confirmResult">
											<el-radio :label="1">同意</el-radio>
											<el-radio v-if="argeeNoStatus" :label="2">退回发起人</el-radio>
											<el-radio v-if="argeeBackStatus" :label="3">退回上节点</el-radio>
											<!--												<el-radio :label="4">结束流程</el-radio>-->

										</el-radio-group>
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="处理意见">
										<el-input
										 v-model="confirmForm.confirmContent"
										 style="margin-top:10px"
										 type="textarea"
										/>
										<el-dropdown size="mini" split-button trigger="hover" type="primary">
											常用语选择
											<el-dropdown-menu slot="dropdown">
												<el-dropdown-item
												 v-for="item in dc_data.COMMON_PHRASES"
												 @click.native="selectCommonPhrases(item.label)"
												>
													{{ item.label }}
												</el-dropdown-item>

											</el-dropdown-menu>
										</el-dropdown>
									</el-form-item>
								</el-col>
								<el-col :span="24">
									<el-form-item label="审核人抄送">
										<user-select
										 :default-select="confirmList"
										 :multiple="true"
										 class="cclist"
										 @selectValue="parentMethod"
										/>
									</el-form-item>
								</el-col>
							</el-row>

						</el-form>
					</el-card>
				</el-tab-pane>
				<el-tab-pane label="流程图" name="second">
					<pay-canvas ref="PayCanvas"/>
				</el-tab-pane>
			</el-tabs>
		</div>
		<div slot="footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="confirmSubmit()">确 定</el-button>
		</div>
	</el-dialog>

</template>

<script>
import Base from '@/views/base/base'
import BaseData from '@/views/base/baseData'
import UserSelect from '@/views/components/UserSelect'
import payCanvas from '@/views/workflow/components/myProcess/payCanvas.vue'

export default {
	name: 'applyPay',
	components: {
		payCanvas,
		UserSelect
	},
	mixins: [Base, BaseData],
	data() {
		return {
			row: {},
			zffhStatus: false,
			canVasStatus: false,
			tableData: [],
			fileError: false,
			bizByList: [],
			selectList: [],
			CcconfirmList: [],
			detailsForm: {},
			buttonLoading: false,
			confirmForm: {
				confirmContent: '',
				confirmResult: 1
			},
			confirmList: [],
			// 查询的时候用的字典========================================
			dc_key: ['PAY_TYPE', 'BUDGET_CB', 'RECEIPT_TYPE', 'COMMON_PHRASES'],
			fileDataIdsAction: 'https://jsonplaceholder.typicode.com/posts/',
			formData: {},
			billTypeOptions: [
				{ 'label': '增票', 'value': 1 },
				{ 'label': '普票', 'value': 2 },
				{ 'label': '发票候补', 'value': 3 }
			],
			argeeBackStatus: false,
			argeeNoStatus: false,
			onlineForm: {},
			dialogTitle: '付款申请-审核',
			dialogVisible: false,
			form: {},
			activeName: 'first',
			OutOrderList: [],
			rules: {
				fileDataIds: [{ required: false, message: '请上传发票文件', trigger: 'change' }],
				totalPayMoney: [{ required: true, message: '请输入订单累计已支付金额', trigger: 'change' }],
				payName: [{ required: true, message: '请输入付款名称', trigger: 'change' }],
				payMoney: [{ required: true, message: '请输入付款金额', trigger: 'change' }],
				costsType: [{ required: true, message: '请选择', trigger: 'change' }]

			}
		}
	},
	mounted() {
		const _this = this
		_this.initDict(_this.dc_key).then((res) => {
			_this.getOutOrderList()
			_this.getBizeUserList()
		})

		// /webServer/BugLibraryController/listBizUserAll
	},
	methods: {

		handleClick(tab, event) {
			if (this.activeName == 'second') this.$refs.PayCanvas.createNodeCanvas(this.row)
		},
		selectCommonPhrases(e) {
			if (!this.confirmForm.confirmContent) this.confirmForm.confirmContent = ''
			this.confirmForm.confirmContent += e
		},
		closeDianlog() {
			this.dialogVisible = false
			this.formData = {}
		},

		downloadFaPiao(url) {
			window.open(url)
		},
		parentMethod(val) {
			if (val.length > 0) {
				this.confirmForm.ccList = val.join(',')
			}
		},
		async getBizeUserList() {
			const { data } = await this.baseRequest1('BugLibraryController', 'listBizUserAll', {})
			this.bizByList = data
		},
		async selectOutOrderDetails(e) {
			const postData = { id: e }
			const { data } = await this.baseRequest1('OutOrderMainController', 'getVoById', postData)
			this.formData = data
			this.formData.projectName = this.formData.proName
			this.formData.customerName = this.formData.custName
			// this.formData.supplierName = this.formData.bizName
			this.formData.dealAt = this.$common.transServDate(data.dealAt)
			this.formData.outTimeline = this.$common.transServDate(data.outTimeline)
			this.formData.orderNo = data.custName + '-' + data.orderNo
		},
		// /webServer/OutOrderMainController/list
		async getOutOrderList() {
			// 获取采购订单号下拉数据
			const postData = {
				pageNum: 1,
				pageSize: 10000,
				shouldAmount: 0
			}
			const { data } = await this.baseRequest1('OutOrderMainController', 'list', postData)
			this.OutOrderList = data.rows
		},
		baseRequest1(prefix, opUrl, postData) {
			return this.$channel.globleRequest(prefix, opUrl, postData, 'project task')
		},

		async confirmSubmit() {
			const { data } = await this.baseRequest1('ApplyPaymentController', 'AddConfirmResultApplyPayment', { ...this.confirmForm })
			if (data.code == 200) {
				this.$message.success('处理成功')
				this.form = {}
				this.confirmForm = { confirmContent: '' }
				this.dialogVisible = false
				this.$emit('getData')
			}
		},
		async setVisible(status, row) {
			this.confirmForm = {
				confirmContent: ''
			}

			if (this.$refs.elformData) {
				this.$refs.elformData.clearValidate()
			}
			this.confirmForm.flowMainPushId = row.flowMainPushId
			const { data } = await this.baseRequest1('ApplyPaymentController', 'getInfoByFlowMainId', { flowMainId: row.id })
			this.zffhStatus = data.pushUserKey.indexOf('flow_zffh') != -1 ? true : false

			const { data: formData } = await this.baseRequest1('OutOrderMainController', 'getVoById', { id: data.orderId })
			const { data: flowHistroy } = await this.baseRequest1('FlowMainController', 'getFlowHistroyByFlowMainId', { flowMainId: row.id })
			const noAndbackstatus = await this.baseRequest1('FlowMainController', 'getOutgoingFlowsByFlowMainPushId', { flowMainPushId: row.flowMainPushId })
			for (let i = 0; i < noAndbackstatus.data.length; i++) {
				if (noAndbackstatus.data[i].conditionExpression == '${agree==\'no\'}') this.argeeNoStatus = true
				if (noAndbackstatus.data[i].conditionExpression == '${agree==\'back\'}') this.argeeBackStatus = true
			}
			this.selectList = data.flowMainCcList.map((e) => {
				return e.ccUser
			})
			this.tableData = flowHistroy
			this.formData = { ...data, ...formData }
			this.formData.projectName = formData.proName
			this.formData.createdAt = this.$common.transDate(formData.createdAt)

			this.formData.dealAt = this.$common.transServDate(this.formData.dealAt)
			this.formData.outTimeline = this.$common.transServDate(this.formData.outTimeline)
			this.formData.createdByString = data.createdByString
			if (data.fileDataIds) {
				let fileList = data.fileDataIds.split(',')
				this.formData.fileUrlList = fileList.map((e) => {

					if (e.length > 0) {
						return {
							url: e.length > 0 ? this.$constant.BASE_URI + '/FileController/download/' + e : [],
							name: e.length > 0 ? this.$constant.BASE_URI + '/FileController/download/' + e : [],
							data: e,
							uid: new Date().getTime()
						}
					}
				})
			}
			this.row = row
			this.dialogVisible = status

		}
	}
}
</script>

<style lang="scss">
.changyongyu {
	height: 16px;
	color: #2e88f4;
	float: left;
	margin-left: 10px;
	cursor: pointer;
}

.mb25 {
	margin-bottom: 25px;
}

.pdtopbottom16 {
	padding: 0px 16px;
}

.pdtop16px {
	padding-top: 16px;
}

.elformdom {
	label {
		text-align: right;
		font-size: 16px;
		font-family: 微软雅黑;
		padding-right: 10px;
		line-height: 40px;
		word-break: keep-all;
		white-space: nowrap;
		-webkit-font-smoothing: antialiased;
		color: #303133;
		text-rendering: optimizeLegibility;
		font-weight: 400;
	}

	.el-radio {
		height: 15px;
		margin-top: -19px;
	}
}

.payform {
	.el-form-item__label {
		text-align: right;
		font-size: 16px;
		font-family: 微软雅黑;
		padding-right: 10px;
		line-height: 40px;
		word-break: keep-all;
		white-space: nowrap;
		font-weight: 400;
	}
}

.tabsdom {
	.el-tabs__header {
		text-align: center !important;
		width: 139px !important;
		text-align: center !important;
		display: block !important;
		margin: auto !important;
		margin-bottom: 15px !important;
	}

	.el-tabs__nav-wrap::after {
		display: none;
	}
}

.cost_form {
	.col-input {
		font-weight: 400;
	}

	.el-form-item__label {
		text-align: right;
		font-size: 16px;
		font-family: 微软雅黑;
		padding-right: 10px;
		line-height: 40px;
		word-break: keep-all;
		white-space: nowrap;
		color: #606266;
		text-rendering: optimizeLegibility;
		font-weight: 400;
	}

	.el-form-item__label .moneydetails {
		text-align: right;
		font-size: 16px;
		font-family: 微软雅黑;
		padding-right: 10px;
		line-height: 40px;
		word-break: keep-all;
		white-space: nowrap;
		color: #606266;
		text-rendering: optimizeLegibility;
		font-weight: 400;
	}
}

</style>