jcxt_qd/src/components/admin/taskSample.vue

<template>
	<div>	
		<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>
		</div>	

		<!-- 牵头单位弹框 -->
		<!-- <el-button icon="el-icon-search" @click="getQtouList()" size="medium">搜索牵头单位</el-button> -->
		<!-- 下拉菜单 -->
	<!-- <div>
			牵头单位
        <el-select v-model="value" placeholder="请选择" clearable>
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
				@change="choseQt()">
            </el-option>
        </el-select> -->
        <!-- 返回按钮 -->
		<el-form-item label="牵头单位名称" class="select" size="small">
			<el-input v-model="queryInfo.unit_name"></el-input>	
			<el-button type="success" size="small">查询</el-button>
		</el-form-item>
	
		<div class="btns">
			<el-button plain size="small" @click="returnTask()">
				返回
			</el-button>
		</div>
	<!-- 表格数据区域-->
	<div class="table">
		<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 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 >
					<!-- <el-button type="success" size="mini" @click="readDialogVisible1(scope.row)">抽样单详情</el-button> -->
					<el-button style="margin: 5px auto;" type="success" size="small" @click="readSampleList()">查看详情</el-button>
					<el-button  size="small"  @click="sendBack()">退回</el-button>
			</template>
		</el-table-column>
		</el-table>
			<!-- 分页器区域-->
		<div class="block">
				 <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 />
		</div>
			<!-- 牵头单位弹框 -->
			<!-- <el-dialog title="机构选择" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="ture" :show-close="true" :center="true" @click="getTestList()" > -->
			<!-- <el-form v-if="getQtListShow" :model="getTestListForm"> -->
				<!--  表格数据区域-->
				<!-- <el-table ref="multipleTable" :data="QtouList" row-key="id" @selection-change="handleSelectionChange()"
					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_qt" :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="queryInfo.pageNum" :page-sizes="[1,10, 15, 20]" :page-size="queryInfo.pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="total" background />
					<el-button type="success" @click="dialogVisible = false" size="small">提交</el-button>
				</div> -->
			<!-- </el-form> -->
		<!-- </el-dialog> -->
	</div>
	</div>
		
</template>

<script>
	const token = window.sessionStorage.getItem('token')
	export default {
		name: '',
		data() {
			return {
				
				//控制弹框显隐
				dialogVisible: false,
				total:0,
				queryInfo:{
					keyWord: '',
					year:'',
					task_name:'',
					starttime:'',
					endtime:'',
					ispublic:'',
					pageSize:10,
					pageNum:1,
					task_class:'专项监测',
					task_id:'',
					unit_name:'',
				},
            cellStyle: {
					padding: 2 + 'px'
				},
			rowStyle: {
					height: 35 + 'px'
				},
			tableHeader: [{
						label: '样品名称',
						prop: 'sample_name',
						width: 150
						// fixed: 'left'
					},
					{
						label: '样品编码',
						prop: 'sample_id',
						width: 200
						// fixed: 'left'
					}, {
						label: '商标',
						prop: 'brand',
						width: 150
						// fixed: 'left'
					},
					{
						label: '等级',
						prop: 'level',
						width: 120
					},
					{
						label: '抽样基数',
						prop: 'sample_base',
						width: 120
					},
					{
						label: '抽样场所',
						prop: 'sample_ground',
						width: 120
					},
					{
						label: '状态',
						prop: 'sample_status',
						width: 180
					}
				],
				// 表头
				tableHeader_qt: [{
						label: '单位名称',
						prop: 'name',
						width: 300
						// fixed: 'left'
					},
					{
						label: '机构类型',
						prop: 'jgxz',
						// width: 40
						// fixed: 'left'
					}, {
						label: '所属区域',
						prop: 'ssqy',
						width: 300
						// fixed: 'left'
					},{
						label: '产品范围',
						prop: 'cpfw',
						width: 300
						// fixed: 'left'
					}
				],
				// 总共多少条数据
				total: 0,
				// table表格多选选项
				multipleSelection: null,
				getQtListShow: {},
				// 选中的牵头单位
				orgs: [],
				// 数据表格数据
			tableData: [],
			QtouList:[]
			}
		},
		mounted: function() {
			this.getJgCydList()
			// this.getQtouList()
		},
		created() {
		},
		created: function() {
			console.log(this.$route.params.task_id)
			// this.unit_id = this.$route.params.unit_id
			this.task_id = this.$route.params.task_id
			this.getJgCydList()
			// this.getQtouList()
		},
		
		methods: {
				handleSizeChange(val) {
					console.log(`每页 ${val} 条`);
				},
				handleCurrentChange(val) {
					this.queryInfo.pageNum = val;
					console.log(`当前页: ${val}`);
					this.getJgCydList()
				},
			//批量选中
				handleSelectionChange(val) {
					this.multipleSelection = val;
					console.log(this.multipleSelection)
			},
			
			//获取牵头单位列表
			async getQtouList() {
				this.dialogVisible = 'ture'
				console.log(this.dialogVisible)
				this.queryInfo['token'] = token
				const result = await this.$http.post('getQtouList',this.queryInfo )
				console.log( result.data.data.rows);
				// 判断业务逻辑
				if (result.data.code == 0) {
					this.QtouList = result.data.data.rows
					this.total = result.data.data.total
				}
			},
			//返回
			returnTask(){
				this.$router.push('routineMonitor')
			},

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

			/** 监听页码的改变 */
			handleCurrentChange1(newPage) {
				this.queryInfo.pageNum = newPage
				this.getJgCydList()
			},
			// 获取抽样单列表
				async getJgCydList() {
				const result = await this.$http.post('getJgCydList', {
					task_id: this.task_id,
					pageSize:this.queryInfo.pageSize,
					pageNum:this.queryInfo.pageNum
				})
				console.log( result.data)
				console.log(this.queryInfo.pageSize)
				if (result.data.code == 0) {
				this.tableData = result.data.data.rows
				this.total = result.data.data.total
				console.log( result.data.data.total)
				}
				console.log(this.tableData)
				},
			//查看详情
			async readSampleList(row) {
				const result = await this.$http.post('readSampleList',{
					task_id:this.task_id,
				})
			},
		}
		}
	
	
	
</script>

<style>
.block{
	padding: 10px;
}
.btns{
	float:right;
	padding: 10px;
}
.footer {
		margin-top: 5px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
}
</style>