V4修复: 组件和extension迁移到device_manager目录

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

@@ -1,72 +0,0 @@
-/**
- * base_device 页面操作列扩展
- * 按 DeviceGroup 动态渲染对应的操作按钮组件
- * 框架升级不覆盖此文件（extension 目录受保护）
- */
-import VideoDeviceActions from '@/views/warehouse/base_device/components/VideoDeviceActions.vue'
-import IoTDeviceActions from '@/views/warehouse/base_device/components/IoTDeviceActions.vue'
-import AccessDeviceActions from '@/views/warehouse/base_device/components/AccessDeviceActions.vue'
-import BarrierDeviceActions from '@/views/warehouse/base_device/components/BarrierDeviceActions.vue'
-import AlarmDeviceActions from '@/views/warehouse/base_device/components/AlarmDeviceActions.vue'
-import DeviceLivePreview from '@/views/warehouse/base_device/components/DeviceLivePreview.vue'
-import PtzControlPanel from '@/views/warehouse/base_device/components/PtzControlPanel.vue'
-import RealtimeDataPanel from '@/views/warehouse/base_device/components/RealtimeDataPanel.vue'
-import DeviceControlPanel from '@/views/warehouse/base_device/components/DeviceControlPanel.vue'
-import DeviceEditDialog from '@/views/warehouse/base_device/components/DeviceEditDialog.vue'
-import MapBindingPanel from '@/views/warehouse/base_device/components/MapBindingPanel.vue'
-
-// 按 DeviceGroup 映射操作组件
-const actionMap = {
-  '视频设备': 'VideoDeviceActions',
-  'IoT设备': 'IoTDeviceActions',
-  '门禁设备': 'AccessDeviceActions',
-  '道闸设备': 'BarrierDeviceActions',
-  '报警设备': 'AlarmDeviceActions',
-}
-
-export default {
-  components: {
-    VideoDeviceActions, IoTDeviceActions, AccessDeviceActions, BarrierDeviceActions, AlarmDeviceActions,
-    DeviceLivePreview, PtzControlPanel, RealtimeDataPanel, DeviceControlPanel, DeviceEditDialog, MapBindingPanel
-  },
-
-  data() {
-    return {
-      currentDevice: null,
-      dialogs: { preview: false, ptz: false, realtime: false, control: false, edit: false, map: false }
-    }
-  },
-
-  // 替换框架操作列
-  slots: {
-    'col-action': (h, { row }) => {
-      const compName = actionMap[row.deviceGroup]
-      if (!compName) return null
-      // 渲染自定义按钮组，绑定事件
-      return h(compName, {
-        props: { row },
-        on: {
-          preview: () => this.openDialog('preview', row),
-          ptz: () => this.openDialog('ptz', row),
-          playback: () => console.log('playback', row),
-          snapshot: () => console.log('snapshot', row),
-          syncChannels: () => console.log('syncChannels', row),
-          realtime: () => this.openDialog('realtime', row),
-          control: () => this.openDialog('control', row),
-          refresh: () => this.$emit('refresh'),
-          alarms: () => console.log('alarms', row),
-        }
-      })
-    }
-  },
-
-  methods: {
-    openDialog(name, device) {
-      this.currentDevice = device
-      this.dialogs[name] = true
-    },
-    onRefresh() {
-      this.$emit('refresh')
-    }
-  }
-}

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

@@ -1,75 +1,72 @@
-/*****************************************************************************************
+/**
-**  Author:jxx 2023
+ * base_device 页面操作列扩展
-**  QQ:283591387
+ * 按 DeviceGroup 动态渲染对应的操作按钮组件
-**  框架文档： http://doc.volcore.xyz/
+ * 框架升级不覆盖此文件（extension 目录受保护）
-*****************************************************************************************/
+ */
-//此js文件是用来自定义扩展业务代码，在当前[表.vue]文件中也可以实现业务处理
+import VideoDeviceActions from '@/views/warehouse/device_manager/base_device/components/VideoDeviceActions.vue'
+import IoTDeviceActions from '@/views/warehouse/device_manager/base_device/components/IoTDeviceActions.vue'
+import AccessDeviceActions from '@/views/warehouse/device_manager/base_device/components/AccessDeviceActions.vue'
+import BarrierDeviceActions from '@/views/warehouse/device_manager/base_device/components/BarrierDeviceActions.vue'
+import AlarmDeviceActions from '@/views/warehouse/device_manager/base_device/components/AlarmDeviceActions.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'
+import DeviceEditDialog from '@/views/warehouse/device_manager/base_device/components/DeviceEditDialog.vue'
+import MapBindingPanel from '@/views/warehouse/device_manager/base_device/components/MapBindingPanel.vue'
 
