apply-clients 3.4.88-7 → 3.4.88-71

package/build/dev-server.js

@@ -12,6 +12,10 @@ var ldap = 'http://221.193.244.147:8400'
 var applyinstall = 'http://221.193.244.147:8400'
 
 var proxyTable = {
+
+  '/webapps/applyinstall/excel': {
+    target: applyinstall
+  },
   '/rs/logic/getSaleInitData': {
     target: ldap
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "apply-clients",
-  "version": "3.4.88-7",
+  "version": "3.4.88-71",
   "description": "报建前端模块",
   "main": "src/index.js",
   "directories": {
@@ -97,7 +97,7 @@
     "system-clients": "3.2.63",
     "system-phone": "1.2.80-49",
     "url-loader": "^0.5.7",
-    "vue-client": "1.24.80",
+    "vue-client": "1.24.93",
     "vue-hot-reload-api": "^1.2.0",
     "vue-html-loader": "^1.0.0",
     "vue-loader": "^8.2.1",

package/src/apply.js

@@ -97,7 +97,10 @@ export default function (filiale) {
   // 点火界面
   Vue.component('ignition-list-manage', (resolve) => { require(['./components/product/ignition/IgnitionListManage.vue'], resolve) })
   Vue.component('ignition-record', (resolve) => { require(['./components/product/ignition/IgnitionRecord.vue'], resolve) })
-
+  // 材料查看
+  Vue.component('material-manger', (resolve) => { require(['./components/product/Material/Materialmanger'], resolve) })
+  Vue.component('material-user', (resolve) => { require(['./components/product/Material/Materialuser'], resolve) })
+  Vue.component('apply-material-list', (resolve) => { require(['./components/product/Material/Materiallist'], resolve) })
 
   Vue.component('business-apply', (resolve) => { require(['./components/product/Business/BusinessApply'], resolve) })
   Vue.component('civil-apply', (resolve) => { require(['./components/product/Business/CivilApply'], resolve) })

package/src/components/android/AppSign.vue

@@ -40,7 +40,6 @@ export default {
       this.$emit('sign-clean')
     },
     sign () {
-      debugger
       this.type='手机签字'
       console.log('==============签字打印this============',this)
       this.delAudioFile(this.f_sign_path)

package/src/components/android/Ignition/VentilationIgnition.vue

@@ -1,25 +1,6 @@
 <template>
   <div>
     <tabset v-ref:tabs :close="false" nav-style="tabs nav-apply-tab" :active.sync="active">
-      <tab header='任务地图'>
-        <div class="auto tip">
-          <p>当前任务数量：{{ tasknumber }}</p>
-          <p>当前任务点：{{labelmarksarray.length}}</p>
-        </div>
-        <amap-location
-          :islocation="true"
-          :locationzoomcenter="false"
-          :usenative="true"
-          :isshowsearch="false"
-          :mylocationinfo="false"
-          :islocationclearmark="false"
-          :isshowmapmodel="false"
-          :locationwindow="false"
-          mapmodel="dragMarker"
-          :labelmarksarray="labelmarksarray"
-          @diyspotmouseclick="diyspotmouseclick"
-        ></amap-location>
-      </tab>
       <tab header='任务列表'>
         <div class="p-10">
           <criteria-paged :model="model" v-ref:cp>
@@ -122,13 +103,6 @@
                     <p class="col-xs-3 text-left font"><b>地&emsp;&emsp;址：</b></p>
                     <p class="col-xs-9 text-left input-font">{{ row.f_address }}</p>
                   </div>
-                  <div class="col-xs-12">
-                    <p class="col-xs-3 text-left font"><b>定位地址：</b></p>
-                    <p class="col-xs-9 text-left input-font">
-                      {{ row.f_location_address }}
-                      <svg v-if="row.f_location_address" @click.prevent="$parent.$parent.$parent.$parent.$parent.openAmap(row)" style="width: 25px;height: 25px;position: absolute;" t="1628575336648" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3201" width="200" height="200"><path d="M512 956h-1.1c-10.9 0-20.5-6.9-24.7-17L369.9 654.1 85 537.8c-10.1-4.1-16.8-13.7-17.2-24.6-0.4-10.9 5.6-21 15.3-25.9l833-416.5c10.7-5.3 23.6-3.2 32.1 5.2s10.5 21.4 5.2 32.1L536.8 940.9c-4.7 9.4-14.3 15.1-24.8 15.1zM162.7 509.6l239 97.6c6.9 2.8 12.4 8.3 15.2 15.2l97.6 239 351.9-703.8-703.7 352z" fill="#666666" p-id="3202"></path></svg>
-                    </p>
-                  </div>
                   <div class="col-xs-12">
                     <p class="col-xs-3 text-left font"><b>报建类型：</b></p>
                     <p class="col-xs-9 text-left input-font">
@@ -163,8 +137,6 @@ export default {
       model: new PagedList(`${this.$androidUtil.getProxyUrl()}/rs/sql/getWaitIgnitionTaskApp`, 20, null),
       // model: new PagedList(`rs/sql/getWaitIgnitionTask`, 20, null),
       criteriaShow: false,
-      tasknumber: 0,
-      labelmarksarray: [],
       active: 0,
       f_lat: null,
       f_lng: null,
@@ -177,7 +149,6 @@ export default {
   },
   methods: {
     refresh () {
-      this.getWaitIgnitionTaskDot()
       this.getArea()
       this.search()
     },
@@ -193,7 +164,7 @@ export default {
       row.f_apply_type = '通气点火'
       // row.f_process_id = row.f_blobid
       console.log('----------------------++++++++++++++++++',row.f_process_id)
-      this.$goto('ventilation-ignition-handle', {selectdata: row}, 'self', _this.refresh)
+      this.$goto('app-ignition-handle', {selectdata: row}, 'self', _this.refresh)
     },
     dialNumber (tel) {
       this.$showMessage(`是否拨打电话：${tel}`, ['confirm']).then((res) => {
@@ -202,68 +173,6 @@ export default {
         }
       })
     },
-    // 导航
-    openAmap (row) {
-      HostApp.openThirdPartyMap({
-        lon: row.f_lng,
-        lat: row.f_lat,
-        address: row.f_location_address
-      })
-    },
-    diyspotmouseclick (data) {
-      console.log('************************************')
-      console.log(data)
-      this.f_lat = data.f_lat
-      this.f_lng = data.f_lng
-      this.search()
-
-      this.active = 1
-    },
-    async getWaitIgnitionTaskDot () {
-      this.tasknumber = 0
-      let http = new HttpResetClass()
-      let data = {
-        userid: Vue.user.id
-        // userid: this.$login.f.id
-      }
-      let res = await http.load(
-        'POST',
-        `${this.$androidUtil.getProxyUrl()}/rs/sql/getWaitIgnitionTaskDot`,
-        // `rs/sql/getWaitIgnitionTaskDot`,
-        {data: data},
-        {
-          resolveMsg: null,
-          rejectMsg: '任务点获取失败！！！'
-      })
-      this.labelmarksarray = res.data.map(item => {
-        this.tasknumber += item.count
-        return {
-          data: {
-            data: item,
-            content: `<p>任务数：${item.count}</p>`
-          },
-          position: [item.f_lng, item.f_lat],
-          isclearmarker: false,
-          islabel: false
-        }
-      })
-      // for (const item of res.data) {
-      //   this.tasknumber += item.count
-      //   if (isEmpty(item.f_lng) || isEmpty(item.f_lat)) {
-      //     continue
-      //   }
-      //
-      //   this.labelmarksarray.push({
-      //     data: {
-      //       data: item,
-      //       content: `<p>任务数：${item.count}</p>`
-      //     },
-      //     position: [item.f_lng, item.f_lat],
-      //     isclearmarker: true,
-      //     islabel: false
-      //   })
-      // }
-    },
     searchCondition (args) {
       args.condition += `and ir.f_ignition_operator_id = '${Vue.user.id}' and ir.f_state = '正在进行'`
       // args.condition += `and ir.f_ignition_operator_id = '${this.$login.f.id}' and ir.f_state = '正在进行'`
@@ -272,13 +181,8 @@ export default {
         // args.condition = args.condition.replace(`ir.f_ignition_operator_id = \'${this.$login.f.id}\'`, 'ir.f_shared_dispatch = \'是\'');
         args.condition = args.condition.replace(`ir.f_ignition_operator_id = \'${Vue.user.id}\'`, 'ir.f_shared_dispatch = \'是\'');
       }
-      if (!isEmpty(this.f_lat) && !isEmpty(this.f_lng)) {
-        args.condition += `and ui.f_lat = '${this.f_lat}' and ui.f_lng = '${this.f_lng}'`
-      }
       this.model.search(args.condition, args.model)
 
-      this.f_lng = null
-      this.f_lat = null
     },
     // 查询
     search () {
@@ -313,14 +217,14 @@ export default {
     async getArea () {
       let data = {
         tablename: 't_area_address',
-        condition: `f_filiale = '${Vue.user.f_fengongsi}' and f_area_status = '启用'`
+        condition: `f_filiale = '${Vue.user.orgid}' and f_area_status = '启用'`
         // condition: `f_filiale = '${this.$login.f.f_fengongsi}' and f_area_status = '启用'`
       }
       let http = new HttpResetClass()
       let res = await http.load(
         'POST',
         // `rs/sql/applySingleTable`,
-        `${this.$androidUtil.getProxyUrl()}/rs/sql/applySingleTable`,
+        `${this.$androidUtil.getProxyUrl()}/rs/sql/apply_singleTable`,
         {data: data},
         {resolveMsg: null, rejectMsg: '小区查询失败！！！'}
       )

package/src/components/android/Ignition/VentilationIgnitionHandle.vue

@@ -113,9 +113,6 @@
       </div>
       <div class="col-xs-12 auto">
         <accordion one-at-a-time="true">
-          <panel header="设备查看" :is-open="false" type="primary">
-            <app-devices-management :selectdata="selectdata" :mark = 1 ></app-devices-management>
-          </panel>
           <panel header="拍照" :is-open="false" type="primary">
             <app-take-pic
               :blobid="selectdata.f_blobid"
@@ -128,14 +125,6 @@
           </panel>
         </accordion>
       </div>
-      <div class="col-xs-12 form-group auto" v-if="selectdata.f_meter_classify === '物联网表'">
-        <div class="col-xs-5">
-          <button style="width: 100%" class="btn btn-success" @click.prevent="openModal('退出强制状态')">退出强制状态</button>
-        </div>
-        <div class="col-xs-5 col-xs-offset-2">
-          <button style="width: 100%" class="btn btn-danger" @click.prevent="openModal('关阀')">强制关阀</button>
-        </div>
-      </div>
       <div class="col-xs-12 auto">
         <accordion one-at-a-time="true">
           <panel header="用户签字" :is-open="false" type="primary">
@@ -155,35 +144,6 @@
   </div>
 
   <validator name="v">
-    <modal v-if="showModal" :show.sync="showModal" v-ref:modal :large="true" :backdrop="false">
-      <header slot="modal-header" class="modal-header">
-        <button type="button" class="close" @click="closeModal"><span>&times;</span></button>
-        <h4 class="modal-title">{{type}}操作</h4>
-      </header>
-      <article slot="modal-body" class="modal-body clearfix">
-        <div class="form-group row vertical-center">
-          <div class="col-xs-12" v-if="type !== '关阀'" :class="[$v.reason.required ? 'apply-has-error' : '']">
-            <input
-              type="checkbox"
-              class=""
-              :value.sync="boxReason"
-              v-model="boxReason"
-              :value="boxReason"
-              @change="changeAllChecked()"
-              ></input>{{ reasonOptions[0].label }}
-          </div>
-          <div class="col-xs-12" :class="[$v.reason.required ? 'apply-has-error' : '']">
-            <textarea rows="2" style="width: 100%;height: 100%"
-              :placeholder="type+'操作原因'" v-validate:reason = "['required']"
-              v-model="reason"  :value="reason"
-            ></textarea>
-          </div>
-        </div>
-      </article>
-      <footer slot="modal-footer" class="modal-footer">
-        <button type="button" class="btn btn-primary" @click="onOffValve" :disabled="!$v.valid">确认</button>
-      </footer>
-    </modal>
   </validator>
 </template>
 <script>
@@ -276,7 +236,6 @@ export default {
       this.$dispatch('confirm')
     },
     async search(){
-      console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>", this.selectdata.f_process_id + 'cs' + this.selectdata.defname + 'cs' + this.selectdata.f_apply_type)
       let data = {
         tablename: 't_ignition_record',
         condition: `f_userinfo_id = '${this.selectdata.f_userinfo_id}'`
@@ -284,7 +243,7 @@ export default {
       let http = new HttpResetClass()
       let res = await http.load(
         'POST',
-        `${this.$androidUtil.getProxyUrl()}/rs/sql/applySingleTable`,
+        `${this.$androidUtil.getProxyUrl()}/rs/sql/apply_singleTable`,
         {data: data},
         {resolveMsg: null, rejectMsg: '点火记录查询失败！！！'}
       )
@@ -292,67 +251,6 @@ export default {
         this.model.f_ignition_trouble = res.data[0].f_ignition_trouble
         this.model.f_ignition_remarks = res.data[0].f_ignition_remarks
       }
-    },
-    async onOffValve () {
-      let http = new HttpResetClass()
-      let data = null
-      let res = null
-
-      if (this.type !== '退出强制状态') {
-        data = {
-          condition: `f_meternumber = '${this.selectdata.f_meternumber}'`,
-          contentData: {
-            isOpen: this.type === '开阀' ? 1 : 0
-          },
-          inputtor: Vue.user.name,
-          instructTitle: this.type,
-          instructType: '阀门控制',
-          meterBrandName: this.selectdata.f_meter_brand
-        }
-        res = await http.load(
-          'POST',
-          `${this.$androidUtil.getProxyUrl()}/rs/logic/saveInstruct`,
-          {data: data},
-          {resolveMsg: null, rejectMsg: `${this.type}失败！！！`}
-        )
-      }
-
-      data = {
-        f_user_id: this.selectdata.f_user_id,
-        f_userinfo_id: this.selectdata.f_userinfo_id,
-        record: {
-          f_filiale: Vue.user.f_fengongsi,
-          f_instruct_meta_data: this.type === '退出强制状态' ? '退出强制阀控' : '进入强制阀控',
-          f_instruct_title: this.type === '退出强制状态' ? '退出强制阀控' : '进入强制阀控',
-          f_instruct_type: '阀门控制',
-          f_meternumber: this.selectdata.f_meternumber,
-          f_operator: Vue.user.name,
-          f_outlets: this.selectdata.f_outlets,
-          f_reason: this.reason,
-          f_user_id: this.selectdata.f_user_id,
-          f_userinfo_id: this.selectdata.f_userinfo_id
-        },
-        state: this.type === '退出强制状态' ? 0 : 1
-      }
-
-      res = await http.load(
-        'POST',
-        `${this.$androidUtil.getProxyUrl()}/rs/logic/updateNetWorkValve`,
-        {data: data},
-        {resolveMsg: '执行成功！！！', rejectMsg: `执行失败！！！`}
-      )
-
-      this.closeModal()
-    },
-    openModal (type) {
-      this.type = type
-      this.showModal = true
-    },
-    closeModal () {
-      this.showModal = false
-      this.type = null
-
-      this.reason = null
     }
   },
   events: {

package/src/components/android/Process/AppServiceControl.vue

@@ -606,11 +606,18 @@ export default {
           })
         }
       }
-
       // 消除双向绑定，避免子组件（显示层）数据更改，父组件（控制层）也更改
       let temp = JSON.parse(JSON.stringify(this.selectdata))
-
       this.show_data = temp
+      for (const item of this.show_data.fields) {
+        if(item.label=='气价名称' && !isEmpty(this.show_data.f_price_name)){
+          item.options.forEach(x=>{
+            if(x.label==this.show_data.f_price_name){
+              item.value=x.value
+            }
+          })
+        }
+      }
       if(!this.show_data.showfei){
         this.$set('show_data.showfei', '未收费')
       }
@@ -1196,8 +1203,7 @@ export default {
       this.setLabelValue('用气性质', stairPrice.f_gasproperties)
       this.setLabelValue('价格', stairPrice.f_price)
       this.setLabelValue('客户类型', stairPrice.f_user_type)
-
-      this.show_data.f_price_id = stairPrice.f_price_id
+      this.show_data.f_price_id = stairPrice.id
       this.show_data.f_price_name = stairPrice.f_price_name
     },
     // 是否购买保险

package/src/components/product/ApplyCharge/ApplyChargeList.vue

@@ -52,11 +52,17 @@
             </div>
           </div>
           <div class="row" v-show="$parent.$parent.criteriaShow">
+            <div class="form-group col-sm-3">
+              <label class="font_normal_body">用户编号：</label>
+              <input type="text" style="width:60%" class="input_search" placeholder='用户编号' v-model="model.f_userinfo_code"
+                     v-on:keyup.enter="$parent.$parent.search()"
+                     condition="f_userinfo_code like '%{}%'">
+            </div>
             <div class="form-group col-sm-3">
               <label class="font_normal_body">工程编号：</label>
               <input type="text" style="width: 60%" class="input_search" placeholder='工程编号' v-model="model.f_apply_num"
                      v-on:keyup.enter="$parent.$parent.search()"
-                     condition="a.f_apply_num = '{}'">
+                     condition="a.f_apply_num like '%{}%'">
             </div>
             <div class="form-group col-sm-3">
               <label class="font_normal_body">合同编号：</label>

package/src/components/product/Function/InstallInfoSelect.vue

@@ -17,7 +17,7 @@
               <label class="font_normal_body">工程编号：</label>
               <input type="text" style="width:60%" class="input_search" placeholder='工程编号' v-model="model.f_apply_num"
                      v-on:keyup.enter="$parent.$parent.search()"
-                     condition="f_apply_num = '{}'">
+                     condition="f_apply_num like '%{}%'">
             </div>
             <div class="form-group col-sm-3">
               <label class="font_normal_body">客户名称：</label>
@@ -37,6 +37,12 @@
             </div>
           </div>
           <div class="row" v-show="$parent.$parent.criteriaShow">
+            <div class="form-group col-sm-3">
+              <label class="font_normal_body">用户编号：</label>
+              <input type="text" style="width:60%" class="input_search" placeholder='用户编号' v-model="model.f_userinfo_code"
+                     v-on:keyup.enter="$parent.$parent.search()"
+                     condition="f_userinfo_code like '%{}%'">
+            </div>
             <div class="form-group col-sm-3">
               <label class="font_normal_body">联系电话：</label>
               <input type="text" style="width:60%" class="input_search" placeholder='联系电话' v-model="model.f_phone"

package/src/components/product/Function/Service/FunctionServiceControl.vue

@@ -228,9 +228,61 @@
             item.disabled = false
           }
         }
-      }
+      },
+      async getPrice (f_price_id) {
+        console.log('=======================')
+        console.log(f_price_id)
+
+        let data = {
+          condition: `sp.f_filialeid = '${this.$login.f.orgid}'`
+        }
+        // if(this.Pricetype==='机表'){
+        //   data.condition=`sp.f_custom = '机表'`
+        // }
+        // if(this.Pricetype==='非机表'){
+        //   data.condition=`sp.f_custom = '非机表'`
+        // }
+
+        if (!isEmpty(f_price_id)) {
+          data.condition = `sp.f_filialeid = '${this.$login.f.orgid}' and sp.f_price_id = ${f_price_id}`
+        }
+        let http = new HttpResetClass()
+        let res = await http.load(
+          'POST',
+          `rs/sql/applyGetPrice`,
+          {data: data},
+          {resolveMsg: null, rejectMsg: '气价查询失败！！！'}
+        )
+
+        let a= res.data.map(item => {
+          return {
+            label: item.f_price_name,
+            value: item
+          }
+        })
+        this.selectdata.fields.forEach(field => {
+          if (field.label === '气价名称') {
+            field.options = a}
+        })
+        return a
+      },
     },
     events: {
+      // 选择气价
+      'priceChange' (index) {
+        if (isEmpty(this.show_data.stairPrice)) {
+          return
+        }
+
+        let stairPrice = this.getLableValue('气价名称')
+
+        this.setLabelValue('气价类型', stairPrice.f_price_type)
+        this.setLabelValue('用气性质', stairPrice.f_gasproperties)
+        this.setLabelValue('价格', stairPrice.f_price)
+        this.setLabelValue('客户类型', stairPrice.f_user_type)
+        this.show_data.f_price_id = stairPrice.id
+        this.show_data.f_price_name = stairPrice.f_price_name
+      },
       // 信息修改初始化
       'modifyInfoReadyEvent' () {
         this.$getConfig(this, 'UserAddress')

package/src/components/product/Material/MaterialDetailed.vue

@@ -18,7 +18,7 @@
                 <label class="font_normal_body">工程编号：</label>
                 <input type="text" style="width: 60%" class="input_search" placeholder='工程编号' v-model="model.f_apply_num"
                        v-on:keyup.enter="$parent.$parent.search()"
-                       condition="a.f_apply_num = '{}'">
+                       condition="a.f_apply_num like '%{}%'">
               </div>
               <div class="form-group col-sm-3">
                 <label class="font_normal_body">操&ensp;作&ensp;人：</label>
@@ -44,6 +44,12 @@
               </div>
             </div>
             <div class="row" v-show="$parent.$parent.criteriaShow">
+              <div class="form-group col-sm-3">
+                <label class="font_normal_body">用户编号：</label>
+                <input type="text" style="width:60%" class="input_search" placeholder='用户编号' v-model="model.f_userinfo_code"
+                       v-on:keyup.enter="$parent.$parent.search()"
+                       condition="a.f_userinfo_code like '%{}%'">
+              </div>
               <div class="form-group col-sm-3">
                 <label class="font_normal_body">客户名称：</label>
                 <input type="text" style="width: 60%" class="input_search" placeholder='客户名称' v-model="model.f_user_name"

package/src/components/product/Material/Materiallist.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="flex-row">
+    <div style="height: 95%" class="basic-main" >
+      <criteria-paged :model="model" v-ref:cp>
+        <data-grid :model="model" partial='list' v-ref:grid style="overflow: auto" class="list_area table_sy">
+          <template partial='head'>
+            <tr>
+              <th>序号</th>
+              <th>材料名称</th>
+              <th>材料型号</th>
+              <th>材料单位</th>
+              <th>材料数量</th>
+            </tr>
+          </template>
+          <template partial='body'>
+            <tr >
+              <td style="text-align: center;">
+                <nobr><font>{{$index+1}}</font></nobr>
+              </td>
+              <td style="text-align: center;">
+                <nobr><font>{{row.f_material_name}}</font></nobr>
+              </td>
+              <td style="text-align: center;">
+                <nobr><font>{{row.f_material_style}}</font></nobr>
+              </td>
+              <td style="text-align: center;">
+                <nobr><font>{{row.f_material_unit}}</font></nobr>
+              </td>
+              <td style="text-align: center;">
+                <nobr><font>{{row.f_material_number}}</font></nobr>
+              </td>
+            </tr>
+          </template>
+        </data-grid>
+
+      </criteria-paged>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import {PagedList} from 'vue-client'
+export default {
+  title: '材料明细',
+  props: ['materialuser'],
+  data () {
+    return {
+      model: new PagedList('rs/sql/applyGetMaterial', 30, null),
+    }
+  },
+  ready () {
+    // 调用查询
+    this.search()
+  },
+  methods: {
+    // 查询
+    search () {
+      let condition = ` ma.f_process_id = '${this.materialuser.f_process_id}' `
+      this.model.search(condition)
+    }
+  },
+  computed: {
+  },
+  watch: {
+    'materialuser' () {
+      this.search()
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/product/Material/Materialmanger.vue

@@ -0,0 +1,58 @@
+<template>
+  <div id="unit" class="flex-row" :class="{'binary':showItem}">
+    <div :class="{'basic-main':!showItem,'binary-left':showItem}">
+      <material-user @select-changed="selected" :style="style" :style2="style2" v-ref:check></material-user>
+    </div>
+    <div class="binary-right" v-if="showItem">
+      <div class="flex">
+        <apply-material-list  v-ref:detail :materialuser="materialuser" ></apply-material-list>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  title: '材料查看',
+  props: [],
+  data () {
+    return {
+      showItem: false,
+      materialuser: '',
+      style: 'col-sm-2 form-group',
+      style2: 'col-sm-4 form-group'
+    }
+  },
+  methods: {
+    selected (obj) {
+      this.materialuser = obj.val
+      this.showItem = true
+    }
+  },
+  watch: {
+    'showItem' (val) {
+      if (val) {
+        this.style = 'col-sm-3 form-group'
+        this.style2 = 'col-sm-6 form-group'
+      } else {
+        this.style = 'col-sm-2 form-group'
+        this.style2 = 'col-sm-4 form-group'
+      }
+    }
+  }
+}
+</script>
+<style>
+.form-input-group label {
+  text-align: right;
+  width: auto;
+}
+
+.datapanel {
+  color: #333;
+  background-color: white;
+  box-shadow: darkgrey 0.5px 0.5px 0.5px 0.5px;
+  padding: 5px 7px 5px 7px;
+  border-radius: 10px;
+}
+</style>