feat: 左侧插槽

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-22 12:56:59
+ * @LastEditTime: 2023-09-05 18:26:31
  * @FilePath: \vue3\packages\select-transfer-modal\index.vue
  * @Description:
  *
@@ -18,6 +18,10 @@
       v-model="showDialog" class="select-transfer-modal" :title="title" :width="width" append-to-body
       :z-index="zIndex" @open="getList" @closed="closed"
     >
+      <div flex>
+        <slot name="left" :left-params="leftParams" />
+        <div>
+          {{ queryParams }}
           <el-form ref="queryRef" :model="queryParams" inline>
             <el-form-item v-for="formItem in formItems" :key="formItem.prop" :label="formItem.label" :prop="formItem.prop">
               <el-select v-if="formItem.selectOptions" :placeholder="formItem.placeholder">
@@ -28,7 +32,7 @@
               <el-input v-else v-model="queryParams[formItem.prop]" :placeholder="formItem.placeholder" />
             </el-form-item>
             <el-form-item>
-          <el-button type="primary" :loading="loading" @click="getList">
+              <el-button type="primary" :loading="loading" @click="handleQuery">
                 查询
               </el-button>
               <el-button :loading="loading" @click="resetQuery">
@@ -66,6 +70,9 @@
               />
             </template>
           </el-transfer>
+        </div>
+      </div>
+
       <template #footer>
         <el-space>
           <el-button type="primary" @click="confirm">
@@ -141,6 +148,8 @@ const queryParams = reactive({
   pageSize: properties.pageSizes[0] || 10,
 })
 
+const leftParams = reactive({})
+
 const data = computed(() => {
   const all: any[] = []
   const { props: { disabled = 'disabled', key = 'id' }, lockList } = properties
@@ -159,12 +168,19 @@ let loading = $ref(false)
 
 /* 表单绑定的ref */
 const queryRef = $ref<FormInstance>(null)
+
+function handleQuery() {
+  queryParams.pageNum = 1
+  return getList()
+}
+
 /** 查询表格数据 */
 async function getList() {
   loading = true
   try {
     const response = await properties.request({
       ...properties.defaultParams,
+      ...leftParams, // 合并参数
       ...queryParams,
     })
     const { key = 'id' } = properties.props
@@ -204,8 +220,7 @@ function closed() {
 /** 重置按钮操作 */
 function resetQuery() {
   queryRef?.resetFields()
-  queryParams.pageNum = 1
+  handleQuery()
-  getList()
 }
 
 function handleSizeChange(val: number) {
@@ -226,6 +241,7 @@ function transferValueInit() {
 
 transferValueInit()
 
+watch(() => leftParams, handleQuery)
 watch(() => properties.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-18 16:45:45
+ * @LastEditTime: 2023-09-05 18:19:09
  * @FilePath: \vue3\stories\SelectTransferModal.stories.ts
  * @Description:
  *
@@ -131,7 +131,7 @@ export const TransferLock: Story = {
 }
 
 export const TransferSlot: Story = {
-  name: '插槽',
+  name: '穿梭框插槽',
   args: {
     ...meta.args,
   },
@@ -163,3 +163,39 @@ export const TransferSlot: Story = {
               `,
   }),
 }
+
+export const LeftSlot: Story = {
+  name: '左插槽',
+  args: {
+    ...meta.args,
+  },
+  render: args => ({
+    components: { ThSelectTransferModal },
+    setup() {
+      return { args }
+    },
+    template: `<th-select-transfer-modal
+                 v-model:value="args.value"
+                 v-model:show="args.show"
+                 :form-items="args.formItems"
+                 :default-params="args.defaultParams"
+                 :hide-pagination="args.hidePagination"
+                 :request="args.request"
+                 :lock-list="args.lockList"
+                 :page-sizes="args.pageSizes"
+                 :pager-count="args.pagerCount"
+                 :props="args.props"
+                 :title="args.title"
+                 :width="args.width"
+                 :z-index="args.zIndex"
+               >
+                <template #left="{ queryParams }">
+                <div style="width:200px">
+                
+                <input v-model="queryParams.name" />
+                </div>
+                </template>
+               </th-select-transfer-modal>
+              `,
+  }),
+}

types/auto-imports.d.ts

@@ -306,6 +306,7 @@ declare module 'vue' {
     readonly $shallowRef: UnwrapRef<typeof import('vue/macros')['$shallowRef']>
     readonly $toRef: UnwrapRef<typeof import('vue/macros')['$toRef']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
@@ -593,6 +594,7 @@ declare module '@vue/runtime-core' {
     readonly $shallowRef: UnwrapRef<typeof import('vue/macros')['$shallowRef']>
     readonly $toRef: UnwrapRef<typeof import('vue/macros')['$toRef']>
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>

types/components.d.ts

@@ -11,10 +11,23 @@ declare module 'vue' {
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDialog: typeof import('element-plus/es')['ElDialog']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElInput: typeof import('element-plus/es')['ElInput']
     ElLink: typeof import('element-plus/es')['ElLink']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
     ElRow: typeof import('element-plus/es')['ElRow']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSpace: typeof import('element-plus/es')['ElSpace']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTransfer: typeof import('element-plus/es')['ElTransfer']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
     Header: typeof import('./../packages/header/index.vue')['default']
     MaskText: typeof import('./../packages/mask-text/index.vue')['default']
     PreviewOffice: typeof import('./../packages/preview-office/index.vue')['default']