(ERP系统查看DWG)MxCAD APP调用内部弹框的方法

2025-03-08 229

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

云原生网关 MSE Higress，422元/月

可观测监控 Prometheus 版，每月50GB免费额度

Serverless 应用引擎免费试用套餐包，4320000 CU，有效期3个月

简介： MxCAD APP 二次开发提供了调用项目内部弹框的接口，以保持样式统一。用户需创建 `test_dialog` 文件夹并依次创建 `dialog.ts`、`dialog.vue` 和 `index.ts` 文件来注册、构建和渲染弹框。通过 `useDialogIsShow` 钩子函数控制弹框显示，并可在方法中直接调用 `dialog.showDialog()` 来控制弹框显隐。此外，还支持监听确认或取消事件获取数据，以及通过配置 `vite.config.ts` 解决样式冲突问题。最终在 `src/index.ts` 中引入相关文件即可实现弹框功能。

前言

在 MxCAD APP 二次开发的过程中，为了沿用项目内部的样式保持项目的统一性，我们提供了调用项目内部弹框的接口。用户可根据自己的具体需求按照下面文档介绍的步骤来操作调用项目内部的弹框。

基础调用

1.首先创建一个test_dialog文件夹用于存储弹框相关的文件，如下图：

2.在文件夹下创建 dialog.ts 文件用于注册弹框，代码如下：

// dialog.isShow.value 默认是false
// 如果没有传入命令，则只能通过修改dialog.isShow.value或者调用showDialog来显示弹框
// 如果传入了命令，则调用命令会自动显示或关闭弹框
// 如果传入了第三个参数，则会自定义这个命令的实现
export const dialog = MxPluginContext.useDialogIsShow(
    false,
    "Mx_test_dialog",
    () => {
   
        dialog.showDialog(!dialog.isShow.value);
    }
);

3.在文件夹下创建 dialog.vue 文件用于构建弹框ui界面，代码如下：

<script setup lang="ts">
import {
    ref } from "vue";
import {
    VBtn } from "vuetify/components";
import {
    dialog } from "./dialog";
const {
    MxDialog } = MxPluginContext.components;
const footerBtnList = [
  {
   
    name: "取消",
    fun: () => {
   
      // 弹框点击了取消按钮，传入数据
      dialog.cancel({
    data: 1 });
      // 需要先发送数据再关闭弹框
      dialog.showDialog(false);
    },
  },
  {
   
    name: "确定",
    fun: () => {
   
      // 弹框点击了确认按钮，传入数据
      dialog.confirm({
    data: 2 });
      dialog.showDialog(false);
    },
    primary: true,
  },
];
const {
    isShow, onReveal } = dialog;
const title = ref("测试标题");
onReveal((data) => {
   
  // 接收到显示的消息
  if (data.title) title.value = data.title;
});
</script>
<template>
  <MxDialog
    :title="title"
    v-model="isShow"
    max-width="300"
    :footerBtnList="footerBtnList"
  >
    <h4>这是一个测试弹框！</h4>
    <VBtn>测试按钮</VBtn>
  </MxDialog>
</template>

4.在文件夹下创建 index.ts 文件在界面创建弹框，代码如下：

import {
    createVNode, render } from "vue";
import dialog from "./dialog.vue";
const el = document.createElement("div");
document.body.appendChild(el);
const vnode = createVNode(dialog);
const app = MxPluginContext.getApp();
vnode.appContext = app._context;
render(vnode, el);

5.最终在MxCAD项目中的src/index.ts文件中引入test_dialog/index.ts文件，代码如下：

import './test_dialog/index'

如下图：

6.启动MxCAD项目，执行上面注册的 'Mx_test_dialog' 命令就能显示弹框了，运行效果如下：

高级调用

