jcxt_qd/src/components/admin/addTaskJcObject.vue

<template>
	<div style="width: 100%">
		<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 :to="{path:'/admin/routineMonitor'}">任务列表</el-breadcrumb-item>
			<el-breadcrumb-item>添加任务</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="title">
			例行监测
		</div>
		<el-form :model="form" label-width="100px">
			<el-form-item prop="main_unit" label="抽样机构"  required>
				<el-input v-model="form.main_unit" @focus="getOrganizationsShow1 = true"></el-input>
			</el-form-item>
			<el-form-item prop="check_unit" label="检测机构"   required>
					<el-input v-model="form.check_unit" @focus="getOrganizationsShow2 = true"></el-input>
			</el-form-item>
			<el-form-item prop="sample_address" label="地区"   required>
				<el-cascader  :options="region" v-model="sample_address"
					@change="handleChange">
				</el-cascader>
			</el-form-item>
		<!-- 底部按钮 -->
			<el-form-item>
				<el-button type="success" @click="onSubmit()">保存</el-button>
				<el-button @click="reBack">返回</el-button>
			</el-form-item>
		</el-form>

		<!-- 选择抽样机构对话框 -->
		<el-dialog title="机构选择" :visible.sync="getOrganizationsShow1" width="50%" :close-on-click-modal="false" @open="getOrganizations1()" class="dialogItem">
			<el-form v-if="getOrganizationsShow1" :model="getOrganizationsForm1">
		<!-- 检索功能 -->
		<el-row :gutter="20">
			<el-col :span="6">
				<!-- 组别名称 -->
				<el-form-item label="组别名称">
					<el-select v-model="form.groupname" clearable>
						<el-option v-for="item in group" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<!-- 机构性质 -->
				<el-form-item label="机构性质">
						<el-select v-model="form.properties" clearable>
							<el-option v-for="item in field" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<!-- 输入匹配关键词 -->
				<!-- <el-form-item label="搜索名称">
					<el-autocomplete
						class="inline-input"
						v-model="state2"
						:fetch-suggestions="querySearch"
						placeholder="请输入内容"
						:trigger-on-focus="false"
						@select="handleSelect">
					</el-autocomplete>
				</el-form-item> -->
			</el-col>
			<el-col :span="6">
			<el-button type="success" @click="querySearch()" style="margin-top:40px">搜索</el-button>
			</el-col>
		</el-row>
				<!--  表格数据区域-->
				<el-table ref="multipleTable" :data="testList" row-key="id" @selection-change="handleSelectionChange1"
					border stripe highlight-current-row style="width: 100%">
					<el-table-column type="selection" :reserve-selection="true" 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.prop" v-for="table in tableHeader" :label="table.label"
						:prop="table.prop" align="center" :width="table.width" :fixed="table.fixed" />
				</el-table>
				<div class="footer">
					<!--    分页器区域-->
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="queryInfo1.pageNum" :page-sizes="[1,10, 15, 20]" :page-size="queryInfo1.pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="total" background />
					<el-button type="success" @click="choseTest1()">提交</el-button>
				</div>
				
			</el-form>
		</el-dialog>

		<!-- 选择检测机构对话框 -->
		<el-dialog title="机构选择" :visible.sync="getOrganizationsShow2" width="50%" :close-on-click-modal="false" @open="getOrganizations2()" class="dialogItem">
			<el-form v-if="getOrganizationsShow2" :model="getOrganizationsForm2">
		<!-- 检索功能 -->
		<el-row :gutter="20">
			<el-col :span="6">
				<!-- 组别名称 -->
				<el-form-item label="组别名称">
					<el-select v-model="form.groupname" clearable>
						<el-option v-for="item in group" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<!-- 机构性质 -->
				<el-form-item label="机构性质">
						<el-select v-model="form.properties" clearable>
							<el-option v-for="item in field" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
				</el-form-item>
			</el-col>
			<el-col :span="6">
				<!-- 输入匹配关键词 -->
				<!-- <el-form-item label="搜索名称">
					<el-autocomplete
						class="inline-input"
						v-model="state2"
						:fetch-suggestions="querySearch"
						placeholder="请输入内容"
						:trigger-on-focus="false"
						@select="handleSelect">
					</el-autocomplete>
				</el-form-item> -->
			</el-col>
			<el-col :span="6">
			<el-button type="success" @click="choseTest()" style="margin-top:40px">搜索</el-button>
			</el-col>
		</el-row>
				<!--  表格数据区域-->
				<el-table ref="multipleTable" :data="testList2" row-key="id"  @current-change="handleSelectionChange2"
					border stripe highlight-current-row style="width: 100%" >
					<!-- <el-table :data="testList" border stripe highlight-current-row  @current-change="handleSelectionChange2" style="width: 100%"
					:row-style="rowStyle" :cell-style="cellStyle"> -->
					<el-table-column type="selection" :reserve-selection="true" 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.prop" v-for="table in tableHeader" :label="table.label"
						:prop="table.prop" align="center" :width="table.width" :fixed="table.fixed" />
				</el-table>
				<div class="footer">
					<!--    分页器区域-->
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="queryInfo2.pageNum" :page-sizes="[1,10, 15, 20]" :page-size="queryInfo2.pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="total" background />
					<el-button type="success" @click="choseTest2()">提交</el-button>
				</div>
				
			</el-form>
		</el-dialog>
			

	</div>
