address-client 4.0.1 → 4.0.3

package/src/filiale/macheng/AddAreaMsg.vue

@@ -1,635 +1,635 @@
-<template>
-  <div class="span">
-    <validator name='v'>
-      <div class="form-horizontal select-overspread container-fluid" style="overflow-y: auto">
-        <div class="row auto">
-          <div class="col-sm-12 bg-info text-center"  style="padding: 8px;font-size: 18px;font-weight: bold">
-            <span v-if="operation=='add'&&!f_specia">添加{{areatype}}</span>
-            <span v-if="operation=='modify'&&!f_special">修改【{{areamodel.f_residential_area}}】小区</span>
-            <span v-if="operation=='add'&&f_specia">添加{{areatype}}</span>
-            <span v-if="operation=='modify'&&f_special">修改【{{areamodel.f_residential_area}}】单位</span>
-          </div>
-          <!--基本小区(单位)信息-->
-          <div class="col-sm-6 form-group">
-            <label class="font_normal_body">小区编号</label>
-            <input type="text" class="input_search" style="width:60%" v-model="areamodel.f_area_id"
-                   @blur="areaidChange" placeholder="小区编号">
-          </div>
-
-          <div class="col-sm-6 form-group"
-               :class="[$v.f_pcd_id.required ? 'has-error' : 'has-success']">
-            <label class="font_normal_body">省&ensp;市&ensp;区</label>
-            <input type="text" class="input_search" class="input_search" style="width:60%" v-show="false" v-model="areamodel.f_pcd_id"
-                   v-validate:f_pcd_id='{required: true }'>
-            <v-select
-              :value.sync="areamodel.f_pcd_id" :value-single="true"
-              :options='pcdslist' placeholder='请选择'
-              close-on-select search="true" @change="pcdChange">
-            </v-select>
-          </div>
-          <div class="col-sm-6 form-group"
-               :class="[$v.f_street_id.required ? 'has-error' : 'has-success']">
-            <label class="font_normal_body">社区/村委</label>
-            <input type="text" style="width:60%" class="input_search" v-show="false" v-model="areamodel.f_street_id"
-                   v-validate:f_street_id='{required: true }'>
-            <v-select
-              :value.sync="areamodel.f_street_id" :value-single="true"
-              :options='streetslist' placeholder='请选择'
-              close-on-select search="true" @change="streetChange">
-            </v-select>
-          </div>
-          <div class="col-sm-6 form-group" :class="[$v.slice.required ? 'has-error' : 'has-success']">
-            <label class="font_normal_body">片&emsp;&emsp;区</label>
-            <input type="text" style="width:60%" class="input_search" v-show="false" v-model="$refs.slice.selectedItems"
-                   v-validate:slice='{required: true }'>
-            <v-select :value.sync="areamodel.slice_area" v-model="areamodel.slice_area"
-                      :options='sliceArea' placeholder='片区/管理站' filer-key="name"
-                      close-on-select v-ref:slice>
-            </v-select>
-          </div>
-          <!--小区(特殊)信息-->
-          <div v-if="!f_special"
-               class="col-sm-6 form-group"
-               :class="[$v.f_residential_area.required ? 'has-error' : 'has-success']">
-            <label class="font_normal_body">小区名称</label>
-            <input type="text" style="width:60%" class="input_search"  v-model="areamodel.f_residential_area"
-                   class="form-control" placeholder="小区名称"
-                   v-validate:f_residential_area='{required: true }'>
-          </div>
-          <div v-if="!f_special"
-               class="col-sm-12 form-group">
-            <label class="font_normal_body">小区地址</label>
-            <input type="text" style="width:80%" class="input_search"  v-model="areamodel.f_area_address"
-                   class="form-control" placeholder="小区地址">
-          </div>
-          <!--单位(特殊)信息-->
-          <div v-if="f_special"
-               class="col-sm-6 form-group"
-               :class="[$v.f_residential_area.required ? 'has-error' : 'has-success']">
-            <label class="font_normal_body">单位名称</label>
-            <input type="text" style="width:60%" class="input_search"  v-model="areamodel.f_residential_area"
-                   class="form-control" placeholder="单位名称"
-                   v-validate:f_residential_area='{required: true }'>
-          </div>
-          <div v-if="f_special"
-               class="col-sm-12 form-group">
-            <label class="font_normal_body">单位地址</label>
-            <input type="text" style="width:60%" class="input_search"  v-model="areamodel.f_area_address"
-                   class="form-control" placeholder="单位地址">
-          </div>
-          <div v-if="f_special"
-               class="col-sm-6 form-group"
-               :class="[$v.f_linkname.required ? 'has-error' : 'has-success']">
-            <label class="font_normal_body">联&ensp;系&ensp;人</label>
-            <input type="text" style="width:60%" class="input_search"  v-model="areamodel.f_linkname"
-                   class="form-control" placeholder="联系人"
-                   v-validate:f_linkname='{required: true }'>
-          </div>
-          <div v-if="f_special"
-               class="col-sm-6 form-group"
-               :class="[$v.f_linkphone.required ? 'has-error' : 'has-success']">
-            <label class="font_normal_body">联系电话</label>
-            <input type="text" style="width:60%" class="input_search"  v-model="areamodel.f_linkphone"
-                   class="form-control" placeholder="联系电话"
-                   v-validate:f_linkphone='{required: true }'>
-          </div>
-          <div class="col-sm-12 form-group">
-            <label  class="font_normal_body " style="">备&emsp;&emsp;注</label>
-            <textarea class="input_textarea" rows="3" style="margin-top:20px;width:80%;height: auto;" v-model="areamodel.f_comments"></textarea>
-          </div>
-          <div class="col-sm-12 form-group">
-            <br/>
-          </div>
-          <!--表具信息-->
-          <div v-if="!f_special" class="col-sm-12 bg-info text-center"  style="padding: 8px;font-size: 18px;font-weight: bold">
-            <span >默认表具信息</span>
-          </div>
-          <div v-if="!f_special" class="row">
-            <div class="col-sm-6 form-group">
-              <label class="font_normal_body">用户类型</label>
-              <input type="text" style="width:60%" class="input_search" v-show="false" v-model="areamodel.f_user_type">
-              <v-select
-                :value.sync="areamodel.f_user_type" :value-single="true"
-                :options='usertypes' placeholder='用户类型' @change="userTypeChange"
-                close-on-select >
-              </v-select>
-            </div>
-            <div class="col-sm-6 form-group">
-              <label class="font_normal_body">用气性质</label>
-              <input type="text" style="width:60%" class="input_search" v-show="false" v-model="areamodel.f_gasproperties">
-              <v-select
-                :value.sync="areamodel.f_gasproperties" :value-single="true"
-                :options='gasproperties' placeholder='用气性质'
-                close-on-select >
-              </v-select>
-            </div>
-            <div class="col-sm-6 form-group">
-              <label class="font_normal_body">气价类型</label>
-              <input type="text" style="width:60%" class="input_search" v-show="false" v-model="areamodel.f_price_type">
-              <v-select
-                :value.sync="areamodel.f_price_type" :value-single="true"
-                :options='f_price_types' placeholder='气价类型'
-                close-on-select >
-              </v-select>
-            </div>
-            <div class="col-sm-6 form-group">
-              <label class="font_normal_body">气价名称</label>
-              <input type="text" style="width:60%" class="input_search" v-show="false" v-model="areamodel.f_price_name">
-              <v-select
-                :value.sync="areamodel.f_price_name" :value-single="true"
-                :options='pricenames' placeholder='气价名称'
-                close-on-select >
-              </v-select>
-            </div>
-            <div class="col-sm-6 form-group">
-              <label class="font_normal_body">气表品牌</label>
-              <input type="text" style="width:60%" class="input_search" v-show="false" v-model="areamodel.f_meter_brand">
-              <v-select
-                :value.sync="areamodel.f_meter_brand" :value-single="true"
-                :options='meterbrands' placeholder='气表品牌'
-                close-on-select >
-              </v-select>
-            </div>
-            <div class="col-sm-6 form-group">
-              <label class="font_normal_body">气表型号</label>
-              <input type="text" style="width:60%" class="input_search" v-show="false" v-model="areamodel.f_meter_style">
-              <v-select
-                :value.sync="areamodel.f_meter_style" :value-single="true"
-                :options='meterstyle' placeholder='气表型号'
-                close-on-select >
-              </v-select>
-            </div>
-            <div class="col-sm-6 form-group" :class="[$v.f_meter_type.required ? 'has-error' : 'has-success']">
-              <label class="font_normal_body">气表类型</label>
-              <input type="text" style="width:60%" class="input_search" v-show="false"
-                     v-model="areamodel.f_meter_type">
-              <v-select :value.sync="areamodel.f_meter_type" :value-single="true"
-                        :options='metertypes' placeholder='请选择'
-                        close-on-select></v-select>
-            </div>
-            <div class="col-sm-6 form-group" v-if="isMachine">
-              <label class="font_normal_body">抄&ensp;表&ensp;册</label>
-              <input type="text" style="width:60%" class="input_search" v-show="false"
-                     v-model="areamodel.f_meter_book">
-              <v-select
-                :value.sync="areamodel.f_meter_book" :value-single="true"
-                :options='meterbooks' placeholder='抄表册'
-                close-on-select >
-              </v-select>
-            </div>
-            <div class="col-sm-6 form-group" v-if="!isMachine" :class="[$v.f_meter_book.required ? 'has-error' : 'has-success']">
-              <label class="font_normal_body">抄&ensp;表&ensp;册</label>
-              <input type="text" style="width:60%" class="input_search" v-show="false"
-                     v-model="areamodel.f_meter_book">
-              <v-select
-                :value.sync="areamodel.f_meter_book" :value-single="true"
-                :options='meterbooks' placeholder='抄表册'
-                close-on-select >
-              </v-select>
-            </div>
-            <div class="col-sm-6 form-group" :class="[$v.f_inputtor.required ? 'has-error' : 'has-success']">
-              <label class="font_normal_body">抄&ensp;表&ensp;员</label>
-              <input type="text" style="width:60%" class="input_search"
-                     v-show="false" v-model="areamodel.f_inputtor">
-              <v-select
-                :value.sync="areamodel.f_inputtor" :value-single="true"
-                :options='inputtores' placeholder='抄表员'
-                close-on-select >
-              </v-select>
-            </div>
-            <div class="col-sm-6 form-group" :class="[$v.f_adjustable_id.required ? 'has-error' : 'has-success']">
-              <label class="font_normal_body">调&ensp;压&ensp;箱</label>
-              <input type="text" style="width:60%" class="input_search" v-show="false"
-                     v-model="areamodel.f_adjustable_id">
-              <v-select
-                :value.sync="areamodel.f_adjustable_id" :value-single="true"
-                :options='adjustables' placeholder='调压箱'
-                close-on-select >
-              </v-select>
-            </div>
-            <div class="col-sm-6 form-group" :class="[$v.f_house_type.required ? 'has-error' : 'has-success']">
-              <label class="font_normal_body">房屋类型</label>
-              <input type="text" style="width:60%" class="input_search" v-show="false"
-                     v-model="areamodel.f_house_type" >
-              <v-select
-                :value.sync="areamodel.f_house_type" :value-single="true"
-                :options='housetypeoptions' placeholder='房屋类型'
-                close-on-select >
-              </v-select>
-            </div>
-            <div class="col-sm-6 form-group" :class="[$v.f_position.required ? 'has-error' : 'has-success']">
-              <label class="font_normal_body">安装位置</label>
-              <input type="text" style="width:60%" class="input_search" v-show="false"  v-model="areamodel.f_position" >
-              <v-select
-                :value.sync="areamodel.f_position" :value-single="true"
-                :options='positions' placeholder='安装位置'
-                close-on-select >
-              </v-select>
-            </div>
-          </div>
-          <div v-if="f_special" class="col-sm-6 form-group">
-            <br/>
-          </div>
-        </div>
-        <div class="row auto" style="text-align:right;">
-          <button class="button_search button_spacing" @click="confirm()" :disabled='!$v.valid'>保存</button>
-          <button class="button_clear button_spacing" @click="cancel()">取消</button>
-        </div>
-      </div>
-    </validator>
-  </div>
-</template>
-
-<script>
-  import {HttpResetClass} from 'vue-client'
-
-  let initGen = async function (self) {
-    await self.initdata()
-    await self.$LoadParams.loadMeterBook(self.f_filialeids)
-    await self.loadMeterBooks();
-  }
-  export default {
-    title: '小区添加',
-    data () {
-      return {
-        //初始化省市区数据
-        pcdslist:[],
-        //初始化街道数据
-        streetslist:[],
-        //小区
-        areamodel: {
-          f_area_id: '',
-          f_pcd_id:'',
-          f_linkname:'',
-          f_linkphone:'',
-          f_street_id:'',
-          f_slice_area:'',
-          f_adjustable_id:'',
-          f_residential_area:'',
-          f_user_type:'',
-          f_gasproperties:'',
-          f_meter_brand:'',
-          f_price_name:'',
-          f_area_address:'',
-          f_price_type:'',
-          f_meter_style:'',
-          f_position:'',
-          f_comments:'',
-          f_meter_type: ''
-        },
-        meterbrands: [],
-        adjustables: [],
-        sliceArea: [],
-        gasproperties: [],
-        meterbooks:[{label: '全部',value: ''}],
-        housetypeoptions:[{label: '楼房', value: '楼房'}, {label: '自建房', value: '自建房'}],
-        isMachine: true
-      }
-    },
-    props: ['f_filialeids','f_special', 'areatype','row','operation'],
-    ready(){
-      initGen(this)
-    },
-    methods: {
-      loadMeterBooks(){
-        this.meterbooks = [...this.meterbooks, ...this.$GetSaleParam.getMeterBooks()]
-      },
-      //初始化数据
-      async initdata(){
-        // 初始化参数
-        await this.initParams()
-
-        // 初始化片区
-        await this.initSlice(this.f_filialeids)
-        await this.initpcds(` f_filialeid = '${this.f_filialeids}'`)
-      },
-      initrow(val){
-        this.areamodel.f_meter_book = val.f_meter_book;
-        this.areamodel.f_adjustable_id = val.f_adjustable_id;
-      },
-      async initParams() {
-        await this.$LoadParams.loadParam(this.f_filialeids)
-        this.initBrands()
-        this.initAdjustables()
-      },
-
-      initBrands () {
-        let ret = this.$GetSaleParam.getGasbrand()
-        let rs = new Array()
-        ret.forEach((item, index) =>{
-          rs.push({label: item.label, value: item.value.f_meter_brand})
-        })
-        this.meterbrands = rs
-      },
-
-      initAdjustables () {
-        let filter = this.$login.f.orgid
-        let ret = this.$GetSaleParam.getAdjustable(filter)
-        let arr = new Array()
-        ret.forEach((item, index) => {
-          arr.push({label: `[${item.value.f_adjustable_id}]-${item.label}`, value: item.value.id})
-        })
-        this.adjustables = arr
-      },
-
-      async initSlice (val) {
-        if (val) {
-          let getAllArea = await this.$resetpost('/rs/search', {
-            source: 'this.getParentByType($organization$).getAllChildrens().where(row.getType() == $zone$)',
-            userid: this.$login.f.id
-          }, {resolveMsg: null, rejectMsg: '获取片区出错！！！'})
-
-          let arr = getAllArea.data.filter((res) => {
-            return res.parentid == val
-          })
-          this.sliceArea = []
-          arr.forEach((res) => {
-            this.sliceArea.push({label: res.name, value: {name: res.name, code:res.number}})
-          })
-        }
-      },
-
-      //初始化省市区,添加街道
-      async initpcds(pconditon){
-        this.pcdslist = []
-        let HttpReset = new HttpResetClass()
-        let req = await HttpReset.load('POST', 'api/af-revenue/sql/address_singleTableOrderBy', {
-          data: {
-            items: '*',
-            tablename: 't_pcd',
-            orderitem: 'id',
-            condition: pconditon
-          }
-        }, {resolveMsg: null, rejectMsg: '获取地址失败!'})
-        let redata = []
-        req.data.forEach((row, n) => {
-          redata[n] = {
-            label: row.f_pcd,
-            value: row.id,
-            data:row,
-            id:row.id
-          }
-        })
-        this.pcdslist=redata
-
-      },
-      //初始化街道 添加小区
-      async initstreets(pconditon){
-        this.streetslist = []
-        let HttpReset = new HttpResetClass()
-        let req = await HttpReset.load('POST', 'api/af-revenue/sql/address_singleTableOrderBy', {
-          data: {
-            items: '*',
-            tablename: 't_street',
-            orderitem: 'id',
-            condition: pconditon
-          }
-        }, {resolveMsg: null, rejectMsg: '获取地址失败!'})
-        let redata = []
-        req.data.forEach((row, n) => {
-          redata[n] = {
-            label: row.f_street,
-            value: row.id,
-            data:row,
-            id:row.id
-          }
-        })
-        this.streetslist=redata
-      },
-
-      async areaidChange () {
-        // 验证小区编号是否已存在
-
-        let param = {
-          id: this.areamodel.id,
-          f_area_id: this.areamodel.f_area_id,
-          f_filialeid: this.f_filialeids
-        }
-
-        let res = await this.$resetpost('api/af-revenue/logic/address_validateAreaID', param, {resolveMsg: null,rejectMsg: '小区编号验证失败！！'})
-        console.log('验证小区是否存在', res)
-        if (res.data) {
-          this.$showAlert('这个小区编号已存在！！！请核实', 'warning', 3000)
-          this.areamodel.f_area_id = ''
-        }
-
-      },
-
-
-      //根据名字找数据
-      findbyid(list,name){
-        var result
-        list.forEach((row, n) => {
-          if(name==row.id){
-            result= row.data
-          }
-        })
-        return result
-      },
-      userTypeChange () {
-        this.gasproperties = []
-        if (this.areamodel.f_user_type) {
-          this.gasproperties = this.$appdata.getParam(this.areamodel.f_user_type)
-        }
-      },
-
-      //省/市/区变化
-      async pcdChange(val){
-        if(val){
-          //那就把街道数据重新组织一下
-          await this.initstreets(` f_filialeid = '${this.f_filialeids}' and f_pcd_id ='${val}' `)
-          if(this.areamodel.f_street_id){
-            if (this.findbyid(this.streetslist,this.areamodel.f_street_id)) {
-              let pcd_id=this.findbyid(this.streetslist,this.areamodel.f_street_id).f_pcd_id
-              if(pcd_id!=val){
-                this.areamodel.f_street_id=''
-              }
-            } else {
-              this.areamodel.f_street_id=''
-            }
-
-          }
-        }
-        this.$resetValidation()
-      },
-      //街道变化
-      streetChange(val){
-        if(val&&this.operation=='add'){
-          // if(this.areamodel.f_pcd_id.length==0){
-          if (this.findbyid(this.streetslist,this.areamodel.f_street_id)) {
-            console.log("aa",this.findbyid(this.streetslist,this.areamodel.f_street_id))
-            console.log("bbb",this.findbyid(this.streetslist,this.areamodel.f_street_id).f_pcd_id)
-            this.areamodel.f_pcd_id=this.findbyid(this.streetslist,this.areamodel.f_street_id).f_pcd_id
-          }
-          // }
-        }
-        this.$resetValidation()
-      },
-      //保存
-      async confirm(){
-        await this.savearea()
-        this.cleardara()
-        this.$dispatch('confirm')
-      },
-      //保存小区
-      async savearea(){
-        if(this.f_special){
-          this.areamodel.f_special='1'
-        }
-        this.areamodel.f_filialeid = this.f_filialeids
-        this.areamodel.f_operator = this.$login.f.name
-        this.areamodel.f_operatorid = this.$login.f.id
-        this.areamodel.f_orgid = this.$login.f.orgid
-        this.areamodel.f_orgname = this.$login.f.orgs
-        this.areamodel.f_depid = this.$login.f.depids
-        this.areamodel.f_depname = this.$login.f.deps
-        if (this.areamodel.slice_area) {
-          if (this.areamodel.slice_area.length > 0) {
-            this.areamodel.f_slice_area = this.areamodel.slice_area[0].name
-            this.areamodel.f_area_code = this.areamodel.slice_area[0].code
-          }
-        }
-        this.areamodel.f_pcd=this.findbyid(this.pcdslist,this.areamodel.f_pcd_id).f_pcd
-        this.areamodel.f_street=this.findbyid(this.streetslist,this.areamodel.f_street_id).f_street
-
-        await this.$resetpost('api/af-revenue/logic/address_updatearea', this.areamodel)
-      },
-      cleardara(){
-        this.areamodel= {
-          f_area_id: '',
-          f_pcd_id:'',
-          f_street_id:'',
-          f_slice_area:'',
-          f_linkname:'',
-          f_linkphone:'',
-          f_adjustable_id:'',
-          f_residential_area:'',
-          f_user_type:'',
-          f_gasproperties:'',
-          f_area_address:'',
-          f_meter_brand:'',
-          f_price_name:'',
-          f_price_type:'',
-          f_meter_style:'',
-          f_position:'',
-          f_comments:'',
-          f_meter_type: ''
-        }
-      },
-      cancel(){
-        this.cleardara()
-        this.$dispatch('cancel')
-      },
-    },
-    watch: {
-      'areamodel.f_meter_type' (val) {
-        if (val === '机表')
-          this.isMachine = false
-      },
-      'areatype'(){
-        this.initdata()
-      },
-      'areamodel.f_pcd_id'(){
-        if(this.areamodel.f_pcd_id&&this.areamodel.f_street_id){
-          if (this.findbyid(this.pcdslist,this.areamodel.f_pcd_id) && this.findbyid(this.streetslist,this.areamodel.f_street_id)) {
-            this.areamodel.f_area_address = this.findbyid(this.pcdslist,this.areamodel.f_pcd_id).f_pcd + this.findbyid(this.streetslist,this.areamodel.f_street_id).f_street
-          }
-        }
-      },
-      'areamodel.f_street_id'(){
-        if (this.areamodel.f_pcd_id && this.areamodel.f_street_id) {
-          if (this.findbyid(this.pcdslist, this.areamodel.f_pcd_id) && this.findbyid(this.streetslist, this.areamodel.f_street_id)) {
-            this.areamodel.f_area_address = this.findbyid(this.pcdslist, this.areamodel.f_pcd_id).f_pcd + this.findbyid(this.streetslist, this.areamodel.f_street_id).f_street
-          }
-        }
-      },
-      'f_filialeids'(){
-        if (this.areamodel.f_filialeid) {
-          if (this.areamodel.f_filialeid != this.f_filialeids) {
-            this.$dispatch('cancel')
-          }
-        }
-        this.cleardara()
-        this.initdata()
-      }
-    },
-    computed: {
-      metertypes() {
-        return this.$appdata.getParam('气表类型')
-      },
-      usertypes () {
-        return this.$appdata.getParam('用户类型')
-      },
-      f_price_types () {
-        return this.$appdata.getParam('气价类型')
-      },
-      meterstyle () {
-        let ret = this.$GetSaleParam.getGasbrand()
-        let rs = new Array()
-        if(this.areamodel.f_meter_brand) {
-          ret.forEach((item, index) => {
-            if(this.areamodel.f_meter_brand == item.value.f_meter_brand) {
-              item.value.gasmodel.forEach((item1, index) =>{
-                rs.push({label: item1.label, value:item1.label})
-              })
-            }
-          })
-        }
-        return rs
-      },
-      pricenames () {
-        let rs = new Array()
-        if (this.areamodel.f_user_type && this.areamodel.f_gasproperties && this.areamodel.f_price_type) {
-          let params = {
-            f_user_type: this.areamodel.f_user_type,
-            f_gasproperties: this.areamodel.f_gasproperties,
-            f_price_type: this.areamodel.f_price_type,
-            filter: this.f_filialeids
-          }
-          let ret = this.$GetSaleParam.getPrice(params)
-          ret.forEach((item, index) => {
-            rs.push({label: item.label, value: item.value.f_price_name})
-          })
-        }
-        if (rs.length == 0) {
-          this.areamodel.f_price_name = ''
-        }
-        return rs
-      },
-      positions () {
-        return this.$appdata.getParam('安装位置')
-      },
-      inputtores () {
-        // 获取抄表员
-        let rs = new Array()
-        if (this.$login.f.f_gasman.length > 0) {
-          for (let i = 0; i < this.$login.f.f_gasman.length; i++) {
-            let temp = {
-              label: this.$login.f.f_gasman[i].name,
-              value: this.$login.f.f_gasman[i].name
-            }
-            rs.push(temp)
-          }
-        }
-        return rs
-      }
-    }
-  }
-</script>
-<style>
-  .box {
-    width: 727px;
-    height: 175px;
-    border-radius: 2px;
-    background-color: #fafafa;
-    border: 1px solid #999999;
-    margin-top: 13px;
-  }
-  .datapanel {
-    color: #333;
-    background-color: white;
-    box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px ;
-    padding: 10px 30px 10px 30px;
-    border-radius:15px;
-  }
-</style>
+<template>
+  <div class="span">
+    <validator name='v'>
+      <div class="form-horizontal select-overspread container-fluid" style="overflow-y: auto">
+        <div class="row auto">
+          <div class="col-sm-12 bg-info text-center"  style="padding: 8px;font-size: 18px;font-weight: bold">
+            <span v-if="operation=='add'&&!f_specia">添加{{areatype}}</span>
+            <span v-if="operation=='modify'&&!f_special">修改【{{areamodel.f_residential_area}}】小区</span>
+            <span v-if="operation=='add'&&f_specia">添加{{areatype}}</span>
+            <span v-if="operation=='modify'&&f_special">修改【{{areamodel.f_residential_area}}】单位</span>
+          </div>
+          <!--基本小区(单位)信息-->
+          <div class="col-sm-6 form-group">
+            <label class="font_normal_body">小区编号</label>
+            <input type="text" class="input_search" style="width:60%" v-model="areamodel.f_area_id"
+                   @blur="areaidChange" placeholder="小区编号">
+          </div>
+
+          <div class="col-sm-6 form-group"
+               :class="[$v.f_pcd_id.required ? 'has-error' : 'has-success']">
+            <label class="font_normal_body">省&ensp;市&ensp;区</label>
+            <input type="text" class="input_search" class="input_search" style="width:60%" v-show="false" v-model="areamodel.f_pcd_id"
+                   v-validate:f_pcd_id='{required: true }'>
+            <v-select
+              :value.sync="areamodel.f_pcd_id" :value-single="true"
+              :options='pcdslist' placeholder='请选择'
+              close-on-select search="true" @change="pcdChange">
+            </v-select>
+          </div>
+          <div class="col-sm-6 form-group"
+               :class="[$v.f_street_id.required ? 'has-error' : 'has-success']">
+            <label class="font_normal_body">社区/村委</label>
+            <input type="text" style="width:60%" class="input_search" v-show="false" v-model="areamodel.f_street_id"
+                   v-validate:f_street_id='{required: true }'>
+            <v-select
+              :value.sync="areamodel.f_street_id" :value-single="true"
+              :options='streetslist' placeholder='请选择'
+              close-on-select search="true" @change="streetChange">
+            </v-select>
+          </div>
+          <div class="col-sm-6 form-group" :class="[$v.slice.required ? 'has-error' : 'has-success']">
+            <label class="font_normal_body">片&emsp;&emsp;区</label>
+            <input type="text" style="width:60%" class="input_search" v-show="false" v-model="$refs.slice.selectedItems"
+                   v-validate:slice='{required: true }'>
+            <v-select :value.sync="areamodel.slice_area" v-model="areamodel.slice_area"
+                      :options='sliceArea' placeholder='片区/管理站' filer-key="name"
+                      close-on-select v-ref:slice>
+            </v-select>
+          </div>
+          <!--小区(特殊)信息-->
+          <div v-if="!f_special"
+               class="col-sm-6 form-group"
+               :class="[$v.f_residential_area.required ? 'has-error' : 'has-success']">
+            <label class="font_normal_body">小区名称</label>
+            <input type="text" style="width:60%" class="input_search"  v-model="areamodel.f_residential_area"
+                   class="form-control" placeholder="小区名称"
+                   v-validate:f_residential_area='{required: true }'>
+          </div>
+          <div v-if="!f_special"
+               class="col-sm-12 form-group">
+            <label class="font_normal_body">小区地址</label>
+            <input type="text" style="width:80%" class="input_search"  v-model="areamodel.f_area_address"
+                   class="form-control" placeholder="小区地址">
+          </div>
+          <!--单位(特殊)信息-->
+          <div v-if="f_special"
+               class="col-sm-6 form-group"
+               :class="[$v.f_residential_area.required ? 'has-error' : 'has-success']">
+            <label class="font_normal_body">单位名称</label>
+            <input type="text" style="width:60%" class="input_search"  v-model="areamodel.f_residential_area"
+                   class="form-control" placeholder="单位名称"
+                   v-validate:f_residential_area='{required: true }'>
+          </div>
+          <div v-if="f_special"
+               class="col-sm-12 form-group">
+            <label class="font_normal_body">单位地址</label>
+            <input type="text" style="width:60%" class="input_search"  v-model="areamodel.f_area_address"
+                   class="form-control" placeholder="单位地址">
+          </div>
+          <div v-if="f_special"
+               class="col-sm-6 form-group"
+               :class="[$v.f_linkname.required ? 'has-error' : 'has-success']">
+            <label class="font_normal_body">联&ensp;系&ensp;人</label>
+            <input type="text" style="width:60%" class="input_search"  v-model="areamodel.f_linkname"
+                   class="form-control" placeholder="联系人"
+                   v-validate:f_linkname='{required: true }'>
+          </div>
+          <div v-if="f_special"
+               class="col-sm-6 form-group"
+               :class="[$v.f_linkphone.required ? 'has-error' : 'has-success']">
+            <label class="font_normal_body">联系电话</label>
+            <input type="text" style="width:60%" class="input_search"  v-model="areamodel.f_linkphone"
+                   class="form-control" placeholder="联系电话"
+                   v-validate:f_linkphone='{required: true }'>
+          </div>
+          <div class="col-sm-12 form-group">
+            <label  class="font_normal_body " style="">备&emsp;&emsp;注</label>
+            <textarea class="input_textarea" rows="3" style="margin-top:20px;width:80%;height: auto;" v-model="areamodel.f_comments"></textarea>
+          </div>
+          <div class="col-sm-12 form-group">
+            <br/>
+          </div>
+          <!--表具信息-->
+          <div v-if="!f_special" class="col-sm-12 bg-info text-center"  style="padding: 8px;font-size: 18px;font-weight: bold">
+            <span >默认表具信息</span>
+          </div>
+          <div v-if="!f_special" class="row">
+            <div class="col-sm-6 form-group">
+              <label class="font_normal_body">用户类型</label>
+              <input type="text" style="width:60%" class="input_search" v-show="false" v-model="areamodel.f_user_type">
+              <v-select
+                :value.sync="areamodel.f_user_type" :value-single="true"
+                :options='usertypes' placeholder='用户类型' @change="userTypeChange"
+                close-on-select >
+              </v-select>
+            </div>
+            <div class="col-sm-6 form-group">
+              <label class="font_normal_body">用气性质</label>
+              <input type="text" style="width:60%" class="input_search" v-show="false" v-model="areamodel.f_gasproperties">
+              <v-select
+                :value.sync="areamodel.f_gasproperties" :value-single="true"
+                :options='gasproperties' placeholder='用气性质'
+                close-on-select >
+              </v-select>
+            </div>
+            <div class="col-sm-6 form-group">
+              <label class="font_normal_body">气价类型</label>
+              <input type="text" style="width:60%" class="input_search" v-show="false" v-model="areamodel.f_price_type">
+              <v-select
+                :value.sync="areamodel.f_price_type" :value-single="true"
+                :options='f_price_types' placeholder='气价类型'
+                close-on-select >
+              </v-select>
+            </div>
+            <div class="col-sm-6 form-group">
+              <label class="font_normal_body">气价名称</label>
+              <input type="text" style="width:60%" class="input_search" v-show="false" v-model="areamodel.f_price_name">
+              <v-select
+                :value.sync="areamodel.f_price_name" :value-single="true"
+                :options='pricenames' placeholder='气价名称'
+                close-on-select >
+              </v-select>
+            </div>
+            <div class="col-sm-6 form-group">
+              <label class="font_normal_body">气表品牌</label>
+              <input type="text" style="width:60%" class="input_search" v-show="false" v-model="areamodel.f_meter_brand">
+              <v-select
+                :value.sync="areamodel.f_meter_brand" :value-single="true"
+                :options='meterbrands' placeholder='气表品牌'
+                close-on-select >
+              </v-select>
+            </div>
+            <div class="col-sm-6 form-group">
+              <label class="font_normal_body">气表型号</label>
+              <input type="text" style="width:60%" class="input_search" v-show="false" v-model="areamodel.f_meter_style">
+              <v-select
+                :value.sync="areamodel.f_meter_style" :value-single="true"
+                :options='meterstyle' placeholder='气表型号'
+                close-on-select >
+              </v-select>
+            </div>
+            <div class="col-sm-6 form-group" :class="[$v.f_meter_type.required ? 'has-error' : 'has-success']">
+              <label class="font_normal_body">气表类型</label>
+              <input type="text" style="width:60%" class="input_search" v-show="false"
+                     v-model="areamodel.f_meter_type">
+              <v-select :value.sync="areamodel.f_meter_type" :value-single="true"
+                        :options='metertypes' placeholder='请选择'
+                        close-on-select></v-select>
+            </div>
+            <div class="col-sm-6 form-group" v-if="isMachine">
+              <label class="font_normal_body">抄&ensp;表&ensp;册</label>
+              <input type="text" style="width:60%" class="input_search" v-show="false"
+                     v-model="areamodel.f_meter_book">
+              <v-select
+                :value.sync="areamodel.f_meter_book" :value-single="true"
+                :options='meterbooks' placeholder='抄表册'
+                close-on-select >
+              </v-select>
+            </div>
+            <div class="col-sm-6 form-group" v-if="!isMachine" :class="[$v.f_meter_book.required ? 'has-error' : 'has-success']">
+              <label class="font_normal_body">抄&ensp;表&ensp;册</label>
+              <input type="text" style="width:60%" class="input_search" v-show="false"
+                     v-model="areamodel.f_meter_book">
+              <v-select
+                :value.sync="areamodel.f_meter_book" :value-single="true"
+                :options='meterbooks' placeholder='抄表册'
+                close-on-select >
+              </v-select>
+            </div>
+            <div class="col-sm-6 form-group" :class="[$v.f_inputtor.required ? 'has-error' : 'has-success']">
+              <label class="font_normal_body">抄&ensp;表&ensp;员</label>
+              <input type="text" style="width:60%" class="input_search"
+                     v-show="false" v-model="areamodel.f_inputtor">
+              <v-select
+                :value.sync="areamodel.f_inputtor" :value-single="true"
+                :options='inputtores' placeholder='抄表员'
+                close-on-select >
+              </v-select>
+            </div>
+            <div class="col-sm-6 form-group" :class="[$v.f_adjustable_id.required ? 'has-error' : 'has-success']">
+              <label class="font_normal_body">调&ensp;压&ensp;箱</label>
+              <input type="text" style="width:60%" class="input_search" v-show="false"
+                     v-model="areamodel.f_adjustable_id">
+              <v-select
+                :value.sync="areamodel.f_adjustable_id" :value-single="true"
+                :options='adjustables' placeholder='调压箱'
+                close-on-select >
+              </v-select>
+            </div>
+            <div class="col-sm-6 form-group" :class="[$v.f_house_type.required ? 'has-error' : 'has-success']">
+              <label class="font_normal_body">房屋类型</label>
+              <input type="text" style="width:60%" class="input_search" v-show="false"
+                     v-model="areamodel.f_house_type" >
+              <v-select
+                :value.sync="areamodel.f_house_type" :value-single="true"
+                :options='housetypeoptions' placeholder='房屋类型'
+                close-on-select >
+              </v-select>
+            </div>
+            <div class="col-sm-6 form-group" :class="[$v.f_position.required ? 'has-error' : 'has-success']">
+              <label class="font_normal_body">安装位置</label>
+              <input type="text" style="width:60%" class="input_search" v-show="false"  v-model="areamodel.f_position" >
+              <v-select
+                :value.sync="areamodel.f_position" :value-single="true"
+                :options='positions' placeholder='安装位置'
+                close-on-select >
+              </v-select>
+            </div>
+          </div>
+          <div v-if="f_special" class="col-sm-6 form-group">
+            <br/>
+          </div>
+        </div>
+        <div class="row auto" style="text-align:right;">
+          <button class="button_search button_spacing" @click="confirm()" :disabled='!$v.valid'>保存</button>
+          <button class="button_clear button_spacing" @click="cancel()">取消</button>
+        </div>
+      </div>
+    </validator>
+  </div>
+</template>
+
+<script>
+  import {HttpResetClass} from 'vue-client'
+
+  let initGen = async function (self) {
+    await self.initdata()
+    await self.$LoadParams.loadMeterBook(self.f_filialeids)
+    await self.loadMeterBooks();
+  }
+  export default {
+    title: '小区添加',
+    data () {
+      return {
+        //初始化省市区数据
+        pcdslist:[],
+        //初始化街道数据
+        streetslist:[],
+        //小区
+        areamodel: {
+          f_area_id: '',
+          f_pcd_id:'',
+          f_linkname:'',
+          f_linkphone:'',
+          f_street_id:'',
+          f_slice_area:'',
+          f_adjustable_id:'',
+          f_residential_area:'',
+          f_user_type:'',
+          f_gasproperties:'',
+          f_meter_brand:'',
+          f_price_name:'',
+          f_area_address:'',
+          f_price_type:'',
+          f_meter_style:'',
+          f_position:'',
+          f_comments:'',
+          f_meter_type: ''
+        },
+        meterbrands: [],
+        adjustables: [],
+        sliceArea: [],
+        gasproperties: [],
+        meterbooks:[{label: '全部',value: ''}],
+        housetypeoptions:[{label: '楼房', value: '楼房'}, {label: '自建房', value: '自建房'}],
+        isMachine: true
+      }
+    },
+    props: ['f_filialeids','f_special', 'areatype','row','operation'],
+    ready(){
+      initGen(this)
+    },
+    methods: {
+      loadMeterBooks(){
+        this.meterbooks = [...this.meterbooks, ...this.$GetSaleParam.getMeterBooks()]
+      },
+      //初始化数据
+      async initdata(){
+        // 初始化参数
+        await this.initParams()
+
+        // 初始化片区
+        await this.initSlice(this.f_filialeids)
+        await this.initpcds(` f_filialeid = '${this.f_filialeids}'`)
+      },
+      initrow(val){
+        this.areamodel.f_meter_book = val.f_meter_book;
+        this.areamodel.f_adjustable_id = val.f_adjustable_id;
+      },
+      async initParams() {
+        await this.$LoadParams.loadParam(this.f_filialeids)
+        this.initBrands()
+        this.initAdjustables()
+      },
+
+      initBrands () {
+        let ret = this.$GetSaleParam.getGasbrand()
+        let rs = new Array()
+        ret.forEach((item, index) =>{
+          rs.push({label: item.label, value: item.value.f_meter_brand})
+        })
+        this.meterbrands = rs
+      },
+
+      initAdjustables () {
+        let filter = this.$login.f.orgid
+        let ret = this.$GetSaleParam.getAdjustable(filter)
+        let arr = new Array()
+        ret.forEach((item, index) => {
+          arr.push({label: `[${item.value.f_adjustable_id}]-${item.label}`, value: item.value.id})
+        })
+        this.adjustables = arr
+      },
+
+      async initSlice (val) {
+        if (val) {
+          let getAllArea = await this.$resetpost('/rs/search', {
+            source: 'this.getParentByType($organization$).getAllChildrens().where(row.getType() == $zone$)',
+            userid: this.$login.f.id
+          }, {resolveMsg: null, rejectMsg: '获取片区出错！！！'})
+
+          let arr = getAllArea.data.filter((res) => {
+            return res.parentid == val
+          })
+          this.sliceArea = []
+          arr.forEach((res) => {
+            this.sliceArea.push({label: res.name, value: {name: res.name, code:res.number}})
+          })
+        }
+      },
+
+      //初始化省市区,添加街道
+      async initpcds(pconditon){
+        this.pcdslist = []
+        let HttpReset = new HttpResetClass()
+        let req = await HttpReset.load('POST', 'api/af-revenue/sql/address_singleTableOrderBy', {
+          data: {
+            items: '*',
+            tablename: 't_pcd',
+            orderitem: 'id',
+            condition: pconditon
+          }
+        }, {resolveMsg: null, rejectMsg: '获取地址失败!'})
+        let redata = []
+        req.data.forEach((row, n) => {
+          redata[n] = {
+            label: row.f_pcd,
+            value: row.id,
+            data:row,
+            id:row.id
+          }
+        })
+        this.pcdslist=redata
+
+      },
+      //初始化街道 添加小区
+      async initstreets(pconditon){
+        this.streetslist = []
+        let HttpReset = new HttpResetClass()
+        let req = await HttpReset.load('POST', 'api/af-revenue/sql/address_singleTableOrderBy', {
+          data: {
+            items: '*',
+            tablename: 't_street',
+            orderitem: 'id',
+            condition: pconditon
+          }
+        }, {resolveMsg: null, rejectMsg: '获取地址失败!'})
+        let redata = []
+        req.data.forEach((row, n) => {
+          redata[n] = {
+            label: row.f_street,
+            value: row.id,
+            data:row,
+            id:row.id
+          }
+        })
+        this.streetslist=redata
+      },
+
+      async areaidChange () {
+        // 验证小区编号是否已存在
+
+        let param = {
+          id: this.areamodel.id,
+          f_area_id: this.areamodel.f_area_id,
+          f_filialeid: this.f_filialeids
+        }
+
+        let res = await this.$resetpost('api/af-revenue/logic/address_validateAreaID', param, {resolveMsg: null,rejectMsg: '小区编号验证失败！！'})
+        console.log('验证小区是否存在', res)
+        if (res.data) {
+          this.$showAlert('这个小区编号已存在！！！请核实', 'warning', 3000)
+          this.areamodel.f_area_id = ''
+        }
+
+      },
+
+
+      //根据名字找数据
+      findbyid(list,name){
+        var result
+        list.forEach((row, n) => {
+          if(name==row.id){
+            result= row.data
+          }
+        })
+        return result
+      },
+      userTypeChange () {
+        this.gasproperties = []
+        if (this.areamodel.f_user_type) {
+          this.gasproperties = this.$appdata.getParam(this.areamodel.f_user_type)
+        }
+      },
+
+      //省/市/区变化
+      async pcdChange(val){
+        if(val){
+          //那就把街道数据重新组织一下
+          await this.initstreets(` f_filialeid = '${this.f_filialeids}' and f_pcd_id ='${val}' `)
+          if(this.areamodel.f_street_id){
+            if (this.findbyid(this.streetslist,this.areamodel.f_street_id)) {
+              let pcd_id=this.findbyid(this.streetslist,this.areamodel.f_street_id).f_pcd_id
+              if(pcd_id!=val){
+                this.areamodel.f_street_id=''
+              }
+            } else {
+              this.areamodel.f_street_id=''
+            }
+
+          }
+        }
+        this.$resetValidation()
+      },
+      //街道变化
+      streetChange(val){
+        if(val&&this.operation=='add'){
+          // if(this.areamodel.f_pcd_id.length==0){
+          if (this.findbyid(this.streetslist,this.areamodel.f_street_id)) {
+            console.log("aa",this.findbyid(this.streetslist,this.areamodel.f_street_id))
+            console.log("bbb",this.findbyid(this.streetslist,this.areamodel.f_street_id).f_pcd_id)
+            this.areamodel.f_pcd_id=this.findbyid(this.streetslist,this.areamodel.f_street_id).f_pcd_id
+          }
+          // }
+        }
+        this.$resetValidation()
+      },
+      //保存
+      async confirm(){
+        await this.savearea()
+        this.cleardara()
+        this.$dispatch('confirm')
+      },
+      //保存小区
+      async savearea(){
+        if(this.f_special){
+          this.areamodel.f_special='1'
+        }
+        this.areamodel.f_filialeid = this.f_filialeids
+        this.areamodel.f_operator = this.$login.f.name
+        this.areamodel.f_operatorid = this.$login.f.id
+        this.areamodel.f_orgid = this.$login.f.orgid
+        this.areamodel.f_orgname = this.$login.f.orgs
+        this.areamodel.f_depid = this.$login.f.depids
+        this.areamodel.f_depname = this.$login.f.deps
+        if (this.areamodel.slice_area) {
+          if (this.areamodel.slice_area.length > 0) {
+            this.areamodel.f_slice_area = this.areamodel.slice_area[0].name
+            this.areamodel.f_area_code = this.areamodel.slice_area[0].code
+          }
+        }
+        this.areamodel.f_pcd=this.findbyid(this.pcdslist,this.areamodel.f_pcd_id).f_pcd
+        this.areamodel.f_street=this.findbyid(this.streetslist,this.areamodel.f_street_id).f_street
+
+        await this.$resetpost('api/af-revenue/logic/address_updatearea', this.areamodel)
+      },
+      cleardara(){
+        this.areamodel= {
+          f_area_id: '',
+          f_pcd_id:'',
+          f_street_id:'',
+          f_slice_area:'',
+          f_linkname:'',
+          f_linkphone:'',
+          f_adjustable_id:'',
+          f_residential_area:'',
+          f_user_type:'',
+          f_gasproperties:'',
+          f_area_address:'',
+          f_meter_brand:'',
+          f_price_name:'',
+          f_price_type:'',
+          f_meter_style:'',
+          f_position:'',
+          f_comments:'',
+          f_meter_type: ''
+        }
+      },
+      cancel(){
+        this.cleardara()
+        this.$dispatch('cancel')
+      },
+    },
+    watch: {
+      'areamodel.f_meter_type' (val) {
+        if (val === '机表')
+          this.isMachine = false
+      },
+      'areatype'(){
+        this.initdata()
+      },
+      'areamodel.f_pcd_id'(){
+        if(this.areamodel.f_pcd_id&&this.areamodel.f_street_id){
+          if (this.findbyid(this.pcdslist,this.areamodel.f_pcd_id) && this.findbyid(this.streetslist,this.areamodel.f_street_id)) {
+            this.areamodel.f_area_address = this.findbyid(this.pcdslist,this.areamodel.f_pcd_id).f_pcd + this.findbyid(this.streetslist,this.areamodel.f_street_id).f_street
+          }
+        }
+      },
+      'areamodel.f_street_id'(){
+        if (this.areamodel.f_pcd_id && this.areamodel.f_street_id) {
+          if (this.findbyid(this.pcdslist, this.areamodel.f_pcd_id) && this.findbyid(this.streetslist, this.areamodel.f_street_id)) {
+            this.areamodel.f_area_address = this.findbyid(this.pcdslist, this.areamodel.f_pcd_id).f_pcd + this.findbyid(this.streetslist, this.areamodel.f_street_id).f_street
+          }
+        }
+      },
+      'f_filialeids'(){
+        if (this.areamodel.f_filialeid) {
+          if (this.areamodel.f_filialeid != this.f_filialeids) {
+            this.$dispatch('cancel')
+          }
+        }
+        this.cleardara()
+        this.initdata()
+      }
+    },
+    computed: {
+      metertypes() {
+        return this.$appdata.getParam('气表类型')
+      },
+      usertypes () {
+        return this.$appdata.getParam('用户类型')
+      },
+      f_price_types () {
+        return this.$appdata.getParam('气价类型')
+      },
+      meterstyle () {
+        let ret = this.$GetSaleParam.getGasbrand()
+        let rs = new Array()
+        if(this.areamodel.f_meter_brand) {
+          ret.forEach((item, index) => {
+            if(this.areamodel.f_meter_brand == item.value.f_meter_brand) {
+              item.value.gasmodel.forEach((item1, index) =>{
+                rs.push({label: item1.label, value:item1.label})
+              })
+            }
+          })
+        }
+        return rs
+      },
+      pricenames () {
+        let rs = new Array()
+        if (this.areamodel.f_user_type && this.areamodel.f_gasproperties && this.areamodel.f_price_type) {
+          let params = {
+            f_user_type: this.areamodel.f_user_type,
+            f_gasproperties: this.areamodel.f_gasproperties,
+            f_price_type: this.areamodel.f_price_type,
+            filter: this.f_filialeids
+          }
+          let ret = this.$GetSaleParam.getPrice(params)
+          ret.forEach((item, index) => {
+            rs.push({label: item.label, value: item.value.f_price_name})
+          })
+        }
+        if (rs.length == 0) {
+          this.areamodel.f_price_name = ''
+        }
+        return rs
+      },
+      positions () {
+        return this.$appdata.getParam('安装位置')
+      },
+      inputtores () {
+        // 获取抄表员
+        let rs = new Array()
+        if (this.$login.f.f_gasman.length > 0) {
+          for (let i = 0; i < this.$login.f.f_gasman.length; i++) {
+            let temp = {
+              label: this.$login.f.f_gasman[i].name,
+              value: this.$login.f.f_gasman[i].name
+            }
+            rs.push(temp)
+          }
+        }
+        return rs
+      }
+    }
+  }
+</script>
+<style>
+  .box {
+    width: 727px;
+    height: 175px;
+    border-radius: 2px;
+    background-color: #fafafa;
+    border: 1px solid #999999;
+    margin-top: 13px;
+  }
+  .datapanel {
+    color: #333;
+    background-color: white;
+    box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px ;
+    padding: 10px 30px 10px 30px;
+    border-radius:15px;
+  }
+</style>