tabs优化

src/components/common-form-control/index.vue

@@ -0,0 +1,78 @@
+<script setup>
+import { computed } from 'vue'
+
+/**
+ * @typedef {Object} CommonFormOption
+ * @property {'input'|'input-number'|'cascader'|'radio'
+ * |'radio-group'|'checkbox'|'checkbox-group'|'date-picker'
+ * |'time-picker'|'switch'|'select'|'option'|'slider'|'transfer'|'upload'} type 类型
+ * @property {any} value
+ * @property {any} config
+ * @property {string} prop
+ * @property {string} label
+ * @property {string} placeholder
+ * @property {{clearable:boolean,disabled:boolean}} attrs
+ * @property {[CommonFormOption]} children 子节点
+ * @property {Array<RuleItem>} rules 子节点
+ */
+/**
+ * @type {CommonFormOption}
+ */
+const props = defineProps({
+  type: {
+    type: String,
+    default: 'input'
+  },
+  value: {
+    type: Object,
+    default: null
+  },
+  prop: {
+    type: String,
+    default: ''
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  children: {
+    type: Array,
+    default: () => []
+  },
+  rules: { type: Array, default: () => [] },
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  attrs: {
+    type: Object,
+    default: null
+  }
+})
+
+const inputType = computed(() => {
+  return `el-${props.type}`
+})
+
+</script>
+
+<template>
+  <component
+    :is="inputType"
+    :prop="prop"
+    v-bind="attrs"
+    :placeholder="placeholder"
+  >
+    <template v-if="children&&children.length">
+      <common-form-control
+        v-for="(childItem, index) in children"
+        :key="index"
+        :type="childItem.type"
+      />
+    </template>
+  </component>
+</template>
+
+<style scoped>
+
+</style>

src/components/common-form-input/index.vue

@@ -1,9 +0,0 @@
-<script setup>
-
-</script>
-
-<template />
-
-<style scoped>
-
-</style>

src/components/common-menu-item/index.vue

@@ -2,7 +2,26 @@
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 const router = useRouter()
-
+/**
+ * @typedef {Object} CommonMenuItem 菜单对象
+ * @property {boolean} isDropdown 是否是下拉Dropdown样式
+ * @property {boolean} isSplit 是否是分割元素
+ * @property {string} menuCls 自定义样式
+ * @property {string} index 路由地址
+ * @property {Object} route 路由
+ * @property {string} icon 图标
+ * @property {number} iconSize 图标大小
+ * @property {string} label 菜单显示名称
+ * @property {string} labelKey 菜单显示名称的Key，国际化需要
+ * @method iconIf 图标计算函数
+ * @method click 点击事件
+ * @property {[CommonMenuItem]} children 子菜单
+ */
+/**
+ * @type {Object}
+ * @property {CommonMenuItem} menuItem 菜单对象
+ * @property index 序号
+ */
 const props = defineProps({
   menuItem: {
     type: Object,
@@ -81,7 +100,7 @@ const dropdownClick = menuItem => {
     :class="menuCls"
     @click="menuItem.click&&menuItem.click()"
   >
-    <el-dropdown>
+    <el-dropdown class="common-dropdown">
       <span class="el-dropdown-link">
         <common-icon
           :size="menuItem.iconSize"
@@ -133,5 +152,10 @@ const dropdownClick = menuItem => {
 </template>
 
 <style scoped>
-
+.common-dropdown {
+  height: 100%;
+}
+.common-dropdown .el-icon {
+  margin-top: 20px;
+}
 </style>

src/components/common-tabs-view/index.vue

@@ -31,12 +31,22 @@ const selectHistoryTab = path => {
 }
 
 const removeHistoryTab = path => {
-  const lastTab = tabsViewStore.removeHistoryTab(path)
+  const lastTab = tabsViewStore.removeHistoryTab({ path })
   if (lastTab) {
     selectHistoryTab(lastTab)
   }
 }
 
+const refreshHistoryTab = tab => {
+  const time = new Date().getTime()
+  router.push(`${tab.path}?${time}`)
+}
+
+const removeOtherHistoryTabs = tab => {
+  tabsViewStore.removeOtherHistoryTabs(tab)
+  selectHistoryTab(tab.path)
+}
+
 </script>
 
 <template>
@@ -52,6 +62,9 @@ const removeHistoryTab = path => {
     <tabs-view-item
       v-for="item in tabsViewStore.historyTabs"
       :key="item.path"
+      :refresh-history-tab="refreshHistoryTab"
+      :remove-history-tab="removeHistoryTab"
+      :remove-other-history-tabs="removeOtherHistoryTabs"
       :tab-item="item"
     />
   </el-tabs>

src/components/common-tabs-view/tabs-view-item.vue

@@ -6,10 +6,16 @@ import { useTabsViewStore } from '@/stores/TabsViewStore'
 const tabsViewStore = useTabsViewStore()
 
 const props = defineProps({
+  /**
+   * @type RouteRecordRaw
+   */
   tabItem: {
     type: Object,
     required: true
-  }
+  },
+  removeHistoryTab: Function,
+  removeOtherHistoryTabs: Function,
+  refreshHistoryTab: Function
 })
 
 const menuName = computed(() => {
@@ -26,13 +32,33 @@ const menuInfo = computed(() => {
     :name="tabItem.path"
   >
     <template #label>
-      <span class="custom-tabs-label">
-        <common-icon
-          v-if="tabsViewStore.isShowTabIcon && menuInfo && menuInfo.icon"
-          :icon="menuInfo.icon"
-        />
-        <span>{{ menuName }}</span>
-      </span>
+      <el-dropdown trigger="contextmenu">
+        <span class="custom-tabs-label">
+          <common-icon
+            v-if="tabsViewStore.isShowTabIcon && menuInfo && menuInfo.icon"
+            :icon="menuInfo.icon"
+          />
+          <span>{{ menuName }}</span>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item
+              @click="refreshHistoryTab(tabItem)"
+            >
+              <common-icon icon="refresh" />
+              {{ $t('common.label.refresh') }}
+            </el-dropdown-item>
+            <el-dropdown-item @click="removeHistoryTab(tabItem.path)">
+              <common-icon icon="close" />
+              {{ $t('common.label.close') }}
+            </el-dropdown-item>
+            <el-dropdown-item @click="removeOtherHistoryTabs(tabItem)">
+              <common-icon icon="close" />
+              {{ $t('common.label.closeOther') }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
     </template>
   </el-tab-pane>
 </template>

src/components/index.js

@@ -1,5 +1,5 @@
 import CommonIcon from '@/components/common-icon/index.vue'
-import CommonInput from '@/components/common-form-input/index.vue'
+import CommonFormControl from '@/components/common-form-control/index.vue'
 import CommonMenu from '@/components/common-menu/index.vue'
 import CommonMenuItem from '@/components/common-menu-item/index.vue'
 import CommonTabsView from '@/components/common-tabs-view/index.vue'
@@ -13,7 +13,7 @@ export default {
    */
   install (Vue) {
     Vue.component('CommonIcon', CommonIcon)
-    Vue.component('CommonInput', CommonInput)
+    Vue.component('CommonFormControl', CommonFormControl)
     Vue.component('CommonMenu', CommonMenu)
     Vue.component('CommonMenuItem', CommonMenuItem)
     Vue.component('CommonTabsView', CommonTabsView)