fix: dialog

This commit is contained in:
xingyu 2023-08-04 21:44:55 +08:00
parent 4417dc8700
commit 003751a41c
2 changed files with 43 additions and 27 deletions

View File

@ -1,8 +1,6 @@
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import { isNumber } from '@/utils/is'
// eslint-disable-next-line vue/no-reserved-component-names
defineOptions({ name: 'Dialog' })
const slots = useSlots()
@ -13,7 +11,7 @@ const props = defineProps({
fullscreen: propTypes.bool.def(true),
width: propTypes.oneOfType([String, Number]).def('40%'),
scroll: propTypes.bool.def(false), // maxHeight
maxHeight: propTypes.oneOfType([String, Number]).def('300px')
maxHeight: propTypes.oneOfType([String, Number]).def('400px')
})
const getBindValue = computed(() => {
@ -39,7 +37,6 @@ const dialogHeight = ref(isNumber(props.maxHeight) ? `${props.maxHeight}px` : pr
watch(
() => isFullscreen.value,
async (val: boolean) => {
//
await nextTick()
if (val) {
const windowHeight = document.documentElement.offsetHeight
@ -62,36 +59,47 @@ const dialogStyle = computed(() => {
<template>
<ElDialog
v-bind="getBindValue"
:close-on-click-modal="true"
:fullscreen="isFullscreen"
:width="width"
destroy-on-close
draggable
lock-scroll
v-bind="getBindValue"
draggable
top="0"
:show-close="false"
>
<template #header>
<div class="flex justify-between">
<template #header="{ close }">
<div class="flex justify-between items-center h-54px pl-15px pr-15px relative">
<slot name="title">
{{ title }}
</slot>
<div
class="h-54px flex justify-between items-center absolute top-[50%] right-15px translate-y-[-50%]"
>
<Icon
v-if="fullscreen"
:icon="isFullscreen ? 'zmdi:fullscreen-exit' : 'zmdi:fullscreen'"
class="mr-22px cursor-pointer is-hover mt-2px z-10"
class="cursor-pointer is-hover mr-10px"
:icon="isFullscreen ? 'radix-icons:exit-full-screen' : 'radix-icons:enter-full-screen'"
color="var(--el-color-info)"
hover-color="var(--el-color-primary)"
@click="toggleFull"
/>
<Icon
class="cursor-pointer is-hover"
icon="ep:close"
hover-color="var(--el-color-primary)"
color="var(--el-color-info)"
@click="close"
/>
</div>
</div>
</template>
<!-- 情况一如果 scroll true说明开启滚动条 -->
<ElScrollbar v-if="scroll" :style="dialogStyle">
<slot></slot>
</ElScrollbar>
<!-- 情况二如果 scroll false说明关闭滚动条滚动条 -->
<slot v-else></slot>
<template v-if="slots.footer" #footer>
<slot name="footer"></slot>
</template>
@ -99,24 +107,32 @@ const dialogStyle = computed(() => {
</template>
<style lang="scss">
.#{$elNamespace}-overlay-dialog {
display: flex;
justify-content: center;
align-items: center;
}
.#{$elNamespace}-dialog {
margin: 0 !important;
&__header {
height: 54px;
padding: 0;
margin-right: 0 !important;
border-bottom: 1px solid var(--el-border-color);
}
&__body {
padding: 0 !important;
padding: 15px !important;
}
&__footer {
border-top: 1px solid var(--el-border-color);
}
}
.is-hover {
&:hover {
color: var(--el-color-primary) !important;
&__headerbtn {
top: 0;
}
}
</style>

View File

@ -101,7 +101,7 @@ const getDetail = async () => {
if ('ProductSpuDetail' === name) {
isDetail.value = true
}
const id = params.spuId as number
const id = params.spuId as unknown as number
if (id) {
formLoading.value = true
try {
@ -155,15 +155,15 @@ const submitForm = async () => {
item.subCommissionSecondPrice = convertToInteger(item.subCommissionSecondPrice)
})
//
const newSliderPicUrls = []
deepCopyFormData.sliderPicUrls.forEach((item) => {
const newSliderPicUrls: any[] = []
deepCopyFormData.sliderPicUrls.forEach((item: any) => {
//
typeof item === 'object' ? newSliderPicUrls.push(item.url) : newSliderPicUrls.push(item)
})
deepCopyFormData.sliderPicUrls = newSliderPicUrls
//
const data = deepCopyFormData as ProductSpuApi.Spu
const id = params.spuId as number
const id = params.spuId as unknown as number
if (!id) {
await ProductSpuApi.createSpu(data)
message.success(t('common.createSuccess'))