jcxt_qd/src/components/admin/routineMonitor.vue

<template>
	<div style="width: 100%">
	<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>
		
		<!-- 头部查询栏 -->
		<div class="headSearch">
			<el-row :gutter="50" style="margin-right: 0px;">
				<el-form :inline="true">
				<!-- <el-form style="display: flex; flex-direction: row;" > -->
				<el-form-item label="年度" class="select" size="mini">
					<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" size="mini">
					<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" size="mini">
					<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;" size="mini">
					<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" size="mini">
					<el-input v-model="queryInfo.task_name"></el-input>
				</el-form-item>

				<!-- 查询 -->
				<el-button  size="mini" style="height: 40px;margin-left: 10px;" type="success" @click="searchData()">查询</el-button>
				<!-- 重置 -->
				<el-button  size="mini" style="height: 40px;margin-left: 5px;" type="success" @click="reset()">重置</el-button>
				</el-form>
			</el-row>
		</div>
		
		<!--头部右侧按钮区域-->
		<div class="rightButton">
			<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>
		</div>
		
		<!--  表格数据区域-->
		<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="table.label" v-for="table in tableHeader" :label="table.label" :prop="table.prop" align="center"
				:width="table.width" :fixed="table.fixed" />
				<el-table-column prop="status" label="任务状态" width="130" align="center" >
					<template slot-scope="scope">
						<el-tag v-if="scope.row.ispublic==0">未发布</el-tag>
						<el-tag type="warning" v-if="scope.row.ispublic==1">已发布</el-tag>
						<el-tag type="danger" v-if="scope.row.ispublic==2">已废止</el-tag>
						<el-tag type="info" v-if="scope.row.ispublic==3">已结束,未完成</el-tag>
						<el-tag type="success" v-if="scope.row.ispublic==4">已结束,已完成</el-tag>
						<el-tag type="success"  effect="plain" v-if="scope.row.ispublic==5">执行中</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="level" label="任务优先级" width="85">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.level==0">一般</el-tag>
						<el-tag type="warning" v-if="scope.row.level==1">紧急</el-tag>
						<el-tag type="danger" v-if="scope.row.level==2">特急</el-tag>
					</template>
				</el-table-column>
			<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 @click="takeTheLeadReport()">牵头单位报告</el-button>
					</el-col>
					<el-col style="margin-bottom: 5px;">
						<el-button type="success" size="mini" plain @click="undertakeReport()">承担单位报告</el-button>
						<el-button type="success" size="mini" plain @click="taskSample()">抽样单</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-dialog title="查看" :visible.sync="readDialogVisible" width="30%" :close-on-click-modal="false"
			class="dialogItem">
			<el-form v-if="readDialogVisible" :model="readForm" 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-else-if="readForm.level=='1'">紧急</div>
					<div v-else>特急</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-link :href="readForm.file_url" type="primary">{{readForm.file_name}}</el-link>
				</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')
	const rymc = window.sessionStorage.getItem('rymc')
	export default {
		name: '',
		data() {
			return {
				queryInfo:{
					year:'',
					task_name:'',
					starttime:'',
					endtime:'',
					ispublic:'',
					pageSize:10,
					pageNum:1,
					task_class:'例行监测'
				},
				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
					}
				],
				// 数据表格数据
				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')
			},
			ttaskSample() {
				this.$router.push('taskSample')
			},
			takeTheLeadReport() {
				this.$router.push('takeTheLeadReporList')
			},
			undertakeReport(){
				this.$router.push('undertakeReport')
			},
			taskSample(){
				this.$router.push('taskSample')
			},
			// 搜索
			async searchData() {
				this.queryInfo.pageNum = 1
				this.gettaskList()
			},
			// 重置
			reset(){
				this.queryInfo={
					year:'',
					task_name:'',
					starttime:'',
					endtime:'',
					ispublic:'',
					pageSize:10,
					pageNum:1,
					task_class:'例行监测'
				}
				this.gettaskList()
			},
			/** 监听页码的改变 */
			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
				);
				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
				console.log(this.readForm.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.file_name = row.file_name
				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
				})
				console.log(that.delarr);
				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 != '0') {
						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-breadcrumb {
		margin-bottom: 20px;
	}
	.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;
	}
	.rightButton{
		margin-top: 20px;
	}
	.headSearch{
		margin-left: 25px;
	}
</style>