fj-dc-ui/.svn/pristine/0f/0fb4683c47e5b52de7a803ca4a3f7cab5952e4cd.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'}">
                
                <tb-left-tree orgType="035" :isAll="viewPriv" @treeNodeClickHandler="treeNodeClickHandler"
                              @organList="getOrganList"></tb-left-tree>
            
            </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="adName" clearable placeholder="行政区名称"></el-input>
                            </el-form-item>
                            <el-form-item label="督查对象名称">
                                <el-input v-model="nm" placeholder="督查对象名称" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="所在组">
                                <el-autocomplete
                                    v-model="groupName"
                                    clearable
                                    value-key="nm"
                                    :fetch-suggestions="querySearchAsync"
                                    placeholder="请输入内容"
                                    @select="handleSelect"
                                ></el-autocomplete>
                            </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 label="问题督查状态:">
                                <el-select v-model="findParams.state" clearable placeholder="请选择">
                                    <el-option
                                        v-for="item in stateList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
                                <el-button type="success" @click="reFresh" icon="el-icon-refresh">刷新</el-button>
                            </el-form-item>
                            <TongYongTianBaoPl v-if="showTianBaoPl"
                                               :showTianBaoPl="showTianBaoPl"
                                               titleName="中小河流治理"
                                               @closePlDialog="closePlDialog">
                            </TongYongTianBaoPl>
                        </el-form>
                    </el-col>
                </el-row>
                <el-table
                    ref="table"
                    border
                    :data="zxhlzlDataList"
                    style="width: 100%"
                    :height="tableHeight"
                    v-loading="expLoading">
                    <el-table-column show-overflow-tooltip prop="nm" label="督查对象名称" min-width="200"
                                     align="center"></el-table-column>
                    <el-table-column
                        prop="adName"
                        label="行政区划"
                        show-overflow-tooltip
                        min-width="160"
                        align="center"
                    ></el-table-column>
                    <el-table-column
                        prop="groupName"
                        label="所在组"
                        show-overflow-tooltip
                        min-width="150"
                        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="type" :formatter="utTypeFormatter" show-overflow-tooltip min-width="150"-->
                    <!--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="uptm"
                        label="更新时间"
                        align="center"
                        min-width="120">
                    </el-table-column>
                    <el-table-column prop="smrmpState" label="
中小河流治理项目抽查督查状态" align="center" min-width="220">
                        <template slot-scope="scope">
                            <p style="cursor:pointer;color:#F56C6C;"
                               v-if="scope.row.smrmpState == 0 || !scope.row.smrmpState">待填报</p>
                            <p style="cursor:pointer;color:#fbb56d" v-if="scope.row.smrmpState == 1">未完成</p>
                            <p style="cursor:pointer;color:#67C23A" v-if="scope.row.smrmpState == 2">已完成</p>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" min-width="250" v-if="hasPriv" fixed="right">
                        <template slot-scope="scope">
                            <div>
                                <el-button
                                    size="mini"
                                    type="success"
                                    plain
                                    @click="toAddMember('编辑',scope.row)"
                                >编辑
                                </el-button>
                                <el-button size="mini" type="danger" plain @click="deleteMember(scope.row)">删除
                                </el-button>
                                <el-button size="mini" type="danger" plain @click="submitHandler(scope.row)">提交
                                </el-button>
                            </div>
                            <div v-if="false">
                                <el-button size="mini" type="success" plain @click="toView(scope.row)">查看</el-button>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作" min-width="120" fixed="right" v-if="viewPriv">
                        <template slot-scope="scope">
                            <el-button size="mini" type="success" plain
                                       @click="toView(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>
            <zxhlzltb
                v-if="showSlfpTianBao"
                :rowData="rowData"
                :currentObjectRgstrId="currentObjectRgstrId"
                :currentResCode="currentResCode"
                :currentObjectId="currentObjectId"
                :currentObjectName="currentObjectName"
                :utType="utType"
                :baseId="baseId"
                :showOrEdit="showOrEdit"
                :gdX="gdX"
                :gdY="gdY"
                :baseForm="baseForm"
                @cancelHandler="cancelHandler"
                @addShuiKuSuccess="addShuiKuSuccess"
            ></zxhlzltb>
        </el-container>
        <!-- 添加/编辑人员弹窗 -->
    </div>
</template>

