Merge branch 'ww' into 'main'

feat: create data flow form add dataSource dataProducts dataDevices field

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

@@ -7,6 +7,7 @@ import type {
 } from './model/alarmContactModal';
 import { getPageData } from '../../base';
 import { DeviceModel, DeviceQueryParam } from '../../device/model/deviceModel';
+import { omit } from 'lodash-es';
 enum API {
   alarmContact = '/alarm_contact',
   updateAlarmContact = '/alarm_contact/update',
@@ -50,8 +51,10 @@ export const saveOrEditAlarmContact = (params: ContactInfo, isUpdate: boolean) =
 
 // 查询设备分页数据
 export const devicePage = (params: DeviceQueryParam) => {
-  return defHttp.get<DeviceModel>({
-    url: API.devicePage,
-    params,
+  const { page, pageSize } = params;
+  const otherParams = omit(params, ['page', 'pageSize']);
+  return defHttp.post<DeviceModel>({
+    url: `${API.devicePage}?page=${page}&pageSize=${pageSize}`,
+    params: otherParams,
   });
 };

 import { StructJSON } from './modelOfMatterModel';
 import { BasicPageParams } from '/@/api/model/baseModel';
 import { AlarmStatus } from '/@/views/alarm/log/config/detail.config';
+import { DeviceStatusEnum } from '/@/views/rule/dataFlow/cpns/config';
 export enum DeviceState {
   INACTIVE = 'INACTIVE',
   ONLINE = 'ONLINE',
@@ -12,7 +13,18 @@ export enum DeviceTypeEnum {
   SENSOR = 'SENSOR',
 }
 export type DeviceProfileQueryParam = BasicPageParams & DeviceProfileParam & DeviceId;
-export type DeviceQueryParam = BasicPageParams & DeviceParam;
+export type DeviceQueryParam = BasicPageParams & {
+  deviceProfileIds?: string[];
+  convertConfigId?: string;
+  deviceType?: DeviceTypeEnum;
+  deviceState?: DeviceStatusEnum;
+  organizationId?: string;
+  alarmStatus?: string;
+  orderFiled?: string;
+  orderType?: string;
+  selected?: boolean;
+  name?: string;
+};
 export type DeviceParam = {
   name?: string;
   deviceProfileId?: string;
@@ -163,6 +175,7 @@ export interface DeviceRecord {
   type: string;
   default: boolean;
   defaultRuleChainId: string;
+  profileId: string;
 }
 
 export interface DeviceModelOfMatterAttrs {

@@ -38,6 +38,8 @@ import ApiSearchSelect from './components/ApiSearchSelect.vue';
 import CustomMinMaxInput from './externalCompns/components/CustomMinMaxInput.vue';
 import StructForm from './externalCompns/components/StructForm/StructForm.vue';
 import ApiSelectScrollLoad from './components/ApiSelectScrollLoad.vue';
+import TransferModal from './components/TransferModal.vue';
+import TransferTableModal from './components/TransferTableModal.vue';
 
 const componentMap = new Map<ComponentType, Component>();
 
@@ -83,6 +85,8 @@ componentMap.set('ApiSearchSelect', ApiSearchSelect);
 componentMap.set('CustomMinMaxInput', CustomMinMaxInput);
 componentMap.set('StructForm', StructForm);
 componentMap.set('ApiSelectScrollLoad', ApiSelectScrollLoad);
+componentMap.set('TransferModal', TransferModal);
+componentMap.set('TransferTableModal', TransferTableModal);
 
 export function add(compName: ComponentType, component: Component) {
   componentMap.set(compName, component);

+<script lang="ts" setup>
+  import { Button, Transfer, Tag } from 'ant-design-vue';
+  import { cloneDeep, get } from 'lodash-es';
+  import { computed, CSSProperties, ExtractPropTypes, onMounted, ref, unref, watch } from 'vue';
+  import { BasicModal, useModal } from '/@/components/Modal';
+  import { isFunction } from '/@/utils/is';
+
+  type TransferType = InstanceType<typeof Transfer>;
+
+  interface Options {
+    title?: string;
+    key?: string;
+    disabled?: boolean;
+    description?: string;
+  }
+
+  const emit = defineEmits(['change', 'update:value']);
+
+  const props = withDefaults(
+    defineProps<{
+      options?: Options[];
+      maxTagLength?: number;
+      value?: string[];
+      api?: Fn<Recordable, Promise<Options[]>>;
+      labelField?: string;
+      valueField?: string;
+      resultField?: string;
+      params?: Recordable;
+      buttonName?: string;
+      modalProps?: ExtractPropTypes<InstanceType<typeof BasicModal>['$props']>;
+      transferProps?: ExtractPropTypes<TransferType['$props']>;
+      buttonProps?: ExtractPropTypes<InstanceType<typeof Button>['$props']>;
+    }>(),
+    {
+      labelField: 'label',
+      valueField: 'value',
+      buttonName: '选择产品',
+      maxTagLength: 2,
+    }
+  );
+
+  const [register, { openModal }] = useModal();
+
+  const options = ref<Options[]>([]);
+
+  const loading = ref(false);
+
+  const targetOptions = computed(() => {
+    const { valueField } = props;
+    return unref(getOptions).filter((item) => unref(targetKeys).includes(item[valueField]));
+  });
+
+  const getShowTagOptions = computed(() => {
+    const { maxTagLength } = props;
+    return unref(targetOptions).slice(0, maxTagLength);
+  });
+
+  const getSurplusOptionsLength = computed(() => {
+    const { maxTagLength } = props;
+    const surplusValue = unref(targetKeys).length - maxTagLength;
+    return surplusValue < 0 ? 0 : surplusValue;
+  });
+
+  const count = computed(() => {
+    return unref(targetKeys).length;
+  });
+
+  const targetKeys = ref<string[]>(props.value || []);
+
+  const getOptions = computed<Recordable[]>(() => {
+    const { labelField, valueField } = props;
+    return unref(options).map((item) => ({
+      ...item,
+      title: item[labelField],
+      key: item[valueField],
+    }));
+  });
+
+  const getBindProps = computed(() => {
+    const { transferProps = {} } = props;
+    return {
+      render: (item: Options) => item.title,
+      listStyle: { height: '300px' } as CSSProperties,
+      ...transferProps,
+      targetKeys: unref(targetKeys),
+      dataSource: unref(getOptions),
+      onChange: handleChange,
+    } as ExtractPropTypes<TransferType['$props']>;
+  });
+
+  const getBindModalProps = computed(() => {
+    const { modalProps } = props;
+    return {
+      ...modalProps,
+      title: '选择产品',
+      showOkBtn: false,
+    };
+  });
+
+  const getBindButtonProps = computed(() => {
+    const { buttonProps = {} } = props;
+    return {
+      ...buttonProps,
+      type: 'link',
+      onClick: handleOpenModal,
+    } as ExtractPropTypes<InstanceType<typeof Button>['$props']>;
+  });
+
+  const handleChange = (_targetKeys: string[], direction: 'left' | 'right', moveKeys: string[]) => {
+    targetKeys.value = _targetKeys;
+    emit('update:value', _targetKeys);
+    const _targetOptions = cloneDeep(unref(targetOptions));
+    emit('change', _targetKeys, _targetOptions, direction, moveKeys);
+  };
+
+  const handleGetOptions = async () => {
+    try {
+      loading.value = true;
+      const { api, params, resultField, options: propsOptions } = props;
+      if (api && isFunction(api)) {
+        const res = await api(params!);
+        if (Array.isArray(res)) {
+          options.value = res;
+          return;
+        }
+        if (resultField) {
+          options.value = get(res, resultField) || [];
+        }
+      } else {
+        if (propsOptions && Array.isArray(propsOptions)) {
+          options.value = propsOptions;
+        }
+      }
+    } catch (error) {
+      throw error;
+    } finally {
+      loading.value = false;
+    }
+  };
+
+  watch(
+    () => props.value,
+    () => {
+      targetKeys.value = props.value || [];
+    }
+  );
+
+  const handleOpenModal = () => {
+    openModal(true);
+  };
+
+  onMounted(() => {
+    handleGetOptions();
+  });
+</script>
+
+<template>
+  <div>
+    <BasicModal v-bind="getBindModalProps" @register="register">
+      <section class="flex justify-center items-center">
+        <Transfer v-bind="getBindProps" />
+      </section>
+    </BasicModal>
+    <Button v-bind="getBindButtonProps" class="!flex !justify-center !items-center min-h-8">
+      <span v-if="!count">{{ $props.buttonName }}</span>
+      <div v-if="!!count">
+        <Tag
+          class="!px-2 !py-1 !bg-gray-50 !border-gray-100"
+          v-for="item in getShowTagOptions"
+          :key="item.key"
+        >
+          <span>
+            {{ item.title }}
+          </span>
+        </Tag>
+        <Tag class="!px-2 !py-1 !bg-gray-50 !border-gray-100" v-if="getSurplusOptionsLength">
+          <span> +{{ getSurplusOptionsLength }}... </span>
+        </Tag>
+      </div>
+    </Button>
+  </div>
+</template>

+<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>;
+    }>(),
+    {
+      buttonName: '选择设备',
+      primaryKey: 'id',
+      maxTagLength: 2,
+      labelField: 'label',
+      valueField: 'value',
+    }
+  );
+
+  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 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[]) => {
+          pendingConfirmQueue.value = selectedRows;
+        },
+        onSelectAll: (_selected: boolean, selectedRows: Recordable[]) => {
+          pendingConfirmQueue.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 () => {
+    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;
+    console.log(unref(pendingTotal));
+
+    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();
+    pendingConfirmQueue.value = [];
+    setProps({ dataSource: unref(selectedRows) });
+    handleTriggerEmit(unref(selectedRowKeys), unref(selectedRows));
+
+    if (onRemoveAfter && isFunction(onRemoveAfter)) {
+      await onRemoveAfter(actionType);
+    }
+  };
+
+  const actionType = {
+    setSelectedOptions,
+    setSelectedTotal,
+    reloadPending,
+    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 {
+      setProps({
+        dataSource: unref(selectedRows),
+      });
+    }
+  };
+
+  watch(
+    () => props.value,
+    () => {
+      if (props.value && !props.value.length) {
+        selectedRowKeys.value = [];
+        selectedRows.value = [];
+      }
+    }
+  );
+
+  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>{{ pendingConfirmQueue.length }}</span>
+                  </div>
+                </section>
+              </template>
+            </BasicTable>
+            <section class="flex justify-end px-4 pb-4">
+              <Button
+                type="primary"
+                :disabled="!pendingConfirmQueue.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.label }}
+          </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>

@@ -119,4 +119,6 @@ export type ComponentType =
   | 'ApiUpload'
   | 'ApiSearchSelect'
   | 'StructForm'
-  | 'ApiSelectScrollLoad';
+  | 'ApiSelectScrollLoad'
+  | 'TransferModal'
+  | 'TransferTableModal';

@@ -8,6 +8,7 @@
       :title="getTitle"
       width="1000px"
       @cancel="handleCancel"
+      destroy-on-close
     >
       <div class="step-form-form">
         <a-steps :current="current">
@@ -17,14 +18,19 @@
       </div>
       <div>
         <div v-show="current === 0">
-          <TransferConfigMode ref="refTransferConfigMode" @next="handleNext"
-        /></div>
+          <TransferConfigMode
+            :save-content="handleSubmit"
+            ref="refTransferConfigMode"
+            @next="handleNext"
+          />
+        </div>
         <div v-show="current === 1">
           <TransferConfigParams
             ref="refTransferConfigParams"
             :getModeSelect="getModeSelectVal"
             @prevSon="handlePrev"
-        /></div>
+          />
+        </div>
       </div>
       <div style="float: right" v-if="isViewStatus">
         <Button type="primary" @click="handleSubmit" class="mr-2">确认</Button>
@@ -34,7 +40,7 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, reactive, ref, unref, getCurrentInstance, nextTick } from 'vue';
+  import { defineComponent, reactive, ref, unref, getCurrentInstance } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { Steps } from 'ant-design-vue';
   import TransferConfigMode from './cpns/transferConfigMode.vue';
@@ -93,6 +99,8 @@
         configuration: {},
         name: '',
         remark: '',
+        datasourceType: '',
+        datasourceContent: {},
       });
       const editTypeFunc = (d) => {
         editType.type = d.type;
@@ -111,6 +119,10 @@
           editNextType.configuration = data.record;
           editNextType.name = data.record.name;
           editNextType.remark = data.record.remark;
+          editNextType.datasourceType = data.record.datasourceType;
+          editNextType.datasourceContent = data.record.datasourceContent;
+          editNextType.convertConfigId = data.record.id;
+
           proxy.$refs.refTransferConfigMode.setStepOneFieldsValueFunc(editNextType);
         }
         if (!unref(isUpdate)) {
@@ -146,16 +158,12 @@
         }
       });
       const handleCancel = () => {
-        nextTick(() => {
-          defineClearFunc();
-          closeModal();
-        });
+        defineClearFunc();
+        closeModal();
       };
       const defineClearFunc = () => {
-        nextTick(() => {
-          proxy.$refs.refTransferConfigMode?.customResetStepOneFunc();
-          proxy.$refs.refTransferConfigParams?.clearSonValueDataFunc();
-        });
+        proxy.$refs.refTransferConfigMode?.customResetStepOneFunc();
+        proxy.$refs.refTransferConfigParams?.clearSonValueDataFunc();
       };
       const handleNext = (args) => {
         current.value++;
@@ -211,33 +219,25 @@
         }
         getModeSonFormValue.value = await proxy.$refs.refTransferConfigMode.getSonValueFunc();
         getSonFormValue.value = await proxy.$refs.refTransferConfigParams.getSonValueDataFunc();
