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>
		<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="地区"   >
				<el-cascader  :options="region" v-model="sample_address"
					@change="handleChange" clearable>
				</el-cascader>
			</el-form-item>

				<!-- <el-form-item prop="sample_address" label="地区"   >
					<el-cascader :options="options" :props="props" v-model="sample_address" clearable ></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>
<!-- 抽样机构 -->
		<!-- 选择抽样机构对话框 -->
		<template scope-slot="scope">
			<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-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="handleSizeChange1" @current-change="handleCurrentChange1"
				: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>
		</template>
		
<!-- 检测机构 -->
		<!-- 选择检测机构对话框 -->
		<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-table ref="multipleTable" :data="testList2" row-key="id" @selection-change="handleSelectionChange2"
					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="handleSizeChange2" @current-change="handleCurrentChange2"
						:current-page="queryInfo2.pageNum" :page-sizes="[1,10, 15, 20]" :page-size="queryInfo2.pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="total2" background />

					<el-button type="success" @click="choseTest2()">提交</el-button>
				</div>
			</el-form>
		</el-dialog>
			
<!-- 地区表格区域 -->
			<el-table ref="multipleTable" :data="regionList" row-key="id" @selection-change="handleSelectionChange3"
					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 tableHeader3" :label="table.label"
						:prop="table.prop" align="center" :width="table.width" :fixed="table.fixed" />
			</el-table>
	</div>
</template>
<script>
import {
		regionData,
		CodeToText,
		regionDataPlus,
	} from 'element-china-area-data'
	const rymc = window.sessionStorage.getItem('rymc')
	const token = window.sessionStorage.getItem('token')
	export default {
		data() {
			return {
				// 地区单选
				props: { multiple: true },
				CodeToText:'',
					form: {
					// name:'',
					bear_unit: '',
					report_unit: '',
					sample_number: '',
					// sample_address: '',
					uploadtime: '',
					groupname:'',
					properties:'',
					main_unit:[],
					check_unit:[], 
					sample_org_id:'',
					check_org_id:''
				},
				currentRow: null,
				currentRow2: null,
				//组别名称
				// group: [
				// {
				// 	value: '2',
				// 	label: '县级监管单位'
				// }, {
				// 	value: '3',
				// 	label: '市级监管单位'
				// },{
				// 	value: '4',
				// 	label: '省级监管单位'
				// }],
				//机构性质
				// field: [{
				// 	value: '1',
				// 	label: '政府部门'
				// }, {
				// 	value: '2',
				// 	label: '事业单位'
				// }, {
				// 	value: '3',
				// 	label: '企业'
				// }],
				// 抽样地区
				// region: regionData,
				region: regionData[11].children,
				sample_address:[],
				// 机构地域表格数据
				underTask: [],
				underTasktotal: 0,
				// 抽检分离选项
				divideOptions: [{
						id: 0,
						name: '否'
					},
					{
						id: 1,
						name: '是'
					}
				],
				// myHeaders: {
				// 	Authorization: 'bearer'+ token//上传文件添加token
				// },
				// 优先级选项
				priority: [{
					value: '0',
					label: '一般'
				}, {
					value: '1',
					label: '紧急'
				}, {
					value: '2',
					label: '特急'
				}],
				// 批次选项
				batch: [{
					label: '一季度'
				}, {
					label: '二季度'
				}, {
					label: '三季度'
				}, {
					label: '四季度'
				}],

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

				// 弹出检测机构弹窗
				getOrganizationsShow2: false,
				// 查询检测机构请求参数
				queryInfo2: {
					pageNum: 1,
					pageSize: 10,
					// keyWord: '',
					groupname:'检测机构',
				},
				//抽样机构列表
				testList: [],
				// 检测机构列表
				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.sample_org_id = this.id
			this.task_id= this.$route.params.task_id
			console.log(this.task_id)
			this.postTaskProfile()
		},
		
		mounted() {
			let that = this
		},
		methods: {
			// 添加任务step2
			async postTaskProfile() {
				const result = await this.$http.post('postTaskProfile', {
					task_id: this.task_id,
					sample_org_id:this.sample_org_id,
					check_org_id:this.check_org_id,
					sample_address:this.sample_address
				})
				this.sample_org_id = result.data.rows.id
				this.check_org_id = result.data.rows.id
				console.log(this.sample_org_id)
			},
			//搜索
			// async search(){
			// 	this.queryInfo1.pageNum = 1
			// 		this.getOrganizations()
			// },
			//搜索
			// async search2(){
			// 	this.queryInfo2.pageNum = 1
			// 		this.getOrganizations()
			// },
			
			// 获取选择抽样地区
			handleChange() {
				var that = this
				var loc = "";
				for (let i = 0; i < this.sample_address.length; i++) {
					loc += CodeToText[this.sample_address[i]];
				}
				that.form.sample_address = loc
				// console.log(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
				this.form['sample_org_id'] = this.sample_org_id
				this.form['check_org_id'] = this.check_org_id
				this.form['task_id'] = this.task_id
				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)
					this.testList = result.data.data.rows
					this.total = result.data.data.total
					this.sample_org_id = result.data.rows.id
					console.log(result.data.data.rows.id)
			},

			// 获取检测机构列表
			async getOrganizations2() {
				this.queryInfo2['token'] = token
				const result = await this.$http.post('getOrganizations', this.queryInfo2)
					this.testList2 = result.data.data.rows
					this.total2 = result.data.data.total
					// this.check_org_id = result.data.rows.id
			},

			/** 修复当用户在大于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
			},
//抽样机构页码
			/** 监听每页显示多少数据的改变 */
			handleSizeChange1(newSize) {
				this.queryInfo1.pageSize = newSize
				this.getOrganizations1()
			},
			/** 监听页码的改变 */
			handleCurrentChange1(newPage) {
				this.queryInfo1.pageNum = newPage
				this.getOrganizations1()
			},
//检测机构页码
			/** 监听每页显示多少数据的改变 */
			handleSizeChange2(newSize) {
				this.queryInfo2.pageSize = newSize
				this.getOrganizations2()
			},
			/** 监听页码的改变 */
			handleCurrentChange2(newPage) {
				this.queryInfo2.pageNum = newPage
				this.getOrganizations2()
			},

			//选中抽样（单选）
			handleSelectionChange1(val) {
				this.currentRow = val;
				console.log(this.currentRow)
				console.log(this.currentRow[0].name)
				this.sample_org_id = this.currentRow[0].id
				console.log(this.sample_org_id)
			},
			//选中检测（单选）
			handleSelectionChange2(val) {
				this.currentRow2 = val;
				this.check_org_id = this.currentRow2[0].id
				console.log(this.currentRow2)
				console.log(this.currentRow2[0].name)
				console.log(this.check_org_id)
			},
// 抽样单位提交
			async choseTest1() {
				let that = this
				that.form.main_unit = that.currentRow[0].name
				that.getOrganizationsShow1 = false
				that.form.sample_org_id = that.currentRow[0].id
				console.log(that.form.sample_org_id)

			},
// 检测单位提交
			choseTest2() {
				let that = this
				that.form.check_unit = that.currentRow2[0].name
				that.form.check_org_id = that.currentRow2[0].id
				that.getOrganizationsShow2 = false
				console.log(that.form.check_org_id)
			},
		}
	}
</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>