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 * @Author: zhaojinfeng 121016171@qq.com
* @Date: 2023-08-14 11:07:15 * @Date: 2023-08-14 11:07:15
* @LastEditors: zhaojinfeng 121016171@qq.com * @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 * @FilePath: \vue3\packages\select-transfer-modal\index.vue
* @Description: * @Description:
* *
@ -18,54 +18,61 @@
v-model="showDialog" class="select-transfer-modal" :title="title" :width="width" append-to-body v-model="showDialog" class="select-transfer-modal" :title="title" :width="width" append-to-body
:z-index="zIndex" @open="getList" @closed="closed" :z-index="zIndex" @open="getList" @closed="closed"
> >
<el-form ref="queryRef" :model="queryParams" inline> <div flex>
<el-form-item v-for="formItem in formItems" :key="formItem.prop" :label="formItem.label" :prop="formItem.prop"> <slot name="left" :left-params="leftParams" />
<el-select v-if="formItem.selectOptions" :placeholder="formItem.placeholder"> <div>
<el-option v-for="option in formItem.selectOptions" :key="option.value" :value="option.value"> {{ queryParams }}
{{ option.label }} <el-form ref="queryRef" :model="queryParams" inline>
</el-option> <el-form-item v-for="formItem in formItems" :key="formItem.prop" :label="formItem.label" :prop="formItem.prop">
</el-select> <el-select v-if="formItem.selectOptions" :placeholder="formItem.placeholder">
<el-input v-else v-model="queryParams[formItem.prop]" :placeholder="formItem.placeholder" /> <el-option v-for="option in formItem.selectOptions" :key="option.value" :value="option.value">
</el-form-item> {{ option.label }}
<el-form-item> </el-option>
<el-button type="primary" :loading="loading" @click="getList"> </el-select>
查询 <el-input v-else v-model="queryParams[formItem.prop]" :placeholder="formItem.placeholder" />
</el-button> </el-form-item>
<el-button :loading="loading" @click="resetQuery"> <el-form-item>
重置 <el-button type="primary" :loading="loading" @click="handleQuery">
</el-button> 查询
</el-form-item> </el-button>
</el-form> <el-button :loading="loading" @click="resetQuery">
<el-transfer 重置
v-model="transferValue" </el-button>
v-loading="loading" </el-form-item>
inline-block </el-form>
text-left <el-transfer
style="--el-transfer-panel-width:25vw" v-model="transferValue"
:titles="['待选项', '已选项']" v-loading="loading"
:button-texts="['移除', '添加']" inline-block
:format="{ text-left
noChecked: '${total}', style="--el-transfer-panel-width:25vw"
hasChecked: '${checked}/${total}', :titles="['待选项', '已选项']"
}" :button-texts="['移除', '添加']"
:data="data" :format="{
:filter-method="filterMethod" noChecked: '${total}',
:props="props" hasChecked: '${checked}/${total}',
> }"
<template #default="{ option }"> :data="data"
<slot name="transfer" :option="option"> :filter-method="filterMethod"
{{ option[props.label] }} :props="props"
</slot> >
</template> <template #default="{ option }">
<template #left-footer> <slot name="transfer" :option="option">
<el-pagination {{ option[props.label] }}
v-if="!hidePagination && total > queryParams.pageSize" v-model:current-page="queryParams.pageNum" </slot>
v-model:page-size="queryParams.pageSize" background small layout="total, sizes, prev, next, jumper" mt-9px </template>
:page-sizes="pageSizes" :pager-count="pagerCount" :total="total" @size-change="handleSizeChange" <template #left-footer>
@current-change="getList" <el-pagination
/> v-if="!hidePagination && total > queryParams.pageSize" v-model:current-page="queryParams.pageNum"
</template> v-model:page-size="queryParams.pageSize" background small layout="total, sizes, prev, next, jumper" mt-9px
</el-transfer> :page-sizes="pageSizes" :pager-count="pagerCount" :total="total" @size-change="handleSizeChange"
@current-change="getList"
/>
</template>
</el-transfer>
</div>
</div>
<template #footer> <template #footer>
<el-space> <el-space>
<el-button type="primary" @click="confirm"> <el-button type="primary" @click="confirm">
@ -141,6 +148,8 @@ const queryParams = reactive({
pageSize: properties.pageSizes[0] || 10, pageSize: properties.pageSizes[0] || 10,
}) })
const leftParams = reactive({})
const data = computed(() => { const data = computed(() => {
const all: any[] = [] const all: any[] = []
const { props: { disabled = 'disabled', key = 'id' }, lockList } = properties const { props: { disabled = 'disabled', key = 'id' }, lockList } = properties
@ -159,12 +168,19 @@ let loading = $ref(false)
/* 表单绑定的ref */ /* 表单绑定的ref */
const queryRef = $ref<FormInstance>(null) const queryRef = $ref<FormInstance>(null)
function handleQuery() {
queryParams.pageNum = 1
return getList()
}
/** 查询表格数据 */ /** 查询表格数据 */
async function getList() { async function getList() {
loading = true loading = true
try { try {
const response = await properties.request({ const response = await properties.request({
...properties.defaultParams, ...properties.defaultParams,
...leftParams, // 合并参数
...queryParams, ...queryParams,
}) })
const { key = 'id' } = properties.props const { key = 'id' } = properties.props
@ -204,8 +220,7 @@ function closed() {
/** 重置按钮操作 */ /** 重置按钮操作 */
function resetQuery() { function resetQuery() {
queryRef?.resetFields() queryRef?.resetFields()
queryParams.pageNum = 1 handleQuery()
getList()
} }
function handleSizeChange(val: number) { function handleSizeChange(val: number) {
@ -226,6 +241,7 @@ function transferValueInit() {
transferValueInit() transferValueInit()
watch(() => leftParams, handleQuery)
watch(() => properties.value, transferValueInit) watch(() => properties.value, transferValueInit)
watch(() => properties.show, (show) => { watch(() => properties.show, (show) => {
showDialog.value = show showDialog.value = show

40
stories/SelectTransferModal.stories.ts
View File

@ -2,7 +2,7 @@
* @Author: zhaojinfeng 121016171@qq.com * @Author: zhaojinfeng 121016171@qq.com
* @Date: 2023-08-14 11:07:15 * @Date: 2023-08-14 11:07:15
* @LastEditors: zhaojinfeng 121016171@qq.com * @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 * @FilePath: \vue3\stories\SelectTransferModal.stories.ts
* @Description: * @Description:
* *
@ -131,7 +131,7 @@ export const TransferLock: Story = {
} }
export const TransferSlot: Story = { export const TransferSlot: Story = {
name: '插槽', name: '穿梭框插槽',
args: { args: {
...meta.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 $shallowRef: UnwrapRef<typeof import('vue/macros')['$shallowRef']>
readonly $toRef: UnwrapRef<typeof import('vue/macros')['$toRef']> readonly $toRef: UnwrapRef<typeof import('vue/macros')['$toRef']>
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']> 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 asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']> readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
readonly computed: UnwrapRef<typeof import('vue')['computed']> 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 $shallowRef: UnwrapRef<typeof import('vue/macros')['$shallowRef']>
readonly $toRef: UnwrapRef<typeof import('vue/macros')['$toRef']> readonly $toRef: UnwrapRef<typeof import('vue/macros')['$toRef']>
readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']> 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 asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']> readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
readonly computed: UnwrapRef<typeof import('vue')['computed']> 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'] ElAvatar: typeof import('element-plus/es')['ElAvatar']
ElButton: typeof import('element-plus/es')['ElButton'] ElButton: typeof import('element-plus/es')['ElButton']
ElCol: typeof import('element-plus/es')['ElCol'] ElCol: typeof import('element-plus/es')['ElCol']
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
ElDialog: typeof import('element-plus/es')['ElDialog'] 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'] ElIcon: typeof import('element-plus/es')['ElIcon']
ElInput: typeof import('element-plus/es')['ElInput']
ElLink: typeof import('element-plus/es')['ElLink'] 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'] 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'] Header: typeof import('./../packages/header/index.vue')['default']
MaskText: typeof import('./../packages/mask-text/index.vue')['default'] MaskText: typeof import('./../packages/mask-text/index.vue')['default']
PreviewOffice: typeof import('./../packages/preview-office/index.vue')['default'] PreviewOffice: typeof import('./../packages/preview-office/index.vue')['default']