fj-dc-ui/.svn/pristine/07/07dc0ed62293db9a08c5aba8f81a0beb597d71de.svn-base

<template>

    <el-row>

        <el-col :span="3">
            <div>
                <provTreeList :rootCode="rootCode" :rootType="rootType" @provTreeSelectChange="provTreeSelectChangeHandler"
                              :style="{'max-height':dxdcAsideHeight+'px'}"
                >
                </provTreeList>
            </div>
        </el-col>

        <el-col :span="21">
            <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="水库编码" style="margin-left: 5px">-->
                        <!--<el-input v-model="formInline.rsCode" :placeholder="autoInput" clearable></el-input>-->
                    <!--</el-form-item>-->
                    <el-form-item label="水闸名称">
                        <el-input v-model="formInline.gateName" :placeholder="autoInput" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="水闸类型">
                        <el-select v-model="formInline.gateType" :placeholder="autoSort" clearable >
                            <el-option v-for="item in options"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="工程规模">
                        <el-select v-model="formInline.engScal" :placeholder="autoSort" clearable >
                            <el-option v-for="item in engScalOptions"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="行政区划">
                        <el-input v-model="formInline.adCode" :placeholder="autoInput" clearable ></el-input>
                    </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-form-item style="margin: 0 5px">
                        <el-button type="info" plain @click="empty" icon="el-icon-refresh">重置</el-button>
                    </el-form-item>
                    <el-form-item style="margin: 0">
                        <el-button type="success" @click="exportExcel" icon="el-icon-sort-up">导出Excel</el-button>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="showDialog(1,null)" icon="el-icon-edit">批量编辑</el-button>
                    </el-form-item>
                    <!-- <el-form-item style="margin: 0 5px" v-if="ownPriv('manage')">
                        <el-button type="info" plain @click="batchImport" icon="el-icon-menu">导入</el-button>
                    </el-form-item> -->
                    <!-- 水闸基础信息批量导入弹窗 -->
                    <shui-zha-cha-xun-pl v-if="showShuiZhaChaXunPl" @closePlDialog="closePlDialog"
                        :gateNameStr="formInline.gateName"
                        :gateTypeStr="formInline.gateType"
                        :pageStr="page.pageNum"
                        :adCode="formInline.adCode"
                    ></shui-zha-cha-xun-pl>

                </el-form>
            </el-card>
            <el-card class="ducha_table"  :body-style="{ 'padding': '0 5px' }">
                <el-main style="padding: 5px!important;">
                    <el-table :data="tableList" style="width: 100%" :row-class-name="tableRowClassName"
                              ref="singleTable"
                              v-loading="tableLoading"
                              border
                              @selection-change="handleSelectionChange"
                              :height="dxdcMainHeight+'px'"
                              :render-header="renderHeader"
                    >
                        <el-table-column
                          type="selection"
                          min-width="55">
                        </el-table-column>
                        <el-table-column type="index" min-width="80" :index="getIndex" label="序号" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="objCode" label="水闸编码" min-width="130" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="gateName" label="水闸名称" min-width="130" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="gateType" label="水闸类型" min-min-width="80" :formatter="formatRsType" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="gateAdmName" label="管理单位名称" min-width="180" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="adCode" label="行政区划" min-width="130" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="provincial" label="是否省属" width="100" >
                          <template slot-scope="scope">
                            <span v-if="scope.row.provincial=='1'">是</span>
                            <span v-if="scope.row.provincial=='2'">否</span>
                          </template>
                        </el-table-column>
                        <el-table-column prop="engScal"
                                         label="工程规模"
                                         min-width="130"
                                         :formatter="formatEngScal"
                                         show-overflow-tooltip
                        >
                        </el-table-column>
                        <el-table-column label="操作" align="center" fixed="right" width="100">
                          <template slot-scope="scope">
                            <el-button type="primary" icon="el-icon-edit" @click="showDialog(0,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-dialog
          class="outerDialog custom_dialog"
          title="编辑是否省属"
          width="400px"
          :visible.sync="isVisible">
          <div style="width: 100%;height:100%;">
            <el-form ref="addForm" label-width="80px">
              <el-form-item label="是否省属" required>
                <el-select v-model="provincial" clearable placeholder="请选择" style="width: 100%;">
                  <el-option label="是" value="1"></el-option>
                  <el-option label="否" value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item style="text-align: center">
                <el-button  @click="isVisible=false" style="margin-bottom: 30px;">取消</el-button>
                <el-button type="primary" @click="submit" style="margin-bottom: 30px;">确定</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-dialog>

    </el-row>

</template>

<style>

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

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

    .ducha_form .el-input {
        width: 150px !important;
    }

    .el-footer-style {
        text-align: center;
        width:100%;
    }

</style>