<script>
    import request from "@util/gw_ajax_request.js";
    import {dateFormat} from "@util/gw_date.js";
    import {deleteDcdxByObjid, getList_zxhlzlApi} from "@api/duChaTianBao.js";
    import provTreeList from "@widget/provTreeList.vue";
    import zxhlzltb from "./zxhlzl/zxhlzltb.vue";
    import TongYongTianBaoPl from "../duChaTianBao/dctbBatchImp/tongYongTianbao_piliang.vue";
    import tbLeftTree from "./dctb_lefttree.vue"
    
    export default {
        components: {
            provTreeList: provTreeList,
            zxhlzltb: zxhlzltb,
            TongYongTianBaoPl: TongYongTianBaoPl,
            tbLeftTree,
            popupSzyJsgl: resolve => {
                require(["../zongHeXinXiOl/components/popupWindow/szy_jsgl/main.vue"], resolve);
            }, //水资源 节水管理
        },
        props: [],
        
        data() {
            return {
                dateRange: [],
                nm: "",
                lyjg: [],
                engScale: "",
                orgName: "",
                groupName: "",
                groupId: "",
                groups: [],
                sttm: "",
                entm: "",
                adName: "",
                treeData: [],
                dxdcMainHeight: window.innerHeight - 345,
                testHeight: window.innerHeight - 111,
                zxhlzlDataList: [],
                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: "",
                currentObjectName: "",
                showOrEdit: "",
                gdX: 0,
                gdY: 0,
                baseForm: {},
                problemLastYearVisible: false,
                swhsCode: '',
                showSzyJsgl: false,
                utType: '', // 单位类型
                baseId: '', //基础信息id
            };
        },
        computed: {
            persId() {
                return localStorage.getItem("userid")
                    ? localStorage.getItem("userid")
                    : "1098101939614724096";
            },
            isAdmin: function () {
                return localStorage.getItem("isAdmin")
                    ? localStorage.getItem("isAdmin")
                    : "";
            },
            hasPriv() {
                return this.ownPriv('manage')
            },
            viewPriv() {
                return this.ownPriv('view')
            }
        },
        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.getzxhlzlDataList();
            this.getAllGroup();
            
        },
        activated() {
        },
        watch: {
            currentNodeId(n, o) {
                this.getzxhlzlDataList();
            },
            groupName(n, o) {
                if (n == "") {
                    this.groupId = "";
                }
            }
        },
        
        methods: {
            reFresh() {
                this.getLeftTreeData();
                this.currentNodeId = "";
                this.rsvrName = "";
                this.dcType = "";
                this.getzxhlzlDataList();
            },
            //获取所有的组
            getAllGroup() {
                var _self = this;
                request.get("/dc/user/getGroupByPersid", {
                    params: {persid: this.persId, ptype: "35"}
                }).then(res => {
                    if (res.success) {
                        _self.groups = res.data;
                    }
                });
            },
            querySearchAsync(queryString, cb) {
                var restaurants = this.groups;
                var results = queryString
                    ? restaurants.filter(this.createStateFilter(queryString))
                    : restaurants;
                
                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    cb(results);
                }, 1500 * Math.random());
            },
            createStateFilter(queryString) {
                return state => {
                    return state.nm.toLowerCase().indexOf(queryString.toLowerCase()) != -1;
                };
            },
            handleSelect(item) {
                console.log(item);
                this.groupId = item.id;
            },
            getOrganList(data) {
                this.lyjg = data
            },
            treeNodeClickHandler(data) {
                this.currentNodeId = data.id;
            },
            formatDate(row, column) {
                if (row.uptm) {
                    return dateFormat(row.uptm, "yyyy-MM-dd");
                }
                if (row.intm) {
                    return dateFormat(row.intm, "yyyy-MM-dd");
                }
            },
            getzxhlzlDataList: function () {
                let data = {
                    'presId': this.persId,
                    "pageSize": this.pageSize,
                    'pageNum': this.pageIndex,
                    'rsName': this.nm,
                    'state': this.dcType,
                    'adName': this.adName,
                    'sttm': this.dateRange && this.dateRange.length > 1 ? this.dateRange[0] : null,
                    'entm': this.dateRange && this.dateRange.length > 1 ? this.dateRange[1] : null,
                    'groupId': this.groupId,
                    'plnaId': this.currentNodeId,
                    "pType": "35",
                }
                if (this.viewPriv) data['isAll'] = 1
                
                getList_zxhlzlApi(data).then(res => {
                    console.log(res);
                    if (res.data.list) {
                        res.data.list.forEach((item) => {
                            if (item.intm && item.uptm) {
                                item.intm = item.intm.substr(0, 10);
                                item.uptm = item.uptm.substr(0, 10);
                            }
                        })
                    }
                    this.zxhlzlDataList = res.data.list;
                    this.total = res.data.total;
                });
            },
            onSubmit() {
                this.getzxhlzlDataList();
            },
            toAddMember(type, rowData) {
                var _self = this;
                this.rowData = rowData;
                _self.showOrEdit = 'edit';
                _self.currentObjectName = rowData.nm;
                _self.currentResCode = rowData.code;
                _self.currentObjectRgstrId = rowData.id;
                _self.currentObjectId = rowData.objId;
                _self.utType = rowData.type
                _self.baseId = rowData.baseId
                _self.showSlfpTianBao = true;
            },
            cancelHandler() {
                this.showSlfpTianBao = false;
                this.getzxhlzlDataList();
            },
            addShuiKuSuccess() {
                this.getzxhlzlDataList();
            },
            
            deleteMember(val) {
                console.log(val);
                var _self = this;
                this.$confirm('此操作将 “' + val.nm + '” 从督查对象列表中删除，是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteDcdxByObjid(val.objId, 35).then(res => {
                        if (res.success) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                        ;
                        this.getzxhlzlDataList();
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            submitHandler(rowData) {
                console.log(rowData);
                var _self = this;
                if (!rowData.smrmpState) {
                    this.$message({
                        message: "请填写中小河流治理项目抽查情况！",
                        type: "warning"
                    });
                    return;
                }
                this.$confirm("请确认所有信息填报完毕？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    let formObj = {
                        id: rowData.id,
                        state: "2"
                    };
                    request.post("/bis/insp/samrmp/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.getzxhlzlDataList();
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.getzxhlzlDataList();
            },
            // 下载模板
            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.getzxhlzlDataList();
            },
            toView(rowData) {
                this.rowData = rowData;
                this.currentResCode = this.rowData.code;
                this.currentObjectId = this.rowData.objId;
                this.currentObjectRgstrId = this.rowData.id;
                this.showSzyJsgl = true;
            },
            szyJsglCancelHandler() {
                this.showSzyJsgl = false;
            },
            // utTypeFormatter(row, column) {
            //     return row.type == 1 ? "钢铁企业" :
            //         row.type == 2 ? "高校" : "宾馆";
            // },
        }
        
        
    }
</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>