fj-dc-ui/.svn/pristine/8e/8e0cff49f173cddd02f5c0c73c5ce69a234b99a9.svn-base

<template>
    <div>
    <el-select 
    v-model="value" 
    placeholder="请选择" 
    filterable
    autoComplete = "off"
    :filter-method="filterMethod"
    @change='chooseChange'
    :loading = 'loading'
    loading-text = "正在查询，请稍候"
    >
    <el-option
      v-for="item in searchDataList"
      :key="item.guid"
      :value="item.cwsCode"
      :label="item.label"
      >
      <span style="float: left;color:rgba(0,0,0,0.5);font-size:small" v-if="item.value == '无相应工程'">*如无相应工程</span>
      <span style="float: right; color: #8492a6; font-size: 13px" v-if="item.value == '无相应工程'">
         <el-button type="text" size='mini' plain @click="insertCun">添加饮水工程</el-button>
      </span>

      <span style="float: left">{{ item.cwsName }}</span>
      <!-- <span style="float: right; color: #8492a6; font-size: 13px">{{ item.townName }}</span> -->
    </el-option>
  </el-select>
  
        <el-dialog
        title="添加饮水工程"
        :visible.sync="dialogVisible"
        width="30%"
        :modal="false"
        >
        <el-form :model="newGongChengForm" label-width="120px">
        <p style="margin-top:10px;margin-bottom: 10px"><i class="el-icon-caret-right"></i><span style="width:120px;padding-left: 10px">饮水工程基本信息</span><span class="hrs"></span></p>
         <el-form-item label="工程名称">
          <el-input v-model="newGongChengForm.cwsName"  style="width:70%;"></el-input>
         </el-form-item>
          <el-form-item label="所属行政区划">
           <inputWith v-model="newGongChengForm.addvcd" autocomplete="off" :rootCode = "rootCode"  @provTreeSelectChange="provTreeSelectChangeHandler" style="width:70%;"></inputWith>
         </el-form-item>
         <el-form-item label="所在地">
            <el-input v-model="newGongChengForm.cwsLoc"  style="width:70%;"></el-input>
         </el-form-item>
         <el-form-item label="建成时间">
            <el-input v-model="newGongChengForm.effDate"  style="width:70%;"></el-input>
         </el-form-item>
         <el-form-item label="设计供水规模">
            <el-input v-model="newGongChengForm.desWasuScal"  style="width:70%;"><template slot="append">m³/d</template></el-input>
         </el-form-item>
         <el-form-item label="覆盖人口">
            <el-input v-model="newGongChengForm.desWasuPop"  style="width:70%;"><template slot="append">万人</template></el-input>
         </el-form-item>
         <el-form-item label="操作">
           <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitInsertGongCheng">确 定</el-button>
        </el-form-item>
        
        </el-form>
        </el-dialog>
  </div>
