fj-dc-ui/.svn/pristine/45/45580d95fb8b3f2119e811df9ebc8a5cc55fc8f2.svn-base

<template>
    <div style="height:100%;width:100%;">
        <el-container style="height:100%;width:100%;">
            <el-aside
                    width="320px"
                    style="border-right:2px solid #d5d5ff;float:left"
                    :style="{'max-height':testHeight+'px','height':testHeight+'px'}"
            >
                <TreeListWithCheckBox
                        type="14"
                        :height="testHeight"
                        width="250"
                        @treeCheckedDataChange="treeCheckedDataChange"></TreeListWithCheckBox>
            </el-aside>
            <el-main id="dxdcListMainsk" style="padding:5px 20px;">
                <el-row>
                    <el-col :span="24">
                        <el-form
                                :inline="true"
                                size="mini"
                                class="demo-form-inline"
                                style="padding-left: 10px;"
                        >
                            <el-form-item label="督查状态">
                                <el-select v-model="dcType" clearable placeholder="督查状态">
                                    <el-option label="未督查" value="0"></el-option>
                                    <el-option label="督查中" value="1"></el-option>
                                    <el-option label="已督查" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="督查对象名称">
                                <el-input v-model="nm" placeholder="督查对象名称" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="督查时间">
                                <div style="display: flex;">
                                    <el-date-picker
                                            v-model="dateRange"
                                            type="daterange"
                                            value-format="yyyy-MM-dd"
                                            style="width:100%"
                                            range-separator="至"
                                            start-placeholder="开始日期"
                                            end-placeholder="结束日期"
                                    ></el-date-picker>
                                </div>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
                            </el-form-item>

                        </el-form>
                    </el-col>
                </el-row>

                <el-table
                        ref="table"
                        border
                        :data="skDataList"
                        style="width: 100%"
                        :height="tableHeight"
                        v-loading="expLoading"
                >
                    <el-table-column show-overflow-tooltip prop="nm" label="督查对象名称" min-width="130"
                                     align="center"></el-table-column>
                    <el-table-column
                            prop="province"
                            label="省"  v-if="isXj"
                            show-overflow-tooltip
                            min-width="100"
                            align="center"
                    ></el-table-column>
                    <el-table-column
                            prop="city"
                            :label="ownAdName"
                            show-overflow-tooltip
                            min-width="100"
                            align="center"
                    ></el-table-column>
                    <el-table-column
                            prop="country"
                            label="县" v-if="isXj"
                            show-overflow-tooltip
                            min-width="100"
                            align="center"
                    ></el-table-column>
                    <el-table-column prop="state" label="督查状态" align="center" min-width="130">
                        <template slot-scope="scope">
              <span
                      style="padding: 3px 10px;background:#F56C6C;border-radius:15px;color:rgba(255,255,255,1)"
                      v-if="scope.row.state == 0"
              >未督查</span>
                            <span
                                    style="padding: 3px 10px;background:#FBB56D;border-radius:15px;color:rgba(255,255,255,1)"
                                    v-if="scope.row.state == 1"
                            >督查中</span>
                            <span
                                    style="padding: 3px 10px;background:#63C25E;border-radius:15px;color:rgba(255,255,255,1)"
                                    v-if="scope.row.state == 2"
                            >已督查</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="location" show-overflow-tooltip min-width="200"
                                     label="详细地址"></el-table-column>
                    <el-table-column
                            prop="intm"
                            label="创建时间"
                            show-overflow-tooltip
                            min-width="120"
                            align="center"
                    ></el-table-column>
                    <el-table-column prop="intInfoStat" label="水量分配及取用水管控情况填报状态" align="center" min-width="220">
                        <template slot-scope="scope">
                            <p style="cursor:pointer;color:#F56C6C;"
                               v-if="scope.row.intInfoStat == 0 || !scope.row.intInfoStat">待填报</p>
                            <p style="cursor:pointer;color:#fbb56d" v-if="scope.row.intInfoStat == 1">未完成</p>
                            <p style="cursor:pointer;color:#67C23A" v-if="scope.row.intInfoStat == 2">已完成</p>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" min-width="160" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="success" plain @click="lookOver(scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        background
                        :pager-count="5"
                        :current-page="pageIndex"
                        :page-size="pageSize"
                        :page-sizes="[10, 20, 30, 40, 50, 100]"
                        layout="sizes, total, prev, pager, next"
                        :total="total"
                        @current-change="pageIndexChange"
                        @size-change="handleSizeChange"
                ></el-pagination>
            </el-main>
        </el-container>
        <fenShuiGuanKong
                v-if="showSlfpTianBao"
                :rowData="rowData"
                :currentObjectRgstrId="currentObjectRgstrId"
                :currentResCode="currentResCode"
                :currentAdcode="currentAdcode"
                :currentObjectId="currentObjectId"
                :currentObjectName="currentObjectName"
                :showOrEdit="showOrEdit"
                :swhsId="swhsId"
                @cancelHandler="cancelHandler"></fenShuiGuanKong>


    </div>
</template>

<script>
    import request from "../../../utils/gw_ajax_request.js";
    import {dateFormat} from "../../../utils/gw_date.js";
    import {deleteDcdxByObjid, getListChengGuo_slfp} from "../../../api/duChaTianBao.js";
    import TreeListWithCheckBox from './treeListWithCheckBox'
    import fenShuiGuanKong from './fenShuiGuanKong'

    export default {
        components: {
            TreeListWithCheckBox: TreeListWithCheckBox,
            fenShuiGuanKong: fenShuiGuanKong
        },
        props: [],

        data() {
            return {
                dateRange: [],
                nm: "",
                lyjg: [],
                engScales: [
                    {id: "1", name: "大型"},
                    {id: "2", name: "中型"},
                    {id: "3", name: "小型"},
                    {id: "4", name: "其他"},
                ],
                engScale: "",
                orgName: "",
                groupName: "",
                groupId: "",
                groups: [],
                sttm: "",
                entm: "",
                adName: "",
                treeData: [],
                dxdcMainHeight: window.innerHeight - 345,
                testHeight: window.innerHeight - 111,
                skDataList: [],
                pageIndex: 1,
                pageSize: 20,
                total: 0,
                tableHeight: 0,
                currentResCode: "",
                currentResName: "",
                currentObjectId: "",
                currentObjectRgstrId: "",
                currentObjectInfoObject: null,
                showSlfpTianBao: false,
                currentAdCode: "",
                currentNodeId: "",
                rsvrName: "",
                dcType: "",
                rowData: "",
                uploadDisabled: true,
                showTianBaoPl: false,
                downIcon: "el-icon-download",
                expLoading: false,
                currentEngScale: "",
                currentGroupId: "",
                currentAdcode: "",
                currentObjectName: "",
                showOrEdit: "",
                gdX: 0,
                gdY: 0,
                baseForm: {},
                problemLastYearVisible: false,
                swhsId: '',
                swhsCode: '',
                adCodes: []
            };
        },
        computed: {
            persId() {
                return localStorage.getItem("userid")
                    ? localStorage.getItem("userid")
                    : "1098101939614724096";
            },
            isAdmin: function () {
                return localStorage.getItem("isAdmin")
                    ? localStorage.getItem("isAdmin")
                    : "";
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 50;
                let _self = this;
                window.onresize = function () {
                    _self.tableHeight = window.innerHeight - _self.$refs.table.$el.offsetTop - 50
                }
            })

        },
        activated() {
            this.currentNodeId = "";
            this.rsvrName = "";
            this.dcType = "";
        },
        watch: {
            adCodes(n) {
                if (n.length) {
                    this.getSkDataList();
                }
            }
        },

        methods: {
            //树节点选中或取消事件
            treeCheckedDataChange(params) {
                // 去重
                this.adCodes = Array.from(new Set(params.CheckedKey));
            },
            formatDate(row, column) {
                if (row.upTm) {
                    return dateFormat(row.upTm, "yyyy-MM-dd");
                }
                if (row.intm) {
                    return dateFormat(row.intm, "yyyy-MM-dd");
                }
            },
            formatGateType: function (row, column) {
                return row.type == "1" ? '水库'
                    : row.type == "2" ? '湖泊'
                        : row.type == "3" ? '河流'
                            : row.type == "9" ? '其他' : '';
            },

            formatEngScal: function (row, column) {
                return row.engScal == "1" ? '大型'
                    : row.engScal == "2" ? '中型'
                        : row.engScal == "3" ? '小型' : '其他'
            },
            getSkDataList: function () {
                getListChengGuo_slfp(
                    this.persId,
                    this.pageSize,
                    this.pageIndex,
                    this.nm,
                    this.dcType,
                    this.adName,
                    this.dateRange && this.dateRange.length > 1 ? this.dateRange[0] : null,
                    this.dateRange && this.dateRange.length > 1 ? this.dateRange[1] : null,
                    this.groupId,
                    this.adCodes.toString()
                ).then(res => {
                    console.log(res);
                    this.skDataList = res.data.list;
                    this.total = res.data.total;
                });
            },
            onSubmit() {
                if (this.adCodes.length) {
                    this.getSkDataList();
                }
            },
            cancelHandler() {
                this.showSlfpTianBao = false;
            },
            pageIndexChange(val) {
                console.log(val);
                this.pageIndex = val;
                this.getSkDataList();
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.getSkDataList();
            },
            lookOver(rowData) {
                let _self = this;
                _self.showOrEdit = 'show';
                _self.swhsId = rowData.code;
                _self.currentObjectName = rowData.nm;
                _self.currentResCode = rowData.code;
                _self.currentObjectRgstrId = rowData.id;
                _self.currentObjectId = rowData.objId;
                _self.showSlfpTianBao = true;
            }
        }
    }
</script>

<style>
    #dcdxHeader {
        padding: 15px 20px;
    }

    #dxdcFooter {
        text-align: center;
    }

    #dxdcAside {
        border: 1px solid #d5d5ff;
    }

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

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>