fj-dc-ui/.svn/pristine/c0/c003186d6aac30acdf8566f5ff80ab2ca59d166b.svn-base

   <template>
    <el-container class="check_plan_zj">
        <el-main>
            <el-card class="box-card" :style="{'height': cardHeight + 'px','overflow-y':'auto'}">
                <el-row :gutter="24" type="flex" justify="start" class="notice_title">
                    <el-col :span="20">
                        <el-form :inline="true" size="small" class="demo-form-inline" label-width="80px">
                            <el-form-item label="年度" size="mini">
                              <el-date-picker
                                v-model="searchForm.chkYear"
                                type="year"
                                format="yyyy"
                                value-format="yyyy"
                                placeholder="选择年度">
                              </el-date-picker>
                            </el-form-item>
                            <el-form-item label="支撑单位" size="mini">
                              <el-input v-model="searchForm.chkDep" placeholder="请输入支撑单位" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="项目" size="mini">
                              <el-input v-model="searchForm.chkItem" placeholder="请输入项目" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="事项名称">
                              <el-input v-model="searchForm.chkMatter" placeholder="请输入事项名称" clearable></el-input>
                            </el-form-item>
                          <el-form-item>
                            <el-button type="primary" @click="searchBtn">查询</el-button>
                          </el-form-item>
                        </el-form>
                    </el-col>
                </el-row>
                <div>
                    <div class="table_title">
                        <h2>监督检查工作计划</h2>
                        <div>
                            <el-button type="success" @click="addFormBtn">添加监督检查计划</el-button>
                            <el-button type="primary" @click="downloadPlan">导出检查计划</el-button>
                            <el-button type="primary" @click="downloadSum">导出检查计划汇总表</el-button>
                            <el-button type="primary" @click="downloadTemplate">下载模板</el-button>
                            <span style="padding-left: 10px;">
                                <common-upload-auto-simple
                                  ref="Import306"
                                  :limit=1
                                  :url="`/pdcApi/bis/insp/plan/chk/impExl`"
                                  @uploadOver="uploadOver"
                                  :accept="'.xls'"
                                  style="margin:auto;"
                                  comment=".xls格式,不超过2MB(自动上传)"
                                  fileDesc="导入"
                                ></common-upload-auto-simple>
                            </span>
                        </div>
                    </div>
                    <el-table
                            border
                            ref="multipleTable"
                            :height="tableHeight"
                            :data="tableData"
                            tooltip-effect="dark"
                            style="width: 100%"
                            v-loading="loading">
                        <el-table-column align="center" type="index" label="序号" min-width="25">
                            <template slot-scope="scope">{{ (pageNum - 1) * pageSize + (scope.$index + 1) }}</template>
                        </el-table-column>
                        <el-table-column
                          header-align="center"
                          align="center"
                          min-width="50"
                          prop="chkYear"
                          label="年度"
                          show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column label="事项名称" align="center">
                            <el-table-column
                                    header-align="center"
                                    align="center"
                                    min-width="150"
                                    prop="chkItem"
                                    label="项目"
                                    show-overflow-tooltip
                            ></el-table-column>
                            <el-table-column
                                    header-align="center"
                                    align="center"
                                    min-width="150"
                                    prop="chkMatter"
                                    label="监管事项"
                                    show-overflow-tooltip
                            ></el-table-column>
                        </el-table-column>
                        <el-table-column
                                header-align="center"
                                align="center"
                                min-width="200"
                                prop="chkBatch"
                                label="批次"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                header-align="center"
                                align="center"
                                min-width="160"
                                prop="chkTm"
                                label="计划时间"
                                show-overflow-tooltip
                        ></el-table-column>
                      <el-table-column label="检查地区" align="center">
                        <el-table-column
                                header-align="center"
                                align="center"
                                min-width="200"
                                prop="chkCity"
                                label="市(州)"
                                show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column
                                header-align="center"
                                align="center"
                                min-width="100"
                                prop="chkCounty"
                                label="县"
                                show-overflow-tooltip
                        ></el-table-column>
                      </el-table-column>
                        <el-table-column
                                header-align="center"
                                align="center"
                                min-width="130"
                                prop="chkContent"
                                label="主要检查内容"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                header-align="center"
                                align="center"
                                min-width="130"
                                prop="chkDep"
                                label="支撑单位"
                                show-overflow-tooltip>
                        </el-table-column>
                        <el-table-column
                                header-align="center"
                                align="center"
                                min-width="100"
                                prop="chkType"
                                label="开展方式"
                                show-overflow-tooltip
                        ></el-table-column>
                        <el-table-column
                                align="center"
                                min-width="260"
                                label="操作"
                                fixed="right">
                            <template slot-scope="scope">
                                    <el-button type="success" size="mini" @click.stop="lookOver(scope.row)">查看</el-button>
                                    <el-button type="success" size="mini" @click.stop="edit(scope.row)">编辑</el-button>
                                    <el-button type="danger" size="mini" @click.stop="deleteData(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        style="margin: 10px auto"
                        background
                        :pager-count="5"
                        :current-page="pageNum"
                        :page-size="pageSize"
                        :page-sizes="[10, 20, 30, 40, 50, 100]"
                        layout="sizes, total, prev, pager, next"
                        :total="total"
                        @current-change="handleCurrentChange"
                        @size-change="handleSizeChange"
                    ></el-pagination>
                </div>
            </el-card>
        </el-main>
        <el-dialog
          class="outerDialog custom_dialog"
          :title="dialogT+'监督检查计划'"
          width="60%"
          @close="closeAddDialog"
          v-if="addDialogVisible"
          :visible.sync="addDialogVisible">
          <div style="width: 100%;height:100%;">
            <el-form ref="addForm" label-width="200px">
              <el-form-item label="选择年度" required>
                <el-date-picker
                  v-model="addForm.chkYear"
                  type="year"
                  format="yyyy"
                  value-format="yyyy"
                  placeholder="选择年度">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="项目" required>
                <el-input v-model="addForm.chkItem" placeholder="请输入项目"></el-input>
              </el-form-item>
              <el-form-item label="监管事项" required>
                <el-input v-model="addForm.chkMatter" placeholder="请输入监管事项"></el-input>
              </el-form-item>
              <el-form-item label="批次" required>
                <el-input v-model="addForm.chkBatch" placeholder="请输入批次"></el-input>
              </el-form-item>
              <el-form-item label="计划时间(月)" required>
                <el-input v-model="addForm.chkTm" placeholder="请输入月份"></el-input>
              </el-form-item>
              <el-form-item label="检查市(州)" required>
                <el-input v-model="addForm.chkCity" placeholder="请输入市(州)"></el-input>
              </el-form-item>
              <el-form-item label="县" required>
                <el-input v-model="addForm.chkCounty" placeholder="请输入县"></el-input>
              </el-form-item>
              <el-form-item label="主要检查内容" required>
                <el-input v-model="addForm.chkContent" placeholder="请输入主要检查内容"></el-input>
              </el-form-item>
              <el-form-item label="支撑单位" required>
                <el-input v-model="addForm.chkDep" placeholder="请输入支撑单位"></el-input>
              </el-form-item>
              <el-form-item label="开展方式" required>
                <el-input v-model="addForm.chkType" placeholder="请输入开展方式"></el-input>
              </el-form-item>
              <el-form-item style="text-align: center">
                <el-button type="primary" @click="addSubmit" style="margin-bottom: 30px;">确定</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-dialog>
      <el-dialog
        class="outerDialog custom_dialog"
        :title="'监督检查计划详细'"
        width="40%"
        @close="closeDetailDialog"
        v-if="detailDialogVisible"
        :visible.sync="detailDialogVisible">
        <div style="width: 100%;height:100%;overflow: auto;">
            <table>
              <tr><td>年度</td><td>{{detailObj.chkYear}}</td></tr>
              <tr><td>项目</td><td>{{detailObj.chkItem}}</td></tr>
              <tr><td>监管事项</td><td>{{detailObj.chkMatter}}</td></tr>
              <tr><td>批次</td><td>{{detailObj.chkBatch}}</td></tr>
              <tr><td>计划时间(月)</td><td>{{detailObj.chkTm}}</td></tr>
              <tr><td>检查市(州)</td><td>{{detailObj.chkCity}}</td></tr>
              <tr><td>县</td><td>{{detailObj.chkCounty}}</td></tr>
              <tr><td>主要检查内容</td><td>{{detailObj.chkContent}}</td></tr>
              <tr><td>支撑单位</td><td>{{detailObj.chkDep}}</td></tr>
              <tr><td>开展方式</td><td>{{detailObj.chkType}}</td></tr>
            </table>
        </div>
      </el-dialog>
    </el-container>
