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 slot-scope="scope">
					<!-- <el-button type="success" size="mini" @click="readDialogVisible1(scope.row)">抽样单详情</el-button> -->
					<el-button style="margin: 5px auto;" type="success" size="small" @click="readSampleList(scope.row.sample_id)">查看详情</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>
	</div>
	</div>
		
</template>

<script>
	const token = window.sessionStorage.getItem('token')
	export default {
		name: '',
		data() {
			return {
				
				//控制弹框显隐
				dialogVisible: false,
				total:0,
				task_id:'',
				queryInfo:{
					keyWord: '',
					year:'',
					task_name:'',
					starttime:'',
					endtime:'',
					ispublic:'',
					pageSize:10,
					pageNum:1,
					task_class:'专项监测',
					unit_name:'',
				},
            cellStyle: {
					padding: 2 + 'px'
				},
			rowStyle: {
					height: 35 + 'px'
				},
			tableHeader: [{
						label: '抽样单编码',
						prop: 'cyd_code',
						width: 260
						// fixed: 'left'
					},
					{
						label: '受检单位',
						prop: 'inspectedUnit.inspected_name',
						width: 200
						// fixed: 'left'
					}, {
						label: '抽样日期',
						prop: 'cydProfile.cyd_date',
						width: 180
						// fixed: 'left'
					},
					{
						label: '状态',
						prop: 'cyd_status',
						width: 160
					},
					
				],
				// 总共多少条数据
				total: 0,
				// table表格多选选项
				// multipleSelection: null,
				// getQtListShow: {},
				// 选中的牵头单位
				orgs: [],
				// 数据表格数据
				tableData: [],
			}
		// },
		
			// this.getQtouList()
		},
		mounted: function() {
			this.getCyds()
			},
		created: function() {
			this.getCyds()
			console.log(this.$route.params.task_id)
			console.log(this.$route.params.task_profile_id)
			this.task_id = this.$route.params.task_id
			this.task_profile_id = this.$route.params.task_profile_id
			
			// this.getCyds()
		},
		
		methods: {
				handleSizeChange(val) {
					console.log(`每页 ${val} 条`);
				},
				handleCurrentChange(val) {
					this.queryInfo.pageNum = val;
					console.log(`当前页: ${val}`);
					this.getCyds()
				},
			//批量选中
			// 	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.getCyds()
			},

			/** 监听页码的改变 */
			handleCurrentChange1(newPage) {
				this.queryInfo.pageNum = newPage
				this.getCyds()
			},
			
			// 获取抽样单列表
				async getCyds() {
				const result = await this.$http.post('getCyds', {
					task_id:this.task_id,
					task_profile_id:this.task_profile_id,
					pageSize:this.queryInfo.pageSize,
					pageNum:this.queryInfo.pageNum,
				})
				console.log( result.data)
				console.log(result.data.data)
				if (result.data.code == 0) {
					for (let i = 0; i < result.data.data.rows.length; i++) {
					if (result.data.data.rows[i].sample_status == '0') {
						result.data.data.rows[i].sample_status = '未上报'
					} else {
						result.data.data.rows[i].sample_status = '已上报'
					}
				this.tableData = result.data.data
				this.total = result.data.data.total
				console.log( result.data.data.total)
				}
				console.log(this.tableData)
				}
				},
			//查看详情
			async readSampleList(id) {
				console.log(id)
				this.$router.push({
					name: 'jgsampleDetail',
					params: {
						id: id
					}
				})
			},
		}
	}
	
	
	
</script>

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