拉取代码 解决看板修改之间的冲突

@@ -25,6 +25,7 @@ module.exports = defineConfig({
     'plugin:jest/recommended',
     'plugin:jest/recommended',
   ],
   ],
   rules: {
   rules: {
+    'no-console': 'off',
     'vue/script-setup-uses-vars': 'error',
     'vue/script-setup-uses-vars': 'error',
     '@typescript-eslint/ban-ts-ignore': 'off',
     '@typescript-eslint/ban-ts-ignore': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',
     '@typescript-eslint/explicit-function-return-type': 'off',

@@ -126,10 +126,16 @@
         }
         }
       }
       }
 
 
-      async function handleFetch() {
-        if (!props.immediate && unref(isFirstLoad)) {
+      // async function handleFetch() {
+      //   if (!props.immediate && unref(isFirstLoad)) {
+      //     await fetch();
+      //     isFirstLoad.value = false;
+      //   }
+      // }
+
+      async function handleFetch(open) {
+        if (open) {
           await fetch();
           await fetch();
-          isFirstLoad.value = false;
         }
         }
       }
       }
 
 

@@ -174,8 +174,7 @@
   const handleFilterOption = async (inputValue: string, option: Recordable) => {
   const handleFilterOption = async (inputValue: string, option: Recordable) => {
     const { filterOption, fetchSearch } = props;
     const { filterOption, fetchSearch } = props;
     if (filterOption && isFunction(filterOption)) {
     if (filterOption && isFunction(filterOption)) {
-      filterOption?.(inputValue, option);
-      return;
+      return filterOption?.(inputValue, option);
     }
     }
 
 
     if (fetchSearch) {
     if (fetchSearch) {
@@ -189,8 +188,9 @@
     @dropdownVisibleChange="handleFetch"
     @dropdownVisibleChange="handleFetch"
     v-bind="attrs"
     v-bind="attrs"
     @change="handleChange"
     @change="handleChange"
+    @filterOption="handleFilterOption"
     :options="getOptions"
     :options="getOptions"
-    :filterOption="handleFilterOption"
+    optionFilterProp="label"
     :showSearch="true"
     :showSearch="true"
     v-model:value="state"
     v-model:value="state"
     @popup-scroll="debounceHandlePopupScroll"
     @popup-scroll="debounceHandlePopupScroll"

@@ -30,12 +30,14 @@
       modalProps?: ExtractPropTypes<InstanceType<typeof BasicModal>['$props']>;
       modalProps?: ExtractPropTypes<InstanceType<typeof BasicModal>['$props']>;
       transferProps?: ExtractPropTypes<TransferType['$props']>;
       transferProps?: ExtractPropTypes<TransferType['$props']>;
       buttonProps?: ExtractPropTypes<InstanceType<typeof Button>['$props']>;
       buttonProps?: ExtractPropTypes<InstanceType<typeof Button>['$props']>;
+      disabled?: any;
     }>(),
     }>(),
     {
     {
       labelField: 'label',
       labelField: 'label',
       valueField: 'value',
       valueField: 'value',
       buttonName: '选择产品',
       buttonName: '选择产品',
       maxTagLength: 2,
       maxTagLength: 2,
+      disabled: false,
     }
     }
   );
   );
 
 
@@ -146,6 +148,8 @@
   );
   );
 
 
   const handleOpenModal = () => {
   const handleOpenModal = () => {
+    const { disabled } = props;
+    if (disabled) return;
     openModal(true);
     openModal(true);
   };
   };
 
 

@@ -42,6 +42,7 @@
       onValueChange?: (selectedRowkeys: string[]) => any[];
       onValueChange?: (selectedRowkeys: string[]) => any[];
       onRemoveAfter?: (actionType: ActionType) => Promise<any>;
       onRemoveAfter?: (actionType: ActionType) => Promise<any>;
       onSelectedAfter?: (actionType: ActionType) => Promise<any>;
       onSelectedAfter?: (actionType: ActionType) => Promise<any>;
+      disabled?: any;
     }>(),
     }>(),
     {
     {
       buttonName: '选择设备',
       buttonName: '选择设备',
@@ -49,6 +50,7 @@
       maxTagLength: 2,
       maxTagLength: 2,
       labelField: 'label',
       labelField: 'label',
       valueField: 'value',
       valueField: 'value',
+      disabled: false,
     }
     }
   );
   );
 
 
@@ -217,6 +219,8 @@
   }
   }
 
 
   const handleOpenModal = async () => {
   const handleOpenModal = async () => {
+    const { disabled } = props;
+    if (disabled) return;
     openModal(true);
     openModal(true);
     await nextTick();
     await nextTick();
     if (props.value && !props.value.length) {
     if (props.value && !props.value.length) {

@@ -3,24 +3,26 @@
     <a-input
     <a-input
       placeholder="请输入参数key"
       placeholder="请输入参数key"
       v-model:value="param.label"
       v-model:value="param.label"
+      :disabled="disabled"
       style="width: 38%; margin-bottom: 5px"
       style="width: 38%; margin-bottom: 5px"
       @change="emitChange"
       @change="emitChange"
     />
     />
     <a-input
     <a-input
       placeholder="请输入参数value"
       placeholder="请输入参数value"
+      :disabled="disabled"
       v-model:value="param.value"
       v-model:value="param.value"
       style="width: 38%; margin: 0 0 5px 60px"
       style="width: 38%; margin: 0 0 5px 60px"
       @change="emitChange"
       @change="emitChange"
     />
     />
     <MinusCircleOutlined
     <MinusCircleOutlined
-      v-if="dynamicInput.params.length > min"
+      v-if="dynamicInput.params.length > min && !disabled"
       class="dynamic-delete-button"
       class="dynamic-delete-button"
       @click="remove(param)"
       @click="remove(param)"
       style="width: 50px"
       style="width: 50px"
     />
     />
   </div>
   </div>
   <div>
   <div>
-    <a-button type="dashed" style="width: 38%" @click="add">
+    <a-button :disabled="disabled" type="dashed" style="width: 38%" @click="add">
       <PlusOutlined />
       <PlusOutlined />
       新增
       新增
     </a-button>
     </a-button>
@@ -49,11 +51,16 @@
       value: propTypes.object.def({}),
       value: propTypes.object.def({}),
       //自定义删除按钮多少才会显示
       //自定义删除按钮多少才会显示
       min: propTypes.integer.def(0),
       min: propTypes.integer.def(0),
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
     },
     },
     emits: ['change', 'update:value'],
     emits: ['change', 'update:value'],
     setup(props, { emit }) {
     setup(props, { emit }) {
       //input动态数据
       //input动态数据
       const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] });
       const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] });
+
       //删除Input
       //删除Input
       const remove = (item: Params) => {
       const remove = (item: Params) => {
         let index = dynamicInput.params.indexOf(item);
         let index = dynamicInput.params.indexOf(item);
@@ -108,6 +115,7 @@
         emitChange,
         emitChange,
         remove,
         remove,
         add,
         add,
+        // disabled,
       };
       };
     },
     },
   });
   });

@@ -39,7 +39,7 @@ export const formSchemas = (hasStructForm: boolean, isTcp = false): FormSchema[]
         span: 18,
         span: 18,
       },
       },
       componentProps: {
       componentProps: {
-        maxLength: 255,
+        maxLength: 32,
         placeholder: '请输入功能名称',
         placeholder: '请输入功能名称',
       },
       },
     },
     },
@@ -52,7 +52,7 @@ export const formSchemas = (hasStructForm: boolean, isTcp = false): FormSchema[]
         span: 18,
         span: 18,
       },
       },
       componentProps: {
       componentProps: {
-        maxLength: 255,
+        maxLength: 128,
         placeholder: '请输入标识符',
         placeholder: '请输入标识符',
       },
       },
     },
     },

@@ -394,6 +394,13 @@
       //.ant-table-tbody > tr.ant-table-row-selected td {
       //.ant-table-tbody > tr.ant-table-row-selected td {
       //background-color: fade(@primary-color, 8%) !important;
       //background-color: fade(@primary-color, 8%) !important;
       //}
       //}
+      .ant-table-placeholder {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 670px;
+        max-height: 670px;
+      }
     }
     }
 
 
     .ant-pagination {
     .ant-pagination {

@@ -8,24 +8,6 @@
     @ok="handleSubmit"
     @ok="handleSubmit"
   >
   >
     <BasicForm @register="registerForm">
     <BasicForm @register="registerForm">
-      <template #iconSelect>
-        <Upload
-          name="avatar"
-          accept=".png,.jpg,.jpeg,.gif"
-          list-type="picture-card"
-          class="avatar-uploader"
-          :show-upload-list="false"
-          :customRequest="customUpload"
-          :before-upload="beforeUpload"
-        >
-          <img v-if="tenantLogo" :src="tenantLogo" alt="avatar" />
-          <div v-else>
-            <LoadingOutlined v-if="loading" />
-            <plus-outlined v-else />
-            <div class="ant-upload-text">上传</div>
-          </div>
-        </Upload>
-      </template>
       <template #videoPlatformIdSlot="{ model, field }">
       <template #videoPlatformIdSlot="{ model, field }">
         <a-select
         <a-select
           placeholder="请选择流媒体配置"
           placeholder="请选择流媒体配置"
@@ -52,23 +34,20 @@
   import { formSchema } from './config.data';
   import { formSchema } from './config.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { createOrEditCameraManage } from '/@/api/camera/cameraManager';
   import { createOrEditCameraManage } from '/@/api/camera/cameraManager';
-  import { message, Upload } from 'ant-design-vue';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
-  import { upload } from '/@/api/oss/ossFileUploader';
-  import { FileItem } from '/@/components/Upload/src/typing';
+  import { PlusOutlined } from '@ant-design/icons-vue';
   import { getStreamingMediaList } from '/@/api/camera/cameraManager';
   import { getStreamingMediaList } from '/@/api/camera/cameraManager';
   import SteramingDrawer from '../streaming/SteramingDrawer.vue';
   import SteramingDrawer from '../streaming/SteramingDrawer.vue';
   import { useDrawer } from '/@/components/Drawer';
   import { useDrawer } from '/@/components/Drawer';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { buildUUID } from '/@/utils/uuid';
 
 
   export default defineComponent({
   export default defineComponent({
     name: 'ContactDrawer',
     name: 'ContactDrawer',
     components: {
     components: {
       BasicDrawer,
       BasicDrawer,
       BasicForm,
       BasicForm,
-      Upload,
       PlusOutlined,
       PlusOutlined,
-      LoadingOutlined,
       SteramingDrawer,
       SteramingDrawer,
       VNodes: (_, { attrs }) => {
       VNodes: (_, { attrs }) => {
         return attrs.vnodes;
         return attrs.vnodes;
@@ -118,42 +97,19 @@
         if (unref(isUpdate)) {
         if (unref(isUpdate)) {
           await nextTick();
           await nextTick();
           editId.value = data.record.id;
           editId.value = data.record.id;
-          tenantLogo.value = data.record?.avatar;
-          await setFieldsValue(data.record);
+          if (data.record.avatar) {
+            setFieldsValue({
+              avatar: [{ uid: buildUUID(), name: 'name', url: data.record.avatar } as FileItem],
+            });
+          }
+          const { avatar, ...params } = data.record;
+          console.log(avatar);
+          await setFieldsValue({ ...params });
         } else {
         } else {
-          tenantLogo.value = '';
           editId.value = '';
           editId.value = '';
         }
         }
       });
       });
 
 
-      const tenantLogo = ref('');
-
-      async function customUpload({ file }) {
-        if (beforeUpload(file)) {
-          tenantLogo.value = '';
-          loading.value = true;
-          const formData = new FormData();
-          formData.append('file', file);
-          const response = await upload(formData);
-          if (response.fileStaticUri) {
-            tenantLogo.value = response.fileStaticUri;
-            loading.value = false;
-          }
-        }
-      }
-
-      const beforeUpload = (file: FileItem) => {
-        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-        if (!isJpgOrPng) {
-          message.error('只能上传图片文件!');
-        }
-        const isLt2M = (file.size as number) / 1024 / 1024 < 5;
-        if (!isLt2M) {
-          message.error('图片大小不能超过5MB!');
-        }
-        return isJpgOrPng && isLt2M;
-      };
-
       const getTitle = computed(() => (!unref(isUpdate) ? '新增视频配置' : '编辑视频配置'));
       const getTitle = computed(() => (!unref(isUpdate) ? '新增视频配置' : '编辑视频配置'));
 
 
       async function handleSubmit() {
       async function handleSubmit() {
@@ -162,8 +118,9 @@
           const { createMessage } = useMessage();
           const { createMessage } = useMessage();
           const values = await validate();
           const values = await validate();
           if (!values) return;
           if (!values) return;
-          if (tenantLogo.value !== '') {
-            values.avatar = tenantLogo.value;
+          if (Reflect.has(values, 'avatar')) {
+            const file = (values.avatar || []).at(0) || {};
+            values.avatar = file.url || null;
           }
           }
           if (editId.value !== '') {
           if (editId.value !== '') {
             values.id = editId.value;
             values.id = editId.value;
@@ -188,9 +145,6 @@
         registerDrawer,
         registerDrawer,
         registerForm,
         registerForm,
         handleSubmit,
         handleSubmit,
-        customUpload,
-        beforeUpload,
-        tenantLogo,
         loading,
         loading,
         streamConfigOptions,
         streamConfigOptions,
         registerSteramingDrawer,
         registerSteramingDrawer,

@@ -20,6 +20,12 @@
   import { useFingerprint } from '/@/utils/useFingerprint';
   import { useFingerprint } from '/@/utils/useFingerprint';
   import { GetResult } from '@fingerprintjs/fingerprintjs';
   import { GetResult } from '@fingerprintjs/fingerprintjs';
 
 
+  const props = defineProps({
+    mode: {
+      type: String,
+      default: PageMode.SPLIT_SCREEN_MODE,
+    },
+  });
   type CameraRecordItem = CameraRecord & {
   type CameraRecordItem = CameraRecord & {
     canPlay?: boolean;
     canPlay?: boolean;
     isTransform?: boolean;
     isTransform?: boolean;
@@ -252,7 +258,11 @@
               </Authority>
               </Authority>
             </div>
             </div>
             <Space>
             <Space>
-              <Button type="primary" @click="handleChangeMode(PageMode.SPLIT_SCREEN_MODE)">
+              <Button
+                v-if="props.mode !== PageMode.SPLIT_SCREEN_MODE"
+                type="primary"
+                @click="handleChangeMode(PageMode.SPLIT_SCREEN_MODE)"
+              >
                 分屏模式
                 分屏模式
               </Button>
               </Button>
               <Button type="primary" @click="handleChangeMode(PageMode.LIST_MODE)">
               <Button type="primary" @click="handleChangeMode(PageMode.LIST_MODE)">

@@ -5,6 +5,9 @@ import { CameraVideoUrl, CameraMaxLength } from '/@/utils/rules';
 import { h } from 'vue';
 import { h } from 'vue';
 import SnHelpMessage from './SnHelpMessage.vue';
 import SnHelpMessage from './SnHelpMessage.vue';
 import { OrgTreeSelect } from '../../common/OrgTreeSelect';
 import { OrgTreeSelect } from '../../common/OrgTreeSelect';
+import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+import { createImgPreview } from '/@/components/Preview';
+import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
 
 
 useComponentRegister('OrgTreeSelect', OrgTreeSelect);
 useComponentRegister('OrgTreeSelect', OrgTreeSelect);
 
 
@@ -102,8 +105,33 @@ export const formSchema: QFormSchema[] = [
   {
   {
     field: 'avatar',
     field: 'avatar',
     label: '视频封面',
     label: '视频封面',
-    slot: 'iconSelect',
-    component: 'Input',
+    component: 'ApiUpload',
+    changeEvent: 'update:fileList',
+    valueField: 'fileList',
+    componentProps: () => {
+      return {
+        listType: 'picture-card',
+        maxFileLimit: 1,
+        accept: '.png,.jpg,.jpeg,.gif',
+        api: async (file: File) => {
+          try {
+            const formData = new FormData();
+            formData.set('file', file);
+            const { fileStaticUri, fileName } = await uploadThumbnail(formData);
+            return {
+              uid: fileStaticUri,
+              name: fileName,
+              url: fileStaticUri,
+            } as FileItem;
+          } catch (error) {
+            return {};
+          }
+        },
+        onPreview: (fileList: FileItem) => {
+          createImgPreview({ imageList: [fileList.url!] });
+        },
+      };
+    },
   },
   },
   {
   {
     field: 'name',
     field: 'name',

@@ -12,7 +12,11 @@
 
 
 <template>
 <template>
   <div>
   <div>
-    <SplitScreenMode v-if="mode == PageMode.SPLIT_SCREEN_MODE" @switchMode="handleSwitchMode" />
+    <SplitScreenMode
+      :mode="mode"
+      v-if="mode == PageMode.SPLIT_SCREEN_MODE"
+      @switchMode="handleSwitchMode"
+    />
     <ListMode v-if="mode === PageMode.LIST_MODE" @switchMode="handleSwitchMode" />
     <ListMode v-if="mode === PageMode.LIST_MODE" @switchMode="handleSwitchMode" />
   </div>
   </div>
 </template>
 </template>

@@ -12,6 +12,9 @@ import ObjectModelValidateForm from '/@/components/Form/src/externalCompns/compo
 import { CommandDeliveryWayEnum, ServiceCallTypeEnum } from '/@/enums/toolEnum';
 import { CommandDeliveryWayEnum, ServiceCallTypeEnum } from '/@/enums/toolEnum';
 import { TaskTypeEnum } from '/@/views/task/center/config';
 import { TaskTypeEnum } from '/@/views/task/center/config';
 import { AddressTypeEnum } from '/@/views/task/center/components/PollCommandInput';
 import { AddressTypeEnum } from '/@/views/task/center/components/PollCommandInput';
+import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+import { createImgPreview } from '/@/components/Preview';
+import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
 
 
 useComponentRegister('JSONEditor', JSONEditor);
 useComponentRegister('JSONEditor', JSONEditor);
 useComponentRegister('ObjectModelValidateForm', ObjectModelValidateForm);
 useComponentRegister('ObjectModelValidateForm', ObjectModelValidateForm);
@@ -29,15 +32,40 @@ export const step1Schemas: FormSchema[] = [
   {
   {
     field: 'icon',
     field: 'icon',
     label: '设备图片',
     label: '设备图片',
-    slot: 'iconSelect',
-    component: 'Input',
+    component: 'ApiUpload',
+    changeEvent: 'update:fileList',
+    valueField: 'fileList',
+    componentProps: () => {
+      return {
+        listType: 'picture-card',
+        maxFileLimit: 1,
+        accept: '.png,.jpg,.jpeg,.gif',
+        api: async (file: File) => {
+          try {
+            const formData = new FormData();
+            formData.set('file', file);
+            const { fileStaticUri, fileName } = await uploadThumbnail(formData);
+            return {
+              uid: fileStaticUri,
+              name: fileName,
+              url: fileStaticUri,
+            } as FileItem;
+          } catch (error) {
+            return {};
+          }
+        },
+        onPreview: (fileList: FileItem) => {
+          createImgPreview({ imageList: [fileList.url!] });
+        },
+      };
+    },
   },
   },
   {
   {
     field: 'alias',
     field: 'alias',
     label: '别名 ',
     label: '别名 ',
     component: 'Input',
     component: 'Input',
     componentProps: {
     componentProps: {
-      maxLength: 255,
+      maxLength: 32,
       placeholder: '请输入别名',
       placeholder: '请输入别名',
     },
     },
   },
   },
@@ -45,6 +73,10 @@ export const step1Schemas: FormSchema[] = [
     field: 'name',
     field: 'name',
     label: '设备名称',
     label: '设备名称',
     component: 'Input',
     component: 'Input',
+    componentProps: {
+      maxLength: 32,
+      placeholder: '请输入别名',
+    },
     rules: [{ required: true, message: '设备名称为必填项' }],
     rules: [{ required: true, message: '设备名称为必填项' }],
     slot: 'snCode',
     slot: 'snCode',
   },
   },

@@ -5,8 +5,8 @@ import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
 import { getCustomerList } from '/@/api/device/deviceManager';
 import { getCustomerList } from '/@/api/device/deviceManager';
 import { DescItem } from '/@/components/Description/index';
 import { DescItem } from '/@/components/Description/index';
 import moment from 'moment';
 import moment from 'moment';
-import { h } from 'vue';
-import { Button } from 'ant-design-vue';
+import { CSSProperties, h } from 'vue';
+import { Button, Tooltip } from 'ant-design-vue';
 import { TypeEnum } from './data';
 import { TypeEnum } from './data';
 import { PageEnum } from '/@/enums/pageEnum';
 import { PageEnum } from '/@/enums/pageEnum';
 import { useGo } from '/@/hooks/web/usePage';
 import { useGo } from '/@/hooks/web/usePage';
@@ -24,12 +24,19 @@ export const descSchema = (emit: EmitType): DescItem[] => {
       field: 'name',
       field: 'name',
       label: '设备名称',
       label: '设备名称',
       render(val, data: Record<'alias' | 'name', string>) {
       render(val, data: Record<'alias' | 'name', string>) {
-        return h('span', {}, data.alias || val);
+        return h(Tooltip, { title: data.alias || val }, () =>
+          h('span', { style: { cursor: 'pointer' } as CSSProperties }, data.alias || val)
+        );
       },
       },
     },
     },
     {
     {
       field: 'label',
       field: 'label',
       label: '设备标签',
       label: '设备标签',
+      render(val) {
+        return h(Tooltip, { title: val }, () =>
+          h('span', { style: { cursor: 'pointer' } as CSSProperties }, val)
+        );
+      },
     },
     },
     {
     {
       field: 'deviceProfile.name',
       field: 'deviceProfile.name',
@@ -79,6 +86,11 @@ export const descSchema = (emit: EmitType): DescItem[] => {
       field: 'description',
       field: 'description',
       label: '描述',
       label: '描述',
       // span: 2,
       // span: 2,
+      render(val) {
+        return h(Tooltip, { title: val }, () =>
+          h('span', { style: { cursor: 'pointer' } as CSSProperties }, val)
+        );
+      },
     },
     },
   ];
   ];
 };
 };

@@ -4,7 +4,7 @@ import { FormSchema } from '/@/components/Table';
 import { DeviceTypeEnum, DeviceState, DeviceRecord } from '/@/api/device/model/deviceModel';
 import { DeviceTypeEnum, DeviceState, DeviceRecord } from '/@/api/device/model/deviceModel';
 import { deviceProfile } from '/@/api/device/deviceManager';
 import { deviceProfile } from '/@/api/device/deviceManager';
 import { h } from 'vue';
 import { h } from 'vue';
-import { Tag } from 'ant-design-vue';
+import { Tag, Tooltip } from 'ant-design-vue';
 import { handeleCopy } from '../../profiles/step/topic';
 import { handeleCopy } from '../../profiles/step/topic';
 
 
 // 表格列数据
 // 表格列数据
@@ -32,19 +32,33 @@ export const columns: BasicColumn[] = [
           h(
           h(
             'div',
             'div',
             {
             {
-              class: 'cursor-pointer',
+              class: 'cursor-pointer truncate',
             },
             },
-            `${record.alias}`
+            h(
+              Tooltip,
+              {
+                placement: 'topLeft',
+                title: `${record.alias}`,
+              },
+              () => `${record.alias}`
+            )
           ),
           ),
         h(
         h(
           'div',
           'div',
           {
           {
-            class: 'cursor-pointer text-blue-500',
+            class: 'cursor-pointer text-blue-500 truncate',
             onClick: () => {
             onClick: () => {
               handeleCopy(`${record.name}`);
               handeleCopy(`${record.name}`);
             },
             },
           },
           },
-          `${record.name}`
+          h(
+            Tooltip,
+            {
+              placement: 'topLeft',
+              title: `${record.name}`,
+            },
+            () => `${record.name}`
+          )
         ),
         ),
       ]);
       ]);
     },
     },

@@ -109,7 +109,8 @@ export const basicInfoForm: FormSchema[] = [
     label: '所属组织',
     label: '所属组织',
     component: 'ApiTreeSelect',
     component: 'ApiTreeSelect',
     rules: [{ required: true, message: '所属组织为必填项' }],
     rules: [{ required: true, message: '所属组织为必填项' }],
-    componentProps: () => {
+    componentProps: ({ formModel, formActionType }) => {
+      const { setFieldsValue } = formActionType;
       return {
       return {
         maxLength: 250,
         maxLength: 250,
         placeholder: '请选择所属组织',
         placeholder: '请选择所属组织',
@@ -119,6 +120,11 @@ export const basicInfoForm: FormSchema[] = [
           return data;
           return data;
         },
         },
         getPopupContainer: () => document.body,
         getPopupContainer: () => document.body,
+        onChange(e) {
+          if (e != formModel?.[FieldsEnum.ORGANIZATION_ID]) {
+            setFieldsValue({ [FieldsEnum.GATEWAY_TB_DEVICE_ID]: null });
+          }
+        },
       };
       };
     },
     },
   },
   },
@@ -193,7 +199,12 @@ export const basicInfoForm: FormSchema[] = [
               deviceType: DeviceTypeEnum.GATEWAY,
               deviceType: DeviceTypeEnum.GATEWAY,
               organizationId,
               organizationId,
             });
             });
-            return result;
+            return result.map((item) => {
+              return {
+                ...item,
+                name: item.alias || item.name,
+              };
+            });
           } catch (error) {
           } catch (error) {
             return [];
             return [];
           }
           }

