'fix:修改问题,feat:新增转换脚本页面'

@@ -39,6 +39,7 @@
     "@logicflow/extension": "^0.6.9",
     "@vueuse/core": "^5.3.0",
     "@zxcvbn-ts/core": "^1.0.0-beta.0",
+    "ace-builds": "^1.4.14",
     "ant-design-vue": "2.2.6",
     "axios": "^0.21.1",
     "codemirror": "^5.62.2",
@@ -60,12 +61,10 @@
     "tinymce": "^5.8.2",
     "vditor": "^3.8.6",
     "vue": "3.2.2",
-    "vue-baidu-map": "^0.21.22",
     "vue-i18n": "9.1.7",
     "vue-json-pretty": "^2.0.4",
     "vue-router": "^4.0.11",
     "vue-types": "^4.0.3",
-    "vue3-ace-editor": "^2.2.2",
     "xlsx": "^0.17.0"
   },
   "devDependencies": {

+import { defHttp } from '/@/utils/http/axios';
+import { TTransFormScriptParams } from './model/transformScriptModel';
+enum TransformScriptApi {
+  TransformScript_Page = '/convert',
+  TransformScript_Delete_Edit = '/convert/js',
+  TransformScript_ENABLE_OR_DISABLED = '/convert/update/js',
+}
+
+// 脚本转换分页查询
+export const getConvertApi = (params: TTransFormScriptParams) => {
+  return defHttp.get({
+    url: TransformScriptApi.TransformScript_Page,
+    params: {
+      ...params,
+      nodeType: 0,
+    },
+  });
+};
+
+export const deleteTransformApi = (ids: string[]) => {
+  return defHttp.delete({
+    url: TransformScriptApi.TransformScript_Delete_Edit,
+    data: {
+      ids,
+    },
+  });
+};
+export const createOrEditTransformScriptApi = (data) => {
+  return defHttp.post({
+    url: TransformScriptApi.TransformScript_Delete_Edit,
+    data,
+  });
+};
+
+export const updateTransformScriptStatusApi = (status: number, id: string) => {
+  return defHttp.post({
+    url: TransformScriptApi.TransformScript_ENABLE_OR_DISABLED,
+    data: {
+      convertIds: ['string'],
+      nodeType: 0,
+      status,
+      id,
+    },
+  });
+};

+import { BasicPageParams } from '/@/api/model/baseModel';
+
+export type TransFormScriptParams = {
+  nodeType: 0 | 1;
+  name?: string;
+  status?: string;
+};
+export type TTransFormScriptParams = BasicPageParams & TransFormScriptParams;

@@ -223,7 +223,7 @@
           const point = new BMap.Point(longitude, latitude);
           let options = {
             width: 300, // 信息窗口宽度
-            height: 220, // 信息窗口高度
+            height: 230, // 信息窗口高度
           };
           map.centerAndZoom(point, 15);
           map.enableScrollWheelZoom(true);

@@ -11,12 +11,7 @@
             :customRequest="customUpload"
             :before-upload="beforeUpload"
           >
-            <img
-              v-if="devicePic"
-              :src="devicePic"
-              alt="avatar"
-              style="width: 6.25rem; height: 6.25rem"
-            />
+            <img v-if="devicePic" :src="devicePic" alt="avatar" />
             <div v-else>
               <PlusOutlined />
               <div class="ant-upload-text">图片上传</div>

@@ -93,7 +93,6 @@
       },
     },
     setup(props) {
-      console.log(props.deviceDetail);
       const [register] = useDescription({
         layout: 'vertical',
         schema: descSchema,

+import { BasicColumn, FormSchema } from '/@/components/Table';
+import { h } from 'vue';
+import { Tag, Switch } from 'ant-design-vue';
+import { useMessage } from '/@/hooks/web/useMessage';
+import { updateTransformScriptStatusApi } from '/@/api/device/TransformScriptApi';
+export const columns: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+    width: 100,
+  },
+  {
+    title: '用途',
+    dataIndex: 'type',
+    width: 200,
+    customRender: () => h(Tag, { color: 'blue' }, () => '消息格式化'),
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 120,
+    customRender: ({ record }) => {
+      if (!Reflect.has(record, 'pendingStatus')) {
+        record.pendingStatus = false;
+      }
+      return h(Switch, {
+        checked: record.status === 1,
+        checkedChildren: '已启用',
+        unCheckedChildren: '已禁用',
+        loading: record.pendingStatus,
+        onChange(checked: boolean) {
+          record.pendingStatus = true;
+          const newStatus = checked ? 1 : 0;
+          const { createMessage } = useMessage();
+          updateTransformScriptStatusApi(newStatus, record.id)
+            .then(() => {
+              record.status = newStatus;
+              createMessage.success(`${record.status ? '启用' : '禁用'}成功`);
+            })
+            .finally(() => {
+              record.pendingStatus = false;
+            });
+        },
+      });
+    },
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: 180,
+  },
+];
+
+export const searchFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '名称',
+    component: 'Input',
+    colProps: { span: 6 },
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入名称',
+    },
+  },
+  {
+    field: 'status',
+    label: '状态',
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择状态',
+      options: [
+        { label: '已启用', value: '1' },
+        { label: '未启用', value: '0' },
+      ],
+    },
+    colProps: { span: 6 },
+  },
+];
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '名称',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      maxLength: 36,
+      placeholder: '请输入名称',
+    },
+  },
+  {
+    field: 'remark',
+    label: '说明',
+    component: 'InputTextArea',
+    componentProps: {
+      maxLength: 255,
+      autoSize: { minRows: 5, maxRows: 8 },
+      placeholder: '请输入说明',
+    },
+  },
+  {
+    field: 'function',
+    label: '',
+    component: 'Input',
+    slot: 'function',
+  },
+  {
+    field: 'id',
+    label: 'id',
+    component: 'Input',
+    ifShow: false,
+  },
+];

