jcxt_qd/src/components/admin/recheckMonitor.vue

<template>
	<div style="width: 100%">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
		<el-breadcrumb separator-class="el-icon-arrow-right">
			
		  <el-breadcrumb-item >首页</el-breadcrumb-item>
		  <el-breadcrumb-item>监测任务</el-breadcrumb-item>
		  <el-breadcrumb-item>例行监测</el-breadcrumb-item>
		  <el-breadcrumb-item>任务列表</el-breadcrumb-item>
		</el-breadcrumb>
		</div>
		
		<!-- 头部搜索栏 -->
		<el-row :gutter="50" style="margin-right: 0px;">
			<el-form style="display: flex; flex-direction: row;">
				<el-form-item label="年度" class="select">
					<el-date-picker v-model="queryInfo.year" style="width: 110px;" value-format="yyyy" type="year"
						clearable />
				</el-form-item>
				<el-form-item label="任务状态" class="select">
					<el-select v-model="queryInfo.ispublic" style="width: 110px;" clearable>
						<el-option v-for="item in taskispublic" :key="item.value" :label="item.label"
							:value="item.value" >
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="任务时间" class="select">
					<el-date-picker v-model="queryInfo.starttime" style="width: 180px;" align="right" type="date"
						:picker-options="pickerOptions" clearable value-format="yyyy-MM-dd" />
				</el-form-item>
				<el-form-item label="--" class="select" style="margin-left: 10px;">
					<el-date-picker v-model="queryInfo.endtime" style="width: 180px;" align="right" type="date"
						:picker-options="pickerOptions"  clearable />
				</el-form-item>
				<el-form-item label="任务名称" class="select">
					<el-input v-model="queryInfo.task_name"></el-input>
				</el-form-item>
				<!-- 查询 -->
				<el-button style="height: 40px;margin-left: 10px;" type="success" @click="searchData()">查询</el-button>
				<!-- 重置 -->
				<el-button style="height: 40px;margin-left: 5px;" type="success" @click="reset()">重置</el-button>
			</el-form>
		</el-row>
		<!--  头部钮区域-->
		<el-row :gutter="90" style="margin-right: 0px;">
			<div style="display: flex;flex-direction: row;float: right;">
				<el-button type="primary" size="small" plain icon="el-icon-plus" @click="add()">新增</el-button>
				<el-button type="primary" size="small" plain icon="el-icon-edit-outline" @click="ispublic()">发布
				</el-button>
				<el-button type="primary" size="small" plain icon="el-icon-scissors" @click="repeal()">废止</el-button>
				<el-button type="primary" size="small" plain icon="el-icon-delete" @click="delArray()">删除</el-button>
				<el-button type="primary" size="small" plain icon="el-icon-download">导出</el-button>
			</div>
		</el-row>
		<!--  表格数据区域-->
		<el-table ref="multipleTable" :data="tableData" border stripe highlight-current-row style="width: 100%"
			:row-style="rowStyle" :cell-style="cellStyle" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="50"></el-table-column>
			<el-table-column label="序号" width="50px">
				<template slot-scope="scope">
					{{ scope.$index+1 }}
				</template>
			</el-table-column>
			<!-- <el-table-column :key="" v-for="table in tableHeader" :label="table.label" :prop="table.prop" align="center"
				:width="table.width" :fixed="table.fixed" /> -->
			<el-table-column label="操作" align="center" fixed="right">
				<!-- 操作按钮区域的作用域插槽 -->
				<template slot-scope="scope">
					<el-col style="margin-bottom: 5px;">
						<el-button type="success" size="mini" @click="readDialogVisible1(scope.row)">详情</el-button>
						<el-button type="success" size="mini" plain>牵头单位报告</el-button>
					</el-col>
					<el-col>
						<el-button type="success" size="mini" plain @click="TaskSample()">抽样单</el-button>
						<el-button type="success" size="mini" plain>承担单位报告</el-button>
					</el-col>
				</template>
			</el-table-column>
		</el-table>
		
		<!--    分页器区域-->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryInfo.pageNum" :page-sizes="[10, 15, 20]" :page-size="queryInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="total" background />
			</el-card>
		<!-- 任务详情对话框-->
		<el-dialog title="查看" :visible.sync="readDialogVisible" width="30%" :close-on-click-modal="false"
			class="dialogItem">
			<el-form v-if="readDialogVisible" :model="taskSampleForm" label-width="100px">
				<el-form-item label="任务名称:" prop="task_name" class="labelItem">
					<div>{{readForm.task_name}}</div>
				</el-form-item>
				<el-form-item label="任务优先级:" prop="level" class="labelItem">
					<div v-if="readForm.level=='0'">一般</div>
					<div v-if="readForm.level=='1'">紧急</div>
					<div v-if="readForm.level=='2'">特急</div>
				</el-form-item>
				<el-form-item label="监测类型:" prop="task_class" width="70px" class="labelItem">
					<div>{{readForm.task_class}}</div>
				</el-form-item>
				<el-form-item label="年度:" prop="year" class="labelItem">
					<div>{{readForm.year}}</div>
				</el-form-item>

				<el-form-item label="批次:" prop="batch" width="200px" class="labelItem">
					<div>{{readForm.batch}}</div>
				</el-form-item>
				<el-form-item label="任务时间:" prop="starttime" width="200px" class="labelItem">
					<div>{{readForm.starttime}} 至 {{readForm.endtime}}</div>
				</el-form-item>
				<el-form-item label="发布单位:" prop="releaser" class="labelItem">
					<div>{{readForm.releaser}}</div>
				</el-form-item>
				<el-form-item label="牵头单位:" prop="main_unit" class="labelItem">
					<div>{{readForm.main_unit}}</div>
				</el-form-item>
				<el-form-item label="附件:" prop="file_url" class="labelItem">
					<div>{{readForm.file_url}}</div>
				</el-form-item>
				<el-form-item label="文件号:" prop="filenum" width="200px" class="labelItem">
					<div v-if="readForm.filenum==null">无</div>
					<div v-else>{{readForm.filenum}}</div>
				</el-form-item>
				<el-form-item label="备注:" prop="log" class="labelItem">
					<div v-if="readForm.log==null">无</div>
					<div v-else>{{readForm.log}}</div>
				</el-form-item>
				<div class="footer">
					<el-button type="success" @click="readDialogVisible = false">返回</el-button>
				</div>
			</el-form>

		</el-dialog>
	</div>