@@ -5,7 +5,7 @@
     @register="register"
     @register="register"
     destroyOnClose
     destroyOnClose
     @close="closeDrawer"
     @close="closeDrawer"
-    :title="deviceDetail.alias || deviceDetail.name"
+    :title="drawerTitle"
     width="80%"
     width="80%"
   >
   >
     <Tabs v-model:activeKey="activeKey" :size="size">
     <Tabs v-model:activeKey="activeKey" :size="size">
@@ -58,7 +58,7 @@
   </BasicDrawer>
   </BasicDrawer>
 </template>
 </template>
 <script lang="ts">
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
+  import { defineComponent, ref, computed } from 'vue';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
 
 
   import { Tabs } from 'ant-design-vue';
   import { Tabs } from 'ant-design-vue';
@@ -122,6 +122,10 @@
         emit('openGatewayDeviceDetail', { id: data.gatewayId });
         emit('openGatewayDeviceDetail', { id: data.gatewayId });
       };
       };
 
 
+      const drawerTitle = computed(() => {
+        return deviceDetail.value?.alias || deviceDetail.value?.name;
+      });
+
       return {
       return {
         size,
         size,
         activeKey,
         activeKey,
@@ -132,6 +136,7 @@
         tbDeviceId,
         tbDeviceId,
         handleOpenTbDeviceDetail,
         handleOpenTbDeviceDetail,
         handleOpenGatewayDevice,
         handleOpenGatewayDevice,
+        drawerTitle,
       };
       };
     },
     },
   });
   });

@@ -157,7 +157,7 @@
               sn: stepRecord.name,
               sn: stepRecord.name,
               customerId: currentDeviceData.customerId,
               customerId: currentDeviceData.customerId,
               deviceInfo: {
               deviceInfo: {
-                avatar: DeviceStep1Ref.value?.devicePic,
+                avatar: stepRecord?.icon,
                 ...DeviceStep1Ref.value?.devicePositionState,
                 ...DeviceStep1Ref.value?.devicePositionState,
               },
               },
             };
             };
@@ -169,7 +169,7 @@
               ...stepRecord,
               ...stepRecord,
               sn: stepRecord.name,
               sn: stepRecord.name,
               deviceInfo: {
               deviceInfo: {
-                avatar: DeviceStep1Ref.value?.devicePic,
+                avatar: stepRecord?.icon,
                 ...DeviceStep1Ref.value?.devicePositionState,
                 ...DeviceStep1Ref.value?.devicePositionState,
               },
               },
               deviceToken:
               deviceToken:

@@ -22,24 +22,6 @@
             </div>
             </div>
           </div>
           </div>
         </template>
         </template>
-        <template #iconSelect>
-          <Upload
-            name="avatar"
-            accept=".png,.jpg,.jpeg,.gif"
-            :show-upload-list="false"
-            list-type="picture-card"
-            class="avatar-uploader"
-            :customRequest="customUpload"
-            :before-upload="beforeUpload"
-          >
-            <img v-if="devicePic" :src="devicePic" alt="avatar" />
-            <div v-else>
-              <LoadingOutlined v-if="loading" />
-              <PlusOutlined v-else />
-              <div class="ant-upload-text">图片上传</div>
-            </div>
-          </Upload>
-        </template>
         <template #snCode="{ model, field }">
         <template #snCode="{ model, field }">
           <div class="flex">
           <div class="flex">
             <Input v-model:value="model[field]" placeholder="请输入设备名称" />
             <Input v-model:value="model[field]" placeholder="请输入设备名称" />
@@ -115,10 +97,9 @@
   import { BasicForm, useForm } from '/@/components/Form';
   import { BasicForm, useForm } from '/@/components/Form';
   import { step1Schemas } from '../../config/data';
   import { step1Schemas } from '../../config/data';
   import { useScript } from '/@/hooks/web/useScript';
   import { useScript } from '/@/hooks/web/useScript';
-  import { Input, Upload, message, Modal, Form, Row, Col, AutoComplete } from 'ant-design-vue';
-  import { EnvironmentTwoTone, PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
+  import { Input, message, Modal, Form, Row, Col, AutoComplete } from 'ant-design-vue';
+  import { EnvironmentTwoTone } from '@ant-design/icons-vue';
   import { upload } from '/@/api/oss/ossFileUploader';
   import { upload } from '/@/api/oss/ossFileUploader';
-  import { FileItem } from '/@/components/Upload/src/typing';
   import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
   import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
   import { generateSNCode } from '/@/api/device/deviceManager';
   import { generateSNCode } from '/@/api/device/deviceManager';
   import icon from '/@/assets/images/wz.png';
   import icon from '/@/assets/images/wz.png';
@@ -130,21 +111,20 @@
   import DeptDrawer from '/@/views/system/organization/OrganizationDrawer.vue';
   import DeptDrawer from '/@/views/system/organization/OrganizationDrawer.vue';
   import { TaskTypeEnum } from '/@/views/task/center/config';
   import { TaskTypeEnum } from '/@/views/task/center/config';
   import { toRaw } from 'vue';
   import { toRaw } from 'vue';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { buildUUID } from '/@/utils/uuid';
 
 
   export default defineComponent({
   export default defineComponent({
     components: {
     components: {
       BasicForm,
       BasicForm,
       Input,
       Input,
       AutoComplete,
       AutoComplete,
-      Upload,
       EnvironmentTwoTone,
       EnvironmentTwoTone,
-      PlusOutlined,
       Modal,
       Modal,
       Form,
       Form,
       FormItem: Form.Item,
       FormItem: Form.Item,
       Row,
       Row,
       Col,
       Col,
-      LoadingOutlined,
       DeptDrawer,
       DeptDrawer,
     },
     },
     props: {
     props: {
@@ -202,8 +182,11 @@
       async function nextStep() {
       async function nextStep() {
         try {
         try {
           let values = await validate();
           let values = await validate();
-          values = { devicePic: devicePic.value, ...positionState, ...values };
-          delete values.icon;
+          if (Reflect.has(values, 'icon')) {
+            const file = (unref(values.icon) || []).at(0) || {};
+            values.icon = file.url || null;
+          }
+          values = { ...positionState, ...values };
           delete values.deviceAddress;
           delete values.deviceAddress;
           emit('next', values);
           emit('next', values);
           // 获取输入的数据
           // 获取输入的数据
@@ -405,6 +388,11 @@
         positionState.address = deviceInfo.address;
         positionState.address = deviceInfo.address;
         devicePositionState.value = { ...toRaw(positionState) };
         devicePositionState.value = { ...toRaw(positionState) };
         devicePic.value = deviceInfo.avatar;
         devicePic.value = deviceInfo.avatar;
+        if (deviceInfo.avatar) {
+          setFieldsValue({
+            icon: [{ uid: buildUUID(), name: 'name', url: deviceInfo.avatar } as FileItem],
+          });
+        }
         setFieldsValue({
         setFieldsValue({
           ...data,
           ...data,
           code: data?.code,
           code: data?.code,
@@ -414,6 +402,10 @@
       // 父组件调用获取字段值的方法
       // 父组件调用获取字段值的方法
       function parentGetFieldsValue() {
       function parentGetFieldsValue() {
         const value = getFieldsValue();
         const value = getFieldsValue();
+        if (Reflect.has(value, 'icon')) {
+          const file = (value.icon || []).at(0) || {};
+          value.icon = file.url || null;
+        }
         return {
         return {
           ...value,
           ...value,
           ...(value?.code || value?.addressCode
           ...(value?.code || value?.addressCode

@@ -47,7 +47,7 @@
           </div>
           </div>
         </BasicModal>
         </BasicModal>
       </div>
       </div>
-      <Description @register="register" class="mt-4" :data="deviceDetail" />
+      <Description @register="register" class="mt-4" :data="deviceDetail" :contentStyle="CS" />
     </div>
     </div>
     <div class="mt-4" v-if="!isCustomer">
     <div class="mt-4" v-if="!isCustomer">
       <a-button type="primary" class="mr-4" @click="copyTbDeviceId">复制设备ID</a-button>
       <a-button type="primary" class="mr-4" @click="copyTbDeviceId">复制设备ID</a-button>
@@ -116,6 +116,15 @@
         column: 2,
         column: 2,
       });
       });
 
 
+      const CS = {
+        'max-width': '600px',
+        'word-break': 'break-all',
+        overflow: 'hidden',
+        display: '-webkit-box',
+        '-webkit-line-clamp': 2,
+        '-webkit-box-orient': 'vertical',
+      };
+
       // 地图
       // 地图
       const mapWrapRef = ref<HTMLDivElement>();
       const mapWrapRef = ref<HTMLDivElement>();
 
 
@@ -217,6 +226,7 @@
         remoteConnectiondGateway,
         remoteConnectiondGateway,
         locationImage,
         locationImage,
         isCustomer,
         isCustomer,
+        CS,
       };
       };
     },
     },
   });
   });

@@ -25,7 +25,7 @@
       listField: 'data',
       listField: 'data',
     },
     },
     formConfig: {
     formConfig: {
-      labelWidth: 120,
+      labelWidth: 80,
       schemas: formSchemas,
       schemas: formSchemas,
       fieldMapToTime: [['dateRange', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss']],
       fieldMapToTime: [['dateRange', ['startTime', 'endTime'], 'YYYY-MM-DD HH:mm:ss']],
     },
     },
@@ -61,6 +61,7 @@
       </span>
       </span>
     </template>
     </template>
   </BasicTable>
   </BasicTable>
+  <BasicTable />
   <BasicModal title="输出参数" @register="registerModal" @ok="closeModal">
   <BasicModal title="输出参数" @register="registerModal" @ok="closeModal">
     <Input.TextArea v-model:value="outputData" :autosize="true" />
     <Input.TextArea v-model:value="outputData" :autosize="true" />
   </BasicModal>
   </BasicModal>

@@ -15,7 +15,7 @@
   import { getDeviceAttrs } from '/@/api/device/deviceManager';
   import { getDeviceAttrs } from '/@/api/device/deviceManager';
   import { DeviceModelOfMatterAttrs, DeviceRecord } from '/@/api/device/model/deviceModel';
   import { DeviceModelOfMatterAttrs, DeviceRecord } from '/@/api/device/model/deviceModel';
   import { Specs, StructJSON } from '/@/api/device/model/modelOfMatterModel';
   import { Specs, StructJSON } from '/@/api/device/model/modelOfMatterModel';
-  import { isArray, isObject } from '/@/utils/is';
+  import { isArray, isNull, isObject } from '/@/utils/is';
   import { DataTypeEnum } from '/@/components/Form/src/externalCompns/components/StructForm/config';
   import { DataTypeEnum } from '/@/components/Form/src/externalCompns/components/StructForm/config';
   import { useGlobSetting } from '/@/hooks/setting';
   import { useGlobSetting } from '/@/hooks/setting';
   import { ModeSwitchButton, EnumTableCardMode } from '/@/components/Widget';
   import { ModeSwitchButton, EnumTableCardMode } from '/@/components/Widget';
@@ -161,14 +161,14 @@
 
 
         handleFilterChange();
         handleFilterChange();
 
 
-        unref(mode) === EnumTableCardMode.TABLE && setTableData(socketInfo.dataSource);
+        unref(mode) === EnumTableCardMode.TABLE && setTableModeData();
       } catch (error) {}
       } catch (error) {}
     },
     },
     resetFunc: async () => {
     resetFunc: async () => {
       try {
       try {
         socketInfo.filterAttrKeys = [];
         socketInfo.filterAttrKeys = [];
         handleFilterChange();
         handleFilterChange();
-        unref(mode) === EnumTableCardMode.TABLE && setTableData(socketInfo.dataSource);
+        unref(mode) === EnumTableCardMode.TABLE && setTableModeData();
       } catch (error) {}
       } catch (error) {}
     },
     },
   });
   });
@@ -200,7 +200,7 @@
   const switchMode = async (value: EnumTableCardMode) => {
   const switchMode = async (value: EnumTableCardMode) => {
     mode.value = value;
     mode.value = value;
     await nextTick();
     await nextTick();
-    unref(mode) === EnumTableCardMode.TABLE && setTableData(socketInfo.dataSource);
+    unref(mode) === EnumTableCardMode.TABLE && setTableModeData();
     socketInfo.filterAttrKeys = [];
     socketInfo.filterAttrKeys = [];
   };
   };
 
 
@@ -280,7 +280,7 @@
 
 
           await nextTick();
           await nextTick();
 
 
-          unref(mode) === EnumTableCardMode.TABLE && setTableData(socketInfo.dataSource);
+          unref(mode) === EnumTableCardMode.TABLE && setTableModeData();
         }
         }
       } catch (error) {}
       } catch (error) {}
     },
     },
@@ -292,6 +292,10 @@
     },
     },
   });
   });
 
 
+  function setTableModeData() {
+    setTableData(socketInfo.dataSource.filter((item) => !isNull(item.value)));
+  }
+
   const handleShowDetail = (record: DataSource) => {
   const handleShowDetail = (record: DataSource) => {
     const { key } = record;
     const { key } = record;
     socketInfo.attr = key;
     socketInfo.attr = key;
@@ -308,9 +312,11 @@
 
 
   const formatValue = (item: DataSource) => {
   const formatValue = (item: DataSource) => {
     return item.type === DataTypeEnum.IS_BOOL
     return item.type === DataTypeEnum.IS_BOOL
-      ? !!Number(item.value)
-        ? item.boolOpen
-        : item.boolClose
+      ? !isNull(item.value)
+        ? !!Number(item.value)
+          ? item.boolOpen
+          : item.boolClose
+        : '--'
       : item.value || '--';
       : item.value || '--';
   };
   };
 
 
@@ -406,7 +412,11 @@
       </List>
       </List>
     </section>
     </section>
 
 
-    <BasicTable v-if="mode === EnumTableCardMode.TABLE" @register="registerTable">
+    <BasicTable
+      v-if="mode === EnumTableCardMode.TABLE"
+      @register="registerTable"
+      class="device-things-model-table-mode"
+    >
       <template #toolbar>
       <template #toolbar>
         <div
         <div
           v-show="mode === EnumTableCardMode.TABLE"
           v-show="mode === EnumTableCardMode.TABLE"
@@ -447,6 +457,10 @@
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
   }
   }
+
+  .device-things-model-table-mode:deep(.ant-table-placeholder) {
+    height: auto;
+  }
 </style>
 </style>
 
 
 <style>
 <style>

@@ -117,7 +117,7 @@
   };
   };
 
 
   const handleCheckCard = (item: ProfileRecord) => {
   const handleCheckCard = (item: ProfileRecord) => {
-    if (item.default) return;
+    if (item.default || item.name == 'default') return;
     item.checked = !item.checked;
     item.checked = !item.checked;
   };
   };
 
 

@@ -12,6 +12,9 @@ import { EventType, EventTypeColor, EventTypeName } from '../list/cpns/tabs/Even
 
 
 import { useClipboard } from '@vueuse/core';
 import { useClipboard } from '@vueuse/core';
 import { useMessage } from '/@/hooks/web/useMessage';
 import { useMessage } from '/@/hooks/web/useMessage';
+import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+import { createImgPreview } from '/@/components/Preview';
+import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
 
 
 export enum Mode {
 export enum Mode {
   CARD = 'card',
   CARD = 'card',
@@ -78,11 +81,13 @@ export const physicalColumn: BasicColumn[] = [
     title: '功能名称',
     title: '功能名称',
     dataIndex: FormField.FUNCTION_NAME,
     dataIndex: FormField.FUNCTION_NAME,
     width: 90,
     width: 90,
+    ellipsis: true,
   },
   },
   {
   {
     title: '标识符',
     title: '标识符',
     dataIndex: FormField.IDENTIFIER,
     dataIndex: FormField.IDENTIFIER,
     width: 90,
     width: 90,
+    ellipsis: true,
     customRender: ({ text }: Record<'text', string>) => {
     customRender: ({ text }: Record<'text', string>) => {
       return h(Tooltip, { title: text }, () =>
       return h(Tooltip, { title: text }, () =>
         h('span', { class: 'cursor-pointer', onClick: () => handleCopy(text) }, text)
         h('span', { class: 'cursor-pointer', onClick: () => handleCopy(text) }, text)
@@ -96,6 +101,7 @@ export const physicalColumn: BasicColumn[] = [
     format: (text: string) => {
     format: (text: string) => {
       return text || '--';
       return text || '--';
     },
     },
+    ellipsis: true,
   },
   },
   {
   {
     title: '事件类型',
     title: '事件类型',
@@ -109,6 +115,7 @@ export const physicalColumn: BasicColumn[] = [
         () => EventTypeName[text as EventType]
         () => EventTypeName[text as EventType]
       );
       );
     },
     },
+    ellipsis: true,
   },
   },
   {
   {
     title: '状态',
     title: '状态',
@@ -158,8 +165,33 @@ export const step1Schemas: FormSchema[] = [
   {
   {
     field: 'image',
     field: 'image',
     label: '上传图片',
     label: '上传图片',
-    component: 'Input',
-    slot: 'imageSelect',
+    component: 'ApiUpload',
+    changeEvent: 'update:fileList',
+    valueField: 'fileList',
+    componentProps: () => {
+      return {
+        listType: 'picture-card',
+        maxFileLimit: 1,
+        accept: '.png,.jpg,.jpeg,.gif',
+        api: async (file: File) => {
+          try {
+            const formData = new FormData();
+            formData.set('file', file);
+            const { fileStaticUri, fileName } = await uploadThumbnail(formData);
+            return {
+              uid: fileStaticUri,
+              name: fileName,
+              url: fileStaticUri,
+            } as FileItem;
+          } catch (error) {
+            return {};
+          }
+        },
+        onPreview: (fileList: FileItem) => {
+          createImgPreview({ imageList: [fileList.url!] });
+        },
+      };
+    },
   },
   },
   {
   {
     field: 'deviceType',
     field: 'deviceType',

 <template>
 <template>
   <div class="step1">
   <div class="step1">
-    <BasicForm @register="register">
-      <template #imageSelect>
-        <Upload
-          style="width: 20vw"
-          name="avatar"
-          accept=".png,.jpg,.jpeg,.gif"
-          list-type="picture-card"
-          class="avatar-uploader"
-          :show-upload-list="false"
-          :customRequest="customUploadqrcodePic"
-          :before-upload="beforeUploadqrcodePic"
-        >
-          <img
-            v-if="deviceConfigPic"
-            :src="deviceConfigPic"
-            alt=""
-            style="width: 6.25rem; height: 6.25rem"
-          />
-          <div v-else>
-            <LoadingOutlined v-if="loading" />
-            <PlusOutlined v-else />
-            <div class="ant-upload-text">图片上传</div>
-          </div>
-        </Upload>
-      </template>
-    </BasicForm>
+    <BasicForm @register="register" />
   </div>
   </div>
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
-  import { ref, nextTick } from 'vue';
+  import { nextTick } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { BasicForm, useForm } from '/@/components/Form';
   import { step1Schemas } from '../device.profile.data';
   import { step1Schemas } from '../device.profile.data';
-  import { uploadApi } from '/@/api/personal/index';
-  import { Upload } from 'ant-design-vue';
-  import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
-  import { useMessage } from '/@/hooks/web/useMessage';
-  import type { FileItem } from '/@/components/Upload/src/typing';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { buildUUID } from '/@/utils/uuid';
 
 
   const emits = defineEmits(['next', 'emitDeviceType']);
   const emits = defineEmits(['next', 'emitDeviceType']);
-  const loading = ref(false);
-  const { createMessage } = useMessage();
-  const deviceConfigPic = ref('');
   const props = defineProps({
   const props = defineProps({
     ifShowBtn: { type: Boolean, default: true },
     ifShowBtn: { type: Boolean, default: true },
   });
   });
@@ -66,32 +35,6 @@
         disabled: nameStatus,
         disabled: nameStatus,
       },
       },
     });
     });
-  const customUploadqrcodePic = async ({ file }) => {
-    if (beforeUploadqrcodePic(file)) {
-      deviceConfigPic.value = '';
-      loading.value = true;
-      const formData = new FormData();
-      formData.append('file', file);
-      const response = await uploadApi(formData);
-      if (response.fileStaticUri) {
-        deviceConfigPic.value = response.fileStaticUri;
-        loading.value = false;
-      }
-    }
-  };
-  const beforeUploadqrcodePic = (file: FileItem) => {
-    const isJpgOrPng =
-      file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
-    if (!isJpgOrPng) {
-      createMessage.error('只能上传图片文件!');
-    }
-    const isLt2M = (file.size as number) / 1024 / 1024 < 5;
-    if (!isLt2M) {
-      createMessage.error('图片大小不能超过5MB!');
-    }
-    return isJpgOrPng && isLt2M;
-  };
-
   const setFieldsdefaultRuleChainId = async (id) => {
   const setFieldsdefaultRuleChainId = async (id) => {
     await nextTick();
     await nextTick();
     setFieldsValue({ defaultRuleChainId: id });
     setFieldsValue({ defaultRuleChainId: id });
@@ -105,20 +48,28 @@
   }
   }
   //回显数据
   //回显数据
   const setFormData = (v) => {
   const setFormData = (v) => {
-    setFieldsValue(v);
-    deviceConfigPic.value = v.image;
+    if (v.image) {
+      setFieldsValue({
+        image: [{ uid: buildUUID(), name: 'name', url: v.image } as FileItem],
+      });
+    }
+    const { image, ...params } = v;
+    console.log(image);
+    setFieldsValue({ ...params });
   };
   };
   //获取数据
   //获取数据
   async function getFormData() {
   async function getFormData() {
     const values = await validate();
     const values = await validate();
     if (!values) return;
     if (!values) return;
-    Reflect.set(values, 'image', deviceConfigPic.value);
+    if (Reflect.has(values, 'image')) {
+      const file = (values.image || []).at(0) || {};
+      values.image = file.url || null;
+    }
     return values;
     return values;
   }
   }
   //清空数据
   //清空数据
   const resetFormData = () => {
   const resetFormData = () => {
     resetFields();
     resetFields();
-    deviceConfigPic.value = '';
   };
   };
 
 
   const editOrAddDeviceTypeStatus = (status: boolean) => {
   const editOrAddDeviceTypeStatus = (status: boolean) => {

@@ -77,7 +77,7 @@ export const serviceSchemas = (tcpDeviceFlag: boolean): FormSchema[] => {
         span: 18,
         span: 18,
       },
       },
       componentProps: {
       componentProps: {
-        maxLength: 255,
+        maxLength: 32,
         placeholder: '请输入功能名称',
         placeholder: '请输入功能名称',
       },
       },
     },
     },
@@ -90,7 +90,7 @@ export const serviceSchemas = (tcpDeviceFlag: boolean): FormSchema[] => {
         span: 18,
         span: 18,
       },
       },
       componentProps: {
       componentProps: {
-        maxLength: 255,
+        maxLength: 128,
         placeholder: '请输入标识符',
         placeholder: '请输入标识符',
       },
       },
     },
     },
