新增mqtt文件，订阅设备消息

.env.development

@@ -6,7 +6,7 @@ VITE_APP_ENV = 'development'
 
 # 开发环境
 # VITE_APP_BASE_API = 'http://47.120.79.150/backend'
-VITE_APP_BASE_API = 'http://192.168.110.54:8000'
+VITE_APP_BASE_API = 'http://192.168.2.23:8000'
 # VITE_APP_BASE_API = 'http://localhost:8000'
 
 

package.json

@@ -37,6 +37,7 @@
     "jsencrypt": "3.3.2",
     "mitt": "^3.0.1",
     "nprogress": "0.2.0",
+    "paho-mqtt": "^1.1.0",
     "pinia": "3.0.2",
     "qrcode-vue3": "^1.7.1",
     "screenfull": "6.0.2",

src/utils/mqtt.ts

@@ -0,0 +1,265 @@
+import { ref, onUnmounted } from 'vue'; // 修复：导入必要的Vue API
+import * as Paho from 'paho-mqtt';
+
+// MQTT消息类型定义
+export interface MqttMessage {
+  topic: string;
+  payload: string | ArrayBuffer;
+  qos: number;
+  retained: boolean;
+  time: Date;
+}
+
+// 订阅选项
+export interface SubscribeOptions {
+  qos: 0 | 1 | 2;
+}
+
+// MQTT配置信息
+const MQTT_CONFIG = {
+  // 连接地址（添加协议类型）
+  protocol: 'ws', // 关键：明确协议（ws或wss）
+  host: '47.120.79.150',
+  port: 9083,
+  // 认证信息
+  username: 'admin',
+  password: '#YtvpSfCNG',
+  // 客户端ID（添加时间戳确保唯一性）
+  clientId: `vue3-mqtt-client-${Date.now()}-${Math.random().toString(36).substring(2, 10)}`,
+  // 连接选项
+  cleanSession: true,
+  keepAliveInterval: 60,
+  reconnect: true,
+};
+
+// MQTT客户端组合式API
+export function useMqtt() {
+  // 客户端实例
+  let client: Paho.Client | null = null;
+  
+  // 状态管理（修复：已导入ref）
+  const connected = ref(false);
+  const connecting = ref(false);
+  const error = ref<Error | null>(null);
+  const messages = ref<MqttMessage[]>([]);
+  const subscribedTopics = ref<string[]>([]);
+  
+  // 事件回调
+  const connectCallbacks: (() => void)[] = [];
+  const messageCallbacks: ((message: MqttMessage) => void)[] = [];
+  const errorCallbacks: ((err: Error) => void)[] = [];
+  const disconnectCallbacks: (() => void)[] = [];
+  
+  // 修复：移除无用的p0参数，connect方法不接受回调（通过onConnect注册）
+  const connect = () => {
+    if (connected.value || connecting.value) return;
+    connecting.value = true;
+    error.value = null;
+    
+    try {
+      // 创建客户端实例（添加协议参数）
+      client = new Paho.Client(
+        MQTT_CONFIG.host,
+        MQTT_CONFIG.port,
+        MQTT_CONFIG.clientId
+      );
+      
+      // 设置连接选项
+      const connectOptions: Paho.ConnectOptions = {
+        userName: MQTT_CONFIG.username,
+        password: MQTT_CONFIG.password,
+        cleanSession: MQTT_CONFIG.cleanSession,
+        keepAliveInterval: MQTT_CONFIG.keepAliveInterval,
+        reconnect: MQTT_CONFIG.reconnect,
+        
+        // 连接成功回调
+        onSuccess: () => {
+          console.log('MQTT连接成功');
+          connected.value = true;
+          connecting.value = false;
+          connectCallbacks.forEach(cb => cb()); // 触发所有连接成功回调
+        },
+        
+        // 连接失败回调
+        onFailure: (err) => {
+          console.error('MQTT连接失败:', err);
+          error.value = new Error(err.errorMessage || '连接失败');
+          connected.value = false;
+          connecting.value = false;
+          errorCallbacks.forEach(cb => cb(error.value!));
+        }
+      };
+      
+      // 设置客户端回调
+      client.onConnectionLost = (responseObject) => {
+        if (responseObject.errorCode !== 0) {
+          console.error('连接丢失:', responseObject.errorMessage);
+          error.value = new Error(responseObject.errorMessage || '连接丢失');
+          errorCallbacks.forEach(cb => cb(error.value!));
+        }
+        
+        connected.value = false;
+        connecting.value = false;
+        disconnectCallbacks.forEach(cb => cb());
+      };
+      
+      // 消息接收回调
+      client.onMessageArrived = (message) => {
+        const newMessage: MqttMessage = {
+          topic: message.destinationName,
+          payload: message.payloadString || message.payloadBytes,
+          qos: message.qos,
+          retained: message.retained,
+          time: new Date()
+        };
+        
+        messages.value.push(newMessage);
+        messageCallbacks.forEach(cb => cb(newMessage));
+      };
+      
+      // 连接服务器
+      client.connect(connectOptions);
+    } catch (err) {
+      console.error('MQTT连接异常:', err);
+      error.value = err as Error;
+      connected.value = false;
+      connecting.value = false;
+      errorCallbacks.forEach(cb => cb(error.value!));
+    }
+  };
+  
+  // 断开连接
+  const disconnect = () => {
+    if (!client || !connected.value) return;
+    
+    client.disconnect();
+    client = null;
+    connected.value = false;
+    subscribedTopics.value = [];
+    disconnectCallbacks.forEach(cb => cb());
+  };
+  
+  // 订阅主题
+  const subscribe = (topic: string, options: SubscribeOptions): Promise<void> => {
+    return new Promise((resolve, reject) => {
+      if (!client || !connected.value) {
+        reject(new Error('未连接到MQTT服务器'));
+        return;
+      }
+      
+      if (subscribedTopics.value.includes(topic)) {
+        resolve();
+        return;
+      }
+      
+      client.subscribe(topic, {
+        qos: options.qos,
+        onSuccess: () => {
+          console.log(`订阅主题成功: ${topic}`);
+          subscribedTopics.value.push(topic);
+          resolve();
+        },
+        onFailure: (err) => {
+          console.error(`订阅主题失败: ${topic}`, err);
+          reject(new Error(err.errorMessage || `订阅主题 ${topic} 失败`));
+        }
+      });
+    });
+  };
+  
+  // 取消订阅
+  const unsubscribe = (topic: string): Promise<void> => {
+    return new Promise((resolve, reject) => {
+      if (!client || !connected.value) {
+        reject(new Error('未连接到MQTT服务器'));
+        return;
+      }
+      
+      if (!subscribedTopics.value.includes(topic)) {
+        resolve();
+        return;
+      }
+      
+      client.unsubscribe(topic, {
+        onSuccess: () => {
+          console.log(`取消订阅主题成功: ${topic}`);
+          subscribedTopics.value = subscribedTopics.value.filter(t => t !== topic);
+          resolve();
+        },
+        onFailure: (err) => {
+          console.error(`取消订阅主题失败: ${topic}`, err);
+          reject(new Error(err.errorMessage || `取消订阅主题 ${topic} 失败`));
+        }
+      });
+    });
+  };
+  
+  // 发布消息
+  const publish = (
+    topic: string,
+    payload: string | ArrayBuffer,
+    options: { qos: 0 | 1 | 2; retained?: boolean }
+  ): Promise<void> => {
+    return new Promise((resolve, reject) => {
+      if (!client || !connected.value) {
+        reject(new Error('未连接到MQTT服务器'));
+        return;
+      }
+      
+      if (!topic) {
+        reject(new Error('主题不能为空'));
+        return;
+      }
+      
+      const message = new Paho.Message(
+        typeof payload === 'string' ? payload : payload.toString()
+      );
+      
+      message.destinationName = topic;
+      message.qos = options.qos;
+      message.retained = options.retained ?? false;
+      
+      client.send(message);
+      resolve();
+    });
+  };
+  
+  // 事件注册
+  const onConnect = (callback: () => void) => {
+    connectCallbacks.push(callback);
+  };
+  
+  const onMessage = (callback: (message: MqttMessage) => void) => {
+    messageCallbacks.push(callback);
+  };
+  
+  const onError = (callback: (err: Error) => void) => {
+    errorCallbacks.push(callback);
+  };
+  
+  const onDisconnect = (callback: () => void) => {
+    disconnectCallbacks.push(callback);
+  };
+  
+  // 组件卸载时断开连接
+  onUnmounted(() => {
+    disconnect();
+  });
+  
+  return {
+    connected,
+    connecting,
+    error,
+    messages,
+    subscribedTopics,
+    connect,
+    disconnect,
+    subscribe,
+    unsubscribe,
+    publish,
+    onConnect,
+    onMessage,
+    onError,
+    onDisconnect
+  };
+}

