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

<template>
	<!--    我的流程主页 -->
	<div>
		<el-row class="handle-box labeldom" style="margin-bottom: 10px">
			<el-form
			 ref="elForm"
			 :model="search"
			 :rules="rules"
			 label-width="100px"
			 size="medium"
			>
				<el-col :span="6">
					<el-form-item label="流程名称" prop="field101" style="margin-bottom: 0px">
						<el-input
						 v-model="search.field101"
						 :style="{ width: '100%' }"
						 clearable
						 placeholder="请输入流程名称"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="主题" prop="field102" style="margin-bottom: 0px">
						<el-input
						 v-model="search.field102"
						 :style="{ width: '100%' }"
						 clearable
						 placeholder="请输入主题"
						/>
					</el-form-item>
				</el-col>
				<el-col v-if="this.activeName != '我的申请'" :span="6">
					<el-form-item label="发起人" prop="field103" style="margin-bottom: 0px">
						<el-input
						 v-model="search.field103"
						 :style="{ width: '100%' }"
						 clearable
						 placeholder="请输入发起人"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item size="large" style="margin-bottom: 0px">
						<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-form-item>
				</el-col>
			</el-form>
		</el-row>
		<el-row class="handle-box">
			<el-col :span="24">
				<el-table
				 v-loading="loading"
				 :data="tableData"
				 row-class-name="g_table_row"
				 stripe
				 style="width: 100%"
				>
					<el-table-column type="index" width="60"/>
					<el-table-column label="流程名称" prop="flowName"/>
					<el-table-column label="主题" prop="applyTheme">
						<template slot-scope="scope">
							<a v-if="activeName=='我的申请'||'我的委托'||'抄送事项'" style="color: #1890ff"
								 @click="openDetailsDialog(scope.row.flowType,scope.row)"
							>
								{{ scope.row.applyTheme }}
							</a>
							<span v-else>
                {{ scope.row.applyTheme }}
              </span>
						</template>
					</el-table-column>
					<el-table-column label="发起人" prop="applyUserName"/>
					<el-table-column label="所在部门" prop="applyDeptName"/>
					<el-table-column label="发起时间" prop="createdAt">
						<template slot-scope="scope">
							{{ $common.transTime(scope.row.createdAt) }}
							<!--              {{ (row.createdAt) }}-->
						</template>
					</el-table-column>
					<el-table-column label="当前流转状态" prop="flowStatusString"/>
					<el-table-column label="审核结果" prop="auditResultString"/>
					<el-table-column align="center" fixed="right" header-align="center" label="操作" width="350px">
						<template scope="scope">
							<el-button
							 size="mini"
							 type="primary"
							 @click="openDetailsDialog(scope.row.flowType,scope.row)"
							>
								查看
							</el-button>
							<el-button
							 :disabled="scope.row.flowStatusString=='已结束'||scope.row.flowStatusString=='已撤回'"
							 size="mini"
							 @click="recallApply(scope.row,scope.row,scope.row.flowType)"
							>
								撤回
							</el-button>
							<el-button
							 size="mini"
							 :disabled="!(scope.row.flowStatusString=='已结束'||scope.row.flowStatusString=='已撤回')"
							 @click="deleteApply(scope.row,scope.row,scope.row.flowType)"
							>
								删除
							</el-button>
							<el-button
							 :disabled="scope.row.flowStatusString=='已结束'||scope.row.flowStatusString=='已撤回'"
							 size="mini"
							 type="primary"
							 @click="openChangeClientDialog(scope.row)"
							>委托办理
							</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-image-->
			<!--          :src="$constant.BASE_URI-->
			<!--          +'/ActController/readByPid?processInstanceId='-->
			<!--          + 65001 " fit="scale-down"/>-->
		</el-row>
		<apply-cost ref="applyCsot" @getData="getData()"/>
		<apply-holiday ref="applyHoliday" @getData="getData()"/>
		<apply-pay ref="applyPay" @getData="getData()"/>
		<apply-pay-confirm ref="applyPayConfirm" @getData="getData()"/>
		<apply-cost-confirm ref="applyCostConfirm" @getData="getData()"/>
		<apply-holiday-confirm ref="applyHolidayConfirm" @getData="getData()"/>
		<change-client ref="changeClient" @getData="getData"/>
		<apply-again-cost ref="applyAgainCost" @getData="getData"/>
		<apply-pay-details ref="applyPayDetails" @getData="getData"/>
		<apply-again-pay ref="applyAgainPay" @getData="getData"/>
		<apply-cost-details ref="applyCostDetails"/>
		<holiday-details ref="holidayDetails" @getData="getData"/>
		<apply-again-holiday ref="applyAgainHoliday" @getData="getData"/>
		<apply-add-work ref="applyAddWork" @getData="getData()"/>
		<apply-add-work-confirm ref="applyAddWorkConfirm" @getData="getData()"/>
		<apply-add-work-detail ref="applyAddWorkDetail" @getData="getData()"/>
	</div>