+<template>
+  <div>
+    <BasicDrawer
+      v-bind="$attrs"
+      :title="getTitle"
+      @register="register"
+      width="500px"
+      showFooter
+      @ok="handleSubmit"
+    >
+      <BasicForm @register="registerForm">
+        <template #function>
+          <Card title="转换函数" :bodyStyle="{ padding: 0, height: '280px' }">
+            <template #extra>
+              <Tag color="blue">Transform Function</Tag>
+              <a-button @click="handleFormat" size="small">格式化</a-button>
+            </template>
+            <div class="ml-8">function Transform(msg, metadata) {</div>
+            <div ref="aceRef" class="overflow-hidden"></div>
+            <div class="ml-7">}</div>
+          </Card>
+          <a-button type="primary" class="mt-4" @click="testTransformFunc">测试转换功能</a-button>
+        </template>
+      </BasicForm>
+    </BasicDrawer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { useDrawerInner, BasicDrawer } from '/@/components/Drawer/index';
+  import { useForm, BasicForm } from '/@/components/Form/index';
+  import { formSchema } from '../config/config.data.ts';
+  import { Card, Tag } from 'ant-design-vue';
+  import { createOrEditTransformScriptApi } from '/@/api/device/TransformScriptApi';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import ace from 'ace-builds';
+  import 'ace-builds/src-noconflict/theme-chrome'; // 默认设置的主题
+  import 'ace-builds/src-noconflict/mode-javascript'; // 默认设置的语言模式
+  import { beautify } from 'ace-builds/src-noconflict/ext-beautify.js';
+  const emit = defineEmits(['register', 'isStatus', 'success']);
+  const isUpdate = ref(false);
+  const aceEditor = ref();
+  const aceRef = ref();
+  const getTitle = computed(() => (isUpdate.value ? '编辑转换脚本' : '新增转换脚本'));
+  const [register, { closeDrawer }] = useDrawerInner((data) => {
+    resetFields();
+    isUpdate.value = data.isUpdate;
+    initEditor(data.record?.configuration.jsScript);
+    if (isUpdate.value) {
+      setFieldsValue(data.record);
+    }
+  });
+  const [registerForm, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
+    showActionButtonGroup: false,
+    colProps: { span: 24 },
+    schemas: formSchema,
+  });
+
+  const initEditor = (jsScript?: string) => {
+    aceEditor.value = ace.edit(aceRef.value, {
+      maxLines: 12, // 最大行数，超过会自动出现滚动条
+      minLines: 12, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
+      fontSize: 14, // 编辑器内字体大小
+      theme: 'ace/theme/chrome', // 默认设置的主题
+      mode: 'ace/mode/javascript', // 默认设置的语言模式
+      tabSize: 2, // 制表符设置为 4 个空格大小
+    });
+    aceEditor.value.setOptions({
+      enableBasicAutocompletion: true,
+      enableSnippets: true,
+      enableLiveAutocompletion: true,
+    });
+    aceEditor.value.setValue(jsScript ?? 'return {msg: msg, metadata: metadata};');
+    beautify(aceEditor.value.session);
+  };
+
+  const testTransformFunc = () => {
+    closeDrawer();
+    const jsCode = aceEditor.value.getValue();
+    emit('isStatus', { status: 1, jsCode });
+  };
+  const handleSubmit = async () => {
+    const fieldsValue = getFieldsValue();
+    try {
+      await createOrEditTransformScriptApi({
+        configuration: {
+          jsScript: aceEditor.value.getValue(),
+        },
+        type: 'org.thingsboard.rule.engine.transform.TbTransformMsgNode',
+        ...fieldsValue,
+      });
+      closeDrawer();
+      emit('success');
+      const { createMessage } = useMessage();
+      createMessage.success('保存成功');
+    } catch (e) {
+      const { createMessage } = useMessage();
+      createMessage.success('保存失败');
+    }
+  };
+  const handleFormat = () => {
+    beautify(aceEditor.value.session);
+  };
+  defineExpose({ aceEditor });
+</script>

