操作按钮处理

src/components/table/fieldRender/index.vue

@@ -57,76 +57,89 @@
     />
 
     <!-- 按钮组 -->
-    <!-- 只对默认的编辑、删除、排序按钮进行鉴权，其他按钮请通过 display 属性控制按钮是否显示 -->
+    <div v-if="field.render == 'buttons' && buttons" class="cn-render-buttons">
-    <div v-if="field.render == 'buttons' && field.buttons" class="cn-render-buttons">
+        <template v-for="(btn, idx) in buttons" :key="idx">
-        <template v-for="(btn, idx) in field.buttons" :key="idx">
+            <!-- 常规按钮 -->
-            <template v-if="!(btn.disabled && btn.disabled(row, field))">
+            <el-button
-                <!-- 常规按钮 -->
+                link
+                v-if="btn.render == 'basicButton'"
+                @click="onButtonClick(btn)"
+                :class="btn.class"
+                class="table-operate"
+                :type="btn.type"
+                :loading="props.row.loading || false"
+                v-bind="btn.attr"
+            >
+                <div v-if="btn.text || btn.title" class="table-operate-text">{{ btn.text || btn.title }}</div>
+            </el-button>
+
+            <!-- 带提示信息的按钮 -->
+            <el-tooltip
+                v-if="btn.render == 'tipButton'"
+                :disabled="btn.title && !btn.disabledTip ? false : true"
+                :content="btn.title"
+                placement="top"
+            >
                 <el-button
                     link
-                    v-if="btn.render == 'basicButton'"
                     @click="onButtonClick(btn)"
                     :class="btn.class"
                     class="table-operate"
                     :type="btn.type"
-                    :loading="props.row.loading || false"
                     v-bind="btn.attr"
                 >
-                    <div v-if="btn.text || btn.title" class="table-operate-text">{{ btn.text || btn.title }}</div>
+                    <div v-if="btn.text || btn.title" class="table-operate-text">
+                        {{ btn.text || btn.title }}
+                    </div>
                 </el-button>
+            </el-tooltip>
 
-                <!-- 带提示信息的按钮 -->
+            <!-- 带确认框的按钮 -->
-                <el-tooltip
+            <el-popconfirm
-                    v-if="btn.render == 'tipButton'"
+                v-if="btn.render == 'confirmButton'"
-                    :disabled="btn.title && !btn.disabledTip ? false : true"
+                :disabled="btn.disabled && btn.disabled(row, field)"
-                    :content="btn.title"
+                v-bind="btn.popconfirm"
-                    placement="top"
+                @confirm="onButtonClick(btn)"
-                >
+            >
-                    <el-button
+                <template #reference>
-                        link
+                    <div style="display: inline-block">
-                        @click="onButtonClick(btn)"
+                        <el-tooltip :disabled="btn.title ? false : true" :content="btn.title" placement="top">
-                        :class="btn.class"
+                            <el-button link :class="btn.class" class="table-operate" :type="btn.type" v-bind="btn.attr">
-                        class="table-operate"
+                                <div v-if="btn.text || btn.title" class="table-operate-text">
-                        :type="btn.type"
+                                    {{ btn.text || btn.title }}
-                        v-bind="btn.attr"
+                                </div>
-                    >
+                            </el-button>
-                        <div v-if="btn.text || btn.title" class="table-operate-text">{{ btn.text || btn.title }}</div>
+                        </el-tooltip>
-                    </el-button>
+                    </div>
-                </el-tooltip>
+                </template>
+            </el-popconfirm>
 
-                <!-- 带确认框的按钮 -->
+            <el-dropdown v-if="btn.render == 'dropdown'" trigger="click" @command="handlerCommand">
-                <el-popconfirm
+                <el-button link type="primary" class="table-operate">
-                    v-if="btn.render == 'confirmButton'"
+                    <div class="table-operate-text">更多</div>
-                    :disabled="btn.disabled && btn.disabled(row, field)"
+                </el-button>
-                    v-bind="btn.popconfirm"
+                <template #dropdown>
-                    @confirm="onButtonClick(btn)"
+                    <el-dropdown-menu>
-                >
+                        <el-dropdown-item
-                    <template #reference>
+                            v-for="item in btn.buttons"
-                        <div style="display: inline-block">
+                            :key="item.text"
-                            <el-tooltip :disabled="btn.title ? false : true" :content="btn.title" placement="top">
+                            :command="item"
-                                <el-button
+                            :style="{
-                                    link
+                                color: item.type === 'primary' ? 'var(--el-color-primary)' : 'var(--el-color-danger'
-                                    :class="btn.class"
+                            }"
-                                    class="table-operate"
+                        >
-                                    :type="btn.type"
+                            {{ item.text }}
-                                    v-bind="btn.attr"
+                        </el-dropdown-item>
-                                >
+                    </el-dropdown-menu>
-                                    <div v-if="btn.text || btn.title" class="table-operate-text">
+                </template>
-                                        {{ btn.text || btn.title }}
+            </el-dropdown>
-                                    </div>
-                                </el-button>
-                            </el-tooltip>
-                        </div>
-                    </template>
-                </el-popconfirm>
-            </template>
         </template>
     </div>
 </template>
 
 <script setup lang="ts">
 import { ref, inject } from 'vue'