</template>
<script>
    import {exportModel} from "@util/gw_exportModel";
    import request from '@util/gw_ajax_request'
    import CommonUploadAutoSimple from "../../../widgets/common-upload-auto-simple";
    export default {
        name: "",
        props: [],
        data() {
            return {
                cardHeight: window.innerHeight - 130,
                tableData: [],
                tableHeight: window.innerHeight - 350,
                loading: false,
                pageSize: 20,
                pageNum: 1,
                total:0,
                formLabelWidth: '120px',
                searchForm:{
                    chkYear:"",
                    chkDep:"",
                    chkItem:"",
                    chkMatter:""
                },
                addDialogVisible:false,
                detailDialogVisible:false,
                isAddFalg:true,
                detailObj:{},
                dialogT:"",
                addForm:{
                    chkYear:"",
                    chkItem:"",
                    chkMatter:"",
                    chkBatch:"",
                    chkTm:"",
                    chkCity:"",
                    chkCounty:"",
                    chkContent:"",
                    chkDep:"",
                    chkType:""
                },
                updateForm:{
                    id:"",
                    chkYear:"",
                    chkItem:"",
                    chkMatter:"",
                    chkBatch:"",
                    chkTm:"",
                    chkCity:"",
                    chkCounty:"",
                    chkContent:"",
                    chkDep:"",
                    chkType:""
                }

            }
        },
        components: {
            CommonUploadAutoSimple
        },
        computed: {
            persId() {
                return localStorage.getItem("userid")
                    ? localStorage.getItem("userid")
                    : "1098101939614724096";
            },
            orgId() {
                return localStorage.getItem('currentOrgId') ? localStorage.getItem("currentOrgId") : "";
            },
            organCode() {
                return localStorage.getItem('currentRlcode') ? localStorage.getItem('currentRlcode') : ''
            },
        },
        mounted() {
           this.initTableData();
        },
        methods: {
            uploadOver(){
                this.initTableData();
            },
            async downloadPlan() {
                if (!this.searchForm.chkYear) {
                    this.$message.warning("请选择年份");
                    return;
                }
                if (!this.searchForm.chkDep) {
                    this.$message.warning("请输入支撑单位");
                    return;
                }
                let url = "/pdcApi/bis/insp/plan/chk/export/checkList";
                let type = "post";
                let exportName = "检查计划表.xls"
                let param = JSON.stringify({chkYear:this.searchForm.chkYear,chkDep:this.searchForm.chkDep});
                let result = await exportModel(type, url, exportName,param);
            },
            async downloadSum() {
                if (!this.searchForm.chkYear) {
                    this.$message.warning("请选择年份");
                    return;
                }
                let url = "/pdcApi/bis/insp/plan/chk/export/checkList";
                let type = "post";
                let exportName = "检查计划汇总表.xls"
                let param = JSON.stringify({chkYear:this.searchForm.chkYear});
                let result = await exportModel(type, url, exportName, param);
            },
            async downloadTemplate() {
                let url = "/pdcApi/bis/insp/plan/chk/getExl";
                let type = "get";
                let exportName = "年度检查计划模板.xls"
                let result = await exportModel(type, url, exportName, null);
            },
            lookOver(obj){
               this.detailObj = obj;
               this.detailDialogVisible = true;
            },
            deleteData(id){
                var _self = this;
                this.$confirm('确定删除该条数据吗, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    request.post('/bis/insp/plan/chk/delete/'+id).then(res=>{
                        if(res.success){
                            _self.initTableData();
                        }else{
                            _self.$message.warning(res.message);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            edit(row){
              var obj = JSON.stringify(row);
              this.addDialogVisible = true;
              this.addForm = JSON.parse(obj);
              this.addForm.chkYear = JSON.stringify(this.addForm.chkYear);
              this.isAddFalg = false;
              this.dialogT = "编辑";
            },
            addSubmit(){
                if(this.addForm.chkYear=="" || this.addForm.chkYear==undefined){
                    this.$message.warning("请选择年份");
                    return;
                }
                if(this.addForm.chkItem=="" || this.addForm.chkItem==undefined){
                    this.$message.warning("请输入项目");
                    return;
                }
                if(this.addForm.chkMatter=="" || this.addForm.chkMatter==undefined){
                    this.$message.warning("请输入监管事项");
                    return;
                }
                if(this.addForm.chkBatch=="" || this.addForm.chkBatch==undefined){
                    this.$message.warning("请输入批次");
                    return;
                }
                if(this.addForm.chkTm=="" || this.addForm.chkTm==undefined){
                    this.$message.warning("请输入计划时间月");
                    return;
                }
                if(this.addForm.chkCity=="" || this.addForm.chkCity==undefined){
                    this.$message.warning("请输入市(州)");
                    return;
                }
                if(this.addForm.chkCounty=="" || this.addForm.chkCounty==undefined){
                    this.$message.warning("请输入县");
                    return;
                }
                if(this.addForm.chkContent=="" || this.addForm.chkContent==undefined){
                    this.$message.warning("请输入检查内容");
                    return;
                }
                if(this.addForm.chkDep=="" || this.addForm.chkDep==undefined){
                    this.$message.warning("请输入支撑单位");
                    return;
                }
                if(this.addForm.chkType=="" || this.addForm.chkType==undefined){
                    this.$message.warning("请输入开展方式");
                    return;
                }
                var _self = this;
                request.post('/bis/insp/plan/chk',this.addForm).then(res=>{
                    if(res.success){
                        _self.$message.success("保存成功");
                        _self.addDialogVisible = false;
                        _self.addForm = {};
                        _self.initTableData();
                    }else{
                        _self.$message.warning(res.message);
                    }
                })
            },
            closeAddDialog(){
                this.addDialogVisible = false;
            },
            closeDetailDialog(){
                this.detailDialogVisible = false;
            },
            addFormBtn(){
                this.addDialogVisible = true;
                this.addForm = {};
                this.isAddFalg = true;
                this.dialogT = "添加";
            },
            searchBtn(){
                this.initTableData();
            },
            initTableData(){
                this.searchForm.pageNum = this.pageNum;
                this.searchForm.pageSize = this.pageSize;
                var _self = this;
                request.post('/bis/insp/plan/chk/listOfPage',this.searchForm).then(res=>{
                    if(res.success){
                        _self.tableData = res.data.list;
                        _self.total = res.data.total;
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            },
            handleCurrentChange(val){
                this.pageNum = val;
                this.initTableData();
            },
            handleSizeChange(val){
                this.pageSize = val;
                this.initTableData();
            }
        }
    }
</script>

<style lang="scss" scoped>
     table{
        width: 100%;
        height:100%;
        border-collapse: collapse;
        margin-bottom: 30px;
     }
     table tr td{
       border:1px solid #cecece;
       height:35px;
       text-indent: 15px;
       padding-right: 15px;
     }
     table tr td:first-child{
       background:  #f2f1f1;
       width: 120px;
       text-align: right;
     }
    .check_plan_zj{
         width: 100%;
         height:100%;
         margin: 0;
         padding: 0;
        .table_title{
            margin-bottom: 10px;
            overflow: hidden;
            h2{
                text-align: center;
            }
            div{
                float: right;
            }
        }
        .notice_title{
            .el-input--mini .el-input__inner,.el-select-dropdown__list{
                width: 8vw;
            }
        }
        .rowClassP{
            span {
                color: #3399ff;
                margin-left: 15px;
                cursor: pointer;
            }
        }
    }

</style>