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-item>抽样单</el-breadcrumb-item>
			</el-breadcrumb>
		</div>	
		<!-- 下拉菜单 -->
	<div>
			牵头单位
        <el-select v-model="value" placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
        </el-select>
        <!-- 返回按钮 -->
		<div class="btns">
			<el-button type="info" size="small" @click="returnTask">
				返回任务列表
			</el-button>
			<el-button type="info" size="small" @click="sendBack">
				退回
			</el-button>
		</div>
       
	</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 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>
		<el-table-column label="操作" align="center" fixed="right">
			<!-- 操作按钮区域的作用域插槽 -->
			<template slot-scope="scope">
					<el-button type="success" size="mini" @click="readDialogVisible1(scope.row)">抽样单详情</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 {
				total:0,
				  options: [{
					value: '选项1',
					label: '部级监测机构'
					}],
				queryInfo:{
					year:'',
					task_name:'',
					starttime:'',
					endtime:'',
					ispublic:'',
					pageSize:10,
					pageNum:1,
					task_class:'专项监测'
				},
            cellStyle: {
					padding: 2 + 'px'
				},
			rowStyle: {
					height: 35 + 'px'
				},
			tableHeader: [{
						label: '样品名称',
						prop: '',
						width: 150
						// fixed: 'left'
					},
					{
						label: '样品编码',
						prop: '',
						width: 80
						// fixed: 'left'
					}, {
						label: '商标',
						prop: '',
						width: 150
						// fixed: 'left'
					},
					{
						label: '等级',
						prop: '',
						width: 120
					},
					{
						label: '抽样基数',
						prop: '',
						width: 120
					},
					{
						label: '抽样场所',
						prop: '',
						width: 120
					},
					{
						label: '状态',
						prop: '',
						width: 180
					}
				],
				// 数据表格数据
			tableData: []
			}
		},
		created() {
			
		},
		methods: {
			sendBack(){},
			// 获取牵头单位
			getTaskById(){	
			},
			// 获取抽样单列表
			getZLTaskSampleListByJcInfo(){
				
			},
			returnTask(){
				this.$router.push('routineMonitor')
			},
			handleSizeChange(val) {
        	console.log(`每页 ${val} 条`);
      		},
      		handleCurrentChange(val) {
        		console.log(`当前页: ${val}`);
      		}
		},
	}
</script>

<style>
.block{
	padding: 10px;
}
btns{
	float:right;
}
</style>