bl-common-vue3 3.8.71 → 3.8.73

package/index.js

@@ -3,6 +3,12 @@ import * as components from "./src/components/components.js";
 export * from "./src/components/components.js";
 import utils from "./src/common/utils/util.js";
 import { commonLocale, commonAllLocale } from "./src/locale/index";
+export {
+  setGlobalGetContainer,
+  resetGlobalGetContainer,
+  getGlobalContainer,
+} from "./src/common/utils/popupContainer";
+import popupContainer from "./src/common/utils/popupContainer";
 
 export const install = function (app) {
   Object.keys(components).map((key) => {
@@ -20,4 +26,5 @@ export default {
   utils,
   commonLocale,
   commonAllLocale,
+  ...popupContainer,
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bl-common-vue3",
-  "version": "3.8.71",
+  "version": "3.8.73",
   "main": "index.js",
   "module": "index.js",
   "description": "bailing vue3 common components lib",

package/src/common/utils/popupContainer.js

@@ -0,0 +1,31 @@
+/**
+ * 全局弹层容器（Modal / Drawer / Popover 等）统一入口
+ *
+ * 业务方在应用初始化时调用 setGlobalGetContainer 即可统一所有 Bl 封装组件
+ * 以及通过 getGlobalContainer 接入的命令式弹框的挂载节点。
+ */
+
+const defaultGetContainer = () => {
+  if (typeof window !== 'undefined' && window?.rawDocument?.body) {
+    return window.rawDocument.body;
+  }
+  return typeof document !== 'undefined' ? document.body : null;
+};
+
+let _getContainer = defaultGetContainer;
+
+export const setGlobalGetContainer = (fn) => {
+  _getContainer = typeof fn === 'function' ? fn : defaultGetContainer;
+};
+
+export const resetGlobalGetContainer = () => {
+  _getContainer = defaultGetContainer;
+};
+
+export const getGlobalContainer = (...args) => _getContainer(...args);
+
+export default {
+  setGlobalGetContainer,
+  resetGlobalGetContainer,
+  getGlobalContainer,
+};

package/src/common/utils/util.js

@@ -4,6 +4,7 @@ import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
 import i18n, {t, loadLanguageAsync} from "../../locale";
 import shareds from "./shared";
 import { cloneDeep, isEmpty } from "lodash";
+import { getGlobalContainer } from "./popupContainer";
 
 const utils = {
   numberReg: /^\d+(\.\d+)?$/, // 数字验证正则
@@ -219,6 +220,7 @@ const utils = {
       okText: params.okText || t('common.button.ok'),
       cancelText: params.cancelText || t('common.button.cancel'),
       icon: () => createVNode(ExclamationCircleOutlined),
+      getContainer: getGlobalContainer,
       onOk: () => {
         params.onOk && params.onOk();
       },
@@ -239,9 +241,6 @@ const utils = {
     okText = t('common.button.ok'),
     cancelText = t('common.button.cancel')
   }) => {
-    const getContainer = () => {
-      return window?.rawDocument?.body || document?.body;
-    };
     Modal.confirm({
       title: () => title,
       content: () => content ? content : '',
@@ -250,7 +249,7 @@ const utils = {
       okType,
       cancelText: () => cancelText,
       centered,
-      getContainer,
+      getContainer: getGlobalContainer,
       onOk() {
         onOk && onOk();
       },

package/src/components/ApprovalDetail/modules/ApprovalAddSignModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-modal
+  <bl-modal
     :visible="visible"
     :title="$t('modules.ApprovalAddSignModal.924062-0')"
     @ok="handleOk"
@@ -115,7 +115,7 @@
       :uMin="1"
       :uMax="99"
     />
-  </a-modal>
+  </bl-modal>
 </template>
 
 <script>
@@ -129,6 +129,7 @@ import {
   createVNode,
 } from "vue";
 import { Form, message } from "ant-design-vue";
+import BlModal from "../../BlModal/index.vue";
 const useForm = Form.useForm;
 import { ChooseOrgMember } from "../../components";
 import {
@@ -139,7 +140,7 @@ import {
 import { t } from "../../../locale";
 export default defineComponent({
   name: "AddSignModal",
-  components: { UserOutlined, CloseOutlined, ChooseOrgMember, PlusOutlined },
+  components: { UserOutlined, CloseOutlined, ChooseOrgMember, PlusOutlined, BlModal },
   props: {
     visible: {
       type: Boolean,

package/src/components/ApprovalDetail/modules/ApprovalSendBack.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-modal
+  <bl-modal
     :title="$t('modules.ApprovalSendBack.587880-0')"
     :width="700"
     :body-style="{
@@ -27,17 +27,18 @@
         />
       </a-form-item>
     </a-form>
-  </a-modal>
+  </bl-modal>
 </template>
 
 <script>
 import OpinionInfo from "./ApprovalOpinionInfo.vue";
 import { reactive, toRefs, watch } from "vue";
 import { Form, message } from "ant-design-vue";
+import BlModal from "../../BlModal/index.vue";
 const useForm = Form.useForm;
 import { t } from "../../../locale";
 export default {
-  components: { OpinionInfo },
+  components: { OpinionInfo, BlModal },
   props: {
     visible: {
       type: Boolean,

package/src/components/ApprovalDetail/modules/ApprovalTransferReview.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-modal
+  <bl-modal
     :title="$t('modules.ApprovalTransferReview.357897-0')"
     :width="700"
     :body-style="{
@@ -29,7 +29,7 @@
         />
       </a-form-item>
     </a-form>
-  </a-modal>
+  </bl-modal>
 </template>
 
 <script>
@@ -37,6 +37,7 @@ import OpinionInfo from "./ApprovalOpinionInfo.vue";
 import { reactive, toRefs } from "vue";
 import ChooseUser from "./ApprovalChooseUser.vue";
 import { Form } from "ant-design-vue";
+import BlModal from "../../BlModal/index.vue";
 const useForm = Form.useForm;
 import { t } from "../../../locale";
 
@@ -44,6 +45,7 @@ export default {
   components: {
     OpinionInfo,
     ChooseUser,
+    BlModal,
   },
   props: {
     visible: {

package/src/components/AttachmentInfo/modules/AddAttachments.vue

@@ -8,7 +8,7 @@
 -->
 
 <template>
-  <a-modal
+  <bl-modal
     :title="t('modules.AddAttachments.831666-0', [title])"
     :maskClosable="false"
     :visible="visible"
@@ -61,7 +61,7 @@
       <a-button class="mr-10" @click.prevent="closeModal">{{t('common.button.cancel')}}</a-button>
       <a-button type="primary" @click.prevent="onSubmit">{{t('common.button.save')}}</a-button>
     </div>
-  </a-modal>
+  </bl-modal>
 </template>
 
 <script>
@@ -78,6 +78,7 @@ import {
 import { FileTextOutlined, InboxOutlined } from "@ant-design/icons-vue";
 import {t, loadLanguageAsync} from "../../../locale";
 import utils from "../../../common/utils/util";
+import BlModal from "../../BlModal/index.vue";
 const useForm = Form.useForm;
 
 export default defineComponent({
@@ -115,8 +116,7 @@ export default defineComponent({
   components: {
     FileTextOutlined,
     InboxOutlined,
-
-    "a-modal": Modal,
+    BlModal,
     "a-form": Form,
     "a-form-item": FormItem,
     "a-input": Input,

package/src/components/AttachmentInfo/modules/MultipleAddAttachments.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-modal
+  <bl-modal
     :width="650"
     :visible="visible"
     :title="t('modules.MultipleAddAttachments.414571-0')"
@@ -63,7 +63,7 @@
       :list="imgList"
       @close="imgVisible = false"
     />
-  </a-modal>
+  </bl-modal>
 </template>
 
 <script>
@@ -86,14 +86,14 @@ import {
 import PreviewImg from "../../PreviewImg/index.vue";
 import {t, loadLanguageAsync} from "../../../locale";
 import utils from "../../../common/utils/util";
+import BlModal from "../../BlModal/index.vue";
 
 export default {
   components: {
     EyeOutlined,
     DeleteOutlined,
     PreviewImg,
-
-    "a-modal": Modal,
+    BlModal,
     "a-table": Table,
     "a-input": Input,
     "a-progress": Progress,

package/src/components/BlDrawer/index.vue

@@ -0,0 +1,13 @@
+<script>
+import { h, defineComponent } from 'vue';
+import { Drawer } from 'ant-design-vue';
+import { getGlobalContainer } from '../../common/utils/popupContainer';
+
+export default defineComponent({
+  name: 'BlDrawer',
+  inheritAttrs: false,
+  setup(_, { attrs, slots }) {
+    return () => h(Drawer, { getContainer: getGlobalContainer, ...attrs }, slots);
+  },
+});
+</script>

package/src/components/BlMobileAnnexUpload/index.vue

@@ -12,7 +12,7 @@
 		<QrcodeModal :visible="qrcodeModalVisible" :isCopy="true" :download="false" :urls="annexUploadPageUrl" @cancel="handleCancelQrcode" @request="handleRequest" :zIndex="visible ? 1001 : 1000" :title="t('BlMobileAnnexUpload.index-1')"></QrcodeModal>
 
 		<!-- 批量上传弹框 -->
-		<a-modal
+		<bl-modal
 			:width="650"
 			:visible="visible"
 			:cancel-text="t('common.button.cancel')"
@@ -43,7 +43,7 @@
 				</template>
 			</a-table>
 
-		</a-modal>
+		</bl-modal>
     
     <!-- 预览图片 -->
     <div style="display: none">
@@ -65,11 +65,12 @@ import { ExpandOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue
 import QrcodeModal from "../QrcodeModal/index.vue";
 import { t, loadLanguageAsync } from "../../locale";
 import utils from "../../common/utils/util";
+import BlModal from "../BlModal/index.vue";
 export default defineComponent({
 	name: "BlMobileAnnexUpload",
 	components: {
 		"a-button": Button,
-		"a-modal": Modal,
+		BlModal,
 		"a-table": Table,
 		"a-space": Space,
 		"a-input": Input,

package/src/components/BlModal/index.vue

@@ -0,0 +1,13 @@
+<script>
+import { h, defineComponent } from 'vue';
+import { Modal } from 'ant-design-vue';
+import { getGlobalContainer } from '../../common/utils/popupContainer';
+
+export default defineComponent({
+  name: 'BlModal',
+  inheritAttrs: false,
+  setup(_, { attrs, slots }) {
+    return () => h(Modal, { getContainer: getGlobalContainer, ...attrs }, slots);
+  },
+});
+</script>

package/src/components/BlTextTranslationModal/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<a-modal
+	<bl-modal
 		:visible="visible"
 		:title="titleProps"
 		:width="800"
@@ -32,7 +32,7 @@
 				</a-form-item>
 			</div>
 		</a-form>
-	</a-modal>
+	</bl-modal>
 </template>
 
 <script>
@@ -40,10 +40,11 @@ import { defineComponent, ref, watch, computed } from "vue";
 import { Modal, Form, FormItem, Input, Textarea } from "ant-design-vue";
 import {t, loadLanguageAsync} from "../../locale";
 import utils from "../../common/utils/util";
+import BlModal from "../BlModal/index.vue";
 const useForm = Form.useForm;
 export default defineComponent({
 	name: "BlTextTranslationModal",
-	components: { "a-modal": Modal, "a-form": Form, "a-form-item": FormItem, "a-input": Input, "a-textarea": Textarea },
+	components: { BlModal, "a-form": Form, "a-form-item": FormItem, "a-input": Input, "a-textarea": Textarea },
 	props: {
     // 是否显示
 		visible: {

package/src/components/BlTinymceEditor/index.vue

@@ -355,8 +355,10 @@ export default defineComponent({
 :deep(.tox .tox-promotion-link) {
 	display: none !important;
 }
+</style>
 
-:deep(.tox.tox-tinymce-aux) {
-	z-index: 999 !important;
+<style lang="less">
+.tox.tox-tinymce-aux {
+	z-index: 1001 !important;
 }
 </style>

package/src/components/ChooseHousingModal/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-modal
+  <bl-modal
     :visible="visible"
     :title="titleProps"
     :width="600"
@@ -51,11 +51,11 @@
       @getResult="getResult"
       @handleResult="handleResult"
     />
-  </a-modal>
+  </bl-modal>
 </template>
 
 <script>
-import { cloneDeep } from "lodash";
+import { cloneDeep } from "lodash";
 import {
   defineComponent, reactive, watch, toRefs, computed,
 } from "vue";
@@ -63,11 +63,12 @@ import {Modal, message} from "ant-design-vue";
 import ChooseHousingResources from "../ChooseHousingResources/index.vue";
 import {t, loadLanguageAsync} from "../../locale";
 import utils from "../../common/utils/util";
+import BlModal from "../BlModal/index.vue";
 
 export default defineComponent({
   name: "ChooseHousingModal",
   components: {
-    "a-modal": Modal,
+    BlModal,
     ChooseHousingResources,
   },
   props: {

package/src/components/ChooseOrgMember/index.vue

@@ -2,7 +2,7 @@
  * 选择成员
 -->
 <template>
-  <Modal
+  <bl-modal
     :visible="visible"
     :title="title"
     @ok="handleOk"
@@ -12,7 +12,6 @@
     class="member-modal"
     destroyOnClose
     :zIndex="zIndex"
-    :getContainer="getPopupContainer"
   >
     <Row class="card">
       <Col :span="12" class="left">
@@ -162,7 +161,7 @@
         </div>
       </Col>
     </Row>
-  </Modal>
+  </bl-modal>
 </template>
 
 <script>
@@ -188,6 +187,8 @@ import {
 } from "ant-design-vue";
 import {t, loadLanguageAsync} from "../../locale";
 import utils from "../../common/utils/util";
+import { getGlobalContainer } from "../../common/utils/popupContainer";
+import BlModal from "../BlModal/index.vue";
 
 export default defineComponent({
   name: "ChooseOrgMember",
@@ -288,7 +289,7 @@ export default defineComponent({
     PartitionOutlined,
     ApartmentOutlined,
     CloseCircleOutlined,
-    Modal,
+    BlModal,
     Row,
     Col,
     Button,
@@ -450,11 +451,7 @@ export default defineComponent({
     };
 
     const getPopupContainer = (triggerNode) => {
-      return (
-        triggerNode?.parentElement ||
-        window?.rawDocument?.body ||
-        document?.body
-      );
+      return triggerNode?.parentElement || getGlobalContainer();
     };
 
     const hasData = computed(() => {

package/src/components/ColumnSetting/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-drawer
+  <bl-drawer
     :title="t('ColumnSetting.index.391089-0')"
     :visible="visible"
     :destroyOnClose="true"
@@ -83,7 +83,7 @@
         <a-button type="primary" :loading="loading" @click.stop="onSubmit()">{{t('common.button.save')}}</a-button>
       </div>
     </div>
-  </a-drawer>
+  </bl-drawer>
 </template>
 
 <script>
@@ -98,13 +98,14 @@ import {
 import {t, loadLanguageAsync} from "../../locale";
 import utils from "../../common/utils/util";
 import TextTip from "../TextTip/index.vue";
+import BlDrawer from "../BlDrawer/index.vue";
 
 export default defineComponent({
   name: "ColumnSetting",
   components: {
     draggable,
     HolderOutlined,
-    "a-drawer": Drawer,
+    BlDrawer,
     "a-space": Space,
     "a-button": Button,
     "a-input-number": InputNumber,

package/src/components/CustomImport/components/ImportResult.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-modal
+  <bl-modal
     :visible="visible"
     @cancel="cancelBtn"
     :title="t('components.ImportResult.699608-0')"
@@ -23,7 +23,7 @@
         >{{ t('components.ImportResult.699608-5') }}</a-button>
       </template>
     </a-result>
-  </a-modal>
+  </bl-modal>
 </template>
 
 <script>
@@ -35,10 +35,12 @@ import {
 import { Result } from "ant-design-vue";
 import {loadLanguageAsync, t} from "../../../locale";
 import utils from "../../../common/utils/util";
+import BlModal from "../../BlModal/index.vue";
 export default defineComponent({
   name: "ImportResult",
   components: {
     "a-result": Result,
+    BlModal,
   },
   props: {
     visible: {