Merge branch 'fix/DEFECT-1763' into 'main_dev'

fix: 修复数据流转产品变更设备未清空 See merge request yunteng/thingskit-front!1025

Merge branch 'fix/DEFECT-1763' into 'main_dev'
fix: 修复数据流转产品变更设备未清空 See merge request yunteng/thingskit-front!1025
xp.Huang
2 parents 3e811610 ade05bc9
Showing 5 changed files with 72 additions and 553 deletions
src/components/Form/src/components/TransferModal.vue
src/components/Form/src/components/TransferTableModal.vue
src/components/Table/src/hooks/usePagination.tsx
src/views/rule/dataFlow/components/dataflowmodal/TransferTableModal.vue
src/views/rule/dataFlow/components/dataflowmodal/config/index.ts
--- a/src/components/Form/src/components/TransferModal.vue
View file @3502b7d
+++ b/src/components/Form/src/components/TransferModal.vue
View file @3502b7d
 <script lang="ts" setup>
-  import { Button, Transfer, Tag } from 'ant-design-vue';
+  import { Transfer, Select } 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';
@@ -29,7 +29,7 @@
       buttonName?: string;
       modalProps?: ExtractPropTypes<InstanceType<typeof BasicModal>['$props']>;
       transferProps?: ExtractPropTypes<TransferType['$props']>;
-      buttonProps?: ExtractPropTypes<InstanceType<typeof Button>['$props']>;
+      selectProps?: ExtractPropTypes<InstanceType<typeof Select>['$props']>;
       disabled?: any;
     }>(),
     {
@@ -52,24 +52,15 @@
     return unref(getOptions).filter((item) => unref(targetKeys).includes(item[valueField]));
   });