+<template>
+  <div>
+    <PageWrapper title="测试脚本功能" class="pl-4 pr-4 pt-4" :contentStyle="{ display: 'none' }" />
+    <div class="h-full flex p-4">
+      <div class="flex flex-col w-1/2">
+        <div class="flex-1 mr-4 mb-4">
+          <Card title="消息" :bodyStyle="cardStyle">
+            <template #extra>
+              <Tag color="blue">Message</Tag>
+              <a-button @click="handleFormatJson" size="small">格式化</a-button>
+              <a-button @click="handleMiniJson" size="small" class="ml-2">收起</a-button>
+            </template>
+            <div ref="jsoneditorRef" style="height: 100%"></div>
+          </Card>
+        </div>
+        <div class="flex-1 mr-4">
+          <Card title="转换函数" :bodyStyle="cardStyle">
+            <template #extra>
+              <Tag color="blue">Transform Function</Tag>
+              <a-button @click="handleFormatJScript" size="small">格式化</a-button>
+
+              <Tooltip title="帮助文档" @click="openModal">
+                <QuestionCircleOutlined class="ml-2" style="font-size: 1rem" />
+              </Tooltip>
+            </template>
+            <div class="ml-8">function Transform(msg, metadata) {</div>
+            <div ref="aceRef" style="height: calc(100% - 44px)"></div>
+            <div class="ml-7">}</div>
+          </Card>
+        </div>
+      </div>
+      <div class="flex flex-col w-1/2">
+        <div class="flex-1 mb-4">
+          <Card title="元数据" :bodyStyle="cardStyle">
+            <template #extra>
+              <Tag color="blue">Meta Data</Tag>
+            </template>
+            <Description @register="registerDesc" />
+          </Card>
+        </div>
+        <div class="flex-1">
+          <Card title="输出" :bodyStyle="cardStyle">
+            <template #extra>
+              <Tag color="blue">Output</Tag>
+              <a-button @click="handleFormatOutPutJson" size="small">格式化</a-button>
+              <a-button @click="handleCompactJson" size="small" class="ml-2">收起</a-button>
+            </template>
+            <div class="ml-8 opacity-0">site</div>
+            <div ref="outputRef" style="height: calc(100% - 44px)"></div>
+            <div class="ml-7 opacity-0">site</div>
+          </Card>
+        </div>
+      </div>
+    </div>
+    <div class="flex justify-between pl-4 pr-4">
+      <div>
+        <a-button class="" type="primary" @click="handleTestFunc"> 测试</a-button>
+      </div>
+      <div>
+        <a-button class="ml-4" @click="handleCancel"> 取消</a-button>
+        <a-button class="ml-4" type="primary" @click="handleOk"> 保存</a-button>
+      </div>
+    </div>
+    <BasicModal
+      @register="registerModal"
+      title="转换消息功能"
+      :footer="null"
+      width="800px"
+      centered
+      v-bind="$attrs"
+    >
+      <h2> function Transform(msg,metadata): {msg: object, metadata: object} </h2>
+      <li> 将输入消息、元数据转换为输出消息的 JavaScript 函数 </li>
+      <h2>参数:</h2>
+      <ul>
+        <li>msg: {[key: string]: any} - 是消息有效负载键/值对象。</li>
+        <li>metadata: {[key: string]: string} - 是消息元数据键/值映射，其中键和值都是字符串。</li>
+      </ul>
+      <h2>返回值:</h2>
+      <ul>
+        <li> { msg?: {[key: string]: any}, metadata?: {[key: string]: string} } </li>
+        <li> 结果对象中的所有字段都是可选的，如果未指定，将从原始消息中获取。 </li>
+      </ul>
+    </BasicModal>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref, onMounted, defineComponent } from 'vue';
+  import { Card, Tag, Tooltip } from 'ant-design-vue';
+  import { PageWrapper } from '/@/components/Page';
+  import { Description, DescItem, useDescription } from '/@/components/Description/index';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import { QuestionCircleOutlined } from '@ant-design/icons-vue';
+  import { BasicModal, useModal } from '/@/components/Modal/index';
+
+  import jsoneditor from 'jsoneditor';
+  import 'jsoneditor/dist/jsoneditor.min.css';
+  import ace from 'ace-builds';
+  import 'ace-builds/src-noconflict/theme-chrome'; // 默认设置的主题
+  import 'ace-builds/src-noconflict/mode-javascript'; // 默认设置的语言模式
+  import { beautify } from 'ace-builds/src-noconflict/ext-beautify.js';
+
+  defineComponent({
+    Tooltip,
+  });
+
+  const jsonValue = ref({
+    temperature: 22.4,
+    humidity: 78,
+  });
+  const cardStyle = { padding: 0, height: '280px' };
+
+  // json 以及初始化JSON
+  const jsoneditorRef = ref();
+  const JsonEditor = ref();
+  const outputRef = ref();
+  const outputEditor = ref();
+  const aceEditor = ref();
+  const aceRef = ref();
+  const emit = defineEmits(['isStatus']);
+  function initEditor() {
+    let options = {
+      mode: 'code',
+      mainMenuBar: false,
+      statusBar: false,
+      onError: function (err) {
+        alert('EF1 ->' + err.toString());
+      },
+    };
+    let editor = new jsoneditor(jsoneditorRef.value, options);
+    editor.set(jsonValue.value);
+    JsonEditor.value = editor;
+    let outEditor = new jsoneditor(outputRef.value, options);
+    outEditor.set(true);
+    outputEditor.value = outEditor;
+
+    aceEditor.value = ace.edit(aceRef.value, {
+      maxLines: 12, // 最大行数，超过会自动出现滚动条
+      minLines: 12, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
+      fontSize: 14, // 编辑器内字体大小
+      theme: 'ace/theme/chrome', // 默认设置的主题
+      mode: 'ace/mode/javascript', // 默认设置的语言模式
+      tabSize: 2, // 制表符设置为 2 个空格大小
+    });
+    aceEditor.value.setOptions({
+      enableBasicAutocompletion: true,
+      enableSnippets: true,
+      enableLiveAutocompletion: true,
+    });
+  }
+  const mataData: any = {
+    deviceName: 'Test Device',
+    deviceType: 'default',
+    ts: Date.now(),
+  };
+  const schema: DescItem[] = [
+    {
+      field: 'deviceName',
+      label: 'deviceName',
+    },
+    {
+      field: 'deviceType',
+      label: 'deviceType',
+    },
+    {
+      field: 'ts',
+      label: 'ts',
+    },
+  ];
+  const [registerDesc] = useDescription({
+    column: 1,
+    data: mataData,
+    schema,
+  });
+  // 格式化json
+  const handleFormatJson = () => {
+    JsonEditor.value.repair();
+    JsonEditor.value.format();
+  };
+  // 迷你json
+  const handleMiniJson = () => {
+    JsonEditor.value.repair();
+    JsonEditor.value.compact();
+  };
+  // format json
+  const handleFormatOutPutJson = () => {
+    outputEditor.value.repair();
+    outputEditor.value.format();
+  };
+  // 迷你json
+  const handleCompactJson = () => {
+    outputEditor.value.repair();
+    outputEditor.value.compact();
+  };
+
+  // 测试
+  const handleTestFunc = () => {
+    // 收集3方数据
+    const msg = JsonEditor.value.get();
+    const metadata = mataData;
+    const jsCode = aceEditor.value.getValue();
+    try {
+      // 执行动态Javascript脚本
+      let result = Function('msg', 'metadata', jsCode)(msg, metadata);
+      // 设置输出值
+      outputEditor.value.set(result);
+    } catch (e) {
+      console.log(e);
+      const { createMessage } = useMessage();
+      createMessage.error(e.toString());
+    }
+  };
+  const [registerModal, { openModal }] = useModal();
+  const handleCancel = () => {
+    emit('isStatus', { status: 0, emitType: 'cancel' });
+  };
+  const handleOk = () => {
+    emit('isStatus', { status: 0, emitType: 'ok' });
+  };
+  const handleFormatJScript = () => {
+    beautify(aceEditor.value.session);
+  };
+  onMounted(() => {
+    initEditor();
+  });
+  defineExpose({ aceEditor });
+</script>