src/views/controlCenter/6170/index.vue

@@ -125,6 +125,7 @@
 </template>
 <script setup name="DeviceControl" lang="ts">
 const route = useRoute();
+import { useMqtt } from '@/utils/mqtt';
 import api from '@/api/controlCenter/controlPanel/index'
 import { DeviceDetail, LightMode } from '@/api/controlCenter/controlPanel/types';
 import { generateShortId, getDeviceStatus } from '@/utils/function';
@@ -147,7 +148,15 @@ const fullscreenLoading = ref(false)
 const forceAlarmLoading = ref(false)  //强制报警
 const sendTextLoading = ref(false)
 const lightModesLoading = ref(false)
-
+const {
+    connected,
+    connect,
+    subscribe,
+    onConnect,
+    onError,
+    onMessage,
+    disconnect
+} = useMqtt();
 // 灯光模式数据（引用导入的图片）
 const lightModes = ref<LightMode[]>([
     {
@@ -244,6 +253,7 @@ const handleModeClick = async (modeId: string) => {
             typeName: deviceDetail.value.typeName,
         });
         if (res.code === 200) {
+            ElMessage.closeAll();
             proxy?.$modal.msgSuccess(res.msg);
             setActiveLightMode(modeId);
         } else {
@@ -300,7 +310,7 @@ const getList = async () => {
             targetModeId = matchedMode.id;
         }
         setActiveLightMode(targetModeId);
-        const laserStatus = res.data.laserModeStatus ?? 0;
+        const laserStatus = res.data.laserLightMode;
         laserMode.value.active = laserStatus === 1;
         laserMode.value.switchStatus = laserStatus === 1;
     } catch (error) {
@@ -321,6 +331,7 @@ const handleLaserClick = async () => {
             instructValue: targetStatus ? 1 : 0
         });
         if (res.code === 200) {
+            ElMessage.closeAll();
             proxy?.$modal.msgSuccess(res.msg);
             laserMode.value.active = targetStatus;
             laserMode.value.switchStatus = targetStatus;
@@ -496,9 +507,118 @@ const lookMap = (row: any) => {
         }
     });
 }