-  const getShowTagOptions = computed(() => {
-    const { maxTagLength } = props;
-    return unref(targetOptions).slice(0, maxTagLength);
+  const getSelectOptions = computed(() => {
+    return unref(targetOptions).map((item) => ({ ...item, label: item.title, value: item.key }));
   });
-  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 getSelectValue = computed(() => unref(getSelectOptions).map((item) => item.value));
   const targetKeys = ref<string[]>(props.value || []);
-  const getOptions = computed<Recordable[]>(() => {
+  const getOptions = computed<Record<'key' | 'title', string>[]>(() => {
     const { labelField, valueField } = props;
     return unref(options).map((item) => ({
       ...item,
@@ -99,13 +90,14 @@
     };
   });
-  const getBindButtonProps = computed(() => {
-    const { buttonProps = {} } = props;
+  const getBindSelectProps = computed(() => {
+    const { selectProps = {} } = props;
     return {
-      ...buttonProps,
-      type: 'link',
-      onClick: handleOpenModal,
-    } as ExtractPropTypes<InstanceType<typeof Button>['$props']>;
+      maxTagCount: 3,
+      ...selectProps,
+      open: false,
+      onDropdownVisibleChange: handleOpenModal,
+    } as ExtractPropTypes<InstanceType<typeof Select>['$props']>;
   });
   const handleChange = (_targetKeys: string[], direction: 'left' | 'right', moveKeys: string[]) => {
@@ -165,22 +157,11 @@
         <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>
+    <Select
+      v-bind="getBindSelectProps"
+      :options="getSelectOptions"
+      :value="getSelectValue"
+      mode="multiple"
+    />
   </div>
 </template>
--- a/src/components/Form/src/components/TransferTableModal.vue deleted 100644 → 0
View file @3e81161
+++ b/src/components/Form/src/components/TransferTableModal.vue deleted 100644 → 0
View file @3e81161
-<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>
--- a/src/components/Table/src/hooks/usePagination.tsx
View file @3502b7d
+++ b/src/components/Table/src/hooks/usePagination.tsx
View file @3502b7d
@@ -25,19 +25,18 @@ export function usePagination(refProps: ComputedRef<BasicTableProps>) {
   const { t } = useI18n();
   const configRef = ref<PaginationProps>({
-    hideOnSinglePage:true
+    hideOnSinglePage: true,
   });
   const show = ref(true);
   watchEffect(() => {
     const { pagination } = unref(refProps);
-    
+
     if (!isBoolean(pagination) && pagination) {
       configRef.value = {
         ...unref(configRef),
         ...(pagination ?? {}),
-       };
-  
+      };
     }
   });
--- a/src/views/rule/dataFlow/components/dataflowmodal/TransferTableModal.vue
View file @3502b7d
+++ b/src/views/rule/dataFlow/components/dataflowmodal/TransferTableModal.vue
View file @3502b7d
 <script lang="ts" setup>
-  import { Button, Tabs, Tag } from 'ant-design-vue';
+  import { Button, Tabs, Select } from 'ant-design-vue';
   import { remove, uniqBy, cloneDeep } from 'lodash';
-  import { computed, nextTick, onMounted, ref, unref, toRaw } from 'vue';
+  import { nextTick, onMounted, ref, unref, toRaw, watch } from 'vue';
   import {
     deviceTableColumn,
     deviceTableFormSchema,
@@ -21,8 +21,7 @@
   const props = withDefaults(
     defineProps<{
-      getPendingTableParams: (params: Recordable) => any;
-      getSelectedTableParams: (params: Recordable) => any;
+      params?: Recordable;
       value?: (Recordable & DeviceModel)[];
       maxTagLength?: number;
       openModalValidate?: () => boolean;
@@ -34,6 +33,7 @@
       value: () => [],
       maxTagLength: 2,
       primaryKey: 'tbDeviceId',
+      params: () => ({}),
     }
   );
@@ -56,23 +56,6 @@
   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({
@@ -82,9 +65,8 @@
     immediate: false,
     clickToRowSelect: false,
     beforeFetch: (params) => {
-      const { getPendingTableParams } = props;
-      const data = getPendingTableParams?.(params) || {};
-      Object.assign(params, { ...data, selected: false });
+      const { params: otherParams } = props;
+      Object.assign(params, { ...otherParams, selected: false });
       return params;
     },
     afterFetch: (list: DeviceModel[]) => {
@@ -150,9 +132,8 @@
     dataSource: selectedTotalList,
     clickToRowSelect: false,
     beforeFetch: (params) => {
-      const { getSelectedTableParams } = props;
-      const data = getSelectedTableParams?.(params) || {};
-      Object.assign(params, { ...data, selected: false });
+      const { params: otherParams } = props;
+      Object.assign(params, { ...otherParams, selected: false });
       return params;
     },
     rowSelection: {
@@ -219,18 +200,31 @@
     if (openModalValidate && isFunction(openModalValidate) && !openModalValidate()) return;
+    activeKey.value = Active.PENDING;
     openModal(true);
     await nextTick();
     pendingTableActionType.reload();
   };
+  watch(
+    () => props.params,
+    () => {
+      selectedTotalList.value = [];
+      selectedConfirmQueue.value = [];
+      pendingConfirmQueue.value = [];
+      try {
+        pendingTableActionType.clearSelectedRowKeys();
+        selectedTableActionType.clearSelectedRowKeys();
+      } catch (error) {}
+    }
+  );
+
   onMounted(async () => {
-    const { getSelectedTableParams } = props;
-    const data = getSelectedTableParams?.({}) || {};
-    if (!data?.convertConfigId || !data?.deviceProfileIds) {
+    const { params } = props;
+    if (!params?.convertConfigId || !params?.deviceProfileIds) {
       return;
     }
-    const { items } = await devicePage({ page: 1, pageSize: 10, ...data, selected: true });
+    const { items } = await devicePage({ page: 1, pageSize: 10, ...params, selected: true });
     selectedTotalList.value = items;
   });
 </script>
@@ -239,7 +233,7 @@
   <section>
     <BasicModal
       @register="registerModal"
-      title="穿梭表格"
+      title="设备选择"
       width="60%"
       :wrapClassName="prefixCls"
       :showOkBtn="false"
@@ -251,13 +245,11 @@
             <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>
@@ -279,7 +271,6 @@
             <template #tab>
               <div class="flex items-center justify-center">
                 <span>已选设备</span>
-                <!-- <Badge show-zero :count="selectedTotalList.length" /> -->
               </div>
             </template>
             <BasicTable @register="registerSelectedTable">
@@ -305,23 +296,22 @@
         </Tabs>
       </section>
     </BasicModal>
-    <Button @click="handleOpenModal" type="link" :disabled="disabled">
-      <span v-if="!selectedTotalList.length">选择设备</span>
-      <div v-if="selectedTotalList.length">
-        <Tag
-          class="!px-2 !py-1 !bg-gray-50 !border-gray-100"
-          v-for="item in getShowTagOptions"
-          :key="item[primaryKey]"
-        >
-          <span>
-            {{ item.alias || item.name }}
-          </span>
-        </Tag>
-        <Tag class="!px-2 !py-1 !bg-gray-50 !border-gray-100" v-if="getSurplusOptionsLength">
-          <span> +{{ getSurplusOptionsLength }}... </span>
-        </Tag>
-      </div>
-    </Button>
+    <Select
+      placeholder="请选择设备"
+      :disabled="disabled"
+      :value="selectedTotalList.map((item) => item[primaryKey])"
+      mode="multiple"
+      :maxTagCount="3"
+      :open="false"
+      @dropdownVisibleChange="handleOpenModal"
+      :options="
+        selectedTotalList.map((item) => ({
+          ...item,
+          label: item.alias || item.name,
+          value: item[primaryKey],
+        }))
+      "
+    />
   </section>
 </template>
--- a/src/views/rule/dataFlow/components/dataflowmodal/config/index.ts
View file @3502b7d
+++ b/src/views/rule/dataFlow/components/dataflowmodal/config/index.ts
View file @3502b7d
@@ -73,6 +73,10 @@ export const modeForm = (disabled: boolean): FormSchema[] => {
           labelField: 'name',
           valueField: 'tbProfileId',
           disabled,
+          selectProps: {
+            disabled,
+            placeholder: '请选择产品',
+          },
           transferProps: {
             listStyle: { height: '400px' },
             showSearch: true,
@@ -98,26 +102,14 @@ export const modeForm = (disabled: boolean): FormSchema[] => {
       valueField: 'value',
       changeEvent: 'update:value',
       rules: [{ required: true, message: '数据源设备为必选项', type: 'array' }],
-      componentProps: ({ formActionType }) => {
-        const { getFieldsValue } = formActionType;
+      componentProps: ({ formModel }) => {
+        const convertConfigId = formModel[BasicInfoFormField.CONVERT_CONFIG_ID];
+        const deviceProfileIds = formModel[BasicInfoFormField.DATA_SOURCE_PRODUCT];
         return {
           disabled,
-          getPendingTableParams: () => {
-            const values = getFieldsValue();
-            const convertConfigId = Reflect.get(values, BasicInfoFormField.CONVERT_CONFIG_ID);
-            const deviceProfileIds = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_PRODUCT);
-            return { convertConfigId, deviceProfileIds };
-          },
-          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 };
-          },
+          params: { convertConfigId, deviceProfileIds },
           transformValue: handleGroupDevice,
           openModalValidate: () => {
-            const values = getFieldsValue();
-            const deviceProfileIds = Reflect.get(values, BasicInfoFormField.DATA_SOURCE_PRODUCT);
             if (!deviceProfileIds || !deviceProfileIds?.length) {
               createMessage.warning('请选择数据源设备');
             }