【update】调整操作列按钮样式，及明细按钮文本、图标

src/business/platform/data/constants/buttons.js

@@ -2,190 +2,198 @@
  * 按钮
  */
 const buttons = {
-  'search': {
-    label: '查询',
-    type: 'primary',
-    icon: 'ibps-icon-search',
-    scope: ['toolbar', 'search']
-  },
-  'resetSearch': {
-    label: '重置',
-    type: 'danger',
-    icon: 'ibps-icon-undo',
-    scope: ['toolbar', 'search']
-  },
-  'moreSearch': {
-    label: '更多',
-    type: 'primary',
-    icon: 'ibps-icon-ellipsis-h',
-    scope: ['toolbar', 'search']
-  },
-  'add': {
-    label: '添加',
-    type: 'primary',
-    icon: 'ibps-icon-add',
-    scope: ['toolbar', 'contextmenu'],
-    contextmenu: 'all'
-  },
-  'remove': {
-    label: '删除',
-    type: 'primary',
-    icon: 'ibps-icon-remove',
-    scope: ['toolbar', 'manage'],
-    contextmenu: 'sub'
-  },
-  'edit': {
-    label: '编辑',
-    type: 'primary',
-    icon: 'ibps-icon-edit',
-    scope: ['toolbar', 'manage'],
-    contextmenu: 'sub'
-  },
-  'detail': {
-    label: '明细',
-    type: 'primary',
-    icon: 'ibps-icon-detail',
-    scope: ['toolbar', 'manage'],
-    contextmenu: 'sub'
-  },
-  'batchModify': {
-    label: '批量修改',
-    type: 'primary',
-    icon: 'ibps-icon-check-square-o',
-    scope: ['toolbar']
-  },
-  'import': {
-    label: '导入',
-    type: 'primary',
-    icon: 'ibps-icon-import',
-    scope: ['toolbar']
-  },
-  'export': {
-    label: '导出',
-    type: 'primary',
-    icon: 'ibps-icon-export',
-    scope: ['toolbar'],
-    menus: [
-      {
-        label: '导出选中',
-        key: 'exportSelected'
-      }, {
-        label: '导出所有',
-        key: 'exportAll'
-      }, {
-        label: '导出当前页',
-        key: 'exportCurPage'
-      }]
-  },
-  // 导出字段需要在导出按钮那里设置
-  'exportMuBan': {
-    label: '导出模板',
-    type: 'primary',
-    icon: 'ibps-icon-export',
-    scope: ['toolbar'],
-  },
-  'close': {
-    label: '关闭',
-    type: 'default',
-    icon: 'ibps-icon-close',
-    scope: ['edit', 'detail']
-  },
-  'save': {
-    label: '保存',
-    type: 'primary',
-    icon: 'ibps-icon-save',
-    scope: ['edit']
-  },
-  'print': {
-    label: '打印',
-    type: 'primary',
-    icon: 'ibps-icon-print',
-    scope: ['toolbar', 'manage', 'edit', 'detail']
-  },
-  'custom': {
-    label: '自定义',
-    type: 'primary',
-    icon: 'ibps-icon-cog',
-    scope: ['toolbar', 'manage', 'edit', 'detail', 'dialog']
-  },
-  'ok': {
-    label: '确定',
-    type: 'primary',
-    icon: 'ibps-icon-ok',
-    scope: ['dialog']
-  },
-  'confirm': {
-    label: '确定',
-    type: 'primary',
-    icon: 'ibps-icon-ok',
-    scope: ['dialog']
-  },
-  'clean': {
-    label: '清空',
-    type: 'info',
-    icon: 'ibps-icon-clean',
-    scope: ['dialog']
-  },
-  'cleanClose': {
-    label: '清空并关闭',
-    type: 'warning',
-    icon: 'ibps-icon-times-circle-o',
-    scope: ['dialog']
-  },
-  'cancel': {
-    label: '取消',
-    type: 'default',
-    icon: 'ibps-icon-cancel',
-    scope: ['dialog']
-  },
-  'refresh': {
-    label: '刷新',
-    type: 'primary',
-    icon: 'ibps-icon-refresh',
-    scope: ['toolbar']
-  },
-  'expand': {
-    label: '展开',
-    type: 'primary',
-    icon: 'ibps-icon-expand',
-    scope: ['toolbar']
-  },
-  'compress': {
-    label: '收缩',
-    type: 'primary',
-    icon: 'ibps-icon-compress',
-    scope: ['toolbar']
-  },
-  'more': {
-    label: '更多',
-    type: 'primary',
-    icon: 'ibps-icon-list-alt',
-    scope: ['toolbar']
-  },
-  'collapse': {
-    label: '收缩',
-    icon: 'ibps-icon-angle-up',
-    scope: ['toolbar']
-  },
-  'expansion': {
-    label: '展开',
-    icon: 'ibps-icon-angle-down',
-    scope: ['toolbar']
-  },
-  'sefStartFlow': {
-    label: '启动自定义流程',
-    icon: 'ibps-icon-cog',
-    scope: ['toolbar', 'manage', 'edit']
-  }
+    'search': {
+        label: '查询',
+        type: 'primary',
+        icon: 'ibps-icon-search',
+        scope: ['toolbar', 'search']
+    },
+    'resetSearch': {
+        label: '重置',
+        type: 'danger',
+        icon: 'ibps-icon-undo',
+        scope: ['toolbar', 'search']
+    },
+    'moreSearch': {
+        label: '更多',
+        type: 'primary',
+        icon: 'ibps-icon-ellipsis-h',
+        scope: ['toolbar', 'search']
+    },
+    'add': {
+        label: '添加',
+        type: 'primary',
+        icon: 'ibps-icon-add',
+        scope: ['toolbar', 'contextmenu'],
+        contextmenu: 'all'
+    },
+    'remove': {
+        label: '删除',
+        type: 'primary',
+        icon: 'ibps-icon-remove',
+        scope: ['toolbar', 'manage'],
+        contextmenu: 'sub'
+    },
+    'edit': {
+        label: '编辑',
+        type: 'primary',
+        icon: 'ibps-icon-edit',
+        scope: ['toolbar', 'manage'],
+        contextmenu: 'sub'
+    },
+    // 原明细
+    // 'detail': {
+    //     label: '明细',
+    //     type: 'info',
+    //     icon: 'ibps-icon-detail',
+    //     scope: ['manage'],
+    //     contextmenu: 'sub'
+    // },
+    'detail': {
+        label: '查阅',
+        type: 'primary',
+        icon: 'ibps-icon-detail',
+        scope: ['manage'],
+        contextmenu: 'sub'
+    },
+    'batchModify': {
+        label: '批量修改',
+        type: 'primary',
+        icon: 'ibps-icon-check-square-o',
+        scope: ['toolbar']
+    },
+    'import': {
+        label: '导入',
+        type: 'primary',
+        icon: 'ibps-icon-import',
+        scope: ['toolbar']
+    },
+    'export': {
+        label: '导出',
+        type: 'primary',
+        icon: 'ibps-icon-export',
+        scope: ['toolbar'],
+        menus: [
+            {
+                label: '导出选中',
+                key: 'exportSelected'
+            }, {
+                label: '导出所有',
+                key: 'exportAll'
+            }, {
+                label: '导出当前页',
+                key: 'exportCurPage'
+            }]
+    },
+    // 导出字段需要在导出按钮那里设置
+    'exportMuBan': {
+        label: '导出模板',
+        type: 'primary',
+        icon: 'ibps-icon-export',
+        scope: ['toolbar'],
+    },
+    'close': {
+        label: '关闭',
+        type: 'default',
+        icon: 'ibps-icon-close',
+        scope: ['edit', 'detail']
+    },
+    'save': {
+        label: '保存',
+        type: 'primary',
+        icon: 'ibps-icon-save',
+        scope: ['edit']
+    },
+    'print': {
+        label: '打印',
+        type: 'primary',
+        icon: 'ibps-icon-print',
+        scope: ['toolbar', 'manage', 'edit', 'detail']
+    },
+    'custom': {
+        label: '自定义',
+        type: 'primary',
+        icon: 'ibps-icon-cog',
+        scope: ['toolbar', 'manage', 'edit', 'detail', 'dialog']
+    },
+    'ok': {
+        label: '确定',
+        type: 'primary',
+        icon: 'ibps-icon-ok',
+        scope: ['dialog']
+    },
+    'confirm': {
+        label: '确定',
+        type: 'primary',
+        icon: 'ibps-icon-ok',
+        scope: ['dialog']
+    },
+    'clean': {
+        label: '清空',
+        type: 'info',
+        icon: 'ibps-icon-clean',
+        scope: ['dialog']
+    },
+    'cleanClose': {
+        label: '清空并关闭',
+        type: 'warning',
+        icon: 'ibps-icon-times-circle-o',
+        scope: ['dialog']
+    },
+    'cancel': {
+        label: '取消',
+        type: 'default',
+        icon: 'ibps-icon-cancel',
+        scope: ['dialog']
+    },
+    'refresh': {
+        label: '刷新',
+        type: 'primary',
+        icon: 'ibps-icon-refresh',
+        scope: ['toolbar']
+    },
+    'expand': {
+        label: '展开',
+        type: 'primary',
+        icon: 'ibps-icon-expand',
+        scope: ['toolbar']
+    },
+    'compress': {
+        label: '收缩',
+        type: 'primary',
+        icon: 'ibps-icon-compress',
+        scope: ['toolbar']
+    },
+    'more': {
+        label: '更多',
+        type: 'primary',
+        icon: 'ibps-icon-list-alt',
+        scope: ['toolbar']
+    },
+    'collapse': {
+        label: '收缩',
+        icon: 'ibps-icon-angle-up',
+        scope: ['toolbar']
+    },
+    'expansion': {
+        label: '展开',
+        icon: 'ibps-icon-angle-down',
+        scope: ['toolbar']
+    },
+    'sefStartFlow': {
+        label: '启动自定义流程',
+        icon: 'ibps-icon-cog',
+        scope: ['toolbar', 'manage', 'edit']
+    }
 
 }
 
 export default buttons
 