-
+const getMainLightModeLabel = (mode: any) => {
-onMounted(() => {
+    const modeMap = {
-    getList();
+        0: 'close',    // 0 → 关闭
+        1: 'strong',   // 1 → 强光
+        2: 'weak',     // 2 → 弱光
+        3: 'strobe',   // 3 → 爆闪
+        4: 'flood'     // 4 → 泛光
+    }
+    return modeMap[mode] || (console.log('未知的灯光模式:', mode), '未知');
+}
+// 处理设备消息
+const handleDeviceMessage = (msg: any) => {
+    try {
+        // 解析设备消息（假设格式为 { state: [类型, 模式值, 亮度, 续航...] }）
+        const payloadObj = JSON.parse(msg.payload.toString());
+        const deviceState = payloadObj.state; // 设备状态数组
+        if (!Array.isArray(deviceState)) {
+            return;
+        }
+        // 用switch处理不同的消息类型（deviceState[0]）
+        switch (deviceState[0]) {
+            case 1:
+                // 类型1灯光主键
+                const lightModeId = getMainLightModeLabel(deviceState[1]); // 获取模式ID（如'strong'）
+                const brightness = deviceState[2]; // 亮度值
+                const batteryTime = deviceState[3]; // 续航时间
+                console.log('灯光模式消息:', { 模式ID: lightModeId, 亮度: brightness, 续航: batteryTime });
+                // 1. 同步灯光模式状态
+                if (lightModeId !== 'unknown') {
+                    lightModes.value.forEach(mode => {
+                        const isActive = mode.id === lightModeId;
+                        mode.active = isActive;
+                        mode.switchStatus = isActive;
+                    });
+                }
+                // 2.亮度
+                if (brightness !== undefined) {
+                    deviceDetail.value.lightBrightness = brightness.toString();
+                }
+                // 3.续航时间
+                if (batteryTime !== undefined) {
+                    deviceDetail.value.batteryRemainingTime = batteryTime.toString();
+                }
+                break;
+            case 12:
+                // 灯光主键
+                const lightModeIdA = getMainLightModeLabel(deviceState[1]); // 获取模式ID（如'strong'）
+                if (lightModeIdA !== 'unknown') {
+                    lightModes.value.forEach(mode => {
+                        const isActive = mode.id === lightModeIdA;
+                        mode.active = isActive;
+                        mode.switchStatus = isActive;
+                    });
+                }
+                // 激光
+                const laserValue = deviceState[2];
+                // 同步激光模式状态：1=开启（true），0=关闭（false）
+                laserMode.value.active = laserValue === 1;
+                laserMode.value.switchStatus = laserValue === 1;
+                deviceDetail.value.batteryPercentage = deviceState[3]; //电量
+                deviceDetail.value.batteryRemainingTime = deviceState[5]; //续航时间
+                // getList(); // 重新获取设备详情
+                if (deviceDetail.value.batteryPercentage < 20) {
+                    ElMessage.closeAll();
+                    proxy?.$modal.msgWarning('电量低于20%，请及时充电');
+                }
+                break;
+            default:
+                // 其他类型消息（不处理，仅打印）
+                console.log('未处理的消息类型:', deviceState[0]);
+                break;
+        }
+    } catch (e) {
+    }
+};
+onMounted(async () => {
+    await getList(); // 先获取设备信息
+    // 连接mqtt
+    onConnect(async () => {
+        const deviceImei = deviceDetail.value.deviceImei;
+        if (!deviceImei) {
+            return;
+        }
+        try {
+            await subscribe(`A/${deviceImei}`, { qos: 1 });
+            console.log('订阅成功');
+        } catch (err) {
+            console.error('订阅失败（onConnect内）:', err);
+        }
+    });
+    // 2. 注册消息接收回调（核心：处理设备发送的消息）
+    onMessage((msg) => {
+        console.log('收到新消息:', {
+            主题: msg.topic,
+            内容: msg.payload,
+            时间: msg.time,
+            QoS: msg.qos
+        });
+        // 在这里处理消息（根据实际业务逻辑）
+        handleDeviceMessage(msg);
+    });
+    onError((err) => {
+        console.error('MQTT连接失败原因:', err.message); // 关键：打印连接失败的具体原因
+    });
+    connect();
+});
+onUnmounted(() => {
+  // 只有当连接已建立时，才执行断开操作（避免无效调用）
+  if (connected.value) {
+    console.log('页面离开，断开MQTT连接');
+    disconnect(); // 调用断开连接方法
+  }
 });
 
 </script>
@@ -800,4 +920,4 @@ onMounted(() => {
         }
     }
 }
-</style>
+</style>

src/views/controlCenter/controlPanel/index.vue

@@ -301,8 +301,6 @@ const resetQuery = () => {
 
 /** 设备控制跳转 */
 const handleControl = (row: any) => {
-  console.log(row,'row1111');
-  
   const deviceId = row.id;
   router.push('/controlCenter/6170/' + deviceId);
 };

src/views/demo/demo/index.vue

@@ -1,254 +0,0 @@
-<template>
-  <div class="p-2">
-    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div v-show="showSearch" class="mb-[10px]">
-        <el-card shadow="hover">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-form-item label="部门id" prop="deptId">
-              <el-input v-model="queryParams.deptId" placeholder="请输入部门id" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="用户id" prop="userId">
-              <el-input v-model="queryParams.userId" placeholder="请输入用户id" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="排序号" prop="orderNum">
-              <el-input v-model="queryParams.orderNum" placeholder="请输入排序号" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="key键" prop="testKey">
-              <el-input v-model="queryParams.testKey" placeholder="请输入key键" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item label="值" prop="value">
-              <el-input v-model="queryParams.value" placeholder="请输入值" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
-        </el-card>
-      </div>
-    </transition>
-
-    <el-card shadow="hover">
-      <template #header>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button v-hasPermi="['demo:demo:add']" type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button v-hasPermi="['demo:demo:edit']" type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()">修改</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button v-hasPermi="['demo:demo:remove']" type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
-              >删除</el-button
-            >
-          </el-col>
-          <el-col :span="1.5">
-            <el-button v-hasPermi="['demo:demo:export']" type="warning" plain icon="Download" @click="handleExport">导出</el-button>
-          </el-col>
-          <right-toolbar v-model:show-search="showSearch" @query-table="getList"></right-toolbar>
-        </el-row>
-      </template>
-
-      <el-table v-loading="loading" border :data="demoList" @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column v-if="true" label="主键" align="center" prop="id" />
-        <el-table-column label="部门id" align="center" prop="deptId" />
-        <el-table-column label="用户id" align="center" prop="userId" />
-        <el-table-column label="排序号" align="center" prop="orderNum" />
-        <el-table-column label="key键" align="center" prop="testKey" />
-        <el-table-column label="值" align="center" prop="value" />
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-          <template #default="scope">
-            <el-tooltip content="修改" placement="top">
-              <el-button v-hasPermi="['demo:demo:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
-            </el-tooltip>
-            <el-tooltip content="删除" placement="top">
-              <el-button v-hasPermi="['demo:demo:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>
-            </el-tooltip>
-          </template>
-        </el-table-column>
-      </el-table>
-
-      <pagination v-show="total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" />
-    </el-card>
-    <!-- 添加或修改测试单对话框 -->
-    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
-      <el-form ref="demoFormRef" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="部门id" prop="deptId">
-          <el-input v-model="form.deptId" placeholder="请输入部门id" />
-        </el-form-item>
-        <el-form-item label="用户id" prop="userId">
-          <el-input v-model="form.userId" placeholder="请输入用户id" />
-        </el-form-item>
-        <el-form-item label="排序号" prop="orderNum">
-          <el-input v-model="form.orderNum" placeholder="请输入排序号" />
-        </el-form-item>
-        <el-form-item label="key键" prop="testKey">
-          <el-input v-model="form.testKey" placeholder="请输入key键" />
-        </el-form-item>
-        <el-form-item label="值" prop="value">
-          <el-input v-model="form.value" placeholder="请输入值" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup name="Demo" lang="ts">
-import { listDemo, getDemo, delDemo, addDemo, updateDemo } from '@/api/demo/demo';
-import { DemoVO, DemoQuery, DemoForm } from '@/api/demo/demo/types';
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
-const demoList = ref<DemoVO[]>([]);
-const buttonLoading = ref(false);
-const loading = ref(true);
-const showSearch = ref(true);
-const ids = ref<Array<string | number>>([]);
-const single = ref(true);
-const multiple = ref(true);
-const total = ref(0);
-
-const queryFormRef = ref<ElFormInstance>();
-const demoFormRef = ref<ElFormInstance>();
-
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
-
-const initFormData: DemoForm = {
-  id: undefined,
-  deptId: undefined,
-  userId: undefined,
-  orderNum: undefined,
-  testKey: undefined,
-  value: undefined
-};
-const data = reactive<PageData<DemoForm, DemoQuery>>({
-  form: { ...initFormData },
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    deptId: undefined,
-    userId: undefined,
-    orderNum: undefined,
-    testKey: undefined,
-    value: undefined
-  },
-  rules: {
-    id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
-    deptId: [{ required: true, message: '部门id不能为空', trigger: 'blur' }],
-    userId: [{ required: true, message: '用户id不能为空', trigger: 'blur' }],
-    orderNum: [{ required: true, message: '排序号不能为空', trigger: 'blur' }],
-    testKey: [{ required: true, message: 'key键不能为空', trigger: 'blur' }],
-    value: [{ required: true, message: '值不能为空', trigger: 'blur' }]
-  }
-});
-
-const { queryParams, form, rules } = toRefs(data);
-
-/** 查询测试单列表 */
-const getList = async () => {
-  loading.value = true;
-  const res = await listDemo(queryParams.value);
-  demoList.value = res.rows;
-  total.value = res.total;
-  loading.value = false;
-};
-
-/** 取消按钮 */
-const cancel = () => {
-  reset();
-  dialog.visible = false;
-};
-
-/** 表单重置 */
-const reset = () => {
-  form.value = { ...initFormData };
-  demoFormRef.value?.resetFields();
-};
-
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  queryParams.value.pageNum = 1;
-  getList();
-};
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields();
-  handleQuery();
-};
-
-/** 多选框选中数据 */
-const handleSelectionChange = (selection: DemoVO[]) => {
-  ids.value = selection.map((item) => item.id);
-  single.value = selection.length != 1;
-  multiple.value = !selection.length;
-};
-
-/** 新增按钮操作 */
-const handleAdd = () => {
-  reset();
-  dialog.visible = true;
-  dialog.title = '添加测试单';
-};
-
-/** 修改按钮操作 */
-const handleUpdate = async (row?: DemoVO) => {
-  reset();
-  const _id = row?.id || ids.value[0];
-  const res = await getDemo(_id);
-  Object.assign(form.value, res.data);
-  dialog.visible = true;
-  dialog.title = '修改测试单';
-};
-
-/** 提交按钮 */
-const submitForm = () => {
-  demoFormRef.value?.validate(async (valid: boolean) => {
-    if (valid) {
-      buttonLoading.value = true;
-      if (form.value.id) {
-        await updateDemo(form.value).finally(() => (buttonLoading.value = false));
-      } else {
-        await addDemo(form.value).finally(() => (buttonLoading.value = false));
-      }
-      proxy?.$modal.msgSuccess('修改成功');
-      dialog.visible = false;
-      await getList();
-    }
-  });
-};
-
-/** 删除按钮操作 */
-const handleDelete = async (row?: DemoVO) => {
-  const _ids = row?.id || ids.value;
-  await proxy?.$modal.confirm('是否确认删除测试单编号为"' + _ids + '"的数据项？').finally(() => (loading.value = false));
-  await delDemo(_ids);
-  proxy?.$modal.msgSuccess('删除成功');
-  await getList();
-};
-
-/** 导出按钮操作 */
-const handleExport = () => {
-  proxy?.download(
-    'demo/demo/export',
-    {
-      ...queryParams.value
-    },
-    `demo_${new Date().getTime()}.xlsx`
-  );
-};
-
-onMounted(() => {
-  getList();
-});
-</script>

