jcxt_qd/src/components/admin/readSampleList.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 tableHeader2" :label="table.label"
            :prop="table.prop" align="center" :width="table.width" :fixed="table.fixed" />
            <el-table-column prop="cyd_status" label="抽样单状态" width="150" align="center">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.cyd_status==1">未上报</el-tag>
                    <el-tag type="warning" v-if="scope.row.cyd_status==2">已上报</el-tag>
                    <el-tag type="danger" v-if="scope.row.cyd_status==3">已完成</el-tag>
                </template>
			</el-table-column>
        <!-- 操作 -->
        <el-table-column label="操作" align="center" fixed="right">
        <template slot-scope="scope">
            <el-button style="margin:5px 0" type="success" size="small" @click="readSample(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="returnSampleList()" >
                    返回
                </el-button>
            </div>
        <!-- 查看详情对话框-->
		<!-- <el-dialog title="查看" :visible.sync="readDialogVisible" width="30%" :close-on-click-modal="false"
			class="dialogItem">
			<el-form v-if="readDialogVisible" label-width="100px">
				<el-form-item label="抽样单编码:" prop="tableData.cyd_code" class="labelItem">
					<div>{{readForm.cyd_code}}</div>
				</el-form-item>
				<el-form-item label="抽样单状态:" prop="cyd_status" class="labelItem">
					<div v-if="level=='0'">一般</div>
					<div v-if="level=='1'">紧急</div>
					<div v-if="level=='2'">特急</div>
				</el-form-item>
				<el-form-item label="抽样人员1:" prop="sample_person_one" width="70px" class="labelItem">
					<div>{{sample_person_one}}</div>
				</el-form-item>
				<el-form-item label="抽样人员2:" prop="sample_person_two" class="labelItem">
					<div>{{readForm.sample_person_two}}</div>
				</el-form-item>
				<el-form-item label="抽样时间:" prop="cyd_date" class="labelItem">
					<div>{{readForm.cyd_date}}</div>
				</el-form-item>
				<el-form-item label="单位名称:" prop="inspected_name" class="labelItem">
					<div>{{readForm.inspected_name}}</div>
				</el-form-item>
				<el-form-item label="单位地址:" prop="inspected_address" class="labelItem">
					<div>{{readForm.inspected_address}}</div>
				</el-form-item>
                <el-form-item label="联系人:" prop="contact_name" class="labelItem">
					<div>{{readForm.contact_name}}</div>
				</el-form-item>
				<el-form-item label="备注:" prop="cyd_log" class="labelItem">
					<div v-if="readForm.cyd_log==null">无</div>
					<div v-else>{{readForm.cyd_log}}</div>
				</el-form-item>
				<div class="footer">
					<el-button type="success" @click="readDialogVisible = false">返回</el-button>
				</div>
			</el-form>
		</el-dialog> -->

    </div>
</template>

<script>
export default {
    data() {
        return {
            // 查看任务详情
			// readDialogVisible: false,
			// readForm: {},
            // 数据表格数据
			tableData:[],
            sampleOrgId:{},
            task_id:'', 
            task_profile_id:'', 
            queryInfo:{
					pageSize:10,
					pageNum:1,
					task_class:'例行监测',
                    sample_org_id:'', 
                    check_org_id:'', 
                    cyd_status:'',
                    cyd_status_condition:'',
                    cyd_code:''
                    },
                tableHeader2: [{
                            label: '抽样单编码',
                            prop: 'cyd_code',
                            width: 180,
                        },{
                            label: '抽样人员1',
                            prop: 'cydProfile.sample_person_one',
                            width: 120,
                        },{
                            label: '抽样人员2',
                            prop: 'cydProfile.sample_person_two',
                            width: 120,
                        },{
                            label: '抽样时间',
                            prop: 'cydProfile.cyd_date',
                            width: 160,
                        },
                        // {
                        //     label: '样品名称',
                        //     prop: 'inspectedUnit.sample_name',
                        //     width: 120,
                        // },{
                        //     label: '样品商标',
                        //     prop: 'sample.data.sample_brand'
                        // },
                        // {
                        //     label: '抽样单状态',
                        //     prop: 'cyd_status'
                        // },
                ]  
        }
    },
    mounted() { 
        this.getCyds()
    },
    created() {
        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.getCyds()
    },
	methods: {
        //返回
        returnSampleList(){
            var that = this
            this.$router.push({
                name:'setTaskJg',
                params:{
                    task_id: that.task_id
                }
            })
                console.log(task_id)
        },
       // 获取抽样单列表
        async getCyds() {
            var that = this
            const {data: res} = await this.$http.post("getCyds", {
                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)
           
        },
        //分页器
                handleSizeChange(val) {
                    console.log(`每页 ${val} 条`);
                    },
                handleCurrentChange(val) {
                    this.queryInfo.pageNum = val;
                    console.log(`当前页: ${val}`);
                    this.getCyds()
                    },
                /** 监听页码的改变 */
                handleCurrentChange(newPage) {
                    this.queryInfo.pageNum = newPage
                    this.getCyds()
                },
                /** 监听每页显示多少数据的改变 */
                handleSizeChange(newSize) {
                    this.queryInfo.pageSize = newSize
                    this.getCyds()
                },
            	// 查看抽样单详情
                // async readDialogVisible1(row) {
                // 	this.readForm.cyd_code = row.cyd_code
                // 	this.readDialogVisible = true
                // },
         //查看抽样单详情
         readSample(id){
             this.$router.push({
					name:'readSample',
					params: {
					cyd_id:id,
					}
				})
         }
    }
}
</script>
<style>
.btns{
	float:right;
	/* margin-top: 10px; */
	padding: 10px;
}
.feyeqi{
    margin-top: 10px;
}
</style>