fj-dc-ui/.svn/pristine/7c/7c7458483bbb4eaeba36930465dfbb2097cf0c0b.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="15"
                        :height="testHeight"
                        width="260"
                        @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="groupName"-->
                    <!--label="所在组"-->
                    <!--show-overflow-tooltip-->
                    <!--min-width="150"-->
                    <!--align="center"-->
                    <!--&gt;</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="wswmInfoStat" label="节约用水管理情况填报状态" align="center" min-width="220">
                        <template slot-scope="scope">
                            <p style="cursor:pointer;color:#F56C6C;"
                               v-if="scope.row.wswmInfoStat == 0 || !scope.row.wswmInfoStat">待填报</p>
                            <p style="cursor:pointer;color:#fbb56d" v-if="scope.row.wswmInfoStat == 1">未完成</p>
                            <p style="cursor:pointer;color:#67C23A" v-if="scope.row.wswmInfoStat == 2">已完成</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="wseInfoStat" label="节水评价情况填报状态" align="center" min-width="220">
                        <template slot-scope="scope">
                            <p style="cursor:pointer;color:#F56C6C;"
                               v-if="scope.row.wseInfoStat == 0 || !scope.row.wseInfoStat">待填报</p>
                            <p style="cursor:pointer;color:#fbb56d" v-if="scope.row.wseInfoStat == 1">未完成</p>
                            <p style="cursor:pointer;color:#67C23A" v-if="scope.row.wseInfoStat == 2">已完成</p>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" min-width="250" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="primary" 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>
        <popupSzyJsgl v-if="showSzyJsgl"
                      ref="popupSzyJsglRef"
                      :currentDuchaTpe="currentDuchaTpe"
                      :currentObjectRgstrId="currentRgstrId"
                      :currentJysglAdCode="currentJysglAdCode"
                      :currentObjectId="currentObjectId"
                      :currentObjectName="currentObjectName"
                      @cancelHandler="szyJsglCancelHandler"></popupSzyJsgl>


    </div>
</template>

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

    export default {
        components: {
            TreeListWithCheckBox,
            //水资源 节水管理
            popupSzyJsgl: resolve => {
                require(['../../../views/zongHeXinXiOl/components/popupWindow/szy_jsgl/main.vue'], resolve)
            }
        },
        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: '',
                showSzyJsgl: false,
                currentJysglAdCode: '',
                currentRgstrId: '',
                currentObjectType: '',//水资源 用水单位 类型（节水还是非节水）
                currentDuchaTpe: true,
                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
                }
            })
            this.getAllGroup();
            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));
            },
            handleSelect(item) {
                console.log(item);
                this.groupId = item.id;
            },
            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 () {
                getList_jieshuiChengGuo(
                    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();
                }
                // else{
                //     this.$message.warning('请选择左侧行政区');
                // }

            },
            cancelHandler() {
                this.showSlfpTianBao = false;
            },
            addShuiKuSuccess() {
                this.getSkDataList();
            },

            deleteMember(val) {
                console.log(val);
                var _self = this;
                this.$confirm('此操作将 “' + val.nm + '” 从督查对象列表中删除，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteDcdxByObjid(val.objId, 15).then(res => {
                            if (res.success) {
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                            }
                            ;
                            this.getSkDataList();
                        }
                    );
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },

            submitHandler(rowData) {
                console.log(rowData);
                var _self = this;
                if (!rowData.wswmInfoStat) {
                    this.$message({
                        message: "请填写节约用水管理情况！",
                        type: "warning"
                    });
                    return;
                }
                if (!rowData.wseInfoStat) {
                    this.$message({
                        message: "请填写节水评价情况！",
                        type: "warning"
                    });
                    return;
                }
                this.$confirm("请确认所有信息填报完毕？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    let formObj = {
                        id: rowData.id,
                        state: "2"
                    };
                    request.post("/bis/insp/svwt/area/rgstr", formObj).then(res => {
                        if (res.success) {
                            _self.addShuiKuSuccess();
                            _self.$message.success("提交成功");
                        } else {
                            _self.cancelHandler();
                        }
                    });
                }).catch(() => {
                });
            },
            pageIndexChange(val) {
                console.log(val);
                this.pageIndex = val;
                this.getSkDataList();
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.getSkDataList();
            },
            // 下载模板
            async downloadTemplate() {

                await this.downloadTemplateSet();
                this.uploadDisabled = false;

            },
            downloadTemplateSet() {
                let href = '/api/dc/imp/dcInfo/download?userId=' + this.persId + '&orgType=013&orgIds=' + this.groupId;
                const a = document.createElement('a'); // 创建a标签
                a.setAttribute('download', '水源地督查填报表.xls');// download属性
                a.setAttribute('href', href);// href链接
                a.click();// 自执行点击事件
            },
            showPlDialog() {
                this.showTianBaoPl = true
            },
            closePlDialog(val) {
                this.showTianBaoPl = false
                this.getSkDataList();
            },
            //成果查看
            lookOver(row) {
                this.activeName = "登记信息";
                this.currentObjectId = row.objId;
                this.currentJysglAdCode = row.code;
                this.currentObjectName = row.nm;
                this.currentRgstrId = row.rgstrId;
                this.showSzyJsgl = true;
                if (this.$refs['popupSzyJsglRef']) {
                    this.$refs['popupSzyJsglRef'].showDialog();
                }
            },
            szyJsglCancelHandler() {
                this.showSzyJsgl = false;
            },
        }


    }
</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>