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

<template>

	<div class="custom-tree-container">


		<el-row class="handle-box" :gutter="10" style="margin-bottom: 10px">
			<el-form
			 ref="elForm"
			 :model="search"
			 :rules="rules"

			 size="medium"
			>
				<el-col :span="4">
					<el-form-item label="" prop="name" style="margin-bottom: 0">
						<el-input
						 size="small"
						 v-model="search.name"
						 :style="{ width: '100%' }"
						 clearable
						 placeholder="请输入项目名"
						/>
					</el-form-item>
				</el-col>
                <el-col :span="4">
                    <el-form-item label="" prop="name" style="margin-bottom: 0">
                        <el-input
                            size="small"
                            v-model="search.supplierName"
                            :style="{ width: '100%' }"
                            clearable
                            placeholder="请输入供应商"
                        />
                    </el-form-item>
                </el-col>
				<el-col :span="4">
					<el-form-item label="" prop="name" style="margin-bottom: 0">
						<el-date-picker

						 id="datePicker"
						 v-model="timeValue"
						 size="small"
						 type="daterange"
						 align="right"
						 unlink-panels
						 range-separator="-"
						 start-placeholder="流程开始日期"
						 end-placeholder="流程结束日期"
						 value-format="yyyy-MM-dd"
						 :picker-options="pickerOptions"
						 @change="pickerChange"
						/>
					</el-form-item>
				</el-col>


				<el-col :span="16">
					<div style="width: auto;float: right">
						<el-button class="ch-button-warning" plain size="small" @click="handleReset()"><i
						 class="el-icon-aim"
						/>&nbsp;重置
						</el-button>
						<el-button class="ch-button" size="small" @click="handleSearch()"><i class="el-icon-search"/>&nbsp;搜索
						</el-button>
						<el-button size="small" type="success" @click="confirmOutput()"><i class="el-icon-download"/>&nbsp;导出
						</el-button>
					</div>
				</el-col>
			</el-form>
		</el-row>
		<el-row class="handle-box">
			<el-col :span="24">
				<el-table
				 v-loading="loading"
				 :cell-style="styleBack"
				 :data="tableData"
				 row-class-name="g_table_row"
				 stripe
				 fit
				 style="width: 100%"
				>
					<el-table-column label="序号" fixed type="index" width="60"/>
					<el-table-column label="付款申请单号" fixed prop="form_id" width="175"/>
					<el-table-column label="申请人" prop="truename" width="100"/>
					<el-table-column label="所在部门" prop="dept_name" width="100"/>
					<el-table-column label="流程发起时间" prop="created_at" width="125"/>
					<el-table-column label="流程结束时间" prop="last_update_time" width="125"/>
					<el-table-column label="关联采购单号" prop="order_no" width="125"/>
					<el-table-column label="关联项目名称" prop="pro_name" width="175"/>
					<el-table-column label="采购内容" prop="remark" width="170">
						<template scope="scope">
							<el-tooltip class="item" effect="dark" :content="scope.row.remark" placement="top">
								<div class="chaochuyingcang">{{ scope.row.remark }}</div>
							</el-tooltip>

						</template>
					</el-table-column>
					<el-table-column label="付款名称" prop="pay_name" width="125"/>
					<el-table-column label="支付金额（元）" prop="pay_money" width="125"/>
					<el-table-column label="供应商" prop="biz_name"/>
					<el-table-column label="支付方式" prop="pay_type"/>
					<el-table-column label="发票号" prop="bill_number" width="200"/>
					<el-table-column label="税率%" prop="bill_rate"/>
					<el-table-column label="制单日期" prop="createCardTime" width="125"/>
					<el-table-column label="实际支付日期" prop="pay_time" width="125"/>
					<el-table-column label="当前流程状态" prop="flow_status" width="125"/>
					<el-table-column label="发票附件" prop="file_data_ids" min-width="175">
						<template scope="scope">

							<el-button
							 style="padding: 0;margin: 0"
							 v-for="file in  scope.row.file_data_ids"
							 type="text"
							 @click="downLoadFile(file.id)"
							>
								{{ file.fileName }}
							</el-button>


						</template>
					</el-table-column>

				</el-table>
				<div class="table-page">
					<el-pagination
					 :current-page.sync="currentPage"
					 :page-size="pageSize"
					 :total="allpage"
					 background
					 layout="total, prev, pager, next"
					 @current-change="handleCurrentChange"
					/>
				</div>
			</el-col>
		</el-row>


	</div>
