programs_info/小艾协同/流程图地址/流程从三资开始和保障房合并后搬过来的/前端代码/workflow/components/myProcess/applyCostConfirm.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="5" class="col-txt txtc"><span>费用&成本类型</span></el-col>
									<el-col :span="5" class="col-txt txtc">
										金额（元）
									</el-col>
									<el-col :span="4" class="col-txt txtc">发票号</el-col>
									<el-col :span="10" class="col-txt txtc">
										单据
									</el-col>
								</el-row>
								<el-row
								 v-for="(item,index) in form.applyUseMoneyDetailListString"
								 :gutter="10" class="eltype"
								>
									<el-col :span="5">
										<el-select
										 size="small"
										 v-model="item.feeType"
										 filterable
										 placeholder="请选择"
										 disabled
										 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="5">
										<el-input
										 size="small"
										 v-model="item.feeMoney"
										 filterable
										 placeholder="请选择"
										 readonly
										 style="width: 100%"
										/>
									</el-col>
									<el-col :span="4">
										<el-input
										 readonly
										 v-model="item.fileNumber"
										 :controls="false"
										 size="small"
										 :disabled="item.fileList==0"
										 controls-position="right"
										 placeholder="无"
										 style="width: 100%"
										/>
									</el-col>
									<el-col :span="10" class="col-input">
										<el-upload
										 disabled
										 :action="$constant.BASE_URI+'/FileController/upload'"
										 :file-list="item.fileList"
										 :http-request="(params)=>{uploadFile(params,index)}"
										 :limit="5"
										 :multiple="false"
										 :show-file-list="false"
										 class="upload-demo"

										 style="width: 30%;float: left;margin-left: 42px;display: block"
										>
											<el-button disabled size="small" style="font-size: 14px" type="text">
												上传发票
												<img
												 src="./fapiaoicon.png"
												 style="margin-left: 5px;position: absolute;top: 13.5px;"
												 width="24px"
												/>

											</el-button>
											<!--											<div slot="file" slot-scope="{file}">-->
											<!--												<a :href="file.url">{{ file.name }}</a>-->
											<!--												<span class="el-upload-list__item-actions">-->
											<!--                            <i class="el-icon-delete" @click="handlePictureRemove(index,file,item.fileList)"/>-->
											<!--                        </span>-->
											<!--											</div>-->
										</el-upload>
										<el-radio-group
										 v-model="item.fileType"
										 disabled
										 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="15">&nbsp;</el-col>
									<el-col :span="9">
										<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">