@@ -175,7 +175,7 @@ export const eventSchemas: FormSchema[] = [
       span: 18,
       span: 18,
     },
     },
     componentProps: {
     componentProps: {
-      maxLength: 255,
+      maxLength: 32,
       placeholder: '请输入功能名称',
       placeholder: '请输入功能名称',
     },
     },
   },
   },
@@ -188,7 +188,7 @@ export const eventSchemas: FormSchema[] = [
       span: 18,
       span: 18,
     },
     },
     componentProps: {
     componentProps: {
-      maxLength: 255,
+      maxLength: 128,
       placeholder: '请输入标识符',
       placeholder: '请输入标识符',
     },
     },
   },
   },

@@ -17,7 +17,7 @@
         </Authority>
         </Authority>
       </template>
       </template>
       <template #config="{ record }">
       <template #config="{ record }">
-        <Authority value="api:yt:message:get:config">
+        <Authority value="api:yt:template:get">
           <a-button type="link" class="ml-2" @click="showData(record)"> 查看配置 </a-button>
           <a-button type="link" class="ml-2" @click="showData(record)"> 查看配置 </a-button>
         </Authority>
         </Authority>
       </template>
       </template>

@@ -78,6 +78,27 @@
       componentProps: {
       componentProps: {
         placeholder: '示例：{"code":"3654"}',
         placeholder: '示例：{"code":"3654"}',
       },
       },
+      dynamicRules: () => {
+        return [
+          {
+            required: true,
+            validator: (_, value) => {
+              try {
+                if (typeof value == 'object') {
+                  return Promise.resolve();
+                } else {
+                  if (typeof JSON.parse(value) == 'object') {
+                    return Promise.resolve();
+                  }
+                  return Promise.reject('请输入JSON格式例如{"code":"123"}');
+                }
+              } catch {
+                return Promise.reject('请输入JSON格式例如{"code":"123"}');
+              }
+            },
+          },
+        ];
+      },
     },
     },
     {
     {
       field: 'remark',
       field: 'remark',

@@ -131,14 +131,19 @@ export const formSchema: FormSchema[] = [
         onChange: async (value) => {
         onChange: async (value) => {
           const res = await findMessageConfig({});
           const res = await findMessageConfig({});
           let typeId: Nullable<string> = null;
           let typeId: Nullable<string> = null;
-          const options = res.map((item) => {
-            if (item.messageType === value) typeId = item.id;
-            return {
-              disabled: item.messageType !== value,
-              label: item.configName,
-              value: item.id,
-            };
-          });
+          const options = res
+            .map((item) => {
+              if (item.messageType === value && item.status === 1) {
+                typeId = item.id;
+              }
+              return {
+                disabled: item.messageType !== value,
+                label: item.configName,
+                value: item.id,
+                status: item.status,
+              };
+            })
+            .filter((item) => item.status === 1);
           await formActionType.setFieldsValue({ messageConfigId: typeId });
           await formActionType.setFieldsValue({ messageConfigId: typeId });
           await formActionType.updateSchema({
           await formActionType.updateSchema({
             field: 'messageConfigId',
             field: 'messageConfigId',
@@ -155,14 +160,25 @@ export const formSchema: FormSchema[] = [
     label: '配置名称',
     label: '配置名称',
     required: true,
     required: true,
     component: 'ApiSelect',
     component: 'ApiSelect',
-    componentProps: {
-      api: findMessageConfig,
-      params: {
-        messageType: ({ values }) => Reflect.get(values, 'messageType'),
-      },
-      immediate: true,
-      labelField: 'configName',
-      valueField: 'id',
+    componentProps: () => {
+      return {
+        api: async (params: Recordable) => {
+          try {
+            const record = await findMessageConfig(params);
+            return record.filter((item) => item.status === 1);
+          } catch (error) {
+            console.log(error);
+            return [];
+          }
+        },
+        params: {
+          messageType: ({ values }) => Reflect.get(values, 'messageType'),
+        },
+        immediate: true,
+        labelField: 'configName',
+        valueField: 'id',
+        getPopupContainer: () => document.body,
+      };
     },
     },
   },
   },
   {
   {

@@ -9,12 +9,17 @@
     @register="registerDrawer"
     @register="registerDrawer"
     @ok="handleSubmit"
     @ok="handleSubmit"
     @close="handleClose"
     @close="handleClose"
+    wrapClassName="report-drawer"
   >
   >
     <BasicForm @register="registerForm">
     <BasicForm @register="registerForm">
       <!-- 设备选择 -->
       <!-- 设备选择 -->
       <template #devices="{ model }">
       <template #devices="{ model }">
         <span class="hidden">{{ handleChangeOrg(model['organizationId']) }}</span>
         <span class="hidden">{{ handleChangeOrg(model['organizationId']) }}</span>
-        <SelectDevice ref="selectDeviceRef" :selectOptions="selectOptions" />
+        <SelectDevice
+          ref="selectDeviceRef"
+          :selectOptions="selectOptions"
+          v-model:disabled="deviceDisabled"
+        />
       </template>
       </template>
     </BasicForm>
     </BasicForm>
   </BasicDrawer>
   </BasicDrawer>
@@ -82,12 +87,14 @@
     }
     }
   );
   );
 
 
-  const [registerForm, { validate, resetFields, setFieldsValue, updateSchema }] = useForm({
-    labelWidth: 120,
-    schemas: formSchema,
-    showActionButtonGroup: false,
-    fieldMapToTime: [[SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS]]],
-  });
+  const [registerForm, { validate, resetFields, setFieldsValue, updateSchema, setProps }] = useForm(
+    {
+      labelWidth: 120,
+      schemas: formSchema,
+      showActionButtonGroup: false,
+      fieldMapToTime: [[SchemaFiled.DATE_RANGE, [SchemaFiled.START_TS, SchemaFiled.END_TS]]],
+    }
+  );
 
 
   const businessText = ref('');
   const businessText = ref('');
 
 
@@ -95,11 +102,27 @@
     data: {},
     data: {},
   });
   });
 
 
+  const deviceDisabled = ref<boolean>(false);
+
   const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
   const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
     try {
     try {
       await nextTick();
       await nextTick();
       handleClose();
       handleClose();
       businessText.value = data.text;
       businessText.value = data.text;
+      if (businessText.value == BusinessReportConfigTextEnum.BUSINESS_VIEW_TEXT) {
+        deviceDisabled.value = true;
+        setProps({ disabled: true });
+        updateSchema({
+          field: 'organizationId',
+          componentProps: { apiTreeSelectProps: { disabled: true } },
+        });
+      } else {
+        deviceDisabled.value = false;
+        updateSchema({
+          field: 'organizationId',
+          componentProps: { apiTreeSelectProps: { disabled: false } },
+        });
+      }
       setFieldsValue(setDefaultTime());
       setFieldsValue(setDefaultTime());
       updateSchema(disableCustomWeekly(BusinessExecutewayEnum.BUSINESS_EXECUTEWAY_IMMEDIATE));
       updateSchema(disableCustomWeekly(BusinessExecutewayEnum.BUSINESS_EXECUTEWAY_IMMEDIATE));
       setDrawerProps(setPropsForModal(businessText.value));
       setDrawerProps(setPropsForModal(businessText.value));
@@ -177,3 +200,15 @@
     selectDeviceRef.value?.resetValue();
     selectDeviceRef.value?.resetValue();
   };
   };
 </script>
 </script>
+
+<style lang="less">
+  .report-drawer {
+    .ant-form-item-control-input-content {
+      > div {
+        > div {
+          @apply w-full;
+        }
+      }
+    }
+  }
+</style>

 <template>
 <template>
-  <div
-    class="flex"
-    v-for="param in dynamicInput.params"
-    :key="param.key"
-    style="margin-top: 1.25vh"
-  >
-    <a-input :disabled="true" v-model:value="param.name" style="width: 38%; margin-bottom: 5px" />
+  <div v-for="param in dynamicInput.params" :key="param.key" class="mt-4 flex gap-2">
+    <a-input :disabled="true" v-model:value="param.name" class="w-1/2 flex-1" />
     <Select
     <Select
       placeholder="请选择设备属性"
       placeholder="请选择设备属性"
       v-model:value="param.attributes"
       v-model:value="param.attributes"
-      style="width: 38%; margin-left: 1.8vw"
+      class="!w-1/2"
       :options="selectOptions"
       :options="selectOptions"
+      :disabled="disabled"
       @change="emitChange"
       @change="emitChange"
       mode="multiple"
       mode="multiple"
       allowClear
       allowClear
@@ -31,6 +27,10 @@
 
 
   const props = defineProps({
   const props = defineProps({
     value: propTypes.object.def({}),
     value: propTypes.object.def({}),
+    disabled: {
+      type: Boolean,
+      required: false,
+    },
   });
   });
 
 
   const selectOptions: any = ref([]);
   const selectOptions: any = ref([]);

@@ -4,12 +4,19 @@
     v-model:value="selectValue"
     v-model:value="selectValue"
     style="width: 100%"
     style="width: 100%"
     :options="selectOptions"
     :options="selectOptions"
+    v-bind="createPickerSearch()"
     @change="handleDeviceChange"
     @change="handleDeviceChange"
+    :disabled="disabled"
     mode="multiple"
     mode="multiple"
     labelInValue
     labelInValue
   />
   />
   <template v-for="(item, index) in deviceList" :key="item.value">
   <template v-for="(item, index) in deviceList" :key="item.value">
-    <SelectAttributes :ref="bindDeviceRef.deviceAttrRef" :value="item" :index="index" />
+    <SelectAttributes
+      :ref="bindDeviceRef.deviceAttrRef"
+      :value="item"
+      :index="index"
+      :disabled="disabled"
+    />
   </template>
   </template>
 </template>
 </template>
 <script lang="ts" setup name="SelectDevice">
 <script lang="ts" setup name="SelectDevice">
@@ -17,12 +24,17 @@
   import { Select } from 'ant-design-vue';
   import { Select } from 'ant-design-vue';
   import SelectAttributes from './SelectAttributes.vue';
   import SelectAttributes from './SelectAttributes.vue';
   import { TDeviceList, TSelectOption } from '../type';
   import { TDeviceList, TSelectOption } from '../type';
+  import { createPickerSearch } from '/@/utils/pickerSearch';
 
 
   const props = defineProps({
   const props = defineProps({
     selectOptions: {
     selectOptions: {
       type: Array as PropType<TSelectOption[]>,
       type: Array as PropType<TSelectOption[]>,
       required: true,
       required: true,
     },
     },
+    disabled: {
+      type: Boolean,
+      required: false,
+    },
   });
   });
 
 
   const selectValue = ref([]);
   const selectValue = ref([]);

@@ -465,14 +465,15 @@ export const formSchema: BFormSchema[] = [
   },
   },
   {
   {
     field: 'dateGroupGap',
     field: 'dateGroupGap',
-    label: '分组间隔',
+    label: '间隔时间',
     component: 'Select',
     component: 'Select',
     colProps: { span: 24 },
     colProps: { span: 24 },
-    dynamicRules: ({ model }) => {
+    dynamicRules: () => {
       return [
       return [
         {
         {
-          required: model[SchemaFiled.AGG] !== AggregateDataEnum.NONE,
-          message: '分组间隔为必填项',
+          // required: model[SchemaFiled.AGG] !== AggregateDataEnum.NONE,
+          required: true,
+          message: '间隔时间为必填项',
           type: 'number',
           type: 'number',
         },
         },
       ];
       ];

@@ -41,7 +41,6 @@
   const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
   const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
     setModalProps({ loading: true });
     setModalProps({ loading: true });
     const { text, record } = data || {};
     const { text, record } = data || {};
-    console.log(data, 'data');
     isUpdate.value = record ? true : false;
     isUpdate.value = record ? true : false;
     ruleTile.value = text;
     ruleTile.value = text;
     const { name, additionalInfo, debugMode } = record || {};
     const { name, additionalInfo, debugMode } = record || {};

@@ -31,7 +31,6 @@ export const searchFormSchema: FormSchema[] = [
     field: 'textSearch',
     field: 'textSearch',
     label: '名称',
     label: '名称',
     component: 'Input',
     component: 'Input',
-
     colProps: { span: 8 },
     colProps: { span: 8 },
     componentProps: {
     componentProps: {
       placeholder: '请输入名称',
       placeholder: '请输入名称',

@@ -30,11 +30,6 @@
               icon: 'ant-design:eye-outlined',
               icon: 'ant-design:eye-outlined',
               onClick: handleView.bind(null, record),
               onClick: handleView.bind(null, record),
             },
             },
-            // {
-            //   label: '详情',
-            //   icon: 'ant-design:field-time-outlined',
-            //   onClick: handleDetail.bind(null, record),
-            // },
             {
             {
               label: '编辑',
               label: '编辑',
               icon: 'clarity:note-edit-line',
               icon: 'clarity:note-edit-line',
@@ -103,9 +98,6 @@
   import { useRouter } from 'vue-router';
   import { useRouter } from 'vue-router';
   import { ref } from 'vue';
   import { ref } from 'vue';
   import { isObject } from '/@/utils/is';
   import { isObject } from '/@/utils/is';
-  // import { ChainDetailDrawer } from './chainDetail/index';
-  // import { useDrawer } from '/@/components/Drawer';
-
   const [registerModal, { openModal }] = useModal();
   const [registerModal, { openModal }] = useModal();
   const { createMessage } = useMessage();
   const { createMessage } = useMessage();
   const { hasPermission } = usePermission();
   const { hasPermission } = usePermission();

@@ -4,18 +4,21 @@
       <template #uploadFilesSlot="{ model }">
       <template #uploadFilesSlot="{ model }">
         <UploadFile
         <UploadFile
           :url="credentialsFile.caCertFileName"
           :url="credentialsFile.caCertFileName"
+          :disabled="disabled"
           @fileUrlEmit="handleFileUrlEmitH"
           @fileUrlEmit="handleFileUrlEmitH"
           v-show="model['type'] === CredentialsEnum.IS_PEM"
           v-show="model['type'] === CredentialsEnum.IS_PEM"
         />
         />
         <div class="h-4"></div>
         <div class="h-4"></div>
         <UploadFile
         <UploadFile
           :url="credentialsFile.certFileName"
           :url="credentialsFile.certFileName"
+          :disabled="disabled"
           @fileUrlEmit="handleFileUrlEmitC"
           @fileUrlEmit="handleFileUrlEmitC"
           v-show="model['type'] === CredentialsEnum.IS_PEM"
           v-show="model['type'] === CredentialsEnum.IS_PEM"
         />
         />
         <div class="h-4"></div>
         <div class="h-4"></div>
         <UploadFile
         <UploadFile
           :url="credentialsFile.privateKeyFileName"
           :url="credentialsFile.privateKeyFileName"
+          :disabled="disabled"
           @fileUrlEmit="handleFileUrlEmitB"
           @fileUrlEmit="handleFileUrlEmitB"
           v-show="model['type'] === CredentialsEnum.IS_PEM"
           v-show="model['type'] === CredentialsEnum.IS_PEM"
         /> </template
         /> </template
@@ -23,7 +26,7 @@
   </div>
   </div>
 </template>
 </template>
 <script lang="ts" setup name="DataFlowMethodIsApi">
 <script lang="ts" setup name="DataFlowMethodIsApi">
-  import { reactive } from 'vue';
+  import { reactive, ref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { BasicForm, useForm } from '/@/components/Form';
   import { modeApiForm } from './config';
   import { modeApiForm } from './config';
   import { modelFormPublicConfig } from '../../../dataflowmodal/config';
   import { modelFormPublicConfig } from '../../../dataflowmodal/config';
@@ -36,10 +39,11 @@
     privateKeyFileName: undefined,
     privateKeyFileName: undefined,
   });
   });
 
 
-  const [register, { validateFields, setFieldsValue, resetFields }] = useForm({
-    schemas: modeApiForm,
-    ...modelFormPublicConfig,
-  });
+  const [register, { validateFields, setFieldsValue, resetFields, setProps, updateSchema }] =
+    useForm({
+      schemas: modeApiForm,
+      ...modelFormPublicConfig,
+    });
 
 
   const handleFileUrlEmitH = (fileUrl) => (credentialsFile.caCertFileName = fileUrl);
   const handleFileUrlEmitH = (fileUrl) => (credentialsFile.caCertFileName = fileUrl);
 
 
@@ -78,10 +82,24 @@
   };
   };
 
 
   const resetValue = () => resetFields();
   const resetValue = () => resetFields();
+
+  const disabled = ref<boolean>(false);
+  const setDisabledProps = (value) => {
+    setProps(value);
+    disabled.value = true;
+    updateSchema({ field: 'headers', componentProps: { disabled: false } });
+  };
+
+  const setCancelDisabled = () => {
+    updateSchema({ field: 'headers', componentProps: { disabled: false } });
+  };
+
   defineExpose({
   defineExpose({
     getValue,
     getValue,
     setValue,
     setValue,
     resetValue,
     resetValue,
+    setDisabledProps,
+    setCancelDisabled,
   });
   });
 </script>
 </script>
 
 

@@ -29,7 +29,7 @@ class ApiFormPartialConfig {
     return [
     return [
       { label: 'Anonymous', value: 'anonymous' },
       { label: 'Anonymous', value: 'anonymous' },
       { label: 'Basic', value: 'basic' },
       { label: 'Basic', value: 'basic' },
-      { label: 'PEM', value: 'pem' },
+      { label: 'PEM', value: 'cert.PEM' },
     ];
     ];
   }
   }
 }
 }

@@ -8,7 +8,7 @@
   import { modelKafkaForm } from './config';
   import { modelKafkaForm } from './config';
   import { modelFormPublicConfig } from '../../../dataflowmodal/config';
   import { modelFormPublicConfig } from '../../../dataflowmodal/config';
 
 
-  const [register, { validate, setFieldsValue, resetFields }] = useForm({
+  const [register, { validate, setFieldsValue, resetFields, setProps, updateSchema }] = useForm({
     schemas: modelKafkaForm,
     schemas: modelKafkaForm,
     ...modelFormPublicConfig,
     ...modelFormPublicConfig,
   });
   });
@@ -19,13 +19,28 @@
     return values;
     return values;
   };
   };
 
 
-  const setValue = (value) => setFieldsValue(value);
+  const setValue = (value) => {
+    setFieldsValue(value);
+  };
+
+  // 禁用表单
+  const setDisabledProps = (value) => {
+    setProps(value);
+    updateSchema({ field: 'otherProperties', componentProps: { disabled: true } });
+  };
+
+  // 取消禁用
+  const setCancelDisabled = () => {
+    updateSchema({ field: 'otherProperties', componentProps: { disabled: false } });
+  };
 
 
   const resetValue = () => resetFields();
   const resetValue = () => resetFields();
   defineExpose({
   defineExpose({
     getValue,
     getValue,
     setValue,
     setValue,
     resetValue,
     resetValue,
+    setDisabledProps,
+    setCancelDisabled,
   });
   });
 </script>
 </script>
 
 

@@ -4,18 +4,21 @@
       <template #uploadFilesSlot="{ model }">
       <template #uploadFilesSlot="{ model }">
         <UploadFile
         <UploadFile
           :url="credentialsFile.caCertFileName"
           :url="credentialsFile.caCertFileName"
+          :disabled="disabled"
           @fileUrlEmit="handleFileUrlEmitH"
           @fileUrlEmit="handleFileUrlEmitH"
           v-show="model['type'] === CredentialsEnum.IS_PEM"
           v-show="model['type'] === CredentialsEnum.IS_PEM"
         />
         />
         <div class="h-4"></div>
         <div class="h-4"></div>
         <UploadFile
         <UploadFile
           :url="credentialsFile.certFileName"
           :url="credentialsFile.certFileName"
+          :disabled="disabled"
           @fileUrlEmit="handleFileUrlEmitC"
           @fileUrlEmit="handleFileUrlEmitC"
           v-show="model['type'] === CredentialsEnum.IS_PEM"
           v-show="model['type'] === CredentialsEnum.IS_PEM"
         />
         />
         <div class="h-4"></div>
         <div class="h-4"></div>
         <UploadFile
         <UploadFile
           :url="credentialsFile.privateKeyFileName"
           :url="credentialsFile.privateKeyFileName"
+          :disabled="disabled"
           @fileUrlEmit="handleFileUrlEmitB"
           @fileUrlEmit="handleFileUrlEmitB"
           v-show="model['type'] === CredentialsEnum.IS_PEM"
           v-show="model['type'] === CredentialsEnum.IS_PEM"
         />
         />
@@ -24,7 +27,7 @@
   </div>
   </div>
 </template>
 </template>
 <script lang="ts" setup name="DataFlowMethodIsMqtt">
 <script lang="ts" setup name="DataFlowMethodIsMqtt">
-  import { reactive } from 'vue';
+  import { reactive, ref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { BasicForm, useForm } from '/@/components/Form';
   import { modeMqttForm } from './config';
   import { modeMqttForm } from './config';
   import { UploadFile } from '../../../uploadfile';
   import { UploadFile } from '../../../uploadfile';
@@ -37,7 +40,7 @@
     privateKeyFileName: undefined,
     privateKeyFileName: undefined,
   });
   });
 
 
-  const [register, { validateFields, setFieldsValue, resetFields }] = useForm({
+  const [register, { validateFields, setFieldsValue, resetFields, setProps }] = useForm({
     schemas: modeMqttForm,
     schemas: modeMqttForm,
     ...modelFormPublicConfig,
     ...modelFormPublicConfig,
   });
   });
@@ -81,11 +84,18 @@
     });
     });
   };
   };
 
 
+  const disabled = ref<boolean>(false);
+  const setDisabledProps = (value) => {
+    setProps(value);
+    disabled.value = true;
+  };
+
   const resetValue = () => resetFields();
   const resetValue = () => resetFields();
   defineExpose({
   defineExpose({
     getValue,
     getValue,
     setValue,
     setValue,
     resetValue,
     resetValue,
+    setDisabledProps,
   });
   });
 </script>
 </script>
 
 

