perf: button disable add tip

public/theme/element-extra.css

@@ -93,7 +93,7 @@
 
 td .el-button.el-button--mini {
   padding: 3px 6px;
-  /*line-height: 1.5;*/
+  line-height: 1.5;
 
   .el-icon--right {
       margin-bottom: 2px;

src/components/DataActions/index.vue

@@ -29,18 +29,21 @@
             >
               {{ option.group }}
             </div>
-            <el-dropdown-item
-              :key="option.name"
-              :command="[option, action]"
-              class="dropdown-item"
-              v-bind="{...option, icon: ''}"
-            >
-              <span v-if="option.icon" class="pre-icon">
-                <i v-if="option.icon.startsWith('fa')" :class="'fa fa-fw ' + option.icon" />
-                <svg-icon v-else :icon-class="option.icon" />
-              </span>
-              {{ option.title }}
-            </el-dropdown-item>
+            <el-tooltip :key="option.name" :content="option.tip" :disabled="!option.tip" open-delay="1000" placement="top">
+              <el-dropdown-item
+                :key="option.name"
+                :command="[option, action]"
+                :title="option.tip"
+                class="dropdown-item"
+                v-bind="{...option, icon: ''}"
+              >
+                <span v-if="option.icon" class="pre-icon">
+                  <i v-if="option.icon.startsWith('fa')" :class="'fa fa-fw ' + option.icon" />
+                  <svg-icon v-else :icon-class="option.icon" />
+                </span>
+                {{ option.title }}
+              </el-dropdown-item>
+            </el-tooltip>
           </template>
         </el-dropdown-menu>
       </el-dropdown>
@@ -53,7 +56,7 @@
         v-bind="{...cleanButtonAction(action), icon: action.icon && action.icon.startsWith('el-') ? action.icon : ''}"
         @click="handleClick(action)"
       >
-        <el-tooltip :content="action.tip" :disabled="!action.tip" placement="top">
+        <el-tooltip :content="action.tip" :disabled="!action.tip" :open-delay="1000" placement="top">
           <span>
             <span v-if="action.icon && !action.icon.startsWith('el-')" style="vertical-align: initial">
               <i v-if="action.icon.startsWith('fa')" :class="'fa ' + action.icon" />
@@ -108,6 +111,9 @@ export default {
     },
     handleDropdownCallback(command) {
       const [option, dropdown] = command
+      if (option.disabled) {
+        return
+      }
       const defaultCallback = () => this.$log.debug('No callback found: ', option, dropdown)
       let callback = option.callback
       if (!callback) {
@@ -122,6 +128,9 @@ export default {
       return toSentenceCase(s)
     },
     handleClick(action) {
+      if (action.disabled) {
+        return
+      }
       if (action && action.callback) {
         action.callback(action)
       } else {
@@ -168,7 +177,13 @@ export default {
 
         // 是否是disabled
         const can = this.checkItem(action, 'can')
-        action.disabled = !can
+        if (typeof can === 'string') {
+          action.disabled = true
+          action.tip = can
+        } else {
+          action.disabled = !can
+        }
+        delete action['can']
 
         if (action.dropdown) {
           action.dropdown = this.cleanActions(action.dropdown)
@@ -295,7 +310,9 @@ export default {
 
   .el-dropdown-menu__item {
     &.is-disabled {
-      color: var(--color-disabled)
+      color: var(--color-disabled);
+      cursor: not-allowed;
+      pointer-events: auto;
     }
     &:not(.is-disabled):hover {
       background-color: var(--color-disabled-background);

src/components/Table/ListTable/TableAction/ImportDialog.vue

@@ -87,11 +87,11 @@ export default {
       default: () => ''
     },
     canImportCreate: {
-      type: [Boolean, Function],
+      type: [Boolean, Function, String],
       default: false
     },
     canImportUpdate: {
-      type: [Boolean, Function],
+      type: [Boolean, Function, String],
       default: false
     }
   },

src/components/Table/ListTable/TableAction/LeftSide.vue

@@ -13,8 +13,8 @@ import DataActions from '@/components/DataActions/index.vue'
 import { createSourceIdCache } from '@/api/common'
 import { cleanActions } from './utils'
 
-const defaultTrue = { type: [Boolean, Function], default: true }
-const defaultFalse = { type: [Boolean, Function], default: false }
+const defaultTrue = { type: [Boolean, Function, String], default: true }
+const defaultFalse = { type: [Boolean, Function, String], default: false }
 export default {
   name: 'LeftSide',
   components: {

src/components/Table/ListTable/TableAction/RightSide.vue

@@ -17,7 +17,7 @@ import ImExportDialog from './ImExportDialog.vue'
 import { cleanActions } from './utils'
 import { assignIfNot } from '@/utils/common'
 
-const defaultTrue = { type: Boolean, default: true }
+const defaultTrue = { type: [Boolean, Function, String], default: true }
 
 export default {
   name: 'RightSide',
@@ -83,11 +83,11 @@ export default {
       default: () => []
     },
     canCreate: {
-      type: [Boolean, Function],
+      type: [Boolean, Function, String],
       default: false
     },
     canBulkUpdate: {
-      type: [Boolean, Function],
+      type: [Boolean, Function, String],
       default: false
     }
   },

src/components/Table/ListTable/index.vue

@@ -94,11 +94,16 @@ export default {
       }
       const defaults = {}
       for (const [k, v] of Object.entries(actions)) {
-        let hasPerm = v.action.split('|').some(i => this.hasActionPerm(i.trim()))
-        if (v.checkRoot) {
-          hasPerm = hasPerm && !this.currentOrgIsRoot
+        const hasPerm = v.action.split('|').some(i => this.hasActionPerm(i.trim()))
+        if (!hasPerm) {
+          defaults[k] = this.$t('NoPermission')
+          continue
         }
-        defaults[k] = hasPerm
+        if (v.checkRoot && this.currentOrgIsRoot) {
+          defaults[k] = this.$t('NoPermissionInGlobal')
+          continue
+        }
+        defaults[k] = true
       }
       return Object.assign(defaults, this.headerActions)
     },
@@ -110,13 +115,22 @@ export default {
         extraQuery: this.extraQuery
       })
       const checkRoot = !(this.$route.meta?.disableOrgsChange === true)
+      const checkPermAndRoot = (action) => {
+        if (!this.hasActionPerm(action)) {
+          return this.$t('NoPermission')
+        }
+        if (checkRoot && this.currentOrgIsRoot) {
+          return this.$t('NoPermissionInGlobal')
+        }
+        return true
+      }
       const formatterArgs = {
         'columnsMeta.actions.formatterArgs.canUpdate': () => {
-          return this.hasActionPerm('change') && (!checkRoot || !this.currentOrgIsRoot)
+          return checkPermAndRoot('change')
         },
         'columnsMeta.actions.formatterArgs.canDelete': 'delete',
         'columnsMeta.actions.formatterArgs.canClone': () => {
-          return this.hasActionPerm('add') && (!checkRoot || !this.currentOrgIsRoot)
+          return checkPermAndRoot('add')
         },
         'columnsMeta.name.formatterArgs.can': 'view'
       }