feat: 左侧插槽
This commit is contained in:
@ -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
|
||||
|
||||
Reference in New Issue
Block a user