-let extension = {
+// 按 DeviceGroup 映射操作组件
+const actionMap = {
+  '视频设备': 'VideoDeviceActions',
+  'IoT设备': 'IoTDeviceActions',
+  '门禁设备': 'AccessDeviceActions',
+  '道闸设备': 'BarrierDeviceActions',
+  '报警设备': 'AlarmDeviceActions',
+}
+
+export default {
   components: {
-    //查询界面扩展组件
+    VideoDeviceActions, IoTDeviceActions, AccessDeviceActions, BarrierDeviceActions, AlarmDeviceActions,
-    gridHeader: '',
+    DeviceLivePreview, PtzControlPanel, RealtimeDataPanel, DeviceControlPanel, DeviceEditDialog, MapBindingPanel
-    gridBody: '',
-    gridFooter: '',
-    //新建、编辑弹出框扩展组件
-    modelHeader: '',
-    modelBody: '',
-    modelRight: '',
-    modelFooter: ''
   },
-  tableAction: '', //指定某张表的权限(这里填写表名,默认不用填写)
-  buttons: { view: [], box: [], detail: [] }, //扩展的按钮
-  methods: {
-     //下面这些方法可以保留也可以删除
-    onInit() {  //框架初始化配置前，
-        //示例：在按钮的最前面添加一个按钮
-        //   this.buttons.unshift({  //也可以用push或者splice方法来修改buttons数组
-        //     name: '按钮', //按钮名称
-        //     icon: 'el-icon-document', //按钮图标：https://element.eleme.cn/#/zh-CN/component/icon
-        //     type: 'primary', //按钮样式:https://element-plus.gitee.io/zh-CN/component/button.html
-        //     //color:"#eee",//自定义按钮颜色
-        //     onClick: function () {
-        //       this.$Message.success('点击了按钮');
-        //     }
-        //   });
 
-        //示例：设置修改新建、编辑弹出框字段标签的长度
+  data() {
-        // this.boxOptions.labelWidth = 150;
+    return {
+      currentDevice: null,
+      dialogs: { preview: false, ptz: false, realtime: false, control: false, edit: false, map: false }
+    }
+  },
+
+  // 替换框架操作列
+  slots: {
+    'col-action': (h, { row }) => {
+      const compName = actionMap[row.deviceGroup]
+      if (!compName) return null
+      // 渲染自定义按钮组，绑定事件
+      return h(compName, {
+        props: { row },
+        on: {
+          preview: () => this.openDialog('preview', row),
+          ptz: () => this.openDialog('ptz', row),
+          playback: () => console.log('playback', row),
+          snapshot: () => console.log('snapshot', row),
+          syncChannels: () => console.log('syncChannels', row),
+          realtime: () => this.openDialog('realtime', row),
+          control: () => this.openDialog('control', row),
+          refresh: () => this.$emit('refresh'),
+          alarms: () => console.log('alarms', row),
+        }
+      })
+    }
+  },
+
+  methods: {
+    openDialog(name, device) {
+      this.currentDevice = device
+      this.dialogs[name] = true
     },
-    onInited() {
+    onRefresh() {
-      //框架初始化配置后
+      this.$emit('refresh')
-      //如果要配置明细表,在此方法操作
-      //this.detailOptions.columns.forEach(column=>{ });
-    },
-    searchBefore(param) {
-      //界面查询前,可以给param.wheres添加查询参数
-      //返回false，则不会执行查询
-      return true;
-    },
-    searchAfter(result) {
-      //查询后，result返回的查询数据,可以在显示到表格前处理表格的值
-      return true;
-    },
-    addBefore(formData) {
-      //新建保存前formData为对象，包括明细表，可以给给表单设置值，自己输出看formData的值
-      return true;
-    },
-    updateBefore(formData) {
-      //编辑保存前formData为对象，包括明细表、删除行的Id
-      return true;
-    },
-    rowClick({ row, column, event }) {
-      //查询界面点击行事件
-      // this.$refs.table.$refs.table.toggleRowSelection(row); //单击行时选中当前行;
-    },
-    modelOpenAfter(row) {
-      //点击编辑、新建按钮弹出框后，可以在此处写逻辑，如，从后台获取数据
-      //(1)判断是编辑还是新建操作： this.currentAction=='Add';
-      //(2)给弹出框设置默认值
-      //(3)this.editFormFields.字段='xxx';
-      //如果需要给下拉框设置默认值，请遍历this.editFormOptions找到字段配置对应data属性的key值
-      //看不懂就把输出看：console.log(this.editFormOptions)
     }
   }
-};
+}
-export default extension;

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

@@ -0,0 +1,82 @@
+<!--
+ *Author：jxx
+ *Date：{Date}
+ *Contact：283591387@qq.com
+ *业务请在@/extension/warehouse/base_device.jsx或base_device.vue文件编写
+ *新版本支持vue或【表.jsx]文件编写业务,文档见:https://doc.volcore.xyz/docs/view-grid、https://doc.volcore.xyz/docs/web
+ -->
+<template>
+    <view-grid ref="grid"
+               :columns="columns"
+               :detail="detail"
+               :details="details"
+               :editFormFields="editFormFields"
+               :editFormOptions="editFormOptions"
+               :searchFormFields="searchFormFields"
+               :searchFormOptions="searchFormOptions"
+               :table="table"
+               :extend="extend"
+               :onInit="onInit"
+               :onInited="onInited"
+               :searchBefore="searchBefore"
+               :searchAfter="searchAfter"
+               :addBefore="addBefore"
+               :updateBefore="updateBefore"
+               :rowClick="rowClick"
+               :modelOpenBefore="modelOpenBefore"
+               :modelOpenAfter="modelOpenAfter">
+        <!-- 自定义组件数据槽扩展，更多数据槽slot见文档 -->
+        <template #gridHeader>
+        </template>
+    </view-grid>
+</template>
+<script setup lang="jsx">
+    import extend from "@/extension/warehouse/base_device.jsx";
+    import viewOptions from './base_device/options.js'
+    import { ref, reactive, getCurrentInstance, watch, onMounted } from "vue";
+    const grid = ref(null);
+    const { proxy } = getCurrentInstance()
+    //http请求，proxy.http.post/get
+    const { table, editFormFields, editFormOptions, searchFormFields, searchFormOptions, columns, detail, details } = reactive(viewOptions())
+
+    let gridRef;//对应[表.jsx]文件中this.使用方式一样
+    //生成对象属性初始化
+    const onInit = async ($vm) => {
+        gridRef = $vm;
+        //与jsx中的this.xx使用一样，只需将this.xx改为gridRef.xx
+        //更多属性见：https://doc.volcore.xyz/docs/view-grid
+    }
+    //生成对象属性初始化后,操作明细表配置用到
+    const onInited = async () => {
+    }
+    const searchBefore = async (param) => {
+        //界面查询前,可以给param.wheres添加查询参数
+        //返回false，则不会执行查询
+        return true;
+    }
+    const searchAfter = async (rows, result) => {
+        return true;
+    }
+    const addBefore = async (formData) => {
+        //新建保存前formData为对象，包括明细表，可以给给表单设置值，自己输出看formData的值
+        return true;
+    }
+    const updateBefore = async (formData) => {
+        //编辑保存前formData为对象，包括明细表、删除行的Id
+        return true;
+    }
+    const rowClick = ({ row, column, event }) => {
+        //查询界面点击行事件
+        // grid.value.toggleRowSelection(row); //单击行时选中当前行;
+    }
+    const modelOpenBefore = async (row) => {//弹出框打开后方法
+        return true;//返回false，不会打开弹出框
+    }
+    const modelOpenAfter = (row) => {
+        //弹出框打开后方法,设置表单默认值,按钮操作等
+    }
+    //监听表单输入，做实时计算
+    //watch(() => editFormFields.字段,(newValue, oldValue) => {	})
+    //对外暴露数据
+    defineExpose({})
+</script>