cleanup

fix: multi-tab add rename(key,name)

Author: sendya

babel.config.js

@@ -1,3 +1,10 @@
+const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
+
+const plugins = []
+if (IS_PROD) {
+  plugins.push('transform-remove-console')
+}
+
 module.exports = {
   presets: [
     '@vue/app',
@@ -7,7 +14,8 @@ module.exports = {
         'useBuiltIns': 'entry'
       }
     ]
-  ]
+  ],
+  plugins
   // if your use import on Demand, Use this code
   // ,
   // plugins: [

package.json

@@ -36,7 +36,7 @@
     "wangeditor": "^3.1.1"
   },
   "devDependencies": {
-    "@ant-design/colors": "^3.1.0",
+    "@ant-design/colors": "^3.2.1",
     "@babel/polyfill": "7.2.5",
     "@vue/cli-plugin-babel": "^3.11.0",
     "@vue/cli-plugin-eslint": "^3.11.0",
@@ -48,6 +48,7 @@
     "babel-eslint": "^10.0.3",
     "babel-jest": "^23.6.0",
     "babel-plugin-import": "^1.11.0",
+    "babel-plugin-transform-remove-console": "^6.9.4",
     "eslint": "^5.8.0",
     "eslint-plugin-html": "^5.0.0",
     "eslint-plugin-vue": "^5.2.3",

src/components/MultiTab/MultiTab.vue

@@ -24,6 +24,14 @@ export default {
         return
       }
       this.closeThat(val)
+    }).$on('rename', ({ key, name }) => {
+      console.log('rename', key, name)
+      try {
+        const item = this.pages.find(item => item.path === key)
+        item.meta.customTitle = name
+        this.$forceUpdate()
+      } catch (e) {
+      }
     })
 
     this.pages.push(this.$route)
@@ -129,7 +137,7 @@ export default {
       return (
         <a-tab-pane
           style={{ height: 0 }}
-          tab={this.renderTabPane(page.meta.title, page.fullPath)}
+          tab={this.renderTabPane(page.meta.customTitle || page.meta.title, page.fullPath)}
           key={page.fullPath} closable={pages.length > 1}
         >
         </a-tab-pane>)

src/components/MultiTab/index.js

@@ -10,6 +10,9 @@ const api = {
   open: function (config) {
     events.$emit('open', config)
   },
+  rename: function (key, name) {
+    events.$emit('rename', { key: key, name: name })
+  },
   /**
    * close current page
    */

src/config/router.config.js

@@ -36,6 +36,12 @@ export const asyncRouterMap = [
             name: 'Workplace',
             component: () => import('@/views/dashboard/Workplace'),
             meta: { title: '工作台', keepAlive: true, permission: [ 'dashboard' ] }
+          },
+          {
+            path: '/dashboard/test-work',
+            name: 'TestWork',
+            component: () => import('@/views/dashboard/TestWork'),
+            meta: { title: '测试功能', keepAlive: true, permission: [ 'dashboard' ] }
           }
         ]
       },

src/mock/services/user.js

