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 :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="task_class" width="70px" class="labelItem" required>
						<el-select v-model="bindForm.test_model_id" size="mini">
							<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="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="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-form>
			</el-tab-pane>

			<el-tab-pane label="机构与地域" name="second">
				<!-- 头部搜索栏 -->
				<el-row style="margin-right: 0px;">
					<el-form style="display: flex; flex-direction: row; margin-left: 5px;">
						<el-form-item label="抽样机构" class="select" size="mini">
							<el-input v-model="form.bear_unit" @focus="getTestListShow = true"></el-input>
						</el-form-item>
						<el-form-item label="检测机构" class="select" size="mini">
							<el-input v-model="form.check_unit" @focus="getTestListShow2 = true"></el-input>
						</el-form-item>
						<el-form-item label="抽样数量" class="select" size="mini">
							<el-input v-model="form.sample_number"></el-input>
						</el-form-item>
						<el-form-item label="报告上传单位" class="select" size="mini">
							<el-input v-model="form.report_unit" @focus="getTestListShow1 = true"></el-input>
						</el-form-item>
					</el-form>
				</el-row>
				<el-row style="margin-right: 0px;">
					<el-col :span="10">
						<el-form style="display: flex; flex-direction: row;">
							<el-form-item label="抽样地区" class="select">
								<el-cascader size="mini" :options="region" v-model="selectedOptions"
									@change="handleChange">
								</el-cascader>
							</el-form-item>
							<el-form-item 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-form>
					</el-col>
					<el-col :span="5">
						<el-button type="primary" size="mini" plain @click="save()">保存
						</el-button>
						<!-- <el-button type="primary" size="small" plain icon="el-icon-edit-outline" @click="appear">
								重置
							</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-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"></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 label="操作" align="center" fixed="right">
						<template slot-scope="scope">
							<el-button type="success" size="small" plain @click="sampleDetail(scope.row.sample_id)">删除
							</el-button>
						</template>
					</el-table-column>
				</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="next">导出总览</el-button>
					<el-button type="success" size="mini" @click="next">返回</el-button>
				</div>
			</el-tab-pane>



		</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">
						<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="" type="success" 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">
						<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="" 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">
						<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="" type="success" size="mini" @click="choseCheckUnit()">提交</el-button>
				</div>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	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: {},
				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,
				// 模型列表
				options: [],
				bindForm: {
					test_model_id: '',
					endtime_cydsb: ''
				},
				// 弹出检测机构弹窗
				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_name: '',
					report_unit_name: '',
					check_unit_name: ''
				},
				currentRow: null,
				currentRow1: null,
				currentRow2: null,
				// 抽样地区
				region: regionData,
				selectedOptions: [],
				// 机构地域表格数据
				underTask: [],
				underTasktotal: 0,
				// 抽检分离选项
				divideOptions: [{
						id: '0',
						name: '否'
					},
					{
						id: '1',
						name: '是'
					}
				]
			};
		},
		components: {
			taskdetail
		},
		mounted() {},
		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() {
				this.form['task_id'] = this.task_id
				const {
					data: res
				} = await this.$http.post("AddUnderTask", this.form);
				if (res.code == 0) {
					this.$message({
						type: 'success',
						message: '保存成功!'
					});
					this.getUnderTask()
				}
			},
			// 获取机构地域表格
			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
			},
			// 绑定模型
			async bindModel() {
				var that = this
				that.bindForm['id'] = that.task_id
				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',
				})
			},
			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

				this.bindForm.endtime_cydsb = res.data.endtime_cydsb
			},

			/** 修复当用户在大于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: 8px;
		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;
	}

	.footer {
		margin-left: 45%;
	}
</style>