programs_info/小艾协同/流程图地址/流程从三资开始和保障房合并后搬过来的/前端代码/workflow/components/myProcess/applyCostDetails.vue

<template>
	<el-dialog
	 :close-on-click-modal="false"
	 :close-on-press-escape="false"
	 :title="dialogTitle"
	 :visible.sync="dialogVisible"
	 top="50px"
	 width="75%"
	 :before-close="beforeClose"
	>
		<div class="tabsdom">
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="报支申请" name="first">
					<el-form
					 ref="elformData"
					 :model="form"
					 class="cost_form"
					 label-width="125px"
					 style="width: 100%;padding: 5px"
					>

						<el-card shadow="always" style="padding: 15px 5px 5px 15px">
							<el-row :gutter="10">
								<el-col :span="24">
									<el-form-item label="关联项目">

										<el-input v-model="form.proMainName" readonly></el-input>
									</el-form-item>
								</el-col>
							</el-row>


							<el-card class="pdtopbottom16 mb25 pdtop16px">
                <span class="moneydetails">
                  费用明细
              </span>
								<el-row :gutter="10" class="eltype">
									<el-col :span="4" class="col-txt txtc"><span>费用&成本类型</span></el-col>
									<el-col :span="4" class="col-txt txtc">
										金额（元）
									</el-col>
									<el-col :span="4" class="col-txt txtc">发票号</el-col>
									<el-col :span="12" class="col-txt txtc">
										单据
									</el-col>
								</el-row>
								<el-row
								 v-for="(item,index) in form.applyUseMoneyDetailListString"
								 :gutter="10" class="eltype"
								>
									<el-col :span="4">
										<el-select
										 size="small"
										 v-model="item.feeType"
										 disabled
										 filterable placeholder="请选择"
										 style="width: 100%"
										>
											<el-option
											 v-for="item in cbFyTypes"
											 :key="item.value"
											 :label="item.label"
											 :value="item.value"
											/>
										</el-select>
									</el-col>
									<el-col :span="4">
										<el-input
										 v-model="item.feeMoney"
										 filterable
										 size="small"
										 placeholder="请选择"
										 readonly
										 style="width: 100%"
										/>
									</el-col>
									<el-col :span="4">
										<el-input
										 v-model="item.fileNumber"
										 :controls="false"
										 size="small"
										 readonly
										 :disabled="item.fileList==0"
										 controls-position="right"
										 placeholder="无"
										 style="width: 100%"
										/>
									</el-col>
									<el-col :span="12" class="col-input">

										<el-upload
										 :action="$constant.BASE_URI+'/FileController/upload'"
										 :file-list="item.fileList"
										 :http-request="(params)=>{uploadFile(params,index)}"
										 :limit="5"
										 :multiple="false"
										 disabled
										 :show-file-list="false"
										 class="upload-demo"
										 style="width: 30%;float: left;margin-left: 42px"
										>
											<el-button size="small" disabled style="font-size: 14px" type="text">
												上传发票
												<img
												 src="./fapiaoicon.png"
												 style="margin-left: 5px;position: absolute;top: 13.5px;"
												 width="24px"
												/>

											</el-button>
										</el-upload>
										<el-radio-group
										 disabled
										 v-model="item.fileType"
										 style="margin-left: 30px;"
										 @input="changeFileType($event,index)"
										>
											<el-radio v-if="false" :label="1">上传发票</el-radio>
											<el-radio :label="2">发票后补</el-radio>
											<el-radio :label="3">无发票</el-radio>
										</el-radio-group>
									</el-col>
									<el-col :span="13">&nbsp;</el-col>
									<el-col :span="11">
										<div v-for="(file,i) in item.fileList" v-if="item.fileList.length>0"
												 style="margin: 0px 0px 0px 45px;"
										>
											<div>
												<a :href="file.url">{{ file.name }}</a>
												<span class="el-upload-list__item-actions">
									   	 </span>
											</div>
										</div>

									</el-col>
								</el-row>
								<div class="feeMoneyTotal">
									<div style="float: right">共计金额（元）：{{ form.feeMoneyTotal }}</div>
								</div>
							</el-card>
							<el-row>
								<el-col :span="24">
									<el-form-item label="用途">
										<el-input
										 v-model="form.useReasons"
										 readonly
										 type="textarea"
										/>
									</el-form-item>
								</el-col>


								<el-col :span="24">
									<el-form-item label="收款单位（人）">
										<el-input v-model="form.payeeName" readonly></el-input>
									</el-form-item>
								</el-col>


								<el-col :span="12">
									<el-form-item label="开户银行">
										<el-input v-model="form.bankName" readonly></el-input>
									</el-form-item>
								</el-col>

								<el-col :span="12">
									<el-form-item label="银行账户" label-width="125px">
										<el-input v-model="form.bankAccountNum" placeholder="金额" readonly/>
									</el-form-item>
								</el-col>

								<el-col :span="24">
									<el-form-item label="抄送">

										<el-input v-model="form.flowMainCcList" readonly/>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item
									 label="发起人" prop="field119"
									>
										<el-input v-model="form.createdByString" disabled></el-input>
									</el-form-item>

								</el-col>
								<el-col :span="12">
									<el-form-item
									 label="发起时间"
									 prop="field119"
									>
										<el-input v-model="form.createdAt"></el-input>
									</el-form-item>
								</el-col>
								<el-card style="margin-bottom: 10px;">
									<h3 style="margin:0">制单 </h3>
									<el-row :gutter="10">
										<el-col :span="12">
											<el-form-item disabled label="支付方式" style="margin-bottom: 15px">
												<el-select v-model="confirmForm.payType" disabled>
													<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 disabled label="支付账户" style="margin-bottom: 15px">
                                                <el-select v-model="confirmForm.accountType" disabled>
                                                    <el-option
                                                        v-for="item in dc_data.ACCOUNT"
                                                        :key="item.value"
                                                        :label="item.label"
                                                        :value="item.value"
                                                    />
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
										<el-col :span="12">
											<el-form-item label="制单日期" style="margin-bottom: 0">
												<el-date-picker
												 disabled
												 v-model="confirmForm.makeDate"
												 placeholder="制单日期"
												 style="width: 100%"
												 type="date"
												 value-format="yyyy-MM-dd"
												/>
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item label="制单号" style="margin-bottom: 0">
												<el-input readonly v-model="confirmForm.makeNum"></el-input>
											</el-form-item>
										</el-col>
									</el-row>
								</el-card>
								<el-card style="margin-bottom: 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
													 readonly
													 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 readonly v-model="confirmForm.payRemark" style="margin-top:10px" type="textarea"/>
												</el-form-item>
											</el-col>
										</el-row>
									</el-form>
								</el-card>

							</el-row>

						</el-card>

					</el-form>
					<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>
				</el-tab-pane>
				<el-tab-pane label="流程图  " name="second">

					<cost-canvas v-if="canVasStatus" ref="costCanvas"/>
				</el-tab-pane>
			</el-tabs>

		</div>

		<div slot="footer">

			<el-button @click="confirmSubmit()">关 闭</el-button>
		</div>

	</el-dialog>

