cloud-web-corejs 1.1.0-dev.53 → 1.1.0-dev.55

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.1.0-dev.53",
+  "version": "1.1.0-dev.55",
   "scripts": {
     "build:ace-resources": "node build/build-ace-resources.js",
     "build:tinymce-resources": "node build/build-tinymce-resources.js",
@@ -212,9 +212,11 @@
     "src/permission.js",
     "src/index.js",
     "src/index.next.js",
+    "src/index.sync.js",
     "src/boot-assets.legacy.js",
     "src/boot-assets.next.js",
     "src/app-bootstrap.js",
+    "src/app-bootstrap.sync.js",
     "src/public-path.js",
     "src/microRouter",
     "src/App.vue"

package/src/app-bootstrap.sync.js

@@ -0,0 +1,502 @@
+// 同步启动：与 app-bootstrap.js 相同，但 excelImport / VabUpload / jsonImport / langImport 不走 lazyPrototypePlugin。
+// 由 index.sync.js 接入。
+import Vue from "vue";
+import Cookies from "js-cookie";
+import Element from "element-ui";
+import App from "@base/App";
+import store from "@base/store";
+import router, { resetRouter } from "@base/router";
+import settings from "@/settings";
+import { setToken as setAuthToken } from "@base/utils/auth";
+import { loadViewComponentAsync } from "@base/utils/resolveViewComponent";
+import { installRuntimeRecovery } from "@base/utils/runtimeRecovery";
+
+import "@base/permission"; // permission control
+
+import * as filters from "@base/filters"; // global filters
+
+// main.js 文件添加以下代码
+
+import BaseKeepAlive from "@base/utils/keepAlive.js";
+
+Vue.component("BaseKeepAlive", BaseKeepAlive);
+
+import VXETable from "vxe-table";
+import "vxe-table/lib/style.css";
+import "@base/components/table/style.scss";
+import "@base/components/fileLibrary/style.scss";
+import "@base/components/VabUpload/style.scss";
+import "@base/components/xform/styles/table-layout.scss";
+import "@base/components/xform/styles/designer.scss";
+import "@base/components/xform/styles/census.scss";
+import "@base/components/xform/styles/titles.scss";
+import "@base/components/xform/styles/containers.scss";
+import "@base/components/xform/styles/skins.scss";
+import "@base/components/xform/styles/detail-temp.scss";
+import "@base/components/xform/styles/h5-designer.scss";
+import "@base/components/xform/styles/h5-runtime.scss";
+import "@base/components/hiprint/style.scss";
+import "@base/components/wf/style.scss";
+
+// 区域选取/复制粘贴：自研实现，通过 window.VXETableMixin 挂载，
+// 必须在下面的 Vue.use(VXETable) 之前求值（core 在 install 时读取一次并 delete）
+import "@base/components/table/plugins/cell-area/index.js";
+import "@base/components/table/plugins/cell-area/index.scss";
+
+// 引入扩展插件（官方付费插件，已由上面的自研 cell-area 替代，保留仅作回退参考）
+// import "@base/components/table/plugins/extend-cell-area/vxe-table-extend-cell-area.es6.min.js";
+// import "@base/components/table/plugins/extend-cell-area/vxe-table-extend-cell-area.min.css";
+
+/* // 设置授权信息
+VXETable.setup({
+  // showAuthLog: true, // 是否在控制台显示授权信息，专业版支持关闭
+  // authId: 'gbeumewkoyt2rhf9', // 获取授权后在官网登录后进入“用户中心”查看
+  authId: 'gbeumewkoyt2rhft', // 获取授权后在官网登录后进入“用户中心”查看
+  // onAuth (e) {
+  //   // 打印授权状态
+  //   console.log(e)
+  // }
+}) */
+
+import Vab from "@base/utils/vab";
+import createCodeEditorAsyncComponent from "@base/components/code-editor/async";
+
+Vue.use(Vab);
+
+// appCode 兜底派生：子应用（拥有自己的子命名空间，即 WEB_PREFIX !== MAIN_WEB_PREFIX）
+// 若未在自身 settings.js 里维护 appCode，则从 WEB_PREFIX 去前导斜杠派生（/mkweb → mkweb），
+// 免得每个子应用再手填一处、也不会写错。主应用/独立主站两前缀相同 → 保持空。
+// 优先级：mount 里的 props.appCode > settings 显式值 > 此派生。window.WEB_PREFIX /
+// MAIN_WEB_PREFIX 已由上面 vab 的 Object.assign(window, prefixConfig) 设好。
+if (!settings.appCode) {
+  const webPrefix = window.WEB_PREFIX || "";
+  const mainWebPrefix = window.MAIN_WEB_PREFIX || "";
+  if (webPrefix && webPrefix !== mainWebPrefix) {
+    settings.appCode = webPrefix.replace(/^\/+/, "");
+  }
+}
+
+Vue.use(VXETable);
+
+/* import tablePluns from "@/mixins/table/index.js"
+VXETable.use(tablePluns) */
+
+import "@base/components/table/index.js";
+
+import drag from "@base/directive/el-drag-dialog/index.js";
+
+Vue.use(drag.install);
+
+import elDialogCenter from "@base/directive/el-dialog-center/index.js";
+
+Vue.use(elDialogCenter.install);
+
+import ErroreBox from "@base/components/errorMsg/index.js";
+
+Vue.use(ErroreBox);
+
+import ExcelExport from "@base/components/excelExport/index.js";
+
+Vue.use(ExcelExport);
+
+// 同步入口：不走 lazyPrototypePlugin，启动时直接注册
+import ExcelImport from "@base/components/excelImport/index.js";
+
+Vue.use(ExcelImport);
+
+import ConfirmDialog from "@base/components/confirmDialog/index.js";
+
+Vue.use(ConfirmDialog);
+
+import baseAlert from "@base/components/baseAlert/index.js";
+
+Vue.use(baseAlert);
+
+import FormDialog from "@base/components/formDialog/index.js";
+
+Vue.use(FormDialog);
+
+import FormDrawer from "@base/components/formDrawer/index.js";
+
+Vue.use(FormDrawer);
+
+import permission from "@base/directive/permission";
+
+Vue.use(permission);
+
+import VabUpload from "@base/components/VabUpload/index.js";
+
+Vue.use(VabUpload);
+
+Vue.component("baseUpload", () =>
+  import("@base/components/VabUpload/view.vue")
+);
+
+import baseAttachment from "@base/components/baseAttachment/install";
+
+Vue.use(baseAttachment);
+Vue.component("attachmentShowList", () =>
+  import("@base/components/baseAttachment/showList")
+);
+
+import "@base/core-resources/js/base/common.js";
+
+import vxeFilter from "@base/components/table/vxeFilter/index.js";
+
+Vue.use(vxeFilter);
+
+// 首屏优化：低频/非首屏组件转懒注册（名字与组件内 name 一致，写死字符串）
+Vue.component("base-table-export", () =>
+  import("@base/components/excelExport/button.vue")
+);
+
+/* Vue.component('extendedProperties', () => import('@base/components/extendedProperties/view.vue')); */
+
+import LimitNumber from "@base/directive/LimitNumber/index.js";
+
+Vue.use(LimitNumber);
+
+import baseInputNumber from "@base/components/baseInputNumber/index.vue";
+
+Vue.component(baseInputNumber.name, baseInputNumber);
+
+import elReadonly from "@base/directive/el-readonly/index.js";
+
+Vue.use(elReadonly);
+
+import appendToBody from "@base/directive/append-to-body/index.js";
+
+Vue.use(appendToBody.install);
+
+/*import cnPrint from "@base/components/cnPrint/index.js"
+
+Vue.use(cnPrint);*/
+
+Vue.component("oplogTable", () =>
+  import("@base/components/oplogTable/index.vue")
+);
+
+Vue.component("baseInputBatch", () =>
+  import("@base/components/baseInputBatch/index.vue")
+);
+
+Vue.component("baseArea", () => import("@base/components/baseArea/index.vue"));
+
+Vue.component("baseInputExport", () =>
+  import("@base/components/baseInputExport/index.vue")
+);
+
+Vue.component("advancedSearchDialog", () =>
+  import("@base/components/advancedSearchDialog/index.vue")
+);
+
+// baseTabs/baseTabPane 必须同步注册，不可懒注册：
+// xform 详情容器(detail-item)把所有 detail-pane 及其内部字段组件放在 <baseTabs> 的默认插槽里。
+// 异步组件未解析时 Vue 只渲染占位注释节点，插槽内的组件不会被实例化，
+// 于是 detail-item 的 mounted 早于内部字段组件的 created(registerToRefList)执行，
+// 模板脚本 onMounted 里的 getWidgetRef('xxx') 首次进入必然拿到 undefined（二次进入因异步工厂已缓存而正常）。
+import baseTabs from "@base/components/baseTabs/index.vue";
+import baseTabPane from "@base/components/baseTabs/baseTabPane.vue";
+
+Vue.component(baseTabs.name, baseTabs);
+Vue.component(baseTabPane.name, baseTabPane);
+
+import vb_tabs from "@base/components/vb-tabs/index.vue";
+import vb_tab_pane from "@base/components/vb-tabs/tab-pane.vue";
+import xTabs from "@base/components/vb-tabs/x-tabs.vue";
+
+Vue.component(vb_tabs.name, vb_tabs);
+Vue.component(vb_tab_pane.name, vb_tab_pane);
+Vue.component(xTabs.name, xTabs);
+
+Vue.component("status-tag", () =>
+  import("@base/components/statusTag/index.vue")
+);
+
+Vue.component("CodeEditor", createCodeEditorAsyncComponent);
+
+Vue.component("scriptDescriptionButton", () =>
+  import("@base/components/scriptDescription/button")
+);
+
+Vue.component("scriptTestButton", () =>
+  import("@base/components/scriptTest/button")
+);
+
+Vue.component("BaseTextarea", () =>
+  import("@base/components/base-textarea/index.vue")
+);
+
+import JsonImport from "@base/components/jsonImport/index.js";
+
+Vue.use(JsonImport);
+
+import LangImport from "@base/components/langImport/index.js";
+
+Vue.use(LangImport);
+
+//vform
+// import '@base/components/xform/utils/directive'
+
+import i18n from "@base/lang/index.js";
+
+/**
+ * If you don't want to use mock-server
+ * you want to use MockJs for mock api
+ * you can execute: mockXHR()
+ *
+ * Currently MockJs will be used in the production environment,
+ * please remove it before going online ! ! !
+ */
+if (process.env.NODE_ENV === "production") {
+  /* const { mockXHR } = require('../mock')
+  mockXHR() */
+}
+
+Vue.use(Element, {
+  size: Cookies.get("size") || "medium", // set element-ui default size
+  // locale: enLang // 如果使用中文，无需设置，请删除
+});
+installRuntimeRecovery();
+
+// register global utility filters
+Object.keys(filters).forEach((key) => {
+  Vue.filter(key, filters[key]);
+});
+
+// 详情承载宿主：弹框 remote 分支用它 loadMicroApp 装载归属子应用渲染私有详情页
+Vue.component("micro-view-host", () =>
+  import("@base/components/micro-view-host/index.vue")
+);
+
+Vue.config.productionTip = false;
+
+let instance = null;
+
+function render(props = {}) {
+  const { container } = props;
+  instance = new Vue({
+    router,
+    store,
+    i18n,
+    render: (h) => h(App),
+  });
+  // Synchronous child renders may call global helpers such as $t2.
+  // Publish the initialized root before mounting any child component.
+  window.$vueRoot = instance;
+  instance.$mount(container ? container.querySelector("#app") : "#app");
+}
+
+/**
+ * 详情承载入口（qiankun 详情承载协议 §5.5）。
+ * 主应用/渲染方的 micro-view-host 用 loadMicroApp 装载本应用并置 props.microDetailHost=true，
+ * 要求只渲染 targetPath 指向的详情页、把详情页的刷新/关闭/回调桥接回主应用，不出整站壳。
+ * 契约字段见 docs/qiankun详情承载子应用对接清单.md。
+ *
+ * ⚠ parentVue shim 的委托语义需真机联调打磨：详情页 getTarget(this) 命中 shim 后会用到
+ *   $http/$message/$baseConfirm/$attrs 等——这些经原型委托到宿主根实例（全局插件已装齐），
+ *   仅 $baseReload / _handleCallback 覆盖为回主应用的动作。个别详情页若有更深的 $parent 依赖，
+ *   按对接清单 §5.6 做最小改造。
+ */
+async function mountDetailHost(props = {}) {
+  if (props.appCode) settings.appCode = props.appCode;
+  if (props.token) {
+    setAuthToken(props.token);
+    store.commit("user/SET_TOKEN", props.token);
+  }
+  if (props.lang) i18n.locale = props.lang;
+
+  const appCode = props.appCode || settings.appCode;
+  const resolved = await loadViewComponentAsync(props.targetPath, { appCode });
+  const target = resolved.component;
+  const bizParams = props.bizParams || {};
+  const viewMeta = props.viewMeta || {};
+
+  // shim 需先于 render 存在（作为 parentVue prop 传入），其 Vue 能力在挂载后经原型委托到根实例
+  const shim = {
+    $baseReload: () => props.onReload && props.onReload(),
+    _handleCallback: (flag) => props.onHandleCallback && props.onHandleCallback(flag),
+  };
+
+  const { container } = props;
+  const mountEl = container ? container.querySelector("#app") : "#app";
+  instance = new Vue({
+    store,
+    i18n,
+    render(h) {
+      if (!target) {
+        return h(
+          "div",
+          { staticClass: "micro-detail-host-missing" },
+          "详情页组件未找到：" + (props.targetPath || "")
+        );
+      }
+      return h(target, {
+        props: Object.assign({}, bizParams, viewMeta, {
+          parentVue: shim,
+          _handleCallback: (flag) =>
+            props.onHandleCallback && props.onHandleCallback(flag),
+          outParam: props.initialOutParam,
+        }),
+        on: {
+          reload: () => props.onReload && props.onReload(),
+          close: () => props.onClose && props.onClose(),
+          "update:outParam": (v) =>
+            props.onUpdateOutParam && props.onUpdateOutParam(v),
+        },
+      });
+    },
+  });
+  window.$vueRoot = instance;
+  instance.$mount(mountEl);
+  // #4 listeners 透传：详情页里父级 v-on="listeners" 那批是详情页直接 this.$emit 的，
+  // 拦截根子组件的 $emit，任意事件都转发给主应用的 onEmit（按名字派回原 option.on）。
+  const child = instance.$children && instance.$children[0];
+  if (child && typeof child.$emit === "function") {
+    const rawEmit = child.$emit.bind(child);
+    child.$emit = (name, ...args) => {
+      if (typeof props.onEmit === "function") props.onEmit(name, ...args);
+      return rawEmit(name, ...args);
+    };
+  }
+  // 挂载后把 shim 的原型指向根实例：$http/$message/$baseConfirm 等委托过去，
+  // 而 shim 自有的 $baseReload/_handleCallback 覆盖生效（详情页动作时才会调用）
+  Object.setPrototypeOf(shim, instance);
+  window.$vueRoot = instance;
+}
+
+if (!window.__POWERED_BY_QIANKUN__) {
+  // 独立运行 / 主应用形态：行为与拆分前一致
+  render();
+}
+
+/**
+ * qiankun 子应用生命周期。
+ * 引包子应用入口 re-export 即可：export * from "cloud-web-corejs/src/index";
+ * 主子通信协议见 docs/qiankun微前端改造-实现方案.md 3.3。
+ */
+export async function bootstrap() {}
+
+export async function mount(props = {}) {
+  if (props.microDetailHost) {
+    // 详情承载模式（micro-view-host 装载）：不走整站壳/路由/菜单，
+    // 只在容器里渲染 props.targetPath 指向的本应用组件。见对接清单文档。
+    return mountDetailHost(props);
+  }
+  if (props.appCode) {
+    // 主应用可经 props 覆盖，子应用也可在自身 settings.js 里声明
+    settings.appCode = props.appCode;
+  }
+  if (props.token) {
+    // token 存 sessionStorage，按 origin 隔离——跨域/跨端口主应用的登录态子应用天然拿不到，
+    // 主应用显式下发 token 即可免登（写入自身登录态后守卫按已登录走 getInfo2）
+    setAuthToken(props.token);
+    store.commit("user/SET_TOKEN", props.token);
+  }
+  store.commit("micro/SET_MICRO_CONTEXT", {
+    appCode: props.appCode || settings.appCode,
+    // 非数组（null/未传）= 自治嵌入模式：子应用自拉菜单、保留自身壳（micro store 据此置 selfManaged）
+    menus: Array.isArray(props.menus) ? props.menus : null,
+    mainAdapter: props.mainAdapter || null,
+    // 主应用经本地调试覆盖装载：允许 URL 直达未配菜单的页面
+    debug: !!props.microDebug,
+  });
+  // 再次挂载时 unmount 已重置路由，而 roles 仍在会使守卫跳过路由生成，这里主动补一次
+  if (store.getters.roles && store.getters.roles.length > 0) {
+    if (store.state.micro.selfManaged) {
+      await store.dispatch("permission/generateRoutes2", {
+        flag: store.state.user.userFlag,
+      });
+    } else {
+      await store.dispatch(
+        "permission/generateRoutesFromProps",
+        props.menus || []
+      );
+    }
+  }
+  render(props);
+}
+
+/**
+ * 保活协议（主应用 loadMicroApp 模式）：
+ * update({ microActive: false }) —— 容器被隐藏：暂停路由监听（守卫 next(false) +
+ *   ensureURL 置空，防止对主应用的 URL 变化做出反应、回写 URL 互相打架）；
+ * update({ microActive: true })  —— 容器重新显示：恢复监听并把当前 hash 同步进路由
+ *   （含主应用在隐藏期间切到本应用另一菜单的深导航场景）。
+ */
+let pausedEnsureURL = null;
+
+function pauseSubRouter() {
+  if (store.state.micro.routerPaused) return;
+  store.commit("micro/SET_ROUTER_PAUSED", true);
+  const history = router.history;
+  if (history && typeof history.ensureURL === "function") {
+    pausedEnsureURL = history.ensureURL;
+    history.ensureURL = function () {};
+  }
+}
+
+function resumeSubRouter() {
+  if (store.state.micro.routerPaused) {
+    store.commit("micro/SET_ROUTER_PAUSED", false);
+    if (pausedEnsureURL) {
+      router.history.ensureURL = pausedEnsureURL;
+      pausedEnsureURL = null;
+    }
+  }
+  syncSubRouter();
+}
+
+function syncSubRouter() {
+  const current = window.location.hash.replace(/^#/, "") || "/";
+  if (router.currentRoute.fullPath !== current) {
+    // vue-router 3.0.2 的 push 不返回 Promise（3.1.0 才加），直接 .catch 会读到
+    // undefined 抛错，且此调用发生在 qiankun update 生命周期内——异常会让 parcel 直接
+    // died、后续所有 update（含页签刷新转发）失效。仅当 push 返回 Promise 时才吞异常。
+    const nav = router.push(current);
+    if (nav && typeof nav.catch === "function") {
+      nav.catch(() => {});
+    }
+  }
+}
+
+/**
+ * 主应用页签"刷新"转发过来时在子应用内部重建当前页组件。
+ * 不能套用主应用那招（delCachedView + 跳 /redirect）：子应用与主应用共用同一个
+ * 浏览器 hash，跳 /redirect 会被主应用 afterEach 判成"离开子应用路由"，
+ * 容器随即隐藏并暂停子应用路由，重建被掐断——表现就是点刷新没反应。
+ * 改为自增序号通知 AppMain 原地销毁重建，全程不碰 URL。
+ */
+function refreshCurrentView() {
+  store.commit("micro/BUMP_RELOAD_SEQ");
+}
+
+export async function update(props = {}) {
+  if (props.microActive === false) {
+    pauseSubRouter();
+  } else if (props.microActive === true) {
+    resumeSubRouter();
+  }
+  if (props.microRefresh) {
+    refreshCurrentView();
+  }
+}
+
+export async function unmount() {
+  if (store.state.micro.routerPaused && pausedEnsureURL) {
+    router.history.ensureURL = pausedEnsureURL;
+    pausedEnsureURL = null;
+  }
+  if (instance) {
+    instance.$destroy();
+    if (instance.$el) {
+      instance.$el.innerHTML = "";
+    }
+    instance = null;
+  }
+  if (window.$vueRoot) {
+    window.$vueRoot = null;
+  }
+  store.commit("micro/CLEAR_MICRO_CONTEXT");
+  resetRouter();
+}

package/src/components/xform/form-designer/designer.js

@@ -57,6 +57,7 @@ let chartContainers = [],
         },
         scriptList: [],
         formType: 0,
+        dialogScope: null,
         getConfig: {
           accessType: "1",
           accessUrl: null,

package/src/components/xform/form-designer/form-widget/dialog/formDialog.vue

@@ -1,8 +1,14 @@
 <template>
   <el-dialog
+    ref="pageDialog"
     :visible.sync="showDialog"
     v-el-drag-dialog
-    v-el-dialog-center
+    v-el-dialog-center="!isPageScope"
+    :class="{
+      'xform-page-dialog-wrapper': isPageScope,
+      'xform-page-form-dialog-wrapper': isPageScope,
+      'xform-page-dialog-wrapper--top': pageDialogHasTop,
+    }"
     v-bind="dialogConfig"
     @close="close"
   >
@@ -13,7 +19,11 @@
       v-bind="bodyConfig"
       v-if="listHost"
     >
-      <list-view-host :formCode="listFormCode" :param="dialogParam" />
+      <list-view-host
+        :formCode="listFormCode"
+        :param="dialogParam"
+        :dialogScope="option.dialogScope"
+      />
     </div>
     <div class="cont designer-view" v-bind="bodyConfig" id="containt" v-else>
       <v-form-render
@@ -30,6 +40,7 @@
         @reload="reload"
         v-bind="formConfig"
         :param="dialogParam"
+        :dialogScope="option.dialogScope"
         :dataTableOption="dialogDataTableOption"
         class="data-table_height"
         @hook:mounted="handleFormMounted"
@@ -75,6 +86,10 @@
 
 <script>
 import VFormRender from "../../../../../components/xform/form-render/index.vue";
+import {
+  pageScopedDialogMixin,
+  pageDialogTop,
+} from "@base/components/xform/form-render/pageDialogScope";
 import {
   resolveActionButtons,
   hasButtonPermission,
@@ -95,7 +110,7 @@ export default {
     visiable: Boolean,
     option: Object,
   },
-  mixins: [],
+  mixins: [pageScopedDialogMixin],
   inject: ["getFormConfig"],
 
   mounted() {},
@@ -171,6 +186,15 @@ export default {
       config = Object.assign({}, config, this.option.dialogConfig, {
         customClass,
       });
+      if (this.isPageScope) {
+        Object.assign(config, {
+          appendToBody: false,
+          modalAppendToBody: false,
+          modal: false,
+          lockScroll: false,
+          top: pageDialogTop(this.option.dialogConfig?.top),
+        });
+      }
       config.title = this.$t1(config.title);
       return config;
     },
@@ -236,7 +260,9 @@ export default {
         method: `post`,
         data: data,
         isLoading: true,
-        loadingTarget: document.body,
+        loadingTarget: this.isPageScope
+          ? this.option.pageDialogHost
+          : document.body,
         modalStrictly: true,
         success: (res) => {
           let formTemplate = res.objx || {};

package/src/components/xform/form-designer/form-widget/dialog/searchFormDialog.vue

@@ -1,8 +1,13 @@
 <template>
   <el-dialog
+    ref="pageDialog"
     :visible.sync="showDialog"
     v-el-drag-dialog
-    v-el-dialog-center
+    v-el-dialog-center="!isPageScope"
+    :class="{
+      'xform-page-dialog-wrapper': isPageScope,
+      'xform-page-dialog-wrapper--top': pageDialogHasTop,
+    }"
     v-bind="dialogConfig"
     @close="close"
   >
@@ -22,6 +27,7 @@
         :dataTableOption="dataTableOption"
         v-bind="formConfig"
         :param="dialogParam"
+        :dialogScope="option.dialogScope"
         class="data-table_height labMargin"
       />
     </div>
@@ -72,12 +78,16 @@
 <script>
 import { selectDialogMixins } from "../../../../../mixins/selectDialog/index.js";
 import VFormRender from "../../../../../components/xform/form-render/index.vue";
+import {
+  pageScopedDialogMixin,
+  pageDialogTop,
+} from "@base/components/xform/form-render/pageDialogScope";
 import { traverseAllWidgetsNew } from "../../../../../components/xform/utils/util";
 
 export default {
   components: { VFormRender },
   props: ["visiable", "multi", "rows", "param", "widget", "option"],
-  mixins: [selectDialogMixins],
+  mixins: [selectDialogMixins, pageScopedDialogMixin],
   inject: ["getFormConfig"],
   mounted() {},
   data() {
@@ -172,6 +182,15 @@ export default {
       config = Object.assign({}, config, this.option.dialogConfig, {
         customClass,
       });
+      if (this.isPageScope) {
+        Object.assign(config, {
+          appendToBody: false,
+          modalAppendToBody: false,
+          modal: false,
+          lockScroll: false,
+          top: pageDialogTop(this.option.dialogConfig?.top),
+        });
+      }
       config.title = this.$t1(config.title);
       return config;
     },
@@ -228,7 +247,9 @@ export default {
         method: `post`,
         data: data,
         isLoading: true,
-        loadingTarget: document.body,
+        loadingTarget: this.isPageScope
+          ? this.option.pageDialogHost
+          : document.body,
         modalStrictly: true,
         success: (res) => {
           let formTemplate = res.objx || {};
@@ -300,7 +321,9 @@ export default {
           tableAlias: this.formCode,
         },
         isLoading: true,
-        loadingTarget: document.body,
+        loadingTarget: this.isPageScope
+          ? this.option.pageDialogHost
+          : document.body,
         modalStrictly: true,
         success: (res) => {
           let formData = res.objx && res.objx.data ? res.objx.data : {};

package/src/components/xform/form-designer/form-widget/field-widget/input-widget.vue

@@ -11,16 +11,23 @@
               :clearable="field.options.clearable"
               :minlength="field.options.minLength" :maxlength="field.options.maxLength"
               :show-word-limit="field.options.showWordLimit"
-              :prefix-icon="field.options.prefixIcon" :suffix-icon="field.options.suffixIcon"
+              :prefix-icon="field.options.prefixIcon" :suffix-icon="clickableSuffix ? '' : field.options.suffixIcon"
               @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent" @input="handleInputCustomEvent"
               @change="handleChangeEvent"
               :style="'width:'+field.options.widgetWidth+' !important;'"
               :class="{'custom-width':field.options.widgetWidth!=null}">
       <el-button slot="append" v-if="field.options.appendButton" :disabled="field.options.disabled || field.options.appendButtonDisabled"
                  :class="field.options.buttonIcon" @click.native="emitAppendButtonClick"></el-button>
+      <i v-if="clickableSuffix" slot="suffix"
+         :class="field.options.suffixIcon"
+         class="el-input__icon suffix-icon-clickable"
+         @click.stop="handleSuffixIconClick"></i>
     </el-input>
     <template v-if="isReadMode">
       <span class="readonly-mode-field pre-wrap" :title="contentForReadMode">{{contentForReadMode}}</span>
+      <i v-if="readModeSuffix" :class="field.options.suffixIcon"
+         class="el-input__icon suffix-icon-clickable"
+         @click.stop="handleSuffixIconClick"></i>
     </template>
   </form-item-wrapper>
 </template>
@@ -82,6 +89,18 @@
       contentForReadMode() {
         return this.fieldModel ? this.fieldModel : ''
       },
+      clickableSuffix() {
+        //尾部图标可点击（编辑态）：开关开启且已配置suffixIcon；开启后suffix-icon改由slot渲染，避免图标重复
+        return !!this.field.options.suffixIconClickable
+          && !!this.field.options.suffixIcon
+          && !this.isReadMode
+      },
+      readModeSuffix() {
+        //只读模式：el-input不渲染，图标单独补充在只读文本旁
+        return !!this.field.options.suffixIconClickable
+          && !!this.field.options.suffixIcon
+          && this.isReadMode
+      },
 
     },
     beforeCreate() {
@@ -108,7 +127,11 @@
     },
 
     methods: {
-
+      handleSuffixIconClick() {
+        if (this.designState) return
+        //复用后置按钮的点击链：onAppendButtonClick脚本 → dispatch('appendButtonClick') → handleCustomClickEvent
+        this.emitAppendButtonClick()
+      }
     }
   }
 </script>
@@ -116,4 +139,7 @@
 <style lang="scss" scoped>
   @import "~@base/styles/theme-variables.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
 
+  .suffix-icon-clickable {
+    cursor: pointer;
+  }
 </style>

package/src/components/xform/form-designer/setting-panel/form-setting.vue

@@ -9,11 +9,24 @@
       @submit.native.prevent
     >
       <el-collapse v-model="formActiveCollapseNames" class="setting-collapse">
-        <el-collapse-item
-          name="1"
-          :title="i18nt('designer.setting.basicSetting')"
-        >
-          <el-form-item class="form-item-label-top" :label="i18nt('数据库表')">
+        <el-collapse-item
+          name="1"
+          :title="i18nt('designer.setting.basicSetting')"
+        >
+          <el-form-item
+            v-if="formConfig.layoutType === 'PC'"
+            class="form-item-label-top"
+            label="业务弹框作用域"
+          >
+            <el-radio-group v-model="dialogScopeValue">
+              <el-radio label="global">全局</el-radio>
+              <el-radio label="page">当前页面</el-radio>
+            </el-radio-group>
+            <div style="line-height: 1.6; color: #909399; font-size: 12px">
+              列表和详情模板需分别设置。当前页面模式只遮挡表单内容，顶部页签和左侧菜单仍可操作。
+            </div>
+          </el-form-item>
+          <el-form-item class="form-item-label-top" :label="i18nt('数据库表')">
             <el-input type="text" v-model="formConfig.entity"></el-input>
           </el-form-item>
           <el-form-item class="form-item-label-top" :label="i18nt('数据保存脚本编码')">
@@ -1273,8 +1286,16 @@ $\{wf.starterName\}提交的$\{pm_product_project.product_code\}$\{pm_product_pr
       this.designer.emitEvent("form-css-updated", deepClone(this.cssClassList));
     });
   },
-  computed: {
-    // formDialog/formDrawer 底部操作按钮配置（存 formConfig，随模板保存）
+  computed: {
+    dialogScopeValue: {
+      get() {
+        return this.formConfig.dialogScope === "page" ? "page" : "global";
+      },
+      set(value) {
+        this.$set(this.formConfig, "dialogScope", value);
+      },
+    },
+    // formDialog/formDrawer 底部操作按钮配置（存 formConfig，随模板保存）
     actionButtons() {
       return this.formConfig.actionButtons || [];
     },

package/src/components/xform/form-designer/setting-panel/property-editor/suffixIconClickable-editor.vue

@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.suffixIconClickable')">
+    <el-switch v-model="optionModel.suffixIconClickable"></el-switch>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "../../../../../components/xform/utils/i18n"
+
+  export default {
+    name: "suffixIconClickable-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

package/src/components/xform/form-designer/setting-panel/propertyRegister.js

@@ -211,6 +211,7 @@ const ADVANCED_PROPERTIES = {
   // 'showWordLimit': 'showWordLimit-editor',
   prefixIcon: "prefixIcon-editor",
   suffixIcon: "suffixIcon-editor",
+  suffixIconClickable: "suffixIconClickable-editor",
   switchWidth: "switchWidth-editor",
   activeText: "activeText-editor",
   inactiveText: "inactiveText-editor",

package/src/components/xform/form-designer/widget-panel/widgetsConfig.js

@@ -1202,6 +1202,7 @@ export const basicFields = [
       showWordLimit: !1,
       prefixIcon: "",
       suffixIcon: "",
+      suffixIconClickable: !1,
       /*appendButton: !1,
       appendButtonDisabled: !1,
       buttonIcon: "el-icon-search",*/

package/src/components/xform/form-render/indexMixin.js

@@ -55,6 +55,7 @@ import html2Canvas from "html2canvas";
 import JsPDF from "jspdf";
 import formulaDialog from "@base/components/xform/form-designer/form-widget/dialog/formulaDialog.vue";
 import baseFormulaDialog from "@base/components/xform/form-designer/form-widget/dialog/baseFormulaDialog.vue";
+import { resolveDialogOption } from "@base/components/xform/form-render/pageDialogScope";
 import QRCode from "qrcode";
 import { openLuckysheetDialog } from "@base/components/luckysheet";
 import {
@@ -168,6 +169,10 @@ modules = {
       type: Boolean,
       default: false,
     },
+    dialogScope: {
+      type: String,
+      default: null,
+    },
   },
   provide() {
     let e = this;
@@ -5042,14 +5047,24 @@ modules = {
       }
     },*/
     openSearchDialog(option) {
-      this.searchDialogOption = option;
+      this.searchDialogOption = resolveDialogOption(
+        option,
+        this.formJsonObj?.formConfig,
+        this.dialogScope,
+        this.$el
+      );
       this.showSearchDialog = true;
     },
     confirmSearchDialog(rows) {
       this.searchDialogOption.confirm && this.searchDialogOption.confirm(rows);
     },
     openFormDialog(option) {
-      this.formDialogOption = option;
+      this.formDialogOption = resolveDialogOption(
+        option,
+        this.formJsonObj?.formConfig,
+        this.dialogScope,
+        this.$el
+      );
       this.showFormDialog = true;
     },
     closeFormDialog() {

package/src/components/xform/form-render/pageDialogScope.js

@@ -0,0 +1,54 @@
+export const PAGE_DIALOG_SCOPE = "page";
+
+// 模板里的 top: "25vh" 是按整个窗口居中。当前页面弹框改由页面内容区 flex 居中，
+// 再套视口 vh 会从内容区顶部再下移一截，弹框就偏下。px 等显式偏移仍保留。
+export function pageDialogTop(top) {
+  const value = top == null ? "" : String(top).trim();
+  if (!value || /vh$/i.test(value)) return "0";
+  return value;
+}
+
+const PAGE_HOST_SELECTOR = "[data-xform-page-dialog-host]";
+
+export function resolveDialogOption(option, formConfig, inheritedScope, element) {
+  const source = option || {};
+  const scope = source.dialogScope ?? formConfig?.dialogScope ?? inheritedScope;
+  if (scope !== PAGE_DIALOG_SCOPE) return source;
+
+  const host = element?.closest?.(PAGE_HOST_SELECTOR);
+  if (!host) {
+    console.warn("xform page dialog host not found; using global dialog");
+    return { ...source, dialogScope: "global" };
+  }
+  return { ...source, dialogScope: PAGE_DIALOG_SCOPE, pageDialogHost: host };
+}
+
+export const pageScopedDialogMixin = {
+  computed: {
+    isPageScope() {
+      return (
+        this.option?.dialogScope === PAGE_DIALOG_SCOPE
+        && !!this.option.pageDialogHost
+      );
+    },
+    pageDialogHasTop() {
+      return this.isPageScope && pageDialogTop(this.option.dialogConfig?.top) !== "0";
+    },
+  },
+  mounted() {
+    if (!this.isPageScope) return;
+    const dialog = this.$refs.pageDialog;
+    const wrapper = dialog?.$el;
+    const host = this.option.pageDialogHost;
+    if (!wrapper || !host) return;
+    host.appendChild(wrapper);
+    this.pageDialogWrapper = wrapper;
+    // The surrounding menu and route tabs remain interactive.
+    dialog.$refs.dialog?.setAttribute("aria-modal", "false");
+  },
+  beforeDestroy() {
+    const wrapper = this.pageDialogWrapper;
+    if (wrapper?.parentNode) wrapper.parentNode.removeChild(wrapper);
+    this.pageDialogWrapper = null;
+  },
+};

package/src/components/xform/lang/en-US.js

@@ -299,6 +299,7 @@ export default {
           showWordLimit: "Show Word Limit",
           prefixIcon: "Prefix Icon",
           suffixIcon: "Suffix Icon",
+          suffixIconClickable: "Clickable Suffix Icon",
           inputButton: "Input Button Setting",
           appendButton: "Append Button",
           appendButtonDisabled: "Button Disabled",

package/src/components/xform/lang/zh-CN.js

@@ -463,6 +463,7 @@ export default {
       showWordLimit: "显示字数统计",
       prefixIcon: "头部Icon",
       suffixIcon: "尾部Icon",
+      suffixIconClickable: "尾部图标可点击",
       inputButton: "输入框按钮设置",
       appendButton: "添加后置按钮",
       appendButtonDisabled: "后置按钮禁用",

package/src/components/xform/utils/util.js

@@ -1128,6 +1128,7 @@ export function getDefaultFormConfig() {
     customClass: "",
     functions: "",
     layoutType: "PC",
+    dialogScope: null,
     dataSources: [],
     onBeforeCreated: "",
     onFormCreated: "",

package/src/directive/el-dialog-center/index.js

@@ -3,8 +3,9 @@ let modules = {};
 
 modules = {
 	install: function(Vue) {
-		Vue.directive('el-dialog-center', {
-			bind(el, binding, vnode) {
+		Vue.directive('el-dialog-center', {
+			bind(el, binding, vnode) {
+				if (binding.value === false) return;
 				if (el.children[0].querySelector(
 						".el-dialog__body")) {
 					let autoTop = (document.body.offsetHeight - el.children[0]

package/src/directive/el-drag-dialog/drag.js

@@ -18,10 +18,39 @@ modules = {
       }
     };
 
-    dialogHeaderEl.onmousedown = function(e) {
-      indexUtil.addClass(document.body, 'resize-ing');
-
-      // 鼠标按下，计算当前元素距离可视区的距离
+    dialogHeaderEl.onmousedown = function(e) {
+      indexUtil.addClass(document.body, 'resize-ing');
+
+      if (el.classList.contains('xform-page-dialog-wrapper')) {
+        const hostRect = el.parentNode.getBoundingClientRect();
+        const dialogRect = dragDom.getBoundingClientRect();
+        const startX = e.clientX;
+        const startY = e.clientY;
+        const startLeft = parseFloat(getStyle(dragDom, 'left')) || 0;
+        const startTop = parseFloat(getStyle(dragDom, 'top')) || 0;
+
+        document.onmousemove = function(moveEvent) {
+          const deltaX = Math.min(
+            Math.max(moveEvent.clientX - startX, hostRect.left - dialogRect.left),
+            hostRect.right - dialogRect.right
+          );
+          const deltaY = Math.min(
+            Math.max(moveEvent.clientY - startY, hostRect.top - dialogRect.top),
+            hostRect.bottom - dialogRect.bottom
+          );
+          dragDom.style.left = startLeft + deltaX + 'px';
+          dragDom.style.top = startTop + deltaY + 'px';
+          vnode.child.$emit('dragDialog');
+        };
+        document.onmouseup = function() {
+          indexUtil.removeClass(document.body, 'resize-ing');
+          document.onmousemove = null;
+          document.onmouseup = null;
+        };
+        return;
+      }
+
+      // 鼠标按下，计算当前元素距离可视区的距离
       let disX = e.clientX - dialogHeaderEl.offsetLeft;
       let disY = e.clientY - dialogHeaderEl.offsetTop;
 

package/src/index.sync.js

@@ -0,0 +1,5 @@
+/**version-1.0*/
+import "./public-path"; // qiankun publicPath 修正，必须保持第一行
+import "normalize.css/normalize.css"; // a modern alternative to CSS resets
+import "./boot-assets.legacy.js";
+export * from "./app-bootstrap.sync.js";

package/src/router/modules/customer.js

@@ -81,10 +81,7 @@ export const constantRoutes = [
         path: "/haier/system/salesman/list",
         component: () => import("@/views/haier/system/salesman/list.vue"),
         name: "haierSalesmanPilot",
-        meta: {
-          title: "业务员",
-          icon: "user",
-        },
+        meta: { title: "业务员", icon: "user" },
       },
     ],
   },

package/src/styles/page-shell.scss

@@ -78,6 +78,97 @@ body {
     }
   }
 }
+
+.app-main #containt.xform-page-dialog-host {
+  z-index: 0;
+  isolation: isolate;
+
+  > .xform-page-dialog-wrapper {
+    position: absolute !important;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    overflow: auto !important;
+
+    &.xform-page-dialog-wrapper--top {
+      align-items: flex-start;
+    }
+
+    > .el-dialog {
+      flex: none;
+      display: flex;
+      flex-direction: column;
+      max-width: calc(100% - 24px);
+      max-height: calc(100% - 24px);
+      margin-bottom: 0;
+
+      &.is-fullscreen {
+        max-width: 100%;
+        max-height: 100%;
+      }
+
+      > .el-dialog__body {
+        min-height: 0;
+        overflow: auto;
+      }
+    }
+
+    // 业务表单原先用视口 vh 给 .cont 定高。挂进当前页面后，可用高度变小，
+    // 需要让标题、内容、底栏按弹框自身高度分配，只在内容区滚动。
+    &.xform-page-form-dialog-wrapper {
+      overflow: hidden !important;
+
+      > .el-dialog {
+        overflow: hidden;
+
+        > .el-dialog__header,
+        > .el-dialog__footer {
+          flex: 0 0 auto;
+        }
+
+        > .el-dialog__body {
+          display: flex;
+          flex: 0 1 auto;
+          flex-direction: column;
+          height: auto !important;
+          min-height: 0;
+          overflow: hidden;
+
+          > .cont {
+            flex: 0 1 auto;
+            // 与全局业务弹框的常用高度一致；bodyConfig 的行内高度仍可覆盖。
+            height: 70vh;
+            min-height: 0;
+            overflow-x: hidden;
+            overflow-y: auto;
+          }
+
+          // 与旧版全局业务弹框一致，内容四周保留白色留白。
+          // 用边框承载留白，滚动时它不会像 padding 一样被卷走。
+          > .cont.designer-view:not(.fd-list-host) {
+            box-sizing: border-box;
+            border: 12px solid #fff;
+            padding: 0;
+          }
+        }
+      }
+    }
+  }
+
+  // 弹框挂进 #app 后，#containt.designer-view 的 background: none 会作用到弹框内容，
+  // 白底被去掉，露出页面底色。这里只把内容区白底加回来。
+  .el-dialog__body > #containt {
+    background-color: #fff;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+
+    &.designer-view {
+      background-color: #fff;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+    }
+  }
+}
 /* 外链页面(#/outLinkView、#/form_outLinkView 等)不走 layout，没有 .app-main 撑高度，
    #containt 只能被内容撑开，列表/详情会塌陷显示不全，这里补上与 .app-main 一致的高度 */
 #app > #containt {

package/src/views/user/form/view/list.vue

@@ -1,5 +1,16 @@
 <template>
-  <div id="containt">
+  <div
+    id="containt"
+    :class="{
+      'xform-page-dialog-host':
+        layoutType === 'PC' && !dialogScope && formConfig.dialogScope === 'page',
+    }"
+    :data-xform-page-dialog-host="
+      layoutType === 'PC' && !dialogScope && formConfig.dialogScope === 'page'
+        ? ''
+        : null
+    "
+  >
     <template v-if="layoutType === 'PC'">
       <x-tabs
         ref="xTabs"
@@ -22,6 +33,7 @@
             visible-key="showEdit"
             :visiable.sync="showEdit"
             :parent-target="_self"
+            :dialogScope="dialogScope"
             @reload="reload"
             @openCopyEditTab="openCopyEditTab"
           ></vFormRender>
@@ -40,6 +52,7 @@
               visible-key="showRender"
               :visiable.sync="showRender"
               :parent-target="_self"
+              :dialogScope="dialogScope"
               @reload="$reloadHandle"
               :openEditDialog="openEditDialog"
             ></vFormRender>
@@ -59,6 +72,7 @@
               :param="item.param"
               v-if="item.showContent"
               :parent-target="_self"
+              :dialogScope="dialogScope"
               @reload="(...args) => reloadAutoContent(...args)"
               :openEditDialog="openEditDialog1"
             ></vFormRender>
@@ -78,6 +92,7 @@
               :param="tab.param"
               v-if="tab.showContent"
               :parent-target="_self"
+              :dialogScope="dialogScope"
               @reload="(...args) => onEditTabReload(tab, ...args)"
               @openCopyEditTab="openCopyEditTab"
             ></vFormRender>
@@ -107,6 +122,7 @@
             v-if="showEditDialog && showEdit"
             visible-key="showEdit"
             :parent-target="_self"
+            :dialogScope="dialogScope"
             @reload="$reloadHandle"
           ></vFormRender>
         </div>
@@ -118,6 +134,7 @@
         v-if="showRender"
         visible-key="showRender"
         :parent-target="_self"
+        :dialogScope="dialogScope"
         @reload="$reloadHandle"
         :openEditDialog="openEditDialog"
       ></vFormRender>
@@ -131,6 +148,12 @@ import vFormRender from "../../../../views/user/form/vform/render";
 export default {
   name: "form_view:list",
   components: { vFormRender },
+  props: {
+    dialogScope: {
+      type: String,
+      default: null,
+    },
+  },
   mounted() {},
   data() {
     let that = this;