<!--											 <i class="el-icon-delete" @click="handlePictureRemove(i,file,item.fileList)"/>-->
									   	 </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" readonly></el-input>
									</el-form-item>

								</el-col>
								<el-col :span="12">
									<el-form-item
									 label="发起时间"
									 prop="field119"
									>
										<el-input v-model="form.createdAt" readonly></el-input>
									</el-form-item>
								</el-col>

							</el-row>
							<el-card v-if="zhidanStatus" 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="12">
											<el-form-item label="支付方式" style="margin-bottom: 15px">
												<el-select :disabled="zffhStatus" v-model="confirmForm.payType">
													<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 :disabled="zffhStatus" v-model="confirmForm.accountType">
                                                    <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
												 :readonly="zffhStatus"
												 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="zffhStatus" v-model="confirmForm.makeNum"></el-input>
											</el-form-item>
										</el-col>
									</el-row>
								</el-form>
							</el-card>

							<el-card v-if="zffhStatus" 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
												 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>
						</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>

					<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">
					<cost-canvas v-if="canVasStatus" ref="costCanvas"/>
				</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 { 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: {
		upload, UserSelect, costCanvas
	},
	data() {
		return {
			row: {},
			canVasStatus: false,
			zffhStatus: false,
			zhidanStatus: false,
			confirmForm: {
                makeDate:'',
                payType:null,
                makeNum:'',
				confirmContent: '',
                accountType:'',
				confirmResult: 1
			},
			confirmList: [],
			selectList: [],
			tableData: [],
			loading: false,
			dc_key: ['ORDER_STATUS', 'PAY_TYPE', 'BUDGET_FY', 'COMMON_PHRASES','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
			console.log(this.activeName)
			if (this.activeName == 'second') {
				this.canVasStatus = true
				debugger
				this.$nextTick(() => {
					this.$refs.costCanvas.createNodeCanvas(this.row)

				})
			}
		},
		beforeClose() {
			this.canVasStatus = false
			this.form = {
				applyUseMoneyDetailListString: []
			}
			this.dialogVisible = false
			this.activeName = 'first'
			this.$forceUpdate()
		},
		selectCommonPhrases(e) {
			if (!this.confirmForm.confirmContent) this.confirmForm.confirmContent = ''
			this.confirmForm.confirmContent += e
		},
		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() {
			console.log(this.confirmForm)
			for (let i = 0; i < this.form.applyUseMoneyDetailListString.length; i++) {
				if (this.form.applyUseMoneyDetailListString[i].fileType == 1
				 &&
				 (!this.form.applyUseMoneyDetailListString[i].fileList
					||
					this.form.applyUseMoneyDetailListString[i].fileList.length == 0)) {
					this.$message.warning(`请上传费用明细中第${i + 1}行的发票文件`)
					return
				}
			}

			const { data } = await this.baseRequest1(
			 'ApplyUseMoneyController',
			 'AddConfirmResultUseMoney',
			 { ...this.confirmForm, applyUseMoneyDetailListString: JSON.stringify(this.form.applyUseMoneyDetailListString) })
			if (data.code == 200) {
				this.$message.success('处理成功')
				this.form = {}
				this.confirmForm =   {
                        makeDate:'',
                        payType:null,
                        makeNum:'',
                        confirmContent: '',
                        accountType: '',
                        confirmResult: 1
                },
				this.dialogVisible = false
				this.$emit('getData')
			}

		},
		async setVisible(status, row) {
			this.loading = false
			this.row = row
			this.activeName = 'first'
			let { data: data } = await this.baseRequest1('ApplyUseMoneyController', 'getInfoByFlowMainPushId', { flowMainPushId: row.flowMainPushId })

			this.zffhStatus = data.pushUserKey.indexOf('flow_zffh') != -1 ? true : false

			this.zhidanStatus = data.pushUserKey.indexOf('flow_cnzf') != -1 ? true : false|| this.zffhStatus
            console.log('(data.pushUserKey.indexOf(\'flow_cnzf\') != -1 ? true : false)',(data.pushUserKey.indexOf('flow_cnzf') != -1 ? true : false))
            console.log('this.zffhStatus',this.zffhStatus)
            let { data: flowHistroy } = await this.baseRequest1('FlowMainController', 'getFlowHistroyByFlowMainId', { flowMainId: row.id })
            let 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.confirmForm.flowMainPushId = row.flowMainPushId
			this.tableData = flowHistroy
			this.form = data
            this.projectChange()
            let confirmForm= {...data}
			this.form.confirmResult = 1
            /*if(!this.zhidanStatus){
                if (confirmForm.makeNum) this.confirmForm.makeNum = confirmForm.makeNum
                if (confirmForm.makeDate) this.confirmForm.makeDate = this.$common.transDate(confirmForm.makeDate)
                if (confirmForm.payType) this.confirmForm.payType = confirmForm.payType
                if (confirmForm.accountType) this.confirmForm.accountType = confirmForm.accountType
            }else{
                this.confirmForm.makeNum=null
                this.confirmForm.makeDate=''
                this.confirmForm.payType=null
            }*/
            this.confirmForm.makeNum = confirmForm.makeNum? confirmForm.makeNum:null
            this.confirmForm.makeDate = confirmForm.makeDate?this.$common.transDate(confirmForm.makeDate):''
            this.confirmForm.payType = confirmForm.payType?confirmForm.payType:null
            this.confirmForm.accountType =confirmForm.accountType? confirmForm.accountType:null

			this.form.createdAt = this.form.createdAt ? this.$common.transDate(confirmForm.createdAt) : null
			this.form.applyUseMoneyDetailListString = data.applyUseMoneyDetailList
			for (const e of this.form.applyUseMoneyDetailListString) {
				// e.fileList = e.fileDataIds.split(',')

				if (e.fileDataIds && e.fileDataIds.length > 0) {
					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 = []
				}

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

			if (data.applyUseMoneyDetailList) {
				this.form.applyUseMoneyDetailListString = data.applyUseMoneyDetailList
			}
			console.log(this.form.applyUseMoneyDetailListString)
			this.dialogVisible = status

		},
		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>