programs_info/小艾协同/流程图地址/流程从三资开始和保障房合并后搬过来的/前端代码/workflow/costDetailList.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="3">
					<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="3">
                    <el-form-item label="" prop="payeeName" style="margin-bottom: 0">
                        <el-input
                            size="small"
                            v-model="search.payeeName"
                            :style="{ width: '100%' }"
                            clearable
                            placeholder="请输入收款人"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item label="" prop="feeType" style="margin-bottom: 0">
                        <el-input
                            size="small"
                            v-model="search.feeType"
                            :style="{ width: '100%' }"
                            clearable
                            placeholder="请输入费用类型"
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="3">
                    <el-form-item label="" prop="flowStatus" style="margin-bottom: 0">
                        <el-select v-model="search.flowStatus" clearable placeholder="审核结果" size="small" @change="pickerChange">
                            <el-option
                                v-for="item in flowStatus"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
				<el-col :span="3">
					<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="24">
					<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="序号" type="index" width="60" fixed/>
<!--					<el-table-column label="费用报支申请单" prop="form_id" width="170"/>-->
					<el-table-column label="申请人" prop="truename"/>
					<el-table-column label="所在部门" prop="dept_name" width="120"/>
					<el-table-column label="发起时间" prop="created_at" width="170"/>
					<el-table-column label="流程结束时间" prop="last_update_time" width="170"/>
					<el-table-column label="关联项目名称" prop="proName" width="170"/>
					<el-table-column label="费用类型" prop="fee_type" width="170"/>
					<el-table-column label="用途" prop="use_reasons" width="170">
						<template scope="scope">

							<el-tooltip class="item" effect="dark" :content="scope.row.use_reasons" placement="top">
								<div class="chaochuyingcang">{{ scope.row.use_reasons }}</div>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="发票号" prop="fee_money" width="170">
						<template scope="scope">

							<el-tooltip class="item" effect="dark" :content="scope.row.file_number" placement="top">
								<div class="chaochuyingcang">{{ scope.row.file_number }}</div>
							</el-tooltip>
						</template>
					</el-table-column>
					<el-table-column label="金额（元）" prop="fee_money" width="170"/>
					<el-table-column label="收款人" prop="payee_name" width="170"/>
					<el-table-column label="银行" prop="bank_name" width="170"/>
					<el-table-column label="制单日期" prop="make_date" width="170"/>
					<el-table-column label="实际支付日期" prop="pay_time" width="170"/>
					<el-table-column label="当前流程状态" prop="flow_status" width="170"/>
					<el-table-column label="单据" prop="fileType" width="170">
						<template scope="scope">
							<span v-if="scope.row.file_type==1">发票</span>
							<span v-if="scope.row.file_type==2">发票后补</span>

							<span v-if="scope.row.file_type==3">无发票</span>

						</template>

					</el-table-column>
					<el-table-column label="附件" prop="status" width="170">
						<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 {
			pickerOptions: {
				shortcuts: [{
					text: '最近一周',
					onClick: function(picker) {
						var end = new Date()
						var start = new Date()
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
						picker.$emit('pick', [start, end])
					}
				}, {
					text: '最近一个月',
					onClick: function(picker) {
						var end = new Date()
						var start = new Date()
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
						picker.$emit('pick', [start, end])
					}
				}, {
					text: '最近三个月',
					onClick: function(picker) {
						var end = new Date()
						var start = new Date()
						start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
						picker.$emit('pick', [start, end])
					}
				}]
			},
			// 查询数据的内容
			search: {
                flowStatus:'1'
            },
			timeValue: '',
			departmentIds: '',
			deptAttr: '',
			// 通用字典项
			AUDIT_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: [],
            flowStatus:[
                {value: '1', label: '审批中'},
                {value: '2', label: '退回发起人'},
                {value: '3', label: '已结束'},
                {value: '4', label: '已撤回'}
            ],
            cbFyTypes:[]
		}
	},
	mounted() {
		const _this = this
		_this.getData()
		this.initDeptAttr().then(() => {
			if (this.DeptAttrData.length > 0) {
				this.deptAttr = this.DeptAttrData[0].value
				this.initDepartment({ deptAttr: this.deptAttr })
			}
		})
	},
	methods: {
        initData(){
            this.getData()
            this.initDeptAttr().then(() => {
                if (this.DeptAttrData.length > 0) {
                    this.deptAttr = this.DeptAttrData[0].value
                    this.initDepartment({ deptAttr: this.deptAttr })
                }
            })
        },
		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 }]
			const fileName = '费用报支明细' + new Date().Format('yyyy-MM-dd')
			this.$outputXlsxFile(this.OutData, OutSize, fileName)
		},
        async projectChange(){
            this.cbFyTypes=[]
            let submitData = {proId:this.form.proId }
            const { data } = await this.baseRequest3('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)
                })
            }
        },
        baseRequest3(prefix, opUrl, postData) {
            return this.$channel.globleRequest(prefix, opUrl, postData, 'project task')
        },
		getPostData: function() {
			const postData = {
				departmentIds: this.departmentIds,
				name: this.search.name,
                payeeName: this.search.payeeName,
                feeType: this.search.feeType,
                startTime: this.search.startTime,
                flowStatus: this.search.flowStatus,
                endTime: this.search.endTime,
				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 = []
			this.OutData = [[
				'费用报支申请单', '申请人', '所在部门', '发起时间', '流程结束时间', '关联项目名称',
				'费用类型', '用途','发票号', '金额（元）', '收款人', '银行', '制单日期', '实际支付日期', '当前流程状态', '单据']]
			const postData = this.getPostData()
			this.baseRequest1('findAllApplyUseMoneyListByInfo', 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.proName,
								jsonMap.fee_type,
								jsonMap.use_reasons,
								jsonMap.file_number,
								jsonMap.fee_money,
								jsonMap.payee_name,
								jsonMap.bank_name,
								jsonMap.make_date,
								jsonMap.pay_time,
								jsonMap.flow_status,
								jsonMap.file_type == 1 ? '发票' : jsonMap.file_type == 2 ? '发票后补' : jsonMap.file_type == 3 ? '无发票' : ''
							]
							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,
                payeeName: _this.search.payeeName,
                feeType: _this.search.feeType,
				startTime: _this.search.startTime,
				endTime: _this.search.endTime,
				flowStatus: _this.search.flowStatus,
				pageNum: _this.currentPage,
				pageSize: _this.pageSize
			}
			this.loading = true
			_this.baseRequest1('findApplyUseMoneyListByInfo', 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.make_date = this.$common.transDate(item.make_date)

			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(
			 'ApplyUseMoneyController',
			 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>