+<template>
+  <div>
+    <BasicTable @register="registerTable" v-show="isStatus === 0">
+      <template #toolbar>
+        <a-button type="primary" @click="handleCreate"> 新增转换脚本 </a-button>
+        <a-button color="error" @click="handleDeleteOrBatchDelete(null)" :disabled="hasBatchDelete">
+          批量删除
+        </a-button>
+      </template>
+      <template #action="{ record }">
+        <TableAction
+          :actions="[
+            {
+              label: '编辑',
+              icon: 'clarity:note-edit-line',
+
+              onClick: handleEdit.bind(null, record),
+            },
+            {
+              label: '删除',
+              icon: 'ant-design:delete-outlined',
+              ifShow: record.status == 0,
+              color: 'error',
+              popConfirm: {
+                title: '是否确认删除',
+                confirm: handleDeleteOrBatchDelete.bind(null, record),
+              },
+            },
+          ]"
+        />
+      </template>
+    </BasicTable>
+    <ScriptDrawer
+      @register="registerDrawer"
+      @isStatus="handleIsStatus"
+      ref="scriptDrawerRef"
+      @success="handleSuccess"
+    />
+    <TestScript v-show="isStatus === 1" @isStatus="handleCancelStatus" ref="testScriptRef" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { columns, searchFormSchema } from './config/config.data.ts';
+  import { getConvertApi, deleteTransformApi } from '/@/api/device/TransformScriptApi';
+  import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
+  import { useDrawer } from '/@/components/Drawer/index';
+  import ScriptDrawer from './cpns/ScriptDrawer.vue';
+  import TestScript from './cpns/TestScript.vue';
+  const handleSuccess = () => {
+    reload();
+  };
+  const { hasBatchDelete, handleDeleteOrBatchDelete, selectionOptions } = useBatchDelete(
+    deleteTransformApi,
+    handleSuccess
+  );
+  const [registerTable, { reload }] = useTable({
+    api: getConvertApi,
+    title: '转换脚本列表',
+    columns,
+    useSearchForm: true,
+    showTableSetting: true,
+    bordered: true,
+    showIndexColumn: false,
+    formConfig: {
+      labelWidth: 100,
+      schemas: searchFormSchema,
+    },
+    actionColumn: {
+      width: 180,
+      title: '操作',
+      dataIndex: 'action',
+      slots: { customRender: 'action' },
+      fixed: 'right',
+    },
+    ...selectionOptions,
+  });
+  const [registerDrawer, { openDrawer }] = useDrawer({});
+
+  const isStatus = ref(0);
+  const testScriptRef = ref();
+  const scriptDrawerRef = ref();
+  const handleIsStatus = ({ status, jsCode }) => {
+    isStatus.value = status;
+    testScriptRef.value.aceEditor.setValue(jsCode);
+  };
+  const handleCancelStatus = ({ status, emitType }) => {
+    openDrawer(true);
+    isStatus.value = status;
+    if (emitType === 'ok') {
+      const jsCode = testScriptRef.value.aceEditor.getValue();
+      scriptDrawerRef.value.aceEditor.setValue(jsCode);
+    }
+  };
+  const handleCreate = () => {
+    openDrawer(true, {
+      isUpdate: false,
+    });
+  };
+  const handleEdit = (record: Recordable) => {
+    openDrawer(true, { isUpdate: true, record });
+  };
+</script>

