chore: 合并代码解决冲突

@@ -25,7 +25,7 @@ module.exports = defineConfig({
     'plugin:jest/recommended',
   ],
   rules: {
-    'no-console': 'error',
+    'no-console': 'off',
     'vue/script-setup-uses-vars': 'error',
     '@typescript-eslint/ban-ts-ignore': '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();
-          isFirstLoad.value = false;
         }
       }
 

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

+<script lang="ts" setup>
+  import { Button, Tabs, Badge, ButtonProps, Tag } from 'ant-design-vue';
+  import { get, isFunction, set, uniqBy } from 'lodash-es';
+  import { ExtractPropTypes, computed, unref, ref, nextTick, onMounted, watch } from 'vue';
+  import { DynamicProps } from '/#/utils';
+  import { BasicModal, useModal } from '/@/components/Modal';
+  import { BasicTable, BasicTableProps, TableRowSelection, useTable } from '/@/components/Table';
+  import { FETCH_SETTING } from '/@/components/Table/src/const';
+  import { useDesign } from '/@/hooks/web/useDesign';
+
+  interface Options extends Recordable {
+    primaryKey?: string;
+    disabled?: boolean;
+  }
+
+  enum Active {
+    PENDING = 'pending',
+    SELECTED = 'selected',
+  }
+
+  interface ActionType {
+    setSelectedOptions: (options: Recordable[]) => void;
+  }
+
+  const emit = defineEmits(['change', 'update:value']);
+
+  const props = withDefaults(
+    defineProps<{
+      value?: string[];
+      labelField?: string;
+      valueField?: string;
+      primaryKey?: string;
+      params?: Recordable;
+      buttonName?: string;
+      pendingTableProps?: BasicTableProps;
+      selectedTableProps?: BasicTableProps;
+      maxTagLength?: number;
+      modalProps?: ExtractPropTypes<InstanceType<typeof BasicModal>['$props']>;
+      buttonProps?: ExtractPropTypes<InstanceType<typeof Button>['$props']>;
+      initSelectedOptions?: (actionType: ActionType) => Promise<Recordable[]>;
+      transformValue?: (selectedRowKeys: string[], selectedRows: Options[]) => any[];
+      onValueChange?: (selectedRowkeys: string[]) => any[];
+      onRemoveAfter?: (actionType: ActionType) => Promise<any>;
+      onSelectedAfter?: (actionType: ActionType) => Promise<any>;
+      disabled?: any;
+    }>(),
+    {
+      buttonName: '选择设备',
+      primaryKey: 'id',
+      maxTagLength: 2,
+      labelField: 'label',
+      valueField: 'value',
+      disabled: false,
+    }
+  );
+
+  const { prefixCls } = useDesign('transfer-table-modal');
+
+  const activeKey = ref<Active>(Active.PENDING);
+
+  const selectedRows = ref<Options[]>([]);
+
+  const selectedRowKeys = ref<string[]>(props.value || []);
+
+  const pendingOptions = ref<Options[]>([]);
+
+  const selectedConfirmQueue = ref<Options[]>([]);
+
+  const pendingConfirmQueue = ref<Options[]>([]);
+
+  const selectedTotal = ref(0);
+
+  const pendingTotal = ref(0);
+
+  const getFetchSetting = computed(() => {
+    const { pendingTableProps } = props;
+    return pendingTableProps?.fetchSetting || FETCH_SETTING;
+  });
+
+  const getPendingRowSelection = computed<TableRowSelection>(() => {
+    const rowKeys = unref(selectedRowKeys);
+    return {
+      type: 'checkbox',
+      getCheckboxProps: (record: Recordable) => {
+        const { primaryKey } = props;
+        return {
+          ...record,
+          disabled: rowKeys.includes(record[primaryKey]),
+        };
+      },
+      onSelect: (_record: Recordable, _selected: boolean, selectedRows: Object[]) => {
+        pendingConfirmQueue.value = selectedRows;
+      },
+      onSelectAll: (_selected: boolean, selectedRows: Recordable[]) => {
+        pendingConfirmQueue.value = selectedRows;
+      },
+    };
+  });
+
+  const getPendingTableBindProps = computed<Partial<DynamicProps<BasicTableProps>>>(() => {
+    const { pendingTableProps, primaryKey } = props;
+    return {
+      ...pendingTableProps,
+      rowKey: primaryKey,
+      api: handlePendingApiIntercept,
+      clickToRowSelect: false,
+      rowSelection: getPendingRowSelection,
+    };
+  });
+
+  const getSelectedTableBindProps = computed<Partial<DynamicProps<BasicTableProps>>>(() => {
+    const { selectedTableProps, primaryKey } = props;
+    return {
+      ...selectedTableProps,
+      dataSource: selectedRows,
+      clickToRowSelect: false,
+      rowKey: primaryKey,
+      api: selectedTableProps!.api ? handleSelectedApiIntercept : undefined,
+      rowSelection: {
+        type: 'checkbox',
+        onSelect: (_record: Recordable, _selected: boolean, selectedRows: Object[]) => {
+          selectedConfirmQueue.value = selectedRows;
+        },
+        onSelectAll: (_selected: boolean, selectedRows: Recordable[]) => {
+          selectedConfirmQueue.value = selectedRows;
+        },
+      },
+    };
+  });
+
+  const getModalBindProps = computed(() => {
+    const { modalProps = {} } = props;
+    return {
+      width: '60%',
+      title: '穿梭表格',
+      wrapClassName: prefixCls,
+      ...modalProps,
+      showOkBtn: false,
+    };
+  });
+
+  const getBindButtonProps = computed<ButtonProps>(() => {
+    const { buttonProps = {} } = props;
+    return {
+      type: 'link',
+      ...buttonProps,
+    };
+  });
+
+  const getShowTagOptions = computed(() => {
+    const { maxTagLength } = props;
+    return unref(selectedRows).slice(0, maxTagLength);
+  });
+
+  const getSurplusOptionsLength = computed(() => {
+    const { maxTagLength } = props;
+    const surplusValue = unref(selectedRows).length - maxTagLength;
+    return surplusValue < 0 ? 0 : surplusValue;
+  });
+
+  const [registerModal, { openModal }] = useModal();
+
+  const [
+    regsterPendingTable,
+    {
+      getSelectRows: getPendingSelectRows,
+      getSelectRowKeys: getPendingSelectRowKeys,
+      reload: reloadPending,
+      clearSelectedRowKeys: clearPendingSelectedRowKeys,
+    },
+  ] = useTable(unref(getPendingTableBindProps));
+
+  const [
+    registerSelectedTable,
+    { getSelectRowKeys, setProps, clearSelectedRowKeys, reload: reloadSelected },
+  ] = useTable(unref(getSelectedTableBindProps));
+
+  async function handlePendingApiIntercept(params?: Recordable) {
+    try {
+      const { api } = props.pendingTableProps || {};
+      if (api && isFunction(api)) {
+        let options = await api(params);
+        pendingOptions.value = options;
+        const { totalField, listField } = unref(getFetchSetting);
+        const total = get(options, totalField!);
+        if (unref(selectedTotal) + unref(pendingTotal) !== total) {
+          pendingTotal.value = total;
+        }
+        let list: Recordable[] = get(options, listField!);
+        list = getSelectedRows(list);
+        options = set(options, listField!, list);
+        return options;
+      }
+    } catch (error) {
+      console.error(error);
+      return [];
+    }
+    return [];
+  }
+
+  async function handleSelectedApiIntercept(params?: Recordable) {
+    try {
+      const { api } = props.selectedTableProps || {};
+      if (api && isFunction(api)) {
+        let options = await api(params);
+        pendingOptions.value = options;
+        const { totalField, listField } = unref(getFetchSetting);
+        selectedTotal.value = get(options, totalField!);
+        let list: Recordable[] = get(options, listField!);
+        list = getSelectedRows(list);
+        options = set(options, listField!, list);
+        return options;
+      }
+    } catch (error) {
+      console.error(error);
+      return [];
+    }
+    return [];
+  }
+
+  const handleOpenModal = async () => {
+    const { disabled } = props;
+    if (disabled) return;
+    openModal(true);
+    await nextTick();
+    if (props.value && !props.value.length) {
+      activeKey.value = Active.PENDING;
+      reloadPending();
+    }
+  };
+
+  const handleTriggerEmit = (selectedRowKeys: string[], selectedRows: Options[]) => {
+    const { transformValue } = props;
+    let value = selectedRowKeys;
+    if (transformValue && isFunction(transformValue)) {
+      value = transformValue(selectedRowKeys, selectedRows);
+    }
+    emit('change', unref(selectedRowKeys), unref(selectedRows));
+    emit('update:value', unref(value));
+  };
+
+  const handleSelected = async () => {
+    const { onSelectedAfter } = props;
+    const currentPageSelectRows = getPendingSelectRows();
+    const currentPageSelectRowKeys = getPendingSelectRowKeys();
+    const { primaryKey } = props;
+    selectedRows.value = uniqBy([...unref(selectedRows), ...currentPageSelectRows], primaryKey);
+    selectedRowKeys.value = [...new Set([...unref(selectedRowKeys), ...currentPageSelectRowKeys])];
+    pendingConfirmQueue.value = [];
+    // selectedTotal.value = unref(selectedRowKeys).length;
+    pendingTotal.value = unref(pendingTotal) - currentPageSelectRows.length;
+    selectedTotal.value = unref(selectedTotal) + currentPageSelectRows.length;
+
+    clearPendingSelectedRowKeys();
+    handleTriggerEmit(unref(selectedRowKeys), unref(selectedRows));
+
+    if (onSelectedAfter && isFunction(onSelectedAfter)) {
+      await onSelectedAfter(actionType);
+    }
+    reloadPending();
+  };
+
+  const handleRemoveSelected = async () => {
+    const { onRemoveAfter } = props;
+    const removeRowKeys = getSelectRowKeys();
+    selectedRowKeys.value = unref(selectedRowKeys).filter((key) => !removeRowKeys.includes(key));
+    selectedRows.value = unref(selectedRows).filter((item) => {
+      const { primaryKey } = props;
+      return unref(selectedRowKeys).includes(item[primaryKey]);
+    });
+    pendingTotal.value = unref(pendingTotal) + removeRowKeys.length;
+    selectedTotal.value = unref(selectedTotal) - removeRowKeys.length;
+
+    clearSelectedRowKeys();
+    selectedConfirmQueue.value = [];
+    setProps({ dataSource: unref(selectedRows) });
+    handleTriggerEmit(unref(selectedRowKeys), unref(selectedRows));
+
+    if (onRemoveAfter && isFunction(onRemoveAfter)) {
+      await onRemoveAfter(actionType);
+    }
+  };
+
+  const actionType = {
+    setSelectedOptions,
+    setSelectedTotal,
+    reloadPending,
+    reloadSelected,
+  };
+
+  const getSelectedRows = (options: Recordable[]) => {
+    const { labelField, valueField } = props;
+    return options.map((item) => ({ ...item, label: item[labelField], value: item[valueField] }));
+  };
+
+  const getSelectedKeys = (options: Recordable[]) => {
+    const { primaryKey } = props;
+    return options.map((item) => item[primaryKey]);
+  };
+
+  function setSelectedOptions(options: Recordable[]) {
+    selectedRows.value = getSelectedRows(options);
+    selectedRowKeys.value = getSelectedKeys(options);
+  }
+
+  function setSelectedTotal(number: number) {
+    selectedTotal.value = number;
+  }
+
+  const handleCheckoutPanel = async (keys: Active) => {
+    await nextTick();
+    if (keys === Active.PENDING) {
+      reloadPending();
+    } else {
+      reloadSelected();
+      setProps({
+        dataSource: unref(selectedRows),
+      });
+    }
+  };
+
+  watch(
+    () => props.value,
+    () => {
+      if (props.value && !props.value.length) {
+        selectedRowKeys.value = [];
+        selectedRows.value = [];
+        // pendingTotal.value = 0;
+        selectedTotal.value = 0;
+      }
+    }
+  );
+
+  onMounted(async () => {
+    const { initSelectedOptions } = props;
+    if (initSelectedOptions && isFunction(initSelectedOptions)) {
+      const options = await initSelectedOptions(actionType);
+      setSelectedOptions(options);
+    }
+  });
+</script>
+
+<template>
+  <section>
+    <BasicModal @register="registerModal" v-bind="getModalBindProps">
+      <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="pendingTotal" />
+              </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="selectedTotal" />
+              </div>
+            </template>
+            <BasicTable @register="registerSelectedTable">
+              <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>{{ 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" v-bind="getBindButtonProps">
+      <span v-if="!selectedRowKeys.length">选择设备</span>
+      <div v-if="selectedRowKeys.length">
+        <Tag
+          class="!px-2 !py-1 !bg-gray-50 !border-gray-100"
+          v-for="item in getShowTagOptions"
+          :key="item.value"
+        >
+          <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;
+    }
+  }
+</style>

