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

<template>
	<!--    我的流程主页 -->
	<div>
		<el-row class="handle-box labeldom" style="margin-bottom: 10px">
			<el-col :span="22">
				<el-tabs v-model="activeName" @tab-click="handleClick()">
					<el-tab-pane label="待办事项" name="待办事项"/>
					<el-tab-pane label="已办事项" name="已办事项"/>
					<el-tab-pane label="我的申请" name="我的申请"/>
					<el-tab-pane label="抄送事项" name="抄送事项"/>
					<el-tab-pane label="委托待办事项" name="委托待办事项"/>
					<el-tab-pane label="我的委托" name="我的委托"/>
				</el-tabs>
			</el-col>
			<el-col :span="2">
				<el-dropdown style="float:right" trigger="click">
          <span class="el-dropdown-link">
            流程发起<i
					 class="el-icon-arrow-down el-icon--right"
					/>
          </span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item
						 v-for="(item, index) in dropdownList"
						 :key="index"
						 @click.native="openDianlog(item.ref)"
						>
							{{ item.name }}
						</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-col>

			<el-form
			 ref="elForm"
			 :model="search"
			 :rules="rules"
			 label-width="100px"
			 size="medium"
			>
				<el-col :span="6">
					<el-form-item label="流程名称" prop="field101">
						<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">
						<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">
						<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">
						<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="250px">
						<template scope="scope">
							<el-button
							 :disabled="scope.row.returnStatus==1"
							 v-if="activeName=='我的申请'&& (scope.row.flowStatusString=='已撤回'||scope.row.flowStatusString=='退回发起人')"
							 size="mini"
							 @click="applyAgain(scope.row,scope.row.flowType)"
							>
								<!--                -->
								重新发起
							</el-button>
							<el-button
							 v-if="activeName=='我的申请'&&scope.row.flowStatusString!='已撤回'&&scope.row.flowStatusString!='已结束'&&scope.row.flowStatusString!='退回发起人'"
							 size="mini"
							 @click="recallApply(scope.row,scope.row,scope.row.flowType)"
							>
								撤回
							</el-button>
							<el-button
							 v-if="activeName=='待办事项'||activeName=='委托待办事项'"
							 :disabled="scope.row.flowStatusString=='已撤回'"
							 size="mini"
							 type="primary"
							 @click="handleAudit(scope.row,scope.row.flowType)"
							>审核
							</el-button>
							<el-button
							 v-if="activeName=='待办事项'"
							 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()"/>
        <apply-lx-work-confirm ref="applyLxWorkConfirm" @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"/>
		<apply-lx-work-detail ref="applyLxWorkDetail"/>
		<apply-lx-work ref="applyLxWork" @getData="getData()"/>
		<apply-again-add-work ref="applyAgainAddWork" @getData="getData()"/>
        <apply-lx-sj-work ref="applyLxSjWork" @getData="getData()"/>
        <apply-again-li-sj-work ref="applyAgainLxSjWork" @getData="getData"/>
        <apply-again-lx-work ref="applyAgainLxWork" @getData="getData"/>
        <apply-lx-sj-work-detail ref="applyLxSjWorkDetail"/>
        <apply-lx-sj-work-confirm ref="applyLxSjWorkConfirm" @getData="getData()" />
	</div>
