feat: 穿梭框选择组件

packages/select-transfer-modal/index.vue

@@ -0,0 +1,217 @@
+<!--
+ * @Author: zhaojinfeng 121016171@qq.com
+ * @Date: 2023-08-14 11:07:15
+ * @LastEditors: zhaojinfeng 121016171@qq.com
+ * @LastEditTime: 2023-08-14 16:27:08
+ * @FilePath: \vue3\packages\select-transfer-modal\index.vue
+ * @Description:
+ *
+-->
+<template>
+  <el-config-provider :locale="locale">
+    <el-dialog 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 :option="option">
+            <div flex h-100px>
+              <div grow>
+                {{ option.name }}
+              </div>
+              <div v-if="optionRight">
+                {{ option[optionRight] }}
+              </div>
+            </div>
+          </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>
+      <template #footer>
+        <el-space>
+          <el-button type="primary" @click="confirm">
+            确定
+          </el-button>
+          <el-button @click="showDialog = false">
+            取消
+          </el-button>
+        </el-space>
+      </template>
+    </el-dialog>
+  </el-config-provider>
+</template>
+
+<script lang="ts" setup name="ThSelectTransferModal">
+import type { FormInstance, TransferDataItem, TransferKey, TransferPropsAlias } from 'element-plus'
+import locale from 'element-plus/lib/locale/lang/zh-cn'
+
+const properties = withDefaults(
+  defineProps<{
+    value?: TransferKey[]
+    show: boolean
+    defaultData?: Record<string, any>[]
+    defaultParams?: Record<string, any>
+    formItems?: FormItem[]
+    request: (args: any) => Promise<Page>
+    layout?: string
+    optionRight?: string
+    pageSizes?: number[]
+    pagerCount?: number
+    hideButton?: boolean
+    hidePagination?: boolean
+    title?: string
+    width?: string | number
+    zIndex?: number
+    props?: TransferPropsAlias
+  }>(),
+  {
+    props: () => ({ key: 'id', label: 'name', disabled: 'disabled' }),
+    show: false,
+    defaultParams: () => ({}),
+    pageSizes: () => [10, 20, 30, 50],
+    pagerCount: document.body.clientWidth < 992 ? 5 : 7,
+    hidePagination: false,
+    title: '选择',
+    width: '70%',
+    zIndex: 2023,
+  },
+)
+
+const value = useVModel(properties, 'value')
+const showDialog = useVModel(properties, 'show')
+
+const transferValue = $ref<TransferKey[]>([])
+
+const temp = reactive({})
+
+let currentIdList = $ref<any[]>([])
+
+function filterMethod(_query: string, item: TransferDataItem) {
+  return currentIdList.includes(item[properties.props.key]) || transferValue.includes(item[properties.props.key])
+}
+
+const queryParams = reactive({
+  pageNum: 1,
+  pageSize: 10,
+})
+
+const data = computed(() => {
+  const all: any[] = []
+  for (const key in temp)
+    all.push(temp[key])
+
+  return all
+})
+
+let total = $ref(0)
+let loading = $ref(false)
+
+/* 表单绑定的ref */
+const queryRef = $ref<FormInstance>(null)
+
+/** 查询表格数据 */
+async function getList() {
+  loading = true
+  try {
+    const response = await properties.request({
+      ...properties.defaultParams,
+      ...queryParams,
+    })
+    currentIdList = response.rows.map((e) => {
+      temp[e[properties.props.key]] = e
+      return e[properties.props.key]
+    })
+    total = response.total
+  }
+  finally {
+    loading = false
+  }
+}
+
+function confirm() {
+  value.value = [...transferValue]
+  showDialog.value = false
+}
+
+function closed() {
+  queryRef?.resetFields()
+  queryParams.pageNum = 1
+  currentIdList = []
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  queryRef?.resetFields()
+  queryParams.pageNum = 1
+  getList()
+}
+
+function handleSizeChange(val: number) {
+  if (queryParams.pageNum * val > total)
+    queryParams.pageNum = 1
+}
+
+properties.defaultData?.forEach((e) => {
+  temp[e[properties.props.key]] = e
+})
+
+watch(() => properties.defaultData, (data) => {
+  data?.forEach((e) => {
+    temp[e[properties.props.key]] = e
+  })
+})
+</script>
+
+<style lang="scss">
+.select-transfer-modal{
+  .el-checkbox:last-of-type{
+    margin-right: 30px;
+  }
+}
+</style>