V4修复: 操作列改为直接写在base_device.vue的onInited中(Vue3写法)

web.vite/src/extension/warehouse/device_manager/base_device.jsx

@@ -1,57 +0,0 @@
-/**
- * base_device 操作列扩展 — 按 DeviceGroup 渲染内联按钮 + 对话框
- */
-import { ref } from 'vue'
-import DeviceLivePreview from '@/views/warehouse/device_manager/base_device/components/DeviceLivePreview.vue'
-import PtzControlPanel from '@/views/warehouse/device_manager/base_device/components/PtzControlPanel.vue'
-import RealtimeDataPanel from '@/views/warehouse/device_manager/base_device/components/RealtimeDataPanel.vue'
-import DeviceControlPanel from '@/views/warehouse/device_manager/base_device/components/DeviceControlPanel.vue'
-
-export default {
-  onInited() {
-    const currentDevice = ref(null)
-    const previewVisible = ref(false)
-    const ptzVisible = ref(false)
-    const realtimeVisible = ref(false)
-    const controlVisible = ref(false)
-
-    this.columns.push({
-      title: '操作',
-      field: '_actions',
-      width: 300,
-      align: 'left',
-      fixed: 'right',
-      render: (h, { row }) => {
-        if (row.DeviceGroup === '视频设备') {
-          return h('div', [
-            h('el-button', { size: 'small', type: 'primary',
-              onClick: () => { currentDevice.value = row; previewVisible.value = true }
-            }, { default: () => '预览' }),
-            h('el-button', { size: 'small',
-              onClick: () => { currentDevice.value = row; ptzVisible.value = true }
-            }, { default: () => '云台' }),
-            h(DeviceLivePreview, { modelValue: previewVisible.value, 'onUpdate:modelValue': v => previewVisible.value = v, device: currentDevice.value }),
-            h(PtzControlPanel, { modelValue: ptzVisible.value, 'onUpdate:modelValue': v => ptzVisible.value = v, device: currentDevice.value }),
-          ])
-        }
-        if (row.DeviceGroup === 'IoT设备') {
-          return h('div', [
-            h('el-button', { size: 'small', type: 'primary',
-              onClick: () => { currentDevice.value = row; realtimeVisible.value = true }
-            }, { default: () => '实时数据' }),
-            h('el-button', { size: 'small',
-              onClick: () => { currentDevice.value = row; controlVisible.value = true }
-            }, { default: () => '控制' }),
-            h(RealtimeDataPanel, { modelValue: realtimeVisible.value, 'onUpdate:modelValue': v => realtimeVisible.value = v, device: currentDevice.value }),
-            h(DeviceControlPanel, { modelValue: controlVisible.value, 'onUpdate:modelValue': v => controlVisible.value = v, device: currentDevice.value }),
-          ])
-        }
-        return null
-      }
-    })
-
-    // 把 DeviceGroup 列显示出来
-    const gcol = this.columns.find(c => c.field === 'DeviceGroup')
-    if (gcol) gcol.hidden = false
-  }
-}

web.vite/src/views/warehouse/device_manager/base_device.vue

@@ -15,7 +15,6 @@
                :searchFormFields="searchFormFields"
                :searchFormOptions="searchFormOptions"
                :table="table"
-               :extend="extend"
                :onInit="onInit"
                :onInited="onInited"
                :searchBefore="searchBefore"
@@ -31,9 +30,12 @@
     </view-grid>
 </template>
 <script setup lang="jsx">
-    import extend from "@/extension/warehouse/device_manager/base_device.jsx";
+        import viewOptions from './base_device/options.js'
-    import viewOptions from './base_device/options.js'
+    import { ref, reactive, getCurrentInstance, watch, onMounted, h } from "vue";
-    import { ref, reactive, getCurrentInstance, watch, onMounted } from "vue";
+import DeviceLivePreview from "./base_device/components/DeviceLivePreview.vue";
+import PtzControlPanel from "./base_device/components/PtzControlPanel.vue";
+import RealtimeDataPanel from "./base_device/components/RealtimeDataPanel.vue";
+import DeviceControlPanel from "./base_device/components/DeviceControlPanel.vue";
     const grid = ref(null);
     const { proxy } = getCurrentInstance()
     //http请求，proxy.http.post/get
@@ -48,6 +50,43 @@
     }
     //生成对象属性初始化后,操作明细表配置用到
     const onInited = async () => {
+        // 自定义操作列：按 DeviceGroup 渲染对应按钮
+        const curDev = ref(null);
+        const pv = ref(false), ptz = ref(false), rt = ref(false), ctrl = ref(false);
+
+        columns.push({
+            title: '操作', field: '_actions', width: 300, align: 'left', fixed: 'right',
+            render: (_h, { row }) => {
+                if (row.DeviceGroup === '视频设备') {
+                    return _h('div', [
+                        _h('el-button', { size: 'small', type: 'primary',
+                            onClick: () => { curDev.value = row; pv.value = true }
+                        }, { default: () => '预览' }),
+                        _h('el-button', { size: 'small',
+                            onClick: () => { curDev.value = row; ptz.value = true }
+                        }, { default: () => '云台' }),
+                        _h(DeviceLivePreview, { modelValue: pv.value, 'onUpdate:modelValue': v => pv.value = v, device: curDev.value }),
+                        _h(PtzControlPanel, { modelValue: ptz.value, 'onUpdate:modelValue': v => ptz.value = v, device: curDev.value }),
+                    ]);
+                }
+                if (row.DeviceGroup === 'IoT设备') {
+                    return _h('div', [
+                        _h('el-button', { size: 'small', type: 'primary',
+                            onClick: () => { curDev.value = row; rt.value = true }
+                        }, { default: () => '实时数据' }),
+                        _h('el-button', { size: 'small',
+                            onClick: () => { curDev.value = row; ctrl.value = true }
+                        }, { default: () => '控制' }),
+                        _h(RealtimeDataPanel, { modelValue: rt.value, 'onUpdate:modelValue': v => rt.value = v, device: curDev.value }),
+                        _h(DeviceControlPanel, { modelValue: ctrl.value, 'onUpdate:modelValue': v => ctrl.value = v, device: curDev.value }),
+                    ]);
+                }
+                return null;
+            }
+        });
+
+        const gcol = columns.find(c => c.field === 'DeviceGroup');
+        if (gcol) gcol.hidden = false;
     }
     const searchBefore = async (param) => {
         //界面查询前,可以给param.wheres添加查询参数