fj-dc-ui/.svn/pristine/34/3461dfadb8fc2b215f9fcba4e843dc7378223202.svn-base

<template>

    <el-row>
        <el-col :span="24">
            <el-card class="ducha_form" :body-style="{ 'padding': '20px 5px' }" :style="formStyle">
                <el-form :inline="true" :model="formInline" class="sh-form-inline">
                    <el-form-item label="选择年度">
                        <el-select v-model="formInline.year" clearable placeholder="请选择">
                        <el-option
                            v-for="item in yearList"
                            :label="item.year"
                            :value="item.year"
                            :key="item.id"
                        ></el-option>
                    </el-select>
                    </el-form-item>
                    <el-form-item style="margin: 0">
                        <el-button type="primary" @click="onSearch" icon="el-icon-search">查询</el-button>
                    </el-form-item>
                    <!-- 测评报表弹窗 -->
                    <el-dialog class="customs_dialog" 
                    :visible.sync="dialogVisible" 
                    :before-close="handleClose" title="稽查专家现场工作情况考核表">
                        <jcMarkYearZj :groupId="groupId" width="100%" height="100px" v-if="showReport"></jcMarkYearZj>
                        <span slot="footer" class="dialog-footer"></span>
                    </el-dialog>
                </el-form>
            </el-card>
            <el-card class="ducha_table"  :body-style="{ 'padding': '0 5px' }">
                <el-main style="margin: 0 -5px;padding: 0;width:100%;">
                    <el-table :data="tableList" style="width: 100%"
                              ref="singleTable"
                              v-loading="tableLoading"
                              border
                              :height="dxdcMainHeight+'px'"
                              :render-header="renderHeader"
                    >
                        <el-table-column type="index" min-width="100" :index="getIndex" label="编号" show-overflow-tooltip align="center"></el-table-column>
                        <el-table-column prop="year" label="年度" min-width="100" show-overflow-tooltip align="center"></el-table-column>
                        <el-table-column prop="batch" label="批次" min-width="100" show-overflow-tooltip align="center"></el-table-column>
                        <el-table-column prop="groupNm" label="稽查组" min-width="100" show-overflow-tooltip align="center"></el-table-column>
                        <el-table-column prop="enTm" label="测评截止时间" min-width="130" show-overflow-tooltip align="center"></el-table-column>
                        <el-table-column prop="dataStat" label="测评状态" min-min-width="130" show-overflow-tooltip align="center"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button
                                size="mini"
                                @click="openReportDialog(scope.$index, scope.row)">测评</el-button>
                                <el-button
                                size="mini"
                                type="danger"
                                @click="submitHandler(scope.$index, scope.row)">提交</el-button>
                            </template>
                        </el-table-column>
                    
                    </el-table>
                </el-main>
                <el-footer class="el-footer-style">
                    <el-pagination
                            style="text-align:center;"
                            small
                            background
                            :current-page.sync="page.pageNum"
                            :page-size="page.pageSize"
                            :page-sizes="[10, 20, 30, 40, 50, 100]"
                            layout="sizes, total, prev, pager, next,jumper"
                            :total="showResultCount"
                            @current-change="pageIndexChange"
                            @size-change="handleSizeChange"
                    ></el-pagination>
                </el-footer>
            </el-card>

        </el-col>

    </el-row>

</template>



<script>

    import request from '@util/gw_ajax_request.js';
    import { exportModel } from "@util/gw_exportModel";
    import jcMarkYearZj from "./jc_mark_year_zj.vue";
    export default {
        name: "piciceping",
        components:{
            jcMarkYearZj:jcMarkYearZj
        },
        data() {
            return {
                tableLoading:true,
                tableList: [],
                page:{
                    pageNum: 1,
                    pageSize: 10,
                },
                showResultCount: 0,
                autoSort: '请选择',
                autoInput: '请输入',
                formInline: {
                    year: ''
                },
                formStyle: {
                    width: '100%',
                    height: '70px',
                },
                dxdcMainHeight: window.innerHeight - 197,
                dxdcAsideHeight: window.innerHeight - 90,
                dialogVisible: false,
                yearList: [],
                showReport: false,
                groupId:'',
            }
        },
        mounted() {
            this.getDataList();
            this.getYearList(); // 获取稽查年度列表
        },
        activated(){
            this.getDataList()
        },
        methods: {
            empty(){
              this.formInline = {};
            },
            formatSttp(row,column){
                let sttp = row.sttp;
                let _sttp = '';
                switch (sttp) {
                    case 'NATIONAL' : _sttp = '国家级';break;
                    case 'PROVAUTO' : _sttp = '省级自动';break;
                    case 'PROVHAND' : _sttp = '省级人工';break;
                    case 'PROV' : _sttp = '省级监测站(未知手动自动)';break;
                }
                return _sttp;
            },
            provTreeSelectChangeHandler: function(params) {
                this.formInline.adcd = params.likeCode;
                this.getDataList();
            },
            getIndex(index){
                return (index + this.page.pageSize * (this.page.pageNum - 1)) + 1
            },
            onSearch(){
                this.getDataList();
            },
            pageIndexChange(val){
                this.page.pageNum = val;
                this.getDataList();
            },
            handleSizeChange(val){
              this.page.pageSize = val;
              this.getDataList();
            },
            renderHeader(){

            },
            getDataList(){
                let params = {
                    'pageSize': this.page.pageSize,
                    'pageNum': this.page.pageNum,
                    'year': this.formInline.year,
                };
                request.post('/tac/insp/year/batch/group/page',params).then((res)=>{
                    let data = res.data
                    this.tableList = data.list
                    this.showResultCount = data.total
                    this.tableLoading = false
                })
            },
            openReportDialog(index, row){
                this.groupId = row.id;
                this.dialogVisible = true
                this.showReport = true
            },
            closeReportDialog(){
                this.dialogVisible = false
                this.showReport = false
            },
            handleClose(){
                this.dialogVisible = false
                this.showReport = false
            },
            getYearList() {
                request.post(`/tac/insp/year/list`,{}).then(res => {
                    this.yearList = res.data;
                });
            },
            submitHandler(index, row) {
                console.log(index, row);
            }
        },
        computed: {

        },
        watch: {

        },
    }
</script>

<style>

    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    .ducha_form .el-input {
        width: 200px !important;
    }
    
    .el-footer-style {
        text-align: center;
        width:100%;
    }

    .customs_dialog .el-dialog{
        width: 80% !important;
    }

    .customs_dialog .el-dialog__body {
        padding: 30px 20px;
        color: #606266;
        font-size: 14px;
        height: 60vh;
        overflow: hidden;

    }

</style>