@@ -375,7 +375,7 @@ const userNav = (options) => {
     // dashboard
     {
       'name': 'dashboard',
-      'parentId': -1,
+      'parentId': 0,
       'id': 1,
       'meta': {
         'icon': 'dashboard',
@@ -430,7 +430,7 @@ const userNav = (options) => {
     // form
     {
       'name': 'form',
-      'parentId': -1,
+      'parentId': 0,
       'id': 10,
       'meta': {
         'icon': 'form',
@@ -470,7 +470,7 @@ const userNav = (options) => {
     // list
     {
       'name': 'list',
-      'parentId': -1,
+      'parentId': 0,
       'id': 10010,
       'meta': {
         'icon': 'table',
@@ -556,7 +556,7 @@ const userNav = (options) => {
     // profile
     {
       'name': 'profile',
-      'parentId': -1,
+      'parentId': 0,
       'id': 10018,
       'meta': {
         'title': '详情页',
@@ -590,7 +590,7 @@ const userNav = (options) => {
     // result
     {
       'name': 'result',
-      'parentId': -1,
+      'parentId': 0,
       'id': 10021,
       'meta': {
         'title': '结果页',
@@ -626,7 +626,7 @@ const userNav = (options) => {
     // Exception
     {
       'name': 'exception',
-      'parentId': -1,
+      'parentId': 0,
       'id': 10024,
       'meta': {
         'title': '异常页',
@@ -670,7 +670,7 @@ const userNav = (options) => {
     // account
     {
       'name': 'account',
-      'parentId': -1,
+      'parentId': 0,
       'id': 10028,
       'meta': {
         'title': '个人页',
@@ -760,7 +760,9 @@ const userNav = (options) => {
       'component': 'NotificationSettings'
     }
   ]
-  return builder(nav)
+  const json = builder(nav)
+  console.log('json', json)
+  return json
 }
 
 Mock.mock(/\/api\/user\/info/, 'get', info)

src/router/generator-routers.js

@@ -86,7 +86,7 @@ export const generatorDynamicRouter = (token) => {
       const menuNav = []
       const childrenNav = []
       //      后端数据, 根级树数组,  根级 PID
-      listToTree(result, childrenNav, -1)
+      listToTree(result, childrenNav, 0)
       rootRouter.children = childrenNav
       menuNav.push(rootRouter)
       console.log('menuNav', menuNav)
@@ -118,7 +118,7 @@ export const generator = (routerMap, parent) => {
       // 该路由对应页面的 组件 :方案1
       component: constantRouterComponents[item.component || item.key],
       // 该路由对应页面的 组件 :方案2 (动态加载)
-      // component: () => import(`@/views/${item.component}`),
+      // component: constantRouterComponents[item.component || item.key] || () => import(`@/views/${item.component}`),
 
       // meta: 页面标题, 菜单图标, 页面权限(供指令权限用，可去掉)
       meta: { title: title, icon: icon || undefined, hiddenHeaderContent: hiddenHeaderContent, target: target, permission: item.name }

src/views/dashboard/TestWork.vue

@@ -5,8 +5,38 @@
     <div class="multi-tab-test">
       <h4>多标签组件测试功能</h4>
       <a-button @click="handleCloseCurrentTab" style="margin-right: 16px;">关闭当前页</a-button>
-      <a-button @click="handleOpenTab">打开 任务列表</a-button>
-      <a-input ref="tInput" />
+      <a-button @click="handleOpenTab" style="margin-right: 16px;">打开 任务列表</a-button>
+      <a-popconfirm :visible="visible" @confirm="confirm" @cancel="cancel" okText="确定" cancelText="取消">
+        <template v-slot:title>
+          <div>
+            <a-form :form="form" layout="inline">
+              <a-form-item label="自定义名称">
+                <a-input v-decorator="['tabName', {rules: [{required: true, message: '请输入新的 Tab 名称'}]}]"/>
+              </a-form-item>
+            </a-form>
+          </div>
+        </template>
+        <a-button @click="() => visible = !visible" style="margin-right: 16px;">修改当前 Tab 名称</a-button>
+      </a-popconfirm>
+
+      <a-popconfirm :visible="visible2" @confirm="confirm2" @cancel="() => visible2 = false" okText="确定" cancelText="取消">
+        <template v-slot:title>
+          <div>
+            <p>页面 KEY 是由页面的路由 <code>path</code> 决定的</p>
+            <p>如果要修改某一个页面标题，该页面必须已经被打开在 Tab 栏</p>
+            <p>后期可以考虑优化到编程式 Tab 栏，就可以没有这种限制</p>
+            <a-form :form="form2" layout="inline">
+              <a-form-item label="页面KEY">
+                <a-input v-decorator="['tabKey', { initialValue: '/dashboard/workplace' }]" />
+              </a-form-item>
+              <a-form-item label="自定义名称">
+                <a-input v-decorator="['tabName', {rules: [{required: true, message: '请输入新的 Tab 名称'}]}]"/>
+              </a-form-item>
+            </a-form>
+          </div>
+        </template>
+        <a-button @click="() => visible2 = !visible2">修改某一个 Tab 名称</a-button>
+      </a-popconfirm>
     </div>
     <a-divider />
     <div class="page-loading-test">
@@ -20,6 +50,16 @@
 <script>
 export default {
   name: 'TestWork',
+  data () {
+    return {
+      visible: false,
+      visible2: false
+    }
+  },
+  created () {
+    this.form = this.$form.createForm(this)
+    this.form2 = this.$form.createForm(this)
+  },
   methods: {
     handleCloseCurrentTab () {
       this.$multiTab.closeCurrentPage() // or this.$multiTab.close()
@@ -43,6 +83,30 @@ export default {
       setTimeout(() => {
         this.$loading.hide()
       }, 5000)
+    },
+
+    // confirm
+    confirm (e) {
+      e.stopPropagation()
+      const { path } = this.$route
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          this.$multiTab.rename(path, values.tabName)
+          this.visible = false
+        }
+      })
+    },
+    cancel () {
+      this.visible = false
+    },
+    confirm2 (e) {
+      e.stopPropagation()
+      this.form2.validateFields((err, values) => {
+        if (!err) {
+          this.$multiTab.rename(values.tabKey, values.tabName)
+          this.visible2 = false
+        }
+      })
     }
   }
 }

yarn.lock

@@ -9,6 +9,13 @@
   dependencies:
     tinycolor2 "^1.4.1"
 
+"@ant-design/colors@^3.2.1":
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/@ant-design/colors/-/colors-3.2.1.tgz#ad86cbf2d1a0039d01586aa73a7ea8a7ce0455a2"
+  integrity sha512-ibJybOcR1+h2IEr0Yxx4y/Wcz8obEtKvl2EYvxh8ugMkYniGSItpLKGzKNyyqzOaum5jb6fVCyH1aR9VkdpFRA==
+  dependencies:
+    tinycolor2 "^1.4.1"
+
 "@ant-design/icons-vue@^2.0.0":
   version "2.0.0"
   resolved "https://registry.npm.taobao.org/@ant-design/icons-vue/download/@ant-design/icons-vue-2.0.0.tgz#0357f5010a404e9f34a87a4b41b2a08df691dbce"
@@ -2064,6 +2071,11 @@ babel-plugin-transform-es2015-modules-commonjs@^6.26.0, babel-plugin-transform-e
     babel-template "^6.26.0"
     babel-types "^6.26.0"
 
+babel-plugin-transform-remove-console@^6.9.4:
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/babel-plugin-transform-remove-console/-/babel-plugin-transform-remove-console-6.9.4.tgz#b980360c067384e24b357a588d807d3c83527780"
+  integrity sha1-uYA2DAZzhOJLNXpYjYB9PINSd4A=
+
 babel-plugin-transform-strict-mode@^6.24.1:
   version "6.24.1"
   resolved "https://registry.npmjs.org/babel-plugin-transform-strict-mode/-/babel-plugin-transform-strict-mode-6.24.1.tgz#d5faf7aa578a65bbe591cf5edae04a0c67020758"