</template>

<script>
	const token = window.sessionStorage.getItem('token')
	const rybh = window.sessionStorage.getItem('rybh')
	export default {
		name: 'recheckMonitor',
		data() {
			return {
				queryInfo:{
					year:'',
					task_name:'',
					starttime:'',
					endtime:'',
					ispublic:'',
					pageSize:10,
					pageNum:1
				},
				total:0,
				cellStyle: {
					padding: 2 + 'px'
				},
				rowStyle: {
					height: 35 + 'px'
				},
				tableHeader: [{
						label: '任务名称',
						prop: 'task_name',
						width: 150
						// fixed: 'left'
					},
					{
						label: '年度',
						prop: 'year',
						width: 80
						// fixed: 'left'
					}, {
						label: '文件号',
						prop: 'filenum',
						width: 150
						// fixed: 'left'
					},
					{
						label: '开始时间',
						prop: 'starttime',
						width: 120
					},
					{
						label: '结束时间',
						prop: 'endtime',
						width: 120
					},
					{
						label: '创建者',
						prop: 'releaser',
						width: 120
					},
					{
						label: '创建时间',
						prop: 'createtime',
						width: 180
					}, {
						label: '任务状态',
						prop: 'ispublic',
						width: 120
					},
					{
						label: '任务优先级',
						prop: 'level',
						width: 120
					},
				],
				// 数据表格数据
				tableData: [],
				// 批量删除选中数据
				multipleSelection: [],
				// 任务状态选项
				taskispublic: [{
					value: '',
					label: '全部'
				}, {
					value: '0',
					label: '未发布'
				}, {
					value: '1',
					label: '已发布'
				}, {
					value: '2',
					label: '废止'
				}, {
					value: '5',
					label: '执行中'
				}, {
					value: '3',
					label: '已结束，未完成'
				}, {
					value: '4',
					label: '已结束，已完成'
				}],
				// 日期选择器快捷选项
				pickerOptions: {
					// disabledDate(time) {
					// 	return time.getTime() > Date.now();
					// },
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				},
				// 查看任务详情
				readDialogVisible: false,
				readForm: {},
				multipleSelection: [],
				delarr: [],
				pubarr: []
			}
		},
		created() {
			this.gettaskList()
		},
		methods: {
			add() {
				this.$router.push('addTask')
			},
			// 搜索
			async searchData() {
				this.queryInfo.pageNum = 1
				this.gettaskList()
			},
			// 重置
			reset(){
				this.queryInfo={
					year:'',
					task_name:'',
					starttime:'',
					endtime:'',
					ispublic:'',
					pageSize:10,
					pageNum:1
				}
			},
			/** 监听页码的改变 */
			handleCurrentChange(newPage) {
				this.queryInfo.pageNum = newPage
				this.gettaskList()
			},
			/** 监听每页显示多少数据的改变 */
			handleSizeChange(newSize) {
				this.queryInfo.pageSize = newSize
				this.gettaskList()
			},
			
			/** 监听页码的改变 */
			handleCurrentChange(newPage) {
				this.queryInfo.pageNum = newPage
				this.gettaskList()
			},
			// 获取任务列表
			async gettaskList() {
				for (var key in this.queryInfo) {
					if (this.queryInfo[key] == '') {
						delete this.queryInfo[key]
					}
				}
				const {
					data: res
				} = await this.$http.post(
					"getTaskList", this.queryInfo
				);

				for (let i = 0; i < res.data.rows.length; i++) {
					if (res.data.rows[i].ispublic == '0') {
						res.data.rows[i].ispublic = '未发布'
					} else if (res.data.rows[i].ispublic == '1') {
						res.data.rows[i].ispublic = '已发布'
					} else if (res.data.rows[i].ispublic == '2') {
						res.data.rows[i].ispublic = '废止'
					} else if (res.data.rows[i].ispublic == '3') {
						res.data.rows[i].ispublic = '已结束未完成'
					}  else if (res.data.rows[i].ispublic == '5') {
						res.data.rows[i].ispublic = '执行中'
					} 
					else {
						res.data.rows[i].ispublic = '已结束已完成'
					}
					if (res.data.rows[i].level == '0') {
						res.data.rows[i].level = '一般'
					} else if (res.data.rows[i].level == '1') {
						res.data.rows[i].level = '紧急'
					} else if (res.data.rows[i].level == '2') {
						res.data.rows[i].level = '特急'
					}
				}
				this.tableData = res.data.rows
				this.total = res.data.total
			},
			// 查看任务详情
			async readDialogVisible1(row) {
				this.readForm.batch = row.batch
				this.readForm.task_name = row.task_name
				this.readForm.task_class = row.task_class
				this.readForm.level = row.level
				this.readForm.year = row.year
				this.readForm.starttime = row.starttime
				this.readForm.endtime = row.endtime
				this.readForm.releaser = row.releaser
				this.readForm.main_unit = row.main_unit
				this.readForm.file_url = row.file_url
				this.readForm.filenum = row.filenum
				this.readForm.log = row.log
				this.readDialogVisible = true

			},
			// 批量删除学生
			handleSelectionChange(val) {
				this.multipleSelection = val;
				// console.log(this.multipleSelection)
			},
			// 删除任务
			async delArray() {
				// 判断任务是否为该创建者创建
				for (let i = 0; i < this.multipleSelection.length; i++) {
					if (rybh != this.multipleSelection[i].releaser) {
						this.$alert('任务仅创建者可以删除！', {
							confirmButtonText: '确定',
							callback: action => {

							}
						});
					}
				}
				var that = this;
				const length = this.multipleSelection.length;
				// var val = this.selectedData;
				for (let i = 0; i < length; i++) {
					// console.log(this.multipleSelection[i])
					this.delarr.push(this.multipleSelection[i].id);
				}
				const result = await this.$http.post('delTask', {
					delarr: that.delarr,
					token: token
				})
				if (result.data.code == 0) {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					that.gettaskList()
				} else {
					this.$message({
						type: 'error',
						message: '删除失败!'
					});
				}

				this.$refs.multipleTable.clearSelection();
			},
			// 发布任务
			async ispublic() {
				// 判断任务是否为该创建者创建
				for (let i = 0; i < this.multipleSelection.length; i++) {
					if (rybh != this.multipleSelection[i].releaser) {
						this.$alert('任务仅创建者可以发布！', {
							confirmButtonText: '确定',
							callback: action => {

							}
						});
					}
				}
				var that = this;
				let canPub = 0
				const length = this.multipleSelection.length;
				// var val = this.selectedData;
				console.log(this.multipleSelection)
				// this.pubarr = this.multipleSelection;
				for (let i = 0; i < length; i++) {
					if (this.multipleSelection[i].ispublic != '未发布') {
						this.$alert('任务不在可发布状态！', {
							confirmButtonText: '确定',
							callback: action => {

							}
						});
					} else {
						this.multipleSelection[i].ispublic = 1
						canPub = 1
					}
				}
				if(canPub==1){
					const result = await this.$http.post('isPublicTask', {
						pubarr: that.multipleSelection,
						token: token
					})
					if (result.data.code == 0) {
						this.$message({
							type: 'success',
							message: '发布成功!'
						});
						that.gettaskList()
					}				
				}
			},
			// 废止任务
			async repeal() {
				// 判断任务是否为该创建者创建
				for (let i = 0; i < this.multipleSelection.length; i++) {
					if (rybh != this.multipleSelection[i].releaser) {
						this.$alert('任务仅创建者可以废止！', {
							confirmButtonText: '确定',
							callback: action => {}
						});
					}
				}
				var that = this;
				let canPub = 0
				const length = this.multipleSelection.length;
				// var val = this.selectedData;
				this.pubarr = this.multipleSelection;
				for (let i = 0; i < length; i++) {
					if (this.pubarr[i].ispublic == '已发布') {
						this.pubarr[i].ispublic = 2
						canPub = 1
					} else {
						this.$alert('任务不在可废止状态！', {
							confirmButtonText: '确定',
							callback: action => {

							}
						});
					}
					if(canPub==1){
						const result = await this.$http.post('isPublicTask', {
							pubarr: that.pubarr,
							token: token
						})
						if (result.data.code == 0) {
							this.$message({
								type: 'success',
								message: '任务已废止!'
							});
							that.gettaskList()
						}
					}
					
				}

			}


		},
	}