</template>
<script>
import applyHoliday from '@/views/workflow/components/myProcess/applyHoliday.vue'
import applyCost from '@/views/workflow/components/myProcess/applyCost.vue'
import applyAgainCost from '@/views/workflow/components/myProcess/applyAgainCost.vue'
import applyPay from '@/views/workflow/components/myProcess/applyPay.vue'
import changeClient from '@/views/workflow/components/myProcess/changeClient.vue'
import applyAgainPay from '@/views/workflow/components/myProcess/applyAgainPay.vue'
import applyAgainHoliday from '@/views/workflow/components/myProcess/applyAgainHoliday.vue'
import applyAddWork from '@/views/workflow/components/myProcess/applyAddWork.vue'
import applyAgainAddWork from '@/views/workflow/components/myProcess/applyAgainAddWork.vue'
import applyHolidayConfirm from '@/views/workflow/components/myProcess/applyHolidayConfirm.vue'
import applyCostConfirm from '@/views/workflow/components/myProcess/applyCostConfirm.vue'
import applyPayConfirm from '@/views/workflow/components/myProcess/applyPayConfirm.vue'
import applyAddWorkConfirm from '@/views/workflow/components/myProcess/applyAddWorkConfirm.vue'
import applyPayDetails from '@/views/workflow/components/myProcess/applyPayDetails.vue'
import applyAddWorkDetail from '@/views/workflow/components/myProcess/applyAddWorkDetail.vue'
import applyCostDetails from '@/views/workflow/components/myProcess/applyCostDetails.vue'
import holidayDetails from '@/views/workflow/components/myProcess/holidayDetails.vue'
import applyLxWork from '@/views/workflow/components/myProcess/applyLxWork.vue'
import applyLxWorkDetail from '@/views/workflow/components/myProcess/applyLxWorkDetail.vue'
import applyLxWorkConfirm from '@/views/workflow/components/myProcess/applyLxWorkConfirm.vue'
import applyLxSjWork from '@/views/workflow/components/myProcess/applyLxSjWork.vue'
import applyLxSjWorkDetail from '@/views/workflow/components/myProcess/applyLxSjWorkDetail.vue'
import applyLxSjWorkConfirm from '@/views/workflow/components/myProcess/applyLxSjWorkConfirm.vue'
import applyAgainLiSjWork from '@/views/workflow/components/myProcess/applyAgainLxSjWork.vue'
import applyAgainLxWork from '@/views/workflow/components/myProcess/applyAgainLxWork.vue'
export default {
	components: {
		applyAgainAddWork,
		applyAddWork,
        applyLxWork,
        applyLxSjWork,
		applyCostDetails,
		applyHoliday,
		applyCost,
		applyAgainCost,
		applyAgainPay,
		applyPay,
		applyPayConfirm,
		applyCostConfirm,
		applyHolidayConfirm,
		changeClient,
		applyPayDetails,
		holidayDetails,
        applyLxWorkConfirm,
        applyLxSjWorkDetail,
        applyLxSjWorkConfirm,
		applyAgainHoliday,
        applyAddWorkConfirm,
        applyAddWorkDetail,
        applyAgainLiSjWork,
        applyAgainLxWork,
        applyLxWorkDetail
	},
	data() {
		return {
			// 查询数据的内容
			search: {},
			dropdownList: [
				// { name: '请假申请单', ref: 'applyHoliday' },
				// { name: '费用报支申请', ref: 'applyCsot' },
				// { name: '付款申请单', ref: 'applyPay' },
				// { name: '加班申请单', ref: 'applyAddWork' },
				// { name: '立项申请灵锡', ref: 'applyLxWork' },
				// { name: '立项申请运营', ref: 'applyLxSjWork' }
				// {name: '付款审核', ref: 'applyPayConfirm'},
				// {name: '请假审核', ref: 'applyHolidayConfirm'}
			],
			activeName: '待办事项',
			// 通用字典项
			AUDIT_TYPE: [],
			dc_map: {},
			// 列表相关
			cusName: '',
			auditStatus: '',
			auditType: '',
			proName: '',
			applyBy: '',
			tableData: [],
			loading: false,
			UserData: [
				{ label: '审批中', value: '审批中' },
				{ label: '已通过', value: '已通过' },
				{ label: '已拒绝', value: '已拒绝' },
				{ label: '已退回', value: '已退回' }
			],
			UserMap: {},
			// 分页
			currentPage: 1,
			allpage: 0,
			pageSize: 12,
			// 弹框相关
			currAuditId: '',
			dialogVisible: false,
			dialogTitle: '新增',
			isAdd: true,
			detailList: [],
			rules: {}
		}
	},
	mounted() {
		const _this = this
        _this.dropdownList = []
        const groupId = _this.$common.currUser().groupId
        if('808'===groupId){
            _this.dropdownList.push({ name: '立项申请运营', ref: 'applyLxSjWork' })
        }else if('806'===groupId){
            _this.dropdownList.push( { name: '立项申请灵锡', ref: 'applyLxWork' })
        }
		_this.getData()
	},
	methods: {

		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
                case 'lx_work' :
                    this.$refs.applyLxWorkConfirm.setVisible(true, row)
					break
                case 'lx_sj_work' :
                    this.$refs.applyLxSjWorkConfirm.setVisible(true, row)
					break
			}
		},
		openDetailsDialog(type, row) {
			switch (type) {
				case 'use_money' :
					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
                case 'lx_work':
                    this.$refs.applyLxWorkDetail.setVisible(true, row)
                    break
                case 'lx_sj_work':
                    this.$refs.applyLxSjWorkDetail.setVisible(true, row)
                    break
			}
		},
		applyAgain(row, type) {
            debugger

			switch (type) {
				case 'use_money' :
					this.$refs.applyAgainCost.setVisible(true, row)
					break
				case 'paymen' :
					this.$refs.applyAgainPay.setVisible(true, row)
					break
				case 'off_work':
					this.$refs.applyAgainHoliday.setVisible(true, row)
					break
				case 'add_work':
					this.$refs.applyAgainAddWork.setVisible(true, row)
					break
                case 'lx_work':
					this.$refs.applyAgainLxWork.setVisible(true, row)
					break
                case 'lx_sj_work':
					this.$refs.applyAgainLxSjWork.setVisible(true, row)
					break
			}

		},
		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
				}
				console.log('row', row)
				if (row.flowType == 'off_work') {//请假申请的时候要单独调请假时期的接口
					_this.baseRequest2(
					 'ApplyOffWorkController',
					 '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)
					})
				} else {
					_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 = {
				applyUserName: _this.search.field103, // 申请人名称
				applyTheme: _this.search.field102, // 主题名称
				flowName: _this.search.field101, // 流程名称
				auditUser: this.$common.currUser()
				 ? this.$common.currUser().id
				 : '',
				pageNum: _this.currentPage,
				pageSize: _this.pageSize
			}
			let url = ''
			if (_this.activeName == '待办事项') {
				url = 'toDolisAndEntrusttByInfo'
			} else if (_this.activeName == '已办事项') {
				url = 'hasDolistByInfo'
			} else if (_this.activeName == '我的申请') {
				url = 'myApplylistByInfo'
			} else if (_this.activeName == '抄送事项') {
				url = 'cclistByInfo'
			} else if (_this.activeName == '委托待办事项') {
				url = 'entrustToDolistByInfo'
			} else if (_this.activeName == '我的委托') {
				url = 'myEntrustlistByInfo'
			}
			_this.baseRequest1(url, 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>