@@ -145,7 +145,6 @@ export const modeMqttForm: FormSchema[] = [
         options: MqttFormPartialConfig.getType(),
         options: MqttFormPartialConfig.getType(),
         onChange(e) {
         onChange(e) {
           if (e) {
           if (e) {
-            console.log('执行');
             setFieldsValue({
             setFieldsValue({
               password: undefined,
               password: undefined,
               username: undefined,
               username: undefined,

@@ -8,10 +8,11 @@
   import { modeRabbitMqForm } from './config';
   import { modeRabbitMqForm } from './config';
   import { modelFormPublicConfig } from '../../../dataflowmodal/config';
   import { modelFormPublicConfig } from '../../../dataflowmodal/config';
 
 
-  const [register, { validateFields, setFieldsValue, resetFields }] = useForm({
-    schemas: modeRabbitMqForm,
-    ...modelFormPublicConfig,
-  });
+  const [register, { validateFields, setFieldsValue, resetFields, setProps, updateSchema }] =
+    useForm({
+      schemas: modeRabbitMqForm,
+      ...modelFormPublicConfig,
+    });
 
 
   const getValue = async () => {
   const getValue = async () => {
     const values = await validateFields();
     const values = await validateFields();
@@ -22,10 +23,22 @@
   const setValue = (value) => setFieldsValue(value);
   const setValue = (value) => setFieldsValue(value);
 
 
   const resetValue = () => resetFields();
   const resetValue = () => resetFields();
+
+  const setDisabledProps = (value) => {
+    setProps(value);
+    updateSchema({ field: 'clientProperties', componentProps: { disabled: true } });
+  };
+
+  const setCancelDisabled = () => {
+    updateSchema({ field: 'clientProperties', componentProps: { disabled: false } });
+  };
+
   defineExpose({
   defineExpose({
     getValue,
     getValue,
     setValue,
     setValue,
     resetValue,
     resetValue,
+    setDisabledProps,
+    setCancelDisabled,
   });
   });
 </script>
 </script>
 <style lang="less" scoped></style>
 <style lang="less" scoped></style>

@@ -16,8 +16,9 @@
   import { BasicInfoFormField } from './enum';
   import { BasicInfoFormField } from './enum';
   import { BasicInfoRecord } from './types';
   import { BasicInfoRecord } from './types';
   import { Button } from 'ant-design-vue';
   import { Button } from 'ant-design-vue';
+  import { ref, unref } from 'vue';
 
 
-  const props = defineProps({
+  defineProps({
     saveContent: {
     saveContent: {
       type: Function,
       type: Function,
     },
     },
@@ -25,8 +26,9 @@
 
 
   const emit = defineEmits(['currentDataFlowMethodEmitNext']);
   const emit = defineEmits(['currentDataFlowMethodEmitNext']);
 
 
-  const [register, { validateFields, setFieldsValue, resetFields }] = useForm({
-    schemas: modeForm(props.saveContent),
+  const disabled = ref<boolean>(false);
+  const [register, { validateFields, setFieldsValue, resetFields, setProps }] = useForm({
+    schemas: modeForm(unref(disabled)),
     ...modelFormPublicConfig,
     ...modelFormPublicConfig,
   });
   });
 
 
@@ -61,11 +63,21 @@
     emit('currentDataFlowMethodEmitNext', getValue());
     emit('currentDataFlowMethodEmitNext', getValue());
   };
   };
 
 
+  const setDisabledProps = (value) => {
+    setProps(value);
+    disabled.value = false;
+  };
+  const setCancelDisabled = () => {
+    disabled.value = false;
+  };
+
   const resetValue = () => resetFields();
   const resetValue = () => resetFields();
   defineExpose({
   defineExpose({
     getValue,
     getValue,
     setValue,
     setValue,
     resetValue,
     resetValue,
+    setDisabledProps,
+    setCancelDisabled,
   });
   });
 </script>
 </script>
 <style lang="less" scoped>
 <style lang="less" scoped>

@@ -37,7 +37,7 @@
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { add } from '/@/components/Form/src/componentMap';
   import { add } from '/@/components/Form/src/componentMap';
   import TransferModal from '/@/components/Form/src/components/TransferModal.vue';
   import TransferModal from '/@/components/Form/src/components/TransferModal.vue';
-  import TransferTableModal from '/@/components/Form/src/components/TransferTableModal.vue';
+  import TransferTableModal from './TransferTableModal.vue';
   import { DataFlowMethod, DataFlowParams } from './index';
   import { DataFlowMethod, DataFlowParams } from './index';
   import { stepConfig, removeFieldByModeForm } from './config';
   import { stepConfig, removeFieldByModeForm } from './config';
   import { postAddConvertApi } from '/@/api/datamanager/dataManagerApi';
   import { postAddConvertApi } from '/@/api/datamanager/dataManagerApi';
@@ -74,6 +74,11 @@
     resetValue();
     resetValue();
     const { text, record } = data;
     const { text, record } = data;
     businessText.value = text;
     businessText.value = text;
+    if (businessText.value == BusinessDataFlowTextEnum.BUSINESS_MODAL_VIEW_TEXT) {
+      dataFlowMethodRef.value?.setDisabledProps({ disabled: true });
+    } else {
+      dataFlowMethodRef.value?.setCancelDisabled();
+    }
     restData.data = record;
     restData.data = record;
     setModalProps(modalProps(businessText.value));
     setModalProps(modalProps(businessText.value));
     if (!record) return;
     if (!record) return;
@@ -154,13 +159,18 @@
     dataFlowParamsRef.value?.setValue({
     dataFlowParamsRef.value?.setValue({
       ...record,
       ...record,
       ...record?.configuration,
       ...record?.configuration,
-      name: record?.name,
       description: record?.configuration.description || record?.additionalInfo?.description,
       description: record?.configuration.description || record?.additionalInfo?.description,
     });
     });
   };
   };
 
 
   //下一步
   //下一步
   const handleNextDataFlowParams = async (value) => {
   const handleNextDataFlowParams = async (value) => {
+    //判断是否是查看 查看禁用表单
+    if (businessText.value == BusinessDataFlowTextEnum.BUSINESS_MODAL_VIEW_TEXT) {
+      dataFlowParamsRef.value?.setProps();
+    } else {
+      dataFlowParamsRef.value?.setCancelDisabled();
+    }
     value
     value
       .then(async (res) => {
       .then(async (res) => {
         currentStep.value = 1;
         currentStep.value = 1;

@@ -104,10 +104,35 @@
     if (!findDateFlow) return;
     if (!findDateFlow) return;
     findDateFlow[3](0);
     findDateFlow[3](0);
   };
   };
+
+  const setProps = async () => {
+    await nextTick();
+    props.dataFlowType === BusinessDataFlowMethodEnum.DATAFLOW_METHOD_KAFKA &&
+      dataFlowMethodIsKafkaRef.value?.setDisabledProps({ disabled: true });
+    props.dataFlowType === BusinessDataFlowMethodEnum.DATAFLOW_METHOD_MQTT &&
+      dataFlowMethodIsMqttRef.value?.setDisabledProps({ disabled: true });
+    props.dataFlowType === BusinessDataFlowMethodEnum.DATAFLOW_METHOD_RABBITMQ &&
+      dataFlowMethodIsRabbitMqRef.value?.setDisabledProps({ disabled: true });
+    props.dataFlowType === BusinessDataFlowMethodEnum.DATAFLOW_METHOD_REST_API &&
+      dataFlowMethodIsApiRef.value?.setDisabledProps({ disabled: true });
+  };
+
+  const setCancelDisabled = async () => {
+    await nextTick();
+    props.dataFlowType === BusinessDataFlowMethodEnum.DATAFLOW_METHOD_KAFKA &&
+      dataFlowMethodIsKafkaRef.value?.setCancelDisabled();
+    props.dataFlowType === BusinessDataFlowMethodEnum.DATAFLOW_METHOD_RABBITMQ &&
+      dataFlowMethodIsRabbitMqRef.value?.setCancelDisabled();
+    props.dataFlowType === BusinessDataFlowMethodEnum.DATAFLOW_METHOD_REST_API &&
+      dataFlowMethodIsApiRef.value?.setCancelDisabled();
+  };
+
   defineExpose({
   defineExpose({
     getValue,
     getValue,
     setValue,
     setValue,
     resetValue,
     resetValue,
+    setCancelDisabled,
+    setProps,
   });
   });
 </script>
 </script>
 <style lang="less" scoped>
 <style lang="less" scoped>

+import { h, unref } from 'vue';
+import { findDictItemByCode } from '/@/api/system/dict';
+import { FETCH_SETTING } from '/@/components/Table/src/const';
+import { DeviceStatusEnum, DeviceStatusNameEnum, DeviceTypeNameEnum } from './enum';
+import { Tag } from 'ant-design-vue';
+import { BasicColumn, BasicTableProps, FormSchema } from '/@/components/Table';
+import { useClipboard } from '@vueuse/core';
+import { useMessage } from '/@/hooks/web/useMessage';
+
+export const deviceTableFormSchema: FormSchema[] = [
+  {
+    field: 'name',
+    label: '设备名称',
+    component: 'Input',
+    colProps: { span: 9 },
+    componentProps: {
+      placeholder: '请输入设备名称',
+    },
+  },
+  {
+    field: 'deviceType',
+    label: '设备类型',
+    component: 'ApiSelect',
+    colProps: { span: 9 },
+    componentProps: {
+      placeholder: '请选择设备类型',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'device_type',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
+    },
+  },
+];
+
+const { copied, copy } = useClipboard({ legacy: true });
+
+const { createMessage } = useMessage();
+
+export const deviceTableColumn: BasicColumn[] = [
+  {
+    title: '状态',
+    dataIndex: 'deviceState',
+    customRender: ({ text }) => {
+      return h(
+        Tag,
+        {
+          color:
+            text === DeviceStatusEnum.INACTIVE
+              ? 'warning'
+              : text === DeviceStatusEnum.OFFLINE
+              ? 'error'
+              : 'success',
+        },
+        () => DeviceStatusNameEnum[text]
+      );
+    },
+  },
+  {
+    title: '别名/设备名称',
+    dataIndex: 'name',
+    customRender: ({ record }) => {
+      return h('div', [
+        h(
+          'div',
+          {
+            class: 'cursor-pointer',
+            onClick: async () => {
+              await copy(record.name);
+              if (unref(copied)) createMessage.success('复制成功~');
+            },
+          },
+          [
+            record.alias && h('div', { class: 'truncate' }, record.alias),
+            h('div', { class: 'text-blue-400 truncate' }, record.name),
+          ]
+        ),
+      ]);
+    },
+  },
+  {
+    title: '设备类型',
+    dataIndex: 'deviceType',
+    customRender: ({ text }) => {
+      return h(Tag, { color: 'success' }, () => DeviceTypeNameEnum[text]);
+    },
+  },
+  {
+    title: '所属产品',
+    dataIndex: 'deviceProfile.name',
+  },
+  {
+    title: '所属组织',
+    dataIndex: 'organizationDTO.name',
+  },
+];
+
+export const TransferTableProps: BasicTableProps = {
+  formConfig: {
+    layout: 'inline',
+    labelWidth: 80,
+    schemas: deviceTableFormSchema,
+    actionColOptions: { span: 6 },
+  },
+  size: 'small',
+  maxHeight: 240,
+  useSearchForm: true,
+  columns: deviceTableColumn,
+  showIndexColumn: false,
+  fetchSetting: FETCH_SETTING,
+} as BasicTableProps;

+<script lang="ts" setup>
+  import { Button, Tabs, Tag } from 'ant-design-vue';
+  import { remove, uniqBy, cloneDeep } from 'lodash';
+  import { computed, nextTick, onMounted, ref, unref, toRaw } from 'vue';
+  import {
+    deviceTableColumn,
+    deviceTableFormSchema,
+    TransferTableProps,
+  } from './TransferTableModal.config';
+  import { devicePage } from '/@/api/device/deviceManager';
+  import { DeviceModel as RawDeviceModal } from '/@/api/device/model/deviceModel';
+  import { BasicModal, useModal } from '/@/components/Modal';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { FETCH_SETTING } from '/@/components/Table/src/const';
+  import { useDesign } from '/@/hooks/web/useDesign';
+  import { isFunction } from '/@/utils/is';
+
+  interface DeviceModel extends RawDeviceModal {
+    disabled?: boolean;
+  }
+
+  const props = withDefaults(
+    defineProps<{
+      getPendingTableParams: (params: Recordable) => any;
+      getSelectedTableParams: (params: Recordable) => any;
+      value?: (Recordable & DeviceModel)[];
+      maxTagLength?: number;
+      openModalValidate?: () => boolean;
+      primaryKey?: string;
+      transformValue?: (list: Recordable[]) => any;
+      disabled?: boolean;
+    }>(),
+    {
+      value: () => [],
+      maxTagLength: 2,
+      primaryKey: 'tbDeviceId',
+    }
+  );
+
+  const emit = defineEmits(['update:value']);
+
+  enum Active {
+    PENDING = 'pending',
+    SELECTED = 'selected',
+  }
+
+  const activeKey = ref(Active.PENDING);
+
+  const { prefixCls } = useDesign('transfer-table-modal');
+
+  const pendingTotalList = ref<DeviceModel[]>([]);
+
+  const pendingConfirmQueue = ref<DeviceModel[]>([]);
+
+  const selectedTotalList = ref<DeviceModel[]>([]);
+
+  const selectedConfirmQueue = ref<DeviceModel[]>([]);
+
+  const getShowTagOptions = computed(() => {
+    const { maxTagLength } = props;
+    return unref(selectedTotalList).slice(0, maxTagLength);
+  });
+
+  const getSurplusOptionsLength = computed(() => {
+    const { maxTagLength } = props;
+    const surplusValue = unref(selectedTotalList).length - maxTagLength;
+    return surplusValue < 0 ? 0 : surplusValue;
+  });
+
+  // const pendingListCount = computed(() => {
+  //   const { value } = props;
+  //   const selectedList = unref(pendingTotalList).filter((item) => value.includes(item.id));
+  //   return unref(pendingTotalList).length - selectedList.length;
+  // });
+
+  const [registerModal, { openModal }] = useModal();
+
+  const [regsterPendingTable, pendingTableActionType] = useTable({
+    ...TransferTableProps,
+    rowKey: props.primaryKey,
+    api: devicePage,
+    immediate: false,
+    clickToRowSelect: false,
+    beforeFetch: (params) => {
+      const { getPendingTableParams } = props;
+      const data = getPendingTableParams?.(params) || {};
+      Object.assign(params, { ...data, selected: false });
+      return params;
+    },
+    afterFetch: (list: DeviceModel[]) => {
+      pendingTotalList.value = list;
+      return unref(pendingTotalList);
+    },
+    pagination: { hideOnSinglePage: false },
+    rowSelection: {
+      type: 'checkbox',
+      getCheckboxProps: (record: DeviceModel) => {
+        const { primaryKey } = props;
+        const checked = unref(selectedTotalList).map((item) => item[primaryKey]);
+        return {
+          disabled: checked.includes(record[props.primaryKey]!),
+        };
+      },
+      onSelect: (_record: Recordable, _selected: boolean, selectedRows: DeviceModel[]) => {
+        const { primaryKey } = props;
+        const checked = unref(selectedTotalList).map((item) => item[primaryKey]);
+        pendingConfirmQueue.value = selectedRows.filter(
+          (item) => !checked.includes(item[primaryKey]!)
+        );
+      },
+      onSelectAll: (_selected: boolean, selectedRows: DeviceModel[]) => {
+        const { primaryKey } = props;
+        const checked = unref(selectedTotalList).map((item) => item[primaryKey]);
+        pendingConfirmQueue.value = selectedRows.filter(
+          (item) => !checked.includes(item[primaryKey]!)
+        );
+      },
+    },
+  });
+
+  const [registerSelectedTable, selectedTableActionType] = useTable({
+    formConfig: {
+      layout: 'inline',
+      labelWidth: 80,
+      schemas: deviceTableFormSchema,
+      actionColOptions: { span: 6 },
+    },
+    size: 'small',
+    maxHeight: 240,
+    useSearchForm: true,
+    columns: deviceTableColumn,
+    api: async (params) => {
+      const { name = '', deviceType = '' } = params || {};
+      const items = unref(selectedTotalList).filter((item) => {
+        return (
+          (item.name.toUpperCase().includes(name.toUpperCase()) ||
+            item.alias?.toUpperCase().includes(name.toUpperCase())) &&
+          item.deviceType.toUpperCase().includes(deviceType.toUpperCase())
+        );
+      });
+      return {
+        items,
+        total: items.length,
+      };
+    },
+    showIndexColumn: false,
+    pagination: { hideOnSinglePage: false },
+    fetchSetting: FETCH_SETTING,
+    rowKey: props.primaryKey,
+    dataSource: selectedTotalList,
+    clickToRowSelect: false,
+    beforeFetch: (params) => {
+      const { getSelectedTableParams } = props;
+      const data = getSelectedTableParams?.(params) || {};
+      Object.assign(params, { ...data, selected: false });
+      return params;
+    },
+    rowSelection: {
+      type: 'checkbox',
+      onSelect: (_record: Recordable, _selected: boolean, selectedRows: DeviceModel[]) => {
+        selectedConfirmQueue.value = selectedRows;
+      },
+      onSelectAll: (_selected: boolean, selectedRows: DeviceModel[]) => {
+        selectedConfirmQueue.value = selectedRows;
+      },
+    },
+  });
+
+  const handleTriggerUpdateValue = () => {
+    let list: Recordable[] = cloneDeep(toRaw(unref(selectedTotalList)));
+    const { transformValue } = props;
+    if (transformValue && isFunction(transformValue)) list = transformValue(list);
+
+    emit('update:value', list);
+  };
+
+  const handleSelected = () => {
+    const { primaryKey } = props;
+    const _list = [...unref(selectedTotalList), ...unref(pendingConfirmQueue)];
+    selectedTotalList.value = uniqBy(_list, primaryKey);
+    pendingConfirmQueue.value = [];
+
+    handleTriggerUpdateValue();
+    pendingTableActionType.setTableData([]);
+    nextTick(() => pendingTableActionType.setTableData(unref(pendingTotalList)));
+  };
+
+  const handleRemoveSelected = () => {
+    const { primaryKey } = props;
+    const selectedIds = unref(selectedConfirmQueue).map((selected) => selected[primaryKey]);
+    remove(unref(selectedTotalList), (item) => {
+      const flag = selectedIds.includes(item[primaryKey]);
+      if (flag) {
+        pendingTableActionType.deleteSelectRowByKey(item[primaryKey]);
+      }
+      return flag;
+    });
+
+    handleTriggerUpdateValue();
+
+    selectedTableActionType.clearSelectedRowKeys();
+    selectedConfirmQueue.value = [];
+    selectedTableActionType.reload();
+  };
+
+  const handleCheckoutPanel = async (key: Active) => {
+    if (key === Active.PENDING) {
+      pendingTableActionType.setTableData([]);
+      await nextTick();
+      pendingTableActionType.setTableData(unref(pendingTotalList));
+    } else {
+      await nextTick();
+      selectedTableActionType.reload();
+    }
+  };
+
+  const handleOpenModal = async () => {
+    const { openModalValidate } = props;
+
+    if (openModalValidate && isFunction(openModalValidate) && !openModalValidate()) return;
+
+    openModal(true);
+    await nextTick();
+    pendingTableActionType.reload();
+  };
+
+  onMounted(async () => {
+    const { getSelectedTableParams } = props;
+    const data = getSelectedTableParams?.({}) || {};
+    if (!data?.convertConfigId || !data?.deviceProfileIds) {
+      return;
+    }
+    const { items } = await devicePage({ page: 1, pageSize: 10, ...data, selected: true });
+    selectedTotalList.value = items;
+  });
+</script>
+
+<template>
+  <section>
+    <BasicModal
+      @register="registerModal"
+      title="穿梭表格"
+      width="60%"
+      :wrapClassName="prefixCls"
+      :showOkBtn="false"
+      cancelText="关闭"
+    >
+      <section class="bg-gray-100">
+        <Tabs v-model:active-key="activeKey" type="card" @change="handleCheckoutPanel">
+          <Tabs.TabPane :key="Active.PENDING">
+            <template #tab>
+              <div class="flex items-center justify-center">
+                <span>待选设备</span>
+                <!-- <Badge show-zero :count="pendingListCount" /> -->
+              </div>
+            </template>
+            <BasicTable @register="regsterPendingTable">
+              <template #toolbar>
+                <section class="flex w-full justify-end items-center">
+                  <!-- <Button type="primary">全选</Button> -->
+                  <div class="text-blue-400">
+                    <span class="mr-2">选择设备:</span>
+                    <span>{{ pendingConfirmQueue.length }}</span>
+                  </div>
+                </section>
+              </template>
+            </BasicTable>
+            <section class="flex justify-end px-4 pb-4">
+              <Button
+                type="primary"
+                @click="handleSelected"
+                :disabled="!pendingConfirmQueue.length"
+              >
+                <span>确定已选</span>
+              </Button>
+            </section>
+          </Tabs.TabPane>
+          <Tabs.TabPane :key="Active.SELECTED">
+            <template #tab>
+              <div class="flex items-center justify-center">
+                <span>已选设备</span>
+                <!-- <Badge show-zero :count="selectedTotalList.length" /> -->
+              </div>
+            </template>
+            <BasicTable @register="registerSelectedTable">
+              <template #toolbar>
+                <section class="flex w-full justify-end items-center">
+                  <div class="text-blue-400">
+                    <span class="mr-2">选择设备:</span>
+                    <span>{{ selectedConfirmQueue.length }}</span>
+                  </div>
+                </section>
+              </template>
+            </BasicTable>
+            <section class="flex justify-end px-4 pb-4">
+              <Button
+                type="primary"
+                :disabled="!selectedConfirmQueue.length"
+                @click="handleRemoveSelected"
+              >
+                <span>移除已选</span>
+              </Button>
+            </section>
+          </Tabs.TabPane>
+        </Tabs>
+      </section>
+    </BasicModal>
+    <Button @click="handleOpenModal" type="link" :disabled="disabled">
+      <span v-if="!selectedTotalList.length">选择设备</span>
+      <div v-if="selectedTotalList.length">
+        <Tag
+          class="!px-2 !py-1 !bg-gray-50 !border-gray-100"
+          v-for="item in getShowTagOptions"
+          :key="item[primaryKey]"
+        >
+          <span>
+            {{ item.alias || item.name }}
+          </span>
+        </Tag>
+        <Tag class="!px-2 !py-1 !bg-gray-50 !border-gray-100" v-if="getSurplusOptionsLength">
+          <span> +{{ getSurplusOptionsLength }}... </span>
+        </Tag>
+      </div>
+    </Button>
+  </section>
+</template>
+
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-transfer-table-modal';
+
+  .@{prefix-cls} {
+    .vben-basic-table {
+      padding-top: 0;
+    }
+
+    .vben-basic-form > .ant-row {
+      width: 100%;
+    }
+
+    .ant-tabs-top-bar {
+      background-color: #fff;
+    }
+
+    .ant-table-placeholder {
+      height: auto !important;
+    }
+  }
+</style>

 import { FormSchema } from '/@/components/Form';
 import { FormSchema } from '/@/components/Form';
 import { findDictItemByCode } from '/@/api/system/dict';
 import { findDictItemByCode } from '/@/api/system/dict';
-import { h, unref } from 'vue';
 import { getDeviceProfile } from '/@/api/alarm/position';
 import { getDeviceProfile } from '/@/api/alarm/position';
-import { BasicColumn, BasicTableProps } from '/@/components/Table';
-import { devicePage } from '/@/api/device/deviceManager';
-import { Tag } from 'ant-design-vue';
+import { BasicInfoFormField, DataSourceType } from '../enum';
 import { DeviceRecord } from '/@/api/device/model/deviceModel';
 import { DeviceRecord } from '/@/api/device/model/deviceModel';
-import { FETCH_SETTING } from '/@/components/Table/src/const';
 import { useMessage } from '/@/hooks/web/useMessage';
 import { useMessage } from '/@/hooks/web/useMessage';
-import {
-  BasicInfoFormField,
-  DataSourceType,
-  DeviceStatusEnum,
-  DeviceStatusNameEnum,
-  DeviceTypeNameEnum,
-} from '../enum';
-import { useClipboard } from '@vueuse/core';
 
 
 export const stepConfig = ['选择流转方式', '完善配置参数'];
 export const stepConfig = ['选择流转方式', '完善配置参数'];
 
 
 export const removeFieldByModeForm = ['name', 'description'];
 export const removeFieldByModeForm = ['name', 'description'];
 
 
-//表单通用配置
-export const modelFormPublicConfig = {
-  labelWidth: 120,
-  actionColOptions: {
-    span: 14,
-  },
-  showResetButton: false,
-  showSubmitButton: false,
-};
-
 const handleGroupDevice = (options: DeviceRecord[]) => {
 const handleGroupDevice = (options: DeviceRecord[]) => {
   const map = new Map<string, string[]>();
   const map = new Map<string, string[]>();
   options.forEach((item) => {
   options.forEach((item) => {
@@ -46,111 +24,18 @@ const handleGroupDevice = (options: DeviceRecord[]) => {
   return value;
   return value;
 };
 };
 
 
-const deviceTableFormSchema: FormSchema[] = [
-  {
-    field: 'name',
-    label: '设备名称',
-    component: 'Input',
-    colProps: { span: 9 },
-    componentProps: {
-      placeholder: '请输入设备名称',
-    },
-  },
-  {
-    field: 'deviceType',
-    label: '设备类型',
-    component: 'ApiSelect',
-    colProps: { span: 9 },
-    componentProps: {
-      placeholder: '请选择设备类型',
-      api: findDictItemByCode,
-      params: {
-        dictCode: 'device_type',
-      },
-      labelField: 'itemText',
-      valueField: 'itemValue',
-    },
+//表单通用配置
+export const modelFormPublicConfig = {
+  labelWidth: 120,
+  actionColOptions: {
+    span: 14,
   },
   },
-];
-
-const { copied, copy } = useClipboard({ legacy: true });
+  showResetButton: false,
+  showSubmitButton: false,
+};
 
 
 const { createMessage } = useMessage();
 const { createMessage } = useMessage();
-
-const deviceTableColumn: BasicColumn[] = [
-  {
-    title: '状态',
-    dataIndex: 'deviceState',
-    customRender: ({ text }) => {
-      return h(
-        Tag,
-        {
-          color:
-            text === DeviceStatusEnum.INACTIVE
-              ? 'warning'
-              : text === DeviceStatusEnum.OFFLINE
-              ? 'error'
-              : 'success',
-        },
-        () => DeviceStatusNameEnum[text]
-      );
-    },
-  },
-  {
-    title: '别名/设备名称',
-    dataIndex: 'name',
-    customRender: ({ record }) => {
-      return h('div', [
-        h(
-          'div',
-          {
-            class: 'cursor-pointer',
-            onClick: async () => {
-              await copy(record.name);
-              if (unref(copied)) createMessage.success('复制成功~');
-            },
-          },
-          [
-            record.alias && h('div', { class: 'truncate' }, record.alias),
-            h('div', { class: 'text-blue-400 truncate' }, record.name),
-          ]
-        ),
-      ]);
-    },
-  },
-  {
-    title: '设备类型',
-    dataIndex: 'deviceType',
-    customRender: ({ text }) => {
-      return h(Tag, { color: 'success' }, () => DeviceTypeNameEnum[text]);
-    },
-  },
-  {
-    title: '所属产品',
-    dataIndex: 'deviceProfile.name',
-  },
-  {
-    title: '所属组织',
-    dataIndex: 'organizationDTO.name',
-  },
-];
-
-const TransferTableProps: BasicTableProps = {
-  formConfig: {
-    layout: 'inline',
-    labelWidth: 80,
-    schemas: deviceTableFormSchema,
-    actionColOptions: { span: 6 },
-  },
-  size: 'small',
-  maxHeight: 240,
-  useSearchForm: true,
-  columns: deviceTableColumn,
-  showIndexColumn: false,
-  fetchSetting: FETCH_SETTING,
-} as BasicTableProps;
-
-export const modeForm = (submitFn?: Function): FormSchema[] => {
+export const modeForm = (disabled: boolean): FormSchema[] => {
   return [
   return [
     {
     {
       field: BasicInfoFormField.CONVERT_CONFIG_ID,
       field: BasicInfoFormField.CONVERT_CONFIG_ID,
@@ -187,6 +72,7 @@ export const modeForm = (submitFn?: Function): FormSchema[] => {
           api: getDeviceProfile,
           api: getDeviceProfile,
           labelField: 'name',
           labelField: 'name',
           valueField: 'tbProfileId',
           valueField: 'tbProfileId',
+          disabled,
           transferProps: {
           transferProps: {
             listStyle: { height: '400px' },
             listStyle: { height: '400px' },
             showSearch: true,
             showSearch: true,
@@ -214,68 +100,28 @@ export const modeForm = (submitFn?: Function): FormSchema[] => {
       rules: [{ required: true, message: '数据源设备为必选项', type: 'array' }],
       rules: [{ required: true, message: '数据源设备为必选项', type: 'array' }],
       componentProps: ({ formActionType }) => {
       componentProps: ({ formActionType }) => {
         const { getFieldsValue } = formActionType;
         const { getFieldsValue } = formActionType;
-        const values = getFieldsValue();
-        const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
-        const devices = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_DEVICE);
-
         return {
         return {
-          labelField: 'name',
-          valueField: 'tbDeviceId',
-          primaryKey: 'tbDeviceId',
-          pendingTableProps: {
-            ...TransferTableProps,
-            api: devicePage,
-            beforeFetch: (params) => {
-              const values = getFieldsValue();
-              const deviceProfileIds = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_PRODUCT);
-              const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
-              if (convertConfigId) {
-                Object.assign(params, { convertConfigId, selected: false });
-              }
-              return { ...params, deviceProfileIds };
-            },
-          } as BasicTableProps,
-          selectedTableProps: {
-            ...TransferTableProps,
-            // api
-            api: !!(convertConfigId && devices) ? devicePage : undefined,
-            beforeFetch: (params) => {
-              const values = getFieldsValue();
-              const deviceProfileIds = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_PRODUCT);
-              const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
-              if (convertConfigId) {
-                Object.assign(params, { convertConfigId, selected: true });
-              }
-              return { ...params, deviceProfileIds };
-            },
-          } as BasicTableProps,
-          initSelectedOptions: async ({ setSelectedTotal }) => {
+          disabled,
+          getPendingTableParams: () => {
             const values = getFieldsValue();
             const values = getFieldsValue();
             const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
             const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
             const deviceProfileIds = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_PRODUCT);
             const deviceProfileIds = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_PRODUCT);
-            const devices = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_DEVICE);
-            if (convertConfigId && devices) {
-              const { items, total } = await devicePage({
-                page: 1,
-                pageSize: 10,
-                convertConfigId: values[BasicInfoFormField.CONVERT_CONFIG_ID],
-                deviceProfileIds,
-                selected: true,
-              });
-              setSelectedTotal(total);
-              return items;
-            }
-            return [];
-          },
-          onSelectedAfter: async () => {
-            submitFn && (await submitFn(false));
+            return { convertConfigId, deviceProfileIds };
           },
           },
-          onRemoveAfter: async ({ reloadSelected }) => {
-            submitFn && (await submitFn(false));
-            reloadSelected();
+          getSelectedTableParams: () => {
+            const values = getFieldsValue();
+            const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
+            const deviceProfileIds = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_PRODUCT);
+            return { convertConfigId, deviceProfileIds };
           },
           },
-          transformValue: (_selectedRowKeys: string[], selectedRows: DeviceRecord[]) => {
-            return handleGroupDevice(selectedRows);
+          transformValue: handleGroupDevice,
+          openModalValidate: () => {
+            const values = getFieldsValue();
+            const deviceProfileIds = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_PRODUCT);
+            if (!deviceProfileIds || !deviceProfileIds?.length) {
+              createMessage.warning('请选择数据源设备');
+            }
+            return deviceProfileIds && deviceProfileIds?.length;
           },
           },
         };
         };
       },
       },

@@ -3,6 +3,7 @@
     <a-upload-dragger
     <a-upload-dragger
       v-model:fileList="fileList.list"
       v-model:fileList="fileList.list"
       name="file"
       name="file"
+      :disabled="disabled"
       :multiple="false"
       :multiple="false"
       @change="handleChange($event)"
       @change="handleChange($event)"
       :before-upload="() => false"
       :before-upload="() => false"
@@ -37,6 +38,10 @@
       type: String,
       type: String,
       default: '',
       default: '',
     },
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
   });
   });
 
 
   const emit = defineEmits(['fileUrlEmit']);
   const emit = defineEmits(['fileUrlEmit']);

 import { FormSchema } from '/@/components/Form';
 import { FormSchema } from '/@/components/Form';
 import { findDictItemByCode } from '/@/api/system/dict';
 import { findDictItemByCode } from '/@/api/system/dict';
-import { h, ref, unref } from 'vue';
+import { ref } from 'vue';
 import { isExistDataManagerNameApi } from '/@/api/datamanager/dataManagerApi';
 import { isExistDataManagerNameApi } from '/@/api/datamanager/dataManagerApi';
 import { getDeviceProfile } from '/@/api/alarm/position';
 import { getDeviceProfile } from '/@/api/alarm/position';
-import { BasicColumn, BasicTableProps } from '/@/components/Table';
-import { devicePage } from '/@/api/device/deviceManager';
-import { Tag } from 'ant-design-vue';
 import { DeviceRecord } from '/@/api/device/model/deviceModel';
 import { DeviceRecord } from '/@/api/device/model/deviceModel';
-import { FETCH_SETTING } from '/@/components/Table/src/const';
-import { useClipboard } from '@vueuse/core';
-import { useMessage } from '/@/hooks/web/useMessage';
 
 
 const typeValue = ref('');
 const typeValue = ref('');
 export enum CredentialsEnum {
 export enum CredentialsEnum {
@@ -76,108 +70,7 @@ const handleGroupDevice = (options: DeviceRecord[]) => {
   return value;
   return value;
 };
 };
 
 
-const deviceTableFormSchema: FormSchema[] = [
-  {
-    field: 'name',
-    label: '设备名称',
-    component: 'Input',
-    colProps: { span: 9 },
-    componentProps: {
-      placeholder: '请输入设备名称',
-    },
-  },
-  {
-    field: 'deviceType',
-    label: '设备类型',
-    component: 'ApiSelect',
-    colProps: { span: 9 },
-    componentProps: {
-      placeholder: '请选择设备类型',
-      api: findDictItemByCode,
-      params: {
-        dictCode: 'device_type',
-      },
-      labelField: 'itemText',
-      valueField: 'itemValue',
-    },
-  },
-];
-const { copied, copy } = useClipboard({ legacy: true });
-const { createMessage } = useMessage();
-const deviceTableColumn: BasicColumn[] = [
-  {
-    title: '状态',
-    dataIndex: 'deviceState',
-    customRender: ({ text }) => {
-      return h(
-        Tag,
-        {
-          color:
-            text === DeviceStatusEnum.INACTIVE
-              ? 'warning'
-              : text === DeviceStatusEnum.OFFLINE
-              ? 'error'
-              : 'success',
-        },
-        () => DeviceStatusNameEnum[text]
-      );
-    },
-  },
-  {
-    title: '别名/设备名称',
-    dataIndex: 'name',
-    customRender: ({ record }) => {
-      return h('div', [
-        h(
-          'div',
-          {
-            class: 'cursor-pointer',
-            onClick: async () => {
-              await copy(record.name);
-              if (unref(copied)) createMessage.success('复制成功~');
-            },
-          },
-          [
-            record.alias && h('div', { class: 'truncate' }, record.alias),
-            h('div', { class: 'text-blue-400 truncate' }, record.name),
-          ]
-        ),
-      ]);
-    },
-  },
-  {
-    title: '设备类型',
-    dataIndex: 'deviceType',
-    customRender: ({ text }) => {
-      return h(Tag, { color: 'success' }, () => DeviceTypeNameEnum[text]);
-    },
-  },
-  {
-    title: '所属产品',
-    dataIndex: 'deviceProfile.name',
-  },
-  {
-    title: '所属组织',
-    dataIndex: 'organizationDTO.name',
-  },
-];
-
-const TransferTableProps: BasicTableProps = {
-  formConfig: {
-    layout: 'inline',
-    labelWidth: 80,
-    schemas: deviceTableFormSchema,
-    actionColOptions: { span: 6 },
-  },
-  size: 'small',
-  maxHeight: 240,
-  useSearchForm: true,
-  columns: deviceTableColumn,
-  showIndexColumn: false,
-  fetchSetting: FETCH_SETTING,
-} as BasicTableProps;
-
-export const modeForm = (submitFn?: Function): FormSchema[] => {
+export const modeForm = (): FormSchema[] => {
   return [
   return [
     {
     {
       field: BasicInfoFormField.CONVERT_CONFIG_ID,
       field: BasicInfoFormField.CONVERT_CONFIG_ID,
@@ -239,69 +132,20 @@ export const modeForm = (submitFn?: Function): FormSchema[] => {
       changeEvent: 'update:value',
       changeEvent: 'update:value',
       componentProps: ({ formActionType }) => {
       componentProps: ({ formActionType }) => {
         const { getFieldsValue } = formActionType;
         const { getFieldsValue } = formActionType;
-        const values = getFieldsValue();
-        const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
-        const devices = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_DEVICE);
-
         return {
         return {
-          labelField: 'name',
-          valueField: 'tbDeviceId',
-          primaryKey: 'tbDeviceId',
-          pendingTableProps: {
-            ...TransferTableProps,
-            api: devicePage,
-            beforeFetch: (params) => {
-              const values = getFieldsValue();
-              const deviceProfileIds = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_PRODUCT);
-              const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
-              if (convertConfigId) {
-                Object.assign(params, { convertConfigId, selected: false });
-              }
-              return { ...params, deviceProfileIds };
-            },
-          } as BasicTableProps,
-          selectedTableProps: {
-            ...TransferTableProps,
-            // api
-            api: !!(convertConfigId && devices) ? devicePage : undefined,
-            beforeFetch: (params) => {
-              const values = getFieldsValue();
-              const deviceProfileIds = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_PRODUCT);
-              const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
-              if (convertConfigId) {
-                Object.assign(params, { convertConfigId, selected: true });
-              }
-              return { ...params, deviceProfileIds };
-            },
-          } as BasicTableProps,
-          initSelectedOptions: async ({ setSelectedTotal }) => {
+          getPendingTableParams: () => {
             const values = getFieldsValue();
             const values = getFieldsValue();
             const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
             const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
             const deviceProfileIds = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_PRODUCT);
             const deviceProfileIds = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_PRODUCT);
-            const devices = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_DEVICE);
-            if (convertConfigId && devices) {
-              const { items, total } = await devicePage({
-                page: 1,
-                pageSize: 10,
-                convertConfigId: values[BasicInfoFormField.CONVERT_CONFIG_ID],
-                deviceProfileIds,
-                selected: true,
-              });
-              setSelectedTotal(total);
-              return items;
-            }
-            return [];
-          },
-          onSelectedAfter: async () => {
-            submitFn && (await submitFn(false));
+            return { convertConfigId, deviceProfileIds };
           },
           },
-          onRemoveAfter: async ({ reloadSelected }) => {
-            submitFn && (await submitFn(false));
-            reloadSelected();
-          },
-          transformValue: (_selectedRowKeys: string[], selectedRows: DeviceRecord[]) => {
-            return handleGroupDevice(selectedRows);
+          getSelectedTableParams: () => {
+            const values = getFieldsValue();
+            const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
+            const deviceProfileIds = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_PRODUCT);
+            return { convertConfigId, deviceProfileIds };
           },
           },
+          transformValue: handleGroupDevice,
         };
         };
       },
       },
     },
     },

-<template>
-  <div class="transfer-config-mode">
-    <BasicForm :showSubmitButton="false" @register="register">
-      <template #uploadAdd1="{ field }">
-        <span style="display: none">{{ field }}</span>
-        <a-upload-dragger
-          v-model:fileList="fileList1"
-          name="file"
-          :key="1"
-          :multiple="false"
-          @change="handleChange('T', $event)"
-          :before-upload="() => false"
-        >
-          <p class="ant-upload-drag-icon">
-            <InboxOutlined />
-          </p>
-          <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
-          <p class="ant-upload-hint">
-            支持扩展名：.jpeg .png .jpg ...
-            <br />
-            文件大小：最大支持5M
-          </p>
-        </a-upload-dragger>
-      </template>
-      <template #showImg1="{ field }">
-        <span style="display: none">{{ field }}</span>
-        <img
-          v-if="showImg1"
-          :src="showImg1Pic"
-          alt="avatar"
-          style="width: 6.25rem; height: 6.25rem"
-        />
-      </template>
-      <div style="margin-top: 50px"></div>
-      <template #uploadAdd2="{ field }">
-        <span style="display: none">{{ field }}</span>
-        <a-upload-dragger
-          v-model:fileList="fileList2"
-          name="file"
-          :key="2"
-          :multiple="false"
-          @change="handleChange('F', $event)"
-          :before-upload="() => false"
-        >
-          <p class="ant-upload-drag-icon">
-            <InboxOutlined />
-          </p>
-          <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
-          <p class="ant-upload-hint">
-            支持扩展名：.jpeg .png .jpg ...
-            <br />
-            文件大小：最大支持5M
-          </p>
-        </a-upload-dragger>
-      </template>
-      <template #showImg2="{ field }">
-        <span style="display: none">{{ field }}</span>
-        <img
-          v-if="showImg2"
-          :src="showImg2Pic"
-          alt="avatar"
-          style="width: 6.25rem; height: 6.25rem"
-        />
-      </template>
-      <div style="margin-top: 50px"></div>
-      <template #uploadAdd3="{ field }">
-        <span style="display: none">{{ field }}</span>
-        <a-upload-dragger
-          v-model:fileList="fileList3"
-          name="file"
-          :key="3"
-          :multiple="false"
-          @change="handleChange('C', $event)"
-          :before-upload="() => false"
-        >
-          <p class="ant-upload-drag-icon">
-            <InboxOutlined />
-          </p>
-          <p class="ant-upload-text">点击或将文件拖拽到这里上传</p>
-          <p class="ant-upload-hint">
-            支持扩展名：.jpeg .png .jpg ...
-            <br />
-            文件大小：最大支持5M
-          </p>
-        </a-upload-dragger>
-      </template>
-      <template #showImg3="{ field }">
-        <span style="display: none">{{ field }}</span>
-        <img
-          v-if="showImg3"
-          :src="showImg3Pic"
-          alt="avatar"
-          style="width: 6.25rem; height: 6.25rem"
-        />
-      </template>
-    </BasicForm>
-  </div>
-</template>
-<script lang="ts">
-  import { defineComponent, ref, reactive, nextTick } from 'vue';
-  import { BasicForm, useForm } from '/@/components/Form';
-  import { CredentialsEnum, modeMqttForm } from '../config';
-  import { InboxOutlined } from '@ant-design/icons-vue';
-  import { Alert, Divider, Descriptions, Upload } from 'ant-design-vue';
-  import { uploadApi } from '/@/api/personal/index';
-  import { useMessage } from '/@/hooks/web/useMessage';
-
-  export default defineComponent({
-    components: {
-      BasicForm,
-      [Alert.name]: Alert,
-      [Divider.name]: Divider,
-      [Descriptions.name]: Descriptions,
-      [Descriptions.Item.name]: Descriptions.Item,
-      InboxOutlined,
-      [Upload.Dragger.name]: Upload.Dragger,
-    },
-    emits: ['next', 'prev', 'register'],
-    setup(_, { emit }) {
-      const showImg1 = ref(false);
-      const showImg1Pic = ref('');
-      const showImg2 = ref(false);
-      const showImg2Pic = ref('');
-      const showImg3 = ref(false);
-      const showImg3Pic = ref('');
-      const { createMessage } = useMessage();
-      let caCertFileName = ref('');
-      let privateKeyFileName = ref('');
-      let certFileName = ref('');
-      let fileList1: any = ref<[]>([]);
-      let fileList2: any = ref<[]>([]);
-      let fileList3: any = ref<[]>([]);
-      const credentialsV: any = reactive({
-        credentials: {
-          type: '',
-        },
-      });
-      const sonValues: any = reactive({
-        configuration: {},
-      });
-      const [register, { validate, setFieldsValue, resetFields: defineClearFunc }] = useForm({
-        labelWidth: 120,
-        schemas: modeMqttForm,
-        actionColOptions: {
-          span: 14,
-        },
-        resetButtonOptions: {
-          text: '上一步',
-        },
-        resetFunc: customResetFunc,
-        submitFunc: customSubmitFunc,
-      });
-
-      /**
-       * 上传图片
-       */
-      const handleChange = async (e, { file }) => {
-        if (file.status === 'removed') {
-          if (e == 'T') {
-            fileList1.value = [];
-            showImg1.value = false;
-            showImg1Pic.value = '';
-            caCertFileName.value = '';
-          } else if (e == 'F') {
-            fileList2.value = [];
-            showImg2.value = false;
-            showImg2Pic.value = '';
-            certFileName.value = '';
-          } else {
-            fileList3.value = [];
-            showImg3.value = false;
-            showImg3Pic.value = '';
-            privateKeyFileName.value = '';
-          }
-        } else {
-          const isLt5M = file.size / 1024 / 1024 < 5;
-          if (!isLt5M) {
-            createMessage.error('图片大小不能超过5MB!');
-          } else {
-            e == 'T'
-              ? (fileList1.value = [file])
-              : e == 'F'
-              ? (fileList2.value = [file])
-              : (fileList3.value = [file]);
-            const formData = new FormData();
-            formData.append('file', file);
-            const response = await uploadApi(formData);
-            if (response.fileStaticUri) {
-              if (e == 'T') {
-                caCertFileName.value = response.fileStaticUri;
-                const iscaCertFileNamePic = caCertFileName.value.split('.').pop();
-                if (
-                  iscaCertFileNamePic == 'jpg' ||
-                  iscaCertFileNamePic == 'png' ||
-                  iscaCertFileNamePic == 'jpeg' ||
-                  iscaCertFileNamePic == 'gif'
-                ) {
-                  showImg1.value = true;
-                  showImg1Pic.value = response.fileStaticUri;
-                } else {
-                  showImg1.value = false;
-                }
-              } else if (e == 'F') {
-                certFileName.value = response.fileStaticUri;
-                const iscertFileNamePic = certFileName.value.split('.').pop();
-                if (
-                  iscertFileNamePic == 'jpg' ||
-                  iscertFileNamePic == 'png' ||
-                  iscertFileNamePic == 'jpeg' ||
-                  iscertFileNamePic == 'gif'
-                ) {
-                  showImg2.value = true;
-                  showImg2Pic.value = response.fileStaticUri;
-                } else {
-                  showImg2.value = false;
-                }
-              } else {
-                privateKeyFileName.value = response.fileStaticUri;
-                const isprivateKeyFileNamePic = privateKeyFileName.value.split('.').pop();
-                if (
-                  isprivateKeyFileNamePic == 'jpg' ||
-                  isprivateKeyFileNamePic == 'png' ||
-                  isprivateKeyFileNamePic == 'jpeg' ||
-                  isprivateKeyFileNamePic == 'gif'
-                ) {
-                  showImg3.value = true;
-                  showImg3Pic.value = response.fileStaticUri;
-                } else {
-                  showImg3.value = false;
-                }
-              }
-            }
-          }
-        }
-      };
-      const setStepTwoFieldsValueFunc = (v, v1, v2) => {
-        setFieldsValue(v);
-        setFieldsValue({
-          name: v1,
-          description: v2,
-        });
-        setFieldsValue({
-          password: v.credentials?.password,
-          username: v.credentials?.username,
-          type: v.credentials?.type,
-        });
-        fileList1.value = [
-          {
-            name: v.credentials?.caCertFileName.slice(39),
-            uid: '1',
-          },
-        ];
-        fileList2.value = [
-          {
-            name: v.credentials?.certFileName.slice(39),
-            uid: '2',
-          },
-        ];
-        fileList3.value = [
-          {
-            name: v.credentials?.privateKeyFileName.slice(39),
-            uid: '3',
-          },
-        ];
-        caCertFileName.value = v.credentials?.caCertFileName;
-        certFileName.value = v.credentials?.certFileName;
-        privateKeyFileName.value = v.credentials?.privateKeyFileName;
-        const iscaCertFileNamePic = v.credentials?.caCertFileName.split('.').pop();
-        const iscertFileNamePic = v.credentials?.certFileName.split('.').pop();
-        const isprivateKeyFileNamePic = v.credentials?.privateKeyFileName.split('.').pop();
-        if (
-          iscaCertFileNamePic == 'jpg' ||
-          iscaCertFileNamePic == 'png' ||
-          iscaCertFileNamePic == 'jpeg' ||
-          iscaCertFileNamePic == 'gif'
-        ) {
-          showImg1.value = true;
-          showImg1Pic.value = v.credentials?.caCertFileName;
-        } else {
-          showImg1.value = false;
-        }
-        if (
-          iscertFileNamePic == 'jpg' ||
-          iscertFileNamePic == 'png' ||
-          iscertFileNamePic == 'jpeg' ||
-          iscertFileNamePic == 'gif'
-        ) {
-          showImg2.value = true;
-          showImg2Pic.value = v.credentials?.certFileName;
-        } else {
-          showImg2.value = false;
-        }
-        if (
-          isprivateKeyFileNamePic == 'jpg' ||
-          isprivateKeyFileNamePic == 'png' ||
-          isprivateKeyFileNamePic == 'jpeg' ||
-          isprivateKeyFileNamePic == 'gif'
-        ) {
-          showImg3.value = true;
-          showImg3Pic.value = v.credentials?.privateKeyFileName;
-        } else {
-          showImg3.value = false;
-        }
-      };
-      const customClearStepTwoValueFunc = async () => {
-        nextTick(() => {
-          defineClearFunc();
-          fileList1.value = [];
-          fileList2.value = [];
-          fileList3.value = [];
-          caCertFileName.value = '';
-          privateKeyFileName.value = '';
-          certFileName.value = '';
-          showImg1.value = false;
-          showImg1Pic.value = '';
-          showImg2.value = false;
-          showImg2Pic.value = '';
-          showImg3.value = false;
-          showImg3Pic.value = '';
-        });
-      };
-      async function customResetFunc() {
-        emit('prev');
-      }
-      async function customSubmitFunc() {
-        try {
-          const values = await validate();
-          emit('next', values);
-        } catch (error) {
-        } finally {
-        }
-      }
-      const getSonValueFunc = async () => {
-        sonValues.configuration = await validate();
-        credentialsV.credentials.type = sonValues.configuration.type;
-        if (credentialsV.credentials.type == CredentialsEnum.IS_BASIC) {
-          credentialsV.credentials.username = sonValues.configuration.username;
-          credentialsV.credentials.password = sonValues.configuration.password;
-          sonValues.configuration.username = undefined;
-          sonValues.configuration.password = undefined;
-        } else if (credentialsV.credentials.type == CredentialsEnum.IS_PEM) {
-          credentialsV.credentials.caCertFileName = caCertFileName.value;
-          credentialsV.credentials.certFileName = certFileName.value;
-          credentialsV.credentials.privateKeyFileName = privateKeyFileName.value;
-        }
-        if (!sonValues.configuration.clientId) {
-          sonValues.configuration.clientId = null;
-        }
-        Object.assign(sonValues.configuration, credentialsV);
-        return sonValues;
-      };
-      return {
-        getSonValueFunc,
-        register,
-        setStepTwoFieldsValueFunc,
-        customClearStepTwoValueFunc,
-        fileList1,
-        fileList2,
-        fileList3,
-        handleChange,
-        caCertFileName,
-        privateKeyFileName,
-        certFileName,
-        showImg1,
-        showImg1Pic,
-        showImg2,
-        showImg2Pic,
-        showImg3,
-        showImg3Pic,
-      };
-    },
-  });
-</script>
-
-<style lang="less" scoped>
-  :deep(.ant-col-24) {
-    margin-bottom: 20px !important;
-  }
-
-  :deep(.ant-btn-default) {
-    color: white;
-    background: #377dff;
-  }
-</style>

@@ -13,6 +13,9 @@ import { EntryCategoryComponentEnum } from '../enum/category';
 
 
 const ignoreNodeKeys: string[] = [EntryCategoryComponentEnum.INPUT];
 const ignoreNodeKeys: string[] = [EntryCategoryComponentEnum.INPUT];
 
 
+export const SOURCE_HANDLE = '__handle-right';
+export const TARGET_HANDLE = '__handle-left';
+
 export function useBasicDataTransform() {
 export function useBasicDataTransform() {
   const nodeConfigMap = new Map<string, NodeData>();
   const nodeConfigMap = new Map<string, NodeData>();
 
 
@@ -21,7 +24,7 @@ export function useBasicDataTransform() {
       const category = allComponents[key as RuleNodeTypeEnum];
       const category = allComponents[key as RuleNodeTypeEnum];
       for (const nodeConfig of category.components) {
       for (const nodeConfig of category.components) {
         const { clazz } = nodeConfig;
         const { clazz } = nodeConfig;
-        nodeConfigMap.set(clazz, { config: nodeConfig, category: category.category });
+        nodeConfigMap.set(clazz, { config: nodeConfig, categoryConfig: category.category });
       }
       }
     }
     }
   }
   }
@@ -49,8 +52,7 @@ export function useBasicDataTransform() {
     const { connections, nodes, firstNodeIndex } = unref(ruleChain);
     const { connections, nodes, firstNodeIndex } = unref(ruleChain);
     const indexMap = new Map<number, BasicNodeBindData>();
     const indexMap = new Map<number, BasicNodeBindData>();
     const groupByConnections = new Map<string, string[]>();
     const groupByConnections = new Map<string, string[]>();
-    const SOURCE_HANDLE = '__handle-right';
-    const TARGET_HANDLE = '__handle-left';
+
     const SEPARATOR = ',';
     const SEPARATOR = ',';
     const edges: Elements = [];
     const edges: Elements = [];
     const { getAddedgesParams } = useAddEdges();
     const { getAddedgesParams } = useAddEdges();
@@ -207,6 +209,8 @@ export function useBasicDataTransform() {
   function getNodes(nodesRef: Ref<GraphNode[]> | GraphNode[], removeId: boolean) {
   function getNodes(nodesRef: Ref<GraphNode[]> | GraphNode[], removeId: boolean) {
     const nodes: BasicNodeBindData[] = [];
     const nodes: BasicNodeBindData[] = [];
 
 
+    let offsetX = 0;
+    let offsetY = 0;
     for (const node of unref(nodesRef)) {
     for (const node of unref(nodesRef)) {
       const nodeData = node.data as NodeData;
       const nodeData = node.data as NodeData;
 
 
@@ -214,16 +218,31 @@ export function useBasicDataTransform() {
 
 
       const data = nodeData.data;
       const data = nodeData.data;
 
 
-      nodes.push(
-        Object.assign(
-          mergeData(data, nodeData, node),
-          nodeData.created && !removeId
-            ? ({
-                id: { id: node.id, entityType: RuleChainEntityType.RULE_NODE },
-              } as BasicNodeBindData)
-            : {}
-        )
+      const resultNode = Object.assign(
+        mergeData(data, nodeData, node),
+        nodeData.created && !removeId
+          ? ({
+              id: { id: node.id, entityType: RuleChainEntityType.RULE_NODE },
+            } as BasicNodeBindData)
+          : {}
       );
       );
+
+      if (resultNode.additionalInfo.layoutX < offsetX) offsetX = resultNode.additionalInfo.layoutX;
+      if (resultNode.additionalInfo.layoutY < offsetY) offsetY = resultNode.additionalInfo.layoutY;
+
+      nodes.push(resultNode);
+    }
+
+    /**
+     * compatible thingsboard rule chain designer.
+     * thingsboard rule chain designer does not have negative coordinated.
+     */
+    if (offsetX < 0 || offsetY < 0) {
+      nodes.forEach((node) => {
+        const { layoutX = 0, layoutY = 0 } = node.additionalInfo || {};
+        node.additionalInfo!.layoutX = layoutX + Math.abs(offsetX);
+        node.additionalInfo!.layoutY = layoutY + Math.abs(offsetY);
+      });
     }
     }
 
 
     return nodes;
     return nodes;
@@ -266,9 +285,22 @@ export function useBasicDataTransform() {
     nodes: Ref<GraphNode[]> | GraphNode[] = [],
     nodes: Ref<GraphNode[]> | GraphNode[] = [],
     edges: Ref<GraphEdge[]> | GraphEdge[] = []
     edges: Ref<GraphEdge[]> | GraphEdge[] = []
   ) {
   ) {
+    let flag = true;
+
+    if (unref(nodes).length <= 1) flag = false;
+
     const rootNode: GraphNode[] = [];
     const rootNode: GraphNode[] = [];
 
 
-    let flag = true;
+    for (const edge of unref(edges)) {
+      if (!unref(nodes).find((node) => node.id === edge.source)) rootNode.push(edge.targetNode);
+    }
+
+    for (const node of unref(nodes)) {
+      if (!unref(edges).some((edge) => edge.target === node.id)) rootNode.push(node);
+    }
+
+    if (rootNode.length > 1) return { flag: false, firstNode: null };
+
     for (const node of unref(nodes)) {
     for (const node of unref(nodes)) {
       const list = unref(edges).filter(
       const list = unref(edges).filter(
         (edge) => edge.source === node.id || edge.target === node.id
         (edge) => edge.source === node.id || edge.target === node.id
@@ -278,14 +310,6 @@ export function useBasicDataTransform() {
         flag = false;
         flag = false;
         break;
         break;
       }
       }
-
-      if (!list.filter((edge) => edge.target === node.id).length) {
-        if (!rootNode.length) rootNode.push(node);
-        else {
-          flag = false;
-          break;
-        }
-      }
     }
     }
 
 
     return { flag, firstNode: rootNode[0] || null };
     return { flag, firstNode: rootNode[0] || null };

@@ -5,7 +5,7 @@ import { useAddNodes } from './useAddNodes';
 import { buildUUID } from '/@/utils/uuid';
 import { buildUUID } from '/@/utils/uuid';
 import { Ref, toRaw, unref } from 'vue';
 import { Ref, toRaw, unref } from 'vue';
 import { useSaveAndRedo } from './useSaveAndRedo';
 import { useSaveAndRedo } from './useSaveAndRedo';
-import { isUnDef } from '/@/utils/is';
+import { isNullOrUnDef, isUnDef } from '/@/utils/is';
 import { useAddEdges } from './useAddEdges';
 import { useAddEdges } from './useAddEdges';
 import { EdgeData } from '../types/node';
 import { EdgeData } from '../types/node';
 import { CreateNodeModal } from '../src/components/CreateNodeModal';
 import { CreateNodeModal } from '../src/components/CreateNodeModal';
@@ -13,9 +13,11 @@ import { CreateEdgeModal } from '../src/components/CreateEdgeModal';
 import { UpdateNodeDrawer } from '../src/components/UpdateNodeDrawer';
 import { UpdateNodeDrawer } from '../src/components/UpdateNodeDrawer';
 import { UpdateEdgeDrawer } from '../src/components/UpdateEdgeDrawer';
 import { UpdateEdgeDrawer } from '../src/components/UpdateEdgeDrawer';
 import { CreateRuleChainModal } from '../src/components/CreateRuleChainModal';
 import { CreateRuleChainModal } from '../src/components/CreateRuleChainModal';
-import { useBasicDataTransform } from './useBasicDataTransform';
+import { SOURCE_HANDLE, TARGET_HANDLE, useBasicDataTransform } from './useBasicDataTransform';
 import { cloneDeep } from 'lodash-es';
 import { cloneDeep } from 'lodash-es';
 import { useNewNode } from './useNewNode';
 import { useNewNode } from './useNewNode';
+import { RuleChainDetail } from '../types/ruleNode';
+import { saveRuleChainData, saveRuleChainDetail } from '/@/api/ruleDesigner';
 
 
 interface HandleContextMenuActionParamsType {
 interface HandleContextMenuActionParamsType {
   menuType: RuleContextMenuEnum;
   menuType: RuleContextMenuEnum;
@@ -47,11 +49,15 @@ export function transformToRuleChain(
   const outputEdges = unref(edgesRef).filter((edge) => !nodeMap.has(edge.target));
   const outputEdges = unref(edgesRef).filter((edge) => !nodeMap.has(edge.target));
   const outputEdgesId = outputEdges.map((edge) => edge.id);
   const outputEdgesId = outputEdges.map((edge) => edge.id);
 
 
+  const inputEdges = unref(edgesRef).filter((edge) => !nodeMap.has(edge.source));
+  const inputEdgesId = inputEdges.map((edge) => edge.id);
+
   const { getOutputNodeConfig } = useNewNode();
   const { getOutputNodeConfig } = useNewNode();
   const outputNode = outputEdges.map((edge) => {
   const outputNode = outputEdges.map((edge) => {
     const id = buildUUID();
     const id = buildUUID();
     const name = (edge.data as EdgeData).data?.type?.join(' / ') || '';
     const name = (edge.data as EdgeData).data?.type?.join(' / ') || '';
     edge.target = id;
     edge.target = id;
+    edge.targetHandle = `${id}${TARGET_HANDLE}`;
     return getOutputNodeConfig(name, edge.targetNode.position, id);
     return getOutputNodeConfig(name, edge.targetNode.position, id);
   });
   });
 
 
@@ -61,9 +67,9 @@ export function transformToRuleChain(
 
 
   const { firstNode } = validateCanCreateRuleChain(nodesRef, edgesRef);
   const { firstNode } = validateCanCreateRuleChain(nodesRef, edgesRef);
 
 
-  const firstNodeIndex = nodesRef.findIndex((node) => node.id === firstNode.id);
+  const firstNodeIndex = nodesRef.findIndex((node) => node.id === firstNode?.id);
 
 
-  return { connections, nodes, firstNodeIndex, outputEdgesId };
+  return { connections, nodes, firstNodeIndex, outputEdgesId, inputEdgesId };
 }
 }
 
 
 export const NODE_WIDTH = 176;
 export const NODE_WIDTH = 176;
@@ -87,20 +93,13 @@ function getElementsCenter(nodes: Ref<GraphNode[]> | GraphNode[] = []) {
       continue;
       continue;
     }
     }
 
 
-    if (x < leftTopX!) {
-      leftTopX = x;
-      if (y < leftTopY!) {
-        leftTopY = y;
-      }
-      continue;
-    }
+    if (x < leftTopX!) leftTopX = x;
 
 
-    if (x + NODE_WIDTH > rightBottomX!) {
-      rightBottomX = x + NODE_WIDTH;
-      if (y + NODE_HEIGHT > rightBottomY!) {
-        rightBottomY = y + NODE_HEIGHT;
-      }
-    }
+    if (y < leftTopY!) leftTopY = y;
+
+    if (x + NODE_WIDTH > rightBottomX!) rightBottomX = x + NODE_WIDTH;
+
+    if (y + NODE_HEIGHT > rightBottomY!) rightBottomY = y + NODE_HEIGHT;
   }
   }
 
 
   return {
   return {
@@ -109,6 +108,60 @@ function getElementsCenter(nodes: Ref<GraphNode[]> | GraphNode[] = []) {
   };
   };
 }
 }
 
 
+function createRuleChainNode({
+  originX,
+  originY,
+  outputEdges,
+  inputEdges,
+  ruleChainDetail,
+}: {
+  originX: number;
+  originY: number;
+  ruleChainDetail: RuleChainDetail;
+  outputEdges: Ref<(GraphEdge | undefined)[]> | (GraphEdge | undefined)[];
+  inputEdges: Ref<(GraphEdge | undefined)[]> | (GraphEdge | undefined)[];
+}) {
+  const { getRuleChainNodeConfig } = useNewNode();
+  const { getAddedgesParams } = useAddEdges();
+  const nodeId = buildUUID();
+
+  const ruleChainNode = getRuleChainNodeConfig({
+    name: ruleChainDetail.name,
+    position: { x: originX - NODE_WIDTH / 2, y: originY - NODE_HEIGHT / 2 },
+    ruleChainId: ruleChainDetail.id.id,
+    id: nodeId,
+  });
+
+  const newInputEdges = unref(inputEdges).map((edge) =>
+    getAddedgesParams(
+      {
+        source: edge!.source,
+        target: nodeId,
+        sourceHandle: `${edge?.source}${SOURCE_HANDLE}`,
+        targetHandle: `${nodeId}${TARGET_HANDLE}`,
+      },
+      toRaw(unref(edge!.data as EdgeData).data)
+    )
+  );
+
+  const newOutputEdges = unref(outputEdges).map((edge) =>
+    getAddedgesParams(
+      {
+        source: nodeId,
+        target: edge!.target,
+        sourceHandle: `${nodeId}${SOURCE_HANDLE}`,
+        targetHandle: `${edge?.target}${TARGET_HANDLE}`,
+      },
+      toRaw(unref(edge!.data as EdgeData).data)
+    )
+  );
+
+  return {
+    nodes: [ruleChainNode],
+    edges: [...newInputEdges, ...newOutputEdges],
+  };
+}
+
 export function useContextMenuAction() {
 export function useContextMenuAction() {
   const copy = (params: HandleContextMenuActionParamsType) => {
   const copy = (params: HandleContextMenuActionParamsType) => {
     const { node } = params;
     const { node } = params;
@@ -248,35 +301,51 @@ export function useContextMenuAction() {
     useSaveAndRedoActionType?.handleRedoChange(flowActionType!);
     useSaveAndRedoActionType?.handleRedoChange(flowActionType!);
   };
   };
 
 
-  const createRuleChain = async (_params: HandleContextMenuActionParamsType) => {
-    // const { useSaveAndRedoActionType, modalActionType, flowActionType } = params;
-    // const { createRuleChainModalActionType } = modalActionType;
-    // const result = (await unref(createRuleChainModalActionType)?.openCreateRuleChainModal()) as {
-    //   name: string;
-    //   additionalInfo: { description: string };
-    // };
-    // const ruleChainDetail = await saveRuleChainDetail(
-    //   Object.assign(result, { debugger: false, type: 'CORE' }) as Partial<RuleChainDetail>
-    // );
-    // const selectedNodes = unref(flowActionType?.getSelectedNodes);
-    // const selectedEdges = unref(flowActionType?.getSelectedEdges);
-    // const { firstNodeIndex, connections, nodes, outputEdgesId } = transformToRuleChain(
-    //   selectedNodes,
-    //   selectedEdges
-    // );
-    // await saveRuleChainData({
-    //   firstNodeIndex,
-    //   connections,
-    //   nodes,
-    //   ruleChainId: ruleChainDetail.id,
-    // });
-    // const outputEdges = outputEdgesId.map((id) => flowActionType?.findEdge(id));
-    // console.log(getElementsCenter(unref(selectedNodes)));
-    // const { originX, originY } = getElementsCenter(unref(selectedNodes));
-    // const {} = useNewNode();
-    // flowActionType?.removeNodes(selectedNodes || []);
-    // flowActionType?.removeEdges(selectedEdges || []);
-    // useSaveAndRedoActionType?.triggerChange();
+  const createRuleChain = async (params: HandleContextMenuActionParamsType) => {
+    const { useSaveAndRedoActionType, modalActionType, flowActionType } = params;
+    const { createRuleChainModalActionType } = modalActionType;
+    const result = (await unref(createRuleChainModalActionType)?.openCreateRuleChainModal()) as {
+      name: string;
+      additionalInfo: { description: string };
+    };
+
+    const ruleChainDetail = await saveRuleChainDetail(
+      Object.assign(result, { debugger: false, type: 'CORE' }) as Partial<RuleChainDetail>
+    );
+
+    const selectedNodes = unref(flowActionType?.getSelectedNodes);
+    const selectedEdges = unref(flowActionType?.getSelectedEdges);
+    const { firstNodeIndex, connections, nodes, outputEdgesId, inputEdgesId } =
+      transformToRuleChain(selectedNodes, selectedEdges);
+
+    await saveRuleChainData({
+      firstNodeIndex,
+      connections: connections.filter(
+        (connection) => !isNullOrUnDef(connection.fromIndex) && !isNullOrUnDef(connection.toIndex)
+      ),
+      nodes,
+      ruleChainId: ruleChainDetail.id,
+    });
+
+    const outputEdges = outputEdgesId.map((id) => flowActionType?.findEdge(id));
+    const inputEdges = inputEdgesId.map((id) => flowActionType?.findEdge(id));
+
+    const { originX, originY } = getElementsCenter(unref(selectedNodes));
+
+    flowActionType?.removeNodes(selectedNodes || []);
+    flowActionType?.removeEdges(selectedEdges || []);
+
+    const { nodes: newNode, edges: newEdges } = createRuleChainNode({
+      originX,
+      originY,
+      outputEdges,
+      inputEdges,
+      ruleChainDetail,
+    });
+
+    flowActionType?.addNodes(newNode);
+    flowActionType?.addEdges(newEdges);
+    useSaveAndRedoActionType?.triggerChange();
   };
   };
 
 
   const handleContextMenuAction = (params: HandleContextMenuActionParamsType) => {
   const handleContextMenuAction = (params: HandleContextMenuActionParamsType) => {

@@ -40,13 +40,23 @@ export function useNewNode() {
     return newNode;
     return newNode;
   };
   };
 
 
-  const getRuleChainNodeConfig = (name: string, position: XYPosition, id?: string) => {
+  const getRuleChainNodeConfig = ({
+    name,
+    position,
+    ruleChainId,
+    id,
+  }: {
+    name: string;
+    position: XYPosition;
+    ruleChainId: string;
+    id?: string;
+  }) => {
     const { getAddNodesParams } = useAddNodes();
     const { getAddNodesParams } = useAddNodes();
     const newNode = getAddNodesParams(
     const newNode = getAddNodesParams(
       position,
       position,
       {
       {
         ...new RuleChainConfig(),
         ...new RuleChainConfig(),
-        data: { name },
+        data: { name, configuration: { ruleChainId } },
       },
       },
       {
       {
         id,
         id,

@@ -65,6 +65,7 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
     minZoom: 1,
     minZoom: 1,
     panOnScroll: true,
     panOnScroll: true,
     selectionMode: SelectionMode.Partial,
     selectionMode: SelectionMode.Partial,
+
     nodeTypes: {
     nodeTypes: {
       [NodeTypeEnum.CUSTOM]: markRaw(BasicNode) as NodeComponent,
       [NodeTypeEnum.CUSTOM]: markRaw(BasicNode) as NodeComponent,
     },
     },
@@ -79,14 +80,16 @@ export function useRuleFlow(options: UseRuleFlowOptionsType) {
       y: 0,
       y: 0,
     },
     },
     isValidConnection(connection, elements) {
     isValidConnection(connection, elements) {
+      if (!elements.targetNode || !elements.sourceNode) return false;
+
       const validateList = [validateInputAndOutput];
       const validateList = [validateInputAndOutput];
       const targetData = elements.targetNode.data as NodeData;
       const targetData = elements.targetNode.data as NodeData;
 
 
       if (
       if (
-        targetData.category?.validateConnection &&
-        isFunction(targetData.category.validateConnection)
+        targetData.categoryConfig?.validateConnection &&
+        isFunction(targetData.categoryConfig.validateConnection)
       )
       )
-        validateList.push(targetData.category?.validateConnection);
+        validateList.push(targetData.categoryConfig?.validateConnection);
 
 
       if (targetData.config?.validateConnection && isFunction(targetData.config.validateConnection))
       if (targetData.config?.validateConnection && isFunction(targetData.config.validateConnection))
         validateList.push(targetData.config.validateConnection);
         validateList.push(targetData.config.validateConnection);

@@ -47,7 +47,6 @@
 
 
   const setValue: CreateModalDefineExposeType['setFieldsValue'] = (value) => {
   const setValue: CreateModalDefineExposeType['setFieldsValue'] = (value) => {
     resetFields();
     resetFields();
-    console.log(value);
     setFieldsValue({
     setFieldsValue({
       ...value,
       ...value,
       ...(value?.[RelatedDeviceAttributeFieldsEnum.DEVICE_RELATIONS_QUERY] || {}),
       ...(value?.[RelatedDeviceAttributeFieldsEnum.DEVICE_RELATIONS_QUERY] || {}),

@@ -14,6 +14,7 @@ export const RuleChainConfig: NodeItemConfigType = {
   clazz: 'org.thingsboard.rule.engine.flow.TbRuleChainInputNode',
   clazz: 'org.thingsboard.rule.engine.flow.TbRuleChainInputNode',
   categoryType: RuleNodeTypeEnum.FLOW,
   categoryType: RuleNodeTypeEnum.FLOW,
   name: 'rule chain',
   name: 'rule chain',
+  // backgroundColor: '#d6c4f1',
   configurationDescriptor: {
   configurationDescriptor: {
     nodeDefinition: {
     nodeDefinition: {
       details:
       details:

@@ -14,7 +14,7 @@
   const handleClick = () => {
   const handleClick = () => {
     const { data } = props.nodeProps?.data || ({} as NodeData);
     const { data } = props.nodeProps?.data || ({} as NodeData);
     const { configuration } = (data || {}) as { configuration: Record<'ruleChainId', string> };
     const { configuration } = (data || {}) as { configuration: Record<'ruleChainId', string> };
-    if (configuration.ruleChainId) {
+    if (configuration?.ruleChainId) {
       ROUTER.push(`/rule/chain/${configuration.ruleChainId}`);
       ROUTER.push(`/rule/chain/${configuration.ruleChainId}`);
     }
     }
   };
   };

@@ -36,8 +36,8 @@
 
 
   const getIcon = computed(() => {
   const getIcon = computed(() => {
     const { icon } = unref(getNodeDefinition);
     const { icon } = unref(getNodeDefinition);
-    const { category } = unref(getData);
-    const { icon: categoryIcon } = category || {};
+    const { categoryConfig } = unref(getData);
+    const { icon: categoryIcon } = categoryConfig || {};
     return icon || categoryIcon || 'tabler:circuit-ground';
     return icon || categoryIcon || 'tabler:circuit-ground';
   });
   });
 
 
@@ -47,8 +47,8 @@
   });
   });
 
 
   const getBackgroundColor = computed(() => {
   const getBackgroundColor = computed(() => {
-    const { config, category } = unref(getData);
-    const { backgroundColor: categoryBackgroundColor } = category || {};
+    const { config, categoryConfig } = unref(getData);
+    const { backgroundColor: categoryBackgroundColor } = categoryConfig || {};
     const { backgroundColor } = config || {};
     const { backgroundColor } = config || {};
     return backgroundColor || categoryBackgroundColor;
     return backgroundColor || categoryBackgroundColor;
   });
   });
@@ -60,8 +60,8 @@
       <section class="text-dark-900 text-xs">
       <section class="text-dark-900 text-xs">
         <p class="mb-0 font-bold"> {{ getData?.data?.name }} </p>
         <p class="mb-0 font-bold"> {{ getData?.data?.name }} </p>
         <p class="mb-0 mt-2 text-gray-500 italic">
         <p class="mb-0 mt-2 text-gray-500 italic">
-          {{ getData.category?.title }}
-          {{ getData?.category?.title && getData.config?.name ? '-' : '' }}
+          {{ getData.categoryConfig?.title }}
+          {{ getData?.categoryConfig?.title && getData.config?.name ? '-' : '' }}
           {{ getData.config?.name }}
           {{ getData.config?.name }}
         </p>
         </p>
         <p class="mt-1 mb-0 text-gray-500">{{ getData.data?.description }}</p>
         <p class="mt-1 mb-0 text-gray-500">{{ getData.data?.description }}</p>

@@ -48,7 +48,7 @@
         v-for="config in getCurrentCategoryNode.components"
         v-for="config in getCurrentCategoryNode.components"
         :key="config.clazz"
         :key="config.clazz"
         :config="config"
         :config="config"
-        :category="getCurrentCategoryNode.category"
+        :categoryConfig="getCurrentCategoryNode.category"
       />
       />
     </body>
     </body>
   </section>
   </section>

@@ -5,7 +5,7 @@
   import { CategoryConfigType, NodeItemConfigType } from '../../../types/node';
   import { CategoryConfigType, NodeItemConfigType } from '../../../types/node';
 
 
   const props = defineProps<{
   const props = defineProps<{
-    category?: CategoryConfigType;
+    categoryConfig?: CategoryConfigType;
     config?: NodeItemConfigType;
     config?: NodeItemConfigType;
   }>();
   }>();
 
 
@@ -20,7 +20,7 @@
 
 
   const getIcon = computed(() => {
   const getIcon = computed(() => {
     const { icon } = unref(getNodeDefinition);
     const { icon } = unref(getNodeDefinition);
-    const { icon: categoryIcon } = props.category || {};
+    const { icon: categoryIcon } = props.categoryConfig || {};
     return icon || categoryIcon || 'tabler:circuit-ground';
     return icon || categoryIcon || 'tabler:circuit-ground';
   });
   });
 
 
@@ -30,9 +30,9 @@
   });
   });
 
 
   const getBackgroundColor = computed(() => {
   const getBackgroundColor = computed(() => {
-    const { config, category } = props;
+    const { config, categoryConfig } = props;
     const { backgroundColor } = config || {};
     const { backgroundColor } = config || {};
-    const { backgroundColor: categoryBackgroundColor } = category || {};
+    const { backgroundColor: categoryBackgroundColor } = categoryConfig || {};
     return backgroundColor || categoryBackgroundColor;
     return backgroundColor || categoryBackgroundColor;
   });
   });
 
 
@@ -87,8 +87,8 @@
           {{ config?.name }}
           {{ config?.name }}
         </span>
         </span>
       </div>
       </div>
-      <div class="w-4 h-4 bg-dark-50 rounded-1 border absolute -left-2 border-light-50"></div>
-      <div class="w-4 h-4 bg-dark-50 rounded-1 border absolute -right-2 border-light-50"></div>
+      <div class="w-4 h-4 bg-gray-300 rounded-md border absolute -left-3 border-gray-500"></div>
+      <div class="w-4 h-4 bg-gray-300 rounded-md border absolute -right-3 border-gray-500"></div>
     </main>
     </main>
   </Tooltip>
   </Tooltip>
 </template>
 </template>

@@ -64,8 +64,8 @@
 
 
   const getNodeIcon = computed(() => {
   const getNodeIcon = computed(() => {
     const { nodeData } = props;
     const { nodeData } = props;
-    const { category, config } = nodeData;
-    const { icon: categoryIcon } = category || {};
+    const { categoryConfig, config } = nodeData;
+    const { icon: categoryIcon } = categoryConfig || {};
     const { configurationDescriptor } = config || {};
     const { configurationDescriptor } = config || {};
     const { nodeDefinition } = configurationDescriptor || {};
     const { nodeDefinition } = configurationDescriptor || {};
     const { icon } = nodeDefinition || {};
     const { icon } = nodeDefinition || {};
@@ -74,8 +74,8 @@
   });
   });
 
 
   const getTitleBackgroundColor = computed(() => {
   const getTitleBackgroundColor = computed(() => {
-    const { category, config } = props.nodeData;
-    const { backgroundColor: categoryBackgroundColor } = category || {};
+    const { categoryConfig, config } = props.nodeData;
+    const { backgroundColor: categoryBackgroundColor } = categoryConfig || {};
     const { backgroundColor } = config || {};
     const { backgroundColor } = config || {};
     return categoryBackgroundColor || backgroundColor;
     return categoryBackgroundColor || backgroundColor;
   });
   });

@@ -90,7 +90,7 @@
     <template #title>
     <template #title>
       <h2 class="font-bold text-2xl truncate">{{ nodeData?.data?.name }}</h2>
       <h2 class="font-bold text-2xl truncate">{{ nodeData?.data?.name }}</h2>
       <p class="mb-0 text-gray-700">
       <p class="mb-0 text-gray-700">
-        <span> {{ nodeData?.category?.title }}</span>
+        <span> {{ nodeData?.categoryConfig?.title }}</span>
         <span class="mx-1">-</span>
         <span class="mx-1">-</span>
         <span>{{ nodeData?.config?.name }}</span>
         <span>{{ nodeData?.config?.name }}</span>
       </p>
       </p>

 .vue-flow__handle {
 .vue-flow__handle {
   width: 16px;
   width: 16px;
   height: 16px;
   height: 16px;
+  border-radius: 6px;
+  background-color: #d1d5db;
+  border-color: #6b7280;
+}
+
+.vue-flow__handle:hover{
+  background-color: #000;
 }
 }
 
 
 .vue-flow__handle-right {
 .vue-flow__handle-right {
-  right: -8px;
+  right: -12px;
 }
 }
 
 
 .vue-flow__handle-left {
 .vue-flow__handle-left {
-  left: -8px; 
+  left: -12px; 
 }
 }
 
 
 .vue-flow__background.vue-flow__container {
 .vue-flow__background.vue-flow__container {

@@ -134,7 +134,7 @@ export interface DragTransferData {
 }
 }
 
 
 export interface NodeData<T = BasicNodeFormData> {
 export interface NodeData<T = BasicNodeFormData> {
-  category?: CategoryConfigType;
+  categoryConfig?: CategoryConfigType;
   config?: NodeItemConfigType;
   config?: NodeItemConfigType;
   data?: T;
   data?: T;
   created?: boolean;
   created?: boolean;

@@ -153,11 +153,14 @@
   let getActionFormValue = ref([]);
   let getActionFormValue = ref([]);
   const editEntryIdData = ref([]);
   const editEntryIdData = ref([]);
   const editAlarmConfigData = ref([]);
   const editAlarmConfigData = ref([]);
-  const isUpdate = ref(false);
+  const isUpdate = ref<boolean | number>(false);
   const id = ref(undefined);
   const id = ref(undefined);
   const tenantId = ref(undefined);
   const tenantId = ref(undefined);
   const isView = ref(true);
   const isView = ref(true);
-  const [registerForm, { resetFields, validate, setFieldsValue, getFieldsValue }] = useForm({
+  const [
+    registerForm,
+    { resetFields, validate, setFieldsValue, getFieldsValue, setProps, updateSchema },
+  ] = useForm({
     labelWidth: 120,
     labelWidth: 120,
     schemas: formSchema,
     schemas: formSchema,
     showActionButtonGroup: false,
     showActionButtonGroup: false,
@@ -532,6 +535,37 @@
       showFooter: unref(isView),
       showFooter: unref(isView),
       loading: false,
       loading: false,
     });
     });
+
+    if (isUpdate.value == 3) {
+      setProps({ disabled: true });
+      updateSchema({
+        field: 'organizationId',
+        componentProps: { apiTreeSelectProps: { disabled: true } },
+      });
+      await nextTick();
+      unref(skipUnwrap.triggerItemRefs)?.forEach((item) => {
+        item.setDisabledProps({ disabled: true });
+      });
+
+      unref(skipUnwrap.conditionItemRefs)?.forEach((item) => {
+        item.setDisabledProps({ disabled: true });
+      });
+
+      unref(skipUnwrap.actionItemRefs)?.forEach((item) => {
+        item.setDisabledProps({ disabled: true });
+      });
+    } else {
+      updateSchema({
+        field: 'organizationId',
+        componentProps: { apiTreeSelectProps: { disabled: false } },
+      });
+      unref(skipUnwrap.triggerItemRefs)?.forEach((item) => {
+        item.setCancelDisabled();
+      });
+      unref(skipUnwrap.conditionItemRefs)?.forEach((item) => {
+        item.setCancelDisabled();
+      });
+    }
   });
   });
 
 
   // 设置设备的options
   // 设置设备的options

@@ -29,6 +29,7 @@
         <template #operationType="{ model, field }">
         <template #operationType="{ model, field }">
           <Select
           <Select
             :options="options"
             :options="options"
+            :disabled="disabled"
             v-model:value="model[field]"
             v-model:value="model[field]"
             @change="operationType = model[field]"
             @change="operationType = model[field]"
             placeholder="请选择比较类型"
             placeholder="请选择比较类型"
@@ -39,6 +40,7 @@
           <Input v-model:value="model[field]" placeholder="请输入持续时间">
           <Input v-model:value="model[field]" placeholder="请输入持续时间">
             <template #addonAfter>
             <template #addonAfter>
               <Select
               <Select
+                :disabled="disabled"
                 v-model:value="model[`timeUnit`]"
                 v-model:value="model[`timeUnit`]"
                 :options="timeUnitOptions"
                 :options="timeUnitOptions"
                 style="width: 60px"
                 style="width: 60px"
@@ -58,7 +60,7 @@
   </div>
   </div>
 </template>
 </template>
 <script lang="ts" setup>
 <script lang="ts" setup>
-  import { ref, provide, nextTick } from 'vue';
+  import { ref, provide, nextTick, unref } from 'vue';
   import { CollapseContainer } from '/@/components/Container/index';
   import { CollapseContainer } from '/@/components/Container/index';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { Card, Select, Input, Tooltip } from 'ant-design-vue';
   import { Card, Select, Input, Tooltip } from 'ant-design-vue';
@@ -86,12 +88,13 @@
   const emit = defineEmits(['delete']);
   const emit = defineEmits(['delete']);
   const isUpdate = ref(false);
   const isUpdate = ref(false);
   const conditionScreeningRef = ref();
   const conditionScreeningRef = ref();
-  const [registerForm, { resetFields, getFieldsValue, updateSchema, setFieldsValue }] = useForm({
-    //TODO-wenwei-修复
-    schemas: cloneDeep(trigger_condition_schema),
-    //TODO-wenwei-修复
-    showActionButtonGroup: false,
-  });
+  const [registerForm, { resetFields, getFieldsValue, updateSchema, setFieldsValue, setProps }] =
+    useForm({
+      //TODO-wenwei-修复
+      schemas: cloneDeep(trigger_condition_schema),
+      //TODO-wenwei-修复
+      showActionButtonGroup: false,
+    });
 
 
   const alarmScheduleRef = ref<InstanceType<typeof AlarmSchedule>>();
   const alarmScheduleRef = ref<InstanceType<typeof AlarmSchedule>>();
   const getFieldsValueFunc = () => {
   const getFieldsValueFunc = () => {
@@ -144,6 +147,7 @@
   const currentIndex = ref(0);
   const currentIndex = ref(0);
   const [registerModal, { openModal }] = useModal();
   const [registerModal, { openModal }] = useModal();
   const handleScheduleChange = (value) => {
   const handleScheduleChange = (value) => {
+    if (unref(disabled)) return;
     const index = scheduleOptions.findIndex((item) => item.value === value);
     const index = scheduleOptions.findIndex((item) => item.value === value);
     // 报警日程弹窗
     // 报警日程弹窗
     if (index !== 0) {
     if (index !== 0) {
@@ -164,6 +168,16 @@
     currentIndex.value = index;
     currentIndex.value = index;
   };
   };
   const scheduleData = ref(null);
   const scheduleData = ref(null);
+
+  const disabled = ref<boolean>(false);
+  const setDisabledProps = (value) => {
+    setProps(value);
+    disabled.value = true;
+  };
+
+  const setCancelDisabled = () => {
+    disabled.value = false;
+  };
   defineExpose({
   defineExpose({
     getFieldsValue,
     getFieldsValue,
     updateFieldDeviceId,
     updateFieldDeviceId,
@@ -182,6 +196,8 @@
     isUpdate,
     isUpdate,
     alarmScheduleRef,
     alarmScheduleRef,
     updateFieldAttributeFunc,
     updateFieldAttributeFunc,
+    setDisabledProps,
+    setCancelDisabled,
   });
   });
 </script>
 </script>
 <style>
 <style>

@@ -31,8 +31,11 @@
   const emit = defineEmits(['deleteConditionForm']);
   const emit = defineEmits(['deleteConditionForm']);
   const operationType = inject('operationType');
   const operationType = inject('operationType');
   let schemas = ref([]);
   let schemas = ref([]);
+  const isViewDisabledBtn = window.localStorage.getItem('isViewDisabledBtn');
   onMounted(() => {
   onMounted(() => {
     schemas.value = isType(operationType.value);
     schemas.value = isType(operationType.value);
+
+    if (isViewDisabledBtn == 'isView') setProps({ disabled: true });
   });
   });
   watch(operationType, (newValue) => {
   watch(operationType, (newValue) => {
     schemas.value = isType(newValue);
     schemas.value = isType(newValue);
@@ -47,6 +50,7 @@
       getFieldsValue,
       getFieldsValue,
       setFieldsValue,
       setFieldsValue,
       validate,
       validate,
+      setProps,
     },
     },
   ] = useForm({
   ] = useForm({
     showActionButtonGroup: false,
     showActionButtonGroup: false,
@@ -55,6 +59,7 @@
     schemas,
     schemas,
   });
   });
   const deleteConditionForm = (index: number) => {
   const deleteConditionForm = (index: number) => {
+    if (isViewDisabledBtn == 'isView') return;
     emit('deleteConditionForm', index);
     emit('deleteConditionForm', index);
   };
   };
   // ft add
   // ft add

@@ -8,7 +8,8 @@
             <template v-for="(item, scheduleIndex) in scheduleOptions" :key="item.label">
             <template v-for="(item, scheduleIndex) in scheduleOptions" :key="item.label">
               <div
               <div
                 :class="{ 'ml-4': scheduleIndex >= 1, active: scheduleIndex === currentIndex }"
                 :class="{ 'ml-4': scheduleIndex >= 1, active: scheduleIndex === currentIndex }"
-                class="cursor-pointer"
+                class="cursor-pointer !p-0"
+                :disabled="disabled"
                 @click="handleScheduleChange(item.value)"
                 @click="handleScheduleChange(item.value)"
                 >{{ item.label }}</div
                 >{{ item.label }}</div
               >
               >
@@ -28,6 +29,7 @@
         <template #operationType="{ model, field }">
         <template #operationType="{ model, field }">
           <Select
           <Select
             :options="options"
             :options="options"
+            :disabled="disabled"
             v-model:value="model[field]"
             v-model:value="model[field]"
             @change="operationType = model[field]"
             @change="operationType = model[field]"
             placeholder="请选择比较类型"
             placeholder="请选择比较类型"
@@ -38,6 +40,7 @@
           <Input v-model:value="model[field]" placeholder="请输入持续时间">
           <Input v-model:value="model[field]" placeholder="请输入持续时间">
             <template #addonAfter>
             <template #addonAfter>
               <Select
               <Select
+                :disabled="disabled"
                 v-model:value="model[`timeUnit`]"
                 v-model:value="model[`timeUnit`]"
                 :options="timeUnitOptions"
                 :options="timeUnitOptions"
                 style="width: 60px"
                 style="width: 60px"
@@ -71,6 +74,7 @@
   import { Icon } from '/@/components/Icon';
   import { Icon } from '/@/components/Icon';
   import { useModal } from '/@/components/Modal';
   import { useModal } from '/@/components/Modal';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { unref } from 'vue';
 
 
   const { useByProductGetAttribute } = useCommonFun();
   const { useByProductGetAttribute } = useCommonFun();
   defineProps({
   defineProps({
@@ -92,12 +96,13 @@
 
 
   const isUpdate = ref(false);
   const isUpdate = ref(false);
   const conditionScreeningRef = ref();
   const conditionScreeningRef = ref();
-  const [registerForm, { resetFields, getFieldsValue, updateSchema, setFieldsValue }] = useForm({
-    //TODO-wenwei-修复
-    schemas: cloneDeep(trigger_condition_schema),
-    //TODO-wenwei-修复
-    showActionButtonGroup: false,
-  });
+  const [registerForm, { resetFields, getFieldsValue, updateSchema, setFieldsValue, setProps }] =
+    useForm({
+      //TODO-wenwei-修复
+      schemas: cloneDeep(trigger_condition_schema),
+      //TODO-wenwei-修复
+      showActionButtonGroup: false,
+    });
 
 
   const alarmScheduleRef = ref<InstanceType<typeof AlarmSchedule>>();
   const alarmScheduleRef = ref<InstanceType<typeof AlarmSchedule>>();
 
 
@@ -168,6 +173,7 @@
   };
   };
   //TODO-fengtao
   //TODO-fengtao
   const handleDelete = (params: { index: number; title: string }) => {
   const handleDelete = (params: { index: number; title: string }) => {
+    if (unref(disabled)) return;
     emit('delete', params);
     emit('delete', params);
   };
   };
   const operationType = ref<string>('');
   const operationType = ref<string>('');
@@ -192,6 +198,7 @@
   const [registerModal, { openModal }] = useModal();
   const [registerModal, { openModal }] = useModal();
   const currentIndex = ref(0);
   const currentIndex = ref(0);
   const handleScheduleChange = (value) => {
   const handleScheduleChange = (value) => {
+    if (unref(disabled)) return;
     const index = scheduleOptions.findIndex((item) => item.value === value);
     const index = scheduleOptions.findIndex((item) => item.value === value);
     // 报警日程弹窗
     // 报警日程弹窗
     if (index !== 0) {
     if (index !== 0) {
@@ -223,6 +230,16 @@
     // console.log(alarmConfigList);
     // console.log(alarmConfigList);
   };
   };
 
 
+  const disabled = ref<boolean>(false);
+  const setDisabledProps = (value) => {
+    setProps(value);
+    disabled.value = true;
+  };
+
+  const setCancelDisabled = () => {
+    disabled.value = false;
+  };
+
   defineExpose({
   defineExpose({
     getFieldsValueFunc,
     getFieldsValueFunc,
     updateFieldDeviceId,
     updateFieldDeviceId,
@@ -240,6 +257,8 @@
     updateFieldAttributeFunc,
     updateFieldAttributeFunc,
     updateFieldAlarmConfig,
     updateFieldAlarmConfig,
     updateEditFieldAlarmConfig,
     updateEditFieldAlarmConfig,
+    setDisabledProps,
+    setCancelDisabled,
   });
   });
 </script>
 </script>
 
 

@@ -13,6 +13,7 @@
     <BasicForm @register="registerAction">
     <BasicForm @register="registerAction">
       <template #outTarget="{ model, field }">
       <template #outTarget="{ model, field }">
         <Select
         <Select
+          :disabled="disabled"
           :options="options"
           :options="options"
           v-model:value="model[field]"
           v-model:value="model[field]"
           @change="changeOutTarget"
           @change="changeOutTarget"
@@ -24,6 +25,7 @@
       <template #alarmConfigSlot="{ model, field }">
       <template #alarmConfigSlot="{ model, field }">
         <a-select
         <a-select
           allowClear
           allowClear
+          :disabled="disabled"
           placeholder="请选择告警配置"
           placeholder="请选择告警配置"
           v-model:value="model[field]"
           v-model:value="model[field]"
           style="width: 205px; margin-left: 10px"
           style="width: 205px; margin-left: 10px"
@@ -41,14 +43,22 @@
       </template>
       </template>
       <template #doContext="{ model, field }">
       <template #doContext="{ model, field }">
         <div v-if="model['transportType'] === TransportTypeEnum.TCP">
         <div v-if="model['transportType'] === TransportTypeEnum.TCP">
-          <Input v-model:value="model[field]" placeholder="请输入自定义命令" />
+          <Input v-model:value="model[field]" :disabled="disabled" placeholder="请输入自定义命令" />
         </div>
         </div>
         <div
         <div
           v-show="model['transportType'] !== TransportTypeEnum.TCP"
           v-show="model['transportType'] !== TransportTypeEnum.TCP"
           class="flex"
           class="flex"
           style="align-items: center"
           style="align-items: center"
         >
         >
-          <div ref="jsoneditorRef" style="height: 100%; width: 100%"></div>
+          <div v-show="!disabled" ref="jsoneditorRef" style="height: 100%; width: 100%"></div>
+
+          <a-textarea
+            v-show="disabled"
+            :disabled="true"
+            :value="JSON.stringify(disabledValue)"
+            :rows="4"
+          />
+
           <a-button style="margin: -5px 0" type="text" @click="handlePremitter">格式化</a-button>
           <a-button style="margin: -5px 0" type="text" @click="handlePremitter">格式化</a-button>
           <Tooltip
           <Tooltip
             :title="
             :title="
@@ -64,7 +74,9 @@
         </div>
         </div>
       </template>
       </template>
       <template #clearAlarm>
       <template #clearAlarm>
-        <Checkbox v-model:checked="checked" @change="handleCheckedChange"> 清除告警 </Checkbox>
+        <Checkbox v-model:checked="checked" :disabled="disabled" @change="handleCheckedChange">
+          清除告警
+        </Checkbox>
         <Tooltip title="清除告警与触发器一一对应">
         <Tooltip title="清除告警与触发器一一对应">
           <QuestionCircleOutlined />
           <QuestionCircleOutlined />
         </Tooltip>
         </Tooltip>
@@ -189,10 +201,23 @@
     ];
     ];
   });
   });
 
 
-  const changeOutTarget = () => {
+  const changeOutTarget = (e) => {
+    if (!e) validateFields(['outTarget']);
+    else clearValidate('outTarget');
     emit('getActionFormArr');
     emit('getActionFormArr');
   };
   };
-  const [registerAction, { getFieldsValue, resetFields, setFieldsValue, validate }] = useForm({
+  const [
+    registerAction,
+    {
+      getFieldsValue,
+      resetFields,
+      setFieldsValue,
+      validate,
+      clearValidate,
+      validateFields,
+      setProps,
+    },
+  ] = useForm({
     schemas: actionSchema,
     schemas: actionSchema,
     showActionButtonGroup: false,
     showActionButtonGroup: false,
   });
   });
@@ -369,6 +394,7 @@
   };
   };
 
 
   const handleDelete = (actionIndex) => {
   const handleDelete = (actionIndex) => {
+    if (unref(disabled)) return;
     emit('deleteAction', actionIndex);
     emit('deleteAction', actionIndex);
   };
   };
 
 
@@ -404,6 +430,8 @@
   const jsoneditorRef = ref();
   const jsoneditorRef = ref();
   const jsonValue = ref({});
   const jsonValue = ref({});
   const jsonInstance = ref();
   const jsonInstance = ref();
+
+  const disabledValue = ref(); //查看时使用表单全部禁用使用这个来获取表单数据
   onMounted(() => {
   onMounted(() => {
     nextTick(() => {
     nextTick(() => {
       let options = {
       let options = {
@@ -420,6 +448,7 @@
   const getJsonValue = () => unref(jsonInstance).get();
   const getJsonValue = () => unref(jsonInstance).get();
   const setJsonValue = (Json) => {
   const setJsonValue = (Json) => {
     nextTick(() => {
     nextTick(() => {
+      disabledValue.value = Json;
       unref(jsonInstance).set(Json);
       unref(jsonInstance).set(Json);
     });
     });
   };
   };
@@ -447,6 +476,23 @@
     emit('getActionFormArr');
     emit('getActionFormArr');
   };
   };
 
 
+  const disabled = ref<boolean>(false);
+  const setDisabledProps = async (value) => {
+    setProps(value);
+    disabled.value = true;
+    await nextTick();
+    unref(refItem.clearRuleRefs)?.forEach((item) => {
+      item.setDisabledProps(value);
+    });
+  };
+
+  const setCancelDisabled = () => {
+    disabled.value = false;
+    unref(refItem.clearRuleRefs)?.forEach((item) => {
+      item.setCancelDisabled();
+    });
+  };
+
   defineExpose({
   defineExpose({
     getFieldsValue,
     getFieldsValue,
     getFieldsValueFunc,
     getFieldsValueFunc,
@@ -467,6 +513,8 @@
     clearRuleList,
     clearRuleList,
     resetConditionForm,
     resetConditionForm,
     handleDropdownVisibleChange,
     handleDropdownVisibleChange,
+    setDisabledProps,
+    setCancelDisabled,
   });
   });
 </script>
 </script>
 
 

@@ -114,7 +114,7 @@
   </div>
   </div>
 </template>
 </template>
 <script setup lang="ts">
 <script setup lang="ts">
-  import { ref, unref, reactive, onMounted, toRefs, computed } from 'vue';
+  import { ref, unref, reactive, onMounted, toRefs, computed, nextTick } from 'vue';
   import ace from 'ace-builds';
   import ace from 'ace-builds';
   import { Card, Button, Tooltip } from 'ant-design-vue';
   import { Card, Button, Tooltip } from 'ant-design-vue';
   import 'ace-builds/src-noconflict/theme-chrome'; // 默认设置的主题
   import 'ace-builds/src-noconflict/theme-chrome'; // 默认设置的主题
@@ -323,7 +323,19 @@
   };
   };
 
 
   const setDisableRadio = (value) => {
   const setDisableRadio = (value) => {
-    reportTypeOptions.scriptTypeOptions.forEach((item: any) => {
+    //查看和表格里面的测试点击禁用脚本类型
+    unref(reportTypeOptions.scriptTypeOptions).forEach((item: any) => {
+      if (item.value === value) item.disabled = false;
+      else item.disabled = true;
+    });
+  };
+
+  const setDisableTestRadio = async (value) => {
+    //内部弹窗，使用上面的setDisableRadio无效
+    //新增里面的测试点击禁用脚本类型
+    await getScriptType();
+    await nextTick();
+    unref(reportTypeOptions.scriptTypeOptions).forEach((item: any) => {
       if (item.value === value) item.disabled = false;
       if (item.value === value) item.disabled = false;
       else item.disabled = true;
       else item.disabled = true;
     });
     });
@@ -336,6 +348,7 @@
     setScriptOutputData,
     setScriptOutputData,
     setDefaultRadio,
     setDefaultRadio,
     setDisableRadio,
     setDisableRadio,
+    setDisableTestRadio,
   });
   });
 </script>
 </script>
 <style lang="less" scoped>
 <style lang="less" scoped>

@@ -56,7 +56,15 @@
       if (!data.innerTest) {
       if (!data.innerTest) {
         const rest = await getScriptManageDetail(data.record?.id);
         const rest = await getScriptManageDetail(data.record?.id);
         converScriptFormRef.value?.setFormData(rest);
         converScriptFormRef.value?.setFormData(rest);
-      } else converScriptFormRef.value?.setFormData(data.record);
+        if (data.text !== BusinessConvertScriptTextEnum.BUSINESS_EDIT_TEXT) {
+          //编辑是不能禁用脚本类型的
+          converScriptFormRef.value?.setDisableRadio(data.record.scriptType);
+        }
+      } else {
+        //从新增页面里点击的测试,禁用脚本类型
+        converScriptFormRef.value?.setFormData(data.record);
+        converScriptFormRef.value?.setDisableTestRadio(data.record.scriptType);
+      }
       if (data.scriptType) {
       if (data.scriptType) {
         converScriptFormRef.value?.setDisableRadio(data.scriptType);
         converScriptFormRef.value?.setDisableRadio(data.scriptType);
       }
       }

@@ -18,6 +18,7 @@
             ref="basicTreeRef"
             ref="basicTreeRef"
             checkable
             checkable
             toolbar
             toolbar
+            @change="handleTreeSelect"
           />
           />
         </template>
         </template>
         <template #roleSlot="{ model, field }">
         <template #roleSlot="{ model, field }">
@@ -26,6 +27,7 @@
             allowClear
             allowClear
             placeholder="请选择角色"
             placeholder="请选择角色"
             v-model:value="model[field]"
             v-model:value="model[field]"
+            @change="handleRoleSelect"
             :options="roleOptions.map((item) => ({ value: item.value, label: item.label }))"
             :options="roleOptions.map((item) => ({ value: item.value, label: item.label }))"
           >
           >
             <template #dropdownRender="{ menuNode: menu }">
             <template #dropdownRender="{ menuNode: menu }">
@@ -108,12 +110,30 @@
           isUpdate: false,
           isUpdate: false,
         });
         });
       };
       };
+      const clearValidateByField = (field: string) => {
+        clearValidate(field);
+      };
+      const handleRoleSelect = (e) => {
+        if (e?.length > 0) clearValidateByField('roleIds');
+        else validateFields(['roleIds']);
+      };
+      const handleTreeSelect = (e) => {
+        if (e) clearValidateByField('organizationIds');
+      };
       const handleSuccess = async () => {
       const handleSuccess = async () => {
         await getRoleList();
         await getRoleList();
       };
       };
       const [
       const [
         registerForm,
         registerForm,
-        { setFieldsValue, updateSchema, resetFields, validate, getFieldsValue },
+        {
+          setFieldsValue,
+          updateSchema,
+          resetFields,
+          validate,
+          getFieldsValue,
+          clearValidate,
+          validateFields,
+        },
       ] = useForm({
       ] = useForm({
         labelWidth: 100,
         labelWidth: 100,
         schemas: accountFormSchema,
         schemas: accountFormSchema,
@@ -225,6 +245,8 @@
         registerRoleDrawer,
         registerRoleDrawer,
         handleOpenRole,
         handleOpenRole,
         handleSuccess,
         handleSuccess,
+        handleRoleSelect,
+        handleTreeSelect,
       };
       };
     },
     },
   });
   });

@@ -153,6 +153,7 @@
               title: '是否确认删除操作?',
               title: '是否确认删除操作?',
               onConfirm: handleDelete.bind(null),
               onConfirm: handleDelete.bind(null),
             },
             },
+            disabled: !!getRecord.state,
           },
           },
         ]"
         ]"
       />
       />

@@ -35,6 +35,7 @@
       const { proxy } = getCurrentInstance() as any;
       const { proxy } = getCurrentInstance() as any;
       const getChildData = ref(null);
       const getChildData = ref(null);
       const editGetId: any = ref('');
       const editGetId: any = ref('');
+      const isDefault = ref(false);
       const createTime = ref<string>('');
       const createTime = ref<string>('');
       const [registerForm, { validate, resetFields, setFieldsValue, updateSchema }] = useForm({
       const [registerForm, { validate, resetFields, setFieldsValue, updateSchema }] = useForm({
         schemas: formSchema,
         schemas: formSchema,
@@ -55,6 +56,7 @@
           parentSetData.value = { ...data.record.profileData.configuration };
           parentSetData.value = { ...data.record.profileData.configuration };
           proxy.$refs.getChildData.setFieldsValueFunc(parentSetData.value);
           proxy.$refs.getChildData.setFieldsValueFunc(parentSetData.value);
           editGetId.value = data.record.id;
           editGetId.value = data.record.id;
+          isDefault.value = data.record.default;
           await setFieldsValue({
           await setFieldsValue({
             ...data.record,
             ...data.record,
           });
           });
@@ -95,6 +97,10 @@
         const createTime1 = {
         const createTime1 = {
           createdTime: isUpdate ? unref(createTime) : Date.now(),
           createdTime: isUpdate ? unref(createTime) : Date.now(),
         };
         };
+
+        const defaultInfo = {
+          default: unref(isUpdate) ? isDefault.value : false,
+        };
         Object.assign(
         Object.assign(
           postAllData,
           postAllData,
           {
           {
@@ -102,7 +108,8 @@
           },
           },
           getValuesFormData,
           getValuesFormData,
           id,
           id,
-          createTime1
+          createTime1,
+          defaultInfo
         );
         );
         if (!unref(isUpdate)) {
         if (!unref(isUpdate)) {
           delete postAllData.id;
           delete postAllData.id;

@@ -43,11 +43,11 @@
         },
         },
         {
         {
           field: 'username',
           field: 'username',
-          label: '账号',
+          label: '用户名',
           component: 'Input',
           component: 'Input',
           componentProps: {
           componentProps: {
             maxLength: 64,
             maxLength: 64,
-            placeholder: '请输入账号',
+            placeholder: '请输入用户名',
           },
           },
           dynamicRules: ({ values }) => {
           dynamicRules: ({ values }) => {
             try {
             try {
@@ -62,14 +62,13 @@
                   validator(_, value) {
                   validator(_, value) {
                     return new Promise((resolve, reject) => {
                     return new Promise((resolve, reject) => {
                       if (value == '' || value === undefined) {
                       if (value == '' || value === undefined) {
-                        reject('请输入账号');
+                        reject('请输入用户名');
                       } else if (ChineseRegexp.test(value)) {
                       } else if (ChineseRegexp.test(value)) {
-                        reject('账号不能含有中文');
+                        reject('用户名不能含有中文');
                       } else if (EmailRegexp.test(value)) {
                       } else if (EmailRegexp.test(value)) {
-                        reject('账号不能为电子邮箱格式');
+                        reject('用户名不能为电子邮箱格式');
                       } else if (findUserName && value == findUserName?.username) {
                       } else if (findUserName && value == findUserName?.username) {
-                        console.log(1111111111);
-                        reject('账号已存在');
+                        reject('用户名已存在');
                         return;
                         return;
                       } else {
                       } else {
                         resolve();
                         resolve();

@@ -7,50 +7,25 @@
     width="500px"
     width="500px"
     @ok="handleSubmit"
     @ok="handleSubmit"
   >
   >
-    <BasicForm @register="tenantForm">
-      <template #iconSelect>
-        <Upload
-          name="avatar"
-          accept=".png,.jpg,.jpeg,.gif"
-          list-type="picture-card"
-          class="avatar-uploader"
-          :show-upload-list="false"
-          :customRequest="customUpload"
-          :before-upload="beforeUpload"
-        >
-          <img v-if="tenantLogo" :src="tenantLogo" alt="avatar" />
-          <div v-else>
-            <LoadingOutlined v-if="loading" />
-            <plus-outlined v-else />
-            <div class="ant-upload-text">上传</div>
-          </div>
-        </Upload>
-      </template>
-    </BasicForm>
+    <BasicForm @register="tenantForm" />
   </BasicDrawer>
   </BasicDrawer>
 </template>
 </template>
 <script lang="ts">
 <script lang="ts">
   import { defineComponent, ref, computed, unref } from 'vue';
   import { defineComponent, ref, computed, unref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { BasicForm, useForm } from '/@/components/Form/index';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
-  import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
-  import { message, Upload } from 'ant-design-vue';
-
   import { useI18n } from '/@/hooks/web/useI18n';
   import { useI18n } from '/@/hooks/web/useI18n';
   import { tenantFormSchema } from '/@/views/tenant/list/tenantBaseColumns';
   import { tenantFormSchema } from '/@/views/tenant/list/tenantBaseColumns';
-  import { FileItem } from '/@/components/Upload/src/typing';
-  import { upload } from '/@/api/oss/ossFileUploader';
   import { getTenantRoles, updateOrCreateTenant } from '/@/api/tenant/tenantApi';
   import { getTenantRoles, updateOrCreateTenant } from '/@/api/tenant/tenantApi';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMessage } from '/@/hooks/web/useMessage';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { buildUUID } from '/@/utils/uuid';
 
 
   export default defineComponent({
   export default defineComponent({
     name: 'TenantDrawer',
     name: 'TenantDrawer',
     components: {
     components: {
       BasicDrawer,
       BasicDrawer,
       BasicForm,
       BasicForm,
-      Upload,
-      PlusOutlined,
-      LoadingOutlined,
     },
     },
     emits: ['success', 'register'],
     emits: ['success', 'register'],
     setup(_, { emit }) {
     setup(_, { emit }) {
@@ -58,33 +33,7 @@
       const { createMessage } = useMessage();
       const { createMessage } = useMessage();
 
 
       const isUpdate = ref(true);
       const isUpdate = ref(true);
-      const tenantLogo = ref('');
-
-      async function customUpload({ file }) {
-        if (beforeUpload(file)) {
-          tenantLogo.value = '';
-          loading.value = true;
-          const formData = new FormData();
-          formData.append('file', file);
-          const response = await upload(formData);
-          if (response.fileStaticUri) {
-            tenantLogo.value = response.fileStaticUri;
-            loading.value = false;
-          }
-        }
-      }
 
 
-      const beforeUpload = (file: FileItem) => {
-        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-        if (!isJpgOrPng) {
-          message.error('只能上传图片文件!');
-        }
-        const isLt2M = (file.size as number) / 1024 / 1024 < 5;
-        if (!isLt2M) {
-          message.error('图片大小不能超过5MB!');
-        }
-        return isJpgOrPng && isLt2M;
-      };
       const [tenantForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
       const [tenantForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
         labelWidth: 100,
         labelWidth: 100,
         schemas: tenantFormSchema,
         schemas: tenantFormSchema,
@@ -96,7 +45,6 @@
       //默认传递页面数据
       //默认传递页面数据
       const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
       const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
         await resetFields();
         await resetFields();
-        tenantLogo.value = '';
         setDrawerProps({ confirmLoading: false });
         setDrawerProps({ confirmLoading: false });
         isUpdate.value = !!data?.isUpdate;
         isUpdate.value = !!data?.isUpdate;
 
 
@@ -104,11 +52,19 @@
         await updateSchema({ field: 'title', componentProps: { disabled: false } });
         await updateSchema({ field: 'title', componentProps: { disabled: false } });
         //如果是编辑操作，设置页面数据
         //如果是编辑操作，设置页面数据
         if (unref(isUpdate)) {
         if (unref(isUpdate)) {
+          if (data.record.icon) {
+            setFieldsValue({
+              icon: [{ uid: buildUUID(), name: 'name', url: data.record.icon } as FileItem],
+            });
+          }
           getTenantRoles(data.record.tenantId).then((result) => {
           getTenantRoles(data.record.tenantId).then((result) => {
-            Reflect.set(data.record, 'roleIds', result);
+            const { icon, ...params } = data.record;
+            console.log(icon);
             //为表单赋值
             //为表单赋值
-            setFieldsValue(data.record);
-            tenantLogo.value = data.record.icon;
+            setFieldsValue({
+              ...params,
+              roleIds: result,
+            });
             //编辑模式，菜单名称为不可用
             //编辑模式，菜单名称为不可用
             updateSchema({ field: 'title', componentProps: { disabled: true } });
             updateSchema({ field: 'title', componentProps: { disabled: true } });
           });
           });
@@ -126,9 +82,13 @@
         setDrawerProps({ confirmLoading: true });
         setDrawerProps({ confirmLoading: true });
         try {
         try {
           const values = await validate();
           const values = await validate();
+          if (Reflect.has(values, 'icon')) {
+            const file = (values.icon || []).at(0) || {};
+            values.icon = file.url || null;
+          }
           const req = {
           const req = {
             id: values.id,
             id: values.id,
-            icon: tenantLogo.value,
+            icon: values.icon,
             name: values.name,
             name: values.name,
             enabled: values.enabled,
             enabled: values.enabled,
             description: values.description,
             description: values.description,
@@ -161,9 +121,6 @@
         tenantForm,
         tenantForm,
         getTitle,
         getTitle,
         handleSubmit,
         handleSubmit,
-        tenantLogo,
-        beforeUpload,
-        customUpload,
         loading,
         loading,
       };
       };
     },
     },

@@ -3,6 +3,9 @@ import { FormSchema } from '/@/components/Form';
 import { getAllRoleList } from '/@/api/system/system';
 import { getAllRoleList } from '/@/api/system/system';
 import { getTableTenantProfileApi, QueryTenantProfilesParam } from '/@/api/tenant/tenantApi';
 import { getTableTenantProfileApi, QueryTenantProfilesParam } from '/@/api/tenant/tenantApi';
 import { RoleEnum } from '/@/enums/roleEnum';
 import { RoleEnum } from '/@/enums/roleEnum';
+import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+import { createImgPreview } from '/@/components/Preview';
+import { uploadThumbnail } from '/@/api/configuration/center/configurationCenter';
 
 
 export function getBasicColumns(): BasicColumn[] {
 export function getBasicColumns(): BasicColumn[] {
   return [
   return [
@@ -77,23 +80,32 @@ export const tenantFormSchema: FormSchema[] = [
   {
   {
     field: 'icon',
     field: 'icon',
     label: '租户图标',
     label: '租户图标',
-    slot: 'iconSelect',
-    component: 'Input',
-    componentProps: {
-      maxLength: 255,
-    },
-    dynamicRules: () => {
-      return [
-        {
-          required: false,
-          validator: (_, value) => {
-            if (String(value).length > 255) {
-              return Promise.reject('字数不超过255个字');
-            }
-            return Promise.resolve();
-          },
+    component: 'ApiUpload',
+    changeEvent: 'update:fileList',
+    valueField: 'fileList',
+    componentProps: () => {
+      return {
+        listType: 'picture-card',
+        maxFileLimit: 1,
+        accept: '.png,.jpg,.jpeg,.gif',
+        api: async (file: File) => {
+          try {
+            const formData = new FormData();
+            formData.set('file', file);
+            const { fileStaticUri, fileName } = await uploadThumbnail(formData);
+            return {
+              uid: fileStaticUri,
+              name: fileName,
+              url: fileStaticUri,
+            } as FileItem;
+          } catch (error) {
+            return {};
+          }
         },
         },
-      ];
+        onPreview: (fileList: FileItem) => {
+          createImgPreview({ imageList: [fileList.url!] });
+        },
+      };
     },
     },
   },
   },
   {
   {

@@ -169,8 +169,6 @@
     }
     }
   );
   );
 
 
-  const { containerEl } = useSort(emit, getFormValues);
-
   const handleSettingOk = (data: DataSourceType) => {
   const handleSettingOk = (data: DataSourceType) => {
     const { uuid } = data;
     const { uuid } = data;
     const _dataSource = cloneDeep(getFormValues());
     const _dataSource = cloneDeep(getFormValues());
@@ -182,6 +180,8 @@
     emit('update:dataSource', _dataSource);
     emit('update:dataSource', _dataSource);
   };
   };
 
 
+  const { containerEl } = useSort(emit, getFormValues);
+
   defineExpose({
   defineExpose({
     getFormValues,
     getFormValues,
     validate,
     validate,
@@ -198,6 +198,7 @@
         <component
         <component
           :ref="(event) => setDataSourceFormsEl(item.uuid, event, index)"
           :ref="(event) => setDataSourceFormsEl(item.uuid, event, index)"
           class="flex-1 bg-light-50 dark:bg-dark-400"
           class="flex-1 bg-light-50 dark:bg-dark-400"
+          style="max-width: calc(100% - 216px)"
           :is="getComponent"
           :is="getComponent"
           :component-config="componentConfig"
           :component-config="componentConfig"
           :values="item"
           :values="item"
@@ -235,3 +236,11 @@
     />
     />
   </section>
   </section>
 </template>
 </template>
+
+<style scoped lang="less">
+  :deep(#deviceId) {
+    div {
+      width: 100%;
+    }
+  }
+</style>

@@ -267,6 +267,7 @@
   <BasicModal
   <BasicModal
     title="自定义组件"
     title="自定义组件"
     width="70%"
     width="70%"
+    :destroy-on-close="true"
     @register="registerModal"
     @register="registerModal"
     @ok="handleSubmit"
     @ok="handleSubmit"
     :ok-button-props="{ loading }"
     :ok-button-props="{ loading }"

@@ -293,12 +293,13 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
                   (item) => item.itemValue == CommandTypeEnum.ATTRIBUTE.toString()
                   (item) => item.itemValue == CommandTypeEnum.ATTRIBUTE.toString()
                 );
                 );
               }
               }
-
               // TCP网关子 --> 不能要服务命令类型
               // TCP网关子 --> 不能要服务命令类型
               if (deviceType == 'SENSOR' && transportType == 'TCP') {
               if (deviceType == 'SENSOR' && transportType == 'TCP') {
-                return record.filter(
-                  (item) => item.itemValue == CommandTypeEnum.ATTRIBUTE.toString()
-                );
+                return codeType == 'MODBUS_RTU'
+                  ? record.filter((item) => item.itemValue == CommandTypeEnum.ATTRIBUTE.toString())
+                  : codeType == 'CUSTOM'
+                  ? record.filter((item) => item.itemValue == CommandTypeEnum.CUSTOM.toString())
+                  : [];
               }
               }
 
 
               if (codeType == TaskTypeEnum.MODBUS_RTU) {
               if (codeType == TaskTypeEnum.MODBUS_RTU) {

@@ -286,6 +286,7 @@ export const useSocket = (dataSourceRef: Ref<WidgetDataType[]>) => {
         throw Error(error as string);
         throw Error(error as string);
       }
       }
     },
     },
+    autoReconnect: true,
   });
   });
 
 
   const initSubscribe = () => {
   const initSubscribe = () => {