</script>

<style lang="less" scoped>
	.el-table {
		align-items: center;
		margin-top: 25px;
	}

	/deep/ .el-col {
		padding-right: 0 !important;
	}

	/deep/ .el-radio-group label {
		width: 180px;
		margin-right: 10px;
	}

	.el-pagination {
		margin-top: 25px;
	}

	// .el-cascader {
	// 	width: 290px;
	// }

	.el-select {
		width: 210px;
		height: 100%;
	}

	.select {
		display: flex;
		flex-direction: row;
		margin-left: 10px;
	}

	.dialogItem /deep/ .el-dialog__body {
		padding: 15px 12px 0;
		color: #606266;
		font-size: 14px;
		word-break: break-all;
	}

	.el-form-item {
		margin-bottom: 8px;
	}

	.labelItem /deep/ .el-form-item__label {
		// width: 80px;
		text-align: center;
		vertical-align: middle;
		float: left;
		font-size: 13px;
		color: #606266;
		// line-height: 40px;
		padding: 0 2px 0 0;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.el-dialog__header {
		border-bottom: 1px solid #e5e5e5;
	}

	// .el-form-item__content{
	// 	margin-left: 0;
	// }
	.footer {
		padding: 5px 0;
		border-top: 1px solid #e5e5e5;
		text-align: center;
	}
</style>