+
         if (getModeSonFormValue.value?.type == 'org.thingsboard.rule.engine.kafka.TbKafkaNode') {
           getTypeObj.type = 'org.thingsboard.rule.engine.kafka.TbKafkaNode';
-          getTypeObj.remark = getModeSonFormValue.value.remark;
-          getNameObj.name = getSonFormValue.value?.configuration?.name;
-          commonFunc();
         } else if (
           getModeSonFormValue.value?.type == 'org.thingsboard.rule.engine.mqtt.TbMqttNode'
         ) {
           getTypeObj.type = 'org.thingsboard.rule.engine.mqtt.TbMqttNode';
-          getTypeObj.remark = getModeSonFormValue.value.remark;
-          getNameObj.name = getSonFormValue.value?.configuration?.name;
-          commonFunc();
         } else if (
           getModeSonFormValue.value?.type == 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode'
         ) {
           getTypeObj.type = 'org.thingsboard.rule.engine.rabbitmq.TbRabbitMqNode';
-          getTypeObj.remark = getModeSonFormValue.value.remark;
-          getNameObj.name = getSonFormValue.value?.configuration?.name;
-          commonFunc();
         } else if (
           getModeSonFormValue.value?.type == 'org.thingsboard.rule.engine.rest.TbRestApiCallNode'
         ) {
           getTypeObj.type = 'org.thingsboard.rule.engine.rest.TbRestApiCallNode';
-          getTypeObj.remark = getModeSonFormValue.value.remark;
-          getNameObj.name = getSonFormValue.value?.configuration?.name;
-          commonFunc();
         }
