sale-client 4.2.21 → 4.2.23

package/src/filiale/ronghao/replacementSingleInfoOperation.vue

@@ -1,315 +1,315 @@
-<template>
-  <div class="auto">
-    <validator name='a' @valid="addressValid(true)" @invalid="addressValid(false)">
-      <form class="form-horizontal">
-        <div class="row">
-          <div class="col-sm-4">
-            <label class="font_normal_body">表编号&nbsp;&nbsp;&nbsp;</label>
-            <input type="text" v-model="model.f_userinfo_id" disabled=disabled style="width: 60%" class="input_search">
-          </div>
-          <div class="col-sm-4">
-            <label class="font_normal_body">用户编号</label>
-            <input type="text" v-model="model.f_user_id" disabled=disabled style="width: 60%" class="input_search">
-          </div>
-          <div class="col-sm-4">
-            <label class="font_normal_body">用户姓名</label>
-            <input type="text" v-model="model.f_user_name" disabled=disabled style="width: 60%" class="input_search">
-          </div>
-          <!--<div class="col-sm-4">-->
-          <!--<label class="font_normal_body">收据类型</label>-->
-          <!--<input type="text" v-model="model.f_bill_style" style="width: 60%" class="input_search">-->
-          <!--</div>-->
-        </div>
-        <div class="row">
-          <div class="col-sm-4">
-            <label class="font_normal_body">用户类型</label>
-            <input type="text" v-model="model.f_user_type" disabled=disabled style="width: 60%" class="input_search">
-          </div>
-          <div class="col-sm-4">
-            <label class="font_normal_body">用气性质</label>
-            <input type="text" v-model="model.f_gasproperties" disabled=disabled style="width: 60%"
-                   class="input_search">
-          </div>
-          <div class="col-sm-4">
-            <label class="font_normal_body">补卡类型</label>
-            <input type="text" v-model="model.f_type" disabled=disabled style="width: 60%" class="input_search">
-          </div>
-
-        </div>
-        <div class="row">
-          <div class="col-sm-4">
-            <label class="font_normal_body">卡&nbsp;&nbsp;&nbsp;号&nbsp;&nbsp;&nbsp;</label>
-            <input type="text" v-model="model.f_card_id" disabled=disabled style="width: 60%" class="input_search">
-          </div>
-          <div class="col-sm-4">
-            <label class="font_normal_body">卡&nbsp;&nbsp;&nbsp;费&nbsp;&nbsp;&nbsp;</label>
-            <input type="text" v-model="model.f_cardfees" style="width: 60%" class="input_search">
-          </div>
-          <div class="col-sm-4">
-            <!--            <label class="font_normal_body">付款方式</label>-->
-            <!--            <input type="text" v-model="model.f_payment"  style="width: 60%" class="input_search">-->
-            <label class="font_normal_body" title="参数:付款方式">付款方式</label>
-            <v-select id="f_payment"
-                      v-model="model.f_payment" :value-single="true"
-                      class="select_list select"
-                      :value.sync="model.f_payment"
-                      :options='paytype'
-                      close-on-select>
-            </v-select>
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-sm-4">
-            <label class="font_normal_body" title="参数:票据类型">票据类型</label>
-            <v-select :value.sync="model.f_bill_style" v-model="model.f_bill_style"
-                      :options='papertype' :value-single="true"
-                      class="select_list select"
-                      close-on-select></v-select>
-            <!--            <label class="font_normal_body">票据类型</label>-->
-            <!--            <input type="text" v-model="model.f_bill_style" style="width: 60%" class="input_search">-->
-          </div>
-          <div class="col-sm-4">
-            <label class="font_normal_body">是否接表</label>
-            <input type="text" v-model="model.f_ispick_table" disabled=disabled style="width: 60%" class="input_search">
-          </div>
-          <div class="col-sm-4">
-            <label class="font_normal_body">补卡原因</label>
-            <input type="text" v-model="model.f_comments" style="width: 60%" class="input_search">
-          </div>
-        </div>
-        <div class="row">
-          <div class="col-sm-4">
-            <label class="font_normal_body">补卡日期</label>
-            <datepicker id="f_fillcard_date" placeholder="补卡日期" style="width:60%"
-                        v-model="model.f_operate_date"
-                        :value.sync="model.f_operate_date"
-                        :format="'yyyy-MM-dd'"
-                        :show-reset-button="true">
-            </datepicker>
-          </div>
-          <div class="col-sm-4">
-            <label class="font_normal_body">补卡状态</label>
-            <!--            <input type="text" v-model="model.f_fillcard_state" disabled=disabled style="width: 60%" class="input_search">-->
-            <v-select :value.sync="model.f_state" v-model="model.f_state"
-                      :options='fillcard_state' :value-single="true"
-                      class="select_list select"
-                      close-on-select></v-select>
-          </div>
-          <div class="col-sm-4">
-            <label class="font_normal_body">组&nbsp;&nbsp;&nbsp;织&nbsp;&nbsp;&nbsp;</label>
-            <input type="text" v-model="model.f_orgname" disabled=disabled style="width: 60%" class="input_search">
-          </div>
-
-        </div>
-        <div class="row">
-          <div class="col-sm-4">
-            <label class="font_normal_body">部&nbsp;&nbsp;&nbsp;门&nbsp;&nbsp;&nbsp;</label>
-            <input type="text" v-model="model.f_depname" disabled=disabled style="width: 60%" class="input_search">
-          </div>
-          <div class="col-sm-4 ">
-            <label class="font_normal_body" title="参数:操作人员查询">操作人员</label>
-            <v-select :value.sync="model.f_operatorid"
-                      v-model="model.f_operatorid"
-                      :value-single="true" @change="selectoperator()"
-                      :options='foperator'
-                      close-on-select></v-select>
-          </div>
-          <div class="col-sm-4">
-            <label class="font_normal_body">流水号&nbsp;&nbsp;&nbsp;</label>
-            <input type="text" v-model="model.f_serial_id" disabled=disabled style="width: 60%" class="input_search">
-          </div>
-        </div>
-      </form>
-      <div style="float: right">
-        <button class="button_search" @click="save">保存</button>
-        <button class="button_clear" @click="cancel">取消</button>
-      </div>
-    </validator>
-    <!--<modal :show.sync="showfiles" width="80%" style="width:auto;"  v-ref:modal middle backdrop="false">-->
-    <!--<article slot="modal-body">-->
-    <!--<upload :blodid="model.f_userinfo_id"  :businessid="model.id" v-ref:upload  fusetype="收费" isremark="true" style="width:auto" ></upload>-->
-    <!--</article>-->
-    <!--<footer slot="modal-footer" class="modal-footer">-->
-    <!--</footer>-->
-    <!--</modal>-->
-    <!--&lt;!&ndash;文件上传按钮&ndash;&gt;-->
-    <!--<button class="button_search" style="width: max-content" @click="uploadFiles()">上传附件</button>-->
-  </div>
-</template>
-
-<script>
-
-import {HttpResetClass} from 'vue-client'
-import * as Util from '../../Util'
-
-let readyGen = async function (self) {
-  await self.$LoadParams.loadParam(self.f_filialeid)
-  await self.$GetSaleParam.initinputtor()
-  await self.initoperator()
-}
-export default {
-  title: '基本信息',
-  data () {
-    return {
-      equipmentType: this.$appdata.getParam('打印格式') ? [{
-        label: '',
-        value: ''
-      }, ...this.$appdata.getParam('打印格式')] : [],
-      // 构建数组来存储对象
-      editbank: true,
-      uploadText: '收费',
-      papertype: this.$appdata.getParam('票据类型') ? [{
-        label: '',
-        value: ''
-      }, ...this.$appdata.getParam('票据类型')] : [],
-      paytype: this.$appdata.getParam('付款方式') ? [{
-        label: '',
-        value: ''
-      }, ...this.$appdata.getParam('付款方式')] : [],
-      showfiles: false,
-      recordList: [],
-      foperator: [],
-      fileNameSet: {
-        // 要更改字段的中文名
-        'f_cardfees': '卡费',
-        'f_payment': '付款方式',
-        'f_bill_style': '票据类型',
-        'f_reason': '补卡原因',
-        'f_fillcard_date': '补卡日期',
-        'f_state': '补卡状态',
-        'f_operator': '操作人'
-      }
-    }
-  },
-  props: {
-    oldmodel: Object,
-    model: Object
-  },
-
-  ready () {
-    if (this.$login.r.includes('维护补卡信息')) {
-      this.editbank = true
-    }
-    this.oldmodel = JSON.parse(JSON.stringify(this.model))
-    this.model.f_bill_state = [this.oldmodel]
-    readyGen(this)
-  },
-  created () {
-  },
-  methods: {
-    initoperator () {
-      this.foperator = []
-      console.log('this.$login-------------------------', this.$login, this.oldmodel, this.model)
-      let arr = this.$GetSaleParam.inputtors.filter((res) => {
-        if (res.rolestr != null && res.rolestr != '') {
-          return (res.rolestr.indexOf('收费员') > -1 || res.rolestr.indexOf('话务员') > -1) && res.f_orgid == this.$login.f.orgid
-        }
-      })
-      arr.forEach((res) => {
-        this.foperator.push({label: res.name, value: res.id})
-      })
-    },
-    selectoperator () {
-      let id = this.model.f_operatorid
-      if (!this.model.f_operatorid) {
-        return
-      }
-      let http = new HttpResetClass()
-      http.load('POST', 'api/af-revenue/sql/saleSingleTable',
-        {
-          data: {
-            tablename: 't_user',
-            condition: `id = '${id}'`
-          }
-        },
-        {resolveMsg: null, rejectMsg: null}).then((res) => {
-          console.log('kanak,res', res)
-          if (res.data.length > 0) {
-            this.model.f_operator = res.data[0].name
-          } else {
-            this.model.f_operatorid = ''
-            this.$showAlert('操作员信息未找到', 'warning', 2000)
-          }
-          console.log('this.f_operatorid', this.model.f_operator)
-        })
-    },
-    cancel () {
-      this.$dispatch('close')
-    },
-    uploadFiles () {
-      this.showfiles = !this.showfiles
-    },
-    addressValid (val) {
-    },
-    save () {
-      // console.log(this.model.key)
-      this.recordList = [] // 清空，防止重复提交
-      console.log('newdate' + new Date())
-      console.log('MODEL BEFORE:', this.model)
-      for (var item in this.model) {
-        if (this.model[item] instanceof Array) {
-          this.model[item] = this.model[item].length > 0 ? this.model[item][0] : ''
-        }
-        if (this.model[item] != this.oldmodel[item] && this.model[item] != 's_timestamp') {
-          var car = { // 需要更改的字段
-            // t_fillcard
-            id: this.model.id,
-            f_user_id: this.model.f_user_id,
-            chinesename: this.fileNameSet[item],
-            fieldname: item,
-            tablename: 't_fillcard',
-            oldvalue: this.oldmodel[item],
-            newvalue: this.model[item],
-            state: '有效',
-            modifitime: Util.toStandardTimeString(),
-            operator: this.$login.f.name,
-            changemeter_id: this.model.id,
-            f_operate_date: this.model.f_operate_date,
-            f_cardfees: this.model.f_cardfees ? this.model.f_cardfees : null,
-            f_payment: this.model.f_payment,
-            f_bill_style: this.model.f_bill_style,
-            f_reason: this.model.f_comments ? this.model.f_comments : '',
-            f_fillcard_date: this.model.f_operate_date,
-            f_operator: this.$login.f.name,
-            f_operatorid: this.$login.f.id,
-            f_orgid: this.$login.f.orgid,
-            f_orgname: this.$login.f.orgs,
-            f_depid: this.$login.f.depids,
-            f_depname: this.$login.f.deps
-          }
-          this.recordList.push(car)
-          // 该方法并未对chinesename fieldname operator等进行判断赋值，此暂写为定值
-          console.log('看看car的值', car)
-        }
-      }
-
-      this.model.f_reason = this.model.f_comments ? this.model.f_comments : ''
-      this.model.f_fillcard_date = this.model.f_operate_date
-      console.log('model--------abc-', this.model)
-      this.$resetpost('api/af-revenue/logic/replacementCardSaving', {
-        data: {
-          recordlist: this.recordList,
-          newData: this.model
-        }
-      }).then((res) => {
-        console.log('this.model', this.model)
-      })
-      this.$dispatch('close')
-    }
-  },
-  computed: {
-    fillcard_state () {
-      return [...this.$appdata.getParam('补卡状态')]
-    }
-  },
-  watch: {
-    'model' () {
-      this.initoperator()
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
+<template>
+  <div class="auto">
+    <validator name='a' @valid="addressValid(true)" @invalid="addressValid(false)">
+      <form class="form-horizontal">
+        <div class="row">
+          <div class="col-sm-4">
+            <label class="font_normal_body">表编号&nbsp;&nbsp;&nbsp;</label>
+            <input type="text" v-model="model.f_userinfo_id" disabled=disabled style="width: 60%" class="input_search">
+          </div>
+          <div class="col-sm-4">
+            <label class="font_normal_body">用户编号</label>
+            <input type="text" v-model="model.f_user_id" disabled=disabled style="width: 60%" class="input_search">
+          </div>
+          <div class="col-sm-4">
+            <label class="font_normal_body">用户姓名</label>
+            <input type="text" v-model="model.f_user_name" disabled=disabled style="width: 60%" class="input_search">
+          </div>
+          <!--<div class="col-sm-4">-->
+          <!--<label class="font_normal_body">收据类型</label>-->
+          <!--<input type="text" v-model="model.f_bill_style" style="width: 60%" class="input_search">-->
+          <!--</div>-->
+        </div>
+        <div class="row">
+          <div class="col-sm-4">
+            <label class="font_normal_body">用户类型</label>
+            <input type="text" v-model="model.f_user_type" disabled=disabled style="width: 60%" class="input_search">
+          </div>
+          <div class="col-sm-4">
+            <label class="font_normal_body">用气性质</label>
+            <input type="text" v-model="model.f_gasproperties" disabled=disabled style="width: 60%"
+                   class="input_search">
+          </div>
+          <div class="col-sm-4">
+            <label class="font_normal_body">补卡类型</label>
+            <input type="text" v-model="model.f_type" disabled=disabled style="width: 60%" class="input_search">
+          </div>
+
+        </div>
+        <div class="row">
+          <div class="col-sm-4">
+            <label class="font_normal_body">卡&nbsp;&nbsp;&nbsp;号&nbsp;&nbsp;&nbsp;</label>
+            <input type="text" v-model="model.f_card_id" disabled=disabled style="width: 60%" class="input_search">
+          </div>
+          <div class="col-sm-4">
+            <label class="font_normal_body">卡&nbsp;&nbsp;&nbsp;费&nbsp;&nbsp;&nbsp;</label>
+            <input type="text" v-model="model.f_cardfees" style="width: 60%" class="input_search">
+          </div>
+          <div class="col-sm-4">
+            <!--            <label class="font_normal_body">付款方式</label>-->
+            <!--            <input type="text" v-model="model.f_payment"  style="width: 60%" class="input_search">-->
+            <label class="font_normal_body" title="参数:付款方式">付款方式</label>
+            <v-select id="f_payment"
+                      v-model="model.f_payment" :value-single="true"
+                      class="select_list select"
+                      :value.sync="model.f_payment"
+                      :options='paytype'
+                      close-on-select>
+            </v-select>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-sm-4">
+            <label class="font_normal_body" title="参数:票据类型">票据类型</label>
+            <v-select :value.sync="model.f_bill_style" v-model="model.f_bill_style"
+                      :options='papertype' :value-single="true"
+                      class="select_list select"
+                      close-on-select></v-select>
+            <!--            <label class="font_normal_body">票据类型</label>-->
+            <!--            <input type="text" v-model="model.f_bill_style" style="width: 60%" class="input_search">-->
+          </div>
+          <div class="col-sm-4">
+            <label class="font_normal_body">是否接表</label>
+            <input type="text" v-model="model.f_ispick_table" disabled=disabled style="width: 60%" class="input_search">
+          </div>
+          <div class="col-sm-4">
+            <label class="font_normal_body">补卡原因</label>
+            <input type="text" v-model="model.f_comments" style="width: 60%" class="input_search">
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-sm-4">
+            <label class="font_normal_body">补卡日期</label>
+            <datepicker id="f_fillcard_date" placeholder="补卡日期" style="width:60%"
+                        v-model="model.f_operate_date"
+                        :value.sync="model.f_operate_date"
+                        :format="'yyyy-MM-dd'"
+                        :show-reset-button="true">
+            </datepicker>
+          </div>
+          <div class="col-sm-4">
+            <label class="font_normal_body">补卡状态</label>
+            <!--            <input type="text" v-model="model.f_fillcard_state" disabled=disabled style="width: 60%" class="input_search">-->
+            <v-select :value.sync="model.f_state" v-model="model.f_state"
+                      :options='fillcard_state' :value-single="true"
+                      class="select_list select"
+                      close-on-select></v-select>
+          </div>
+          <div class="col-sm-4">
+            <label class="font_normal_body">组&nbsp;&nbsp;&nbsp;织&nbsp;&nbsp;&nbsp;</label>
+            <input type="text" v-model="model.f_orgname" disabled=disabled style="width: 60%" class="input_search">
+          </div>
+
+        </div>
+        <div class="row">
+          <div class="col-sm-4">
+            <label class="font_normal_body">部&nbsp;&nbsp;&nbsp;门&nbsp;&nbsp;&nbsp;</label>
+            <input type="text" v-model="model.f_depname" disabled=disabled style="width: 60%" class="input_search">
+          </div>
+          <div class="col-sm-4 ">
+            <label class="font_normal_body" title="参数:操作人员查询">操作人员</label>
+            <v-select :value.sync="model.f_operatorid"
+                      v-model="model.f_operatorid"
+                      :value-single="true" @change="selectoperator()"
+                      :options='foperator'
+                      close-on-select></v-select>
+          </div>
+          <div class="col-sm-4">
+            <label class="font_normal_body">流水号&nbsp;&nbsp;&nbsp;</label>
+            <input type="text" v-model="model.f_serial_id" disabled=disabled style="width: 60%" class="input_search">
+          </div>
+        </div>
+      </form>
+      <div style="float: right">
+        <button class="button_search" @click="save">保存</button>
+        <button class="button_clear" @click="cancel">取消</button>
+      </div>
+    </validator>
+    <!--<modal :show.sync="showfiles" width="80%" style="width:auto;"  v-ref:modal middle backdrop="false">-->
+    <!--<article slot="modal-body">-->
+    <!--<upload :blodid="model.f_userinfo_id"  :businessid="model.id" v-ref:upload  fusetype="收费" isremark="true" style="width:auto" ></upload>-->
+    <!--</article>-->
+    <!--<footer slot="modal-footer" class="modal-footer">-->
+    <!--</footer>-->
+    <!--</modal>-->
+    <!--&lt;!&ndash;文件上传按钮&ndash;&gt;-->
+    <!--<button class="button_search" style="width: max-content" @click="uploadFiles()">上传附件</button>-->
+  </div>
+</template>
+
+<script>
+
+import {HttpResetClass} from 'vue-client'
+import * as Util from '../../Util'
+
+let readyGen = async function (self) {
+  await self.$LoadParams.loadParam(self.f_filialeid)
+  await self.$GetSaleParam.initinputtor()
+  await self.initoperator()
+}
+export default {
+  title: '基本信息',
+  data () {
+    return {
+      equipmentType: this.$appdata.getParam('打印格式') ? [{
+        label: '',
+        value: ''
+      }, ...this.$appdata.getParam('打印格式')] : [],
+      // 构建数组来存储对象
+      editbank: true,
+      uploadText: '收费',
+      papertype: this.$appdata.getParam('票据类型') ? [{
+        label: '',
+        value: ''
+      }, ...this.$appdata.getParam('票据类型')] : [],
+      paytype: this.$appdata.getParam('付款方式') ? [{
+        label: '',
+        value: ''
+      }, ...this.$appdata.getParam('付款方式')] : [],
+      showfiles: false,
+      recordList: [],
+      foperator: [],
+      fileNameSet: {
+        // 要更改字段的中文名
+        'f_cardfees': '卡费',
+        'f_payment': '付款方式',
+        'f_bill_style': '票据类型',
+        'f_reason': '补卡原因',
+        'f_fillcard_date': '补卡日期',
+        'f_state': '补卡状态',
+        'f_operator': '操作人'
+      }
+    }
+  },
+  props: {
+    oldmodel: Object,
+    model: Object
+  },
+
+  ready () {
+    if (this.$login.r.includes('维护补卡信息')) {
+      this.editbank = true
+    }
+    this.oldmodel = JSON.parse(JSON.stringify(this.model))
+    this.model.f_bill_state = [this.oldmodel]
+    readyGen(this)
+  },
+  created () {
+  },
+  methods: {
+    initoperator () {
+      this.foperator = []
+      console.log('this.$login-------------------------', this.$login, this.oldmodel, this.model)
+      let arr = this.$GetSaleParam.inputtors.filter((res) => {
+        if (res.rolestr != null && res.rolestr != '') {
+          return (res.rolestr.indexOf('收费员') > -1 || res.rolestr.indexOf('话务员') > -1) && res.f_orgid == this.$login.f.orgid
+        }
+      })
+      arr.forEach((res) => {
+        this.foperator.push({label: res.name, value: res.id})
+      })
+    },
+    selectoperator () {
+      let id = this.model.f_operatorid
+      if (!this.model.f_operatorid) {
+        return
+      }
+      let http = new HttpResetClass()
+      http.load('POST', 'api/af-revenue/sql/saleSingleTable',
+        {
+          data: {
+            tablename: 't_user',
+            condition: `id = '${id}'`
+          }
+        },
+        {resolveMsg: null, rejectMsg: null}).then((res) => {
+          console.log('kanak,res', res)
+          if (res.data.length > 0) {
+            this.model.f_operator = res.data[0].name
+          } else {
+            this.model.f_operatorid = ''
+            this.$showAlert('操作员信息未找到', 'warning', 2000)
+          }
+          console.log('this.f_operatorid', this.model.f_operator)
+        })
+    },
+    cancel () {
+      this.$dispatch('close')
+    },
+    uploadFiles () {
+      this.showfiles = !this.showfiles
+    },
+    addressValid (val) {
+    },
+    save () {
+      // console.log(this.model.key)
+      this.recordList = [] // 清空，防止重复提交
+      console.log('newdate' + new Date())
+      console.log('MODEL BEFORE:', this.model)
+      for (var item in this.model) {
+        if (this.model[item] instanceof Array) {
+          this.model[item] = this.model[item].length > 0 ? this.model[item][0] : ''
+        }
+        if (this.model[item] != this.oldmodel[item] && this.model[item] != 's_timestamp') {
+          var car = { // 需要更改的字段
+            // t_fillcard
+            id: this.model.id,
+            f_user_id: this.model.f_user_id,
+            chinesename: this.fileNameSet[item],
+            fieldname: item,
+            tablename: 't_fillcard',
+            oldvalue: this.oldmodel[item],
+            newvalue: this.model[item],
+            state: '有效',
+            modifitime: Util.toStandardTimeString(),
+            operator: this.$login.f.name,
+            changemeter_id: this.model.id,
+            f_operate_date: this.model.f_operate_date,
+            f_cardfees: this.model.f_cardfees ? this.model.f_cardfees : null,
+            f_payment: this.model.f_payment,
+            f_bill_style: this.model.f_bill_style,
+            f_reason: this.model.f_comments ? this.model.f_comments : '',
+            f_fillcard_date: this.model.f_operate_date,
+            f_operator: this.$login.f.name,
+            f_operatorid: this.$login.f.id,
+            f_orgid: this.$login.f.orgid,
+            f_orgname: this.$login.f.orgs,
+            f_depid: this.$login.f.depids,
+            f_depname: this.$login.f.deps
+          }
+          this.recordList.push(car)
+          // 该方法并未对chinesename fieldname operator等进行判断赋值，此暂写为定值
+          console.log('看看car的值', car)
+        }
+      }
+
+      this.model.f_reason = this.model.f_comments ? this.model.f_comments : ''
+      this.model.f_fillcard_date = this.model.f_operate_date
+      console.log('model--------abc-', this.model)
+      this.$resetpost('api/af-revenue/logic/replacementCardSaving', {
+        data: {
+          recordlist: this.recordList,
+          newData: this.model
+        }
+      }).then((res) => {
+        console.log('this.model', this.model)
+      })
+      this.$dispatch('close')
+    }
+  },
+  computed: {
+    fillcard_state () {
+      return [...this.$appdata.getParam('补卡状态')]
+    }
+  },
+  watch: {
+    'model' () {
+      this.initoperator()
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>