diff --git a/web/src/view/superAdmin/authority/authority.vue b/web/src/view/superAdmin/authority/authority.vue
index d36fae37..a666649d 100644
--- a/web/src/view/superAdmin/authority/authority.vue
+++ b/web/src/view/superAdmin/authority/authority.vue
@@ -179,7 +179,6 @@ const datas = ref(null)
 const autoEnter = (activeName, oldActiveName) => {
   const paneArr = [menus, apis, datas]
   if (oldActiveName) {
-    console.log(paneArr[oldActiveName].value.needConfirm)
     if (paneArr[oldActiveName].value.needConfirm) {
       paneArr[oldActiveName].value.enterAndNext()
       paneArr[oldActiveName].value.needConfirm = false
diff --git a/web/src/view/superAdmin/authority/components/datas.vue b/web/src/view/superAdmin/authority/components/datas.vue
index 1cd78039..3b62bfbe 100644
--- a/web/src/view/superAdmin/authority/components/datas.vue
+++ b/web/src/view/superAdmin/authority/components/datas.vue
@@ -67,7 +67,6 @@ init()
 
 // 暴露给外层使用的切换拦截统一方法
 const enterAndNext = () => {
-  console.log(123)
   authDataEnter()
 }
 
@@ -97,7 +96,6 @@ const getChildrenId = (row, arrBox) => {
 }
 // 提交
 const authDataEnter = async() => {
-  console.log(123, props.row)
   const res = await setDataAuthority(props.row)
   if (res.code === 0) {
     ElMessage({ type: 'success', message: '资源设置成功' })
diff --git a/web/src/view/superAdmin/menu/icon.vue b/web/src/view/superAdmin/menu/icon.vue
index 98fd16c5..c88bcd8d 100644
--- a/web/src/view/superAdmin/menu/icon.vue
+++ b/web/src/view/superAdmin/menu/icon.vue
@@ -18,1150 +18,1146 @@
   </div>
 </template>
 
+<script setup>
+import { defineProps, ref, reactive } from 'vue'
+const props = defineProps({
+  meta: {
+    default: function() {
+      return {}
+    },
+    type: Object
+  }
+})
+
+const options = reactive([
+  {
+    'key': 'aim',
+    'label': 'aim'
+  },
+  {
+    'key': 'add-location',
+    'label': 'add-location'
+  },
+  {
+    'key': 'apple',
+    'label': 'apple'
+  },
+  {
+    'key': 'alarm-clock',
+    'label': 'alarm-clock'
+  },
+  {
+    'key': 'arrow-down',
+    'label': 'arrow-down'
+  },
+  {
+    'key': 'arrow-down-bold',
+    'label': 'arrow-down-bold'
+  },
+  {
+    'key': 'arrow-left',
+    'label': 'arrow-left'
+  },
+  {
+    'key': 'arrow-left-bold',
+    'label': 'arrow-left-bold'
+  },
+  {
+    'key': 'arrow-right-bold',
+    'label': 'arrow-right-bold'
+  },
+  {
+    'key': 'arrow-up',
+    'label': 'arrow-up'
+  },
+  {
+    'key': 'back',
+    'label': 'back'
+  },
+  {
+    'key': 'bell',
+    'label': 'bell'
+  },
+  {
+    'key': 'baseball',
+    'label': 'baseball'
+  },
+  {
+    'key': 'bicycle',
+    'label': 'bicycle'
+  },
+  {
+    'key': 'bell-filled',
+    'label': 'bell-filled'
+  },
+  {
+    'key': 'basketball',
+    'label': 'basketball'
+  },
+  {
+    'key': 'bottom',
+    'label': 'bottom'
+  },
+  {
+    'key': 'box',
+    'label': 'box'
+  },
+  {
+    'key': 'briefcase',
+    'label': 'briefcase'
+  },
+  {
+    'key': 'brush-filled',
+    'label': 'brush-filled'
+  },
+  {
+    'key': 'bowl',
+    'label': 'bowl'
+  },
+  {
+    'key': 'avatar',
+    'label': 'avatar'
+  },
+  {
+    'key': 'brush',
+    'label': 'brush'
+  },
+  {
+    'key': 'burger',
+    'label': 'burger'
+  },
+  {
+    'key': 'camera',
+    'label': 'camera'
+  },
+  {
+    'key': 'bottom-left',
+    'label': 'bottom-left'
+  },
+  {
+    'key': 'calendar',
+    'label': 'calendar'
+  },
+  {
+    'key': 'caret-bottom',
+    'label': 'caret-bottom'
+  },
+  {
+    'key': 'caret-left',
+    'label': 'caret-left'
+  },
+  {
+    'key': 'caret-right',
+    'label': 'caret-right'
+  },
+  {
+    'key': 'caret-top',
+    'label': 'caret-top'
+  },
+  {
+    'key': 'chat-dot-square',
+    'label': 'chat-dot-square'
+  },
+  {
+    'key': 'cellphone',
+    'label': 'cellphone'
+  },
+  {
+    'key': 'chat-dot-round',
+    'label': 'chat-dot-round'
+  },
+  {
+    'key': 'chat-line-square',
+    'label': 'chat-line-square'
+  },
+  {
+    'key': 'chat-line-round',
+    'label': 'chat-line-round'
+  },
+  {
+    'key': 'chat-round',
+    'label': 'chat-round'
+  },
+  {
+    'key': 'check',
+    'label': 'check'
+  },
+  {
+    'key': 'chat-square',
+    'label': 'chat-square'
+  },
+  {
+    'key': 'cherry',
+    'label': 'cherry'
+  },
+  {
+    'key': 'chicken',
+    'label': 'chicken'
+  },
+  {
+    'key': 'circle-check-filled',
+    'label': 'circle-check-filled'
+  },
+  {
+    'key': 'circle-check',
+    'label': 'circle-check'
+  },
+  {
+    'key': 'checked',
+    'label': 'checked'
+  },
+  {
+    'key': 'circle-close-filled',
+    'label': 'circle-close-filled'
+  },
+  {
+    'key': 'circle-close',
+    'label': 'circle-close'
+  },
+  {
+    'key': 'arrow-right',
+    'label': 'arrow-right'
+  },
+  {
+    'key': 'circle-plus',
+    'label': 'circle-plus'
+  },
+  {
+    'key': 'clock',
+    'label': 'clock'
+  },
+  {
+    'key': 'close-bold',
+    'label': 'close-bold'
+  },
+  {
+    'key': 'close',
+    'label': 'close'
+  },
+  {
+    'key': 'cloudy',
+    'label': 'cloudy'
+  },
+  {
+    'key': 'circle-plus-filled',
+    'label': 'circle-plus-filled'
+  },
+  {
+    'key': 'coffee-cup',
+    'label': 'coffee-cup'
+  },
+  {
+    'key': 'cold-drink',
+    'label': 'cold-drink'
+  },
+  {
+    'key': 'coin',
+    'label': 'coin'
+  },
+  {
+    'key': 'arrow-up-bold',
+    'label': 'arrow-up-bold'
+  },
+  {
+    'key': 'collection-tag',
+    'label': 'collection-tag'
+  },
+  {
+    'key': 'bottom-right',
+    'label': 'bottom-right'
+  },
+  {
+    'key': 'coffee',
+    'label': 'coffee'
+  },
+  {
+    'key': 'camera-filled',
+    'label': 'camera-filled'
+  },
+  {
+    'key': 'collection',
+    'label': 'collection'
+  },
+  {
+    'key': 'cpu',
+    'label': 'cpu'
+  },
+  {
+    'key': 'crop',
+    'label': 'crop'
+  },
+  {
+    'key': 'coordinate',
+    'label': 'coordinate'
+  },
+  {
+    'key': 'd-arrow-left',
+    'label': 'd-arrow-left'
+  },
+  {
+    'key': 'compass',
+    'label': 'compass'
+  },
+  {
+    'key': 'connection',
+    'label': 'connection'
+  },
+  {
+    'key': 'credit-card',
+    'label': 'credit-card'
+  },
+  {
+    'key': 'data-board',
+    'label': 'data-board'
+  },
+  {
+    'key': 'd-arrow-right',
+    'label': 'd-arrow-right'
+  },
+  {
+    'key': 'dessert',
+    'label': 'dessert'
+  },
+  {
+    'key': 'delete-location',
+    'label': 'delete-location'
+  },
+  {
+    'key': 'd-caret',
+    'label': 'd-caret'
+  },
+  {
+    'key': 'delete',
+    'label': 'delete'
+  },
+  {
+    'key': 'dish',
+    'label': 'dish'
+  },
+  {
+    'key': 'dish-dot',
+    'label': 'dish-dot'
+  },
+  {
+    'key': 'document-copy',
+    'label': 'document-copy'
+  },
+  {
+    'key': 'discount',
+    'label': 'discount'
+  },
+  {
+    'key': 'document-checked',
+    'label': 'document-checked'
+  },
+  {
+    'key': 'document-add',
+    'label': 'document-add'
+  },
+  {
+    'key': 'document-remove',
+    'label': 'document-remove'
+  },
+  {
+    'key': 'data-analysis',
+    'label': 'data-analysis'
+  },
+  {
+    'key': 'delete-filled',
+    'label': 'delete-filled'
+  },
+  {
+    'key': 'download',
+    'label': 'download'
+  },
+  {
+    'key': 'drizzling',
+    'label': 'drizzling'
+  },
+  {
+    'key': 'eleme',
+    'label': 'eleme'
+  },
+  {
+    'key': 'eleme-filled',
+    'label': 'eleme-filled'
+  },
+  {
+    'key': 'edit',
+    'label': 'edit'
+  },
+  {
+    'key': 'failed',
+    'label': 'failed'
+  },
+  {
+    'key': 'expand',
+    'label': 'expand'
+  },
+  {
+    'key': 'female',
+    'label': 'female'
+  },
+  {
+    'key': 'document',
+    'label': 'document'
+  },
+  {
+    'key': 'film',
+    'label': 'film'
+  },
+  {
+    'key': 'finished',
+    'label': 'finished'
+  },
+  {
+    'key': 'data-line',
+    'label': 'data-line'
+  },
+  {
+    'key': 'filter',
+    'label': 'filter'
+  },
+  {
+    'key': 'flag',
+    'label': 'flag'
+  },
+  {
+    'key': 'folder-checked',
+    'label': 'folder-checked'
+  },
+  {
+    'key': 'first-aid-kit',
+    'label': 'first-aid-kit'
+  },
+  {
+    'key': 'folder-add',
+    'label': 'folder-add'
+  },
+  {
+    'key': 'fold',
+    'label': 'fold'
+  },
+  {
+    'key': 'folder-delete',
+    'label': 'folder-delete'
+  },
+  {
+    'key': 'document-delete',
+    'label': 'document-delete'
+  },
+  {
+    'key': 'folder',
+    'label': 'folder'
+  },
+  {
+    'key': 'food',
+    'label': 'food'
+  },
+  {
+    'key': 'folder-opened',
+    'label': 'folder-opened'
+  },
+  {
+    'key': 'football',
+    'label': 'football'
+  },
+  {
+    'key': 'folder-remove',
+    'label': 'folder-remove'
+  },
+  {
+    'key': 'fries',
+    'label': 'fries'
+  },
+  {
+    'key': 'full-screen',
+    'label': 'full-screen'
+  },
+  {
+    'key': 'fork-spoon',
+    'label': 'fork-spoon'
+  },
+  {
+    'key': 'goblet',
+    'label': 'goblet'
+  },
+  {
+    'key': 'goblet-full',
+    'label': 'goblet-full'
+  },
+  {
+    'key': 'goods',
+    'label': 'goods'
+  },
+  {
+    'key': 'goblet-square-full',
+    'label': 'goblet-square-full'
+  },
+  {
+    'key': 'goods-filled',
+    'label': 'goods-filled'
+  },
+  {
+    'key': 'grid',
+    'label': 'grid'
+  },
+  {
+    'key': 'grape',
+    'label': 'grape'
+  },
+  {
+    'key': 'goblet-square',
+    'label': 'goblet-square'
+  },
+  {
+    'key': 'headset',
+    'label': 'headset'
+  },
+  {
+    'key': 'comment',
+    'label': 'comment'
+  },
+  {
+    'key': 'help-filled',
+    'label': 'help-filled'
+  },
+  {
+    'key': 'histogram',
+    'label': 'histogram'
+  },
+  {
+    'key': 'home-filled',
+    'label': 'home-filled'
+  },
+  {
+    'key': 'help',
+    'label': 'help'
+  },
+  {
+    'key': 'house',
+    'label': 'house'
+  },
+  {
+    'key': 'ice-cream-round',
+    'label': 'ice-cream-round'
+  },
+  {
+    'key': 'hot-water',
+    'label': 'hot-water'
+  },
+  {
+    'key': 'ice-cream',
+    'label': 'ice-cream'
+  },
+  {
+    'key': 'files',
+    'label': 'files'
+  },
+  {
+    'key': 'ice-cream-square',
+    'label': 'ice-cream-square'
+  },
+  {
+    'key': 'key',
+    'label': 'key'
+  },
+  {
+    'key': 'ice-tea',
+    'label': 'ice-tea'
+  },
+  {
+    'key': 'knife-fork',
+    'label': 'knife-fork'
+  },
+  {
+    'key': 'iphone',
+    'label': 'iphone'
+  },
+  {
+    'key': 'info-filled',
+    'label': 'info-filled'
+  },
+  {
+    'key': 'link',
+    'label': 'link'
+  },
+  {
+    'key': 'ice-drink',
+    'label': 'ice-drink'
+  },
+  {
+    'key': 'lightning',
+    'label': 'lightning'
+  },
+  {
+    'key': 'loading',
+    'label': 'loading'
+  },
+  {
+    'key': 'lollipop',
+    'label': 'lollipop'
+  },
+  {
+    'key': 'location-information',
+    'label': 'location-information'
+  },
+  {
+    'key': 'lock',
+    'label': 'lock'
+  },
+  {
+    'key': 'location-filled',
+    'label': 'location-filled'
+  },
+  {
+    'key': 'magnet',
+    'label': 'magnet'
+  },
+  {
+    'key': 'male',
+    'label': 'male'
+  },
+  {
+    'key': 'location',
+    'label': 'location'
+  },
+  {
+    'key': 'menu',
+    'label': 'menu'
+  },
+  {
+    'key': 'magic-stick',
+    'label': 'magic-stick'
+  },
+  {
+    'key': 'message-box',
+    'label': 'message-box'
+  },
+  {
+    'key': 'map-location',
+    'label': 'map-location'
+  },
+  {
+    'key': 'mic',
+    'label': 'mic'
+  },
+  {
+    'key': 'message',
+    'label': 'message'
+  },
+  {
+    'key': 'medal',
+    'label': 'medal'
+  },
+  {
+    'key': 'milk-tea',
+    'label': 'milk-tea'
+  },
+  {
+    'key': 'microphone',
+    'label': 'microphone'
+  },
+  {
+    'key': 'minus',
+    'label': 'minus'
+  },
+  {
+    'key': 'money',
+    'label': 'money'
+  },
+  {
+    'key': 'moon-night',
+    'label': 'moon-night'
+  },
+  {
+    'key': 'monitor',
+    'label': 'monitor'
+  },
+  {
+    'key': 'moon',
+    'label': 'moon'
+  },
+  {
+    'key': 'more',
+    'label': 'more'
+  },
+  {
+    'key': 'mostly-cloudy',
+    'label': 'mostly-cloudy'
+  },
+  {
+    'key': 'more-filled',
+    'label': 'more-filled'
+  },
+  {
+    'key': 'mouse',
+    'label': 'mouse'
+  },
+  {
+    'key': 'mug',
+    'label': 'mug'
+  },
+  {
+    'key': 'mute',
+    'label': 'mute'
+  },
+  {
+    'key': 'no-smoking',
+    'label': 'no-smoking'
+  },
+  {
+    'key': 'mute-notification',
+    'label': 'mute-notification'
+  },
+  {
+    'key': 'notification',
+    'label': 'notification'
+  },
+  {
+    'key': 'notebook',
+    'label': 'notebook'
+  },
+  {
+    'key': 'odometer',
+    'label': 'odometer'
+  },
+  {
+    'key': 'office-building',
+    'label': 'office-building'
+  },
+  {
+    'key': 'operation',
+    'label': 'operation'
+  },
+  {
+    'key': 'opportunity',
+    'label': 'opportunity'
+  },
+  {
+    'key': 'orange',
+    'label': 'orange'
+  },
+  {
+    'key': 'open',
+    'label': 'open'
+  },
+  {
+    'key': 'paperclip',
+    'label': 'paperclip'
+  },
+  {
+    'key': 'pear',
+    'label': 'pear'
+  },
+  {
+    'key': 'partly-cloudy',
+    'label': 'partly-cloudy'
+  },
+  {
+    'key': 'phone',
+    'label': 'phone'
+  },
+  {
+    'key': 'picture-filled',
+    'label': 'picture-filled'
+  },
+  {
+    'key': 'phone-filled',
+    'label': 'phone-filled'
+  },
+  {
+    'key': 'picture-rounded',
+    'label': 'picture-rounded'
+  },
+  {
+    'key': 'guide',
+    'label': 'guide'
+  },
+  {
+    'key': 'place',
+    'label': 'place'
+  },
+  {
+    'key': 'platform',
+    'label': 'platform'
+  },
+  {
+    'key': 'pie-chart',
+    'label': 'pie-chart'
+  },
+  {
+    'key': 'pointer',
+    'label': 'pointer'
+  },
+  {
+    'key': 'plus',
+    'label': 'plus'
+  },
+  {
+    'key': 'position',
+    'label': 'position'
+  },
+  {
+    'key': 'postcard',
+    'label': 'postcard'
+  },
+  {
+    'key': 'present',
+    'label': 'present'
+  },
+  {
+    'key': 'price-tag',
+    'label': 'price-tag'
+  },
+  {
+    'key': 'promotion',
+    'label': 'promotion'
+  },
+  {
+    'key': 'pouring',
+    'label': 'pouring'
+  },
+  {
+    'key': 'reading-lamp',
+    'label': 'reading-lamp'
+  },
+  {
+    'key': 'question-filled',
+    'label': 'question-filled'
+  },
+  {
+    'key': 'printer',
+    'label': 'printer'
+  },
+  {
+    'key': 'picture',
+    'label': 'picture'
+  },
+  {
+    'key': 'refresh-right',
+    'label': 'refresh-right'
+  },
+  {
+    'key': 'reading',
+    'label': 'reading'
+  },
+  {
+    'key': 'refresh-left',
+    'label': 'refresh-left'
+  },
+  {
+    'key': 'refresh',
+    'label': 'refresh'
+  },
+  {
+    'key': 'refrigerator',
+    'label': 'refrigerator'
+  },
+  {
+    'key': 'remove-filled',
+    'label': 'remove-filled'
+  },
+  {
+    'key': 'right',
+    'label': 'right'
+  },
+  {
+    'key': 'scale-to-original',
+    'label': 'scale-to-original'
+  },
+  {
+    'key': 'school',
+    'label': 'school'
+  },
+  {
+    'key': 'remove',
+    'label': 'remove'
+  },
+  {
+    'key': 'scissor',
+    'label': 'scissor'
+  },
+  {
+    'key': 'select',
+    'label': 'select'
+  },
+  {
+    'key': 'management',
+    'label': 'management'
+  },
+  {
+    'key': 'search',
+    'label': 'search'
+  },
+  {
+    'key': 'sell',
+    'label': 'sell'
+  },
+  {
+    'key': 'semi-select',
+    'label': 'semi-select'
+  },
+  {
+    'key': 'share',
+    'label': 'share'
+  },
+  {
+    'key': 'setting',
+    'label': 'setting'
+  },
+  {
+    'key': 'service',
+    'label': 'service'
+  },
+  {
+    'key': 'ship',
+    'label': 'ship'
+  },
+  {
+    'key': 'set-up',
+    'label': 'set-up'
+  },
+  {
+    'key': 'shopping-bag',
+    'label': 'shopping-bag'
+  },
+  {
+    'key': 'shop',
+    'label': 'shop'
+  },
+  {
+    'key': 'shopping-cart',
+    'label': 'shopping-cart'
+  },
+  {
+    'key': 'shopping-cart-full',
+    'label': 'shopping-cart-full'
+  },
+  {
+    'key': 'soccer',
+    'label': 'soccer'
+  },
+  {
+    'key': 'sold-out',
+    'label': 'sold-out'
+  },
+  {
+    'key': 'smoking',
+    'label': 'smoking'
+  },
+  {
+    'key': 'sort-down',
+    'label': 'sort-down'
+  },
+  {
+    'key': 'sort',
+    'label': 'sort'
+  },
+  {
+    'key': 'sort-up',
+    'label': 'sort-up'
+  },
+  {
+    'key': 'star',
+    'label': 'star'
+  },
+  {
+    'key': 'stamp',
+    'label': 'stamp'
+  },
+  {
+    'key': 'star-filled',
+    'label': 'star-filled'
+  },
+  {
+    'key': 'stopwatch',
+    'label': 'stopwatch'
+  },
+  {
+    'key': 'success-filled',
+    'label': 'success-filled'
+  },
+  {
+    'key': 'suitcase',
+    'label': 'suitcase'
+  },
+  {
+    'key': 'sugar',
+    'label': 'sugar'
+  },
+  {
+    'key': 'sunny',
+    'label': 'sunny'
+  },
+  {
+    'key': 'sunrise',
+    'label': 'sunrise'
+  },
+  {
+    'key': 'switch',
+    'label': 'switch'
+  },
+  {
+    'key': 'ticket',
+    'label': 'ticket'
+  },
+  {
+    'key': 'sunset',
+    'label': 'sunset'
+  },
+  {
+    'key': 'tickets',
+    'label': 'tickets'
+  },
+  {
+    'key': 'switch-button',
+    'label': 'switch-button'
+  },
+  {
+    'key': 'takeaway-box',
+    'label': 'takeaway-box'
+  },
+  {
+    'key': 'toilet-paper',
+    'label': 'toilet-paper'
+  },
+  {
+    'key': 'timer',
+    'label': 'timer'
+  },
+  {
+    'key': 'tools',
+    'label': 'tools'
+  },
+  {
+    'key': 'top-left',
+    'label': 'top-left'
+  },
+  {
+    'key': 'top',
+    'label': 'top'
+  },
+  {
+    'key': 'top-right',
+    'label': 'top-right'
+  },
+  {
+    'key': 'trend-charts',
+    'label': 'trend-charts'
+  },
+  {
+    'key': 'turn-off',
+    'label': 'turn-off'
+  },
+  {
+    'key': 'unlock',
+    'label': 'unlock'
+  },
+  {
+    'key': 'trophy',
+    'label': 'trophy'
+  },
+  {
+    'key': 'umbrella',
+    'label': 'umbrella'
+  },
+  {
+    'key': 'upload-filled',
+    'label': 'upload-filled'
+  },
+  {
+    'key': 'user-filled',
+    'label': 'user-filled'
+  },
+  {
+    'key': 'upload',
+    'label': 'upload'
+  },
+  {
+    'key': 'user',
+    'label': 'user'
+  },
+  {
+    'key': 'van',
+    'label': 'van'
+  },
+  {
+    'key': 'copy-document',
+    'label': 'copy-document'
+  },
+  {
+    'key': 'video-pause',
+    'label': 'video-pause'
+  },
+  {
+    'key': 'video-camera-filled',
+    'label': 'video-camera-filled'
+  },
+  {
+    'key': 'view',
+    'label': 'view'
+  },
+  {
+    'key': 'wallet',
+    'label': 'wallet'
+  },
+  {
+    'key': 'warning-filled',
+    'label': 'warning-filled'
+  },
+  {
+    'key': 'watch',
+    'label': 'watch'
+  },
+  {
+    'key': 'video-play',
+    'label': 'video-play'
+  },
+  {
+    'key': 'watermelon',
+    'label': 'watermelon'
+  },
+  {
+    'key': 'video-camera',
+    'label': 'video-camera'
+  },
+  {
+    'key': 'wallet-filled',
+    'label': 'wallet-filled'
+  },
+  {
+    'key': 'warning',
+    'label': 'warning'
+  },
+  {
+    'key': 'list',
+    'label': 'list'
+  },
+  {
+    'key': 'zoom-in',
+    'label': 'zoom-in'
+  },
+  {
+    'key': 'zoom-out',
+    'label': 'zoom-out'
+  },
+  {
+    'key': 'rank',
+    'label': 'rank'
+  },
+  {
+    'key': 'wind-power',
+    'label': 'wind-power'
+  }
+])
+
+const metaData = ref(props.meta)
+</script>
+
 <script>
 export default {
   name: 'Icon',
-  props: {
-    meta: {
-      default: function() {
-        return {}
-      },
-      type: Object
-    }
-  },
-  data() {
-    return {
-      input: '',
-      metaData: {},
-      options: [
-        {
-          'key': 'aim',
-          'label': 'aim'
-        },
-        {
-          'key': 'add-location',
-          'label': 'add-location'
-        },
-        {
-          'key': 'apple',
-          'label': 'apple'
-        },
-        {
-          'key': 'alarm-clock',
-          'label': 'alarm-clock'
-        },
-        {
-          'key': 'arrow-down',
-          'label': 'arrow-down'
-        },
-        {
-          'key': 'arrow-down-bold',
-          'label': 'arrow-down-bold'
-        },
-        {
-          'key': 'arrow-left',
-          'label': 'arrow-left'
-        },
-        {
-          'key': 'arrow-left-bold',
-          'label': 'arrow-left-bold'
-        },
-        {
-          'key': 'arrow-right-bold',
-          'label': 'arrow-right-bold'
-        },
-        {
-          'key': 'arrow-up',
-          'label': 'arrow-up'
-        },
-        {
-          'key': 'back',
-          'label': 'back'
-        },
-        {
-          'key': 'bell',
-          'label': 'bell'
-        },
-        {
-          'key': 'baseball',
-          'label': 'baseball'
-        },
-        {
-          'key': 'bicycle',
-          'label': 'bicycle'
-        },
-        {
-          'key': 'bell-filled',
-          'label': 'bell-filled'
-        },
-        {
-          'key': 'basketball',
-          'label': 'basketball'
-        },
-        {
-          'key': 'bottom',
-          'label': 'bottom'
-        },
-        {
-          'key': 'box',
-          'label': 'box'
-        },
-        {
-          'key': 'briefcase',
-          'label': 'briefcase'
-        },
-        {
-          'key': 'brush-filled',
-          'label': 'brush-filled'
-        },
-        {
-          'key': 'bowl',
-          'label': 'bowl'
-        },
-        {
-          'key': 'avatar',
-          'label': 'avatar'
-        },
-        {
-          'key': 'brush',
-          'label': 'brush'
-        },
-        {
-          'key': 'burger',
-          'label': 'burger'
-        },
-        {
-          'key': 'camera',
-          'label': 'camera'
-        },
-        {
-          'key': 'bottom-left',
-          'label': 'bottom-left'
-        },
-        {
-          'key': 'calendar',
-          'label': 'calendar'
-        },
-        {
-          'key': 'caret-bottom',
-          'label': 'caret-bottom'
-        },
-        {
-          'key': 'caret-left',
-          'label': 'caret-left'
-        },
-        {
-          'key': 'caret-right',
-          'label': 'caret-right'
-        },
-        {
-          'key': 'caret-top',
-          'label': 'caret-top'
-        },
-        {
-          'key': 'chat-dot-square',
-          'label': 'chat-dot-square'
-        },
-        {
-          'key': 'cellphone',
-          'label': 'cellphone'
-        },
-        {
-          'key': 'chat-dot-round',
-          'label': 'chat-dot-round'
-        },
-        {
-          'key': 'chat-line-square',
-          'label': 'chat-line-square'
-        },
-        {
-          'key': 'chat-line-round',
-          'label': 'chat-line-round'
-        },
-        {
-          'key': 'chat-round',
-          'label': 'chat-round'
-        },
-        {
-          'key': 'check',
-          'label': 'check'
-        },
-        {
-          'key': 'chat-square',
-          'label': 'chat-square'
-        },
-        {
-          'key': 'cherry',
-          'label': 'cherry'
-        },
-        {
-          'key': 'chicken',
-          'label': 'chicken'
-        },
-        {
-          'key': 'circle-check-filled',
-          'label': 'circle-check-filled'
-        },
-        {
-          'key': 'circle-check',
-          'label': 'circle-check'
-        },
-        {
-          'key': 'checked',
-          'label': 'checked'
-        },
-        {
-          'key': 'circle-close-filled',
-          'label': 'circle-close-filled'
-        },
-        {
-          'key': 'circle-close',
-          'label': 'circle-close'
-        },
-        {
-          'key': 'arrow-right',
-          'label': 'arrow-right'
-        },
-        {
-          'key': 'circle-plus',
-          'label': 'circle-plus'
-        },
-        {
-          'key': 'clock',
-          'label': 'clock'
-        },
-        {
-          'key': 'close-bold',
-          'label': 'close-bold'
-        },
-        {
-          'key': 'close',
-          'label': 'close'
-        },
-        {
-          'key': 'cloudy',
-          'label': 'cloudy'
-        },
-        {
-          'key': 'circle-plus-filled',
-          'label': 'circle-plus-filled'
-        },
-        {
-          'key': 'coffee-cup',
-          'label': 'coffee-cup'
-        },
-        {
-          'key': 'cold-drink',
-          'label': 'cold-drink'
-        },
-        {
-          'key': 'coin',
-          'label': 'coin'
-        },
-        {
-          'key': 'arrow-up-bold',
-          'label': 'arrow-up-bold'
-        },
-        {
-          'key': 'collection-tag',
-          'label': 'collection-tag'
-        },
-        {
-          'key': 'bottom-right',
-          'label': 'bottom-right'
-        },
-        {
-          'key': 'coffee',
-          'label': 'coffee'
-        },
-        {
-          'key': 'camera-filled',
-          'label': 'camera-filled'
-        },
-        {
-          'key': 'collection',
-          'label': 'collection'
-        },
-        {
-          'key': 'cpu',
-          'label': 'cpu'
-        },
-        {
-          'key': 'crop',
-          'label': 'crop'
-        },
-        {
-          'key': 'coordinate',
-          'label': 'coordinate'
-        },
-        {
-          'key': 'd-arrow-left',
-          'label': 'd-arrow-left'
-        },
-        {
-          'key': 'compass',
-          'label': 'compass'
-        },
-        {
-          'key': 'connection',
-          'label': 'connection'
-        },
-        {
-          'key': 'credit-card',
-          'label': 'credit-card'
-        },
-        {
-          'key': 'data-board',
-          'label': 'data-board'
-        },
-        {
-          'key': 'd-arrow-right',
-          'label': 'd-arrow-right'
-        },
-        {
-          'key': 'dessert',
-          'label': 'dessert'
-        },
-        {
-          'key': 'delete-location',
-          'label': 'delete-location'
-        },
-        {
-          'key': 'd-caret',
-          'label': 'd-caret'
-        },
-        {
-          'key': 'delete',
-          'label': 'delete'
-        },
-        {
-          'key': 'dish',
-          'label': 'dish'
-        },
-        {
-          'key': 'dish-dot',
-          'label': 'dish-dot'
-        },
-        {
-          'key': 'document-copy',
-          'label': 'document-copy'
-        },
-        {
-          'key': 'discount',
-          'label': 'discount'
-        },
-        {
-          'key': 'document-checked',
-          'label': 'document-checked'
-        },
-        {
-          'key': 'document-add',
-          'label': 'document-add'
-        },
-        {
-          'key': 'document-remove',
-          'label': 'document-remove'
-        },
-        {
-          'key': 'data-analysis',
-          'label': 'data-analysis'
-        },
-        {
-          'key': 'delete-filled',
-          'label': 'delete-filled'
-        },
-        {
-          'key': 'download',
-          'label': 'download'
-        },
-        {
-          'key': 'drizzling',
-          'label': 'drizzling'
-        },
-        {
-          'key': 'eleme',
-          'label': 'eleme'
-        },
-        {
-          'key': 'eleme-filled',
-          'label': 'eleme-filled'
-        },
-        {
-          'key': 'edit',
-          'label': 'edit'
-        },
-        {
-          'key': 'failed',
-          'label': 'failed'
-        },
-        {
-          'key': 'expand',
-          'label': 'expand'
-        },
-        {
-          'key': 'female',
-          'label': 'female'
-        },
-        {
-          'key': 'document',
-          'label': 'document'
-        },
-        {
-          'key': 'film',
-          'label': 'film'
-        },
-        {
-          'key': 'finished',
-          'label': 'finished'
-        },
-        {
-          'key': 'data-line',
-          'label': 'data-line'
-        },
-        {
-          'key': 'filter',
-          'label': 'filter'
-        },
-        {
-          'key': 'flag',
-          'label': 'flag'
-        },
-        {
-          'key': 'folder-checked',
-          'label': 'folder-checked'
-        },
-        {
-          'key': 'first-aid-kit',
-          'label': 'first-aid-kit'
-        },
-        {
-          'key': 'folder-add',
-          'label': 'folder-add'
-        },
-        {
-          'key': 'fold',
-          'label': 'fold'
-        },
-        {
-          'key': 'folder-delete',
-          'label': 'folder-delete'
-        },
-        {
-          'key': 'document-delete',
-          'label': 'document-delete'
-        },
-        {
-          'key': 'folder',
-          'label': 'folder'
-        },
-        {
-          'key': 'food',
-          'label': 'food'
-        },
-        {
-          'key': 'folder-opened',
-          'label': 'folder-opened'
-        },
-        {
-          'key': 'football',
-          'label': 'football'
-        },
-        {
-          'key': 'folder-remove',
-          'label': 'folder-remove'
-        },
-        {
-          'key': 'fries',
-          'label': 'fries'
-        },
-        {
-          'key': 'full-screen',
-          'label': 'full-screen'
-        },
-        {
-          'key': 'fork-spoon',
-          'label': 'fork-spoon'
-        },
-        {
-          'key': 'goblet',
-          'label': 'goblet'
-        },
-        {
-          'key': 'goblet-full',
-          'label': 'goblet-full'
-        },
-        {
-          'key': 'goods',
-          'label': 'goods'
-        },
-        {
-          'key': 'goblet-square-full',
-          'label': 'goblet-square-full'
-        },
-        {
-          'key': 'goods-filled',
-          'label': 'goods-filled'
-        },
-        {
-          'key': 'grid',
-          'label': 'grid'
-        },
-        {
-          'key': 'grape',
-          'label': 'grape'
-        },
-        {
-          'key': 'goblet-square',
-          'label': 'goblet-square'
-        },
-        {
-          'key': 'headset',
-          'label': 'headset'
-        },
-        {
-          'key': 'comment',
-          'label': 'comment'
-        },
-        {
-          'key': 'help-filled',
-          'label': 'help-filled'
-        },
-        {
-          'key': 'histogram',
-          'label': 'histogram'
-        },
-        {
-          'key': 'home-filled',
-          'label': 'home-filled'
-        },
-        {
-          'key': 'help',
-          'label': 'help'
-        },
-        {
-          'key': 'house',
-          'label': 'house'
-        },
-        {
-          'key': 'ice-cream-round',
-          'label': 'ice-cream-round'
-        },
-        {
-          'key': 'hot-water',
-          'label': 'hot-water'
-        },
-        {
-          'key': 'ice-cream',
-          'label': 'ice-cream'
-        },
-        {
-          'key': 'files',
-          'label': 'files'
-        },
-        {
-          'key': 'ice-cream-square',
-          'label': 'ice-cream-square'
-        },
-        {
-          'key': 'key',
-          'label': 'key'
-        },
-        {
-          'key': 'ice-tea',
-          'label': 'ice-tea'
-        },
-        {
-          'key': 'knife-fork',
-          'label': 'knife-fork'
-        },
-        {
-          'key': 'iphone',
-          'label': 'iphone'
-        },
-        {
-          'key': 'info-filled',
-          'label': 'info-filled'
-        },
-        {
-          'key': 'link',
-          'label': 'link'
-        },
-        {
-          'key': 'ice-drink',
-          'label': 'ice-drink'
-        },
-        {
-          'key': 'lightning',
-          'label': 'lightning'
-        },
-        {
-          'key': 'loading',
-          'label': 'loading'
-        },
-        {
-          'key': 'lollipop',
-          'label': 'lollipop'
-        },
-        {
-          'key': 'location-information',
-          'label': 'location-information'
-        },
-        {
-          'key': 'lock',
-          'label': 'lock'
-        },
-        {
-          'key': 'location-filled',
-          'label': 'location-filled'
-        },
-        {
-          'key': 'magnet',
-          'label': 'magnet'
-        },
-        {
-          'key': 'male',
-          'label': 'male'
-        },
-        {
-          'key': 'location',
-          'label': 'location'
-        },
-        {
-          'key': 'menu',
-          'label': 'menu'
-        },
-        {
-          'key': 'magic-stick',
-          'label': 'magic-stick'
-        },
-        {
-          'key': 'message-box',
-          'label': 'message-box'
-        },
-        {
-          'key': 'map-location',
-          'label': 'map-location'
-        },
-        {
-          'key': 'mic',
-          'label': 'mic'
-        },
-        {
-          'key': 'message',
-          'label': 'message'
-        },
-        {
-          'key': 'medal',
-          'label': 'medal'
-        },
-        {
-          'key': 'milk-tea',
-          'label': 'milk-tea'
-        },
-        {
-          'key': 'microphone',
-          'label': 'microphone'
-        },
-        {
-          'key': 'minus',
-          'label': 'minus'
-        },
-        {
-          'key': 'money',
-          'label': 'money'
-        },
-        {
-          'key': 'moon-night',
-          'label': 'moon-night'
-        },
-        {
-          'key': 'monitor',
-          'label': 'monitor'
-        },
-        {
-          'key': 'moon',
-          'label': 'moon'
-        },
-        {
-          'key': 'more',
-          'label': 'more'
-        },
-        {
-          'key': 'mostly-cloudy',
-          'label': 'mostly-cloudy'
-        },
-        {
-          'key': 'more-filled',
-          'label': 'more-filled'
-        },
-        {
-          'key': 'mouse',
-          'label': 'mouse'
-        },
-        {
-          'key': 'mug',
-          'label': 'mug'
-        },
-        {
-          'key': 'mute',
-          'label': 'mute'
-        },
-        {
-          'key': 'no-smoking',
-          'label': 'no-smoking'
-        },
-        {
-          'key': 'mute-notification',
-          'label': 'mute-notification'
-        },
-        {
-          'key': 'notification',
-          'label': 'notification'
-        },
-        {
-          'key': 'notebook',
-          'label': 'notebook'
-        },
-        {
-          'key': 'odometer',
-          'label': 'odometer'
-        },
-        {
-          'key': 'office-building',
-          'label': 'office-building'
-        },
-        {
-          'key': 'operation',
-          'label': 'operation'
-        },
-        {
-          'key': 'opportunity',
-          'label': 'opportunity'
-        },
-        {
-          'key': 'orange',
-          'label': 'orange'
-        },
-        {
-          'key': 'open',
-          'label': 'open'
-        },
-        {
-          'key': 'paperclip',
-          'label': 'paperclip'
-        },
-        {
-          'key': 'pear',
-          'label': 'pear'
-        },
-        {
-          'key': 'partly-cloudy',
-          'label': 'partly-cloudy'
-        },
-        {
-          'key': 'phone',
-          'label': 'phone'
-        },
-        {
-          'key': 'picture-filled',
-          'label': 'picture-filled'
-        },
-        {
-          'key': 'phone-filled',
-          'label': 'phone-filled'
-        },
-        {
-          'key': 'picture-rounded',
-          'label': 'picture-rounded'
-        },
-        {
-          'key': 'guide',
-          'label': 'guide'
-        },
-        {
-          'key': 'place',
-          'label': 'place'
-        },
-        {
-          'key': 'platform',
-          'label': 'platform'
-        },
-        {
-          'key': 'pie-chart',
-          'label': 'pie-chart'
-        },
-        {
-          'key': 'pointer',
-          'label': 'pointer'
-        },
-        {
-          'key': 'plus',
-          'label': 'plus'
-        },
-        {
-          'key': 'position',
-          'label': 'position'
-        },
-        {
-          'key': 'postcard',
-          'label': 'postcard'
-        },
-        {
-          'key': 'present',
-          'label': 'present'
-        },
-        {
-          'key': 'price-tag',
-          'label': 'price-tag'
-        },
-        {
-          'key': 'promotion',
-          'label': 'promotion'
-        },
-        {
-          'key': 'pouring',
-          'label': 'pouring'
-        },
-        {
-          'key': 'reading-lamp',
-          'label': 'reading-lamp'
-        },
-        {
-          'key': 'question-filled',
-          'label': 'question-filled'
-        },
-        {
-          'key': 'printer',
-          'label': 'printer'
-        },
-        {
-          'key': 'picture',
-          'label': 'picture'
-        },
-        {
-          'key': 'refresh-right',
-          'label': 'refresh-right'
-        },
-        {
-          'key': 'reading',
-          'label': 'reading'
-        },
-        {
-          'key': 'refresh-left',
-          'label': 'refresh-left'
-        },
-        {
-          'key': 'refresh',
-          'label': 'refresh'
-        },
-        {
-          'key': 'refrigerator',
-          'label': 'refrigerator'
-        },
-        {
-          'key': 'remove-filled',
-          'label': 'remove-filled'
-        },
-        {
-          'key': 'right',
-          'label': 'right'
-        },
-        {
-          'key': 'scale-to-original',
-          'label': 'scale-to-original'
-        },
-        {
-          'key': 'school',
-          'label': 'school'
-        },
-        {
-          'key': 'remove',
-          'label': 'remove'
-        },
-        {
-          'key': 'scissor',
-          'label': 'scissor'
-        },
-        {
-          'key': 'select',
-          'label': 'select'
-        },
-        {
-          'key': 'management',
-          'label': 'management'
-        },
-        {
-          'key': 'search',
-          'label': 'search'
-        },
-        {
-          'key': 'sell',
-          'label': 'sell'
-        },
-        {
-          'key': 'semi-select',
-          'label': 'semi-select'
-        },
-        {
-          'key': 'share',
-          'label': 'share'
-        },
-        {
-          'key': 'setting',
-          'label': 'setting'
-        },
-        {
-          'key': 'service',
-          'label': 'service'
-        },
-        {
-          'key': 'ship',
-          'label': 'ship'
-        },
-        {
-          'key': 'set-up',
-          'label': 'set-up'
-        },
-        {
-          'key': 'shopping-bag',
-          'label': 'shopping-bag'
-        },
-        {
-          'key': 'shop',
-          'label': 'shop'
-        },
-        {
-          'key': 'shopping-cart',
-          'label': 'shopping-cart'
-        },
-        {
-          'key': 'shopping-cart-full',
-          'label': 'shopping-cart-full'
-        },
-        {
-          'key': 'soccer',
-          'label': 'soccer'
-        },
-        {
-          'key': 'sold-out',
-          'label': 'sold-out'
-        },
-        {
-          'key': 'smoking',
-          'label': 'smoking'
-        },
-        {
-          'key': 'sort-down',
-          'label': 'sort-down'
-        },
-        {
-          'key': 'sort',
-          'label': 'sort'
-        },
-        {
-          'key': 'sort-up',
-          'label': 'sort-up'
-        },
-        {
-          'key': 'star',
-          'label': 'star'
-        },
-        {
-          'key': 'stamp',
-          'label': 'stamp'
-        },
-        {
-          'key': 'star-filled',
-          'label': 'star-filled'
-        },
-        {
-          'key': 'stopwatch',
-          'label': 'stopwatch'
-        },
-        {
-          'key': 'success-filled',
-          'label': 'success-filled'
-        },
-        {
-          'key': 'suitcase',
-          'label': 'suitcase'
-        },
-        {
-          'key': 'sugar',
-          'label': 'sugar'
-        },
-        {
-          'key': 'sunny',
-          'label': 'sunny'
-        },
-        {
-          'key': 'sunrise',
-          'label': 'sunrise'
-        },
-        {
-          'key': 'switch',
-          'label': 'switch'
-        },
-        {
-          'key': 'ticket',
-          'label': 'ticket'
-        },
-        {
-          'key': 'sunset',
-          'label': 'sunset'
-        },
-        {
-          'key': 'tickets',
-          'label': 'tickets'
-        },
-        {
-          'key': 'switch-button',
-          'label': 'switch-button'
-        },
-        {
-          'key': 'takeaway-box',
-          'label': 'takeaway-box'
-        },
-        {
-          'key': 'toilet-paper',
-          'label': 'toilet-paper'
-        },
-        {
-          'key': 'timer',
-          'label': 'timer'
-        },
-        {
-          'key': 'tools',
-          'label': 'tools'
-        },
-        {
-          'key': 'top-left',
-          'label': 'top-left'
-        },
-        {
-          'key': 'top',
-          'label': 'top'
-        },
-        {
-          'key': 'top-right',
-          'label': 'top-right'
-        },
-        {
-          'key': 'trend-charts',
-          'label': 'trend-charts'
-        },
-        {
-          'key': 'turn-off',
-          'label': 'turn-off'
-        },
-        {
-          'key': 'unlock',
-          'label': 'unlock'
-        },
-        {
-          'key': 'trophy',
-          'label': 'trophy'
-        },
-        {
-          'key': 'umbrella',
-          'label': 'umbrella'
-        },
-        {
-          'key': 'upload-filled',
-          'label': 'upload-filled'
-        },
-        {
-          'key': 'user-filled',
-          'label': 'user-filled'
-        },
-        {
-          'key': 'upload',
-          'label': 'upload'
-        },
-        {
-          'key': 'user',
-          'label': 'user'
-        },
-        {
-          'key': 'van',
-          'label': 'van'
-        },
-        {
-          'key': 'copy-document',
-          'label': 'copy-document'
-        },
-        {
-          'key': 'video-pause',
-          'label': 'video-pause'
-        },
-        {
-          'key': 'video-camera-filled',
-          'label': 'video-camera-filled'
-        },
-        {
-          'key': 'view',
-          'label': 'view'
-        },
-        {
-          'key': 'wallet',
-          'label': 'wallet'
-        },
-        {
-          'key': 'warning-filled',
-          'label': 'warning-filled'
-        },
-        {
-          'key': 'watch',
-          'label': 'watch'
-        },
-        {
-          'key': 'video-play',
-          'label': 'video-play'
-        },
-        {
-          'key': 'watermelon',
-          'label': 'watermelon'
-        },
-        {
-          'key': 'video-camera',
-          'label': 'video-camera'
-        },
-        {
-          'key': 'wallet-filled',
-          'label': 'wallet-filled'
-        },
-        {
-          'key': 'warning',
-          'label': 'warning'
-        },
-        {
-          'key': 'list',
-          'label': 'list'
-        },
-        {
-          'key': 'zoom-in',
-          'label': 'zoom-in'
-        },
-        {
-          'key': 'zoom-out',
-          'label': 'zoom-out'
-        },
-        {
-          'key': 'rank',
-          'label': 'rank'
-        },
-        {
-          'key': 'wind-power',
-          'label': 'wind-power'
-        }
-      ],
-      value: ''
-    }
-  },
-  created() {
-    this.metaData = this.meta
-  },
-  methods: {}
 }
 </script>
 
diff --git a/web/src/view/superAdmin/menu/menu.vue b/web/src/view/superAdmin/menu/menu.vue
index 9b10e16e..0029d15d 100644
--- a/web/src/view/superAdmin/menu/menu.vue
+++ b/web/src/view/superAdmin/menu/menu.vue
@@ -188,9 +188,7 @@
   </div>
 </template>
 
-<script>
-// 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成
-
+<script setup>
 import {
   updateBaseMenu,
   getMenuList,
@@ -198,207 +196,228 @@ import {
   deleteBaseMenu,
   getBaseMenuById
 } from '@/api/menu'
-import infoList from '@/mixins/infoList'
 import icon from '@/view/superAdmin/menu/icon.vue'
 import warningBar from '@/components/warningBar/warningBar.vue'
-export default {
-  name: 'Menus',
-  components: {
-    icon,
-    warningBar
+import { reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+
+const rules = reactive({
+  path: [{ required: true, message: '请输入菜单name', trigger: 'blur' }],
+  component: [
+    { required: true, message: '请输入文件路径', trigger: 'blur' }
+  ],
+  'meta.title': [
+    { required: true, message: '请输入菜单展示名称', trigger: 'blur' }
+  ]
+})
+
+const page = ref(1)
+const total = ref(0)
+const pageSize = ref(999)
+const tableData = ref([])
+const searchInfo = ref({})
+// 查询
+const getTableData = async() => {
+  const table = await getMenuList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
+  if (table.code === 0) {
+    tableData.value = table.data.list
+    total.value = table.data.total
+    page.value = table.data.page
+    pageSize.value = table.data.pageSize
+  }
+}
+
+getTableData()
+
+// 新增参数
+const addParameter = (form) => {
+  if (!form.parameters) {
+    form.value.parameters = []
+  }
+  form.parameters.push({
+    type: 'query',
+    key: '',
+    value: ''
+  })
+}
+// 删除参数
+const deleteParameter = (parameters, index) => {
+  parameters.splice(index, 1)
+}
+
+const form = ref({
+  ID: 0,
+  path: '',
+  name: '',
+  hidden: '',
+  parentId: '',
+  component: '',
+  meta: {
+    title: '',
+    icon: '',
+    defaultMenu: false,
+    closeTab: false,
+    keepAlive: false
   },
-  mixins: [infoList],
-  data() {
-    return {
-      checkFlag: false,
-      listApi: getMenuList,
-      dialogFormVisible: false,
-      dialogTitle: '新增菜单',
-      menuOption: [
-        {
-          ID: '0',
-          title: '根菜单'
+  parameters: []
+})
+const changeName = () => {
+  form.value.path = form.value.name
+}
+
+const handleClose = (done) => {
+  initForm()
+  done()
+}
+// 删除菜单
+const deleteMenu = (ID) => {
+  ElMessageBox.confirm('此操作将永久删除所有角色下该菜单, 是否继续?', '提示', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  })
+    .then(async() => {
+      const res = await deleteBaseMenu({ ID })
+      if (res.code === 0) {
+        ElMessage({
+          type: 'success',
+          message: '删除成功!'
+        })
+        if (tableData.value.length === 1 && page.value > 1) {
+          page.value--
         }
-      ],
-      form: {
-        ID: 0,
-        path: '',
-        name: '',
-        hidden: '',
-        parentId: '',
-        component: '',
-        meta: {
-          title: '',
-          icon: '',
-          defaultMenu: false,
-          closeTab: false,
-          keepAlive: false
-        },
-        parameters: []
-      },
-      rules: {
-        path: [{ required: true, message: '请输入菜单name', trigger: 'blur' }],
-        component: [
-          { required: true, message: '请输入文件路径', trigger: 'blur' }
-        ],
-        'meta.title': [
-          { required: true, message: '请输入菜单展示名称', trigger: 'blur' }
-        ]
-      },
-      isEdit: false,
-      test: ''
-    }
-  },
-  async created() {
-    this.pageSize = 999
-    await this.getTableData()
-  },
-  methods: {
-    addParameter(form) {
-      if (!form.parameters) {
-        this.form.parameters = []
+        getTableData()
       }
-      form.parameters.push({
-        type: 'query',
-        key: '',
-        value: ''
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '已取消删除'
       })
-    },
-    deleteParameter(parameters, index) {
-      parameters.splice(index, 1)
-    },
-    changeName() {
-      this.form.path = this.form.name
-    },
-    setOptions() {
-      this.menuOption = [
-        {
-          ID: '0',
-          title: '根目录'
-        }
-      ]
-      this.setMenuOptions(this.tableData, this.menuOption, false)
-    },
-    setMenuOptions(menuData, optionsData, disabled) {
-      menuData &&
+    })
+}
+// 初始化弹窗内表格方法
+const menuForm = ref(null)
+const checkFlag = ref(false)
+const initForm = () => {
+  checkFlag.value = false
+  menuForm.value.resetFields()
+  form.value = {
+    ID: 0,
+    path: '',
+    name: '',
+    hidden: '',
+    parentId: '',
+    component: '',
+    meta: {
+      title: '',
+      icon: '',
+      defaultMenu: false,
+      keepAlive: ''
+    }
+  }
+}
+// 关闭弹窗
+
+const dialogFormVisible = ref(false)
+const closeDialog = () => {
+  initForm()
+  dialogFormVisible.value = false
+}
+// 添加menu
+const enterDialog = async() => {
+  menuForm.value.validate(async valid => {
+    if (valid) {
+      let res
+      if (isEdit.value) {
+        res = await updateBaseMenu(form.value)
+      } else {
+        res = await addBaseMenu(form.value)
+      }
+      if (res.code === 0) {
+        ElMessage({
+          type: 'success',
+          message: isEdit.value ? '编辑成功' : '添加成功!'
+        })
+        getTableData()
+      }
+      initForm()
+      dialogFormVisible.value = false
+    }
+  })
+}
+
+const menuOption = ref([
+  {
+    ID: '0',
+    title: '根菜单'
+  }
+])
+const setOptions = () => {
+  menuOption.value = [
+    {
+      ID: '0',
+      title: '根目录'
+    }
+  ]
+  setMenuOptions(tableData.value, menuOption.value, false)
+}
+const setMenuOptions = (menuData, optionsData, disabled) => {
+  menuData &&
         menuData.forEach(item => {
           if (item.children && item.children.length) {
             const option = {
               title: item.meta.title,
               ID: String(item.ID),
-              disabled: disabled || item.ID === this.form.ID,
+              disabled: disabled || item.ID === form.value.ID,
               children: []
             }
-            this.setMenuOptions(
+            setMenuOptions(
               item.children,
               option.children,
-              disabled || item.ID === this.form.ID
+              disabled || item.ID === form.value.ID
             )
             optionsData.push(option)
           } else {
             const option = {
               title: item.meta.title,
               ID: String(item.ID),
-              disabled: disabled || item.ID === this.form.ID
+              disabled: disabled || item.ID === form.value.ID
             }
             optionsData.push(option)
           }
         })
-    },
-    handleClose(done) {
-      this.initForm()
-      done()
-    },
-    // 删除菜单
-    deleteMenu(ID) {
-      this.$confirm('此操作将永久删除所有角色下该菜单, 是否继续?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning'
-      })
-        .then(async() => {
-          const res = await deleteBaseMenu({ ID })
-          if (res.code === 0) {
-            this.$message({
-              type: 'success',
-              message: '删除成功!'
-            })
-            if (this.tableData.length === 1 && this.page > 1) {
-              this.page--
-            }
-            this.getTableData()
-          }
-        })
-        .catch(() => {
-          this.$message({
-            type: 'info',
-            message: '已取消删除'
-          })
-        })
-    },
-    // 初始化弹窗内表格方法
-    initForm() {
-      this.checkFlag = false
-      this.$refs.menuForm.resetFields()
-      this.form = {
-        ID: 0,
-        path: '',
-        name: '',
-        hidden: '',
-        parentId: '',
-        component: '',
-        meta: {
-          title: '',
-          icon: '',
-          defaultMenu: false,
-          keepAlive: ''
-        }
-      }
-    },
-    // 关闭弹窗
-    closeDialog() {
-      this.initForm()
-      this.dialogFormVisible = false
-    },
-    // 添加menu
-    async enterDialog() {
-      this.$refs.menuForm.validate(async valid => {
-        if (valid) {
-          let res
-          if (this.isEdit) {
-            res = await updateBaseMenu(this.form)
-          } else {
-            res = await addBaseMenu(this.form)
-          }
-          if (res.code === 0) {
-            this.$message({
-              type: 'success',
-              message: this.isEdit ? '编辑成功' : '添加成功!'
-            })
-            this.getTableData()
-          }
-          this.initForm()
-          this.dialogFormVisible = false
-        }
-      })
-    },
-    // 添加菜单方法，id为 0则为添加根菜单
-    addMenu(id) {
-      this.dialogTitle = '新增菜单'
-      this.form.parentId = String(id)
-      this.isEdit = false
-      this.setOptions()
-      this.dialogFormVisible = true
-    },
-    // 修改菜单方法
-    async editMenu(id) {
-      this.dialogTitle = '编辑菜单'
-      const res = await getBaseMenuById({ id })
-      this.form = res.data.menu
-      this.isEdit = true
-      this.setOptions()
-      this.dialogFormVisible = true
-    }
+}
+
+// 添加菜单方法，id为 0则为添加根菜单
+const isEdit = ref(false)
+const dialogTitle = ref('新增菜单')
+const addMenu = (id) => {
+  dialogTitle.value = '新增菜单'
+  form.value.parentId = String(id)
+  isEdit.value = false
+  setOptions()
+  dialogFormVisible.value = true
+}
+// 修改菜单方法
+const editMenu = async(id) => {
+  dialogTitle.value = '编辑菜单'
+  const res = await getBaseMenuById({ id })
+  form.value = res.data.menu
+  isEdit.value = true
+  setOptions()
+  dialogFormVisible.value = true
+}
+
+</script>
+
+<script>
+// 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成
+
+export default {
+  name: 'Menus',
+  methods: {
+
   }
 }
 </script>