vue3/packages/select-transfer-modal/index.vue

<!--
 * @Author: zhaojinfeng 121016171@qq.com
 * @Date: 2023-08-14 11:07:15
 * @LastEditors: zhaojinfeng 121016171@qq.com
 * @LastEditTime: 2023-08-14 19:30:19
 * @FilePath: \vue3\packages\select-transfer-modal\index.vue
 * @Description:
 *
-->
<template>
  <span v-if="!hideButton" @click="open">
    <slot>
      <el-button type="primary" plain>点击选择</el-button>
    </slot>
  </span>
  <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 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>
      <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?: any[]
    show?: boolean
    defaultParams?: Record<string, any>
    formItems?: FormItem[]
    request: (args: any) => Promise<Page>
    pageSizes?: number[]
    pagerCount?: number
    hideButton?: boolean
    hidePagination?: boolean
    title?: string
    width?: string | number
    zIndex?: number
    props?: TransferPropsAlias
    formattter?: (row: Record<string, any>) => any
  }>(),
  {
    props: () => ({ key: 'id', label: 'name', disabled: 'disabled' }),
    show: false,
    defaultParams: () => ({}),
    pageSizes: () => [20, 50, 100, 200],
    pagerCount: document.body.clientWidth < 992 ? 5 : 7,
    hidePagination: false,
    title: '选择',
    width: '70%',
    zIndex: 2023,
    formattter(row: Record<string, any>) {
      return { ...row }
    },
  },
)
const emit = defineEmits<{
  (event: 'update:show', show: boolean): void
  (event: 'update:value', value: any[]): void
  (event: 'confirm', rows: Record<string, any>[], keys: TransferKey[]): void
}>()

const showDialog = ref(false)

let 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: properties.pageSizes[0] || 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 open() {
  if (properties.hideButton)
    emit('update:show', true)
  else
    showDialog.value = true
}

function confirm() {
  const selections = transferValue.map(key => properties.formattter(temp[key]))
  emit('update:value', selections)
  emit('confirm', selections, [...transferValue])
  if (properties.hideButton)
    emit('update:show', false)
  else
    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
}

function transferValueInit() {
  const { value = [] } = properties

  transferValue = value.map((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
})
</script>

<style lang="scss">
.select-transfer-modal {
  .el-checkbox:last-of-type {
    margin-right: 30px;
  }
}
</style>