jcxt_qd/src/components/admin/readCheckList copy.vue

<template>
    
   	<div style="width: 100%">
            <!-- 标题栏导航 -->
            <div slot="header" class="clearfix">
                <el-breadcrumb separator-class="el-icon-artableDate-right">		
                <el-breadcrumb-item >首页</el-breadcrumb-item>
                <el-breadcrumb-item>例行监测</el-breadcrumb-item>
                <el-breadcrumb-item>查看检测单列表</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 tableHeader1" :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 style="margin:5px 0" type="success" size="small" @click="getSampleList(scope.row.id)">获取样品列表</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="returnJcdList()" >
                        返回
                    </el-button>
                </div>

        	<!-- 弹框 样品列表 -->
			<el-dialog title="样品列表" :visible.sync="readDialog" width="75%" :close-on-click-modal="false" class="dialogItem">
				<el-form v-if="readDialog">
                    <el-table :data="tableData2" 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 style="margin:5px 0" type="success" size="small" @click="getSampleList(scope.row.id)">查看检测单详情</el-button>
                        </template>
                        </el-table-column>
                    </el-table>
					<!-- 样品列表分页器区域-->
					<el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
					:current-page="userInfo.pageNum" :page-sizes="[1,10, 15, 20]" :page-size="userInfo.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="total" background />
				</el-form>
			</el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            readDialog: false,
            // 数据表格数据
            total:0,
			tableData:[],
            tableData2:[],
            sampleOrgId:{},
            task_id:'', 
            task_profile_id:'', 
            underInfo:{
					pageNum: 1,
					pageSize: 10,
					cyd_id: ''
				},
            queryInfo:{
					pageSize:10,
					pageNum:1,
					task_class:'例行监测',
                    sample_org_id:'', 
                    check_org_id:'', 
                    cyd_status:'',
                    cyd_status_condition:'',
                    cyd_code:''
                    },
                tableHeader1: [{
                            label: '抽样单编码',
                            prop: 'cyd_code',
                            width: 180,
                        },{
                            label: '受检单位',
                            prop: 'inspectedUnit.inspected_name',
                            width: 120,
                        },{
                            label: '单位地址',
                            prop: 'inspectedUnit.inspected_address',
                            width: 200,
                        },{
                            label: '单位联系人',
                            prop: 'inspectedUnit.contact_name',
                            width: 200,
                        },{
                            label: '联系人电话',
                            prop: 'inspectedUnit.contact_phone',
                            width: 200,
                        }],
                 tableHeader2: [{
                            label: '样品名称',
                            prop: 'sample_name',
                            width: 180,
                        },{
                            label: '样品品牌',
                            prop: 'sample_brand',
                            width: 120,
                        },{
                            label: '抽样数量',
                            prop: 'sample_count',
                            width: 200,
                        },{
                            label: '抽样基数',
                            prop: 'sample_base',
                            width: 200,
                        },{
                            label: '生产日期',
                            prop: 'sample_md_date',
                            width: 200,
                        },{
                            label: '样品来源',
                            prop: 'sample_source',
                            width: 200,
                        },{
                            label: '备注',
                            prop: 'inspectedUnit.contact_phone',
                            width: 200,
                        }]

        }
    },
    mounted() { 
        this.getJcds()
    },
    created() {
        this.cyd_id = this.$route.params.cyd_id
        this.task_id = this.$route.params.task_id
        this.task_profile_id = this.$route.params.task_profile_id
        console.log(this.task_id)
        console.log(this.task_profile_id)
        this.getJcds()
        this.getSamples()
    },
	methods: {
        //返回
        returnSampleList(){
            var that = this
            this.$router.push({
                name:'setTaskJg',
                params:{
                    task_id: that.task_id
                }
            })
                console.log(task_id)
        },
       // 获取检测单列表
        async getJcds() {
            var that = this
            const {data: res} = await this.$http.post("getJcds", {
                task_id: that.task_id,
                task_profile_id:that.task_profile_id,
                pageNum: that.queryInfo.pageNum,
                pageSize: that.queryInfo.pageSize
            });
            console.log(that.id)
            this.tableData = res.data.rows
            console.log( this.tableData)
            this.total = res.data.total
            console.log( this.total)
        },

        // 获取样品列表
			async getSampleList(id) {
				this.task_id = this.task_id
				this.task_profile_id = id
				this.readDialog = true
				this.getSamples()
			},
			async getSamples() {
                // var that = this
				const {
					data: res
				} = await this.$http.post("getSamples",{
                    cyd_id: this.id,
                    task_id: this.task_id,
                    task_id: this.task_id,
                    task_profile_id:this.task_profile_id,
                    pageNum: this.queryInfo.pageNum,
                    pageSize: this.queryInfo.pageSize
                    });
				this.tableData2 = res.data.rows
				console.log(this.id)
				this.total = res.data.total
				
			},
        //分页器
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                    },
                handleCurrentChange(val) {
                    this.queryInfo.pageNum = val;
                    console.log(`当前页: ${val}`);
                    this.getJcds()
                    },
                /** 监听页码的改变 */
                handleCurrentChange(newPage) {
                    this.queryInfo.pageNum = newPage
                    this.getJcds()
                },
                /** 监听每页显示多少数据的改变 */
                handleSizeChange(newSize) {
                    this.queryInfo.pageSize = newSize
                    this.getJcds()
                },
         //分页器2
                /** 监听页码的改变 */
                handleCurrentChange2(newPage) {
                    this.userInfo.pageNum2 = newPage
                    this.getSamples()
                },
                /** 监听每页显示多少数据的改变 */
                handleSizeChange2(newSize) {
                    this.userInfo.pageSize2 = newSize
                    this.getSamples()
                },
         //查看检测单详情
         readCheck(id){
             this.$router.push({
					name:'readCheck',
					params: {
					cyd_id:id,
					}
				})
         },
        
    }
}
</script>
<style>
.btns{
	float:right;
	/* margin-top: 10px; */
	padding: 10px;
}
.feyeqi{
    margin-top: 10px;
}
</style>