</template>
<script>
import {
		regionData,
		regionDataPlus,
	} from 'element-china-area-data'
	const rymc = window.sessionStorage.getItem('rymc')
	const token = window.sessionStorage.getItem('token')
	export default {
		data() {
			return {
					form: {
					bear_unit: '',
					report_unit: '',
					// check_unit: '',
					sample_number: '',
					sample_address: '',
					uploadtime: '',
					groupname:'',
					properties:'',
					main_unit:[],
					check_unit:[]
				},
				currentRow: null,
				currentRow2: null,
				//组别名称
				group: [{
					value: '1',
					label: '检测机构'
				}, {
					value: '2',
					label: '县级监管单位'
				}, {
					value: '3',
					label: '市级监管单位'
				},{
					value: '4',
					label: '省级监管单位'
				}],
				//机构性质
				field: [{
					value: '1',
					label: '政府部门'
				}, {
					value: '2',
					label: '事业单位'
				}, {
					value: '3',
					label: '企业'
				}],

				// 抽样地区
				region: regionData,
				// sample_address: [],
				// 机构地域表格数据
				underTask: [],
				underTasktotal: 0,
				// 抽检分离选项
				divideOptions: [{
						id: 0,
						name: '否'
					},
					{
						id: 1,
						name: '是'
					}
				],
				// rymc: rymc,		//从本地缓存获取发布单位
				myHeaders: {
					Authorization: 'bearer'+ token			//上传文件添加token
				},
				// 任务表单
				// form: {
				// 	main_unit: [],	
				// 	check_unit: [],				
				// },
				// form: {
				// 	check_unit: [],			
				// },
				// 优先级选项
				priority: [{
					value: '0',
					label: '一般'
				}, {
					value: '1',
					label: '紧急'
				}, {
					value: '2',
					label: '特急'
				}],
				// 批次选项
				batch: [{
					label: '一季度'
				}, {
					label: '二季度'
				}, {
					label: '三季度'
				}, {
					label: '四季度'
				}],

				// 弹出抽样机构弹窗
				getOrganizationsShow1: false,
				// 查询检测机构请求参数
				queryInfo1: {
					pageNum: 1,
					pageSize: 10,
					keyWord: ''
				},

				// 弹出检测机构弹窗
				getOrganizationsShow2: false,
				// 查询检测机构请求参数
				queryInfo2: {
					pageNum: 1,
					pageSize: 10,
					keyWord: '',
					groupname:'检测机构'
				},
				// 检测机构列表
				testList2: [],
				// 表头
				tableHeader: [{
						label: '单位名称',
						prop: 'name',
						width: 300
						// fixed: 'left'
					},
					{
						label: '机构类型',
						prop: 'properties',
						width:150
						// fixed: 'left'
					}, {
						label: '组别名称',
						prop: 'groupname',
						width: 300
						// fixed: 'left'
					}
				],
				// 总共多少条数据
				total: 0,
				total2: 0,
				// table表格多选选项
				// multipleSelection: null,
				getOrganizationsForm1: {},
				getOrganizationsForm2: {},
				// 选中的牵头单位
				orgs: [],
				orgs2: [],
				// 上传成功文件列表
				fileList: []
			}
		},
		created:function(){
			this.postTaskProfile()
		},
		
		mounted() {
			let that = this
		},
		methods: {
			// 获取机构列表
				async postTaskProfile() {
				const result = await this.$http.post('postTaskProfile', {
					task_id: this.task_id,
					// pageSize:this.queryInfo.pageSize,
					// pageNum:this.queryInfo.pageNum
				})},
			// 获取选择抽样地区
			handleChange() {
				var that = this
				var loc = "";
				// console.log(this.form.place)
				for (let i = 0; i < this.sample_address.length; i++) {
					loc += CodeToText[this.sample_address[i]];
				}
				// console.log(loc)
				that.form.sample_address = loc
			},
			//保存
			async onSubmit() {
				this.form['token'] = token
				this.form['groupname'] = this.groupname
				this.form['orgs'] = this.orgs
				this.form['releaser'] = window.sessionStorage.getItem('rymc')
				this.form['task_class'] = '例行监测'
				this.form['ispublic'] = 0
				
				const result = await this.$http.post('postTaskProfile', this.form)
				// 判断业务逻辑
				if (result.data.code == 0) {
					this.$router.push('routineMonitor')
				} else {
					this.$message({
						type: 'error',
						message: result.data.message
					})
				}
			},
			reBack() {
				this.$router.push('addTask')
			},		
			// 获取抽样机构列表
			async getOrganizations1() {
				this.queryInfo1['token'] = token
				const result = await this.$http.post('getOrganizations', this.queryInfo1)
				console.log(result.data.code);
				// 判断业务逻辑
				if (result.data.code == 0) {
					this.testList = result.data.data.rows
					this.total = result.data.data.total
				}
			},

			// 获取检测机构列表
			async getOrganizations2() {
				this.queryInfo2['token'] = token
				const result = await this.$http.post('getOrganizations', this.queryInfo2)
				console.log(result.data.code);
				// 判断业务逻辑
				if (result.data.code == 0) {
					this.testList2 = result.data.data.rows
					this.total2 = result.data.data.total
				}
			},
			/** 修复当用户在大于1的分页进行数据搜索没有返回值的问题 */
			setPageNum() {
				this.queryInfo.pageNum = 1
				this.getOrganizations1()
			},
			setSelectedRow() {
				// 设置当前页已选项
				this.hander = true
				this.testList.forEach(item => {
					if (this.list.includes(item[this.uniqueKey])) {
						this.$refs.multipleTable.toggleRowSelection(item, true)
					}
				})
				this.hander = false
			},

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

			/** 监听页码的改变 */
			handleCurrentChange(newPage) {
				this.queryInfo1.pageNum = newPage
				this.getOrganizations1()
			},
			//批量勾选
			// handleSelectionChange(val) {
			// 	this.multipleSelection = val
			// 	if (this.hander) return false
			// 	this.setSelectRows() // 处理选中的方法
			// },
			//选中抽样（单选）
			handleSelectionChange1(val) {
				this.currentRow = val;
				console.log(this.currentRow)
				console.log(this.currentRow[0].name)
			},
			//选中检测（单选）
			handleSelectionChange2(val) {
				this.currentRow = val;
				console.log(this.currentRow)
				console.log(this.currentRow[0].name)
			},
			// 抽样单位提交
			choseTest1() {
				let that = this
				that.form.main_unit = that.currentRow[0].name
				that.getOrganizationsShow1 = false
			},
			// 检测单位提交
			choseTest2() {
				let that = this
				that.form.check_unit = that.currentRow2[0].name
				that.getOrganizationsShow2 = false
			},
		}
	}
</script>
<style lang="less" scoped>
	.title {
		margin-left: 50%;
		margin-bottom: 20px;
	}

	.el-form {
		width: 800px;
		margin: 0 auto;
	}

	.footer {
		margin-top: 5px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
</style>