From 0588c30ce6e5d13a8bcf81761c2e011e7041c6b7 Mon Sep 17 00:00:00 2001
From: zhaojinfeng <121016171@qq.com>
Date: Tue, 5 Sep 2023 19:22:04 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B7=A6=E4=BE=A7=E6=8F=92=E6=A7=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/select-transfer-modal/index.vue | 118 +++++++++++++----------
 stories/SelectTransferModal.stories.ts   |  40 +++++++-
 types/auto-imports.d.ts                  |   2 +
 types/components.d.ts                    |  13 +++
 4 files changed, 120 insertions(+), 53 deletions(-)

diff --git a/packages/select-transfer-modal/index.vue b/packages/select-transfer-modal/index.vue
index 4be80f9..ca46fc7 100644
--- a/packages/select-transfer-modal/index.vue
+++ b/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,54 +18,61 @@
       v-model="showDialog" class="select-transfer-modal" :title="title" :width="width" append-to-body
       :z-index="zIndex" @open="getList" @closed="closed"
     >
-      <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">
-            <el-option v-for="option in formItem.selectOptions" :key="option.value" :value="option.value">
-              {{ option.label }}
-            </el-option>
-          </el-select>
-          <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>
-          <el-button :loading="loading" @click="resetQuery">
-            重置
-          </el-button>
-        </el-form-item>
-      </el-form>
-      <el-transfer
-        v-model="transferValue"
-        v-loading="loading"
-        inline-block
-        text-left
-        style="--el-transfer-panel-width:25vw"
-        :titles="['待选项', '已选项']"
-        :button-texts="['移除', '添加']"
-        :format="{
-          noChecked: '${total}',
-          hasChecked: '${checked}/${total}',
-        }"
-        :data="data"
-        :filter-method="filterMethod"
-        :props="props"
-      >
-        <template #default="{ option }">
-          <slot name="transfer" :option="option">
-            {{ option[props.label] }}
-          </slot>
-        </template>
-        <template #left-footer>
-          <el-pagination
-            v-if="!hidePagination && total > queryParams.pageSize" v-model:current-page="queryParams.pageNum"
-            v-model:page-size="queryParams.pageSize" background small layout="total, sizes, prev, next, jumper" mt-9px
-            :page-sizes="pageSizes" :pager-count="pagerCount" :total="total" @size-change="handleSizeChange"
-            @current-change="getList"
-          />
-        </template>
-      </el-transfer>
+      <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">
+                <el-option v-for="option in formItem.selectOptions" :key="option.value" :value="option.value">
+                  {{ option.label }}
+                </el-option>
+              </el-select>
+              <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="handleQuery">
+                查询
+              </el-button>
+              <el-button :loading="loading" @click="resetQuery">
+                重置
+              </el-button>
+            </el-form-item>
+          </el-form>
+          <el-transfer
+            v-model="transferValue"
+            v-loading="loading"
+            inline-block
+            text-left
+            style="--el-transfer-panel-width:25vw"
+            :titles="['待选项', '已选项']"
+            :button-texts="['移除', '添加']"
+            :format="{
+              noChecked: '${total}',
+              hasChecked: '${checked}/${total}',
+            }"
+            :data="data"
+            :filter-method="filterMethod"
+            :props="props"
+          >
+            <template #default="{ option }">
+              <slot name="transfer" :option="option">
+                {{ option[props.label] }}
+              </slot>
+            </template>
+            <template #left-footer>
+              <el-pagination
+                v-if="!hidePagination && total > queryParams.pageSize" v-model:current-page="queryParams.pageNum"
+                v-model:page-size="queryParams.pageSize" background small layout="total, sizes, prev, next, jumper" mt-9px
+                :page-sizes="pageSizes" :pager-count="pagerCount" :total="total" @size-change="handleSizeChange"
+                @current-change="getList"
+              />
+            </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
-  getList()
+  handleQuery()
 }
 
 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
diff --git a/stories/SelectTransferModal.stories.ts b/stories/SelectTransferModal.stories.ts
index 134ea1a..3aad97f 100644
--- a/stories/SelectTransferModal.stories.ts
+++ b/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>
+              `,
+  }),
+}
diff --git a/types/auto-imports.d.ts b/types/auto-imports.d.ts
index b0a515f..54cfeb9 100644
--- a/types/auto-imports.d.ts
+++ b/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']>
diff --git a/types/components.d.ts b/types/components.d.ts
index 8eb4c0d..d36a118 100644
--- a/types/components.d.ts
+++ b/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']