按照上述步骤操作，用户可直接通过命令行调用来控制项目弹框的显隐，但由于在实际开发过程中会遇到不能直接通过调用命令来控制弹框显隐藏，而是通过直接调用代码。因此，我们提供了useDialogIsShow属性，用户可通过直接控制useDialogIsShow来控制弹框。操作步骤如下：
1.在dialog.ts文件下调用 useDialogIsShow 钩子函数通过类型参数化的方式定义对话框显示、确认和取消时需要处理的数据类型，代码如下：

   // 弹框要显示的数据
   type RevealData = {
    title: string };
   // 弹框确认要传入的数据
   type ConfirmData = {
    data: number };
   // 弹框取消要传入的数据
   type CancelData = {
    data: number };
   export const dialog = MxPluginContext.useDialogIsShow<
     RevealData,
     ConfirmData,
     CancelData
   >();

2.在dialog.vue文件下正常编写弹框的vue组件，代码如下：

   <script setup lang="ts">
   import {
    ref } from "vue";
   import {
    VBtn } from "vuetify/components";
   import {
    dialog } from "./dialog";
   const {
    MxDialog } = MxPluginContext.components;
   const footerBtnList = [
     {
   
       name: "取消",
       fun: () => {
   
         // 弹框点击了取消按钮，传入数据
         dialog.cancel({
    data: 1 });
         // 需要先发送数据再关闭弹框
         dialog.showDialog(false);
       },
     },
     {
   
       name: "确定",
       fun: () => {
   
         // 弹框点击了确认按钮，传入数据
         dialog.confirm({
    data: 2 });
         dialog.showDialog(false);
       },
       primary: true,
     },
   ];
   const {
    isShow, onReveal } = dialog;
   const title = ref("测试标题");
   onReveal((data) => {
   
     // 接收到显示的消息
     if (data.title) title.value = data.title;
   });
   </script>
   <template>
     <MxDialog
       :title="title"
       v-model="isShow"
       max-width="300"
       :footerBtnList="footerBtnList"
     >
     <h4>这是一个测试弹框！</h4>
       <VBtn>这是一个测试按钮！</VBtn>
     </MxDialog>
   </template>

3.在index.ts文件下注册渲染弹框，代码如下：

  import DialogComponent from "./dialog.vue";
   import {
    createVNode, render } from "vue";
   const el = document.createElement("div");
   document.body.appendChild(el);
   const vnode = createVNode(DialogComponent);
   const app = MxPluginContext.getApp();
   vnode.appContext = app._context;
   render(vnode, el);

4.同上述基础用法一样，在MxCAD项目中的src/index.ts文件中引入test_dialog/index.ts文件。

5.最后在自己的方法中调用dialog就可以直接控制弹框了，代码如下：

   function test() {
   
       /**
        * 这里是弹出弹框前需要执行的代码
        */
       dialog
           .showDialog(true, {
    title: "测试标题显示" })
           .then(({
    data, isCanceled }) => {
   
               // 需要等待cancel或者confirm调用才会触发
               if (isCanceled) {
   
                   // 调用dialog.cancel({ data: 1 })取消
                   console.log("弹框取消的数据", data.data === 1);
               } else {
   
                   // 调用dialog.confirm({ data: 2 })取消
                   console.log("弹框确认的数据", data.data === 2);
               }
           });
   }

   // 注册上面的方法
   MxFun.addCommand("Mx_testFun", test);

6.运行效果如下：

扩展

1.直接调用 dialog.reveal() 方法调用弹框，代码如下：

   import {
    dialog } from "./dialog";
      dialog.reveal({
    title: "reveal" }).then(({
    data, isCanceled }) => {
   
          console.log('确认参数', data);
          console.log('是否取消', isCanceled)
      });

运行效果如下：

2.通过监听确认或者取消事件得到数据，代码如下：

// 监听确认事件
  dialog.onConfirm((data) => {
   
  console.log('确定', data)
  });
  // 监听取消事件
  dialog.onCancel((data) => {
   
  console.log('取消', data)
  });

样式调整

用户在调用 MxCAD APP 内部弹框的时候，在弹框内引入 vuetify/components 内部组件的时候，可能会出现样式错乱或层叠的情况，这是由于 vuetify 自带的组件样式，与 MxCAD APP 内部封装好的样式发生了冲突。我们只需要在vite的配置文件中，设置调用MxCAD APP内部样式即可，具体操作如下所示：

1，引入vuetify/components 内部组件，MxCAD APP发生样式错乱