@@ -39,12 +39,16 @@
         />
       </template>
     </BasicTable>
-    <NotifyManagerDrawer @register="registerAdd" @success="handleSuccess" />
+    <NotifyManagerDrawer
+      @register="registerAdd"
+      @success="handleSuccess"
+      ref="NotifyManagerDrawerRef"
+    />
     <tableViewChild @register="registerDrawer" />
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { defineComponent, ref } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { useDrawer } from '/@/components/Drawer';
   import NotifyManagerDrawer from './useDrawer.vue';
@@ -52,7 +56,6 @@
   import { columns, searchFormSchema } from './config.d';
   import { notifyGetTableApi, notifyDeleteApi } from '/@/api/stationnotification/stationnotifyApi';
   import { useBatchDelete } from '/@/hooks/web/useBatchDelete';
-
   export default defineComponent({
     name: 'Notificationmannager',
     components: { BasicTable, NotifyManagerDrawer, TableAction, tableViewChild },
@@ -65,6 +68,7 @@
         notifyDeleteApi,
         handleSuccess
       );
+      const NotifyManagerDrawerRef = ref();
       const [registerTable, { reload }] = useTable({
         api: notifyGetTableApi,
         columns,
@@ -90,6 +94,7 @@
         openDrawerAdd(true, {
           isUpdate: false,
         });
+        NotifyManagerDrawerRef.value.setFieldsValue({ content: '' });
       }
 
       const handleView = (record: Recordable) => {
@@ -116,6 +121,7 @@
         handleEdit,
         handleSuccess,
         handleDeleteOrBatchDelete,
+        NotifyManagerDrawerRef,
       };
     },
   });

@@ -113,6 +113,7 @@
         handleSaveDraft,
         registerForm,
         registerDrawer,
+        setFieldsValue,
       };
     },
   });