</template>
<script>
import { queryCwsListByObjId ,submitInsertGongCheng} from "../api/duChaTianBao.js";
import inuptWith from "./inuptWith.vue"
    export default {
        props: ['rootCode','initalValue'],
        components:{
            "inputWith":inuptWith,
        },
        data() {
            return {
                dataList: [],
                value: '',
                loading:false,
                dialogVisible:false,
                searchDataList:[],
                timeout:  null,
               
                newGongChengForm:{
                    "cwsLoc": "",
                    
                    "addvcd": "",
                    "effDate": "",
                    
                    "cwsName": "",
                    "desWasuScal":"",
                    "desWasuPop":"",
                    
                },
            }
        },
        computed:{
           
        },
         mounted(){
           this.querySearchAsync();
        },
        watch: {
            rootCode:function(){
                this.querySearchAsync();
            },
             initalValue:function(){
                this.value = this.initalValue;
                 console.log(this.value);
           this.querySearchAsync();
            }
        },
        methods:{
            provTreeSelectChangeHandler:function(params){
                this.newGongChengForm.addvcd = params.code;
            },
            submitInsertGongCheng:function(){
                submitInsertGongCheng(this.newGongChengForm.cwsLoc,this.rootCode,this.newGongChengForm.effDate,this.newGongChengForm.cwsName,this.newGongChengForm.desWasuScal,this.newGongChengForm.desWasuPop).then(
                    (res) => {
                        console.log(res);
                        this.querySearchAsync();
                        this.newGongChengForm={
                            "cwsLoc": "",
                            
                            "addvcd": "",
                            "effDate": "",
                            
                            "cwsName": "",
                            "desWasuScal":"",
                            "desWasuPop":"",
                            
                        };
                    }
                );
            },
            insertCun:function(){
                this.dialogVisible = true;
            },
            chooseChange:function(p){
               
               this.dataList.forEach((element) => {
                   if(element.cwsCode == p){
                       console.log(element);
                       this.$emit("provTreeSelectChange", {
                           'addvcd':element.addvcd,
                            'compDate':element.compDate,
                            'cwsCode':element.cwsCode,
                            'cwsLat':element.cwsLat,
                            'cwsLoc':element.cwsLoc,
                            'cwsLong':element.cwsLong,
                            'cwsName':element.cwsName,
                            'desWasuPop':element.desWasuPop,
                            'desWasuScal':element.desWasuScal,
                            'effDate':element.effDate,
                            'engStat':element.engStat,
                            'engType':element.engType,
                            'exprDate':element.exprDate,
                            'guid':element.guid,
                            'note':element.note,
                            'startDate':element.startDate,
                            'wasuRang':element.wasuRang,
                            'wasuType':element.wasuType,
                            
                       });
                   }
               });
               
           },
            filterMethod:function(text){
                this.loading = true;
                console.log(text);
                this.value = text;
                let filterResult = [{
                         'value':'无相应工程',
                         
                         'label':'添加'
                     }];
                queryCwsListByObjId(this.rootCode,text).then((res) =>{
                    this.loading = false;
                    console.log(res);
                    var children = [];
                    let lists = [];
                    res.data.list.forEach((element,index)=>{ 
                        filterResult.push({
                            'addvcd':element.addvcd,
                            'compDate':element.compDate,
                            'cwsCode':element.cwsCode,
                            'cwsLat':element.cwsLat,
                            'cwsLoc':element.cwsLoc,
                            'cwsLong':element.cwsLong,
                            'cwsName':element.cwsName,
                            'desWasuPop':element.desWasuPop,
                            'desWasuScal':element.desWasuScal,
                            'effDate':element.effDate,
                            'engStat':element.engStat,
                            'engType':element.engType,
                            'exprDate':element.exprDate,
                            'guid':element.guid,
                            'note':element.note,
                            'startDate':element.startDate,
                            'wasuRang':element.wasuRang,
                            'wasuType':element.wasuType,
                            'label':element.cwsName,
                            'code':element.cwsCode
                        });
                    });
                   
                },(err) =>{});
                this.searchDataList =  filterResult;
            },
            querySearchAsync() {
               
                this.loading = true;
                
                // cb(results);
                 queryCwsListByObjId(this.rootCode).then((res) =>{
                     this.loading = false;
                    console.log(res);
                    var children = [];
                    let lists = [];
                    res.data.list.forEach((element,index)=>{ 
                        lists.push({
                            'addvcd':element.addvcd,
                            'compDate':element.compDate,
                            'cwsCode':element.cwsCode,
                            'cwsLat':element.cwsLat,
                            'cwsLoc':element.cwsLoc,
                            'cwsLong':element.cwsLong,
                            'cwsName':element.cwsName,
                            'desWasuPop':element.desWasuPop,
                            'desWasuScal':element.desWasuScal,
                            'effDate':element.effDate,
                            'engStat':element.engStat,
                            'engType':element.engType,
                            'exprDate':element.exprDate,
                            'guid':element.guid,
                            'note':element.note,
                            'startDate':element.startDate,
                            'wasuRang':element.wasuRang,
                            'wasuType':element.wasuType,
                            'label':element.cwsName,
                            'code':element.cwsCode
                        });
                    });
                    this.dataList = lists;
                    this.searchDataList = lists;
                    
                },(err) =>{});
            },
           
        },
       
    }
</script>
<style>
</style>