fix: 重构数据流转设备穿梭表格

-<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 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 () => {
-    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>

@@ -61,7 +61,6 @@
       //input动态数据
       const dynamicInput: UnwrapRef<{ params: Params[] }> = reactive({ params: [] });
 
-      console.log(dynamicInput, 'dynamicInput');
       //删除Input
       const remove = (item: Params) => {
         let index = dynamicInput.params.indexOf(item);

@@ -37,7 +37,7 @@
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { add } from '/@/components/Form/src/componentMap';
   import TransferModal from '/@/components/Form/src/components/TransferModal.vue';
-  import TransferTableModal from '/@/components/Form/src/components/TransferTableModal.vue';
+  import TransferTableModal from './TransferTableModal.vue';
   import { DataFlowMethod, DataFlowParams } from './index';
   import { stepConfig, removeFieldByModeForm } from './config';
   import { postAddConvertApi } from '/@/api/datamanager/dataManagerApi';

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

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

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

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