SQL工作台渲染页面，按钮颜色和图标根据不同操作类型变化

src/views/mes/queryManage/queryNew.vue

@@ -1,41 +1,24 @@
 <template>
   <!-- 唯一根节点：el-card -->
   <el-card class="el-content-wrap mb-3px" shadow="never">
-    <!-- 标题 + 提示 -->
-    <!-- <template v-if="title" slot="header">
-      <div class="flex items-center">
-        <span class="text-16px font-700">{{ title }}</span>
-        <el-tooltip v-if="message" effect="dark" placement="right">
-          <template slot="content">
-            <div class="max-w-200px">{{ message }}</div>
-          </template>
-          <i class="el-icon-question ml-5px" style="font-size: 14px" />
-        </el-tooltip>
-      </div>
-    </template> -->
-
     <!-- 原 content-wrap 的 slot 内容 -->
     <el-row class="mb-10px">
       <template v-for="btn in dynamicButtons">
         <el-button
           v-if="!btn.ifHide"
           :key="btn.id"
-          type="primary"
+          :type="getButtonType(btn)"
           size="small"
           @click="handleDynamicButtonClick(btn)"
         >
+          <i :class="getButtonIcon(btn)" class="mr-5px" style="font-size: 14px" />
           {{ btn.buttonName }}
         </el-button>
       </template>
 
-      <el-button size="small" type="danger" @click="AllConditionReset">
-        <i class="el-icon-refresh mr-5px" style="font-size: 14px" />
-        全条件重置
-      </el-button>
-
       <el-button size="small" type="primary" @click="Export">
         <i class="el-icon-download mr-5px" style="font-size: 14px" />
-        导出
+        导出当前页
       </el-button>
 
       <el-button
@@ -48,10 +31,15 @@
         导出全部
       </el-button>
 
-      <el-button size="small" @click="handleBack">
+      <el-button size="small" type="warning" @click="AllConditionReset">
+        <i class="el-icon-refresh mr-5px" style="font-size: 14px" />
+        全条件重置
+      </el-button>
+
+      <!--<el-button size="small" @click="handleBack">
         <i class="el-icon-arrow-left mr-5px" style="font-size: 14px" />
         返回
-      </el-button>
+      </el-button>-->
     </el-row>
 
     <!-- 表格 -->
@@ -406,6 +394,60 @@ export default {
       }
     },
 
+    getButtonIcon(btn) {
+      const { buttonName, operateType } = btn;
+      const name = buttonName.toLowerCase();
+
+      // 根据按钮名称关键词分配图标
+      if (name.includes('新增') || name.includes('添加') || name.includes('创建')) {
+        return 'el-icon-circle-plus';
+      }else if (name.includes('保存') || name.includes('提交')) {
+        return 'el-icon-check';
+      }else if (name.includes('审核') || name.includes('审批')) {
+        return 'el-icon-document-checked';
+      }
+
+      // 根据操作类型分配图标
+      switch(operateType) {
+        case 2: // 新增
+          return 'el-icon-circle-plus';
+        case 3: // 修改
+          return 'el-icon-edit';
+        case 4: // 删除
+          return 'el-icon-delete';
+        case 5: // 导出
+          return 'el-icon-download';
+        case 6: // 打印
+          return 'el-icon-printer';
+        case 7: // 跳转
+          return 'el-icon-right';
+        default:
+          return 'el-icon-star-off'; // 默认图标
+      }
+    },
+
+    getButtonType(btn) {
+      const {operateType} = btn;
+
+      // 根据操作类型分配
+      switch(operateType) {
+        case 2: // 新增
+          return 'success';
+        case 3: // 修改
+          return 'warning';
+        case 4: // 删除
+          return 'danger';
+        case 5: // 导出
+          return 'primary';
+        case 6: // 打印
+          return 'info';
+        case 7: // 跳转
+          return 'success';
+        default:
+          return 'primary';
+      }
+    },
+
     formatToDateTime(val) {
       const d = val ? new Date(val) : new Date();
       if (isNaN(d.getTime())) return "";