From 702a1bb8fb9b1bdefc1d2401e67146675912f6ae Mon Sep 17 00:00:00 2001
From: Gary Fu <xuebaiyouling@gmail.com>
Date: Mon, 1 Jan 2024 18:34:58 +0800
Subject: [PATCH] =?UTF-8?q?tab=E4=BC=98=E5=8C=96=EF=BC=8C=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common-table/common-table-column.vue      | 20 +++++++++++++++++-
 src/components/common-table/index.vue         |  7 ++++++-
 .../common-tabs-view/tabs-view-item.vue       | 14 +++++++++++--
 src/messages/common_cn.js                     |  1 +
 src/messages/common_en.js                     |  1 +
 src/route/ToolsRoutes.js                      | 15 ++++++++++++-
 src/stores/TabsViewStore.js                   | 20 ++++++++++++------
 src/views/tools/TableEdit.vue                 | 21 +++++++++++++++++++
 src/views/tools/Tables.vue                    | 13 +++++++++---
 9 files changed, 98 insertions(+), 14 deletions(-)
 create mode 100644 src/views/tools/TableEdit.vue

diff --git a/src/components/common-table/common-table-column.vue b/src/components/common-table/common-table-column.vue
index ff60a6a..68e7f28 100644
--- a/src/components/common-table/common-table-column.vue
+++ b/src/components/common-table/common-table-column.vue
@@ -10,6 +10,10 @@
  * @property {string} slot 自定义插槽
  * @property [ButtonProps] buttons 自定义按钮
  * @property {Object} attrs 其他属性