<script>
    // 水闸类型 1:分(泄)洪闸;2:节制闸;3:排(退)水闸;4:引(进)水闸;5:挡潮闸;6:船闸;9:其他
    const options = [{
        value: '1',
        label: '分(泄)洪闸'
    }, {
        value: '2',
        label: '节制闸'
    },{
        value: '3',
        label: '排(退)水闸'
    },{
        value: '4',
        label: '引(进)水闸'
    },{
        value: '5',
        label: '挡潮闸'
    },{
        value: '6',
        label: '船闸'
    },{
        value: '9',
        label: '其他'
    }];
    // 工程规模
    const engScalLabels = ['大型','中型','小型'];
    const engScalValues = ['1','2','3'];
    let engScalOptions = [engScalLabels.length];
    for(let i=0;i<engScalLabels.length;i++){
        engScalOptions[i] = {'label':engScalLabels[i],'value':engScalValues[i]};
    }

    import provTreeList from '../../../widgets/provTreeList';
    import request from '../../../utils/gw_ajax_request.js';
    import shuiZhaChaXunPl from './shuiZhaChaXun_piliang';
    import { exportModel } from "@util/gw_exportModel";

    export default {
        name: "shuiZhaChaXun",
        components:{
            provTreeList: provTreeList,
            shuiZhaChaXunPl: shuiZhaChaXunPl
        },
        data() {
            return {
                tableLoading:true,
                tableList: [],
                page:{
                    pageNum: 1,
                    pageSize: 20,
                },
                showResultCount: 0,
                options: options,
                engScalOptions: engScalOptions,
                autoSort: '请选择',
                autoInput: '请输入',
                formInline: {
                    gateName: '',
                    gateType: '',
                    adCode: '',
                    engScal: '',
                },
                rootCode:'000000',
                rootType:'2',
                formStyle: {
                    width: '100%',
                    height: '70px',

                },
                dxdcMainHeight: window.innerHeight - 197,
                dxdcAsideHeight: window.innerHeight - 90,
                showShuiZhaChaXunPl: false,
                multipleSelection:[],
                isVisible:false,
                provincial:"",
                isMul:false,
                currentRow:{}
            }
        },
        mounted() {
            this.getShuiKuList()
        },
        activated(){
            this.getShuiKuList()
        },
        methods: {
            submit(){
                if(!this.provincial){
                    this.$message.warning("请选择是否省属");
                    return false;
                }
                if(this.isMul){
                    var list = [];
                    this.multipleSelection.forEach((item,index)=>{
                        list.push(item.objCode);
                    })
                    request.put('/att/waga/base/provincial',{provincial: this.provincial,objCodes:list}).then((res)=>{
                        if(res.success){
                            this.multipleSelection = [];
                            this.isVisible = false;
                            this.getShuiKuList();
                        }
                    })
                }else{
                    var params = {
                        objCodes:[this.currentRow.objCode],
                        provincial:this.provincial
                    }
                    request.put('/att/waga/base/provincial',params).then((res)=>{
                        if(res.success){
                            this.isVisible = false;
                            this.getShuiKuList();
                        }
                    })
                }
            },
            showDialog(t,row){
                if(t==1){
                    this.provincial = "";
                    this.isMul = true;
                    if(!this.multipleSelection || this.multipleSelection.length==0){
                        this.$message.warning("请选择数据");
                        return false;
                    }
                }else{
                    this.currentRow = row;
                    this.isMul = false;
                }
                this.isVisible = true;
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            empty(){
              this.formInline = {};
            },
            formatRsType(row,column){
                let gateType = row.gateType;
                let _gateType = '';
                switch (gateType) {
                    case '1' : _gateType = '分(泄)洪闸';break;
                    case '2' : _gateType = '节制闸';break;
                    case '3' : _gateType = '排(退)水闸';break;
                    case '4' : _gateType = '引(进)水闸';break;
                    case '5' : _gateType = '挡潮闸';break;
                    case '6' : _gateType = '船闸';break;
                    case '9' : _gateType = '其他';break;
                }
                return _gateType;
            },
            formatEngScal(row,column){
                let engScal = row.engScal;
                let _engScal = '';
                switch (engScal) {
                    case '1' : _engScal = '大型';break;
                    case '2' : _engScal = '中型';break;
                    case '3' : _engScal = '小型';break;
                }
                return _engScal;
            },
            provTreeSelectChangeHandler: function(params) {
                this.formInline.adCode = params.likeCode;
                this.getShuiKuList();
            },
            getIndex(index){
                return (index + this.page.pageSize * (this.page.pageNum - 1)) + 1
            },
            onSearch(){
                this.getShuiKuList();
            },
            pageIndexChange(val){
                this.page.pageNum = val;
                this.getShuiKuList();
            },
            handleSizeChange(val){
              this.page.pageSize = val;
              this.getShuiKuList();
            },
            renderHeader(){

            },
            // 隔行换色
            tableRowClassName({row, rowIndex}) {
                // if (rowIndex%2 === 0) {
                //     return 'warning-row';
                // }else {
                //     return 'success-row';
                // }
                return '';
            },
            getShuiKuList(){
                let params = {
                    'pageSize': this.page.pageSize,
                    'pageNum': this.page.pageNum,
                    'gateName': this.formInline.gateName,
                    'gateType': this.formInline.gateType,
                    'adCode': this.formInline.adCode,
                    'engScal': this.formInline.engScal,
                };
                var _self = this;
                request.post('/att/waga/base/getWagaBasePageList',params).then((res)=>{
                    let data = res.data
                    this.tableList = data.list
                    this.showResultCount = data.total
                    this.tableLoading = false
                    this.$nextTick(()=>{
                        _self.$refs.singleTable.clearSelection();
                    })
                })
            },
            batchImport(){
                this.showShuiZhaChaXunPl = true
            },
            closePlDialog(){
                this.showShuiZhaChaXunPl = false
            },
            getStrParams(obj) {
                let str = '?';
                for(let key of Object.keys(obj)) {
                    str += `${key}=${obj[key]}&`;
                }
                str = str.slice(0, str.length - 1);
                return str;
            },
            // 导出Excel
            async exportExcel(){
                this.tableLoading = true;
                let type = "get";
                let url = `/pdcApi/dc/export/attWagaBase${this.getStrParams(Object.assign(this.formInline, this.page))}`;
                let downloadName =  "Excel.xls";
                await exportModel(type,url,downloadName).catch((err) => {
                    this.$message.error("导出失败");
                    this.tableLoading = false;
                })
                this.$message.success("导出成功");
                this.tableLoading = false;
            }
        },
        computed: {

        },
        watch: {

        },
    }
</script>