src/views/demo/tree/index.vue

@@ -1,259 +0,0 @@
-<template>
-  <div class="p-2">
-    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
-      <div v-show="showSearch" class="mb-[10px]">
-        <el-card shadow="hover">
-          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
-            <el-form-item label="树节点名" prop="treeName">
-              <el-input v-model="queryParams.treeName" placeholder="请输入树节点名" clearable @keyup.enter="handleQuery" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
-              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
-            </el-form-item>
-          </el-form>
-        </el-card>
-      </div>
-    </transition>
-
-    <el-card shadow="hover">
-      <template #header>
-        <el-row :gutter="10" class="mb8">
-          <el-col :span="1.5">
-            <el-button v-hasPermi="['demo:tree:add']" type="primary" plain icon="Plus" @click="handleAdd()">新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
-          </el-col>
-          <right-toolbar v-model:show-search="showSearch" @query-table="getList"></right-toolbar>
-        </el-row>
-      </template>
-      <el-table
-        ref="treeTableRef"
-        v-loading="loading"
-        :data="treeList"
-        row-key="id"
-        border
-        :default-expand-all="isExpandAll"
-        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
-      >
-        <el-table-column label="父id" align="center" prop="parentId" />
-        <el-table-column label="部门id" align="center" prop="deptId" />
-        <el-table-column label="用户id" align="center" prop="userId" />
-        <el-table-column label="树节点名" align="center" prop="treeName" />
-        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-          <template #default="scope">
-            <el-tooltip content="修改" placement="top">
-              <el-button v-hasPermi="['demo:tree:edit']" link type="primary" icon="Edit" @click="handleUpdate(scope.row)" />
-            </el-tooltip>
-            <el-tooltip content="新增" placement="top">
-              <el-button v-hasPermi="['demo:tree:add']" link type="primary" icon="Plus" @click="handleAdd(scope.row)" />
-            </el-tooltip>
-            <el-tooltip content="删除" placement="top">
-              <el-button v-hasPermi="['demo:tree:remove']" link type="primary" icon="Delete" @click="handleDelete(scope.row)" />
-            </el-tooltip>
-          </template>
-        </el-table-column>
-      </el-table>
-    </el-card>
-    <!-- 添加或修改测试树对话框 -->
-    <el-dialog v-model="dialog.visible" :title="dialog.title" width="500px" append-to-body>
-      <el-form ref="treeFormRef" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="父id" prop="parentId">
-          <el-tree-select
-            v-model="form.parentId"
-            :data="treeOptions"
-            :props="{ value: 'id', label: 'treeName', children: 'children' } as any"
-            value-key="id"
-            placeholder="请选择父id"
-            check-strictly
-          />
-        </el-form-item>
-        <el-form-item label="部门id" prop="deptId">
-          <el-input v-model="form.deptId" placeholder="请输入部门id" />
-        </el-form-item>
-        <el-form-item label="用户id" prop="userId">
-          <el-input v-model="form.userId" placeholder="请输入用户id" />
-        </el-form-item>
-        <el-form-item label="值" prop="treeName">
-          <el-input v-model="form.treeName" placeholder="请输入值" />
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
-  </div>
-</template>
-
-<script setup name="Tree" lang="ts">
-import { listTree, getTree, delTree, addTree, updateTree } from '@/api/demo/tree';
-import { TreeVO, TreeQuery, TreeForm } from '@/api/demo/tree/types';
-
-type TreeOption = {
-  id: number;
-  treeName: string;
-  children?: TreeOption[];
-};
-
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
-
-const treeList = ref<TreeVO[]>([]);
-const treeOptions = ref<TreeOption[]>([]);
-const buttonLoading = ref(false);
-const showSearch = ref(true);
-const isExpandAll = ref(true);
-const loading = ref(false);
-
-const queryFormRef = ref<ElFormInstance>();
-const treeFormRef = ref<ElFormInstance>();
-const treeTableRef = ref<ElTableInstance>();
-
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
-
-const initFormData: TreeForm = {
-  id: undefined,
-  parentId: undefined,
-  deptId: undefined,
-  userId: undefined,
-  treeName: undefined
-};
-
-const data = reactive<PageData<TreeForm, TreeQuery>>({
-  form: { ...initFormData },
-  queryParams: {
-    parentId: undefined,
-    deptId: undefined,
-    userId: undefined,
-    treeName: undefined
-  },
-  rules: {
-    id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
-    parentId: [{ required: true, message: '父id不能为空', trigger: 'blur' }],
-    deptId: [{ required: true, message: '部门id不能为空', trigger: 'blur' }],
-    userId: [{ required: true, message: '用户id不能为空', trigger: 'blur' }],
-    treeName: [{ required: true, message: '值不能为空', trigger: 'blur' }]
-  }
-});
-
-const { queryParams, form, rules } = toRefs(data);
-
-/** 查询测试树列表 */
-const getList = async () => {
-  loading.value = true;
-  const res = await listTree(queryParams.value);
-  const data = proxy?.handleTree<TreeVO>(res.data, 'id', 'parentId');
-  if (data) {
-    treeList.value = data;
-    loading.value = false;
-  }
-};
-
-/** 查询测试树下拉树结构 */
-const getTreeselect = async () => {
-  const res = await listTree();
-  treeOptions.value = [];
-  const data: TreeOption = { id: 0, treeName: '顶级节点', children: [] };
-  data.children = proxy?.handleTree<TreeOption>(res.data, 'id', 'parentId');
-  treeOptions.value.push(data);
-};
-
-// 取消按钮
-const cancel = () => {
-  reset();
-  dialog.visible = false;
-};
-
-// 表单重置
-const reset = () => {
-  form.value = { ...initFormData };
-  treeFormRef.value?.resetFields();
-};
-
-/** 搜索按钮操作 */
-const handleQuery = () => {
-  getList();
-};
-
-/** 重置按钮操作 */
-const resetQuery = () => {
-  queryFormRef.value?.resetFields();
-  handleQuery();
-};
-
-/** 新增按钮操作 */
-const handleAdd = (row?: TreeVO) => {
-  reset();
-  getTreeselect();
-  if (row && row.id) {
-    form.value.parentId = row.id;
-  } else {
-    form.value.parentId = 0;
-  }
-  dialog.visible = true;
-  dialog.title = '添加测试树';
-};
-
-/** 展开/折叠操作 */
-const handleToggleExpandAll = () => {
-  isExpandAll.value = !isExpandAll.value;
-  toggleExpandAll(treeList.value, isExpandAll.value);
-};
-
-/** 展开/折叠操作 */
-const toggleExpandAll = (data: TreeVO[], status: boolean) => {
-  data.forEach((item) => {
-    treeTableRef.value?.toggleRowExpansion(item, status);
-    if (item.children && item.children.length > 0) toggleExpandAll(item.children, status);
-  });
-};
-
-/** 修改按钮操作 */
-const handleUpdate = async (row: TreeVO) => {
-  reset();
-  await getTreeselect();
-  if (row) {
-    form.value.parentId = row.id;
-  }
-  const res = await getTree(row.id);
-  Object.assign(form.value, res.data);
-  dialog.visible = true;
-  dialog.title = '修改测试树';
-};
-
-/** 提交按钮 */
-const submitForm = () => {
-  treeFormRef.value?.validate(async (valid: boolean) => {
-    if (valid) {
-      buttonLoading.value = true;
-      if (form.value.id) {
-        await updateTree(form.value).finally(() => (buttonLoading.value = false));
-      } else {
-        await addTree(form.value).finally(() => (buttonLoading.value = false));
-      }
-      proxy?.$modal.msgSuccess('操作成功');
-      dialog.visible = false;
-      await getList();
-    }
-  });
-};
-
-/** 删除按钮操作 */
-const handleDelete = async (row: TreeVO) => {
-  await proxy?.$modal.confirm('是否确认删除测试树编号为"' + row.id + '"的数据项？');
-  loading.value = true;
-  await delTree(row.id).finally(() => (loading.value = false));
-  await getList();
-  proxy?.$modal.msgSuccess('删除成功');
-};
-
-onMounted(() => {
-  getList();
-});
-</script>