refactor: 参数属性

packages/select-transfer-modal/index.vue

@@ -2,7 +2,7 @@
  * @Author: zhaojinfeng 121016171@qq.com
  * @Date: 2023-08-14 11:07:15
  * @LastEditors: zhaojinfeng 121016171@qq.com
- * @LastEditTime: 2023-08-14 19:03:32
+ * @LastEditTime: 2023-08-14 19:30:19
  * @FilePath: \vue3\packages\select-transfer-modal\index.vue
  * @Description:
  *
@@ -77,9 +77,8 @@ import locale from 'element-plus/lib/locale/lang/zh-cn'
 
 const properties = withDefaults(
   defineProps<{
-    value?: TransferKey[]
+    value?: any[]
     show?: boolean
-    defaultData?: Record<string, any>[]
     defaultParams?: Record<string, any>
     formItems?: FormItem[]
     request: (args: any) => Promise<Page>
@@ -91,6 +90,7 @@ const properties = withDefaults(
     width?: string | number
     zIndex?: number
     props?: TransferPropsAlias
+    formattter?: (row: Record<string, any>) => any
   }>(),
   {
     props: () => ({ key: 'id', label: 'name', disabled: 'disabled' }),
@@ -102,17 +102,20 @@ const properties = withDefaults(
     title: '选择',
     width: '70%',
     zIndex: 2023,
+    formattter(row: Record<string, any>) {
+      return { ...row }
+    },
   },
 )
 const emit = defineEmits<{
   (event: 'update:show', show: boolean): void
-  (event: 'update:value', show: any): void
+  (event: 'update:value', value: any[]): void
-  (event: 'confirm', row: any): void
+  (event: 'confirm', rows: Record<string, any>[], keys: TransferKey[]): void
 }>()
 
 const showDialog = ref(false)
 
-const transferValue = $ref<TransferKey[]>([])
+let transferValue = $ref<TransferKey[]>([])
 
 const temp = reactive({})
 
@@ -167,8 +170,9 @@ function open() {
 }
 
 function confirm() {
-  emit('confirm', [...transferValue])
+  const selections = transferValue.map(key => properties.formattter(temp[key]))
-  emit('update:value', [...transferValue])
+  emit('update:value', selections)
+  emit('confirm', selections, [...transferValue])
   if (properties.hideButton)
     emit('update:show', false)
   else
@@ -193,14 +197,20 @@ function handleSizeChange(val: number) {
     queryParams.pageNum = 1
 }
 
-properties.defaultData?.forEach((e) => {
+function transferValueInit() {
-  temp[e[properties.props.key]] = e
+  const { value = [] } = properties
-})
 
-watch(() => properties.defaultData, (data) => {
+  transferValue = value.map((e) => {
-  data?.forEach((e) => {
     temp[e[properties.props.key]] = e
+    return e[properties.props.key]
   })
+}
+
+watch(() => properties.value, () => {
+  if (!showDialog.value) {
+    // 关闭时触发
+    transferValueInit()
+  }
 })
 watch(() => properties.show, (show) => {
   showDialog.value = show

stories/SelectTransferModal.stories.ts

@@ -2,7 +2,7 @@
  * @Author: zhaojinfeng 121016171@qq.com
  * @Date: 2023-08-14 11:07:15
  * @LastEditors: zhaojinfeng 121016171@qq.com
- * @LastEditTime: 2023-08-14 18:52:56
+ * @LastEditTime: 2023-08-14 19:35:09
  * @FilePath: \vue3\stories\SelectTransferModal.stories.ts
  * @Description:
  *
@@ -37,7 +37,7 @@ const meta = {
   title: '表单组件/SelectTransferModal',
   tags: ['表单组件', 'autodocs'],
   args: {
-    value: [2],
+    value: [],
     show: false,
     defaultParams: {},
     formItems: [{ label: 'label1', prop: 'prop1' }, { label: 'label2', prop: 'prop2', selectOptions: [{ label: '1', value: '1' }, { label: '2', value: '2' }] }],