Merge branch 'sqy_dev' into 'main'

feat:"转换脚本开发完成",fix:“菜单显示不正确修复”，feat:所属网关字段，图片样式调整

See merge request huang/yun-teng-iot-front!131

@@ -289,10 +289,8 @@
         }
         const content = editor?.getContent() ?? '';
         const val =
-          content?.replace(
-            getUploadingImgName(name),
-            `<img src="${url}" style="height:6rem;width:6rem"/>`
-          ) ?? '';
+          content?.replace(getUploadingImgName(name), `<img src="${url}" style="width:8rem"/>`) ??
+          '';
         setValue(editor, val);
       }
 

@@ -64,14 +64,14 @@ export const step1Schemas: FormSchema[] = [
 
         onChange() {
           setFieldsValue({
-            gateWayDeviceId: null,
+            gateWayId: null,
           });
         },
       };
     },
   },
   {
-    field: 'gateWayDeviceId',
+    field: 'gateWayId',
     label: '网关设备',
     required: true,
     component: 'ApiSelect',

@@ -24,6 +24,11 @@ export const descSchema: DescItem[] = [
     label: '设备配置',
   },
   {
+    field: 'gatewayName',
+    label: '所属网关',
+    show: (data) => !!data.gatewayName,
+  },
+  {
     field: 'deviceType',
     label: '设备类型',
     render: (text) => {
@@ -37,6 +42,7 @@ export const descSchema: DescItem[] = [
   {
     field: 'description',
     label: '描述',
+    span: 2,
   },
 ];
 

@@ -2,7 +2,7 @@
   <div class="tabs-detail">
     <div v-if="deviceDetail?.deviceInfo?.avatar">
       <p>设备图片</p>
-      <Image :src="deviceDetail.deviceInfo.avatar" :width="100" />
+      <Image :src="deviceDetail.deviceInfo.avatar" :width="200" />
     </div>
     <div>
       <div class="flex" style="align-items: center">

@@ -210,7 +210,7 @@
       async function handleEdit(record: Recordable) {
         if (record.deviceType === 'SENSOR') {
           const res = await getGATEWAY(record.tbDeviceId);
-          Reflect.set(record, 'gateWayDeviceId', res.id);
+          Reflect.set(record, 'gateWayId', res.id);
         }
         openModal(true, {
           isUpdate: true,

@@ -38,6 +38,7 @@
   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();
@@ -66,9 +67,9 @@
       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};');

@@ -98,8 +98,10 @@
   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';
-
+  import 'ace-builds/src-noconflict/ext-language_tools.js'; //语言提示
+  import { beautify } from 'ace-builds/src-noconflict/ext-beautify.js'; //格式化
+  // !!!important 重要，配置ace编辑器的错误提示，基础路径。否则会加载不到相关web Worker,就没有syntax validation提示
+  ace.config.set('basePath', 'https://cdn.jsdelivr.net/npm/ace-builds@1.4.14/src-noconflict/');
   defineComponent({
     Tooltip,
   });
@@ -141,11 +143,8 @@
       theme: 'ace/theme/chrome', // 默认设置的主题
       mode: 'ace/mode/javascript', // 默认设置的语言模式
       tabSize: 2, // 制表符设置为 2 个空格大小
-    });
-    aceEditor.value.setOptions({
-      enableBasicAutocompletion: true,
-      enableSnippets: true,
-      enableLiveAutocompletion: true,
+      enableBasicAutocompletion: true, //补全
+      enableLiveAutocompletion: true, //
     });
   }
   const mataData: any = {
@@ -194,12 +193,12 @@
   };
 
   // 测试
-  const handleTestFunc = () => {
+  const handleTestFunc = async () => {
     // 收集3方数据
-    const msg = JsonEditor.value.get();
-    const metadata = mataData;
-    const jsCode = aceEditor.value.getValue();
     try {
+      const msg = JsonEditor.value.get();
+      const metadata = mataData;
+      const jsCode = aceEditor.value.getValue();
       // 执行动态Javascript脚本
       let result = Function('msg', 'metadata', jsCode)(msg, metadata);
       // 设置输出值

@@ -11,7 +11,7 @@
       <template #menu="{ model, field }">
         <BasicTree
           v-if="treeData.length > 0"
-          ref="tree"
+          ref="treeRef"
           v-model:value="model[field]"
           :treeData="treeData"
           :replaceFields="{ title: 'menuName' }"
@@ -19,7 +19,6 @@
           checkable
           toolbar
           title="菜单分配"
-          @check="handleCheckClick"
           :defaultExpandAll="true"
         />
       </template>
@@ -27,7 +26,7 @@
   </BasicDrawer>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, computed, unref, getCurrentInstance } from 'vue';
+  import { defineComponent, ref, computed, unref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { formSchema } from './role.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
@@ -47,20 +46,20 @@
     components: { BasicDrawer, BasicForm, BasicTree },
     emits: ['success', 'register'],
     setup(_, { emit }) {
-      const { proxy } = getCurrentInstance();
       const isUpdate = ref<boolean>(true);
       const treeData = ref<TreeItem[]>([]);
       const roleMenus = ref<string[]>([]);
-      const allCheckedKeys = ref<string[]>([]);
       const roleId = ref<string>('');
+      const treeRef = ref();
       const [registerForm, { resetFields, setFieldsValue, validate }] = useForm({
-        labelWidth: 90,
+        labelWidth: 100,
         schemas: formSchema,
         showActionButtonGroup: false,
       });
 
+      // 递归函数，将RouteItem里面的字段换名称
       function processChildren(items: RouteItem[]) {
-        items.map((item) => {
+        items.forEach((item) => {
           item.menuName = t(item.meta.title);
           item.icon = item.meta.icon;
           item.key = item.id;
@@ -83,43 +82,31 @@
       const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
         resetFields();
         roleId.value = '';
-        setDrawerProps({ confirmLoading: false });
         isUpdate.value = data.isUpdate;
         // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
-        if (unref(treeData).length === 0) {
+        if (!unref(treeData).length) {
           // 获取全部的菜单
           const menuListModel = await getMenuList();
           processChildren(menuListModel);
-          let treeValues: TreeItem[] = [];
-          menuListModel.map((item) => {
-            const data = {
-              menuName: t(item.meta.title),
-              icon: item.meta.icon,
-              key: item.id,
-              children: item.children as any as TreeItem[],
-            };
-            treeValues.push(data);
-          });
-          treeData.value = treeValues;
+          treeData.value = menuListModel;
+          // console.log(treeData.value);
         }
 
+        // 更新
         if (unref(isUpdate)) {
-          if (data.record) {
-            //通过角色id去获取角色对应的菜单的ids
-            roleMenus.value = await getMenusIdsByRoleId(data.record.id);
-            treeData.value.map((m) => {
-              roleMenus.value.map((m1) => {
-                if (m.key === m1 && m.children.length !== 0) {
-                  proxy.useChildrenIdsRemoveParentId(m1, roleMenus.value);
-                }
-              });
+          //通过角色id去获取角色对应的菜单的ids
+          roleMenus.value = await getMenusIdsByRoleId(data.record.id);
+          // TODO: 此处算法还可以优化一下。 循环跑了200+次
+          treeData.value.map((m) => {
+            roleMenus.value.map((m1) => {
+              if (m.key === m1 && m.children.length) {
+                useChildrenIdsRemoveParentId(m1, roleMenus.value);
+              }
             });
-            proxy.$refs.tree.setCheckedKeys(roleMenus.value);
-            roleId.value = data.record.id;
-          }
-          setFieldsValue({
-            ...data.record,
           });
+          treeRef.value.setCheckedKeys(roleMenus.value);
+          roleId.value = data.record.id;
+          setFieldsValue(data.record);
         }
       });
 
@@ -134,7 +121,7 @@
             name: values.name,
             remark: values.remark,
             status: values.status,
-            menu: allCheckedKeys.value as string[],
+            menu: treeRef.value.getCheckedKeys(),
           };
           saveOrUpdateRoleInfoWithMenu(req).then(() => {
             closeDrawer();
@@ -144,30 +131,15 @@
           setDrawerProps({ confirmLoading: false });
         }
       }
-      // Tree check事件
-      const handleCheckClick = (_, e) => {
-        allCheckedKeys.value = [];
-        let nodes = e.checkedNodes;
-        let halfKeys = e.halfCheckedKeys;
-        nodes.map((node) => {
-          if (node.key != halfKeys[0] && halfKeys.length == []) {
-            allCheckedKeys.value.push(node.key);
-          } else {
-            allCheckedKeys.value.push(node.key);
-          }
-        });
-        allCheckedKeys.value.push(...halfKeys);
-      };
       return {
-        allCheckedKeys,
         registerDrawer,
         registerForm,
         getTitle,
         handleSubmit,
         treeData,
         roleMenus,
-        handleCheckClick,
         useChildrenIdsRemoveParentId,
+        treeRef,
       };
     },
   });

@@ -34,10 +34,8 @@
 </template>
 <script lang="ts">
   import { defineComponent } from 'vue';
-
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
   import { delRole, getRoleListByPage } from '/@/api/system/system';
-
   import { useDrawer } from '/@/components/Drawer';
   import RoleDrawer from './RoleDrawer.vue';
   import { columns, searchFormSchema } from './role.data';

@@ -177,12 +177,9 @@ export const formSchema: FormSchema[] = [
     },
   },
   {
-    label: ' ',
+    label: '',
     field: 'menu',
     slot: 'menu',
     component: 'Input',
-    componentProps: {
-      maxLength: 255,
-    },
   },
 ];