thzxcx/vue3
1
0
Fork 0
Code Pull Requests Packages Releases Activity

feat: 左侧插槽

Browse Source
This commit is contained in:
赵劲奉
2023-09-05 19:22:04 +08:00
parent dda6008f95
commit 0588c30ce6
4 changed files with 120 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
packages/select-transfer-modal/index.vue
View File

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

40
stories/SelectTransferModal.stories.ts
View File

@ -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>
`,
}),
}

2
types/auto-imports.d.ts vendored
View File

@ -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']>

13
types/components.d.ts vendored
View File

@ -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']