【update】调整数据模板操作列按钮样式

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)"
-        >
-        {{ `&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)"
-              :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>
+    <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>

src/views/platform/bpmn/bpmInstHis/list.vue

@@ -442,9 +442,9 @@ export default {
             Promise.all(resultList).then(res => {
                 // console.log('所有附件ID：', res)
                 const sortedResults = requestOrder.map(index => res[index])
-                this.fileLoading = false
                 this.fileId = [...new Set(sortedResults.reduce((acc, cur) => acc.concat(cur.file), []))].join(',')
                 this.snapshotId = [...new Set(sortedResults.reduce((acc, cur) => acc.concat(cur.snapshot), []))].join(',')
+                this.fileLoading = false
             }).catch(err => {
                 this.fileLoading = false
                 console.log('error', err)