@@ -70,11 +70,6 @@
         emitChange();
       };
 
-      // const disabled = computed(() => {
-      //   const { disabled } = props || {};
-      //   return disabled;
-      // });
-
       //新增Input
       const add = () => {
         dynamicInput.params.push({

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

@@ -394,6 +394,13 @@
       //.ant-table-tbody > tr.ant-table-row-selected td {
       //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 {

@@ -8,24 +8,6 @@
     @ok="handleSubmit"
   >
     <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 }">
         <a-select
           placeholder="请选择流媒体配置"
@@ -52,23 +34,20 @@
   import { formSchema } from './config.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { createOrEditCameraManage } from '/@/api/camera/cameraManager';
-  import { message, Upload } from 'ant-design-vue';
   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 SteramingDrawer from '../streaming/SteramingDrawer.vue';
   import { useDrawer } from '/@/components/Drawer';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { buildUUID } from '/@/utils/uuid';
 
   export default defineComponent({
     name: 'ContactDrawer',
     components: {
       BasicDrawer,
       BasicForm,
-      Upload,
       PlusOutlined,
-      LoadingOutlined,
       SteramingDrawer,
       VNodes: (_, { attrs }) => {
         return attrs.vnodes;
@@ -118,42 +97,19 @@
         if (unref(isUpdate)) {
           await nextTick();
           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 {
-          tenantLogo.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) ? '新增视频配置' : '编辑视频配置'));
 
       async function handleSubmit() {
@@ -162,8 +118,9 @@
           const { createMessage } = useMessage();
           const values = await validate();
           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 !== '') {
             values.id = editId.value;
@@ -188,9 +145,6 @@
         registerDrawer,
         registerForm,
         handleSubmit,
-        customUpload,
-        beforeUpload,
-        tenantLogo,
         loading,
         streamConfigOptions,
         registerSteramingDrawer,

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

@@ -5,6 +5,9 @@ import { CameraVideoUrl, CameraMaxLength } from '/@/utils/rules';
 import { h } from 'vue';
 import SnHelpMessage from './SnHelpMessage.vue';
 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);
 
@@ -102,8 +105,33 @@ export const formSchema: QFormSchema[] = [
   {
     field: 'avatar',
     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',

@@ -12,7 +12,11 @@
 
 <template>
   <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" />
   </div>
 </template>

@@ -37,7 +37,6 @@
   const getBindProps = computed<Recordable>(() => {
     const { value, apiTreeSelectProps = {} } = props;
     const { params = {} } = apiTreeSelectProps;
-    console.log(props, 'props');
     return {
       replaceFields: { children: 'children', key: 'id', title: 'name', value: 'id' },
       getPopupContainer: () => document.body,

@@ -12,6 +12,9 @@ import ObjectModelValidateForm from '/@/components/Form/src/externalCompns/compo
 import { CommandDeliveryWayEnum, ServiceCallTypeEnum } from '/@/enums/toolEnum';
 import { TaskTypeEnum } from '/@/views/task/center/config';
 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('ObjectModelValidateForm', ObjectModelValidateForm);
@@ -29,8 +32,33 @@ export const step1Schemas: FormSchema[] = [
   {
     field: 'icon',
     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',

@@ -32,14 +32,14 @@ export const columns: BasicColumn[] = [
           h(
             'div',
             {
-              class: 'cursor-pointer',
+              class: 'cursor-pointer truncate',
             },
             `${record.alias}`
           ),
         h(
           'div',
           {
-            class: 'cursor-pointer text-blue-500',
+            class: 'cursor-pointer text-blue-500 truncate',
             onClick: () => {
               handeleCopy(`${record.name}`);
             },

@@ -109,7 +109,8 @@ export const basicInfoForm: FormSchema[] = [
     label: '所属组织',
     component: 'ApiTreeSelect',
     rules: [{ required: true, message: '所属组织为必填项' }],
-    componentProps: () => {
+    componentProps: ({ formModel, formActionType }) => {
+      const { setFieldsValue } = formActionType;
       return {
         maxLength: 250,
         placeholder: '请选择所属组织',
@@ -119,6 +120,11 @@ export const basicInfoForm: FormSchema[] = [
           return data;
         },
         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,
               organizationId,
             });
-            return result;
+            return result.map((item) => {
+              return {
+                ...item,
+                name: item.alias || item.name,
+              };
+            });
           } catch (error) {
             return [];
           }

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

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

@@ -22,24 +22,6 @@
             </div>
           </div>
         </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 }">
           <div class="flex">
             <Input v-model:value="model[field]" placeholder="请输入设备名称" />
@@ -115,10 +97,9 @@
   import { BasicForm, useForm } from '/@/components/Form';
   import { step1Schemas } from '../../config/data';
   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 { FileItem } from '/@/components/Upload/src/typing';
   import { BAI_DU_MAP_URL } from '/@/utils/fnUtils';
   import { generateSNCode } from '/@/api/device/deviceManager';
   import icon from '/@/assets/images/wz.png';
@@ -130,21 +111,20 @@
   import DeptDrawer from '/@/views/system/organization/OrganizationDrawer.vue';
   import { TaskTypeEnum } from '/@/views/task/center/config';
   import { toRaw } from 'vue';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { buildUUID } from '/@/utils/uuid';
 
   export default defineComponent({
     components: {
       BasicForm,
       Input,
       AutoComplete,
-      Upload,
       EnvironmentTwoTone,
-      PlusOutlined,
       Modal,
       Form,
       FormItem: Form.Item,
       Row,
       Col,
-      LoadingOutlined,
       DeptDrawer,
     },
     props: {
@@ -202,8 +182,11 @@
       async function nextStep() {
         try {
           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;
           emit('next', values);
           // 获取输入的数据
@@ -405,6 +388,11 @@
         positionState.address = deviceInfo.address;
         devicePositionState.value = { ...toRaw(positionState) };
         devicePic.value = deviceInfo.avatar;
+        if (deviceInfo.avatar) {
+          setFieldsValue({
+            icon: [{ uid: buildUUID(), name: 'name', url: deviceInfo.avatar } as FileItem],
+          });
+        }
         setFieldsValue({
           ...data,
           code: data?.code,
@@ -414,6 +402,10 @@
       // 父组件调用获取字段值的方法
       function parentGetFieldsValue() {
         const value = getFieldsValue();
+        if (Reflect.has(value, 'icon')) {
+          const file = (value.icon || []).at(0) || {};
+          value.icon = file.url || null;
+        }
         return {
           ...value,
           ...(value?.code || value?.addressCode

@@ -47,7 +47,7 @@
           </div>
         </BasicModal>
       </div>
-      <Description @register="register" class="mt-4" :data="deviceDetail" />
+      <Description @register="register" class="mt-4" :data="deviceDetail" :contentStyle="CS" />
     </div>
     <div class="mt-4" v-if="!isCustomer">
       <a-button type="primary" class="mr-4" @click="copyTbDeviceId">复制设备ID</a-button>
@@ -116,6 +116,15 @@
         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>();
 
@@ -217,6 +226,7 @@
         remoteConnectiondGateway,
         locationImage,
         isCustomer,
+        CS,
       };
     },
   });

@@ -15,7 +15,7 @@
   import { getDeviceAttrs } from '/@/api/device/deviceManager';
   import { DeviceModelOfMatterAttrs, DeviceRecord } from '/@/api/device/model/deviceModel';
   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 { useGlobSetting } from '/@/hooks/setting';
   import { ModeSwitchButton, EnumTableCardMode } from '/@/components/Widget';
@@ -161,14 +161,14 @@
 
         handleFilterChange();
 
-        unref(mode) === EnumTableCardMode.TABLE && setTableData(socketInfo.dataSource);
+        unref(mode) === EnumTableCardMode.TABLE && setTableModeData();
       } catch (error) {}
     },
     resetFunc: async () => {
       try {
         socketInfo.filterAttrKeys = [];
         handleFilterChange();
-        unref(mode) === EnumTableCardMode.TABLE && setTableData(socketInfo.dataSource);
+        unref(mode) === EnumTableCardMode.TABLE && setTableModeData();
       } catch (error) {}
     },
   });
@@ -200,7 +200,7 @@
   const switchMode = async (value: EnumTableCardMode) => {
     mode.value = value;
     await nextTick();
-    unref(mode) === EnumTableCardMode.TABLE && setTableData(socketInfo.dataSource);
+    unref(mode) === EnumTableCardMode.TABLE && setTableModeData();
     socketInfo.filterAttrKeys = [];
   };
 
@@ -280,7 +280,7 @@
 
           await nextTick();
 
-          unref(mode) === EnumTableCardMode.TABLE && setTableData(socketInfo.dataSource);
+          unref(mode) === EnumTableCardMode.TABLE && setTableModeData();
         }
       } catch (error) {}
     },
@@ -292,6 +292,10 @@
     },
   });
 
+  function setTableModeData() {
+    setTableData(socketInfo.dataSource.filter((item) => !isNull(item.value)));
+  }
+
   const handleShowDetail = (record: DataSource) => {
     const { key } = record;
     socketInfo.attr = key;
@@ -308,9 +312,11 @@
 
   const formatValue = (item: DataSource) => {
     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 || '--';
   };
 
@@ -406,7 +412,11 @@
       </List>
     </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>
         <div
           v-show="mode === EnumTableCardMode.TABLE"
@@ -447,6 +457,10 @@
     display: flex;
     align-items: center;
   }
+
+  .device-things-model-table-mode:deep(.ant-table-placeholder) {
+    height: auto;
+  }
 </style>
 
 <style>

@@ -12,6 +12,9 @@ import { EventType, EventTypeColor, EventTypeName } from '../list/cpns/tabs/Even
 
 import { useClipboard } from '@vueuse/core';
 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 {
   CARD = 'card',
@@ -78,11 +81,13 @@ export const physicalColumn: BasicColumn[] = [
     title: '功能名称',
     dataIndex: FormField.FUNCTION_NAME,
     width: 90,
+    ellipsis: true,
   },
   {
     title: '标识符',
     dataIndex: FormField.IDENTIFIER,
     width: 90,
+    ellipsis: true,
     customRender: ({ text }: Record<'text', string>) => {
       return h(Tooltip, { title: text }, () =>
         h('span', { class: 'cursor-pointer', onClick: () => handleCopy(text) }, text)
@@ -96,6 +101,7 @@ export const physicalColumn: BasicColumn[] = [
     format: (text: string) => {
       return text || '--';
     },
+    ellipsis: true,
   },
   {
     title: '事件类型',
@@ -109,6 +115,7 @@ export const physicalColumn: BasicColumn[] = [
         () => EventTypeName[text as EventType]
       );
     },
+    ellipsis: true,
   },
   {
     title: '状态',
@@ -158,8 +165,33 @@ export const step1Schemas: FormSchema[] = [
   {
     field: 'image',
     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',

 <template>
   <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>
 </template>
 <script lang="ts" setup>
-  import { ref, nextTick } from 'vue';
+  import { nextTick } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   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 loading = ref(false);
-  const { createMessage } = useMessage();
-  const deviceConfigPic = ref('');
   const props = defineProps({
     ifShowBtn: { type: Boolean, default: true },
   });
@@ -66,32 +35,6 @@
         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) => {
     await nextTick();
     setFieldsValue({ defaultRuleChainId: id });
@@ -105,20 +48,28 @@
   }
   //回显数据
   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() {
     const values = await validate();
     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;
   }
   //清空数据
   const resetFormData = () => {
     resetFields();
-    deviceConfigPic.value = '';
   };
 
   const editOrAddDeviceTypeStatus = (status: boolean) => {

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

@@ -17,7 +17,7 @@
         </Authority>
       </template>
       <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>
         </Authority>
       </template>

@@ -78,6 +78,27 @@
       componentProps: {
         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',

@@ -131,14 +131,19 @@ export const formSchema: FormSchema[] = [
         onChange: async (value) => {
           const res = await findMessageConfig({});
           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.updateSchema({
             field: 'messageConfigId',
@@ -155,14 +160,25 @@ export const formSchema: FormSchema[] = [
     label: '配置名称',
     required: true,
     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,
+      };
     },
   },
   {

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

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

@@ -75,7 +75,9 @@
     const { text, record } = data;
     businessText.value = text;
     if (businessText.value == BusinessDataFlowTextEnum.BUSINESS_MODAL_VIEW_TEXT) {
-      dataFlowMethodRef.value?.setProps({ disabled: true });
+      dataFlowMethodRef.value?.setDisabledProps({ disabled: true });
+    } else {
+      dataFlowMethodRef.value?.setCancelDisabled();
     }
     restData.data = record;
     setModalProps(modalProps(businessText.value));

@@ -28,6 +28,7 @@
       openModalValidate?: () => boolean;
       primaryKey?: string;
       transformValue?: (list: Recordable[]) => any;
+      disabled?: boolean;
     }>(),
     {
       value: () => [],
@@ -290,7 +291,7 @@
         </Tabs>
       </section>
     </BasicModal>
-    <Button @click="handleOpenModal" type="link">
+    <Button @click="handleOpenModal" type="link" :disabled="disabled">
       <span v-if="!selectedTotalList.length">选择设备</span>
       <div v-if="selectedTotalList.length">
         <Tag

@@ -33,7 +33,7 @@ export const modelFormPublicConfig = {
   showSubmitButton: false,
 };
 
-export const modeForm = (): FormSchema[] => {
+export const modeForm = (disabled: boolean): FormSchema[] => {
   return [
     {
       field: BasicInfoFormField.CONVERT_CONFIG_ID,
@@ -70,6 +70,7 @@ export const modeForm = (): FormSchema[] => {
           api: getDeviceProfile,
           labelField: 'name',
           valueField: 'tbProfileId',
+          disabled,
           transferProps: {
             listStyle: { height: '400px' },
             showSearch: true,
@@ -98,6 +99,7 @@ export const modeForm = (): FormSchema[] => {
       componentProps: ({ formActionType }) => {
         const { getFieldsValue } = formActionType;
         return {
+          disabled,
           getPendingTableParams: () => {
             const values = getFieldsValue();
             const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);

-<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>

@@ -201,14 +201,26 @@
     ];
   });
 
-  const changeOutTarget = () => {
+  const changeOutTarget = (e) => {
+    if (!e) validateFields(['outTarget']);
+    else clearValidate('outTarget');
     emit('getActionFormArr');
   };
-  const [registerAction, { getFieldsValue, resetFields, setFieldsValue, validate, setProps }] =
-    useForm({
-      schemas: actionSchema,
-      showActionButtonGroup: false,
-    });
+  const [
+    registerAction,
+    {
+      getFieldsValue,
+      resetFields,
+      setFieldsValue,
+      validate,
+      clearValidate,
+      validateFields,
+      setProps,
+    },
+  ] = useForm({
+    schemas: actionSchema,
+    showActionButtonGroup: false,
+  });
 
   // 获取整个执行动作表单值
   const getFieldsValueFunc = () => {

@@ -114,7 +114,7 @@
   </div>
 </template>
 <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 { Card, Button, Tooltip } from 'ant-design-vue';
   import 'ace-builds/src-noconflict/theme-chrome'; // 默认设置的主题
@@ -323,7 +323,19 @@
   };
 
   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;
       else item.disabled = true;
     });
@@ -336,6 +348,7 @@
     setScriptOutputData,
     setDefaultRadio,
     setDisableRadio,
+    setDisableTestRadio,
   });
 </script>
 <style lang="less" scoped>

@@ -56,7 +56,15 @@
       if (!data.innerTest) {
         const rest = await getScriptManageDetail(data.record?.id);
         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) {
         converScriptFormRef.value?.setDisableRadio(data.scriptType);
       }

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

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

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

@@ -7,50 +7,25 @@
     width="500px"
     @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>
 </template>
 <script lang="ts">
   import { defineComponent, ref, computed, unref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form/index';
   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 { 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 { useMessage } from '/@/hooks/web/useMessage';
+  import { FileItem } from '/@/components/Form/src/components/ApiUpload.vue';
+  import { buildUUID } from '/@/utils/uuid';
 
   export default defineComponent({
     name: 'TenantDrawer',
     components: {
       BasicDrawer,
       BasicForm,
-      Upload,
-      PlusOutlined,
-      LoadingOutlined,
     },
     emits: ['success', 'register'],
     setup(_, { emit }) {
@@ -58,33 +33,7 @@
       const { createMessage } = useMessage();
 
       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({
         labelWidth: 100,
         schemas: tenantFormSchema,
@@ -96,7 +45,6 @@
       //默认传递页面数据
       const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
         await resetFields();
-        tenantLogo.value = '';
         setDrawerProps({ confirmLoading: false });
         isUpdate.value = !!data?.isUpdate;
 
@@ -104,11 +52,19 @@
         await updateSchema({ field: 'title', componentProps: { disabled: false } });
         //如果是编辑操作，设置页面数据
         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) => {
-            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 } });
           });
@@ -126,9 +82,13 @@
         setDrawerProps({ confirmLoading: true });
         try {
           const values = await validate();
+          if (Reflect.has(values, 'icon')) {
+            const file = (values.icon || []).at(0) || {};
+            values.icon = file.url || null;
+          }
           const req = {
             id: values.id,
-            icon: tenantLogo.value,
+            icon: values.icon,
             name: values.name,
             enabled: values.enabled,
             description: values.description,
@@ -161,9 +121,6 @@
         tenantForm,
         getTitle,
         handleSubmit,
-        tenantLogo,
-        beforeUpload,
-        customUpload,
         loading,
       };
     },

@@ -3,6 +3,9 @@ import { FormSchema } from '/@/components/Form';
 import { getAllRoleList } from '/@/api/system/system';
 import { getTableTenantProfileApi, QueryTenantProfilesParam } from '/@/api/tenant/tenantApi';
 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[] {
   return [
@@ -77,23 +80,32 @@ export const tenantFormSchema: FormSchema[] = [
   {
     field: 'icon',
     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 { uuid } = data;
     const _dataSource = cloneDeep(getFormValues());
@@ -182,6 +180,8 @@
     emit('update:dataSource', _dataSource);
   };
 
+  const { containerEl } = useSort(emit, getFormValues);
+
   defineExpose({
     getFormValues,
     validate,

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