jcxt_qd/src/components/jc/setTask.vue

<template>
	<div>

		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item>首页</el-breadcrumb-item>
			<el-breadcrumb-item>牵头单位</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/jc/routineMonitorqt' }">任务列表</el-breadcrumb-item>
			<el-breadcrumb-item>基本信息</el-breadcrumb-item>
		</el-breadcrumb>

		<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
			<el-tab-pane label="基本信息" name="first">
				<el-form :model="readForm" label-position="right" label-width="auto" style="margin-left: 35%;">
					<el-form-item label="发布单位:" prop="releaser" class="labelItem" required>
						<div>{{readForm.releaser}}</div>
					</el-form-item>
					<el-form-item label="任务名称:" prop="task_name" class="labelItem" required>
						<div>{{readForm.task_name}}</div>
					</el-form-item>
					<el-form-item label="任务优先级:" prop="level" class="labelItem" required>
						<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" required>
						<div>{{readForm.task_class}}</div>
					</el-form-item>
					<el-form-item label="检测模型:" prop="bindForm.test_model_id" width="70px" class="labelItem" required>
						<el-select v-model="bindForm.test_model_id" size="mini" placeholder="请选择">
							<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="抽检分离:" prop="bindForm.is_divide" width="70px" class="labelItem">
						<el-select v-model="bindForm.is_divide" size="mini">
							<el-option v-for="item in divideOptions" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="年度:" prop="year" class="labelItem" required>
						<div>{{readForm.year}}</div>
					</el-form-item>
				<!-- 	<el-form-item label="发布机构所属区域:" prop="year" class="labelItem" required>
						<div>{{readForm.year}}</div>
					</el-form-item> -->
				<el-form-item label="机构级别:" prop="releaserInfo.groupname" class="labelItem" required>
					<div>{{readForm.releaserInfo.groupname}}</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" required>
						<div>{{readForm.starttime}} 至 {{readForm.endtime}}</div>
					</el-form-item>
					<el-form-item label="抽样信息上报截止时间:" size="mini" class="labelItem" required>
						<el-date-picker v-model="bindForm.endtime_cydsb" type="date" value-format="yyyy-MM-dd">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="附件:" prop="file_url" class="labelItem">
						<div v-if="readForm.file_url==null">无</div>
						<el-link v-else type="primary" :href="readForm.file_url">{{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>

				</el-form>
				<div class="footer">
					<el-button type="success" size="mini" @click="bindModel">保存</el-button>
					<el-button type="success" size="mini" @click="next">下一步</el-button>
				</div>
				
			</el-tab-pane>

			<el-tab-pane label="机构与地域" name="second">
				<!-- 头部搜索栏 -->
				<el-form ref="form" :model="form" style="display: flex; flex-direction: column; margin-left: 5px; width: 100%; label-width: auto;">
					<el-row style="width: 75%;">
						<el-col :span="6">
							<el-form-item prop="bear_unit" label="抽样机构" class="select" size="mini">
								<el-input v-model="form.bear_unit" @focus="getTestListShow = true"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item prop="check_unit" label="检测机构" class="select" size="mini">
								<el-input v-model="form.check_unit" @focus="getTestListShow2 = true"></el-input>
						</el-form-item>
						</el-col>
						<el-col :span="5">
							<el-form-item prop="sample_number" label="抽样数量" class="select" size="mini">
								<el-input v-model="form.sample_number" style="width: 110px;"></el-input>
						</el-form-item>
						</el-col>
						<el-col :span="7">
							<el-form-item prop="report_unit" label="报告上传单位" class="select" size="mini">
								<el-input v-model="form.report_unit" @focus="getTestListShow1 = true"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row style="width: 100%; margin-top: 10px;">
					<el-col :span="5">
						<el-form-item prop="address" label="抽样地区" class="select" size="mini">
							<el-cascader  :options="region" v-model="selectedOptions"
								@change="handleChange">
							</el-cascader>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item prop="uploadtime" label="报告上传时间:" class="select" size="mini">
							<el-date-picker v-model="form.uploadtime" type="date" value-format="yyyy-MM-dd">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="12" >
						<el-button type="primary" size="mini" plain @click="save('form')">保存
						</el-button>
						<el-button type="primary" size="small" plain icon="el-icon-edit-outline" @click="resetForm('form')">
								重置
							</el-button>
						<el-button type="primary" size="mini" plain @click="back()">上一步</el-button>
						<el-button type="primary" size="mini" plain @click="nexto()">下一步</el-button>
					</el-col>
				</el-row>
				</el-form>

				<!--  表格数据区域-->

				<el-row :gutter="90" style="margin-right: 0px;">
				<div style="display: flex;flex-direction: row;float: right;">
					<el-button type="primary" size="small" plain @click="sampleDetail()">删除</el-button>
				</div>
				</el-row>
				<el-table ref="multipleTable" :data="underTask" border stripe highlight-current-row
					@selection-change="handleSelectionChange" style="width: 100%" :row-style="rowStyle"
					:cell-style="cellStyle">
					<el-table-column type="selection" width="50" align="center"></el-table-column>
					<el-table-column label="序号" width="50px" align="center">
						<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>
				<!--    分页器区域-->
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="queryInfo.pageNum" :page-sizes="[1,10, 15, 20]" :page-size="queryInfo.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="underTasktotal" background />
			</el-tab-pane> 


			<el-tab-pane label="总览" name="third">
				<taskdetail :task_id="task_id"></taskdetail>
				<div class="footer">
					<el-button type="success" size="mini" @click="release()">发布</el-button>
					<el-button type="success" size="mini" @click="exportOverview()">导出总览</el-button>
					<el-button type="success" size="mini" @click="next">返回</el-button>
				</div>
			</el-tab-pane>
			
				<el-dialog title="生成监测报告" :visible.sync="dialogVisible2" width="50%">
					<taskdetail :task_id="task_id"></taskdetail>
					<div class="footer">
					<el-button @click="dialogVisible2 = false">取 消</el-button>
					<el-button type="success" size="mini" @click="exportOverviewpdf">导出总览pdf</el-button>
				</div>
				</el-dialog>




		</el-tabs>
		<!-- 选择抽样机构对话框 -->
		<el-dialog title="抽样机构选择" :visible.sync="getTestListShow" width="50%" :close-on-click-modal="false"
			@open="getTestList()" class="dialogItem">
			<el-form v-if="getTestListShow">
				<!--  表格数据区域-->
				<el-table ref="singleTable" :data="testList" row-key="id" @current-change="choseChange" border stripe
					highlight-current-row style="width: 100%">
					<el-table-column label="序号" width="50px" align="center">
						<template slot-scope="scope">
							{{ scope.$index+1 }}
						</template>
					</el-table-column>
					<el-table-column :key="table.prop" v-for="table in tableHeaders" :label="table.label"
						:prop="table.prop" align="center" :width="table.width" :fixed="table.fixed" />
				</el-table>
				<div>
					<!--    分页器区域-->
					<el-pagination @size-change="handleSizeChanges" @current-change="handleCurrentChanges"
						:current-page="queryInfos.pageNum" :page-sizes="[1,10, 15, 20]" :page-size="queryInfos.pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="totals" background />
					<el-button type="success" style="display: block; margin: 10px auto;" size="mini" @click="choseTest()">提交</el-button>
				</div>
			</el-form>
		</el-dialog>
		<!-- 选择报告上传单位对话框 -->
		<el-dialog title="机构选择" :visible.sync="getTestListShow1" width="50%" :close-on-click-modal="false"
			@open="getTestList()" class="dialogItem">
			<el-form v-if="getTestListShow1">
				<!--  表格数据区域-->
				<el-table ref="singleTable" :data="testList" row-key="id" @current-change="choseChange1" border stripe
					highlight-current-row style="width: 100%">
					<el-table-column label="序号" width="50px" align="center">
						<template slot-scope="scope">
							{{ scope.$index+1 }}
						</template>
					</el-table-column>
					<el-table-column :key="table.prop" v-for="table in tableHeaders" :label="table.label"
						:prop="table.prop" align="center" :width="table.width" :fixed="table.fixed" />
				</el-table>
				<div>
					<!--    分页器区域--> 
					<el-pagination @size-change="handleSizeChanges" @current-change="handleCurrentChanges"
						:current-page="queryInfos.pageNum" :page-sizes="[1,10, 15, 20]" :page-size="queryInfos.pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="totals" background />
					<el-button style="display: block; margin: 10px auto;" type="success" size="mini" @click="choseReportUnit()">提交</el-button>
				</div>
			</el-form>
		</el-dialog>
		<!-- 选择检测单位对话框 -->
		<el-dialog title="机构选择" :visible.sync="getTestListShow2" width="50%" :close-on-click-modal="false"
			@open="getTestList()" class="dialogItem">
			<el-form v-if="getTestListShow2">
				<!--  表格数据区域-->
				<el-table ref="singleTable" :data="testList" row-key="id" @current-change="choseChange2" border stripe
					highlight-current-row style="width: 100%">
					<el-table-column label="序号" width="50px" align="center">
						<template slot-scope="scope">
							{{ scope.$index+1 }}
						</template>
					</el-table-column>
					<el-table-column :key="table.prop" v-for="table in tableHeaders" :label="table.label"
						:prop="table.prop" align="center" :width="table.width" :fixed="table.fixed" />
				</el-table>
				<div>
					<!--    分页器区域-->
					<el-pagination @size-change="handleSizeChanges" @current-change="handleCurrentChanges"
						:current-page="queryInfos.pageNum" :page-sizes="[1,10, 15, 20]" :page-size="queryInfos.pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="totals" background />
					<el-button style="display: block; margin: 10px auto;" type="success" size="mini" @click="choseCheckUnit()">提交</el-button>
				</div>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import htmlToPdf from '../../assets/js/htmlToPdf.js'
	const token = window.sessionStorage.getItem('token')
	const rybh = window.sessionStorage.getItem('rybh')
	import {
		provinceAndCityData,
		regionData,
		provinceAndCityDataPlus,
		regionDataPlus,
		CodeToText,
		TextToCode
	} from 'element-china-area-data'
	import taskdetail from './taskdetail'
	export default {
		name: 'setTask',
		data() {
			return {
				size: 'medium',
				dialogVisible2: false,
				activeName: 'first',
				id: 0,
				readForm: {
					releaser: '',
					task_name: '',
					level: '',
					task_class: '',
					year: '',
					releaserInfo:{
						groupname: ''
					},						
					endtime: '',
					file_url: '',
					filenum: '',
					log: ''
				},
				queryInfo: {
					pageNum: 1,
					pageSize: 10,
				},
				queryInfos: {
					pageNum: 1,
					pageSize: 10
				},
				cellStyle: {
					padding: 2 + 'px'
				},
				rowStyle: {
					height: 35 + 'px'
				},
				tableHeader: [{
						label: '抽样机构',
						prop: 'bear_name',
						width: 180,
					}, {
						label: '检测机构',
						prop: 'check_name'
					},
					{
						label: '抽样地区',
						prop: 'address'
					}, {
						label: '抽样数量',
						prop: 'sample_number'
					},
					{
						label: '报告上传单位',
						prop: 'report_name'
					}, {
						label: '报告上传截止时间',
						prop: 'uploadtime'
					}
				],
				checkHeader2: [{
					label: '检测项目',
					prop: 'test_name',
					// fixed: 'left'
				}],
				// 数据表格数据
				tableData: [],
				total: 0,
				task_id: '',
				multipleSelection: null,
				delarr: [],
				// 模型列表
				options: [{
					id: '',
					name: '' 
				}],
				bindForm: {
					test_model_id: '',
					endtime_cydsb: '',
					is_divide: ''
				},
				// 弹出检测机构弹窗
				getTestListShow: false,
				getTestListShow1: false,
				getTestListShow2: false,
				tableHeaders: [{
						label: '单位名称',
						prop: 'name',
						width: 300
						// fixed: 'left'
					},
					{
						label: '机构类型',
						prop: 'groupname',
						// width: 40
						// fixed: 'left'
					}, {
						label: '所属区域',
						prop: 'dtRelyOnUnit',
						width: 300
						// fixed: 'left'
					}
				],
				testList: [],
				totals: 0,

				form: {
					bear_unit: '',
					report_unit: '',
					check_unit: '',
					sample_number: '',
					address: '',
					uploadtime: ''
				},
				currentRow: null,
				currentRow1: null,
				currentRow2: null,
				// 抽样地区
				region: regionData,
				selectedOptions: [],
				// 机构地域表格数据
				underTask: [],
				underTasktotal: 0,
				// 抽检分离选项
				divideOptions: [{
						id: 0,
						name: '否'
					},
					{
						id: 1,
						name: '是'
					}
				]
			};
		},
		components: {
			taskdetail
		},
		mounted() {
			this.task_id = this.$route.params.id
			console.log(this.$route.params.id)
			this.getTaskDetail()
			this.getmodelList()
			this.getUnderTask()
		},
		created() {
			this.task_id = this.$route.params.id
			console.log(this.$route.params.id)
			this.getTaskDetail()
			this.getmodelList()
			this.getUnderTask()
		},

		methods: {
			// 跳转到检测
			nexto() {
				this.activeName = 'third'
			},
			// 跳转到基本信息
			back() {
				this.activeName = 'first'
			},
			// 机构与地域---保存
			async save(formName) {
				this.form['task_id'] = this.task_id
				console.log(this.form)
				const {
					data: res
				} = await this.$http.post("AddUnderTask", this.form);
				if (res.code == 0) {
					this.$message({
						type: 'success',
						message: '保存成功!'
					});
					this.resetForm(formName)
					this.getUnderTask()
				}
			},
			//重置
			async resetForm(formName) {
				this.$refs[formName].resetFields();
				this.selectedOptions = '';
			},
			// 机构与地域---删除
			async sampleDetail(id) {
				console.log(id)
				// 判断任务是否为该创建者创建
				// 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('delUnderTask', {
					delarr: that.delarr,
					token: token
				})
				if (result.data.code == 0) {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					that.getUnderTask()
				} else {
					this.$message({
						type: 'error',
						message: '删除失败!'
					});
				}

				this.$refs.multipleTable.clearSelection();
			},
			// 获取机构地域表格
			async getUnderTask() {
				this.queryInfo['task_id'] = this.task_id
				const result = await this.$http.post('getUnderTask', this.queryInfo)
				// 判断业务逻辑
				if (result.data.code == 0) {
					this.underTask = result.data.data.rows
					this.underTasktotal = result.data.data.total
				}
			},
			// 提交选中报告上传单位
			choseReportUnit() {
				let that = this
				that.form.report_unit = that.currentRow1.name
				that.form.report_id = that.currentRow1.id
				that.getTestListShow1 = false
			},
			// 提交选中检测单位
			choseCheckUnit() {
				let that = this
				that.form.check_unit = that.currentRow2.name
				that.form.check_id = that.currentRow2.id
				that.getTestListShow2 = false
			},
			// 提交选中抽样机构
			choseTest() {
				let that = this
				that.form.bear_unit = that.currentRow.name
				that.form.bear_id = that.currentRow.id
				that.getTestListShow = false
			},
			// 获取选择抽样地区
			handleChange() {
				var that = this
				var loc = "";
				// console.log(this.form.place)
				for (let i = 0; i < this.selectedOptions.length; i++) {
					loc += CodeToText[this.selectedOptions[i]];
				}
				// console.log(loc)
				that.form.address = loc
			},
			/** 监听每页显示多少数据的改变 */
			handleSizeChanges(newSize) {
				this.queryInfos.pageSize = newSize
				this.getTestList()
			},

			/** 监听页码的改变 */
			handleCurrentChanges(newPage) {
				this.queryInfos.pageNum = newPage
				this.getTestList()
			},
			// 获取检测机构列表
			async getTestList() {
				const result = await this.$http.post('getTestList', this.queryInfos)
				// 判断业务逻辑
				if (result.data.code == 0) {
					this.testList = result.data.data.rows
					this.totals = result.data.data.total
				}
			},
			choseChange(val) {
				this.currentRow = val;
			},
			choseChange1(val) {
				this.currentRow1 = val;
			},
			choseChange2(val) {
				this.currentRow2 = val;
			},

			// 跳转到机构与地域
			next() {
				this.activeName = 'second'
			},
			// 获取模型列表
			async getmodelList() {
				const {
					data: res
				} = await this.$http.post(
					"getModelList", {
						'pageNum': 1,
						'pageSize': 100,
						type_id: ""
					}
				);
				this.options = res.data.rows
				console.log(this.options)
			},
			// 绑定模型
			async bindModel() {
				var that = this
				that.bindForm['id'] = that.task_id
				console.log(that.bindForm)
				const {
					data: res
				} = await this.$http.post(
					"bindModel", this.bindForm
				);
				if (res.code == 0) {
					this.$message({
						type: 'success',
						message: '绑定模型成功!'
					});
					console.log(this.res)
					that.getTaskDetail()
				}
			},

			//发布
			async release() {
				var that = this
				const {
					data: res
				} = await this.$http.post("qtRelease", {
					task_id: that.task_id
				});
				this.$router.push({
					path: '/jc/routineMonitorqt',
				})
			},
			// 导出总览
				exportOverview() {
				var that = this
				that.dialogVisible2 = true
			},
			// 导出总览pdf
			exportOverviewpdf() {
				htmlToPdf.downloadPDF(document.querySelector('#pdf1'), '监测任务总览')
			},
			handleClick(tab, event) {
				console.log(tab, event);
			},
			// 获取任务详情
			async getTaskDetail() {
				var that = this
				const {
					data: res
				} = await this.$http.post("getTaskDetail", {
					task_id: that.task_id
				});
				console.log(res.data.product)
				if (res.data.product.length > 0) {
					if (res.data.product[0].type_id == '1') {
						res.data.model_type = '种植业'
					} else if (res.data.product[0].type_id == '2') {
						res.data.model_type = '畜牧业'
					} else if (res.data.product[0].type_id == '3') {
						res.data.model_type = '渔业'
					} else {
						res.data.model_type = '其他'
					}
				}
				this.readForm = res.data
				console.log(this.readForm)
				this.bindForm.is_divide = res.data.is_divide
				this.bindForm.test_model_id = Number(res.data.test_model_id)
				if(res.data.test_model_id === null) {
					this.bindForm.test_model_id = undefined
				}else
				{
					this.bindForm.test_model_id = Number(res.data.test_model_id)
				}
				this.bindForm.endtime_cydsb = res.data.endtime_cydsb
				console.log(this.divideOptions.id)
			},

			/** 修复当用户在大于1的分页进行数据搜索没有返回值的问题 */
			setPageNum() {
				this.queryInfo.pageNum = 1
				this.getSampleList()()
			},
			setSelectedRow() {
				// 设置当前页已选项
				this.hander = true
				this.tableData.forEach(item => {
					if (this.list.includes(item[this.uniqueKey])) {
						this.$refs.multipleTable.toggleRowSelection(item, true)
					}
				})
				this.hander = false
			},

			/** 监听每页显示多少数据的改变 */
			handleSizeChange(newSize) {
				this.queryInfo.pageSize = newSize
				this.getSampleList()()
			},

			/** 监听页码的改变 */
			handleCurrentChange(newPage) {
				this.queryInfo.pageNum = newPage
				this.getSampleList()()
			},
			// 批量勾选
			handleSelectionChange(val) {
				this.multipleSelection = val
				console.log(this.multipleSelection)
				if (this.hander) return false
				// this.setSelectRows() // 处理选中的方法
			},

		}
	}
</script>

<style lang="less" scoped>
	.el-breadcrumb {
		margin-bottom: 20px;
	}

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

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

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

	.el-form-item {
		margin-left: 15px;
		margin-bottom: 5px;
	}

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

	.demonstration {
		margin: 20px;
	}

	// .el-form-item__content {
	// 	width: 200px;
	// }

	.my-label {
		width: 100px;
	}
	.el-pagination {
		margin-top: 25px;
	}

	.footer {
		margin-left: 45%;
		margin-top: 20px;
	}
	.el-table{
		margin-top: 20px;
	}
</style>