apply-clients 3.5.4-98 → 3.5.4-99

package/src/filiale/fugou/pc/ServiceView.vue

@@ -1,941 +1,941 @@
-<template>
-  <div class="select-overspread" style="background-color: #ffffff;padding: 20px;overflow: scroll">
-    <validator name='v' @valid="$emit('valid')" @invalid="$emit('invalid')">
-    <form class="form-horizontal">
-      <div class="form-group">
-        <div v-for="(index,item) in data.fields">
-          <!--input-->
-          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
-               v-if="(item.type==='input' || item.type==='number'||item.type === 'tel'||item.type === 'email') && !item.hidden && (item.device === 'pc' || !item.device) && ( item.label != '证件号码')&&( item.label !== '身份证') "
-               :class="[item.required && !(item.value) ? 'has-error' : '',item.bootstraped ? item.bootstraped + ' form-group':'col-sm-4 form-group']">
-            <label :style="item.label_style ? item.label_style : ''"
-                   :class="item.label_bootstraped ? item.label_bootstraped+' control-label-justify control-label' : 'control-label-justify control-label col-sm-6'">{{item.label}}</label>
-            <div :style="item.value_style ? item.value_style:''"
-                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
-              <input class="form-control input_view" style=""
-                     :type="item.type"
-                     v-model="data.fields[index].value"
-                     :placeholder="item.placeholder"
-                     :value="data.fields[index].value"
-                     :readonly="item.readonly"
-                     :disabled="item.disabled"
-                     @change="onchange(index)"
-                     @blur="onblur(index)"
-                     @input="oninput(index)"
-              />
-            </div>
-          </div>
-
-          <!--input-->
-          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
-               v-if="(data.f_credentials != '身份证' && item.label === '证件号码')"
-               :class="[item.required && !(item.value) ? 'has-error' : '',item.bootstraped ? item.bootstraped + ' form-group':'col-sm-4 form-group']">
-            <label :style="item.label_style ? item.label_style : ''"
-                   :class="item.label_bootstraped ? item.label_bootstraped+' control-label-justify control-label' : 'control-label-justify control-label col-sm-6'">{{item.label}}</label>
-            <div :style="item.value_style ? item.value_style:''"
-                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
-              <input class="form-control input_view" style=""
-                     :type="item.type"
-                     v-model="data.fields[index].value"
-                     :placeholder="item.placeholder"
-                     :value="data.fields[index].value"
-                     :readonly="item.readonly"
-                     :disabled="item.disabled"
-                     @change="onchange(index)"
-                     @blur="onblur(index)"
-                     @input="oninput(index)"
-              />
-            </div>
-          </div>
-          <!--身份证验证-->
-          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
-               v-if="(item.label==='身份证') || (data.f_credentials === '身份证' && item.label === '证件号码')"
-               :class="[$v.f_idnumber2.identityCardValid ? 'has-error' : '',item.bootstraped ? item.bootstraped + ' form-group':'col-sm-4 form-group']">
-            <label :style="item.label_style ? item.label_style : ''"
-                   :class="item.label_bootstraped ? item.label_bootstraped+' control-label-justify control-label' : 'control-label-justify control-label col-sm-6'">{{item.label}}</label>
-            <div :style="item.value_style ? item.value_style:''"
-                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
-              <input class="form-control input_view" style=""
-                     :type="item.type"
-                     maxlength="18"
-                     v-model="data.fields[index].value"
-                     :placeholder="item.placeholder"
-                     :value="data.fields[index].value"
-                     v-validate:f_idnumber2='{identityCardValid: true}'
-                     :readonly="item.readonly"
-                     :disabled="item.disabled"
-                     @change="onchange(index)"
-                     @blur="onblur(index)"
-                     @input="oninput(index)"
-              />
-            </div>
-          </div>
-
-
-
-
-          <!--时间datepicker-->
-          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
-               v-if="item.type==='datepicker' && !item.hidden && (item.device === 'pc' || !item.device)"
-               :class="[item.required && !(item.value) ? 'has-error' : '',item.bootstraped ? item.bootstraped+' form-group':'col-sm-4 form-group']">
-            <label
-              :class="item.label_bootstraped ? item.label_bootstraped+' control-label-justify control-label' : 'control-label control-label-justify col-sm-6'">{{item.label}}</label>
-            <div :style="item.value_style ? item.value_style:''"
-                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
-              <datepicker
-                @change="onchange(index)"
-                @blur="onblur(index)"
-                :placeholder="item.placeholder"
-                :value.sync="data.fields[index].value"
-                :format="item.format ? item.format : 'yyyy-MM-dd'"
-                v-model="data.fields[index].value"
-                :readonly="item.readonly"
-                :disabled="item.disabled"
-                :show-reset-button="reset">
-              </datepicker>
-            </div>
-          </div>
-
-          <!--textarea-->
-          <div :style="item.style ? item.style+';margin-bottom: 20px':'margin-bottom: 20px'"
-               v-if="item.type==='textarea' && !item.hidden && (item.device === 'pc' || !item.device)"
-               :class="[item.required && !(item.value) ? 'has-error' : '',item.bootstraped?item.bootstraped+' form-group':'col-sm-12 form-group']">
-            <label :style="item.label_style ? item.label_style : ''"
-                   :class="item.label_bootstraped ? item.label_bootstraped + ' control-label-justify control-label' : 'control-label-justify control-label col-sm-3'">{{item.label}}</label>
-            <div :style="item.value_style ? item.value_style:''"
-                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-10'">
-              <textarea
-                :readonly="item.readonly"
-                :disabled="item.disabled"
-                class="form-control input_view"
-                style="width: 100%;height: 100%"
-                :rows="item.rows"
-                v-model="data.fields[index].value"
-                :value="data.fields[index].value"
-                @change="onchange(index)"
-                @blur="onblur(index)"
-                @input="oninput(index)"
-              >
-              </textarea>
-            </div>
-          </div>
-
-          <!--select-->
-          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
-               v-if="item.type==='select' && !item.hidden && (item.device === 'pc' || !item.device) && !item.multiple"
-               :class="[item.required && !(item.value) ? 'has-error' : '',item.bootstraped?item.bootstraped+' form-group':'col-sm-4 form-group']">
-            <label
-              :class="item.label_bootstraped ? item.label_bootstraped+' control-label control-label-justify':'control-label-justify control-label col-sm-6'">{{item.label}}</label>
-            <div :style="item.value_style ? item.value_style:''"
-                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
-              <input-select
-                class="select select_list"
-                @blur="onblur(index)"
-                @change="onchange(index)"
-                @select-search="selectSearch($arguments,index)"
-                :readonly="item.readonly"
-                :disable="item.disabled"
-                :value.sync="data.fields[index].value"
-                v-model="data.fields[index].value"
-                :options='data.fields[index].options'
-                :valueSingle="true"></input-select>
-            </div>
-          </div>
-          <!--select 多选-->
-          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
-               v-if="item.type==='select' && !item.hidden && (item.device === 'pc' || !item.device)&& item.multiple"
-               :class="[item.required && !(item.value) ? 'has-error' : '',item.bootstraped?item.bootstraped+' form-group':'col-sm-4 form-group']">
-            <label
-              :class="item.label_bootstraped ? item.label_bootstraped+' control-label control-label-justify':'control-label-justify control-label col-sm-6'">{{item.label}}</label>
-            <div :style="item.value_style ? item.value_style:''"
-                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
-              <v-select
-                width="100%"
-                class="select select_list"
-                @blur="onblur(index)"
-                @change="onchange(index)"
-                @select-search="selectSearch($arguments,index)"
-                :readonly="item.readonly"
-                :disable="item.disabled"
-                :value.sync="data.fields[index].value"
-                v-model="data.fields[index].value"
-                :options='data.fields[index].options'
-                :multiple="data.fields[index].multiple"
-                :valueSingle="true"></v-select>
-            </div>
-          </div>
-
-          <!--checkbox-->
-          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
-               v-if="item.type==='checkbox' && !item.hidden && (item.device === 'pc' || !item.device)"
-               :class="[item.required && item.value.length === 0 ? 'has-error' : '',item.bootstraped?item.bootstraped+' form-group':'col-sm-4 form-group']">
-            <label v-if="item.label"
-                   :class="item.label_bootstraped?item.label_bootstraped+' control-label control-label-justify':'control-label-justify control-label col-sm-6'">{{item.label}}</label>
-            <div :style="item.value_style ? item.value_style:''"
-                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
-              <label class="checkbox-inline" v-for="(index2,row) in item.options">
-                <input type="checkbox" class=""
-                       :readonly="data.fields[index].readonly"
-                       :disabled="data.fields[index].disabled"
-                       v-model="data.fields[index].value"
-                       :value="data.fields[index].options[index2].value"
-                       @change="onchange(index)"
-                       @blur="onblur(index)">
-                {{row.label}}
-              </label>
-            </div>
-          </div>
-          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
-               v-if="item.type==='button'"
-               :class="[item.required && !(item.value) ? 'has-error' : '',item.bootstraped ? item.bootstraped + ' form-group':'col-sm-4 form-group']">
-            <div :style="item.value_style ? item.value_style:''"
-                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
-              <button class="button_search button_spacing" :style="item.button_styles" @click.prevent="printclick(index)" :hidden="item.hidden">
-                {{ item.name }}
-              </button>
-            </div>
-          </div>
-          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
-               v-if="item.type==='Abutton'"
-               :class="[item.required && !(item.value) ? 'has-error' : '',item.bootstraped ? item.bootstraped + ' form-group':'col-sm-4 form-group']">
-            <div :style="item.value_style ? item.value_style:''"
-                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
-              <a type="button" class="btn btn-info head-but"
-                 :href="item.href" download>{{item.name}}</a>
-            </div>
-          </div>
-        </div>
-        <!--区域地址联动-->
-        <div>
-          <res-area-select-group
-            v-if="(data.f_apply_type === '报警器报建' || data.f_apply_type === '工商业报警器报建') && data.defname === '工程施工' && data.title === '工程施工' && data.f_sub_state !='完工'"
-            labelstyle = "control-label"
-            @shiji-select = "getSelectShijiValue"
-            @xian-select = "getSelectXianValue"
-            @shequ-select = "getSelectShequValue"
-          >
-          </res-area-select-group>
-        </div>
-
-        <gaode-map
-          v-if="(data.f_apply_type === '报警器报建' || data.f_apply_type === '工商业报警器报建') && data.defname === '工程施工' && data.title === '工程施工' && data.f_sub_state !='完工'"
-        >
-
-        </gaode-map>
-
-      </div>
-      <!-- onetomany -->
-      <div class="" v-for="(index,item) in data.onetomany">
-        <onetomany :selectdata="data" :onetomany="item" :index="index" v-if="item.device === 'pc' || !item.device"></onetomany>
-      </div>
-
-      <div v-for="(i,item) in data.components">
-        <h3  v-if="item.device === 'pc'"><nbr >{{item.title}}</nbr></h3>
-        <component v-if="item.device === 'pc' || !item.device" :is="item.name" :selectdata="data" :mark="item.mark"></component>
-      </div>
-
-      <!--自定义组件-->
-      <slot>
-      </slot>
-      <!--公司等属性-->
-      <div class="col-sm-12 form-group text-center" style="padding-top:8px">
-        <div class="col-sm-3 form-group center-block">
-          <label class="col-sm-5">所属公司：</label>
-          <div class="col-sm-6" style="text-align: left">
-            {{model.orgs}}
-          </div>
-        </div>
-        <div class="col-sm-3 form-group center-block">
-          <label class="col-sm-5">部门：</label>
-          <div class="col-sm-6" style="text-align: left">
-            {{model.parentname}}
-          </div>
-        </div>
-        <div class="col-sm-3 form-group center-block">
-          <label class="col-sm-5">操作人：</label>
-          <div class="col-sm-6 " style="text-align: left">
-            {{model.operator}}
-          </div>
-        </div>
-        <div class="col-sm-3 form-group center-block">
-          <label class="col-sm-5">操作日期：</label>
-          <div class="col-sm-6" style="text-align: left">
-            {{model.operate_date}}
-          </div>
-        </div>
-      </div>
-      <!-- 按钮组 -->
-      <div class="from-group col-sm-12 text-center">
-        <!-- 按钮组 -->
-        <button v-for="(index,button) in data.buttons"
-                :disabled="(button.disabled && disable_button)"
-                style="min-width:100px"
-                :class="button.disabled && disable_button ? 'btn btn-default button_spacing' : 'btn btn-primary button_spacing'"
-                v-if="!button.hidden && button.button_name !=='提交'&& button.button_name !=='确认'"
-                @click.prevent="click_but(button)"
-        >
-          {{button.button_name}}
-        </button>
-        <button v-for="(index,button) in data.buttons"
-                :disabled="(button.disabled && disable_button) || (!$v.valid)"
-                style="min-width:100px"
-                :class="button.disabled && disable_button || (!$v.valid) ? 'btn btn-default button_spacing' : 'btn btn-primary button_spacing'"
-                v-if="!button.hidden && (button.button_name ==='提交'||button.button_name ==='确认')"
-                @click.prevent="click_but(button)"
-        >
-          {{button.button_name}}
-        </button>
-      </div>
-
-      <!-- 按钮模态框 -->
-      <modal v-if="showButModal" :show.sync="showButModal" backdrop="false" large>
-        <header slot="modal-header" class="modal-header">
-          <button type="button" class="close" @click="closeModal()"><span>&times;</span></button>
-          <span class="modal-title"><font
-            size="3">{{data.button.button_name}}</font></span>
-        </header>
-        <article slot="modal-body" class="modal-body clearfix">
-          <div class="form-group" style="padding: 0 150px">
-            <div v-for="(index,item) in data.button.button_fields">
-              <div :style="item.style ? item.style : ''" :class="[item.required && !(item.value) ? 'has-error' : '', item.bootstraped ? item.bootstraped + ' form-group' : 'form-group']"
-                   v-if="(item.type==='input' || item.type==='number'||item.type === 'tel'||item.type === 'email') && !item.hidden && (item.device === 'pc' || !item.device)">
-                <label :style="item.label_style ? item.label_style : ''"
-                       :class="item.label_bootstraped ? item.label_bootstraped + ' control-label-justify control-label' : 'control-label-justify control-label col-sm-6'">{{item.label}}</label>
-                <div :style="item.value_style ? item.value_style : ''"
-                     :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-9'">
-                  <input class="form-control input_view"
-                         :placeholder="item.placeholder"
-                         :type="item.type"
-                         v-model="item.value"
-                         :value="item.value"
-                         :readonly="item.readonly"
-                         :disabled="item.disabled"
-                         @change="onbutchange(index)"
-                         @blur="onbutblur(index)"
-                         @input="onbutinput(index)"
-                  />
-                </div>
-              </div>
-
-              <!--时间datepicker-->
-              <div :style="item.style ? item.style : ''" :class="[item.required && !(item.value) ? 'has-error' : '', item.bootstraped ? item.bootstraped + ' form-group':'form-group']"
-                   v-if="item.type==='datepicker' && !item.hidden && (item.device === 'pc' || !item.device)">
-                <label :style="item.label_style ? item.label_style : ''"
-                       :class="item.label_bootstraped ? item.label_bootstraped + ' control-label-justify control-label' : 'control-label-justify control-label col-sm-6'">{{item.label}}</label>
-                <div :style="item.value_style ? item.value_style : ''"
-                     :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-9'">
-                  <datepicker
-                    :placeholder="item.placeholder"
-                    :value.sync="item.value"
-                    v-model="item.value"
-                    :readonly="item.readonly"
-                    :disabled="item.disabled"
-                    :format="item.format ? item.format : 'yyyy-MM-dd'"
-                    :show-reset-button="true"
-                    @change="onbutchange(index)"
-                    @blur="onbutblur(index)"
-                  ></datepicker>
-                </div>
-              </div>
-
-              <!--select-->
-              <div :style="item.style ? item.style : ''" :class="[item.required && !(item.value) ? 'has-error' : '', item.bootstraped ? item.bootstraped + ' form-group':'form-group']"
-                   v-if="item.type==='select' && !item.hidden && (item.device === 'pc' || !item.device)">
-                <label :style="item.label_style ? item.label_style : ''"
-                       :class="item.label_bootstraped ? item.label_bootstraped + ' control-label-justify control-label' : 'control-label-justify control-label col-sm-6'">{{item.label}}</label>
-                <div :style="item.value_style ? item.value_style : ''"
-                     :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-9'">
-                  <input-select
-                    class="select select_list"
-                    :value.sync="item.value"
-                    v-model="item.value"
-                    :options='item.options'
-                    :readonly="item.readonly"
-                    :disable="item.disabled"
-                    :valueSingle="true"
-                    @blur="onbutblur(index)"
-                    @change="onbutchange(index)"
-                  ></input-select>
-                </div>
-              </div>
-
-              <!--textarea-->
-              <div :style="item.style ? item.style : ''" :class="[item.required && !(item.value) ? 'has-error' : '', item.bootstraped ? item.bootstraped + ' form-group':'form-group']"
-                   v-if="item.type==='textarea' && !item.hidden && (item.device === 'pc' || !item.device)">
-                <label :style="item.label_style ? item.label_style : ''"
-                       :class="item.label_bootstraped ? item.label_bootstraped + ' control-label-justify control-label' : 'control-label-justify control-label col-sm-6'">{{item.label}}</label>
-                <div :style="item.value_style ? item.value_style : ''"
-                     :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-9'">
-                <textarea
-                  class="form-control input_view"
-                  style="width: 100%;height: 100%"
-                  v-model="item.value"
-                  :value="item.value"
-                  :rows="item.rows"
-                  :readonly="item.readonly"
-                  :disabled="item.disabled"
-                  @change="onbutchange(index)"
-                  @blur="onbutblur(index)"
-                  @input="onbutinput(index)"
-                ></textarea>
-                </div>
-              </div>
-            </div>
-          </div>
-        </article>
-        <footer slot="modal-footer" class="modal-footer">
-          <button :class="disable_modal_button ? 'btn btn-default':'btn btn-primary'"
-                  :disabled="disable_modal_button" type="button" @click="confirmModal()">
-            确认
-          </button>
-        </footer>
-      </modal>
-    </form>
-    </validator>
-  </div>
-</template>
-<script>
-import Vue from 'vue'
-import {isEmpty} from '../../../components/Util'
-import {HttpResetClass} from 'vue-client'
-// Date格式化
-Date.prototype.Format = function (fmt) {
-  var o = {
-    'M+': this.getMonth() + 1, // 月份
-    'd+': this.getDate(), // 日
-    'H+': this.getHours(), // 小时
-    'm+': this.getMinutes(), // 分
-    's+': this.getSeconds(), // 秒
-    'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
-    'S': this.getMilliseconds() // 毫秒
-  }
-  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
-  for (var k in o) {
-    if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
-  }
-  return fmt
-}
-
-export default {
-  title: '报建业务通用组件',
-  props: {
-    data: {
-      type: Object
-    }
-  },
-  data () {
-    return {
-      model: {}, // 公司等属性
-      disable_button: true, // 控制按钮禁用
-      disable_modal_button: true, // 控制按钮禁用
-      //初始化省市区数据
-      pcdslist: [],
-      //初始化街道数据
-      streetslist: [],
-      //初始化街道数据
-      areaslist: [],
-      showButModal: false,
-      areaData:{
-        sjvalue:'',
-        xianvalue:'',
-        sqvalue:'',
-      },
-      templatlng: {
-        gaodetemplng: "",
-        gaodetemplat: "",
-        baidutemplng: "",
-        baidutemplat: ""
-      }
-    }
-  },
-  watch: {
-    deep: true
-  },
-  computed: {
-
-  },
-  created () {
-    // 初始化数据
-    this.initializtion()
-    if (this.data.readyEvent) {
-      this.$dispatch(this.data.readyEvent)
-    }
-    this.$dispatch('initializtionView')
-  },
-  methods: {
-    printclick (index) {
-    },
-    // 初始化数据
-    initializtion () {
-      for (const item of this.data.fields) {
-        this.data[item.field] = item.value
-      }
-
-      // 是否禁用按钮
-      this.disableButton()
-      // 公司等属性初始化
-      if (this.data.orgs) {
-        this.model.orgs = this.data.orgs
-      } else {
-        this.model.orgs = this.$login.f.orgs
-      }
-      if (this.data.parentname) {
-        this.model.parentname = this.data.parentname
-      } else {
-        this.model.parentname = this.$login.f.f_department_name
-      }
-      if (this.data.operate_date) {
-        this.model.operate_date = this.data.operate_date
-      } else {
-        this.model.operate_date = new Date().Format('yyyy-MM-dd')
-      }
-      if (this.data.operator) {
-        this.model.operator = this.data.operator
-      } else {
-        this.model.operator = this.$login.f.name
-      }
-
-      this.initpcds(` j_orgid = '${this.$login.f.orgid}'`)
-    },
-    async getSelectShijiValue(sjvalue,sjlable) {
-      this.areaData.sjvalue = sjvalue
-      console.log("这是父级接收的市级值:",sjvalue,sjlable)
-      this.data.areaData = this.areaData
-
-      // 是否禁用按钮
-      this.disableButton()
-    },
-    async getSelectXianValue(xianvalue,xianlable) {
-      this.areaData.xianvalue = xianvalue
-      this.data.areaData = this.areaData
-      console.log("这是父级接收的县级值:",xianvalue,xianlable)
-
-      // 是否禁用按钮
-      this.disableButton()
-    },
-    async getSelectShequValue(sqvalue,sqlable) {
-      this.areaData.sqvalue = sqvalue
-      this.data.areaData = this.areaData
-      console.log("这是父级接收的社区值:",sqvalue,sqlable)
-
-      // 是否禁用按钮
-      this.disableButton()
-    },
-    //初始化省市区,添加街道
-    async initpcds(pconditon) {
-      // console.log('initpcds', pconditon)
-      // this.pcdslist = []
-      // let HttpReset = new HttpResetClass()
-      // let req = await HttpReset.load('POST', 'rs/sql/address_singleTableOrderBy?pageNo=1&pageSize=9999999', {
-      //   data: {
-      //     items: '*',
-      //     tablename: 'j_bjqpcd',
-      //     orderitem: 'id',
-      //     condition: pconditon
-      //   }
-      // }, {resolveMsg: null, rejectMsg: '获取地址失败!'})
-      // let redata = []
-      // req.data.forEach((row, n) => {
-      //   redata[n] = {
-      //     label: row.j_areaname,
-      //     value: row.j_areaid,
-      //     data: row,
-      //     id: row.id
-      //   }
-      // })
-      // console.log('市区', redata)
-      // this.pcdslist = redata
-    },
-    //初始化街道 添加小区
-    async initstreets(pconditon) {
-      // console.log('市区32', pconditon)
-      // this.streetslist = []
-      // let HttpReset = new HttpResetClass()
-      // let req = await HttpReset.load('POST', 'rs/sql/address_singleTableOrderBy', {
-      //   data: {
-      //     items: '*',
-      //     tablename: 'j_bjqstreet',
-      //     orderitem: 'id',
-      //     condition: pconditon
-      //   }
-      // }, {resolveMsg: null, rejectMsg: '获取地址失败!'})
-      // let redata = []
-      // req.data.forEach((row, n) => {
-      //   redata[n] = {
-      //     label: row.j_areaname,
-      //     value: row.j_areaid,
-      //     data: row,
-      //     id: row.id
-      //   }
-      // })
-      // console.log('市区333', redata)
-      // this.streetslist = redata
-      // this.model.f_iscity = this.findbyid(this.streetslist, this.model.f_street_id).f_iscity
-    },
-    //初始化小区添加小区
-    async initareas(pconditon) {
-      // if(this.usertype){
-      //   pconditon=pconditon+` and  f_special='1' `
-      // }
-      // this.areaslist = []
-      // let HttpReset = new HttpResetClass()
-      // let req = await HttpReset.load('POST', 'rs/sql/address_singleTableOrderBy?pageNo=1&pageSize=100', {
-      //   data: {
-      //     items: '*',
-      //     tablename: 'j_bjqarea',
-      //     orderitem: 'id',
-      //     condition: pconditon
-      //   }
-      // }, {resolveMsg: null, rejectMsg: '获取地址失败!'})
-      // let redata = []
-      // req.data.forEach((row) => {
-      //   redata.push({
-      //     label: row.j_areaname,
-      //     value: row.j_areaid,
-      //     data: row,
-      //     id: row.id
-      //   })
-      // })
-      // console.log('市区666', redata)
-      // if (redata.length>0){
-      //   this.areaslist = redata
-      // }
-    },
-    //省/市/区变化
-    async pcdChange(val) {
-
-      // console.log("省/市/区变化", val)
-      // console.log("省/市/区变化", `  f_pcd_id ='${val}' `)
-      // if (val) {
-      //   //那就把[小区，街道]重新组织一下
-      //   await this.initstreets(`  j_parentid ='${val}' `)
-      //   if (this.model.f_street_id) {
-      //     if (this.findbyid(this.streetslist, this.model.f_street_id)) {
-      //       let pcd_id = this.findbyid(this.streetslist, this.model.f_street_id).f_pcd_id
-      //       if (pcd_id != val) {
-      //         this.model.f_street_id = ''
-      //       }
-      //     } else {
-      //       this.model.f_street_id = ''
-      //     }
-      //
-      //     //那就把[小区，街道]重新组织一下
-      //     if (this.model.f_street_id) {
-      //       await this.initareas(` j_parentid ='${this.model.f_street_id}' `)
-      //       if (this.model.f_residential_area_id) {
-      //         if (this.findbyid(this.areaslist, this.model.f_residential_area_id)) {
-      //           let pcd_id = this.findbyid(this.areaslist, this.model.f_residential_area_id).f_pcd_id
-      //           if (pcd_id != val) {
-      //             this.model.f_residential_area_id = ''
-      //           }
-      //         } else {
-      //           this.model.f_residential_area_id = ''
-      //         }
-      //
-      //       }
-      //     }
-      //   }
-      // }
-      // this.$resetValidation()
-    },
-    //街道变化
-    async streetChange(val) {
-      // console.log("街道变化", val)
-      // if (this.streetslist[0]) {
-      //   var street = ''
-      //   this.streetslist.forEach((item) => {
-      //     if (item.id === val) {
-      //       street = item.label
-      //     }
-      //   })
-      //   this.model.f_address = street
-      // }
-      // if (val) {
-      //   //那就把[小区]重新组织一下
-      //   await this.initareas(` j_parentid ='${val}' `)
-      //   if (this.model.f_residential_area_id) {
-      //     if (this.findbyid(this.areaslist, this.model.f_residential_area_id)) {
-      //       let street_id = this.findbyid(this.areaslist, this.model.f_residential_area_id).f_street_id
-      //       if (street_id != val) {
-      //         this.model.f_residential_area_id = ''
-      //       }
-      //     } else {
-      //       this.model.f_residential_area_id = ''
-      //     }
-      //
-      //   }
-      // }
-      // this.$resetValidation()
-    },
-    // 是否禁用按钮
-    disableButton () {
-      let flag = false
-      for (const field of this.data.fields) {
-        if (field.required && !field.value && !field.hidden && field.value !== 0) {
-          flag = true
-        }
-
-        if (field.type === 'checkbox' && field.required && field.value.length === 0) {
-          flag = true
-        }
-      }
-
-      this.disable_button = flag
-    },
-    // 失去焦点且值最终发生变化触发
-    async onchange (index) {
-      // 是否禁用按钮
-      this.disableButton()
-
-      if (!isEmpty(this.data.fields[index].value)) {
-        // 前缀、后缀
-        if (this.data.fields[index].prefix) {
-          this.data.fields[index].value = this.data.fields[index].prefix + this.data.fields[index].value
-        }
-        if (this.data.fields[index].suffix) {
-          this.data.fields[index].value = this.data.fields[index].value + this.data.fields[index].suffix
-        }
-      }
-
-      // data赋值
-      this.data[this.data.fields[index].field] = this.data.fields[index].value
-
-      if (this.data.fields[index].type === 'datepicker') {
-        this.check_datepicker(index)
-      }
-
-      if (this.data.fields[index].onchange) {
-        this.$dispatch(this.data.fields[index].onchange, index)
-      }
-      this.$dispatch('onchange', index)
-    },
-    // 失去焦点触发，无论值是否发生变化
-    onblur (index) {
-      this.disableButton()
-
-      if (this.data.fields[index].onblur) {
-        this.$dispatch(this.data.fields[index].onblur, index)
-      }
-
-      this.$dispatch('onblur', index)
-    },
-    oninput (index) {
-      // 是否禁用按钮
-      this.disableButton()
-
-      if (this.data.fields[index].oninput) {
-        this.$dispatch(this.data.fields[index].oninput, index)
-      }
-      this.$dispatch('oninput', index)
-    },
-    selectSearch(event, index) {
-      if (this.data.fields[index].selectSearch) {
-        this.$dispatch(this.data.fields[index].selectSearch, event[0], index)
-      }
-      this.$dispatch('selectSearch', event[0], index)
-    },
-    // 点击按钮组按钮
-    async click_but (button) {
-      //报警器区域地址
-      this.data.areaData = this.areaData
-      this.data.templatlng = this.templatlng
-
-      this.disable_button = true
-
-      this.data.fields.forEach(item => {
-        this.data[item.field] = item.value
-      })
-
-      this.data.button = button
-
-      if (button.button_fields && button.button_fields.length > 0) {
-        this.showButModal = true
-        return
-      }
-
-      if (this.data.button.event) {
-        this.$dispatch(this.data.button.event)
-      } else {
-        this.$dispatch('button')
-      }
-
-    },
-    confirmModal () {
-      this.closeModal()
-
-      this.data.button.button_fields.forEach(item => {
-        this.data.button[item.field] = item.value
-      })
-
-      if (this.data.button.event) {
-        this.$dispatch(this.data.button.event)
-      } else {
-        this.$dispatch('button')
-      }
-    },
-    // 关闭模态框
-    closeModal () {
-      this.showButModal = false
-      this.disable_modal_button = false
-    },
-    onbutchange (index) {
-      // 是否禁用按钮
-      this.disableModalButton()
-
-      if (this.data.button.button_fields[index].onchange) {
-        this.$dispatch(this.data.button.button_fields[index].onchange, index)
-      } else {
-        this.$dispatch('onbutchange', index)
-      }
-
-    },
-    onbutblur (index) {
-      this.disableModalButton()
-
-      if (this.data.button.button_fields[index].onblur) {
-        this.$dispatch(this.data.button.button_fields[index].onblur, index)
-      } else {
-        this.$dispatch('onbutblur', index)
-      }
-    },
-    onbutinput (index) {
-      // 是否禁用按钮
-      this.disableModalButton()
-
-      if (this.data.button.button_fields[index].oninput) {
-        this.$dispatch(this.data.button.button_fields[index].oninput, index)
-      } else {
-        this.$dispatch('onbutinput', index)
-      }
-    },
-    disableModalButton () {
-      let flag = false
-
-
-      for (const item of this.data.button.button_fields) {
-        if (item.required && !item.value) {
-          if (item.value === 0) {
-            flag = false
-          } else {
-            flag = true
-          }
-        }
-      }
-
-      this.disable_modal_button = flag
-    },
-    check_datepicker (index) {
-      // 时间格式检测
-      if (!isEmpty(this.data.fields[index].value)) {
-
-        let dateReg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/
-        let timeReg = /^(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/
-        let datetimeReg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/
-        if (this.data.fields[index].format) {
-          if (this.data.fields[index].format === 'yyyy-MM-dd') {
-            if (!dateReg.test(this.data.fields[index].value)) {
-              this.data.fields[index].value = ''
-              this.$showAlert(this.data.fields[index].label + '格式错误如：2021-01-01', 'warning', 2000)
-            }
-          }
-          if (this.data.fields[index].format === 'HH:mm:ss') {
-            if (!timeReg.test(this.data.fields[index].value)) {
-              this.data.fields[index].value = ''
-              this.$showAlert(this.data.fields[index].label + '格式错误如：00:00:00', 'warning', 2000)
-            }
-          }
-          if (this.data.fields[index].format === 'yyyy-MM-dd HH:mm:ss') {
-            if (!datetimeReg.test(this.data.fields[index].value)) {
-              this.data.fields[index].value = ''
-              this.$showAlert(this.data.fields[index].label + '格式错误如：2021-01-01 00:00:00', 'warning', 2000)
-            }
-          }
-        } else {
-          if (!dateReg.test(this.data.fields[index].value)) {
-            this.data.fields[index].value = ''
-            this.$showAlert(this.data.fields[index].label + '格式错误如：2021-01-01', 'warning', 2000)
-          }
-        }
-      }
-    }
-  },
-  events: {
-
-  }
-}
-</script>
-<style>
-.datepicker{
-  width: 100%!important;
-}
-.datepicker-input{
-  background-color: #ffffff!important;
-  width: 100%!important;
-}
-.datepicker-input:disabled{
-  border: 1px solid #DDD!important;
-  color: #ACA899!important;
-  width: 100%!important;
-}
-</style>
-<style scoped>
-th{
-  font-size: 15px !important;
-  text-align: center !important;
-  background-color: #dfedfb!important;
-  color: #666666 !important;
-  font-family: PINGFANG-BOLD !important;
-  font-weight: normal!important;
-}
-/*清除model中的浮动*/
-.clearfix:after,.clearfix:before{
-  display: table;
-}
-.clearfix:after{
-  clear: both;
-}
-
-.input_view{
-  padding: 8px;
-  background-color: #ffffff;
-  border-radius: 2px;
-  border: solid 1px #c7c7c7!important;
-  color: #333333!important;
-  font-size: 15px!important;
-}
-
-.input_view[readonly]{
-  border: 1px solid #DDD!important;
-  color:#ACA899!important;
-}
-.input_view:disabled{
-  border: 1px solid #DDD!important;
-  color:#ACA899!important;
-}
-
-.control-label-justify {
-  display: inline-block;
-  vertical-align: top;
-  width: 110px;
-  text-align: justify;
-  font-family: PingFang-SC-Bold;
-}
-
-.control-label-justify::after {
-  content: "";
-  display: inline-block;
-  width: 100%;
-  overflow: hidden;
-  height: 0;
-}
-
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-}
-
-input[type="number"] {
-  -moz-appearance: textfield;
-}
-
-</style>
+<template>
+  <div class="select-overspread" style="background-color: #ffffff;padding: 20px;overflow: scroll">
+    <validator name='v' @valid="$emit('valid')" @invalid="$emit('invalid')">
+    <form class="form-horizontal">
+      <div class="form-group">
+        <div v-for="(index,item) in data.fields">
+          <!--input-->
+          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
+               v-if="(item.type==='input' || item.type==='number'||item.type === 'tel'||item.type === 'email') && !item.hidden && (item.device === 'pc' || !item.device) && ( item.label != '证件号码')&&( item.label !== '身份证') "
+               :class="[item.required && !(item.value) ? 'has-error' : '',item.bootstraped ? item.bootstraped + ' form-group':'col-sm-4 form-group']">
+            <label :style="item.label_style ? item.label_style : ''"
+                   :class="item.label_bootstraped ? item.label_bootstraped+' control-label-justify control-label' : 'control-label-justify control-label col-sm-6'">{{item.label}}</label>
+            <div :style="item.value_style ? item.value_style:''"
+                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
+              <input class="form-control input_view" style=""
+                     :type="item.type"
+                     v-model="data.fields[index].value"
+                     :placeholder="item.placeholder"
+                     :value="data.fields[index].value"
+                     :readonly="item.readonly"
+                     :disabled="item.disabled"
+                     @change="onchange(index)"
+                     @blur="onblur(index)"
+                     @input="oninput(index)"
+              />
+            </div>
+          </div>
+
+          <!--input-->
+          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
+               v-if="(data.f_credentials != '身份证' && item.label === '证件号码')"
+               :class="[item.required && !(item.value) ? 'has-error' : '',item.bootstraped ? item.bootstraped + ' form-group':'col-sm-4 form-group']">
+            <label :style="item.label_style ? item.label_style : ''"
+                   :class="item.label_bootstraped ? item.label_bootstraped+' control-label-justify control-label' : 'control-label-justify control-label col-sm-6'">{{item.label}}</label>
+            <div :style="item.value_style ? item.value_style:''"
+                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
+              <input class="form-control input_view" style=""
+                     :type="item.type"
+                     v-model="data.fields[index].value"
+                     :placeholder="item.placeholder"
+                     :value="data.fields[index].value"
+                     :readonly="item.readonly"
+                     :disabled="item.disabled"
+                     @change="onchange(index)"
+                     @blur="onblur(index)"
+                     @input="oninput(index)"
+              />
+            </div>
+          </div>
+          <!--身份证验证-->
+          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
+               v-if="(item.label==='身份证') || (data.f_credentials === '身份证' && item.label === '证件号码')"
+               :class="[$v.f_idnumber2.identityCardValid ? 'has-error' : '',item.bootstraped ? item.bootstraped + ' form-group':'col-sm-4 form-group']">
+            <label :style="item.label_style ? item.label_style : ''"
+                   :class="item.label_bootstraped ? item.label_bootstraped+' control-label-justify control-label' : 'control-label-justify control-label col-sm-6'">{{item.label}}</label>
+            <div :style="item.value_style ? item.value_style:''"
+                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
+              <input class="form-control input_view" style=""
+                     :type="item.type"
+                     maxlength="18"
+                     v-model="data.fields[index].value"
+                     :placeholder="item.placeholder"
+                     :value="data.fields[index].value"
+                     v-validate:f_idnumber2='{identityCardValid: true}'
+                     :readonly="item.readonly"
+                     :disabled="item.disabled"
+                     @change="onchange(index)"
+                     @blur="onblur(index)"
+                     @input="oninput(index)"
+              />
+            </div>
+          </div>
+
+
+
+
+          <!--时间datepicker-->
+          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
+               v-if="item.type==='datepicker' && !item.hidden && (item.device === 'pc' || !item.device)"
+               :class="[item.required && !(item.value) ? 'has-error' : '',item.bootstraped ? item.bootstraped+' form-group':'col-sm-4 form-group']">
+            <label
+              :class="item.label_bootstraped ? item.label_bootstraped+' control-label-justify control-label' : 'control-label control-label-justify col-sm-6'">{{item.label}}</label>
+            <div :style="item.value_style ? item.value_style:''"
+                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
+              <datepicker
+                @change="onchange(index)"
+                @blur="onblur(index)"
+                :placeholder="item.placeholder"
+                :value.sync="data.fields[index].value"
+                :format="item.format ? item.format : 'yyyy-MM-dd'"
+                v-model="data.fields[index].value"
+                :readonly="item.readonly"
+                :disabled="item.disabled"
+                :show-reset-button="reset">
+              </datepicker>
+            </div>
+          </div>
+
+          <!--textarea-->
+          <div :style="item.style ? item.style+';margin-bottom: 20px':'margin-bottom: 20px'"
+               v-if="item.type==='textarea' && !item.hidden && (item.device === 'pc' || !item.device)"
+               :class="[item.required && !(item.value) ? 'has-error' : '',item.bootstraped?item.bootstraped+' form-group':'col-sm-12 form-group']">
+            <label :style="item.label_style ? item.label_style : ''"
+                   :class="item.label_bootstraped ? item.label_bootstraped + ' control-label-justify control-label' : 'control-label-justify control-label col-sm-3'">{{item.label}}</label>
+            <div :style="item.value_style ? item.value_style:''"
+                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-10'">
+              <textarea
+                :readonly="item.readonly"
+                :disabled="item.disabled"
+                class="form-control input_view"
+                style="width: 100%;height: 100%"
+                :rows="item.rows"
+                v-model="data.fields[index].value"
+                :value="data.fields[index].value"
+                @change="onchange(index)"
+                @blur="onblur(index)"
+                @input="oninput(index)"
+              >
+              </textarea>
+            </div>
+          </div>
+
+          <!--select-->
+          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
+               v-if="item.type==='select' && !item.hidden && (item.device === 'pc' || !item.device) && !item.multiple"
+               :class="[item.required && !(item.value) ? 'has-error' : '',item.bootstraped?item.bootstraped+' form-group':'col-sm-4 form-group']">
+            <label
+              :class="item.label_bootstraped ? item.label_bootstraped+' control-label control-label-justify':'control-label-justify control-label col-sm-6'">{{item.label}}</label>
+            <div :style="item.value_style ? item.value_style:''"
+                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
+              <input-select
+                class="select select_list"
+                @blur="onblur(index)"
+                @change="onchange(index)"
+                @select-search="selectSearch($arguments,index)"
+                :readonly="item.readonly"
+                :disable="item.disabled"
+                :value.sync="data.fields[index].value"
+                v-model="data.fields[index].value"
+                :options='data.fields[index].options'
+                :valueSingle="true"></input-select>
+            </div>
+          </div>
+          <!--select 多选-->
+          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
+               v-if="item.type==='select' && !item.hidden && (item.device === 'pc' || !item.device)&& item.multiple"
+               :class="[item.required && !(item.value) ? 'has-error' : '',item.bootstraped?item.bootstraped+' form-group':'col-sm-4 form-group']">
+            <label
+              :class="item.label_bootstraped ? item.label_bootstraped+' control-label control-label-justify':'control-label-justify control-label col-sm-6'">{{item.label}}</label>
+            <div :style="item.value_style ? item.value_style:''"
+                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
+              <v-select
+                width="100%"
+                class="select select_list"
+                @blur="onblur(index)"
+                @change="onchange(index)"
+                @select-search="selectSearch($arguments,index)"
+                :readonly="item.readonly"
+                :disable="item.disabled"
+                :value.sync="data.fields[index].value"
+                v-model="data.fields[index].value"
+                :options='data.fields[index].options'
+                :multiple="data.fields[index].multiple"
+                :valueSingle="true"></v-select>
+            </div>
+          </div>
+
+          <!--checkbox-->
+          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
+               v-if="item.type==='checkbox' && !item.hidden && (item.device === 'pc' || !item.device)"
+               :class="[item.required && item.value.length === 0 ? 'has-error' : '',item.bootstraped?item.bootstraped+' form-group':'col-sm-4 form-group']">
+            <label v-if="item.label"
+                   :class="item.label_bootstraped?item.label_bootstraped+' control-label control-label-justify':'control-label-justify control-label col-sm-6'">{{item.label}}</label>
+            <div :style="item.value_style ? item.value_style:''"
+                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
+              <label class="checkbox-inline" v-for="(index2,row) in item.options">
+                <input type="checkbox" class=""
+                       :readonly="data.fields[index].readonly"
+                       :disabled="data.fields[index].disabled"
+                       v-model="data.fields[index].value"
+                       :value="data.fields[index].options[index2].value"
+                       @change="onchange(index)"
+                       @blur="onblur(index)">
+                {{row.label}}
+              </label>
+            </div>
+          </div>
+          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
+               v-if="item.type==='button'"
+               :class="[item.required && !(item.value) ? 'has-error' : '',item.bootstraped ? item.bootstraped + ' form-group':'col-sm-4 form-group']">
+            <div :style="item.value_style ? item.value_style:''"
+                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
+              <button class="button_search button_spacing" :style="item.button_styles" @click.prevent="printclick(index)" :hidden="item.hidden">
+                {{ item.name }}
+              </button>
+            </div>
+          </div>
+          <div :style="item.style ? item.style+';height: 40px;margin-bottom: 20px':'height: 40px;margin-bottom: 20px'"
+               v-if="item.type==='Abutton'"
+               :class="[item.required && !(item.value) ? 'has-error' : '',item.bootstraped ? item.bootstraped + ' form-group':'col-sm-4 form-group']">
+            <div :style="item.value_style ? item.value_style:''"
+                 :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-6'">
+              <a type="button" class="btn btn-info head-but"
+                 :href="item.href" download>{{item.name}}</a>
+            </div>
+          </div>
+        </div>
+        <!--区域地址联动-->
+        <div>
+          <res-area-select-group
+            v-if="(data.f_apply_type === '报警器报建' || data.f_apply_type === '工商业报警器报建') && data.defname === '工程施工' && data.title === '工程施工' && data.f_sub_state !='完工'"
+            labelstyle = "control-label"
+            @shiji-select = "getSelectShijiValue"
+            @xian-select = "getSelectXianValue"
+            @shequ-select = "getSelectShequValue"
+          >
+          </res-area-select-group>
+        </div>
+
+        <gaode-map
+          v-if="(data.f_apply_type === '报警器报建' || data.f_apply_type === '工商业报警器报建') && data.defname === '工程施工' && data.title === '工程施工' && data.f_sub_state !='完工'"
+        >
+
+        </gaode-map>
+
+      </div>
+      <!-- onetomany -->
+      <div class="" v-for="(index,item) in data.onetomany">
+        <onetomany :selectdata="data" :onetomany="item" :index="index" v-if="item.device === 'pc' || !item.device"></onetomany>
+      </div>
+
+      <div v-for="(i,item) in data.components">
+        <h3  v-if="item.device === 'pc'"><nbr >{{item.title}}</nbr></h3>
+        <component v-if="item.device === 'pc' || !item.device" :is="item.name" :selectdata="data" :mark="item.mark"></component>
+      </div>
+
+      <!--自定义组件-->
+      <slot>
+      </slot>
+      <!--公司等属性-->
+      <div class="col-sm-12 form-group text-center" style="padding-top:8px">
+        <div class="col-sm-3 form-group center-block">
+          <label class="col-sm-5">所属公司：</label>
+          <div class="col-sm-6" style="text-align: left">
+            {{model.orgs}}
+          </div>
+        </div>
+        <div class="col-sm-3 form-group center-block">
+          <label class="col-sm-5">部门：</label>
+          <div class="col-sm-6" style="text-align: left">
+            {{model.parentname}}
+          </div>
+        </div>
+        <div class="col-sm-3 form-group center-block">
+          <label class="col-sm-5">操作人：</label>
+          <div class="col-sm-6 " style="text-align: left">
+            {{model.operator}}
+          </div>
+        </div>
+        <div class="col-sm-3 form-group center-block">
+          <label class="col-sm-5">操作日期：</label>
+          <div class="col-sm-6" style="text-align: left">
+            {{model.operate_date}}
+          </div>
+        </div>
+      </div>
+      <!-- 按钮组 -->
+      <div class="from-group col-sm-12 text-center">
+        <!-- 按钮组 -->
+        <button v-for="(index,button) in data.buttons"
+                :disabled="(button.disabled && disable_button)"
+                style="min-width:100px"
+                :class="button.disabled && disable_button ? 'btn btn-default button_spacing' : 'btn btn-primary button_spacing'"
+                v-if="!button.hidden && button.button_name !=='提交'&& button.button_name !=='确认'"
+                @click.prevent="click_but(button)"
+        >
+          {{button.button_name}}
+        </button>
+        <button v-for="(index,button) in data.buttons"
+                :disabled="(button.disabled && disable_button) || (!$v.valid)"
+                style="min-width:100px"
+                :class="button.disabled && disable_button || (!$v.valid) ? 'btn btn-default button_spacing' : 'btn btn-primary button_spacing'"
+                v-if="!button.hidden && (button.button_name ==='提交'||button.button_name ==='确认')"
+                @click.prevent="click_but(button)"
+        >
+          {{button.button_name}}
+        </button>
+      </div>
+
+      <!-- 按钮模态框 -->
+      <modal v-if="showButModal" :show.sync="showButModal" backdrop="false" large>
+        <header slot="modal-header" class="modal-header">
+          <button type="button" class="close" @click="closeModal()"><span>&times;</span></button>
+          <span class="modal-title"><font
+            size="3">{{data.button.button_name}}</font></span>
+        </header>
+        <article slot="modal-body" class="modal-body clearfix">
+          <div class="form-group" style="padding: 0 150px">
+            <div v-for="(index,item) in data.button.button_fields">
+              <div :style="item.style ? item.style : ''" :class="[item.required && !(item.value) ? 'has-error' : '', item.bootstraped ? item.bootstraped + ' form-group' : 'form-group']"
+                   v-if="(item.type==='input' || item.type==='number'||item.type === 'tel'||item.type === 'email') && !item.hidden && (item.device === 'pc' || !item.device)">
+                <label :style="item.label_style ? item.label_style : ''"
+                       :class="item.label_bootstraped ? item.label_bootstraped + ' control-label-justify control-label' : 'control-label-justify control-label col-sm-6'">{{item.label}}</label>
+                <div :style="item.value_style ? item.value_style : ''"
+                     :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-9'">
+                  <input class="form-control input_view"
+                         :placeholder="item.placeholder"
+                         :type="item.type"
+                         v-model="item.value"
+                         :value="item.value"
+                         :readonly="item.readonly"
+                         :disabled="item.disabled"
+                         @change="onbutchange(index)"
+                         @blur="onbutblur(index)"
+                         @input="onbutinput(index)"
+                  />
+                </div>
+              </div>
+
+              <!--时间datepicker-->
+              <div :style="item.style ? item.style : ''" :class="[item.required && !(item.value) ? 'has-error' : '', item.bootstraped ? item.bootstraped + ' form-group':'form-group']"
+                   v-if="item.type==='datepicker' && !item.hidden && (item.device === 'pc' || !item.device)">
+                <label :style="item.label_style ? item.label_style : ''"
+                       :class="item.label_bootstraped ? item.label_bootstraped + ' control-label-justify control-label' : 'control-label-justify control-label col-sm-6'">{{item.label}}</label>
+                <div :style="item.value_style ? item.value_style : ''"
+                     :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-9'">
+                  <datepicker
+                    :placeholder="item.placeholder"
+                    :value.sync="item.value"
+                    v-model="item.value"
+                    :readonly="item.readonly"
+                    :disabled="item.disabled"
+                    :format="item.format ? item.format : 'yyyy-MM-dd'"
+                    :show-reset-button="true"
+                    @change="onbutchange(index)"
+                    @blur="onbutblur(index)"
+                  ></datepicker>
+                </div>
+              </div>
+
+              <!--select-->
+              <div :style="item.style ? item.style : ''" :class="[item.required && !(item.value) ? 'has-error' : '', item.bootstraped ? item.bootstraped + ' form-group':'form-group']"
+                   v-if="item.type==='select' && !item.hidden && (item.device === 'pc' || !item.device)">
+                <label :style="item.label_style ? item.label_style : ''"
+                       :class="item.label_bootstraped ? item.label_bootstraped + ' control-label-justify control-label' : 'control-label-justify control-label col-sm-6'">{{item.label}}</label>
+                <div :style="item.value_style ? item.value_style : ''"
+                     :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-9'">
+                  <input-select
+                    class="select select_list"
+                    :value.sync="item.value"
+                    v-model="item.value"
+                    :options='item.options'
+                    :readonly="item.readonly"
+                    :disable="item.disabled"
+                    :valueSingle="true"
+                    @blur="onbutblur(index)"
+                    @change="onbutchange(index)"
+                  ></input-select>
+                </div>
+              </div>
+
+              <!--textarea-->
+              <div :style="item.style ? item.style : ''" :class="[item.required && !(item.value) ? 'has-error' : '', item.bootstraped ? item.bootstraped + ' form-group':'form-group']"
+                   v-if="item.type==='textarea' && !item.hidden && (item.device === 'pc' || !item.device)">
+                <label :style="item.label_style ? item.label_style : ''"
+                       :class="item.label_bootstraped ? item.label_bootstraped + ' control-label-justify control-label' : 'control-label-justify control-label col-sm-6'">{{item.label}}</label>
+                <div :style="item.value_style ? item.value_style : ''"
+                     :class="item.value_bootstraped ? item.value_bootstraped : 'col-sm-9'">
+                <textarea
+                  class="form-control input_view"
+                  style="width: 100%;height: 100%"
+                  v-model="item.value"
+                  :value="item.value"
+                  :rows="item.rows"
+                  :readonly="item.readonly"
+                  :disabled="item.disabled"
+                  @change="onbutchange(index)"
+                  @blur="onbutblur(index)"
+                  @input="onbutinput(index)"
+                ></textarea>
+                </div>
+              </div>
+            </div>
+          </div>
+        </article>
+        <footer slot="modal-footer" class="modal-footer">
+          <button :class="disable_modal_button ? 'btn btn-default':'btn btn-primary'"
+                  :disabled="disable_modal_button" type="button" @click="confirmModal()">
+            确认
+          </button>
+        </footer>
+      </modal>
+    </form>
+    </validator>
+  </div>
+</template>
+<script>
+import Vue from 'vue'
+import {isEmpty} from '../../../components/Util'
+import {HttpResetClass} from 'vue-client'
+// Date格式化
+Date.prototype.Format = function (fmt) {
+  var o = {
+    'M+': this.getMonth() + 1, // 月份
+    'd+': this.getDate(), // 日
+    'H+': this.getHours(), // 小时
+    'm+': this.getMinutes(), // 分
+    's+': this.getSeconds(), // 秒
+    'q+': Math.floor((this.getMonth() + 3) / 3), // 季度
+    'S': this.getMilliseconds() // 毫秒
+  }
+  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
+  for (var k in o) {
+    if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
+  }
+  return fmt
+}
+
+export default {
+  title: '报建业务通用组件',
+  props: {
+    data: {
+      type: Object
+    }
+  },
+  data () {
+    return {
+      model: {}, // 公司等属性
+      disable_button: true, // 控制按钮禁用
+      disable_modal_button: true, // 控制按钮禁用
+      //初始化省市区数据
+      pcdslist: [],
+      //初始化街道数据
+      streetslist: [],
+      //初始化街道数据
+      areaslist: [],
+      showButModal: false,
+      areaData:{
+        sjvalue:'',
+        xianvalue:'',
+        sqvalue:'',
+      },
+      templatlng: {
+        gaodetemplng: "",
+        gaodetemplat: "",
+        baidutemplng: "",
+        baidutemplat: ""
+      }
+    }
+  },
+  watch: {
+    deep: true
+  },
+  computed: {
+
+  },
+  created () {
+    // 初始化数据
+    this.initializtion()
+    if (this.data.readyEvent) {
+      this.$dispatch(this.data.readyEvent)
+    }
+    this.$dispatch('initializtionView')
+  },
+  methods: {
+    printclick (index) {
+    },
+    // 初始化数据
+    initializtion () {
+      for (const item of this.data.fields) {
+        this.data[item.field] = item.value
+      }
+
+      // 是否禁用按钮
+      this.disableButton()
+      // 公司等属性初始化
+      if (this.data.orgs) {
+        this.model.orgs = this.data.orgs
+      } else {
+        this.model.orgs = this.$login.f.orgs
+      }
+      if (this.data.parentname) {
+        this.model.parentname = this.data.parentname
+      } else {
+        this.model.parentname = this.$login.f.f_department_name
+      }
+      if (this.data.operate_date) {
+        this.model.operate_date = this.data.operate_date
+      } else {
+        this.model.operate_date = new Date().Format('yyyy-MM-dd')
+      }
+      if (this.data.operator) {
+        this.model.operator = this.data.operator
+      } else {
+        this.model.operator = this.$login.f.name
+      }
+
+      this.initpcds(` j_orgid = '${this.$login.f.orgid}'`)
+    },
+    async getSelectShijiValue(sjvalue,sjlable) {
+      this.areaData.sjvalue = sjvalue
+      console.log("这是父级接收的市级值:",sjvalue,sjlable)
+      this.data.areaData = this.areaData
+
+      // 是否禁用按钮
+      this.disableButton()
+    },
+    async getSelectXianValue(xianvalue,xianlable) {
+      this.areaData.xianvalue = xianvalue
+      this.data.areaData = this.areaData
+      console.log("这是父级接收的县级值:",xianvalue,xianlable)
+
+      // 是否禁用按钮
+      this.disableButton()
+    },
+    async getSelectShequValue(sqvalue,sqlable) {
+      this.areaData.sqvalue = sqvalue
+      this.data.areaData = this.areaData
+      console.log("这是父级接收的社区值:",sqvalue,sqlable)
+
+      // 是否禁用按钮
+      this.disableButton()
+    },
+    //初始化省市区,添加街道
+    async initpcds(pconditon) {
+      // console.log('initpcds', pconditon)
+      // this.pcdslist = []
+      // let HttpReset = new HttpResetClass()
+      // let req = await HttpReset.load('POST', 'rs/sql/address_singleTableOrderBy?pageNo=1&pageSize=9999999', {
+      //   data: {
+      //     items: '*',
+      //     tablename: 'j_bjqpcd',
+      //     orderitem: 'id',
+      //     condition: pconditon
+      //   }
+      // }, {resolveMsg: null, rejectMsg: '获取地址失败!'})
+      // let redata = []
+      // req.data.forEach((row, n) => {
+      //   redata[n] = {
+      //     label: row.j_areaname,
+      //     value: row.j_areaid,
+      //     data: row,
+      //     id: row.id
+      //   }
+      // })
+      // console.log('市区', redata)
+      // this.pcdslist = redata
+    },
+    //初始化街道 添加小区
+    async initstreets(pconditon) {
+      // console.log('市区32', pconditon)
+      // this.streetslist = []
+      // let HttpReset = new HttpResetClass()
+      // let req = await HttpReset.load('POST', 'rs/sql/address_singleTableOrderBy', {
+      //   data: {
+      //     items: '*',
+      //     tablename: 'j_bjqstreet',
+      //     orderitem: 'id',
+      //     condition: pconditon
+      //   }
+      // }, {resolveMsg: null, rejectMsg: '获取地址失败!'})
+      // let redata = []
+      // req.data.forEach((row, n) => {
+      //   redata[n] = {
+      //     label: row.j_areaname,
+      //     value: row.j_areaid,
+      //     data: row,
+      //     id: row.id
+      //   }
+      // })
+      // console.log('市区333', redata)
+      // this.streetslist = redata
+      // this.model.f_iscity = this.findbyid(this.streetslist, this.model.f_street_id).f_iscity
+    },
+    //初始化小区添加小区
+    async initareas(pconditon) {
+      // if(this.usertype){
+      //   pconditon=pconditon+` and  f_special='1' `
+      // }
+      // this.areaslist = []
+      // let HttpReset = new HttpResetClass()
+      // let req = await HttpReset.load('POST', 'rs/sql/address_singleTableOrderBy?pageNo=1&pageSize=100', {
+      //   data: {
+      //     items: '*',
+      //     tablename: 'j_bjqarea',
+      //     orderitem: 'id',
+      //     condition: pconditon
+      //   }
+      // }, {resolveMsg: null, rejectMsg: '获取地址失败!'})
+      // let redata = []
+      // req.data.forEach((row) => {
+      //   redata.push({
+      //     label: row.j_areaname,
+      //     value: row.j_areaid,
+      //     data: row,
+      //     id: row.id
+      //   })
+      // })
+      // console.log('市区666', redata)
+      // if (redata.length>0){
+      //   this.areaslist = redata
+      // }
+    },
+    //省/市/区变化
+    async pcdChange(val) {
+
+      // console.log("省/市/区变化", val)
+      // console.log("省/市/区变化", `  f_pcd_id ='${val}' `)
+      // if (val) {
+      //   //那就把[小区，街道]重新组织一下
+      //   await this.initstreets(`  j_parentid ='${val}' `)
+      //   if (this.model.f_street_id) {
+      //     if (this.findbyid(this.streetslist, this.model.f_street_id)) {
+      //       let pcd_id = this.findbyid(this.streetslist, this.model.f_street_id).f_pcd_id
+      //       if (pcd_id != val) {
+      //         this.model.f_street_id = ''
+      //       }
+      //     } else {
+      //       this.model.f_street_id = ''
+      //     }
+      //
+      //     //那就把[小区，街道]重新组织一下
+      //     if (this.model.f_street_id) {
+      //       await this.initareas(` j_parentid ='${this.model.f_street_id}' `)
+      //       if (this.model.f_residential_area_id) {
+      //         if (this.findbyid(this.areaslist, this.model.f_residential_area_id)) {
+      //           let pcd_id = this.findbyid(this.areaslist, this.model.f_residential_area_id).f_pcd_id
+      //           if (pcd_id != val) {
+      //             this.model.f_residential_area_id = ''
+      //           }
+      //         } else {
+      //           this.model.f_residential_area_id = ''
+      //         }
+      //
+      //       }
+      //     }
+      //   }
+      // }
+      // this.$resetValidation()
+    },
+    //街道变化
+    async streetChange(val) {
+      // console.log("街道变化", val)
+      // if (this.streetslist[0]) {
+      //   var street = ''
+      //   this.streetslist.forEach((item) => {
+      //     if (item.id === val) {
+      //       street = item.label
+      //     }
+      //   })
+      //   this.model.f_address = street
+      // }
+      // if (val) {
+      //   //那就把[小区]重新组织一下
+      //   await this.initareas(` j_parentid ='${val}' `)
+      //   if (this.model.f_residential_area_id) {
+      //     if (this.findbyid(this.areaslist, this.model.f_residential_area_id)) {
+      //       let street_id = this.findbyid(this.areaslist, this.model.f_residential_area_id).f_street_id
+      //       if (street_id != val) {
+      //         this.model.f_residential_area_id = ''
+      //       }
+      //     } else {
+      //       this.model.f_residential_area_id = ''
+      //     }
+      //
+      //   }
+      // }
+      // this.$resetValidation()
+    },
+    // 是否禁用按钮
+    disableButton () {
+      let flag = false
+      for (const field of this.data.fields) {
+        if (field.required && !field.value && !field.hidden && field.value !== 0) {
+          flag = true
+        }
+
+        if (field.type === 'checkbox' && field.required && field.value.length === 0) {
+          flag = true
+        }
+      }
+
+      this.disable_button = flag
+    },
+    // 失去焦点且值最终发生变化触发
+    async onchange (index) {
+      // 是否禁用按钮
+      this.disableButton()
+
+      if (!isEmpty(this.data.fields[index].value)) {
+        // 前缀、后缀
+        if (this.data.fields[index].prefix) {
+          this.data.fields[index].value = this.data.fields[index].prefix + this.data.fields[index].value
+        }
+        if (this.data.fields[index].suffix) {
+          this.data.fields[index].value = this.data.fields[index].value + this.data.fields[index].suffix
+        }
+      }
+
+      // data赋值
+      this.data[this.data.fields[index].field] = this.data.fields[index].value
+
+      if (this.data.fields[index].type === 'datepicker') {
+        this.check_datepicker(index)
+      }
+
+      if (this.data.fields[index].onchange) {
+        this.$dispatch(this.data.fields[index].onchange, index)
+      }
+      this.$dispatch('onchange', index)
+    },
+    // 失去焦点触发，无论值是否发生变化
+    onblur (index) {
+      this.disableButton()
+
+      if (this.data.fields[index].onblur) {
+        this.$dispatch(this.data.fields[index].onblur, index)
+      }
+
+      this.$dispatch('onblur', index)
+    },
+    oninput (index) {
+      // 是否禁用按钮
+      this.disableButton()
+
+      if (this.data.fields[index].oninput) {
+        this.$dispatch(this.data.fields[index].oninput, index)
+      }
+      this.$dispatch('oninput', index)
+    },
+    selectSearch(event, index) {
+      if (this.data.fields[index].selectSearch) {
+        this.$dispatch(this.data.fields[index].selectSearch, event[0], index)
+      }
+      this.$dispatch('selectSearch', event[0], index)
+    },
+    // 点击按钮组按钮
+    async click_but (button) {
+      //报警器区域地址
+      this.data.areaData = this.areaData
+      this.data.templatlng = this.templatlng
+
+      this.disable_button = true
+
+      this.data.fields.forEach(item => {
+        this.data[item.field] = item.value
+      })
+
+      this.data.button = button
+
+      if (button.button_fields && button.button_fields.length > 0) {
+        this.showButModal = true
+        return
+      }
+
+      if (this.data.button.event) {
+        this.$dispatch(this.data.button.event)
+      } else {
+        this.$dispatch('button')
+      }
+
+    },
+    confirmModal () {
+      this.closeModal()
+
+      this.data.button.button_fields.forEach(item => {
+        this.data.button[item.field] = item.value
+      })
+
+      if (this.data.button.event) {
+        this.$dispatch(this.data.button.event)
+      } else {
+        this.$dispatch('button')
+      }
+    },
+    // 关闭模态框
+    closeModal () {
+      this.showButModal = false
+      this.disable_modal_button = false
+    },
+    onbutchange (index) {
+      // 是否禁用按钮
+      this.disableModalButton()
+
+      if (this.data.button.button_fields[index].onchange) {
+        this.$dispatch(this.data.button.button_fields[index].onchange, index)
+      } else {
+        this.$dispatch('onbutchange', index)
+      }
+
+    },
+    onbutblur (index) {
+      this.disableModalButton()
+
+      if (this.data.button.button_fields[index].onblur) {
+        this.$dispatch(this.data.button.button_fields[index].onblur, index)
+      } else {
+        this.$dispatch('onbutblur', index)
+      }
+    },
+    onbutinput (index) {
+      // 是否禁用按钮
+      this.disableModalButton()
+
+      if (this.data.button.button_fields[index].oninput) {
+        this.$dispatch(this.data.button.button_fields[index].oninput, index)
+      } else {
+        this.$dispatch('onbutinput', index)
+      }
+    },
+    disableModalButton () {
+      let flag = false
+
+
+      for (const item of this.data.button.button_fields) {
+        if (item.required && !item.value) {
+          if (item.value === 0) {
+            flag = false
+          } else {
+            flag = true
+          }
+        }
+      }
+
+      this.disable_modal_button = flag
+    },
+    check_datepicker (index) {
+      // 时间格式检测
+      if (!isEmpty(this.data.fields[index].value)) {
+
+        let dateReg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/
+        let timeReg = /^(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/
+        let datetimeReg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-5]\d$/
+        if (this.data.fields[index].format) {
+          if (this.data.fields[index].format === 'yyyy-MM-dd') {
+            if (!dateReg.test(this.data.fields[index].value)) {
+              this.data.fields[index].value = ''
+              this.$showAlert(this.data.fields[index].label + '格式错误如：2021-01-01', 'warning', 2000)
+            }
+          }
+          if (this.data.fields[index].format === 'HH:mm:ss') {
+            if (!timeReg.test(this.data.fields[index].value)) {
+              this.data.fields[index].value = ''
+              this.$showAlert(this.data.fields[index].label + '格式错误如：00:00:00', 'warning', 2000)
+            }
+          }
+          if (this.data.fields[index].format === 'yyyy-MM-dd HH:mm:ss') {
+            if (!datetimeReg.test(this.data.fields[index].value)) {
+              this.data.fields[index].value = ''
+              this.$showAlert(this.data.fields[index].label + '格式错误如：2021-01-01 00:00:00', 'warning', 2000)
+            }
+          }
+        } else {
+          if (!dateReg.test(this.data.fields[index].value)) {
+            this.data.fields[index].value = ''
+            this.$showAlert(this.data.fields[index].label + '格式错误如：2021-01-01', 'warning', 2000)
+          }
+        }
+      }
+    }
+  },
+  events: {
+
+  }
+}
+</script>
+<style>
+.datepicker{
+  width: 100%!important;
+}
+.datepicker-input{
+  background-color: #ffffff!important;
+  width: 100%!important;
+}
+.datepicker-input:disabled{
+  border: 1px solid #DDD!important;
+  color: #ACA899!important;
+  width: 100%!important;
+}
+</style>
+<style scoped>
+th{
+  font-size: 15px !important;
+  text-align: center !important;
+  background-color: #dfedfb!important;
+  color: #666666 !important;
+  font-family: PINGFANG-BOLD !important;
+  font-weight: normal!important;
+}
+/*清除model中的浮动*/
+.clearfix:after,.clearfix:before{
+  display: table;
+}
+.clearfix:after{
+  clear: both;
+}
+
+.input_view{
+  padding: 8px;
+  background-color: #ffffff;
+  border-radius: 2px;
+  border: solid 1px #c7c7c7!important;
+  color: #333333!important;
+  font-size: 15px!important;
+}
+
+.input_view[readonly]{
+  border: 1px solid #DDD!important;
+  color:#ACA899!important;
+}
+.input_view:disabled{
+  border: 1px solid #DDD!important;
+  color:#ACA899!important;
+}
+
+.control-label-justify {
+  display: inline-block;
+  vertical-align: top;
+  width: 110px;
+  text-align: justify;
+  font-family: PingFang-SC-Bold;
+}
+
+.control-label-justify::after {
+  content: "";
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  height: 0;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+</style>