</template>

<script>
import { upload } from '@/static/utils/channel'
import Base from '@/views/base/base'
import BaseData from '@/views/base/baseData'
import UserSelect from '@/views/components/UserSelect'
import costCanvas from '@/views/workflow/components/myProcess/costCanvas.vue'

export default {
	name: 'ApplyPay',
	mixins: [Base, BaseData],
	components: {
		UserSelect, costCanvas
	},
	data() {
		return {
			row: {},
			canVasStatus: false,
			confirmForm: {},
			selectList: [],
			tableData: [],
			confirmList: [],
			loading: false,
			dc_key: ['ORDER_STATUS', 'PAY_TYPE', 'BUDGET_FY','ACCOUNT'],
			argeeBackStatus: false,
			argeeNoStatus: false,
			ProjectData: [],
			dialogTitle: '费用报支申请-查看详情',
			dialogVisible: false,
			form: {
				applyUseMoneyDetailListString: [],
				feeMoneyTotal: 0
			},
			activeName: 'first',
            cbFyTypes:[]
		}
	},
	mounted() {
		const _this = this
		_this.initDict(this.dc_key).then((res) => {
		})

	},
	methods: {
		handleClick(tab, event) {
			this.canVasStatus = false
			if (this.activeName == 'second') {
				this.canVasStatus = true
				this.$nextTick(() => {
					this.$refs.costCanvas.createNodeCanvas(this.row)

				})
			}
		},
		beforeClose() {
			this.canVasStatus = false
			this.form = {
				applyUseMoneyDetailListString: []
			}
			this.dialogVisible = false
			this.activeName = 'first'
			this.$forceUpdate()
            this.dialogVisible = false
            this.$emit('close')
		},
		getFeeMoneyTotal() {
			let feeMoneyTotal = 0
			for (let i = 0; i < this.form.applyUseMoneyDetailListString.length; i++) {
				feeMoneyTotal += this.form.applyUseMoneyDetailListString[i].feeMoney
			}
			this.form.feeMoneyTotal = feeMoneyTotal
		},
		changeFileType(e, i) {
			if (e != 1) {
				this.form.applyUseMoneyDetailListString[i].fileList = []
			}
			this.$forceUpdate()
		},
		parentMethod(val) {
			if (val.length > 0) {
				this.confirmForm.ccList = val.join(',')
			}
		},
		handlePictureRemove(i, file, fileList) {
			fileList.splice(i, 1)

			let copyFileList = [...fileList]
			fileList = copyFileList

			this.form.applyUseMoneyDetailListString = this.form.applyUseMoneyDetailListString.map((e) => {
				return e
			})
		},
		uploadFile(params, i) {
			upload(params, true).then((res) => {
				this.form.applyUseMoneyDetailListString[i].fileList.push(res)
				this.form.applyUseMoneyDetailListString[i].fileType = 1
				this.$message.success('上传成功')
			})

		},
		baseRequest1(prefix, opUrl, postData) {
			return this.$channel.globleRequest(prefix, opUrl, postData, 'project task')
		},
		async confirmSubmit() {
			this.dialogVisible = false
			this.form = {}
            this.$emit('close')
		},
		async setVisible(status, row) {
			this.loading = false
			this.row = row
			this.loading = false
			try {
				const { data } = await this.baseRequest1('ApplyUseMoneyController', 'getInfoByFlowMainId', { flowMainId: row.id })
				const { data: flowHistroy } = await this.baseRequest1('FlowMainController', 'getFlowHistroyByFlowMainId', { flowMainId: row.id })
				this.confirmForm.flowMainPushId = row.flowMainPushId
				this.tableData = flowHistroy
				this.form = data
				this.confirmForm.confirmResult = data.confirmResult
				this.confirmForm.payType = data.payType
				this.confirmForm.payTime = this.$common.transDate(data.payTime)
				this.confirmForm.payRemark = data.payRemark
				this.confirmForm.accountType = data.accountType
                this.projectChange()
				this.confirmList = data.ccList
				console.log(this.$common.transDate(data.makeDate))
				this.confirmForm.makeDate = this.$common.transDate(data.makeDate)
				this.confirmForm.makeNum = data.makeNum
				this.form.createdAt = data.createdAt ? this.$common.transDate(data.createdAt) : null
				this.form.applyUseMoneyDetailListString = data.applyUseMoneyDetailList

				for (const e of this.form.applyUseMoneyDetailListString) {
					if (e.fileDataIds && e.fileDataIds.length > 0) {
						// e.fileList = e.fileDataIds.split(',')
						const { data: fileTaoTaoList } = await this.baseRequest1('FileZtController', 'findFileInfoByIds/' + e.fileDataIds, '')
						e.fileList = fileTaoTaoList.data.map((file) => {
							console.log(file)
							return {
								url: this.$constant.BASE_URI + '/FileController/download/' + file.id,
								name: file.fileName,
								data: e.id,
								uid: new Date().getTime()
							}
						})
					} else {
						e.fileList = []
					}
				}

				this.getFeeMoneyTotal()
				if (data.flowMainCcList) {
					this.form.flowMainCcList = data.flowMainCcList.map((e) => {
						return (e.name)
					}).join()
				}

				if (data.applyUseMoneyDetailList) {
					this.form.applyUseMoneyDetailListString = data.applyUseMoneyDetailList
				}
			} catch (e) {
				console.error(e)
			}

			this.dialogVisible = status
			this.row = row
		},
		addListRow() {
			const _this = this
			_this.form.applyUseMoneyDetailListString.push({ type: '1', fileList: [] })
		},
		deleteRow(index) {
			this.form.applyUseMoneyDetailListString.splice(index, 1)
		},
        async projectChange(){
            this.cbFyTypes=[]
            let submitData = {proId:this.form.proId }
            const { data } = await this.baseRequest1('ProMainDashboardController', 'getRightBudgetList', submitData)

            if (data) {
                const fyList = data.fyList || []
                const cbList = data.cbList || []
                fyList.forEach(item=>{
                    const i = {
                        value : item.budgetChildType,
                        label:item.budgetType+'-'+item.budgetChildType
                    }
                    this.cbFyTypes.push(i)
                })
                cbList.forEach(item=>{
                    const i = {
                        value : item.budgetChildType,
                        label:item.budgetType+'-'+item.budgetChildType
                    }
                    this.cbFyTypes.push(i)
                })
            }
        }
	}
}
</script>

<style lang="scss">
.mb25 {
	margin-bottom: 25px;
}

.pdtopbottom16 {
	padding: 0px 16px;
}

.pdtop16px {
	padding-top: 16px;
}

.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;
	}
}


.txtc {
	text-align: center
}

.ml5 {
	margin-left: 5px;
}

.eltype {
	margin-bottom: 5px;
}

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


}

.moneydetails:before {
	content: "*";
	color: #ff4949;

}

.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;
	}

	.el-upload {
		width: 100%;
	}
}

.feeMoneyTotal {
	width: 100%;
	height: 14px;
	font-size: 14px;
	font-weight: 400;
	color: #1890FF;
	margin-top: 31px;
	margin-bottom: 13px;
}
</style>