-import type { TagProps } from 'element-plus'
+import { ElMessageBox, type TagProps } from 'element-plus'
 import type TableStoreClass from '@/utils/tableStore'
 import { fullUrl, timeFormat } from '@/utils/common'
 import type { VxeColumnProps } from 'vxe-table'
@@ -168,6 +181,49 @@ const onButtonClick = (btn: OptButton) => {
 const getTagType = (value: string, custom: any): TagProps['type'] => {
     return custom && custom[value] ? custom[value] : ''
 }
+
+// 按钮组处理 最多显示三个按钮 多余的显示为下拉
+const buttonsFilter = props.field.buttons?.filter(btn => !(btn.disabled && btn.disabled(props.row, props.field))) || []
+const buttons = ref<any[]>([])
+if (buttonsFilter.length > 3) {
+    buttonsFilter?.forEach((btn, index) => {
+        btn.text = btn.text || btn.title
+        if (index < 2) {
+            buttons.value.push(btn)
+        } else {
+            if (buttons.value.length > 2) {
+                buttons.value[buttons.value.length - 1].buttons.push(btn)
+            } else {
+                buttons.value.push({
+                    render: 'dropdown',
+                    buttons: [btn]
+                })
+            }
+        }
+    })
+} else {
+    buttons.value = buttonsFilter
+}
+const handlerCommand = (item: OptButton) => {
+    console.log('====================================')
+    console.log(item)
+    console.log('====================================')
+    switch (item.render) {
+        case 'basicButton':
+            onButtonClick(item)
+            break
+        case 'confirmButton':
+            ElMessageBox.confirm(item.popconfirm?.title || '提示', {
+                confirmButtonText: item.popconfirm?.confirmButtonText || '确认',
+                cancelButtonText: item.popconfirm?.cancelButtonText || '取消',
+                type: 'warning'
+            }).then(() => {
+                onButtonClick(item)
+            })
+        default:
+            break
+    }
+}
 </script>
 
 <style scoped lang="scss">
@@ -194,54 +250,13 @@ const getTagType = (value: string, custom: any): TagProps['type'] => {
     height: auto;
 }
 .cn-render-buttons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     .icon {
         font-size: 12px !important;
         // color: var(--ba-bg-color-overlay) !important;
     }
-    .el-button--primary {
-        .icon {
-            color: var(--el-color-primary) !important;
-            &:hover {
-                color: var(--el-color-primary-light-3) !important;
-            }
-        }
-    }
-
-    .el-button--success {
-        .icon {
-            color: var(--el-color-success) !important;
-            &:hover {
-                color: var(--el-color-success-light-3) !important;
-            }
-        }
-    }
-
-    .el-button--warning {
-        .icon {
-            color: var(--el-color-warning) !important;
-            &:hover {
-                color: var(--el-color-warning-light-3) !important;
-            }
-        }
-    }
-
-    .el-button--danger {
-        .icon {
-            color: var(--el-color-danger) !important;
-            &:hover {
-                color: var(--el-color-danger-light-3) !important;
-            }
-        }
-    }
-
-    .el-button--info {
-        .icon {
-            color: var(--el-color-info) !important;
-            &:hover {
-                color: var(--el-color-info-light-3) !important;
-            }
-        }
-    }
 }
 
 .move-button {

src/components/table/header/index.vue

@@ -130,7 +130,7 @@ const computedSearchRow = () => {
     }
 
     // 获取第一行放了几个表单
-    const elFormItem = document.querySelectorAll('#header-form .el-form-item') as HTMLElement[]
+    const elFormItem = document.querySelectorAll('#header-form .el-form-item') as NodeListOf<HTMLElement>
 
     //  把第一行放不下的复制一份放到headerFormSecond
     let width = 0

src/components/tree/govern/deviceTree.vue

@@ -38,7 +38,7 @@ getDeviceTree().then(res => {
         item.color = config.getColorVal('elementUiPrimary')
         item.children.forEach((item2: any) => {
             item2.icon = 'el-icon-List'
-            item.color = config.getColorVal('elementUiPrimary')
+            item2.color = config.getColorVal('elementUiPrimary')
             item2.children.forEach((item3: any) => {
                 item3.icon = 'el-icon-Platform'
                 item3.color = config.getColorVal('elementUiPrimary')