[Feat 0000] 可配置首页添加模块预览功能

src/views/vent/deviceManager/configurationTable/ModulePlain.vue

@@ -0,0 +1,40 @@
+<template>
+  <div :style="style">
+    <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event" />
+    <Content :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }" :moduleData="moduleData" :data="selectedData" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import Header from '/@/views/vent/home/configurable/components/header.vue';
+  import Content from '/@/views/vent/home/configurable/components/content.vue';
+  // import ModuleLeft from './original/moduleLeft.vue';
+  // import ModuleBottom from './original/moduleBottom.vue';
+  import { computed, ref } from 'vue';
+  // import { ModuleProps } from '../types';
+
+  const props = defineProps<{
+    /** 配置的详细模块信息 */
+    moduleData: any;
+    /** 配置的详细样式信息 */
+    showStyle: any;
+    /** 该模块配置中的设备标识符 */
+    deviceType: string;
+    /** api返回的数据 */
+    data: any;
+    moduleName: string;
+    visible: boolean;
+  }>();
+  defineEmits(['close', 'click']);
+
+  const { header } = props.moduleData;
+  const selectedData = ref();
+
+  const style = computed(() => {
+    const size = props.showStyle.size;
+    const position = props.showStyle.position;
+    return size + position + 'pointer-events: auto;';
+  });
+</script>
+<style lang="less" scoped>
+  @import '/@/design/theme.less';
+</style>

src/views/vent/deviceManager/configurationTable/index.vue

@@ -22,7 +22,21 @@
   </BasicTable>
   <DeviceModal @register="registerModal" @save-or-update="saveOrUpdateHandler" :showTab="false" :deviceType="deviceType" />
   <BasicModal @register="registerConfigModal" @ok="handleUpdate" title="配置文件编辑" defaultFullscreen>
-    <CodeEditor v-model:value="configJSON" />
+    <a-row class="h-full">
+      <a-col class="h-full" :span="12">
+        <CodeEditor class="h-100%" :value="configJSON" @change="editorChangeHandler" />
+      </a-col>
+      <a-col class="justify-center items-center" style="display: flex" :span="12">
+        <ModulePlain
+          :device-type="configJSON!.deviceType"
+          :module-data="configJSON!.moduleData"
+          :module-name="configJSON!.moduleName"
+          :show-style="configJSON!.showStyle"
+          :data="{}"
+          :visible="true"
+        />
+      </a-col>
+    </a-row>
   </BasicModal>
   <BasicModal @register="registerPageTypeModal" @ok="handleUpdatePageType" title="一键修改模块版本">
     <BasicForm @register="registerForm" />
@@ -48,13 +62,15 @@
   import _ from 'lodash';
   /** @ts-ignore-next-line */
   import helpContext from './types?raw';
+  import ModulePlain from './ModulePlain.vue';
+  import { Config } from './types';
 
   const formData = reactive<any>({});
   const isUpdate = ref(false);
   const deviceType = ref('');
   const formSchemaData = ref(formSchema);
   // const pageType = ref('');
-  const configJSON = ref('');
+  const configJSON = ref<Config>();
 
   provide('formSchema', formSchemaData);
   provide('isUpdate', isUpdate);
@@ -167,7 +183,7 @@
     try {
       saveOrUpdateHandler({
         id: formData.id,
-        ...JSON.parse(configJSON.value),
+        ...configJSON.value,
       })
         .then(() => {
           message.success('保存成功');
@@ -239,6 +255,10 @@
       console.error(e);
     }
   }
+
+  function editorChangeHandler(val) {
+    configJSON.value = JSON.parse(val);
+  }
 </script>
 
 <style scoped lang="less">