+ * @property {string} link 链接地址
+ * @property {Object} linkAttrs 链接配置
+ * @method click 点击事件
+ * @method formatter 格式化
  */
 /**
  * 配置信息
@@ -22,6 +26,9 @@ const props = defineProps({
     type: Object,
     required: true
   },
+  /**
+   * @type {'large'|'small'|'default'}
+   */
   buttonSize: {
     type: String,
     default: 'small'
@@ -37,13 +44,24 @@ const props = defineProps({
     :property="column.property"
     :width="column.width"
     v-bind="column.attrs"
+    :formatter="column.formatter"
   >
     <template
-      v-if="column.slot"
+      v-if="column.slot||column.link||column.click"
       #default="scope"
     >
+      <el-link
+        v-if="column.link||column.click"
+        :href="column.link"
+        type="primary"
+        v-bind="column.linkAttrs"
+        @click="column.click&&column.click(scope.row, scope)"
+      >
+        {{ scope.row[column.property] }}
+      </el-link>
       <slot
         v-bind="scope"
+        :column-conf="column"
         name="default"
       />
     </template>
diff --git a/src/components/common-table/index.vue b/src/components/common-table/index.vue
index d7650dc..986190f 100644
--- a/src/components/common-table/index.vue
+++ b/src/components/common-table/index.vue
@@ -67,7 +67,10 @@ const props = defineProps({
     }
   }
 })
-
+/**
+ *
+ * @type {ComputedRef<[CommonTableColumn]>}
+ */
 const calcColumns = computed(() => {
   let _columns = props.columns
   if (props.buttons.length || props.buttonsSlot) {
@@ -102,8 +105,10 @@ const calcColumns = computed(() => {
         #default="scope"
       >
         <slot
+          v-if="column.slot"
           :scope="scope"
           :item="scope.row"
+          :column-conf="scope.columnConf"
           :name="column.slot"
         />
       </template>
diff --git a/src/components/common-tabs-view/tabs-view-item.vue b/src/components/common-tabs-view/tabs-view-item.vue
index 5e9d7fe..ccb6b4e 100644
--- a/src/components/common-tabs-view/tabs-view-item.vue
+++ b/src/components/common-tabs-view/tabs-view-item.vue
@@ -25,6 +25,16 @@ const menuName = computed(() => {
 const menuInfo = computed(() => {
   return props.tabItem.path === '/' ? { icon: 'HomeFilled' } : useMenuInfo(props.tabItem)
 })
+
+const menuIcon = computed(() => {
+  if (menuInfo.value && menuInfo.value.icon) {
+    return menuInfo.value.icon
+  }
+  if (props.tabItem.meta && props.tabItem.meta.icon) {
+    return props.tabItem.meta.icon
+  }
+  return null
+})
 </script>
 
 <template>
@@ -35,8 +45,8 @@ const menuInfo = computed(() => {
       <el-dropdown trigger="contextmenu">
         <span class="custom-tabs-label">
           <common-icon
-            v-if="tabsViewStore.isShowTabIcon && menuInfo && menuInfo.icon"
-            :icon="menuInfo.icon"
+            v-if="tabsViewStore.isShowTabIcon && menuIcon"
+            :icon="menuIcon"
           />
           <span>{{ menuName }}</span>
         </span>
diff --git a/src/messages/common_cn.js b/src/messages/common_cn.js
index 5871d8c..764a59d 100644
--- a/src/messages/common_cn.js
+++ b/src/messages/common_cn.js
@@ -30,6 +30,7 @@ common.label.modify = '修改'
 common.label.delete = '删除'
 common.label.search = '搜索'
 common.label.find = '查找'
+common.label.back = '返回'
 
 //* =======================msg=====================//
 common.msg.nonNull = '{0}不能为空'
diff --git a/src/messages/common_en.js b/src/messages/common_en.js
index 9350e4c..f32092c 100644
--- a/src/messages/common_en.js
+++ b/src/messages/common_en.js
@@ -30,6 +30,7 @@ common.label.modify = 'Modify'
 common.label.delete = 'Delete'
 common.label.search = 'Search'
 common.label.find = 'Find'
+common.label.back = 'Back'
 
 //* =======================msg=====================//
 common.msg.nonNull = '{0} is required.'
diff --git a/src/route/ToolsRoutes.js b/src/route/ToolsRoutes.js
index a14edf7..9b91658 100644
--- a/src/route/ToolsRoutes.js
+++ b/src/route/ToolsRoutes.js
@@ -9,5 +9,18 @@ export default [{
 }, {
   path: '/tables',
   name: 'tables',
-  component: () => import('@/views/tools/Tables.vue')
+  children: [{
+    path: '',
+    name: 'tables-index',
+    component: () => import('@/views/tools/Tables.vue')
+  }, {
+    path: 'edit',
+    name: 'tables-edit',
+    component: () => import('@/views/tools/TableEdit.vue'),
+    meta: {
+      replaceTabHistory: 'tables-index',
+      labelKey: 'common.label.edit',
+      icon: 'Edit'
+    }
+  }]
 }]
diff --git a/src/stores/TabsViewStore.js b/src/stores/TabsViewStore.js
index d84863c..e31bbad 100644
--- a/src/stores/TabsViewStore.js
+++ b/src/stores/TabsViewStore.js
@@ -40,18 +40,26 @@ export const useTabsViewStore = defineStore('tabsView', () => {
     }
   }
 
-  const addHistoryTab = (tab, insertIdx) => {
+  const checkMataReplaceHistory = (historyTab, tab) => {
+    // 如果meta中配置有replaceTabHistory，默认替换相关的tab
+    return historyTab.meta && historyTab.meta.replaceTabHistory && historyTab.meta.replaceTabHistory === tab.name
+  }
+
+  const addHistoryTab = (tab) => {
     // 添加tab
     if (isTabMode.value) {
       const idx = historyTabs.value.findIndex(v => v.path === tab.path)
       if (idx < 0) {
-        if (insertIdx !== undefined) {
-          historyTabs.value.splice(insertIdx, 0, tab)
-        } else {
-          historyTabs.value.push(Object.assign({}, tab)) // 可能是Proxy，需要解析出来
+        const replaceIdx = historyTabs.value.findIndex(v => checkMataReplaceHistory(v, tab) || checkMataReplaceHistory(tab, v))
+        if (replaceIdx > -1) {
+          console.info(replaceIdx, historyTabs.value[replaceIdx])
+          if (replaceIdx !== undefined) {
+            historyTabs.value.splice(replaceIdx, 1, Object.assign({}, tab))
+            return
+          }
         }
+        historyTabs.value.push(Object.assign({}, tab)) // 可能是Proxy，需要解析出来
         if (isCachedTabMode.value && tab.name) {
-          console.info('=======================add tab', tab.name)
           if (!cachedTabs.value.includes(tab.name)) {
             cachedTabs.value.push(tab.name)
           }
diff --git a/src/views/tools/TableEdit.vue b/src/views/tools/TableEdit.vue
new file mode 100644
index 0000000..985c1b5
--- /dev/null
+++ b/src/views/tools/TableEdit.vue
@@ -0,0 +1,21 @@
+<script setup>
+import { useRouter } from 'vue-router'
+const router = useRouter()
+</script>
+
+<template>
+  <div>
+    <strong>编辑数据</strong>
+    <br>
+    <el-link
+      type="primary"
+      @click="router.back()"
+    >
+      {{ $t('common.label.back') }}
+    </el-link>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/views/tools/Tables.vue b/src/views/tools/Tables.vue
index ada793a..4101233 100644
--- a/src/views/tools/Tables.vue
+++ b/src/views/tools/Tables.vue
@@ -33,14 +33,18 @@ const tableData = [
  */
 const columns = [{
   label: '用户名',
-  property: 'userName'
+  property: 'userName',
+  link: '#/tables/edit'
 }, {
   label: '性别',
   property: 'gender',
   slot: 'gender'
 }, {
   label: '出生日期',
-  property: 'birthday'
+  property: 'birthday',
+  click (item) {
+    console.info('=================', item)
+  }
 }, {
   label: '地址',
   property: 'address'
@@ -77,7 +81,10 @@ const buttons = ref([{
       </el-tag>
     </template>
     <template #buttons="{item}">
-      <el-button @click="console.info(item)">
+      <el-button
+        size="small"
+        @click="console.info(item)"
+      >
         测试
       </el-button>
     </template>