Просмотр исходного кода

fix:修复列表按钮设置权限时数据未带如到对话框的问题

liujiayin 2 лет назад
Родитель
Сommit
b1672e7bfa
2 измененных файлов с 438 добавлено и 428 удалено
  1. 138 134
      src/business/platform/org/role/dialog.vue
  2. 300 294
      src/business/platform/rights/config/index.vue

+ 138 - 134
src/business/platform/org/role/dialog.vue

@@ -1,143 +1,147 @@
 <template>
-  <ibps-selector-dialog
-    :value="selectedValue"
-    :visible="selectorVisible"
-    v-bind="$props"
-    @input="value => selectedValue = value"
-    @remove-select="setSelectRow"
-    @close="handleClose"
-    @action-event="handleActionEvent"
-  >
-    <template slot-scope="scope">
-      <ibps-selector-panel
-        ref="panel"
-        v-bind="scope"
-        :is-auth="isAuth"
-        :org-id="orgId"
-        :party-type-id="partyTypeId"
-        :current-org-id="currentOrgId"
-        :script="script"
-        :is-use-scope="isUseScope"
-        @selected="value => selectedValue = value"
-      />
-    </template>
-  </ibps-selector-dialog>
+    <ibps-selector-dialog
+        :value="selectedValue"
+        :visible="selectorVisible"
+        v-bind="$props"
+        @input="value => selectedValue = value"
+        @remove-select="setSelectRow"
+        @close="handleClose"
+        @action-event="handleActionEvent"
+    >
+        <template slot-scope="scope">
+            <ibps-selector-panel
+                ref="panel"
+                v-bind="scope"
+                :is-auth="isAuth"
+                :org-id="orgId"
+                :party-type-id="partyTypeId"
+                :current-org-id="currentOrgId"
+                :script="script"
+                :is-use-scope="isUseScope"
+                @selected="value => selectedValue = value"
+            />
+        </template>
+    </ibps-selector-dialog>
 </template>
 <script>
 import IbpsSelectorDialog from '@/components/ibps-selector/dialog'
 import IbpsSelectorPanel from './panel'
 export default {
-  components: {
-    IbpsSelectorDialog,
-    IbpsSelectorPanel
-  },
-  props: {
-    visible: Boolean, // 是否可见,
-    isUseScope: { // 是否启用范围
-      type: Boolean,
-      default: false
-    },
-    partyTypeId: [String, Number],
-    currentOrgId: [String, Number],
-    script: String,
-    isAuth: {
-      type: Boolean,
-      default: false
-    },
-    orgId: [String, Number],
-    title: { // 标题
-      type: String,
-      default: '角色选择器'
-    },
-    marginTop: { // Dialog CSS 中的 margin-top 值
-      type: String,
-      default: '5vh'
-    },
-    width: { // 宽
-      type: String,
-      default: '60%'
-    },
-    height: { // 高
-      type: String,
-      default: '415px'
-    },
-    closeOnClickModal: { // 是否可以通过点击 modal 关闭 Dialog
-      type: Boolean,
-      default: false
-    },
-    closeOnPressEscape: { // 是否可以通过按下 ESC 关闭 Dialog
-      type: Boolean,
-      default: false
-    },
-    showClose: { // 是否显示关闭按钮
-      type: Boolean,
-      default: true
-    },
-    beforeClose: { // 关闭前的回调,会暂停 Dialog 的关闭
-      type: Function
-    },
-    fullscreen: { // 是否为全屏 Dialog
-      type: Boolean,
-      default: false
-    },
-    labelKey: { // 展示的值
-      type: String,
-      default: 'name'
-    },
-    value: { // value
-      type: [Object, Array],
-      default() { return this.multiple ? [] : {} }
-    },
-    cleanClose: { // 按钮清空并关闭
-      type: Boolean,
-      default: false
-    },
-    buttons: { // 按钮组
-      type: Array
-    },
-    confirmButtonText: {
-      type: String,
-      default: '选择'
-    },
-    cleanButtonText: String,
-    cancelButtonText: String,
-    multiple: { // 是否多选
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      selectorVisible: false,
-      selectedValue: this.multiple ? [] : {}
-    }
-  },
-  watch: {
-    visible: {
-      handler: function(val, oldVal) {
-        this.selectorVisible = this.visible
-      },
-      immediate: true
-    },
-    value() {
-      this.selectedValue = this.value
-    }
-  },
-  methods: {
-    setSelectRow() {
-      setTimeout(() => {
-        this.$refs['panel'].setSelectRow()
-      }, 10)
-    },
-    handleClose(visible) {
-      this.$emit('close', visible)
-    },
-    handleActionEvent(key, data) {
-      if (key === 'clean') {
-        this.setSelectRow()
-      }
-      this.$emit('action-event', key, data)
+    components: {
+        IbpsSelectorDialog,
+        IbpsSelectorPanel
+    },
+    props: {
+        visible: Boolean, // 是否可见,
+        isUseScope: { // 是否启用范围
+            type: Boolean,
+            default: false
+        },
+        partyTypeId: [String, Number],
+        currentOrgId: [String, Number],
+        script: String,
+        isAuth: {
+            type: Boolean,
+            default: false
+        },
+        orgId: [String, Number],
+        title: { // 标题
+            type: String,
+            default: '角色选择器'
+        },
+        marginTop: { // Dialog CSS 中的 margin-top 值
+            type: String,
+            default: '5vh'
+        },
+        width: { // 宽
+            type: String,
+            default: '60%'
+        },
+        height: { // 高
+            type: String,
+            default: '415px'
+        },
+        closeOnClickModal: { // 是否可以通过点击 modal 关闭 Dialog
+            type: Boolean,
+            default: false
+        },
+        closeOnPressEscape: { // 是否可以通过按下 ESC 关闭 Dialog
+            type: Boolean,
+            default: false
+        },
+        showClose: { // 是否显示关闭按钮
+            type: Boolean,
+            default: true
+        },
+        beforeClose: { // 关闭前的回调,会暂停 Dialog 的关闭
+            type: Function
+        },
+        fullscreen: { // 是否为全屏 Dialog
+            type: Boolean,
+            default: false
+        },
+        labelKey: { // 展示的值
+            type: String,
+            default: 'name'
+        },
+        value: { // value
+            type: [Object, Array],
+            default () { return this.multiple ? [] : {} }
+        },
+        cleanClose: { // 按钮清空并关闭
+            type: Boolean,
+            default: false
+        },
+        buttons: { // 按钮组
+            type: Array
+        },
+        confirmButtonText: {
+            type: String,
+            default: '选择'
+        },
+        cleanButtonText: String,
+        cancelButtonText: String,
+        multiple: { // 是否多选
+            type: Boolean,
+            default: false
+        }
+    },
+    data () {
+        return {
+            selectorVisible: false,
+            selectedValue: this.multiple ? [] : {}
+        }
+    },
+    watch: {
+        visible: {
+            handler: function (val, oldVal) {
+                this.selectorVisible = this.visible
+            },
+            immediate: true
+        },
+        value: {
+            handler: function (val, oldVal) {
+                this.selectedValue = this.value
+            },
+            immediate: true
+
+        }
+    },
+    methods: {
+        setSelectRow () {
+            setTimeout(() => {
+                this.$refs['panel'].setSelectRow()
+            }, 10)
+        },
+        handleClose (visible) {
+            this.$emit('close', visible)
+        },
+        handleActionEvent (key, data) {
+            if (key === 'clean') {
+                this.setSelectRow()
+            }
+            this.$emit('action-event', key, data)
+        }
     }
-  }
 }
 </script>

+ 300 - 294
src/business/platform/rights/config/index.vue

@@ -1,321 +1,327 @@
 <template>
-  <el-dialog
-    v-if="dialogVisible"
-    :title="title"
-    :visible.sync="dialogVisible"
-    :close-on-click-modal="false"
-    :close-on-press-escape="false"
-    top="5vh"
-    append-to-body
-    custom-class="rights-config-dialog"
-    @open="getFormData"
-    @close="closeDialog"
-  >
-    <div class="rights-config">
-      <el-row class="rights-config-header">
-        <el-col :span="6">权限分类</el-col>
-        <el-col :span="12">授权给</el-col>
-        <el-col :span="6" style="border-right:1px solid #dcdfe6;">操作</el-col>
-      </el-row>
-      <el-row
-        v-for="rightsType in rightsTypeList"
-        :key="rightsType.type"
-        class="rightsType"
-      >
-        <template v-if="rightsType.type==='none'" />
-        <el-col v-else-if="rightsType.type==='all'" :span="24" class="selectAll">
-          <el-checkbox v-model="selectAll" @change="checkedAll">允许所有人访问</el-checkbox>
-        </el-col>
-        <table v-else class="customers">
-          <tr>
-            <td width="25%">{{ rightsType.label }}授权</td>
-            <td class="tag-list" width="50%">
-              <span v-if="$utils.isEmpty(rightsType.data)">&nbsp;</span>
-              <el-tag
-                v-for="(item,index) in rightsType.data"
-                v-else
-                :key="index"
-              >{{ item.name }}
-              </el-tag>
-            </td>
-            <td width="25%">
-              <el-button
-                v-if="!selectAll"
-                type="primary"
-                icon="ibps-icon-search-plus"
-                @click="handleSelect(rightsType.type)"
-              >选择</el-button>
-              <el-button
-                v-if="!selectAll"
-                type="info"
-                icon="ibps-icon-undo"
-                @click="handleReset(rightsType.type)"
-              >重置</el-button>
-            </td>
-          </tr>
-        </table>
-      </el-row>
-    </div>
-    <ibps-org-selector-dialog
-      :visible="selectorVisible"
-      :type="selectorType==='orgSub'?'org':selectorType"
-      :value="selectorValue"
-      multiple
-      @close="visible=>selectorVisible=visible"
-      @action-event="handleSelectorActionEvent"
-    />
+    <el-dialog
+        v-if="dialogVisible"
+        :title="title"
+        :visible.sync="dialogVisible"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        top="5vh"
+        append-to-body
+        custom-class="rights-config-dialog"
+        @open="getFormData"
+        @close="closeDialog"
+    >
+        <div class="rights-config">
+            <el-row class="rights-config-header">
+                <el-col :span="6">权限分类</el-col>
+                <el-col :span="12">授权给</el-col>
+                <el-col :span="6" style="border-right:1px solid #dcdfe6;">操作</el-col>
+            </el-row>
+            <el-row
+                v-for="rightsType in rightsTypeList"
+                :key="rightsType.type"
+                class="rightsType"
+            >
+                <template v-if="rightsType.type==='none'" />
+                <el-col v-else-if="rightsType.type==='all'" :span="24" class="selectAll">
+                    <el-checkbox v-model="selectAll" @change="checkedAll">允许所有人访问</el-checkbox>
+                </el-col>
+                <table v-else class="customers">
+                    <tr>
+                        <td width="25%">{{ rightsType.label }}授权</td>
+                        <td class="tag-list" width="50%">
+                            <span v-if="$utils.isEmpty(rightsType.data)">&nbsp;</span>
+                            <el-tag
+                                v-for="(item,index) in rightsType.data"
+                                v-else
+                                :key="index"
+                            >{{ item.name }}
+                            </el-tag>
+                        </td>
+                        <td width="25%">
+                            <el-button
+                                v-if="!selectAll"
+                                type="primary"
+                                icon="ibps-icon-search-plus"
+                                @click="handleSelect(rightsType.type)"
+                            >选择</el-button>
+                            <el-button
+                                v-if="!selectAll"
+                                type="info"
+                                icon="ibps-icon-undo"
+                                @click="handleReset(rightsType.type)"
+                            >重置</el-button>
+                        </td>
+                    </tr>
+                </table>
+            </el-row>
+        </div>
+        <ibps-org-selector-dialog
+            :visible="selectorVisible"
+            :type="selectorType==='orgSub'?'org':selectorType"
+            :value="selectorValue"
+            multiple
+            @close="visible=>selectorVisible=visible"
+            @action-event="handleSelectorActionEvent"
+        />
 
-    <div slot="footer" class="el-dialog--center">
-      <el-button v-if="isSave" type="primary" icon="ibps-icon-save" @click="handleSave()">保存</el-button>
-      <el-button v-else type="primary" icon="ibps-icon-ok" @click="handleConfirm()">确定</el-button>
-      <el-button icon="el-icon-circle-close" type="danger" @click="closeDialog()">取 消</el-button>
-    </div>
-  </el-dialog>
+        <div slot="footer" class="el-dialog--center">
+            <el-button v-if="isSave" type="primary" icon="ibps-icon-save" @click="handleSave()">保存</el-button>
+            <el-button v-else type="primary" icon="ibps-icon-ok" @click="handleConfirm()">确定</el-button>
+            <el-button icon="el-icon-circle-close" type="danger" @click="closeDialog()">取 消</el-button>
+        </div>
+    </el-dialog>
 </template>
 <script>
 
 import { findRightsTypeByKey, findByTypeId, save } from '@/api/platform/rights/def'
 import { ownRightsOptions } from './constants'
 import ActionUtils from '@/utils/action'
+import UtilUtils from '@/utils/util'
 
 import IbpsOrgSelectorDialog from '@/business/platform/org/selector/dialog'
 export default {
-  components: {
-    IbpsOrgSelectorDialog
-  },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    title: { // 标题
-      type: String,
-      default: '权限配置'
-    },
-    rightsKey: {
-      type: String,
-      required: false
+    components: {
+        IbpsOrgSelectorDialog
     },
+    props: {
+        visible: {
+            type: Boolean,
+            default: false
+        },
+        title: { // 标题
+            type: String,
+            default: '权限配置'
+        },
+        rightsKey: {
+            type: String,
+            required: false
+        },
 
-    rightsTypes: { // 权限类型
-      type: Array,
-      default: () => {
-        return Object.keys(ownRightsOptions)
-      }
-    },
-    isSave: {
-      type: Boolean,
-      default: false
-    },
-    id: {
-      type: [String, Number]
-    },
-    data: { // 权限数据
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      dialogVisible: this.visible,
-      selectorVisible: false,
-      selectAll: false,
-      rightsTypeList: [],
-      selectorType: '',
-      selectorValue: ''
-    }
-  },
-  watch: {
-    visible: {
-      handler: function(val, oldVal) {
-        this.dialogVisible = this.visible
-        this.rightsTypeList = []
-        this.selectAll = false
-        if (this.visible) {
-          this.getFormData()
+        rightsTypes: { // 权限类型
+            type: Array,
+            default: () => {
+                return Object.keys(ownRightsOptions)
+            }
+        },
+        isSave: {
+            type: Boolean,
+            default: false
+        },
+        id: {
+            type: [String, Number]
+        },
+        data: { // 权限数据
+            type: Array,
+            default: () => []
         }
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    getFormData() {
-      this.getRightsTypes()
     },
-    getRightsTypes() {
-      if (this.$utils.isEmpty(this.rightsKey)) {
-        this.convertRightsTypeList(this.rightsTypes, this.convertDataMap(this.data))
-        return
-      }
-      findRightsTypeByKey({
-        entityType: this.rightsKey
-      }).then(response => {
-        const list = response.data
-        if (this.$utils.isEmpty(list)) {
-          return
-        }
-        const rightsTypeList = []
-        list.forEach(item => {
-          rightsTypeList.push(item.key)
-        })
-        if (this.$utils.isNotEmpty(this.id)) {
-          this.loadRightsDefData(rightsTypeList, this.id)
-        } else {
-          this.convertRightsTypeList(rightsTypeList, this.convertDataMap(this.data))
+    data () {
+        return {
+            dialogVisible: this.visible,
+            selectorVisible: false,
+            selectAll: false,
+            rightsTypeList: [],
+            selectorType: '',
+            selectorValue: ''
         }
-      })
     },
-    /**
-     * 从后台加载权限数据
-     */
-    loadRightsDefData(list, id) {
-      findByTypeId({
-        entityType: this.rightsKey,
-        entityId: id
-      }).then(response => {
-        const rightsDefList = response.data
-        let dataMap = {}
-        if (this.$utils.isNotEmpty(rightsDefList)) {
-          dataMap = this.convertDataMap(this.$utils.parseData(rightsDefList))
+    watch: {
+        visible: {
+            handler: function (val, oldVal) {
+                this.dialogVisible = this.visible
+                this.rightsTypeList = []
+                this.selectAll = false
+                if (this.visible) {
+                    this.getFormData()
+                }
+            },
+            immediate: true
         }
-        this.convertRightsTypeList(list, dataMap)
-      })
     },
-    convertDataMap(data) {
-      const dataMap = {}
-      if (this.$utils.isEmpty(data)) return {}
-      data.forEach(def => {
-        const type = def.type
-        if (type === 'all') {
-          this.selectAll = true
-          return false
-        } else if (type === 'none') {
-          this.selectAll = false
-          return false
-        } else {
-          const ids = def.rightsId.split(',')
-          const names = def.rightsName.split(',')
-          const data = []
-          ids.forEach((id, i) => {
-            if (this.$utils.isNotEmpty(id)) {
-              data.push({
-                id: id,
-                name: names[i]
-              })
+    methods: {
+        getFormData () {
+            this.getRightsTypes()
+        },
+        getRightsTypes () {
+            if (this.$utils.isEmpty(this.rightsKey)) {
+                this.convertRightsTypeList(this.rightsTypes, this.convertDataMap(this.data))
+                return
             }
-          })
-          dataMap[type] = data
-        }
-      })
-      return dataMap
-    },
-    convertRightsTypeList(list, dataMap = {}) {
-      this.rightsTypeList = list.map((d) => {
-        const rights = ownRightsOptions[d]
-        if (rights) {
-          rights.data = dataMap[rights.type] || []
-          return rights
-        }
-      })
-    },
-    /**
+            findRightsTypeByKey({
+                entityType: this.rightsKey
+            }).then(response => {
+                const list = response.data
+                if (this.$utils.isEmpty(list)) {
+                    return
+                }
+                const rightsTypeList = []
+                list.forEach(item => {
+                    rightsTypeList.push(item.key)
+                })
+                if (this.$utils.isNotEmpty(this.id)) {
+                    this.loadRightsDefData(rightsTypeList, this.id)
+                } else {
+                    this.convertRightsTypeList(rightsTypeList, this.convertDataMap(this.data))
+                }
+            })
+        },
+        /**
+     * 从后台加载权限数据
+     */
+        loadRightsDefData (list, id) {
+            findByTypeId({
+                entityType: this.rightsKey,
+                entityId: id
+            }).then(response => {
+                const rightsDefList = response.data
+                let dataMap = {}
+                if (this.$utils.isNotEmpty(rightsDefList)) {
+                    dataMap = this.convertDataMap(this.$utils.parseData(rightsDefList))
+                }
+                this.convertRightsTypeList(list, dataMap)
+            })
+        },
+        convertDataMap (data) {
+            const dataMap = {}
+            if (this.$utils.isEmpty(data)) return {}
+            data.forEach(def => {
+                const type = def.type
+                if (type === 'all') {
+                    this.selectAll = true
+                    return false
+                } else if (type === 'none') {
+                    this.selectAll = false
+                    return false
+                } else {
+                    const ids = def.rightsId.split(',')
+                    const names = def.rightsName.split(',')
+                    const data = []
+                    ids.forEach((id, i) => {
+                        if (this.$utils.isNotEmpty(id)) {
+                            data.push({
+                                id: id,
+                                name: names[i]
+                            })
+                        }
+                    })
+                    dataMap[type] = data
+                }
+            })
+            return dataMap
+        },
+        convertRightsTypeList (list, dataMap = {}) {
+            this.rightsTypeList = list.map((d) => {
+                const rights = ownRightsOptions[d]
+                if (rights) {
+                    rights.data = dataMap[rights.type] || []
+                    return rights
+                }
+            })
+        },
+        /**
      * 选择所有
      */
-    checkedAll(data) {
-      if (data) {
-        this.rightsTypeList = this.rightsTypeList.map(rights => {
-          rights.data = []
-          return rights
-        })
-      }
-    },
-    handleSelect(type) {
-      this.selectorType = type
-      this.selectorValue = []
-      this.selectorVisible = true
-    },
-    handleReset(type) {
-      this.rightsTypeList = this.rightsTypeList.map(rights => {
-        if (rights.type === type) {
-          rights.data = []
-        }
-        return rights
-      })
-      this.selectorType = ''
-    },
-    handleSelectorActionEvent(key, data) {
-      switch (key) {
-        case 'confirm':
-          this.handleSelectorConfirm(data)
-          break
-        default:
-          break
-      }
-    },
-    handleSelectorConfirm(data) {
-      this.selectorVisible = false
-      const d = data.map((d) => {
-        return {
-          id: d.id,
-          name: d.name
-        }
-      })
-      const list = []
-      this.rightsTypeList.forEach(rights => {
-        if (rights.type === this.selectorType) {
-          rights.data = d
-        }
-        list.push(rights)
-      })
-      this.rightsTypeList = list
-      this.selectorType = ''
-    },
-    getRights() {
-      if (this.selectAll) {
-        return [{
-          type: 'all',
-          rightsId: '',
-          rightsName: ''
-        }]
-      }
-      const rights = []
-      this.rightsTypeList.forEach(r => {
-        if (r.type === 'all') return true
-        if (r.type === 'none') return true
-        const ids = r.data.map((d) => d.id)
-        const names = r.data.map((d) => d.name)
-        if (this.$utils.isNotEmpty(ids)) {
-          rights.push({
-            type: r.type,
-            rightsId: ids.join(','),
-            rightsName: names.join(',')
-          })
-        }
-      })
-      return rights
-    },
-    closeDialog() {
-      this.$emit('close', false)
-    },
-    handleConfirm() {
-      const rights = this.getRights()
-      this.$emit('callback', rights)
-      this.closeDialog()
-    },
-    handleSave() {
-      save({
-        entityType: this.rightsKey,
-        entityId: this.id,
-        rights: JSON.stringify(this.getRights())
-      }).then(response => {
-        ActionUtils.saveSuccessMessage(response.message, (rtn) => {
-          if (rtn) {
+        checkedAll (data) {
+            if (data) {
+                this.rightsTypeList = this.rightsTypeList.map(rights => {
+                    rights.data = []
+                    return rights
+                })
+            }
+        },
+        handleSelect (type) {
+            const rightsData = this.rightsTypeList.find(d => d.type === type)
+            this.selectorType = type
+            if (type === 'role' && rightsData.data.length) {
+                this.selectorValue = rightsData.data
+            } else {
+                this.selectorValue = []
+            }
+            this.selectorVisible = true
+        },
+        handleReset (type) {
+            this.rightsTypeList = this.rightsTypeList.map(rights => {
+                if (rights.type === type) {
+                    rights.data = []
+                }
+                return rights
+            })
+            this.selectorType = ''
+        },
+        handleSelectorActionEvent (key, data) {
+            switch (key) {
+                case 'confirm':
+                    this.handleSelectorConfirm(data)
+                    break
+                default:
+                    break
+            }
+        },
+        handleSelectorConfirm (data) {
+            this.selectorVisible = false
+            const d = data.map((d) => {
+                return {
+                    id: d.id,
+                    name: d.name
+                }
+            })
+            const list = []
+            this.rightsTypeList.forEach(rights => {
+                if (rights.type === this.selectorType) {
+                    rights.data = d
+                }
+                list.push(rights)
+            })
+            this.rightsTypeList = list
+            this.selectorType = ''
+        },
+        getRights () {
+            if (this.selectAll) {
+                return [{
+                    type: 'all',
+                    rightsId: '',
+                    rightsName: ''
+                }]
+            }
+            const rights = []
+            this.rightsTypeList.forEach(r => {
+                if (r.type === 'all') return true
+                if (r.type === 'none') return true
+                const ids = r.data.map((d) => d.id)
+                const names = r.data.map((d) => d.name)
+                if (this.$utils.isNotEmpty(ids)) {
+                    rights.push({
+                        type: r.type,
+                        rightsId: ids.join(','),
+                        rightsName: names.join(',')
+                    })
+                }
+            })
+            return rights
+        },
+        closeDialog () {
+            this.$emit('close', false)
+        },
+        handleConfirm () {
+            const rights = this.getRights()
+            this.$emit('callback', rights)
             this.closeDialog()
-          }
-        })
-      })
+        },
+        handleSave () {
+            save({
+                entityType: this.rightsKey,
+                entityId: this.id,
+                rights: JSON.stringify(this.getRights())
+            }).then(response => {
+                ActionUtils.saveSuccessMessage(response.message, (rtn) => {
+                    if (rtn) {
+                        this.closeDialog()
+                    }
+                })
+            })
+        }
     }
-  }
 }
 </script>
 <style lang="scss">