fj-dc-ui/.svn/pristine/c3/c323159f5365563da93e9ee8ff52b46c81c2df60.svn-base

<template>
    <!-- 弹出窗 -->
    <el-dialog title="添加督查对象" width="60%" @close="closeDuChaDuiXiangDialog" :visible.sync="dialogFormVisible"
               :close-on-click-modal="false"
               :modal-append-to-body="true"
               :append-to-body="true">
        <el-container>
            <!--<el-aside width="200px" style="border:1px solid #d5d5ff">-->
            <!--<p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">-->
            <!--<i class="el-icon-share"></i>所属机构-->
            <!--</p>-->
            <!--<provTreeListQy-->
            <!--ref="provTreeListQyRef"-->
            <!--v-show="showLeftTree"-->
            <!--:ddczId='dczId'-->
            <!--rootCode="000000"-->
            <!--rootType="1"-->
            <!--style="max-height:485px;"-->
            <!--@treeDataEmit="treeDataEmit"-->
            <!--@provTreeSelectChange="provTreeSelectChangeHandler_qy">-->
            <!---->
            <!--</provTreeListQy>-->
            <!--<provTreeList-->
            <!--v-show="!showLeftTree"-->
            <!--rootCode="000000"-->
            <!--rootType="1"-->
            <!--style="max-height:485px;"-->
            <!--@provTreeSelectChange="provTreeSelectChangeHandler"-->
            <!--&gt;</provTreeList>-->
            <!--</el-aside>-->
            <el-main style="border:1px solid #d5d5ff;margin-left:5px;padding:0px;">
                <p style="font-weight:bolder;background-color:#d5d5ff;padding:3px;">督查对象</p>
                <el-form style="padding:10px">
                    <div>
                        <el-form size="mini" :inline="true" class="demo-form-inline">
                            <el-form-item label="供水工程名称">
                                <el-input
                                        style="width:140px;"
                                        v-model="searchNameOfRsName"
                                        clearable
                                        placeholder="请输入供水工程名称"
                                ></el-input>
                            </el-form-item>
                          <el-form-item label="工程类型" prop="prjType">
                            <el-select v-model="prjType" clearable placeholder="请选择" autocomplete="off">
                              <el-option label="团部" value="1"></el-option>
                              <el-option label="跨团" value="2"></el-option>
                              <el-option label="单连" value="3"></el-option>
                              <el-option label="连连" value="4"></el-option>
                              <el-option label="城乡一体化" value="5"></el-option>
                              <el-option label="地方供水" value="6"></el-option>
                              <el-option label="地方向兵团供水" value="7"></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="工程性质" prop="prjNtr">
                            <el-select v-model="prjNtr" clearable placeholder="请选择" autocomplete="off">
                              <el-option label="规模化供水工程" value="1"></el-option>
                              <el-option label="小型供水工程" value="2"></el-option>
                              <el-option label="分散供水工程" value="3"></el-option>
                            </el-select>
                          </el-form-item>
                          <br/>
                          <el-form-item label="工程规模" prop="waterSupply">
                            <el-select v-model="waterSupply" clearable placeholder="请选择" autocomplete="off">
                              <el-option label="城乡一体化工程" value="1"></el-option>
                              <el-option label="万人供水工程" value="2"></el-option>
                              <el-option label="千人供水工程" value="3"></el-option>
                              <el-option label="千人以下供水工程" value="4"></el-option>
                              <el-option label="水井" value="5"></el-option>
                              <el-option label="其他" value="6"></el-option>
                            </el-select>
                          </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="refreshCurrentShow">查询</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="toAddNewRsvr">添加新供水工程</el-button>
                            </el-form-item>
                        </el-form>
                        <el-table
                                border
                                v-loading="loading"
                                :data="currentShowList"
                                tooltip-effect="dark"
                                style="width: 100%"
                                @selection-change="handleSelectionChange"
                        >
                            <el-table-column align="center" type="selection" width="60"></el-table-column>
                            <el-table-column align="center" prop="index" label="序号" min-width="40"></el-table-column>
                            <el-table-column
                                    align="center"
                                    show-overflow-tooltip
                                    prop="nm"
                                    label="供水工程名称"
                                    min-width="100"
                            ></el-table-column>
                            <el-table-column
                                    align="center"
                                    show-overflow-tooltip
                                    prop="prjType"
                                    label="工程类型"
                                    :formatter="prjTypeFormatter"
                                    min-width="80"
                            ></el-table-column>
                            <el-table-column
                              align="center"
                              show-overflow-tooltip
                              prop="prjNtr"
                              label="工程性质"
                              :formatter="prjNtrFormatter"
                              min-width="80"
                            ></el-table-column>
                            <el-table-column
                              align="center"
                              show-overflow-tooltip
                              prop="waterSupply"
                              label="工程规模"
                              :formatter="waterSupplyFormatter"
                              min-width="80"
                            ></el-table-column>
                        </el-table>
                        <div
                                class="block"
                                style="display:flex;flex-direction:row;justify-content:center;align-items:center;padding-top: 5px;background-color: #fff;"
                        >
                            <el-pagination
                                    small
                                    @current-change="handleCurrentChange"
                                    :pager-count="5"
                                    :current-page.sync="pageIndex"
                                    :page-size="pageSize"
                                    layout="total, prev, pager, next"
                                    :total="total"
                            ></el-pagination>
                        </div>
                    </div>
                </el-form>
            </el-main>
        </el-container>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeDuChaDuiXiangDialog">取 消</el-button>
            <el-button type="primary" @click="saveChange">确 定</el-button>
        </div>

        <el-dialog title="添加新供水工程" :visible.sync="addRsvrVisible" append-to-body width="40%" >
            <el-form label-width="200px" :model="formObj" :rules="rules" ref="formObj">
                <el-form-item label="工程名称" prop="nm">
                    <el-input v-model="formObj.nm" clearable autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="工程类型" prop="prjType">
                    <el-select v-model="formObj.prjType" clearable placeholder="请选择" autocomplete="off" style="width:60%;">
                      <el-option label="团部" value="1"></el-option>
                      <el-option label="跨团" value="2"></el-option>
                      <el-option label="单连" value="3"></el-option>
                      <el-option label="连连" value="4"></el-option>
                      <el-option label="城乡一体化" value="5"></el-option>
                      <el-option label="地方供水" value="6"></el-option>
                      <el-option label="地方向兵团供水" value="7"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="工程性质" prop="prjNtr">
                  <el-select v-model="formObj.prjNtr" clearable placeholder="请选择" autocomplete="off" style="width:60%;">
                    <el-option label="规模化供水工程" value="1"></el-option>
                    <el-option label="小型供水工程" value="2"></el-option>
                    <el-option label="分散供水工程" value="3"></el-option>
                  </el-select>
                </el-form-item>
              <el-form-item label="工程规模" prop="waterSupply">
                <el-select v-model="formObj.waterSupply" clearable placeholder="请选择" autocomplete="off" style="width:60%;">
                  <el-option label="城乡一体化工程" value="1"></el-option>
                  <el-option label="万人供水工程" value="2"></el-option>
                  <el-option label="千人供水工程" value="3"></el-option>
                  <el-option label="千人以下供水工程" value="4"></el-option>
                  <el-option label="水井" value="5"></el-option>
                  <el-option label="其他" value="6"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="行政区划" style="position: relative">
                <el-input
                  v-model="formObj.adName"
                  autocomplete="off"
                  @focus="showMenuTree = true"
                  auto-complete="off"
                  readonly
                  style="width:60%;"
                ></el-input>
                <provTreeList
                  style="width:300px;"
                  v-if="showMenuTree"
                  :rootCode="rootCode"
                  :rootType="rootType"
                  @provTreeSelectChange="provTreeSelectChangeHandler"
                ></provTreeList>
              </el-form-item>
              <el-form-item label="覆盖人口数" prop="rsName">
                <el-input v-model="formObj.persSize" clearable autocomplete="off" style="width:60%;"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addRsvrVisible = false">取 消</el-button>
                <el-button type="primary" @click="addNewRsvr('formObj')">确 定</el-button>
            </div>
        </el-dialog>
    </el-dialog>
