apply-clients 3.4.3 → 3.4.4

package/src/components/android/AppServiceView.vue

@@ -1,566 +1,745 @@
-<template>
-  <div class="form-horizontal select-overspread">
-    <div v-for="(index,item) in data.fields">
-      <!--input-->
-      <div :style="item.style ? item.style : ''"
-           v-if="(item.type==='input' || item.type==='number'||item.type === 'tel'||item.type === 'email') && !item.hidden && (item.device === 'app' || !item.device)"
-           :class="[item.required && !(item.value) ? 'apply-has-error' : '', item.bootstraped ? item.bootstraped + ' form-group app-input':'col-xs-12 form-group app-input']">
-        <label class="control-label-justify">{{item.label}}</label>
-        <div :style="item.value_style ? item.value_style:''"
-             :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
-          <input class="" style="width: 100%"
-                 :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>
-
-      <!--select-->
-      <div :style="item.style ? item.style : ''"
-           v-if="item.type==='select' && !item.hidden  && (item.device === 'app' || !item.device)"
-           :class="[item.required && !(item.value) ? 'apply-has-error' : '', item.bootstraped ? item.bootstraped + ' form-group app-input':'col-xs-12 form-group app-input']">
-        <label class="control-label-justify">{{item.label}}</label>
-        <div :style="item.value_style ? item.value_style:''"
-             :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
-          <v-select
-            class="select" width="100%" align="right"
-            :placeholder="item.placeholder"
-            :search="item.search"
-            close-on-select value-single
-            :options="data.fields[index].options"
-            v-model="data.fields[index].value"
-            :value.sync="data.fields[index].value"
-            @blur="onblur(index)"
-            @change="onchange(index)"
-            :readonly="item.readonly"
-            :disabled="item.disabled"
-          ></v-select>
-        </div>
-      </div>
-
-      <!--时间datepicker-->
-      <div :style="item.style ? item.style : ''"
-           v-if="item.type==='datepicker' && !item.hidden  && (item.device === 'app' || !item.device)"
-           :class="[item.required && !(item.value) ? 'apply-has-error' : '', item.bootstraped ? item.bootstraped+' form-group app-input':'col-xs-12 form-group app-input']">
-        <label class="control-label-justify">{{item.label}}</label>
-        <div class="form-group" :style="item.value_style ? item.value_style:''"
-             :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
-          <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="true">
-          </datepicker>
-        </div>
-      </div>
-
-      <!--textarea-->
-      <div :style="item.style ? item.style : ''"
-           v-if="item.type==='textarea' && !item.hidden  && (item.device === 'app' || !item.device)"
-           :class="[item.required && !(item.value) ? 'apply-has-error' : '', item.bootstraped?item.bootstraped+' form-group app-input':'col-xs-12 form-group app-input']">
-        <label class="control-label-justify">{{item.label}}</label>
-        <div :style="item.value_style ? item.value_style:''"
-             :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
-              <textarea
-                :readonly="item.readonly"
-                :disabled="item.disabled"
-                class="" rows="1"
-                style="width: 100%;height: 100%"
-                v-model="data.fields[index].value"
-                :value="data.fields[index].value"
-                @change="onchange(index)"
-                @blur="onblur(index)"
-                @input="oninput(index)"
-              ></textarea>
-        </div>
-      </div>
-
-      <!--checkbox-->
-      <div :style="item.style ? item.style : ''"
-           v-if="item.type==='checkbox' && !item.hidden && (item.device === 'app' || !item.device)"
-           :class="[item.required && item.value.length === 0 ? 'apply-has-error' : '',item.bootstraped?item.bootstraped+' form-group app-input':'col-xs-12 form-group app-input']">
-        <label class="control-label-justify">{{item.label}}</label>
-        <div :style="item.value_style ? item.value_style:''"
-             :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
-          <label class="" 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>
-
-    <div class="col-sm-12 col-xs-12">
-      <accordion one-at-a-time="true">
-        <panel v-for="(i,item) in data.onetomany" :header="item.title" :is-open="false" type="primary">
-          <app-onetomany :onetomany="item" :index="i"></app-onetomany>
-        </panel>
-        <panel v-for="(i,item) in data.components" :header="item.title" :is-open="false" type="primary" v-if="item.device === 'app' || !item.device">
-          <component :is="item.name" :selectdata="data" :mark="item.mark"></component>
-        </panel>
-      </accordion>
-    </div>
-
-    <!--自定义组件-->
-    <slot></slot>
-
-    <!-- 按钮组 -->
-    <div class="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"
-              @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" >
-          <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'">{{item.label}}</label>
-              <div :style="item.value_style ? item.value_style : ''"
-                   :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
-                <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'">{{item.label}}</label>
-              <div :style="item.value_style ? item.value_style : ''"
-                   :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
-                <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'">{{item.label}}</label>
-              <div :style="item.value_style ? item.value_style : ''"
-                   :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
-                <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'">{{item.label}}</label>
-              <div :style="item.value_style ? item.value_style : ''"
-                   :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
-                <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>
-  </div>
-</template>
-<script>
-import Vue from 'vue'
-import {isEmpty} from "../Util";
-// 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
-    },
-    showprint: {
-      type: Boolean,
-      default: true
-    }
-  },
-  data () {
-    return {
-      model: {}, // 公司等属性
-      disable_button: true, // 控制按钮禁用
-      disable_modal_button: true, // 控制按钮禁用
-      showButModal: false
-    }
-  },
-  watch: {
-    deep: true
-  },
-  computed: {
-
-  },
-  created () {
-    // 初始化数据
-    this.initializtion()
-    if (this.data.readyEvent) {
-      this.$dispatch(this.data.readyEvent)
-    }
-    this.$dispatch('initializtionView')
-  },
-  methods: {
-    // 初始化数据
-    initializtion () {
-      for (const item of this.data.fields) {
-        this.data[item.field] = item.value
-      }
-      // 是否禁用按钮
-      this.disableButton()
-    },
-    // 是否禁用按钮
-    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 === 'select' && field.value === '否' && field.value_no_disable) {
-          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)
-    },
-    // 点击按钮组按钮
-    async click_but (button) {
-      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 = true
-    },
-    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 scoped>
-  .control-label-justify {
-    width: 30%;
-    text-align: justify;
-    text-align-last: justify;
-    font-family: PingFang-SC-Bold;
-    float: left;
-  }
-  .button_spacing{margin: 0px  0px 0px 10px;}
-</style>
-<style lang="less">
-.apply-has-error {
-  border-bottom: 1px solid #a94442;
-}
-.app-input {
-  label {
-    float: left;
-  }
-  .select {
-    button {
-      border: none;
-      outline: none;
-      text-align: left;
-      .btn-placeholder {
-        color: #ACA899
-      }
-    }
-  }
-  .datepicker {
-    .form-control:focus {
-      border: none!important;
-      outline: none!important;
-      -webkit-box-shadow: none;
-      box-shadow: none;
-    }
-  }
-  textarea {
-    padding: 8px 10px;
-    border: none;
-    outline: none;
-    margin: 0px;
-  }
-  input[readonly]{
-    color: #ACA899!important;
-    background: #FFFFFF;
-    border: none;
-    outline: none;
-  }
-  input:disabled{
-    color: #ACA899!important;
-    background: #FFFFFF;
-    border: none;
-    outline: none;
-  }
-  textarea[readonly]{
-    color: #ACA899!important;
-    background: #FFFFFF;
-    border: none;
-    outline: none;
-  }
-  textarea:disabled{
-    color: #ACA899!important;
-    background: #FFFFFF;
-    border: none;
-    outline: none;
-  }
-}
-</style>
+<template>
+  <div class="form-horizontal select-overspread">
+    <validator name='v' @valid="$emit('valid')" @invalid="$emit('invalid')">
+    <!--<form>-->
+    <div v-for="(index,item) in data.fields">
+      <!--input-->
+      <div :style="item.style ? item.style : ''"
+           v-if="(item.type==='input' || item.type==='number'||item.type === 'tel'||item.type === 'email') && !item.hidden && (item.device === 'app' || !item.device) && (item.label != '证件号码')&&(item.label != '身份证') && (item.label != '用户电话')"
+           :class="[item.required && !(item.value) ? 'apply-has-error' : '', item.bootstraped ? item.bootstraped + ' form-group app-input':'col-xs-12 form-group app-input']">
+        <label class="control-label-justify">{{item.label}}</label>
+        <div :style="item.value_style ? item.value_style:''"
+             :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
+          <input class="" style="width: 100%"
+                 :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 : ''"
+           v-if="(data.fields[index-1].value ==='营业执照'||data.fields[index-1].value ==='军官证')&& (item.label === '证件号码')"
+           :class="[item.required && !(item.value) ? 'apply-has-error' : '', item.bootstraped ? item.bootstraped + ' form-group app-input':'col-xs-12 form-group app-input']">
+        <label class="control-label-justify">{{item.label}}</label>
+        <div :style="item.value_style ? item.value_style:''"
+             :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
+          <input class="" style="width: 100%"
+                 :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 : ''"
+       v-if="(item.label==='身份证') || (item.label === '证件号码' && data.fields[index-1].value ==='身份证')"
+           :class="[$v.f_idnumber2.identityCardValid ? 'apply-has-error' : '',item.bootstraped ? item.bootstraped + ' form-group app-input':'col-xs-12 form-group app-input']">
+        <label class="control-label-justify">{{item.label}}</label>
+        <div :style="item.value_style ? item.value_style:''"
+             :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
+          <input class="" style="width: 100%"
+                 :type="item.type"
+                 maxlength="18"
+                 v-model="data.fields[index].value"
+                 :placeholder="item.placeholder"
+                 :value="data.fields[index].value"
+                 :readonly="item.readonly"
+                 v-validate:f_idnumber2='{identityCardValid: true}'
+                 @change="onchange(index)"
+                 @blur="onblur(index)"
+                 @input="oninput(index)"
+          />
+        </div>
+      </div>
+
+
+      <!--input手机号验证-->
+      <div :style="item.style ? item.style : ''"
+           v-if="item.label === '用户电话'"
+           :class="[$v.f_user_phone.minlength || $v.f_user_phone.maxlength ? 'apply-has-error' : '',item.bootstraped ? item.bootstraped + ' form-group app-input':'col-xs-12 form-group app-input']">
+        <label class="control-label-justify">{{item.label}}</label>
+        <div :style="item.value_style ? item.value_style:''"
+             :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
+          <input class="" style="width: 100%"
+                 maxlength="18"
+                 type="number"
+                 onKeypress="return(/[\d\.]/.test(String.fromCharCode(event.keyCode)))"
+                 oninput="if(value.length > 11) value=value.slice(0,11)"
+                 v-validate:f_user_phone="{minlength: 7, maxlength: 11  }"
+                 v-model="data.fields[index].value"
+                 :placeholder="item.placeholder"
+                 :value="data.fields[index].value"
+                 :readonly="item.readonly"
+                 @change="onchange(index)"
+                 @blur="onblur(index)"
+                 @input="oninput(index)"
+          />
+        </div>
+      </div>
+
+      <!--select-->
+      <div :style="item.style ? item.style : ''"
+           v-if="item.type==='select' && !item.hidden  && (item.device === 'app' || !item.device)"
+           :class="[item.required && !(item.value) ? 'apply-has-error' : '', item.bootstraped ? item.bootstraped + ' form-group app-input':'col-xs-12 form-group app-input']">
+        <label class="control-label-justify">{{item.label}}</label>
+        <div :style="item.value_style ? item.value_style:''"
+             :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
+          <v-select
+            class="select" width="100%" align="right"
+            :placeholder="item.placeholder"
+            :search="item.search"
+            close-on-select value-single
+            @select-search="selectSearch($arguments,index)"
+            :options="data.fields[index].options"
+            v-model="data.fields[index].value"
+            :value.sync="data.fields[index].value"
+            @blur="onblur(index)"
+            @change="onchange(index)"
+            :readonly="item.readonly"
+            :disabled="item.disabled"
+          ></v-select>
+        </div>
+      </div>
+
+      <!--时间datepicker-->
+      <div :style="item.style ? item.style : ''"
+           v-if="item.type==='datepicker' && !item.hidden  && (item.device === 'app' || !item.device)"
+           :class="[item.required && !(item.value) ? 'apply-has-error' : '', item.bootstraped ? item.bootstraped+' form-group app-input':'col-xs-12 form-group app-input']">
+        <label class="control-label-justify">{{item.label}}</label>
+        <div class="form-group" :style="item.value_style ? item.value_style:''"
+             :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
+          <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="true">
+          </datepicker>
+        </div>
+      </div>
+
+      <!--textarea-->
+      <div :style="item.style ? item.style : ''"
+           v-if="item.type==='textarea' && !item.hidden  && (item.device === 'app' || !item.device)"
+           :class="[item.required && !(item.value) ? 'apply-has-error' : '', item.bootstraped?item.bootstraped+' form-group app-input':'col-xs-12 form-group app-input']">
+        <label class="control-label-justify">{{item.label}}</label>
+        <div :style="item.value_style ? item.value_style:''"
+             :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
+              <textarea
+                :readonly="item.readonly"
+                :disabled="item.disabled"
+                class="" rows="1"
+                style="width: 100%;height: 100%"
+                v-model="data.fields[index].value"
+                :value="data.fields[index].value"
+                @change="onchange(index)"
+                @blur="onblur(index)"
+                @input="oninput(index)"
+              ></textarea>
+        </div>
+      </div>
+
+      <!--checkbox-->
+      <div :style="item.style ? item.style : ''"
+           v-if="item.type==='checkbox' && !item.hidden && (item.device === 'app' || !item.device)"
+           :class="[item.required && item.value.length === 0 ? 'apply-has-error' : '',item.bootstraped?item.bootstraped+' form-group app-input':'col-xs-12 form-group app-input']">
+        <label class="control-label-justify">{{item.label}}</label>
+        <div :style="item.value_style ? item.value_style:''"
+             :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
+          <label class="" 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>
+    <div class="col-sm-12 col-xs-12" id="test11">
+      <accordion one-at-a-time="true">
+        <panel v-for="(i,item) in data.onetomany" :header="item.title" :is-open="false" type="primary">
+          <app-onetomany :onetomany="item" :index="i" :selectdata="data"></app-onetomany>
+        </panel>
+        <panel v-for="(i,item) in data.components" :header="item.title" :is-open="true" type="primary" v-if="item.device === 'app' || !item.device">
+          <component :is="item.name" :selectdata="data" :mark="item.mark"></component>
+        </panel>
+      </accordion>
+    </div>
+
+    <!--自定义组件-->
+    <slot>
+
+    </slot>
+
+    <!-- 按钮组 -->
+    <div class="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" >
+          <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'">{{item.label}}</label>
+              <div :style="item.value_style ? item.value_style : ''"
+                   :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
+                <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'">{{item.label}}</label>
+              <div :style="item.value_style ? item.value_style : ''"
+                   :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
+                <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'">{{item.label}}</label>
+              <div :style="item.value_style ? item.value_style : ''"
+                   :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
+                <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'">{{item.label}}</label>
+              <div :style="item.value_style ? item.value_style : ''"
+                   :class="item.value_bootstraped ? item.value_bootstraped : 'col-xs-8'">
+                <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>-->
+  </div>
+</template>
+<script>
+import Vue from 'vue'
+import {isEmpty} from "../Util";
+// 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
+    },
+    showprint: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      model: {}, // 公司等属性
+      disable_button: true, // 控制按钮禁用
+      disable_modal_button: true, // 控制按钮禁用
+      showButModal: false,
+      areaData:{
+        sjvalue:'',
+        xianvalue:'',
+        sqvalue:'',
+        mapvalue:'',
+      }
+    }
+  },
+  watch: {
+    deep: true
+  },
+  computed: {
+
+  },
+  created () {
+    // 初始化数据
+    this.initializtion()
+    if (this.data.readyEvent) {
+      this.$dispatch(this.data.readyEvent)
+    }
+    this.$dispatch('initializtionView')
+  },
+  methods: {
+    // 初始化数据
+    initializtion () {
+      for (const item of this.data.fields) {
+        this.data[item.field] = item.value
+      }
+      // 是否禁用按钮
+      this.disableButton()
+    },
+    async getSelectShijiValue(sjvalue,sjlable) {
+
+      this.areaData.sjvalue = sjvalue
+      console.log("这是父级接收的市级值:",sjvalue,sjlable)
+      this.data.areaData = this.areaData
+      console.log(this.areaData)
+      // 是否禁用按钮
+      this.disableButton()
+    },
+    async getSelectXianValue(xianvalue,xianlable) {
+
+      this.areaData.xianvalue = xianvalue
+      this.data.areaData = this.areaData
+      console.log("这是父级接收的县级值:",xianvalue,xianlable)
+      console.log(this.areaData)
+
+      // 是否禁用按钮
+      this.disableButton()
+    },
+    async getSelectShequValue(sqvalue,sqlable) {
+      this.areaData.sqvalue = sqvalue
+      this.data.areaData = this.areaData
+      console.log(this.areaData)
+      console.log("这是父级接收的社区值:",sqvalue,sqlable)
+
+      // 是否禁用按钮
+      this.disableButton()
+    },
+    // 是否禁用按钮
+    disableButton () {
+      var flag = false
+      for (const field of this.data.fields) {
+        if (field.required && !field.value && !field.hidden && field.value !== 0) {
+          flag = true
+        }
+
+        // 任何选择框只要是否都不能提交
+        if (field.type === 'select' && field.value === '否' && field.value_no_disable) {
+          flag = true
+        }
+
+        if (field.type === 'checkbox' && field.required && field.value.length === 0) {
+          flag = true
+        }
+      }
+       //区域下拉框必选 流程模式为报警器报建              工商业报警器报建
+      if ((this.data.f_apply_type === '报警器报建' || this.data.f_apply_type === '工商业报警器报建') && this.data.defname === '工程施工' && this.data.title === '工程施工' && this.data.f_sub_state !='完工'){
+        if (!flag){
+          if (this.areaData.sjvalue ==null || this.areaData.sjvalue.length ==0 || this.areaData.sqvalue == null || this.areaData.sqvalue.length ==0
+            || this.areaData.xianvalue == null || this.areaData.xianvalue == 0){
+            console.log("区域为空禁止提交:",this.areaData)
+            flag = true
+          }
+          if (this.areaData.mapvalue ==null  || this.areaData.mapvalue ==0){
+            console.log("坐标为空禁止提交map:",this.areaData.mapvalue)
+            flag = true
+          }
+          for (const fields of this.areaData.mapvalue) {
+           //  console.log("报警器数据:",fields.f_bjq_lng)
+            if (fields.f_bjq_lng ==null  || fields.f_bjq_lng.length ==0){
+              console.log("坐标为空禁止提交44444:",this.areaData.mapvalue)
+              flag = true
+            }
+          }
+        }
+      }
+
+      this.disable_button = flag
+    },
+    // 失去焦点且值最终发生变化触发
+    async onchange (index) {
+      // 是否禁用按钮
+      this.disableButton()
+      // this.disablebtu()
+
+      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)
+    },
+    disablebtu(){
+      this.flag = true
+    },
+    oninput (index) {
+      // 是否禁用按钮
+      this.disableButton()
+
+      if (this.data.fields[index].oninput) {
+        this.$dispatch(this.data.fields[index].oninput, index)
+      }
+      this.$dispatch('oninput', index)
+    },
+    // 点击按钮组按钮
+    async click_but (button) {
+      //报警器区域地址
+      this.data.areaData = this.areaData
+
+      if (this.data.defname === '通气点火') {
+
+      this.$showMessage(`请确认表号是否正确`).then((res) => {
+
+
+      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')
+      }
+
+      })
+
+      }
+     else{
+      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 = true
+    },
+    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)
+          }
+        }
+      }
+    },
+    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)
+    }
+  },
+  events: {
+  }
+}
+</script>
+<style scoped>
+  .control-label-justify {
+    width: 30%;
+    text-align: justify;
+    text-align-last: justify;
+    font-family: PingFang-SC-Bold;
+    float: left;
+  }
+  .button_spacing{margin: 0px  0px 0px 10px;}
+</style>
+<style lang="less">
+.apply-has-error {
+  border-bottom: 1px solid #a94442;
+}
+.app-input {
+  label {
+    float: left;
+  }
+  .select {
+    button {
+      border: none;
+      outline: none;
+      text-align: left;
+      .btn-placeholder {
+        color: #ACA899
+      }
+    }
+  }
+  .datepicker {
+    .form-control:focus {
+      border: none!important;
+      outline: none!important;
+      -webkit-box-shadow: none;
+      box-shadow: none;
+    }
+  }
+  textarea {
+    padding: 8px 10px;
+    border: none;
+    outline: none;
+    margin: 0px;
+  }
+  input[readonly]{
+    color: #ACA899!important;
+    background: #FFFFFF;
+    border: none;
+    outline: none;
+  }
+  input:disabled{
+    color: #ACA899!important;
+    background: #FFFFFF;
+    border: none;
+    outline: none;
+  }
+  textarea[readonly]{
+    color: #ACA899!important;
+    background: #FFFFFF;
+    border: none;
+    outline: none;
+  }
+  textarea:disabled{
+    color: #ACA899!important;
+    background: #FFFFFF;
+    border: none;
+    outline: none;
+  }
+}
+</style>