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 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>