</template>
<script>
    import request from '@util/gw_ajax_request'
    import provTreeList from "@widget/provTreeList.vue";
    // import provTreeListQy from "../../widgets/provTreeList_quyu.vue"
    import {
        getObjListNotInspGroupId,
        addDcAndObjRel
    } from "@api/duChaDuiXiang_xsk_API.js";

    export default {
        components: {
            provTreeList: provTreeList,
            provTreeListQy: resolve => {
                require(['@widget/provTreeList_quyu.vue'], resolve)
            },
        },
        props: ["dczId", "dczName", "plnaId", "objType", "rowData","villageAdCode"],
        data() {
            return {
                showMenuTree:false,
                rootCode: "000000",
                rootType: "2",
                addOnce: false,
                objTypeName: '小水库',
                xsk: true,
                ncys: false,
                shgc: false,
                dxs: false,
                searchNameOfRsName: "",
                prjType:"",
                prjNtr:"",
                waterSupply:"",
                searchNameOfAdName: "",
                searchNameOfwtdstNm: "",
                addLevel: "",
                rsAdmDep: "",
                engScal: "",
                wtdstState: "",
                engLevel: "",
                wtdstType: "",
                stnm: '',
                pageIndex: 1,
                pageSize: 10,
                total: 0,
                currentShowList: [],
                dialogFormVisible: true,
                formLabelWidth: "120",
                addArr: "",
                addName: "",
                addLttd: "",
                addLgtd: "",
                multipleSelection: [],
                searchProvTreeListCode: "",
                qyDataList: [],
                loading: false,
                showLeftTree: true,
                addRsvrVisible: false,
                formObj: {
                    nm:"",
                    adName:"",
                    adCode:"",
                    loc:"",
                    prjType:"",
                    prjNtr:"",
                    waterSupply:"",
                    persSize:""
                },
                areasList: [],
                props: {
                    value: 'id',
                    label: 'label',
                    children: 'cities'
                },
                rules: {
                    nm: [
                        {required: true, message: '请输入工程名称', trigger: 'blur'},
                    ],
                    prjType: [
                        {required: true, message: '请输入工程类型', trigger: 'blur'}
                    ],
                    prjNtr: [
                        {required: true, message: '请选择工程性质', trigger: 'blur'}
                    ],
                    waterSupply: [
                        {required: true, message: '请选择工程规模', trigger: 'blur'}
                    ]
                },
                provList: [],
                cityList: [],
                countryList: [],
                provName: '',
                cityName: '',
                countryName: '',
                provNames: '',
                cityNames: '',
                countryNames: '',
                curSelectItem: 0
            }
        },
        watch: {
            dczId: function (n, o) {
                this.searchProvTreeListCode = "";
            },
            qyDataList(n, o) {
                if (this.qyDataList.length == 0) {
                    this.showLeftTree = false;
                } else {
                    this.showLeftTree = true;
                }
                console.log("区域树" + n.length + this.showLeftTree + this.objType);
                if (this.objType == '1') {
                    this.getTableData_sk();
                    this.getAreaList()
                } else if (this.objType == '5') {
                    this.getTableData_dxs();
                }
            }
        },
        mounted() {
            this.getTableData_sk();
        },
        computed: {
            userId: function () {
                return localStorage.getItem("userid") ? localStorage.getItem("userid") : '1098101939614724096'
            },
        },
        methods: {
            provTreeSelectChangeHandler: function(params) {
                this.$set(this.formObj,'adName',params.name);
                this.$set(this.formObj,'adCode',params.code);
            },
            changeCurrentObjSelectName(item) {
                this.objType = item;
            },
            selectChange(val) {
                console.log(val);
                this.objType = val;
            },
            prjTypeFormatter: function (row, column) {
                return  row.prjType == 1 ? "团部" :
                        row.prjType == 2 ? "跨团" :
                        row.prjType == 3 ? "单连" :
                        row.prjType == 4 ? "连连" :
                        row.prjType == 5 ? "城乡一体化" :
                        row.prjType == 6 ? "地方供水" :
                        row.prjType == 7 ? "地方向兵团供水" : ""
            },
            prjNtrFormatter: function (row, column) {
                return  row.prjNtr == 1 ? "规模化供水工程" :
                        row.prjNtr == 2 ? "小型供水工程" :
                        row.prjNtr == 3 ? "分散供水工程" : ""
            },
            waterSupplyFormatter: function (row, column) {
                return  row.waterSupply == 1 ? "城乡一体化工程" :
                        row.waterSupply == 2 ? "万人供水工程" :
                        row.waterSupply == 3 ? "千人供水工程" :
                        row.waterSupply == 4 ? "千人以下供水工程" :
                        row.waterSupply == 5 ? "水井" :
                        row.waterSupply == 6 ? "其他" : ""
            },
            wtdstStateFormatter: function (row, column) {
                return row.wtdstState == 1 ? "已修复" : "未修复";
            },
            rsAdmDepFormatter: function (row, column) {
                return row.rsAdmDep == 1
                    ? "水利部门"
                    : row.rsAdmDep == 2
                        ? "电力部门"
                        : row.rsAdmDep == 3
                            ? "农业部门"
                            : row.rsAdmDep == 4
                                ? "林业部门"
                                : row.rsAdmDep == 5
                                    ? "城建部门"
                                    : row.rsAdmDep == 6
                                        ? "航运部门"
                                        : row.rsAdmDep == 7
                                            ? "环保部门"
                                            : "其他部门";
            },
            adGradFormatter: function (row, column) {
                return row.adGrad == 1
                    ? "国家级"
                    : row.adGrad == 2
                        ? "省级"
                        : row.adGrad == 3
                            ? "地市级"
                            : row.adGrad == 4
                                ? "县级"
                                : row.adGrad == 5
                                    ? "乡级"
                                    : row.adGrad == 6
                                        ? "村"
                                        : "村组";
            },
            adNameFormatter: function (row, column) {
                return row.adName;
            },
            adFullNameFormatter: function (row, column) {
                return row.adFullName;
            },
            adCodeFormatter: function (row, column) {
                return row.adCode;
            },
            saveChange() {
                this.addObjectChange();
            },
            treeDataEmit(item) {
                this.qyDataList = item;
                if (this.qyDataList.length == 0) {
                    this.showLeftTree = false;
                } else {
                    this.showLeftTree = true;
                }
            },
            getTableData_sk() {

                var _self = this;
                // if(_self.qyDataList.length == 0){
                // 	_self.showLeftTree = false;
                // }else{
                // 	_self.showLeftTree = true;
                // }
                _self.loading = true;
                // var str = '';
                // for(var i=0;i<_self.qyDataList.length;i++){
                // 	str+= _self.qyDataList[i].adCode+',';
                // }
                // str = str.substring(0,str.length-1);
                // var obj = {
                // 		"adcd": str,
                // 		"rsName": _self.searchNameOfRsName,
                // 		"engScal": _self.engScal,
                // 		"id": _self.userId,
                // 		"groupId":_self.dczId,
                // 		"pageNum":_self.pageIndex,
                // 		"pageSize":_self.pageSize
                // 	}
                let obj = {
                    "regmId": _self.villageAdCode,
                    "nm": _self.searchNameOfRsName,
                    "prjType": _self.prjType,
                    "prjNtr":_self.prjNtr,
                    "waterSupply":_self.waterSupply,
                    "pageNum": _self.pageIndex,
                    "pageSize": _self.pageSize,
                    "rgstrId": _self.rowData.rgstrId
                }
                request.post('/bis/insp/xjvill/run/pageNotDC', obj).then((res) => {
                    _self.loading = false;
                    _self.currentShowList = res.data.list;
                    _self.currentShowList.forEach((element, index) => {
                        element["index"] = _self.pageSize * (_self.pageIndex - 1) + index + 1;
                    });
                    _self.total = res.data.total;
                })
            },
            getTableData: function (callBackFunction = null) {
                var _self = this;
                if (!this.dczId) {
                    // this.dczId = 'jwW2Wihf5E9X3UC9t45fmSHyffUs2rzI';
                }
                if (_self.objType == '1' || _self.objType == "5") {
                    return;
                }
                let str = '';
                for (var i = 0; i < _self.qyDataList.length; i++) {
                    str += _self.qyDataList[i].adCode + ',';
                }
                str = str.substring(0, str.length - 1);
                getObjListNotInspGroupId(
                    this.dczId,
                    this.objType,
                    this.pageSize,
                    this.pageIndex,
                    this.searchNameOfRsName, //水库名称
                    this.searchNameOfAdName, //农村饮水行政区划名称
                    this.searchNameOfwtdstNm, //水毁工程名称
                    this.engScal, //水库-工程规模
                    this.rsAdmDep, //水库-归口管理部门
                    this.wtdstType, //水毁-工程类别
                    this.wtdstState, //水毁-修复状态
                    this.searchProvTreeListCode == '' ? str : this.searchProvTreeListCode,
                ).then(
                    res => {
                        _self.currentShowList = [];
                        res.data.list.forEach((element, index) => {
                            element["index"] = _self.pageSize * (_self.pageIndex - 1) + index + 1;
                            _self.currentShowList.push(element);
                        });
                        console.log(_self.currentShowList);
                        _self.total = res.data.total;
                        if (callBackFunction && typeof (callBackFunction) == 'function') {
                            callBackFunction();
                        }
                    },
                    err => {
                        console.log("查询错误");
                        if (callBackFunction && typeof (callBackFunction) == 'function') {
                            callBackFunction();
                        }
                    }
                );
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.refreshCurrentShow();
            },
            refreshCurrentShow: function () {
                this.getTableData_sk();

            },

            addObjectChange: function () {
                const length = this.multipleSelection.length;
                for (let i = 0; i < length; i++) {
                    this.addArr += this.multipleSelection[i].id + ";";
                }
                this.addArr = this.addArr.substr(0, this.addArr.length - 1);
                try {
                    let obj = {
                        "regmId": this.villageAdCode,
                        "cwsIds": this.addArr,
                        "regstrId": this.rowData.rgstrId
                    }

                    request.post(`/bis/insp/xjvill/run/addBatch`,obj)
                        .then(res =>{
                            if(res.success){
                                this.dialogFormVisible = false;
                                this.$message.success("添加成功");
                                this.$emit("addSuccess");
                                _self.addArr = "";
                            }else{
                                this.$message.warning(res.message);
                            }
                        })
                } catch (e) {
                    alert("暂无数据");
                }
            },
            // provTreeSelectChangeHandler: function (params) {
            //     this.searchProvTreeListCode = params.code;
            //     if (this.objType == '1') {
            //         this.getTableData_sk1();
            //     } else if (this.objType == '2' || this.objType == '3') {
            //         this.getTableData();
            //     } else {
            //
            //     }
            // },
            provTreeSelectChangeHandler_qy(params) {
                this.searchProvTreeListCode = params.code;
                if (this.objType == '1') {
                    this.getTableData_sk1();
                } else if (this.objType == '5') {
                    this.getTableData_dxs1();
                } else if (this.objType == '2' || this.objType == '3') {
                    this.getTableData();
                }
            },
            toAddNewRsvr() {
                this.cityList = [];
                this.countryList = [];
                this.provList = [];
                this.provName = "";
                this.cityName = "";
                this.countryName = "";
                for (var obj in this.formObj) {
                    this.formObj[obj] = '';
                }
                this.addRsvrVisible = true;
                this.curSelectItem = null;
                this.getAreaList();
            },
            addNewRsvr(formName) {
                let obj = {
                    "adName": this.formObj.adName,
                    "adCode": this.formObj.adCode,
                    "nm":  this.formObj.nm,
                    "prjType": this.formObj.prjType,
                    "prjNtr": this.formObj.prjNtr,
                    "waterSupply": this.formObj.waterSupply,
                    "loc": this.formObj.loc,
                }

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        request.post('/att/xjcws/base', obj).then(res => {
                            if (res.success) {
                                this.$message.success('添加成功')
                                this.getTableData_sk();
                                this.addRsvrVisible = false
                            } else {
                                _this.$message.error(res.message)
                            }
                        }).catch(res => {
                            this.$message.error(res.message)
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            getAreaList(val) {
                let adCode = ''
                if (!val) {
                    adCode = '000000000000'
                } else {
                    adCode = val
                }
                request.get('/dc/ad/base/getAdData', {params: {'adCode': adCode}}).then(res => {
                    if (res.success) {
                        if (this.curSelectItem == 1) {
                            this.cityList = res.data
                        } else if (this.curSelectItem == 2) {
                            this.countryList = res.data
                        } else {
                            this.provList = res.data
                        }

                    }
                })
            },
            handleItemChange(val) {
                this.getAreaList(val)
            },
            provChange(val) {
                this.curSelectItem = 1
                this.cityName = ''
                this.countryName = ''
                this.formObj.admDiv = val
                this.provList.forEach(ele => {
                    if (ele.adCode == this.provName) {
                        this.provNames = ele.adName
                    }
                })
                this.formObj.location = this.provNames
                this.getAreaList(val)
            },
            cityChange(val) {
                this.curSelectItem = 2
                if (val && val != '') {
                    this.formObj.admDiv = val
                    this.countryName = ''
                    this.cityList.forEach(ele => {
                        if (ele.adCode == this.cityName) {
                            this.cityNames = ele.adName
                        }
                    })
                    this.formObj.location = this.provNames + this.cityNames
                    this.getAreaList(val)
                }
            },
            countryChange(val) {
                if (val && val != '') {
                    this.formObj.admDiv = val
                    this.countryList.forEach(ele => {
                        if (ele.adCode == this.countryName) {
                            this.countryNames = ele.adName
                        }
                    })
                    this.formObj.location = this.provNames + this.cityNames + this.countryNames
                }
            },


            closeDuChaDuiXiangDialog() {
                this.dialogFormVisible = false;
                this.$emit("closeDuChaDuiXiangDialog");
            }
        }
    };
</script>
<style>
</style>