From fdaea182a9c6de016c5d99e61fccc0460a416b3d Mon Sep 17 00:00:00 2001 From: James Zow Date: Fri, 17 May 2024 18:30:17 +0800 Subject: [PATCH 1/2] Fix the issue of modal not being able to drag and drop --- .../components/AdvanceChargeModal.vue | 12 +++++---- .../components/AddEditCollectionModal.vue | 10 ++++--- .../components/AddEditExpenseModal.vue | 12 +++++---- .../income/components/AddEditIncomeModal.vue | 12 +++++---- .../components/AddEditPaymentModal.vue | 10 ++++--- .../components/AddEditTransferModal.vue | 12 +++++---- .../order/components/AddEditModal.vue | 27 ++++++++++--------- .../refund/components/AddEditModal.vue | 12 +++++---- .../storage/components/AddEditModal.vue | 14 +++++----- .../retail/refund/components/AddEditModal.vue | 10 ++++--- .../shipments/components/AddEditModal.vue | 10 ++++--- .../sales/order/components/AddEditModal.vue | 10 ++++--- .../sales/refund/components/AddEditModal.vue | 12 +++++---- .../shipments/components/AddEditModal.vue | 12 +++++---- .../components/AddEditAllotShipmentsModal.vue | 10 ++++--- .../components/AddEditAssembleModal.vue | 10 ++++--- .../components/AddEditDisassembleModal.vue | 10 ++++--- .../components/AddEditOtherShipmentsModal.vue | 10 ++++--- .../components/AddEditOtherStorageModal.vue | 10 ++++--- 19 files changed, 142 insertions(+), 83 deletions(-) diff --git a/web/src/views/financial/advance-charge/components/AdvanceChargeModal.vue b/web/src/views/financial/advance-charge/components/AdvanceChargeModal.vue index 2b800fc5..0cbe88e8 100644 --- a/web/src/views/financial/advance-charge/components/AdvanceChargeModal.vue +++ b/web/src/views/financial/advance-charge/components/AdvanceChargeModal.vue @@ -1,5 +1,5 @@ - +} + \ No newline at end of file diff --git a/web/src/components/Modal/src/components/ModalFooter.vue b/web/src/components/Modal/src/components/ModalFooter.vue index 7ea98dd2..bdb269ea 100644 --- a/web/src/components/Modal/src/components/ModalFooter.vue +++ b/web/src/components/Modal/src/components/ModalFooter.vue @@ -6,36 +6,31 @@ {{ okText }} - +function handleOk(e: Event) { + emit('ok', e); +} + +function handleCancel(e: Event) { + emit('cancel', e); +} + \ No newline at end of file diff --git a/web/src/components/Modal/src/components/ModalHeader.vue b/web/src/components/Modal/src/components/ModalHeader.vue index ac0b2b1d..36e24d12 100644 --- a/web/src/components/Modal/src/components/ModalHeader.vue +++ b/web/src/components/Modal/src/components/ModalHeader.vue @@ -3,19 +3,16 @@ {{ title }} - +defineOptions({ name: 'BasicModalHeader' }); + +defineProps({ + helpMessage: { + type: [String, Array] as PropType, + }, + title: { type: String }, +}); + \ No newline at end of file diff --git a/web/src/components/Modal/src/components/ModalWrapper.vue b/web/src/components/Modal/src/components/ModalWrapper.vue index d48be56e..42781ebf 100644 --- a/web/src/components/Modal/src/components/ModalWrapper.vue +++ b/web/src/components/Modal/src/components/ModalWrapper.vue @@ -20,7 +20,7 @@ } from 'vue'; import { useWindowSizeFn } from '@vben/hooks'; import { type AnyFunction } from '@vben/types'; - import { ScrollContainer } from '/@/components/Container'; + import { ScrollContainer } from '@/components/Container'; import { createModalContext } from '../hooks/useModalContext'; import { useMutationObserver } from '@vueuse/core'; diff --git a/web/src/components/Modal/src/hooks/useModal.ts b/web/src/components/Modal/src/hooks/useModal.ts index da1883ef..51f1eabc 100644 --- a/web/src/components/Modal/src/hooks/useModal.ts +++ b/web/src/components/Modal/src/hooks/useModal.ts @@ -16,11 +16,11 @@ import { toRaw, computed, } from 'vue'; -import { isProdMode } from '/@/utils/env'; -import { isFunction } from '/@/utils/is'; +import { isProdMode } from '@/utils/env'; +import { isFunction } from '@/utils/is'; import { isEqual } from 'lodash-es'; import { tryOnUnmounted } from '@vueuse/core'; -import { error } from '/@/utils/log'; +import { error } from '@/utils/log'; const dataTransfer = reactive({}); @@ -32,19 +32,19 @@ const openData = reactive<{ [key: number]: boolean }>({}); export function useModal(): UseModalReturnType { const modal = ref>(null); const loaded = ref>(false); - const uid = ref(''); + const uid = ref(0); - function register(modalMethod: ModalMethods, uuid: string) { + function register(modalMethod: ModalMethods, uuid: number) { if (!getCurrentInstance()) { throw new Error('useModal() can only be used inside setup() or functional components!'); } uid.value = uuid; isProdMode() && - onUnmounted(() => { - modal.value = null; - loaded.value = false; - dataTransfer[unref(uid)] = null; - }); + onUnmounted(() => { + modal.value = null; + loaded.value = false; + dataTransfer[String(unref(uid))] = null; + }); if (unref(loaded) && isProdMode() && modalMethod === unref(modal)) return; modal.value = modalMethod; @@ -103,7 +103,7 @@ export function useModal(): UseModalReturnType { export const useModalInner = (callbackFn?: Fn): UseModalInnerReturnType => { const modalInstanceRef = ref>(null); const currentInstance = getCurrentInstance(); - const uidRef = ref(''); + const uidRef = ref(0); const getInstance = () => { const instance = unref(modalInstanceRef); @@ -113,11 +113,11 @@ export const useModalInner = (callbackFn?: Fn): UseModalInnerReturnType => { return instance; }; - const register = (modalInstance: ModalMethods, uuid: string) => { + const register = (modalInstance: ModalMethods, uuid: number) => { isProdMode() && - tryOnUnmounted(() => { - modalInstanceRef.value = null; - }); + tryOnUnmounted(() => { + modalInstanceRef.value = null; + }); uidRef.value = uuid; modalInstanceRef.value = modalInstance; currentInstance?.emit('register', modalInstance, uuid); @@ -160,4 +160,4 @@ export const useModalInner = (callbackFn?: Fn): UseModalInnerReturnType => { }, }, ]; -}; +}; \ No newline at end of file diff --git a/web/src/components/Modal/src/hooks/useModalContext.ts b/web/src/components/Modal/src/hooks/useModalContext.ts index 94d4c4ee..fe3110ef 100644 --- a/web/src/components/Modal/src/hooks/useModalContext.ts +++ b/web/src/components/Modal/src/hooks/useModalContext.ts @@ -1,5 +1,5 @@ import { InjectionKey } from 'vue'; -import { createContext, useContext } from '/@/hooks/core/useContext'; +import { createContext, useContext } from '@/hooks/core/useContext'; export interface ModalContextProps { redoModalHeight: () => void; @@ -13,4 +13,4 @@ export function createModalContext(context: ModalContextProps) { export function useModalContext() { return useContext(key); -} +} \ No newline at end of file diff --git a/web/src/components/Modal/src/hooks/useModalDrag.ts b/web/src/components/Modal/src/hooks/useModalDrag.ts index d17b27ed..d9ff0fca 100644 --- a/web/src/components/Modal/src/hooks/useModalDrag.ts +++ b/web/src/components/Modal/src/hooks/useModalDrag.ts @@ -104,4 +104,4 @@ export function useModalDragMove(context: UseModalDragMoveContext) { handleDrag(); }, 30); }); -} +} \ No newline at end of file diff --git a/web/src/components/Modal/src/hooks/useModalFullScreen.ts b/web/src/components/Modal/src/hooks/useModalFullScreen.ts index b53563a3..fd061984 100644 --- a/web/src/components/Modal/src/hooks/useModalFullScreen.ts +++ b/web/src/components/Modal/src/hooks/useModalFullScreen.ts @@ -7,7 +7,6 @@ export interface UseFullScreenContext { } export function useFullScreen(context: UseFullScreenContext) { - // const formerHeightRef = ref(0); const fullScreenRef = ref(false); const getWrapClassName = computed(() => { @@ -18,26 +17,6 @@ export function useFullScreen(context: UseFullScreenContext) { function handleFullScreen(e: Event) { e && e.stopPropagation(); fullScreenRef.value = !unref(fullScreenRef); - - // const modalWrapper = unref(context.modalWrapperRef); - - // if (!modalWrapper) return; - - // const wrapperEl = modalWrapper.$el as HTMLElement; - // if (!wrapperEl) return; - // const modalWrapSpinEl = wrapperEl.querySelector('.ant-spin-nested-loading') as HTMLElement; - - // if (!modalWrapSpinEl) return; - - // if (!unref(formerHeightRef) && unref(fullScreenRef)) { - // formerHeightRef.value = modalWrapSpinEl.offsetHeight; - // } - - // if (unref(fullScreenRef)) { - // modalWrapSpinEl.style.height = `${window.innerHeight - unref(context.extHeightRef)}px`; - // } else { - // modalWrapSpinEl.style.height = `${unref(formerHeightRef)}px`; - // } } return { getWrapClassName, handleFullScreen, fullScreenRef }; } diff --git a/web/src/components/Modal/src/index.less b/web/src/components/Modal/src/index.less index 0921c373..e70cefea 100644 --- a/web/src/components/Modal/src/index.less +++ b/web/src/components/Modal/src/index.less @@ -1,14 +1,18 @@ -/* stylelint-disable media-feature-range-notation */ + +@modal-prefix-cls: ~'@{namespace}-basic-modal'; + .fullscreen-modal { overflow: hidden; .ant-modal { inset: 0 !important; width: 100% !important; + max-width: 100%; height: 100%; &-content { height: 100%; + overflow: hidden; } } @@ -17,107 +21,111 @@ } } -.ant-modal { - width: 520px; - padding-bottom: 0; +.@{modal-prefix-cls} { + .ant-modal { + width: 520px; + padding-bottom: 0; - .ant-modal-body > .scrollbar { - padding: 14px; - } + .ant-modal-body > .scrollbar { + padding: 14px; + } - &-title { - font-size: 16px; - font-weight: bold; + &-title { + font-size: 16px; + font-weight: bold; - .base-title { - cursor: move !important; + .base-title { + cursor: move !important; + } } - } - .ant-modal-body { - padding: 0; + .ant-modal-body { + padding: 0; - > .scrollbar > .scrollbar__bar.is-horizontal { - display: none; + > .scrollbar > .scrollbar__bar.is-horizontal { + display: none; + } } - } - &-large { - top: 60px; + &-large { + top: 60px; - &--mini { - top: 16px; + &--mini { + top: 16px; + } } - } - &-header { - padding: 16px; - border-bottom: 1px solid @border-color-base; - } + &-header { + padding: 16px; + border-bottom: 1px solid @border-color-base; + } - &-content { - padding: 0 !important; - box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%); - } + &-content { + padding: 0 !important; + box-shadow: + 0 4px 8px 0 rgb(0 0 0 / 20%), + 0 6px 20px 0 rgb(0 0 0 / 19%); + } - &-footer { - padding: 10px 16px; - border-top: 1px solid @border-color-base; + &-footer { + padding: 10px 16px; + border-top: 1px solid @border-color-base; - button + button { - margin-left: 10px; + button + button { + margin-left: 10px; + } } - } - &-close { - top: 0 !important; - right: 0 !important; - width: auto !important; - outline: none; - background: transparent !important; - font-weight: normal; - } + &-close { + top: 0 !important; + right: 0 !important; + width: auto !important; + outline: none; + background: transparent !important; + font-weight: normal; + } - &-close-x { - display: inline-block; - width: 96px; - height: 56px; - line-height: 56px; - } + &-close-x { + display: inline-block; + width: 96px; + height: 56px; + line-height: 56px !important; + } - &-confirm-body { - .ant-modal-confirm-content { - > * { - color: @text-color-help-dark; + &-confirm-body { + .ant-modal-confirm-content { + > * { + color: @text-color-help-dark; + } } } - } - &-confirm-confirm.error .ant-modal-confirm-body > .anticon { - color: @error-color; - } + &-confirm-confirm.error .ant-modal-confirm-body > .anticon { + color: @error-color; + } - &-confirm-btns { - .ant-btn:last-child { - margin-right: 0; + &-confirm-btns { + .ant-btn:last-child { + margin-right: 0; + } } - } - &-confirm-info { - .ant-modal-confirm-body > .anticon { - color: @warning-color; + &-confirm-info { + .ant-modal-confirm-body > .anticon { + color: @warning-color; + } } - } - &-confirm-confirm.success { - .ant-modal-confirm-body > .anticon { - color: @success-color; + &-confirm-confirm.success { + .ant-modal-confirm-body > .anticon { + color: @success-color; + } } } -} -.ant-modal-confirm .ant-modal-body { - padding: 24px !important; + .ant-modal-confirm .ant-modal-body { + padding: 24px !important; + } } @media screen and (max-height: 600px) { @@ -136,4 +144,4 @@ .ant-modal { top: 10px; } -} \ No newline at end of file +} diff --git a/web/src/components/Modal/src/props.ts b/web/src/components/Modal/src/props.ts index 209cfe3e..bd13b811 100644 --- a/web/src/components/Modal/src/props.ts +++ b/web/src/components/Modal/src/props.ts @@ -1,7 +1,7 @@ import type { PropType, CSSProperties } from 'vue'; import type { ModalWrapperProps } from './typing'; import { ButtonProps } from 'ant-design-vue/es/button/buttonTypes'; -import { useI18n } from '/@/hooks/web/useI18n'; +import { useI18n } from '@/hooks/web/useI18n'; const { t } = useI18n(); @@ -80,4 +80,4 @@ export const basicProps = Object.assign({}, modalProps, { wrapClassName: { type: String }, zIndex: { type: Number }, -}); +}); \ No newline at end of file diff --git a/web/src/components/Modal/src/typing.ts b/web/src/components/Modal/src/typing.ts index fd9aa559..e9afc4c3 100644 --- a/web/src/components/Modal/src/typing.ts +++ b/web/src/components/Modal/src/typing.ts @@ -206,4 +206,4 @@ export interface ModalWrapperProps { open: boolean; fullScreen: boolean; useWrapper: boolean; -} +} \ No newline at end of file diff --git a/web/src/views/product/info/components/ProductInfoModal.vue b/web/src/views/product/info/components/ProductInfoModal.vue index 758e7263..79c72f00 100644 --- a/web/src/views/product/info/components/ProductInfoModal.vue +++ b/web/src/views/product/info/components/ProductInfoModal.vue @@ -1,5 +1,5 @@ @@ -388,6 +390,7 @@ import {ProductAttributeListReq} from "@/api/product/model/productAttributeModel import {ProductAttributeModel, ProductStockModel, Unit} from "@/views/product/info/model/productInfoModel"; import {meTable, stock, productInfo, formState} from "@/views/product/info/info.data"; import {useI18n} from "vue-i18n"; +import BasicModal from "@/components/Modal/src/BasicModal.vue"; const VNodes = defineComponent({ props: { @@ -405,6 +408,7 @@ export default defineComponent({ name: 'ProductInfoModal', emits: ['success', 'cancel', 'error'], components: { + BasicModal, 'a-modal': Modal, 'a-upload': Upload, 'a-button': Button,