-function hasButtonPermission(type, action) {
-  var positions = buttons[type]['scope']
-  if (!positions) { return false }
-  return positions.indexOf(action) > -1
+function hasButtonPermission (type, action) {
+    var positions = buttons[type]['scope']
+    if (!positions) { return false }
+    return positions.indexOf(action) > -1
 }
 /**
 * 是否有权限
@@ -195,21 +203,21 @@ export const hasPermission = hasButtonPermission
  * 是否有按钮
  */
 export const hasButton = function (type, action, position) {
-  var hasPermission = hasButtonPermission(type, action)
-  if (!hasPermission) { return false }// 没有权限
-  if (!position || position === 'all' || position === action) { return true }
-  return false
+    var hasPermission = hasButtonPermission(type, action)
+    if (!hasPermission) { return false }// 没有权限
+    if (!position || position === 'all' || position === action) { return true }
+    return false
 }
 
 /**
 * 是否有右键菜单权限
 */
 export const hasContextmenuButton = function (type, action, p) {
-  var hasPermission = hasButtonPermission(type, action)
-  if (!hasPermission) { return false }// 没有权限
-  var contextmenu = buttons[type]['contextmenu']
-  if (contextmenu === 'all' || contextmenu === p) { return true }
-  return false
+    var hasPermission = hasButtonPermission(type, action)
+    if (!hasPermission) { return false }// 没有权限
+    var contextmenu = buttons[type]['contextmenu']
+    if (contextmenu === 'all' || contextmenu === p) { return true }
+    return false
 }
 
 /**
@@ -217,5 +225,5 @@ export const hasContextmenuButton = function (type, action, p) {
  * @param {*} type
  */
 export const hasSearchPermission = function (type) {
-  return hasButtonPermission(type, 'search')
+    return hasButtonPermission(type, 'search')
 }

src/components/ibps-toolbar/index.vue

@@ -1,183 +1,189 @@
 <template>
-  <span class="ibps-actions">
-    <template v-for="(button,index) in actions">
-      <!--只显示图标-->
-      <template v-if="type === 'icon'">
-        <el-tooltip
-          v-if="handleActionHidden(button.hidden)"
-          :key="button.key+index"
-          v-permission="button.permission"
-          :content="getLabel(button)"
-          :disabled="handleActionDisabled(button.disabled)"
-          placement="bottom-start"
-        >
-          <el-button
-            :key="button.key+index"
-            :name="button.key"
-            :size="button.size|| $ELEMENT.size "
-            :type="getType(button)"
-            :icon="getIcon(button)"
-            :disabled="handleActionDisabled(button.disabled)"
-            class="action-icon"
-            @click="emitEventHandler('action-event',button,position,data,index)"
-          />
-        </el-tooltip>
-      </template>
-      <template v-else-if="type==='link'">
-        <el-link
-          v-if="handleActionHidden(button.hidden)"
-          :key="button.key+index"
-          :type="getType(button)"
-          :icon="getIcon(button)"
-          :disabled="handleActionDisabled(button.disabled)"
-          @click="emitEventHandler('action-event',button,position,data,index)"
-        >
-          {{ button.label }}
-        </el-link>
-        <el-divider v-if="(actions.length == 2 && index == 0) || (actions.length == 3 && index != 2)" :key="index" direction="vertical" />
-      </template>
-      <template v-else-if="type==='linkHide'">
-        <p>
-            <el-link
-              v-if="handleActionHidden(button.hidden)"
-              :key="button.key+index"
-              :type="getType(button)"
-              :icon="getIcon(button)"
-              :disabled="handleActionDisabled(button.disabled)"
-              @click="emitEventHandler('action-event',button,position,data,index)"
-            >
-              {{ button.label }}
-            </el-link>
-        </p>
-      </template>
-      <template v-else>
-        <!--下拉-->
-        <template v-if="button.mode === 'dropdown'">
-          <el-dropdown
-            :key="button.key"
-            :hide-on-click="false"
-            @command="(action)=> { emitEventHandler('action-event',action,position,data,index) }"
-          >
-            <span v-if="button.buttonType==='link'" class="el-dropdown-link">
-              {{ button.label }}<i v-if="hasRighticon(button.rightIcon)" class="el-icon-arrow-down el-icon--right" />
-            </span>
-            <el-button v-else :type="getType(button)" size="mini" :icon="getIcon(button)">
-              {{ button.label }}<i v-if="hasRighticon(button.rightIcon)" class="el-icon-arrow-down el-icon--right" />
-            </el-button>
-            <el-dropdown-menu v-if="button.menus && button.menus.length >0" slot="dropdown">
-              <el-dropdown-item
-                v-for="menu in button.menus"
-                :key="menu.key"
-                :command="menu"
-                :icon="getIcon(menu)"
-              >{{ getLabel(menu) }}</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
+    <span class="ibps-actions">
+        <template v-for="(button,index) in actions">
+            <!--只显示图标-->
+            <template v-if="type === 'icon'">
+                <el-tooltip
+                    v-if="handleActionHidden(button.hidden)"
+                    :key="button.key+index"
+                    v-permission="button.permission"
+                    :content="getLabel(button)"
+                    :disabled="handleActionDisabled(button.disabled)"
+                    placement="bottom-start"
+                >
+                    <el-button
+                        :key="button.key+index"
+                        :name="button.key"
+                        :size="button.size|| $ELEMENT.size "
+                        :type="getType(button)"
+                        :icon="getIcon(button)"
+                        :disabled="handleActionDisabled(button.disabled)"
+                        class="action-icon"
+                        @click="emitEventHandler('action-event',button,position,data,index)"
+                    />
+                </el-tooltip>
+            </template>
+            <template v-else-if="type==='link'">
+                <el-link
+                    v-if="handleActionHidden(button.hidden)"
+                    :key="button.key+index"
+                    :type="getType(button)"
+                    :icon="getIcon(button)"
+                    :underline="false"
+                    :disabled="handleActionDisabled(button.disabled)"
+                    @click="emitEventHandler('action-event',button,position,data,index)"
+                >
+                    {{ `&nbsp;${button.label}` }}
+                </el-link>
+                <el-divider
+                    v-if="(actions.length == 2 && index == 0) || (actions.length == 3 && index != 2)"
+                    :key="index"
+                    direction="vertical"
+                />
+            </template>
+            <template v-else-if="type==='linkHide'">
+                <p>
+                    <el-link
+                        v-if="handleActionHidden(button.hidden)"
+                        :key="button.key+index"
+                        :type="getType(button)"
+                        :underline="false"
+                        :icon="getIcon(button)"
+                        :disabled="handleActionDisabled(button.disabled)"
+                        @click="emitEventHandler('action-event',button,position,data,index)"
+                    >
+                        {{ `&nbsp;${button.label}` }}
+                    </el-link>
+                </p>
+            </template>
+            <template v-else>
+                <!--下拉-->
+                <template v-if="button.mode === 'dropdown'">
+                    <el-dropdown
+                        :key="button.key"
+                        :hide-on-click="false"
+                        @command="(action)=> { emitEventHandler('action-event',action,position,data,index) }"
+                    >
+                        <span v-if="button.buttonType==='link'" class="el-dropdown-link">
+                            {{ `&nbsp;${button.label}` }}<i v-if="hasRighticon(button.rightIcon)" class="el-icon-arrow-down el-icon--right" />
+                        </span>
+                        <el-button v-else :type="getType(button)" size="mini" :icon="getIcon(button)">
+                            {{ `&nbsp;${button.label}` }}<i v-if="hasRighticon(button.rightIcon)" class="el-icon-arrow-down el-icon--right" />
+                        </el-button>
+                        <el-dropdown-menu v-if="button.menus && button.menus.length >0" slot="dropdown">
+                            <el-dropdown-item
+                                v-for="menu in button.menus"
+                                :key="menu.key"
+                                :command="menu"
+                                :icon="getIcon(menu)"
+                            >{{ getLabel(menu) }}</el-dropdown-item>
+                        </el-dropdown-menu>
+                    </el-dropdown>
+                </template>
+                <!--默认-->
+                <template v-else>
+                    <el-button
+                        v-if="handleActionHidden(button.hidden)"
+                        :key="button.key+index"
+                        v-permission="button.permission"
+                        :name="button.key"
+                        :size="button.size|| 'mini' "
+                        :type="getType(button)"
+                        :icon="getIcon(button)"
+                        :disabled="handleActionDisabled(button.disabled)"
+                        :autofocus="false"
+                        @click="emitEventHandler('action-event',button,position,data,index)"
+                    >{{ getLabel(button) }}</el-button>
+                </template>
+            </template>
         </template>
-        <!--默认-->
-        <template v-else>
-          <el-button
-            v-if="handleActionHidden(button.hidden)"
-            :key="button.key+index"
-            v-permission="button.permission"
-            :name="button.key"
-            :size="button.size|| 'mini' "
-            :type="getType(button)"
-            :icon="getIcon(button)"
-            :disabled="handleActionDisabled(button.disabled)"
-            :autofocus="false"
-            @click="emitEventHandler('action-event',button,position,data,index)"
-          >{{ getLabel(button) }}</el-button>
-        </template>
-      </template>
-    </template>
-  </span>
+    </span>
 </template>
 <script>
 import { getButtonIcon, getButtonType } from '@/utils/button'
 import permission from '@/directives/permission/index.js' // 权限判断指令
 // 工具类
 export default {
-  name: 'ibps-toolbar',
-  directives: { permission },
-  props: {
-    type: {
-      type: String,
-      default: 'button'
-    },
-    actions: {
-      type: Array,
-      default: () => { return [] }
-    },
-    position: {
-      type: String,
-      default: 'toolbar'
-    },
-    data: Object,
-    socpe: {
-      type: Object,
-      default: () => { return this }
-    }
-  },
-  data() {
-    return {
-      buttonStatus: true,
-      stopTime: null
-    }
-  },
-  methods: {
-    emitEventHandler(event) {
-      if (this.buttonStatus) {
-        this.buttonStatus = false
-        this.$emit(event, ...Array.from(arguments).slice(1))
-      }
-      this.setButton()
-    },
-    setButton() { // 添加一个定时器，点击之后延时100ms，防二次点击
-      clearTimeout(this.stopTime)
-      this.stopTime = setTimeout(() => {
-        this.buttonStatus = true
-      }, 100)
-    },
-    /**
-     * 处理按钮隐藏，显示
-     */
-    handleActionHidden(hidden = false) {
-      let isHidden = !hidden
-      if (typeof hidden === 'boolean') {
-        isHidden = !hidden
-      } else if (typeof hidden === 'function') {
-        isHidden = !hidden.call(this.socpe, this.data)
-      }
-      return isHidden
-    },
-    /**
-     * 处理按钮禁用，显示disabled 的方法
-     */
-    handleActionDisabled(disabled = false) {
-      if (typeof disabled === 'boolean') {
-        return disabled
-      } else if (typeof disabled === 'function') {
-        return disabled.call(this.socpe, this.data)
-      }
-      return Boolean(disabled)
-    },
-    getLabel({ label, key }) {
-      if (label) return label =='搜索' ? '查询': label
-      return this.$te('common.buttons.' + key) ? this.$t('common.buttons.' + key) : key
-    },
-    getIcon({ icon, key }) {
-      if (icon) { return icon }
-      return getButtonIcon(key)
+    name: 'ibps-toolbar',
+    directives: { permission },
+    props: {
+        type: {
+            type: String,
+            default: 'button'
+        },
+        actions: {
+            type: Array,
+            default: () => { return [] }
+        },
+        position: {
+            type: String,
+            default: 'toolbar'
+        },
+        data: Object,
+        socpe: {
+            type: Object,
+            default: () => { return this }
+        }
     },
-    getType({ type, key }) {
-      if (type) { return type }
-      return getButtonType(key)
+    data () {
+        return {
+            buttonStatus: true,
+            stopTime: null
+        }
     },
-    hasRighticon(rightIcon) {
-      if (rightIcon) { return true }
-      return true
+    methods: {
+        emitEventHandler (event) {
+            if (this.buttonStatus) {
+                this.buttonStatus = false
+                this.$emit(event, ...Array.from(arguments).slice(1))
+            }
+            this.setButton()
+        },
+        setButton () { // 添加一个定时器，点击之后延时100ms，防二次点击
+            clearTimeout(this.stopTime)
+            this.stopTime = setTimeout(() => {
+                this.buttonStatus = true
+            }, 100)
+        },
+        /**
+         * 处理按钮隐藏，显示
+         */
+        handleActionHidden (hidden = false) {
+            let isHidden = !hidden
+            if (typeof hidden === 'boolean') {
+                isHidden = !hidden
+            } else if (typeof hidden === 'function') {
+                isHidden = !hidden.call(this.socpe, this.data)
+            }
+            return isHidden
+        },
+        /**
+         * 处理按钮禁用，显示disabled 的方法
+         */
+        handleActionDisabled (disabled = false) {
+            if (typeof disabled === 'boolean') {
+                return disabled
+            } else if (typeof disabled === 'function') {
+                return disabled.call(this.socpe, this.data)
+            }
+            return Boolean(disabled)
+        },
+        getLabel ({ label, key }) {
+            if (label) return label === '搜索' ? '查询' : label
+            return this.$te('common.buttons.' + key) ? this.$t('common.buttons.' + key) : key
+        },
+        getIcon ({ icon, key }) {
+            if (icon) { return icon }
+            return getButtonIcon(key)
+        },
+        getType ({ type, key }) {
+            if (type) { return type }
+            return getButtonType(key)
+        },
+        hasRighticon (rightIcon) {
+            if (rightIcon) { return true }
+            return true
+        }
     }
-  }
 }
 </script>