+        getTypeObj.remark = getModeSonFormValue.value.remark;
+        getNameObj.name = getSonFormValue.value?.configuration?.name;
+        commonFunc();
         const id: any = {
           id: unref(isUpdate) ? editPostId.value : '',
         };
@@ -247,15 +247,19 @@
           getSonFormValue.value,
           getNameObj,
           id,
-          additionalInfoV.additionalInfo.description ? additionalInfoV : {}
+          additionalInfoV.additionalInfo.description ? additionalInfoV : {},
+          {
+            datasourceType: getModeSonFormValue.value.datasourceType,
+            datasourceContent: getModeSonFormValue.value.datasourceContent,
+          }
         );
         if (!unref(isUpdate)) {
           delete allPostForm.id;
         }
       };
-      const handleSubmit = async () => {
+      const handleSubmit = async (closeModalAfterSuccess = true) => {
         try {
-          setModalProps({ confirmLoading: true });
+          closeModalAfterSuccess && setModalProps({ confirmLoading: true });
           if (!unref(isUpdate)) {
             await addOrEditFunc();
             if (allPostForm.name == undefined) {
@@ -274,12 +278,12 @@
             }
             const res = await postAddConvertApi(allPostForm);
             if (res) {
-              closeModal();
-              createMessage.success('数据流转新增成功');
+              closeModalAfterSuccess && closeModal();
+              closeModalAfterSuccess && createMessage.success('数据流转新增成功');
               setTimeout(() => {
                 emit('success');
               }, 500);
-              defineClearFunc();
+              closeModalAfterSuccess && defineClearFunc();
             }
           } else {
             await addOrEditFunc();
@@ -296,15 +300,18 @@
                 return createMessage.error('请填写属性');
               }
             }
-            Object.assign(noEditObj, getTypeObj);
+            Object.assign(noEditObj, getTypeObj, {
+              datasourceType: allPostForm.datasourceType,
+              datasourceContent: allPostForm.datasourceContent,
+            });
             const res = await postAddConvertApi(isEdit.value ? noEditObj : allPostForm);
             if (res) {
-              closeModal();
-              createMessage.success('数据流转编辑成功');
+              closeModalAfterSuccess && closeModal();
+              closeModalAfterSuccess && createMessage.success('数据流转编辑成功');
               setTimeout(() => {
                 emit('success');
               }, 500);
-              defineClearFunc();
+              closeModalAfterSuccess && defineClearFunc();
             }
           }
         } catch {

 import { FormSchema } from '/@/components/Form';
 import { findDictItemByCode } from '/@/api/system/dict';
-import { ref } from 'vue';
+import { h, ref } from 'vue';
 import { isExistDataManagerNameApi } from '/@/api/datamanager/dataManagerApi';
+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 { FETCH_SETTING } from '/@/components/Table/src/const';
 
 const typeValue = ref('');
 export enum CredentialsEnum {
@@ -16,41 +22,306 @@ export const isPem = (type: string) => {
   return type === CredentialsEnum.IS_PEM;
 };
 
-export const modeForm: FormSchema[] = [
+export enum DataSourceType {
+  ALL = 'ALL',
+  PRODUCT = 'PRODUCTS',
+  DEVICE = 'DEVICES',
+}
+
+export enum BasicInfoFormField {
+  DATA_SOURCE_TYPE = 'datasourceType',
+  DATA_SOURCE_PRODUCT = 'datasourceProduct',
+  DATA_SOURCE_DEVICE = 'datasourceDevice',
+  CONVERT_CONFIG_ID = 'convertConfigId',
+}
+
+export enum DeviceStatusEnum {
+  OFFLINE = 'OFFLINE',
+  ONLINE = 'ONLINE',
+  INACTIVE = 'INACTIVE',
+}
+
+export enum DeviceStatusNameEnum {
+  OFFLINE = '离线',
+  ONLINE = '在线',
+  INACTIVE = '待激活',
+}
+
+export enum DeviceTypeEnum {
+  SENSOR = 'SENSOR',
+  DIRECT_CONNECTION = 'DIRECT_CONNECTION',
+  GATEWAY = 'GATEWAY',
+}
+
+export enum DeviceTypeNameEnum {
+  SENSOR = '网关子设备',
+  DIRECT_CONNECTION = '直连设备',
+  GATEWAY = '网关设备',
+}
+
+const handleGroupDevice = (options: DeviceRecord[]) => {
+  const map = new Map<string, string[]>();
+  options.forEach((item) => {
+    if (map.has(item.profileId)) {
+      const deviceList = map.get(item.profileId)!;
+      deviceList.push(item.id);
+    } else {
+      map.set(item.profileId, [item.id]);
+    }
+  });
+  const value = Array.from(map.entries()).map(([product, devices]) => ({ product, devices }));
+  console.log(value);
+  return Array.from(map.entries()).map(([product, devices]) => ({ product, devices }));
+};
+
+const deviceTableFormSchema: FormSchema[] = [
   {
-    field: 'type',
-    label: '转换方式',
+    field: 'name',
+    label: '设备名称',
+    component: 'Input',
+    colProps: { span: 9 },
+    componentProps: {
+      placeholder: '请输入设备名称',
+    },
+  },
+  {
+    field: 'deviceType',
+    label: '设备类型',
     component: 'ApiSelect',
-    required: true,
-    colProps: {
-      span: 24,
+    colProps: { span: 9 },
+    componentProps: {
+      placeholder: '请选择设备类型',
+      api: findDictItemByCode,
+      params: {
+        dictCode: 'device_type',
+      },
+      labelField: 'itemText',
+      valueField: 'itemValue',
     },
-    componentProps({}) {
-      return {
-        api: findDictItemByCode,
-        params: {
-          dictCode: 'convert_data_to',
-        },
-        labelField: 'itemText',
-        valueField: 'itemValue',
-        onChange(value) {
-          typeValue.value = value;
+  },
+];
+
+const deviceTableColumn: BasicColumn[] = [
+  {
+    title: '状态',
+    dataIndex: 'deviceState',
+    customRender: ({ text }) => {
+      return h(
+        Tag,
+        {
+          color:
+            text === DeviceStatusEnum.INACTIVE
+              ? 'warning'
+              : text === DeviceStatusEnum.OFFLINE
+              ? 'error'
+              : 'success',
         },
-      };
+        () => DeviceStatusNameEnum[text]
+      );
     },
   },
   {
-    field: 'remark',
-    label: '描述',
-    colProps: { span: 24 },
-    component: 'Input',
-    componentProps: {
-      maxLength: 255,
-      placeholder: '请输入描述',
+    title: '设备名称/设备SN',
+    dataIndex: 'name',
+    customRender: ({ text, record }) => {
+      return h('div', [
+        h('div', text),
+        h('div', { class: 'text-blue-400 truncate', title: record.sn }, record.sn),
+      ]);
     },
   },
+  {
+    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[] => {
+  return [
+    {
+      field: BasicInfoFormField.CONVERT_CONFIG_ID,
+      label: '',
+      component: 'Input',
+      show: false,
+    },
+    {
+      field: BasicInfoFormField.DATA_SOURCE_TYPE,
+      label: '数据源',
+      component: 'RadioGroup',
+      defaultValue: DataSourceType.ALL,
+      componentProps: {
+        options: [
+          { label: '全部', value: DataSourceType.ALL },
+          { label: '产品', value: DataSourceType.PRODUCT },
+          { label: '设备', value: DataSourceType.DEVICE },
+        ],
+      },
+    },
+    {
+      field: BasicInfoFormField.DATA_SOURCE_PRODUCT,
+      label: '数据源产品',
+      component: 'TransferModal',
+      ifShow: ({ model }) => {
+        return model[BasicInfoFormField.DATA_SOURCE_TYPE] !== DataSourceType.ALL;
+      },
+      valueField: 'value',
+      changeEvent: 'update:value',
+      componentProps: ({ formActionType }) => {
+        const { setFieldsValue } = formActionType;
+        return {
+          api: getDeviceProfile,
+          labelField: 'name',
+          valueField: 'tbProfileId',
+          transferProps: {
+            listStyle: { height: '400px' },
+            showSearch: true,
+            filterOption: (inputValue: string, option: Recordable) => {
+              const upperCaseInputValue = inputValue.toUpperCase();
+              const upperCaseOptionValue = option.name.toUpperCase();
+              return upperCaseOptionValue.includes(upperCaseInputValue);
+            },
+          },
+          onChange: () => {
+            setFieldsValue({ [BasicInfoFormField.DATA_SOURCE_DEVICE]: [] });
+          },
+        };
+      },
+    },
+    {
+      field: BasicInfoFormField.DATA_SOURCE_DEVICE,
+      label: '数据源设备',
+      component: 'TransferTableModal',
+      ifShow: ({ model }) => {
+        return model[BasicInfoFormField.DATA_SOURCE_TYPE] === DataSourceType.DEVICE;
+      },
+      valueField: 'value',
+      changeEvent: 'update:value',
+      componentProps: ({ 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 {
+          labelField: 'name',
+          valueField: 'id',
+          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 }) => {
+            const values = getFieldsValue();
+            const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
+            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],
+                selected: true,
+              });
+              setSelectedTotal(total);
+              return items;
+            }
+            return [];
+          },
+          onSelectedAfter: async () => {
+            submitFn && (await submitFn(false));
+          },
+          onRemoveAfter: async ({ reloadSelected }) => {
+            submitFn && (await submitFn(false));
+            reloadSelected();
+          },
+          transformValue: (_selectedRowKeys: string[], selectedRows: DeviceRecord[]) => {
+            return handleGroupDevice(selectedRows);
+          },
+        };
+      },
+    },
+    {
+      field: 'type',
+      label: '转换方式',
+      component: 'ApiSelect',
+      required: true,
+      colProps: {
+        span: 24,
+      },
+      componentProps({}) {
+        return {
+          api: findDictItemByCode,
+          params: {
+            dictCode: 'convert_data_to',
+          },
+          labelField: 'itemText',
+          valueField: 'itemValue',
+          onChange(value) {
+            typeValue.value = value;
+          },
+        };
+      },
+    },
+    {
+      field: 'remark',
+      label: '描述',
+      colProps: { span: 24 },
+      component: 'Input',
+      componentProps: {
+        maxLength: 255,
+        placeholder: '请输入描述',
+      },
+    },
+  ];
+};
+
 export const modeKafkaForm: FormSchema[] = [
   {
     field: 'name',

@@ -3,12 +3,31 @@
     <BasicForm @register="register" />
   </div>
 </template>
+
 <script lang="ts">
   import { defineComponent, ref, nextTick } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { modeForm } from './config';
+  import { BasicInfoFormField, modeForm } from './config';
   import { Select, Input, Divider } from 'ant-design-vue';
 
+  export interface ConvertDevice {
+    product: string;
+    devices: string[];
+  }
+
+  export interface DatasourceContent {
+    convertProducts: string[];
+    convertDevices: ConvertDevice[];
+  }
+
+  export interface BasicInfoRecord {
+    name?: string;
+    type: string;
+    remark: string;
+    datasourceType: string;
+    datasourceContent: DatasourceContent;
+  }
+
   export default defineComponent({
     components: {
       BasicForm,
@@ -17,12 +36,17 @@
       [Input.Group.name]: Input.Group,
       [Divider.name]: Divider,
     },
+    props: {
+      saveContent: {
+        type: Function,
+      },
+    },
     emits: ['next', 'resetFunc', 'register'],
-    setup(_, { emit }) {
-      const sonValues = ref({});
+    setup(props, { emit }) {
+      const sonValues = ref<BasicInfoRecord>({} as unknown as BasicInfoRecord);
       const [register, { validateFields, setFieldsValue, resetFields }] = useForm({
         labelWidth: 100,
-        schemas: modeForm,
+        schemas: modeForm(props.saveContent),
         actionColOptions: {
           span: 14,
         },
@@ -40,8 +64,17 @@
         } catch (error) {}
       }
       //回显数据
-      const setStepOneFieldsValueFunc = (v) => {
-        setFieldsValue(v);
+      const setStepOneFieldsValueFunc = (record: Recordable) => {
+        const value = {
+          ...record,
+          [BasicInfoFormField.DATA_SOURCE_PRODUCT]:
+            record?.datasourceContent?.convertProducts || [],
+          [BasicInfoFormField.DATA_SOURCE_DEVICE]:
+            (record?.datasourceContent?.convertDevices || []).reduce((prev, next) => {
+              return [...prev, ...(next?.devices || [])];
+            }, []) || [],
+        };
+        setFieldsValue(value);
       };
 
       //清空数据
@@ -51,7 +84,21 @@
         });
       };
       const getSonValueFunc = async () => {
-        sonValues.value = await validateFields();
+        const record = (await validateFields()) || {};
+        const { type, remark } = record;
+        const datasourceType = Reflect.get(record, BasicInfoFormField.DATA_SOURCE_TYPE);
+        const convertDevices = Reflect.get(record, BasicInfoFormField.DATA_SOURCE_DEVICE);
+        const convertProducts = Reflect.get(record, BasicInfoFormField.DATA_SOURCE_PRODUCT);
+
+        sonValues.value = {
+          type,
+          remark,
+          datasourceType,
+          datasourceContent: {
+            convertProducts,
+            convertDevices,
+          },
+        };
         return sonValues.value;
       };
       return {

@@ -108,6 +108,9 @@
   import { RoleEnum } from '/@/enums/roleEnum';
   import { useGo } from '/@/hooks/web/usePage';
   import { PageEnum } from '/@/enums/pageEnum';
+  import { router } from '/@/router';
+  import { RouteRecordRaw } from 'vue-router';
+  import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
 
   export default defineComponent({
     name: 'TenantAdminDrawer',
@@ -244,7 +247,12 @@
           permissionStore.setPermCodeList(permissionList);
           userStore.setUserInfo(userInfo);
           userStore.setRoleList(userInfo.roles as RoleEnum[]);
-          permissionStore.buildRoutesAction();
+          const routes = await permissionStore.buildRoutesAction();
+          routes.forEach((route) => {
+            router.addRoute(route as unknown as RouteRecordRaw);
+          });
+          router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
+          permissionStore.setDynamicAddedRoute(true);
           go(PageEnum.BASE_HOME);
         } catch (error) {
         } finally {