</template>
<script>
import common from '@/static/utils/common'
import Base from '../base/base'
import BaseData from '../base/baseData'
import BaseDept from '../base/baseDept'

export default {

	mixins: [Base, BaseData, BaseDept],
	data() {
		return {
			timeValue: '',
			// 查询数据的内容
			search: {},
			departmentIds: '',
			deptAttr: '',
			// 通用字典项
			AUDIT_TYPE: [],
			dc_key: ['PAY_TYPE'],
			dc_map: {},
			// 列表相关
			cusName: '',
			auditStatus: '',
			auditType: '',
			proName: '',
			applyBy: '',
			tableData: [],
			loading: false,
			UserMap: {},
			// 分页
			currentPage: 1,
			allpage: 0,
			pageSize: 12,
			// 弹框相关
			currAuditId: '',
			dialogVisible: false,
			dialogTitle: '新增',
			isAdd: true,
			detailList: [],
			rules: {},
			OutData: []
		}
	},
	mounted() {
		const _this = this
		_this.getData()
		this.initDict().then(() => {
			if (this.DeptAttrData.length > 0) {
				this.deptAttr = this.DeptAttrData[0].value
				this.initDepartment({ deptAttr: this.deptAttr })
			}
		})
	},
	methods: {
		pickerChange: function(val) {
            if(val){
                this.search.startTime = val[0]
                this.search.endTime = val[1]
            }else{
                this.search.startTime = ''
                this.search.endTime = ''
            }

        },
		downLoadFile(id) {
			window.open(this.$constant.BASE_URI + '/FileController/download/' + id)
		},
		styleBack({ row, column, rowIndex, columnIndex }) {
			if (row.isFirst == 1) return { backgroundColor: '#FDBABB' }
		},
		addAttrDept: function() {
			if (!this.form.selectDepts) this.form.selectDepts = []
			this.form.selectDepts.push({
				userId: this.form.id,
				attrId: '',
				deptAttrs: this.DeptAttrData,
				deptId: '',
				depts: [],
				postIds: []
			})
		},

		dlgOpen: function() {
			const _this = this
			if (this.form.id) {
				this.baseRequest('getById', {
					id: this.form.id
				}).then((res) => {
					if (res.data) {
						_this.form.groupId = res.data.groupId
						_this.form.username = res.data.username
						_this.form.truename = res.data.truename
						_this.form.staffCode = res.data.staffCode
						_this.form.gender = res.data.gender
						_this.form.leader = res.data.leader
						_this.form.position = res.data.position
						_this.form.posts = res.data.posts ? res.data.posts.split(',') : []
						if (_this.form.posts.length) {
							_this.initPosition2(_this.form.posts)
						}
						_this.form.sequenceNo = res.data.sequenceNo
						_this.form.phone = res.data.phone
						_this.form.secretKey = res.data.secretKey
						_this.form.comment = res.data.comment

						_this.form.selectDepartment = res.data.department

						_this.form.selectDepts = []
						_this.userDeptRequest('listByUserId', {
							userId: _this.form.id
						}).then(resDept => {
							if (resDept.data) {
								resDept.data.forEach(dept => {
									dept.postIds = dept.posts ? dept.posts.split(',') : []
									dept.deptAttrs = _this.DeptAttrData
									if (dept.attrId) {
										dept.depts = _this.TempDepts.filter(tempDept => {
											return tempDept.deptAttr === dept.attrId
										})
									}
									_this.form.selectDepts.push(dept)
								})
							}
							// console.log('listByUserId', _this.form.selectDepts)
						})
					}
				}).catch(() => {
				})
			}
		},
		handleDeptAttrChange: function(val) {
			this.selectDeptNode = this.getDeptDefaultTopNode()
			this.deptAttr = val
			this.initDepartment({ deptAttr: val })
			this.handleSearch()

		},
		handleDeptNodeClick(data, node, ocx) {
			this.departmentIds = data.id
			this.getData()

		},
		handleCloseDept: function() {
			this.selectDeptNode = this.getDeptDefaultTopNode()
			this.handleSearch()

		},
		confirmOutput() {
			const OutSize = [
				{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 },
				{ wch: 15 }, { wch: 15 }, { wch: 25 }, { wch: 25 }, { wch: 15 }, { wch: 15 }, { wch: 15 }
				, { wch: 15 }, { wch: 15 }, { wch: 15 }]
			const fileName = '付款申请明细' + new Date().Format('yyyy-MM-dd')
			this.$outputXlsxFile(this.OutData, OutSize, fileName)
		},
		getPostData: function() {
			const postData = {
				departmentIds: this.departmentIds,
				name: this.search.name,
                startTime: this.search.startTime,
                endTime: this.search.endTime,
                supplierName: this.search.supplierName,
				pageNum: this.currentPage,
				pageSize: this.pageSize
			}
			const currUser = this.$common.currUser()
			if (currUser && currUser.groupId) {
				postData.groupId = common.currUser().groupId
			}
			if (!this.$common.isAdmin()) {
				postData.chargedby = this.$common.currUser().id
			}

			return postData
		},
		initOutData: function() {
			const _this = this
			this.OutData = [[
				'付款申请单', '申请人', '所在部门', '流程发起时间', '流程结束时间', '关联采购单号',
				'关联项目名称', '采购内容', '付款名称', '支付金额', '供应商'
				, '支付方式', '发票号', '税率%', '制单日期', '实际支付日期', '当前流程状态'
			]]
			const postData = this.getPostData()
			this.baseRequest1('findAllApplyPaymentListByInfo', postData).then((res) => {
				try {
					if (res.data) {
						res.data.forEach(function(item) {
							const jsonMap = _this.getItemJson(item)

							const jsonArray = [
								jsonMap.form_id,
								jsonMap.truename,
								jsonMap.dept_name,
								jsonMap.created_at,
								jsonMap.last_update_time,
								jsonMap.order_no,
								jsonMap.pro_name,
								jsonMap.remark,
								jsonMap.pay_name,
								jsonMap.pay_money,
								jsonMap.biz_name,
								jsonMap.pay_type,
								jsonMap.bill_number,
								jsonMap.bill_rate,
								jsonMap.createCardTime,
								jsonMap.pay_time,
								jsonMap.flow_status
							]
							console.log(jsonArray)

							_this.OutData.push(jsonArray)
						})
					}
				} catch (e) {
				}
			}).catch(() => {
			})
		},
		async changeStatus(row) {
			let status = row.status == 0 ? 2 : row.status == 2 ? 0 : null
			this.loading = true
			let { data } = await this.baseRequest1('noOrUse', { id: row.id, status })
			if (data.code == 200) {
				this.loading = false
				this.getData()
				this.$message.success('状态修改成功')
			}

		},
		async openHolidayDialog(status, row) {
			this.$refs.addOrEditHoliiday.setVisible(status, row)

		},
		handleCurrentChange: function(val) {
			this.currentPage = val
			this.getData()

		},
		recallApply: function(row, type) {
			const _this = this
			_this.$confirm('该流程已经在审核中，撤回后原审核内容将作废确认撤回吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(function() {
				const deleting = _this.$notify({
					title: '正在撤回,请稍等',
					type: 'warning'
				})
				const postData = {
					flowMainid: row.id
				}
				_this.baseRequest2(
				 'FlowMainController',
				 'recallApply',
				 postData).then(res => {
					if (res.data.code === 200) {
						_this.getData()
						deleting.close()
						_this.$notify({
							title: '撤回成功',
							type: 'info'
						})
					} else {
						deleting.close()
						_this.dialogVisible = false
						_this.$notify({
							title: '撤回失败',
							type: 'info'
						})
					}
				}).catch((err) => {
					deleting.close()
					_this.$alert(err)
				})
			}).catch(function(error) {
				console.error(error)
			})
		},
		// 初始化获取数据
		getData() {
			const _this = this
			const postData = {
				name: _this.search.name,
                supplierName: _this.search.supplierName,
				startTime: _this.search.startTime,
				endTime: this.search.endTime,
				pageNum: _this.currentPage,
				pageSize: _this.pageSize
			}
			this.loading = true
			_this.baseRequest1('findApplyPaymentListByInfo', postData).then(res => {
				if (res.data) {
					this.loading = false
					_this.tableData = []
					res.data.rows.forEach(item => {
						item.noUseDate = item.noUseDate ? this.$common.transDate(item.noUseDate) : null
						item.restHolidayDate = item.restHolidayDate ? this.$common.transDate(item.restHolidayDate) : null
						item.joinDay = item.joinDay ? this.$common.transDate(item.joinDay) : null
						item.socialPayDay = item.socialPayDay ? this.$common.transDate(item.socialPayDay) : null
						_this.tableData.push(_this.getItemJson(item))
					})
					_this.allpage = res.data.total
				} else {
					_this.tableData = []
				}
			})
			this.initOutData()
		},
		getItemJson(item) {
			item.created_at = this.$common.transDate(item.created_at)
			item.last_update_time = this.$common.transDate(item.last_update_time)
			item.pay_time = this.$common.transDate(item.pay_time)
			item.createCardTime = this.$common.transDate(item.createCardTime)
			item.flow_status = item.flow_status == 1 ? '审批中' : '结束'
			item.xxx = '111'
			return item
		},
		handleSearch: function() {
			this.getData()
		},
		handleReset: function() {
			for (const i in this.search) {
				if (i !== 'pageNum' && i !== 'pageSize') {
					this.search[i] = ''
				}
			}
			this.handleSearch()

		},
		// 打开流程发起菜单
		handleClick(tab, event) {
			this.getData()
		},
		// 请求封装，继承类中调用，必须存在
		baseRequest1(opUrl, postData) {
			return this.$channel.globleRequest(
			 'ApplyPaymentController',
			 opUrl,
			 postData,
			 'project task'
			)
		},
		baseRequest2(controller, opUrl, postData) {
			return this.$channel.globleRequest(
			 controller,
			 opUrl,
			 postData,
			 'project task'
			)
		}

	}
}
</script>

<style lang="scss">
.chaochuyingcang {
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.custom-tree-container .block-l {
	/*flex-grow: 2 ;*/
	float: left;
	width: 20%;
	padding: 0 8px 0 0;
}

.custom-tree-container .block-r {
	/*flex-grow: 10;*/
	float: left;
	width: 80%;
	/*padding: 0 0 0 8px;*/
}

.holidayRow {
	.el-select {
		width: 100%;
	}
}

.el-dropdown-link {
	cursor: pointer;
	color: rgba(39, 78, 219, 1);
}

.demonstration {
	display: block;
	color: #8492a6;
	font-size: 14px;
	margin-bottom: 20px;
}

.labeldom {
	.el-tabs__nav-wrap::after {
		background: none;
	}
}

.w200px {
	width: 200px;
}
</style>
<style scoped>
.ch-input .el-input__inner {
	border-radius: 0px;
	border-color: #32323a;
}

.ch-input-size {
	width: 150px;
}

.ch-button {
	borderund-color: #32323a;
	color: #fff;
}

.ch-button-warning {
	margin-left: 10px;
	border-radius: 0px;
	border-color: #E75B5B;
	background-color: #E75B5B;
	color: #fff;
}
</style>