</template>
<script>
import applyHoliday from '@/views/workflow/components/myProcess/applyHoliday.vue'
import applyCost from '@/views/workflow/components/myProcess/applyCost.vue'
import applyCostConfirm from '@/views/workflow/components/myProcess/applyCostConfirm.vue'
import applyAgainCost from '@/views/workflow/components/myProcess/applyAgainCost.vue'
import applyPay from '@/views/workflow/components/myProcess/applyPay.vue'
import applyPayConfirm from '@/views/workflow/components/myProcess/applyPayConfirm.vue'
import applyHolidayConfirm from '@/views/workflow/components/myProcess/applyHolidayConfirm.vue'
import changeClient from '@/views/workflow/components/myProcessAll/ChangeClient.vue'
import applyPayDetails from '@/views/workflow/components/myProcess/applyPayDetails.vue'
import applyAgainPay from '@/views/workflow/components/myProcess/applyAgainPay.vue'
import applyCostDetails from '@/views/workflow/components/myProcess/applyCostDetails.vue'
import holidayDetails from '@/views/workflow/components/myProcess/holidayDetails.vue'
import applyAgainHoliday from '@/views/workflow/components/myProcess/applyAgainHoliday.vue'
import applyAddWork from '@/views/workflow/components/myProcess/applyAddWork.vue'
import applyAddWorkConfirm from '@/views/workflow/components/myProcess/applyAddWorkConfirm.vue'
import applyAddWorkDetail from '@/views/workflow/components/myProcess/applyAddWorkDetail.vue'

export default {
	components: {
		applyAddWork,
		applyCostDetails,
		applyHoliday,
		applyCost,
		applyAgainCost,
		applyAgainPay,
		applyPay,
		applyPayConfirm,
		applyCostConfirm,
		applyHolidayConfirm,
		changeClient,
		applyPayDetails,
		holidayDetails,
		applyAgainHoliday, applyAddWorkConfirm, applyAddWorkDetail
	},
	data() {
		return {
			// 查询数据的内容
			search: {},
			activeName: '待办事项',
			// 通用字典项
			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: {}
		}
	},
	mounted() {
		const _this = this
		_this.getData()
	},
	methods: {
		openDetailsDialog(type, row) {

			switch (type) {
				case 'use_money' :
					console.log(row)
					this.$refs.applyCostDetails.setVisible(true, row)
					break
				case 'paymen' :
					this.$refs.applyPayDetails.setVisible(true, row)
					break
				case 'off_work':
					this.$refs.holidayDetails.setVisible(true, row)
					break
				case 'add_work' :
					this.$refs.applyAddWorkDetail.setVisible(true, row)

					break
			}

		},
		handleCurrentChange: function(val) {
			this.currentPage = val
			this.getData()
		},
		openChangeClientDialog(row) {
			this.$refs.changeClient.setVisible(true, row)
		},
		handleAudit(row, type) {
			switch (type) {
				case 'use_money' :
					this.$refs.applyCostConfirm.setVisible(true, row)
					break
				case 'paymen' :
					this.$refs.applyPayConfirm.setVisible(true, row)
					break
				case 'off_work' :
					this.$refs.applyHolidayConfirm.setVisible(true, row)

					break
				case 'add_work' :
					this.$refs.applyAddWorkConfirm.setVisible(true, row)

					break

			}
		},
		deleteApply(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',
				 `remove/${row.id}`,
				 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)
			})
		},
		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',
				 'topRecallApply',
				 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 = {
				applyUserName: _this.search.field103, // 申请人名称
				applyTheme: _this.search.field102, // 主题名称
				flowName: _this.search.field101, // 流程名称
				pageNum: _this.currentPage,
				pageSize: _this.pageSize
			}
			_this.baseRequest1('applylistByInfo', postData).then(res => {
				if (res.data) {
					_this.tableData = []
					res.data.rows.forEach(item => {
						_this.tableData.push(_this.getItemJson(item))
					})
					_this.allpage = res.data.total
				} else {
					_this.tableData = []
				}
			})
		},
		getItemJson: function(item) {
			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()
		},
		// 打开流程发起菜单
		openDianlog(ref) {
			console.log(ref)
			this.$refs[ref].setVisible(true)
		},
		handleClick(tab, event) {
			this.getData()
		},
		// 请求封装，继承类中调用，必须存在
		baseRequest1(opUrl, postData) {
			return this.$channel.globleRequest(
			 'FlowMainController',
			 opUrl,
			 postData,
			 'project task'
			)
		},
		baseRequest2(controller, opUrl, postData) {
			return this.$channel.globleRequest(
			 controller,
			 opUrl,
			 postData,
			 'project task'
			)
		}

	}
}
</script>

<style lang="scss">
.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>