jcxt_qd/src/components/admin/getJcds.vue

<template>
   	<div style="width: 100%">
        <!-- 标题栏导航 -->
	    <div slot="header" class="clearfix">
            <el-breadcrumb separator-class="el-icon-arrow-right">		
            <el-breadcrumb-item >首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{parentName}}</el-breadcrumb-item>
            <el-breadcrumb-item>{{labelName}}</el-breadcrumb-item>
            </el-breadcrumb>
		</div>
<!-- 表格区域 -->
    <el-table :data="tableData" border stripe highlight-current-row style="width: 100%" >
        <el-table-column :key="table.label" v-for="table in tableHeader2" :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 @click="read(scope.row.task_id,scope.row.id)" style="margin:5px 0" type="success" size="small" >查看检测单列表</el-button>
        </template>
        </el-table-column>
    </el-table>
        <!--分页器区域-->
            <el-pagination class="feyeqi" @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 class="btns">
                <el-button plain size="medium" @click="returnTask()" >
                    返回
                </el-button>
            </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 数据表格数据
			tableData: [],
            sampleOrgId:{},
            parentName:'',
            labelName:'',
            queryInfo:{
				pageSize:10,
					pageNum:1,
					// task_class:'例行监测',
                    task_id:'',
                    // task_profile_id:''
                    cyd_status_condition:'',
                    cyd_status:''
                    },
            	total:0,
                tableHeader2: [{
                            label: '抽样机构',
                            prop: 'sampleOrgId.name',
                            width: 180,
                        }, {
                            label: '检测机构',
                            prop: 'checkOrgId.name'
                        },
                        {
                            label: '抽样地区',
                            prop: 'sample_address'
                        }, 
                ]  
        }
    },
    mounted() {
        this.getJgTaskProfiles()
    },
    created() {
        this.task_id = this.$route.params.id
        this.parentName = this.$route.params.parentName
        this.labelName = this.$route.params.labelName
        this.getJgTaskProfiles()
    },
	methods: {
        //返回
        returnTask(){
            console.log(this.parentName)
            if(this.parentName == '例行监测'){
                this.$router.push({
                    name:'routineMonitor',
                    params:{
                        task_id:this.$route.params.id
                        }
                })
            }
            else if(this.parentName == '专项监测'){
                 this.$router.push({
                    name:'specialMonitor',
                    params:{
                        task_id:this.$route.params.id
                        }
                })
            }
            else if(this.parentName == '监督抽查'){
                 this.$router.push({
                    name:'checkMonitor',
                    params:{
                        task_id:this.$route.params.id
                        }
                })
            }else{
                 this.$router.push({
                    name:'reTask',
                    params:{
                        task_id:this.$route.params.id
                        }
                })
            }
        },
        // 获取检测机构列表
        async getJgTaskProfiles() {
              var that = this
            const { data: res} = await this.$http.post("getJgTaskProfiles", {
                task_id: that.task_id,
                task_profile_id:that.id,
                pageNum: that.queryInfo.pageNum,
                pageSize: that.queryInfo.pageSize
                });
                that.tableData = res.data.rows
                that.total = res.data.total
        },
        //查看检测单列表 
        read(task_id,id){
            // console.log(11)
            // console.log(id)
            // console.log(task_id)
				this.$router.push({
					name:'readCheckList',
					params: {
					task_id:task_id,
                    task_profile_id:id
					}
				})
		},
          //分页器
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                    },
                handleCurrentChange(val) {
                    this.queryInfo.pageNum = val;
                    console.log(`当前页: ${val}`);
                    this.getJgTaskProfiles()
                    },
                /** 监听页码的改变 */
                handleCurrentChange(newPage) {
                    this.queryInfo.pageNum = newPage
                    this.getJgTaskProfiles()
                },
                /** 监听每页显示多少数据的改变 */
                handleSizeChange(newSize) {
                    this.queryInfo.pageSize = newSize
                    this.getJgTaskProfiles()
                },
    },
    }

</script>
<style>
.btns{
	float:right;
	/* margin-top: 10px; */
	padding: 10px;
}
.feyeqi{
    margin-top: 10px;
}
</style>