cloud-web-corejs 1.0.54-dev.786 → 1.0.54-dev.788

package/src/components/formDialog/actionButtons.js

@@ -0,0 +1,90 @@
+/**
+ * formConfig.actionButtons 公共逻辑：formDialog / formDrawer 共用。
+ * 配置结构（存表单模板 formViewContent 的 formConfig 上，设计器"操作按钮"面板维护）：
+ *   { code, label, type, plain, icon, authName, needValidate, closeAfter, visible, onClick }
+ * 语义约定见 docs/formDrawer抽屉与formDialog按钮配置改造方案.md §3.1。
+ */
+
+/** 调用方 buttons 覆盖模板配置；两者都没有则返回 null（壳回退默认取消/确定） */
+export function resolveActionButtons(callerButtons, formConfig) {
+  const raw
+    = (Array.isArray(callerButtons) && callerButtons.length && callerButtons)
+    || (formConfig
+      && Array.isArray(formConfig.actionButtons)
+      && formConfig.actionButtons.length
+      && formConfig.actionButtons)
+    || null;
+  if (!raw) return null;
+  return raw.map((btn, index) => ({
+    needValidate: false,
+    closeAfter: true,
+    ...btn,
+    code: btn.code || `button_${index}`,
+  }));
+}
+
+/** 按钮权限：denylist——formCode:authName 在 dispermissions 中则无权；未配 authName 放行 */
+export function hasButtonPermission(btn, formCode, vm) {
+  if (!btn.authName || !formCode) return true;
+  const dispermissions
+    = (vm && vm.$store && vm.$store.getters.dispermissions) || [];
+  return !dispermissions.includes(`${formCode}:${btn.authName}`);
+}
+
+/** visible 脚本：handleCustomEvent 执行（this = 表单实例），显式返回 false 才隐藏 */
+export function isButtonVisible(btn, formRef) {
+  if (!btn.visible) return true;
+  if (!formRef) return true; // 表单未挂载前先渲染，挂载后重渲染时再求值
+  return formRef.handleCustomEvent(btn.visible, ["button"], [btn]) !== false;
+}
+
+/**
+ * 执行按钮：needValidate 校验 → onClick 脚本 → done/closeAfter 收口。
+ * 脚本签名 onClick(formData, dialog, done, selection)，this = VFormRender 实例。
+ * 返回 false / reject 均不关闭；未显式调 done 且 closeAfter 时自动以表单数据收口。
+ * @returns {Promise} 完成（无论是否收口）后 resolve，供壳侧解除按钮 loading
+ */
+export function runActionButton(btn, { formRef, host, getSelection, onSettle }) {
+  if (!formRef) return Promise.resolve();
+
+  const validate = () =>
+    new Promise((resolve) => {
+      if (!btn.needValidate) return resolve(true);
+      formRef.validateForm((valid) => resolve(!!valid));
+    });
+
+  const getFormData = () =>
+    host.$baseLodash
+      ? host.$baseLodash.cloneDeep(formRef.getFormData(false))
+      : formRef.getFormData(false);
+
+  return validate().then((valid) => {
+    if (!valid) return;
+    let doneCalled = false;
+    const done = (data) => {
+      doneCalled = true;
+      onSettle(
+        { action: btn.code, data: data === undefined ? getFormData() : data },
+        btn.closeAfter !== false
+      );
+    };
+    const selection
+      = typeof getSelection === "function" ? getSelection() || [] : [];
+    const result = formRef.handleCustomEvent(
+      btn.onClick,
+      ["formData", "dialog", "done", "selection"],
+      [formRef.getFormData(false), host, done, selection]
+    );
+    if (result === false) return;
+    return Promise.resolve(result)
+      .then(() => {
+        // 脚本成功且未手动收口：closeAfter 时自动以表单数据收口，否则保持打开
+        if (!doneCalled && btn.closeAfter !== false) {
+          onSettle({ action: btn.code, data: getFormData() }, true);
+        }
+      })
+      .catch(() => {
+        // 脚本 reject：不关闭，由脚本自行提示错误
+      });
+  });
+}

package/src/components/formDialog/index.js

@@ -1,35 +1,48 @@
-const modules = {};
-import vue from "vue";
-import formDialog from "./index.vue";
-
-const FormDialogInstance = vue.extend(formDialog);
-
-/**
- * JS 调用打开表单弹框。每次调用创建独立实例，支持叠开多层。
- * 确定（校验通过）resolve 表单数据，取消/关闭 resolve(null)，不使用 reject。
- */
-function open(options = {}) {
-  const parent
-    = typeof window !== "undefined" && window.$vueRoot ? window.$vueRoot : null;
-  const instanceOptions = {};
-  if (parent) {
-    instanceOptions.parent = parent;
-    if (parent._i18n) {
-      instanceOptions.i18n = parent._i18n;
-    }
-  }
-  const instance = new FormDialogInstance(instanceOptions);
-  instance.$mount();
-  document.body.appendChild(instance.$el);
-  return instance.open(options);
-}
-
-// 定义插件对象
-// vue的install方法，用于定义vue插件
-modules.install = function (Vue) {
-  // 在Vue的原型上添加实例方法，以全局调用
-  Vue.prototype.$formDialog = open;
-};
-modules.open = open;
-
-export default modules;
+const modules = {};
+import vue from "vue";
+
+// 壳组件懒加载：首屏只留本入口几十行，index.vue（含 xform 渲染链路）随首次调用进独立 chunk
+let FormDialogCtor = null;
+
+function loadCtor() {
+  if (FormDialogCtor) return Promise.resolve(FormDialogCtor);
+  return import(
+    /* webpackChunkName: "form-dialog" */ "./index.vue"
+  ).then((m) => {
+    FormDialogCtor = vue.extend(m.default);
+    return FormDialogCtor;
+  });
+}
+
+/**
+ * JS 调用打开表单弹框。每次调用创建独立实例，支持叠开多层。
+ * 确定（校验通过）resolve 表单数据，取消/关闭 resolve(null)，不使用 reject。
+ * 配置了自定义按钮（formConfig.actionButtons / options.buttons）时 resolve {action, data}。
+ */
+function open(options = {}) {
+  return loadCtor().then((Ctor) => {
+    const parent
+      = typeof window !== "undefined" && window.$vueRoot ? window.$vueRoot : null;
+    const instanceOptions = {};
+    if (parent) {
+      instanceOptions.parent = parent;
+      if (parent._i18n) {
+        instanceOptions.i18n = parent._i18n;
+      }
+    }
+    const instance = new Ctor(instanceOptions);
+    instance.$mount();
+    document.body.appendChild(instance.$el);
+    return instance.open(options);
+  });
+}
+
+// 定义插件对象
+// vue的install方法，用于定义vue插件
+modules.install = function (Vue) {
+  // 在Vue的原型上添加实例方法，以全局调用
+  Vue.prototype.$formDialog = open;
+};
+modules.open = open;
+
+export default modules;