cloud-web-corejs 1.0.54-dev.8 → 1.0.54-dev.800

package/src/components/xform/form-designer/setting-panel/property-editor/field-button/addTableData-event-editor.vue

@@ -1,85 +1,84 @@
-<template>
-  <div>
-    <el-form-item label="关联表格ID">
-      <el-input type="text" v-model="eventConfig.tableRef"></el-input>
-    </el-form-item>
-    <el-form-item label="默认表格数据">
-      <el-button type="primary" plain="" round="" @click="openTableDataEdit">{{
-          i18nt('designer.setting.editAction')
-        }}
-      </el-button>
-    </el-form-item>
-    <el-dialog
-      v-if="dataDialogVisible"
-      custom-class="dialog-style list-dialog"
-      :title="i18nt('designer.setting.tableDataEdit')"
-      :visible.sync="dataDialogVisible"
-      :show-close="!0"
-      append-to-body=""
-      :close-on-click-modal="!1"
-      :close-on-press-escape="!1"
-      :destroy-on-close="!0"
-      width="75%"
-      v-dialog-drag
-    >
-      <template slot="footer">
-        <div class="dialog-footer">
-          <el-button type="" @click="dataDialogVisible = !1" class="button-sty" icon="el-icon-close">
-            {{ i18nt('designer.hint.cancel') }}
-          </el-button>
-          <el-button type="primary" @click="saveTableData" class="button-sty" icon="el-icon-check">
-            {{ i18nt('designer.hint.confirm') }}
-          </el-button>
-        </div>
-      </template>
-      <code-editor mode="json" :readonly="!1" v-model="tableDataOptions"></code-editor>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import i18n from "../../../../../../components/xform/utils/i18n"
-
-export default {
-  mixins: [i18n],
-  props: {
-    designer: Object,
-    selectedWidget: Object,
-    optionModel: Object,
-  },
-  inject:['defaultClickBindEventConfig'],
-  data(){
-    return {
-      dataDialogVisible:false,
-      tableData:[],
-      tableDataOptions:null
-    }
-  },
-  computed:{
-    eventConfig(){
-      return this.optionModel.addTableDataConfig || {};
-    }
-  },
-  created() {
-
-  },
-  methods:{
-    openTableDataEdit: function () {
-      this.tableDataOptions = JSON.stringify(this.eventConfig.tableData, null, '  ');
-      this.dataDialogVisible = !0;
-    },
-    saveTableData: function () {
-      try {
-        this.eventConfig.tableData = JSON.parse(this.tableDataOptions);
-        this.dataDialogVisible = !1;
-      } catch (e) {
-        this.$message.error(this.i18nt('designer.hint.invalidOptionsData') + e.message);
-      }
-    },
-  }
-}
-</script>
-
-<style scoped>
-
-</style>
+<template>
+  <div>
+    <el-form-item class="form-item-label-top" label="关联表格ID">
+      <el-input type="text" v-model="eventConfig.tableRef"></el-input>
+    </el-form-item>
+    <el-form-item label="默认表格数据">
+      <el-button type="primary" plain="" round="" @click="openTableDataEdit">{{
+          i18nt('designer.setting.editAction')
+        }}
+      </el-button>
+    </el-form-item>
+    <el-dialog
+      v-if="dataDialogVisible"
+      custom-class="dialog-style list-dialog"
+      :title="i18nt('designer.setting.tableDataEdit')"
+      :visible.sync="dataDialogVisible"
+      :show-close="!0"
+      append-to-body=""
+      :close-on-click-modal="!1"
+      :close-on-press-escape="!1"
+      :destroy-on-close="!0"
+      width="75%"
+      v-dialog-drag
+    >
+      <template slot="footer">
+        <div class="dialog-footer">
+          <el-button type="" @click="dataDialogVisible = !1" class="button-sty" icon="el-icon-close">
+            {{ i18nt('designer.hint.cancel') }}
+          </el-button>
+          <el-button type="primary" @click="saveTableData" class="button-sty" icon="el-icon-check">
+            {{ i18nt('designer.hint.confirm') }}
+          </el-button>
+        </div>
+      </template>
+      <code-editor mode="json" :readonly="!1" v-model="tableDataOptions"></code-editor>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import i18n from "../../../../../../components/xform/utils/i18n"
+
+export default {
+  mixins: [i18n],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+  data(){
+    return {
+      dataDialogVisible:false,
+      tableData:[],
+      tableDataOptions:null
+    }
+  },
+  computed:{
+    eventConfig(){
+      return this.optionModel.addTableDataConfig || {};
+    }
+  },
+  created() {
+
+  },
+  methods:{
+    openTableDataEdit: function () {
+      this.tableDataOptions = JSON.stringify(this.eventConfig.tableData, null, '  ');
+      this.dataDialogVisible = !0;
+    },
+    saveTableData: function () {
+      try {
+        this.eventConfig.tableData = JSON.parse(this.tableDataOptions);
+        this.dataDialogVisible = !1;
+      } catch (e) {
+        this.$message.error(this.i18nt('designer.hint.invalidOptionsData') + e.message);
+      }
+    },
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/xform/form-designer/setting-panel/property-editor/field-button/button-type-editor.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form-item :label="i18nt('designer.setting.displayType')">
+  <el-form-item :label="i18nt('designer.setting.displayType')" class="form-item-label-top">
     <el-select v-model="optionModel.type">
       <el-option label="default" value=""></el-option>
       <el-option label="primary" value="primary"></el-option>

package/src/components/xform/form-designer/setting-panel/property-editor/field-button/clickBindActions.js

@@ -0,0 +1,262 @@
+/**
+ * 「点击绑定事件」动作注册表。
+ *
+ * 设计器（clickBindEvent-editor.vue）与运行时（field-widget/fieldMixin.js）共用这一份，
+ * 因此**本文件不得 import 任何 .vue**——否则设计器的属性编辑器会被打进表单渲染包。
+ * 编辑器组件映射留在 clickBindEvent-editor.vue 自己的 components 里，这里只存 editorName 字符串。
+ *
+ * 方案见 docs/点击绑定事件重构与表单弹框抽屉动作方案.md
+ */
+
+/**
+ * widgetsConfig 只在真正要造默认配置时才引。
+ * 它顶层就有 containers 提前引用 defaultWfConfig 的 TDZ 问题（见该文件头部注释），
+ * webpack 侧被 Babel 的 const→var 掩盖了，jest 侧会直接抛 —— 顶层 import 会让本模块
+ * 连同引它的运行时一起不可测。
+ */
+function getDefaultSearchDialogConfig() {
+  return require("../../../widget-panel/widgetsConfig")
+    .defaultSearchDialogConfig;
+}
+
+export const CLICK_BIND = {
+  SEARCH_DIALOG: "1", // 打开选择弹框
+  ADD_TABLE_DATA: "2", // 列表添加数据
+  FORM_DIALOG: "3", // 打开表单弹框
+  FORM_DRAWER: "4", // 打开表单抽屉
+};
+
+// 有自身值的控件：dataId 缺省取控件值；按钮类没有值，缺省取当前表格行字段
+const VALUE_WIDGET_TYPES = ["vabsearch", "singerSearch", "multiSearch"];
+
+/**
+ * 「打开表单弹框 / 打开表单抽屉」共用配置。两个动作共用一个 configKey，
+ * 弹框/抽屉互切时配置不丢。
+ */
+export function buildDefaultFormHostConfig(ctx = {}) {
+  let isValueWidget
+    = VALUE_WIDGET_TYPES.indexOf(ctx.widgetType) > -1
+    || ctx.widgetTextLinkFlag === true;
+  return {
+    // 目标表单
+    formCode: null,
+    formCodeScript: null,
+    host: null, // null=直接渲染该表单；"list"=用列表宿主页承载
+    title: null,
+    // 数据
+    openMode: "1", // 1=新增；2=详情
+    dataIdFrom: isValueWidget ? "1" : "3",
+    dataIdField: null,
+    dataIdScript: null,
+    paramScript: null,
+    queryParamScript: null,
+    // 呈现
+    readonly: false,
+    showFooter: true,
+    plain: false, // 仅抽屉
+    dialogWidth: null, // 仅弹框
+    fullscreen: false, // 仅弹框
+    drawerSize: null, // 仅抽屉，缺省 62%（host:"list" 时 85%）
+    drawerDirection: null, // 仅抽屉，缺省 rtl
+    // 收尾
+    onCloseScript: null,
+  };
+}
+
+export const clickBindActions = [
+  {
+    value: CLICK_BIND.SEARCH_DIALOG,
+    label: "打开选择弹框",
+    editorName: "searchDialogEventEditor",
+    configKey: "searchDialogConfig",
+    // vabsearch 的多选由控件自身的 multipleChoices 决定，这里缺省给 false（沿用存量判定）
+    defaultConfig: (ctx) => ({
+      ...getDefaultSearchDialogConfig(),
+      multipleChoices: !(ctx && ctx.widgetType === "vabsearch"),
+    }),
+    run: (ctx) => ctx.vm.openSearchDialog(ctx.tableParam, ctx.flag),
+  },
+  {
+    value: CLICK_BIND.ADD_TABLE_DATA,
+    label: "列表添加数据",
+    editorName: "addTableDataEventEditor",
+    configKey: "addTableDataConfig",
+    defaultConfig: () => ({
+      tableRef: null,
+      tableData: {},
+    }),
+    run: (ctx) => ctx.vm.handleAddTableDataEvent(ctx.flag),
+  },
+  {
+    value: CLICK_BIND.FORM_DIALOG,
+    label: "打开表单弹框",
+    editorName: "formHostEventEditor",
+    configKey: "formHostConfig",
+    defaultConfig: buildDefaultFormHostConfig,
+    run: (ctx) => openFormHost(ctx, "dialog"),
+  },
+  {
+    value: CLICK_BIND.FORM_DRAWER,
+    label: "打开表单抽屉",
+    editorName: "formHostEventEditor",
+    configKey: "formHostConfig",
+    defaultConfig: buildDefaultFormHostConfig,
+    run: (ctx) => openFormHost(ctx, "drawer"),
+  },
+];
+
+export function getClickBindAction(value) {
+  if (!value) return null;
+  return clickBindActions.find((action) => action.value === value) || null;
+}
+
+/** 传给承载壳前剔除 undefined：两个壳都是 Object.assign({默认}, 配置)，undefined 会把默认值覆盖成空 */
+export function dropUndefined(obj) {
+  let result = {};
+  Object.keys(obj || {}).forEach((key) => {
+    if (obj[key] !== undefined) result[key] = obj[key];
+  });
+  return result;
+}
+
+/**
+ * 详情态单据 ID 求值。openMode="1"（新增）恒返回 null。
+ * 取不到时提示并返回 undefined，调用方据此中断——详情表单空开一张没有意义。
+ */
+export function resolveDataId(ctx, cfg) {
+  if (!cfg || cfg.openMode !== "2") return null;
+
+  let dataId = null;
+  switch (cfg.dataIdFrom) {
+    case "2":
+      dataId = cfg.dataIdField
+        ? ctx.formRef && ctx.formRef.getFieldValue(cfg.dataIdField)
+        : null;
+      break;
+    case "3":
+      dataId
+        = cfg.dataIdField && ctx.rowData ? ctx.rowData[cfg.dataIdField] : null;
+      break;
+    case "4":
+      dataId = cfg.dataIdScript
+        ? ctx.vm.handleCustomEvent(cfg.dataIdScript, ["rowData"], [ctx.rowData])
+        : null;
+      break;
+    default:
+      // "1" 当前控件值
+      dataId = ctx.vm.getValue ? ctx.vm.getValue() : ctx.vm.fieldModel;
+      break;
+  }
+
+  if (dataId === null || dataId === undefined || dataId === "") {
+    ctx.vm.$message.warning("未取到单据ID");
+    return undefined;
+  }
+  return dataId;
+}
+
+/**
+ * 打开一张 formCode 表单。
+ * - 弹框走 xform 内部通道 getFormRef().openFormDialog（formConfig 可透传 VFormRender props）
+ * - 抽屉走全局 $formDrawer（能力最全：dataId/param/plain/readonly/host/fillHeight/报错处理）
+ * 不回填、不选行；结果只通过 onCloseScript 的 result 参数交给脚本。
+ */
+export function openFormHost(ctx, mode) {
+  let cfg = (ctx.optionModel && ctx.optionModel.formHostConfig) || {};
+  let formCode = cfg.formCodeScript
+    ? ctx.vm.handleCustomEvent(cfg.formCodeScript, ["rowData"], [ctx.rowData])
+    : cfg.formCode;
+  if (!formCode) return;
+
+  let dataId = resolveDataId(ctx, cfg);
+  if (dataId === undefined) return; // 详情态取不到单据 ID，已提示
+
+  // param：透传 VFormRender 的 param prop，只给目标模板的脚本用，不参与请求
+  let param = cfg.paramScript
+    ? ctx.vm.handleCustomEvent(cfg.paramScript, ["rowData"], [ctx.rowData])
+    : undefined;
+  // queryParam：强制合并进目标表单查询表格的请求参数（两个壳都转成 dataTableOption.queryParam）。
+  // host:"list" 时不生效——列表宿主页自己加载模板，没有这条注入通道，编辑器里也已隐藏该项。
+  let queryParam = cfg.queryParamScript
+    ? ctx.vm.handleCustomEvent(cfg.queryParamScript, ["rowData"], [ctx.rowData])
+    : undefined;
+  let onClose = (formRef, result) => {
+    if (cfg.onCloseScript) {
+      ctx.vm.handleCustomEvent(
+        cfg.onCloseScript,
+        ["formRef", "result"],
+        [formRef, result]
+      );
+    }
+  };
+
+  if (mode === "drawer") {
+    // 全局抽屉每次新建实例，可叠开；连点两次会叠两层，这里挂标记防重
+    if (ctx.vm._formHostOpening) return;
+    ctx.vm._formHostOpening = true;
+    let clearFlag = () => {
+      ctx.vm._formHostOpening = false;
+    };
+    let openDrawer = ctx.vm.$formDrawer
+      ? ctx.vm.$formDrawer.bind(ctx.vm)
+      : (option) =>
+          import("../../../../../formDrawer").then((m) =>
+            m.default.open(option)
+          );
+    return openDrawer(
+      dropUndefined({
+        formCode: formCode,
+        host: cfg.host || undefined,
+        title: cfg.title || undefined,
+        param: param,
+        queryParam: queryParam,
+        dataId: dataId, // null=新增态
+        plain: !!cfg.plain,
+        readonly: !!cfg.readonly,
+        showFooter: cfg.showFooter !== false,
+        size: cfg.drawerSize || undefined,
+        direction: cfg.drawerDirection || undefined,
+      })
+    ).then(
+      (result) => {
+        clearFlag();
+        onClose(null, result);
+      },
+      (error) => {
+        clearFlag();
+        throw error;
+      }
+    );
+  }
+
+  // 内部壳是回调式：onAction（配置按钮）/ confirm（默认「确定」）先把结果存下，
+  // close 时一起交给脚本。注意内部弹框的默认「确定」不做表单校验。
+  let lastResult = null;
+  ctx.formRef.openFormDialog(
+    dropUndefined({
+      formCode: formCode,
+      host: cfg.host || undefined,
+      param: param,
+      queryParam: queryParam,
+      // v-bind 到 VFormRender 的 props，只放 props（禁止 param/formJson/formData）
+      formConfig: dropUndefined({
+        dataId: dataId,
+        disabledMode: !!cfg.readonly,
+      }),
+      showFooter: cfg.showFooter !== false,
+      dialogConfig: dropUndefined({
+        title: cfg.title || undefined,
+        width: cfg.dialogWidth || undefined,
+        fullscreen: !!cfg.fullscreen,
+      }),
+      onAction: (payload) => {
+        lastResult = payload;
+      },
+      confirm: (formRef) => {
+        lastResult
+          = formRef && formRef.getFormData ? formRef.getFormData(false) : true;
+      },
+      close: (formRef) => onClose(formRef, lastResult),
+    })
+  );
+}

package/src/components/xform/form-designer/setting-panel/property-editor/field-button/clickBindEvent-editor.vue

@@ -1,73 +1,97 @@
-<template>
-  <div>
-    <el-form-item label="点击绑定事件">
-      <el-select v-model="optionModel.clickBindEvent" clearable>
-        <el-option value="1" label="打开选择弹框"></el-option>
-        <el-option value="2" label="列表添加数据"></el-option>
-      </el-select>
-    </el-form-item>
-    <searchDialogEventEditor :designer="designer" :selectedWidget="selectedWidget" :optionModel.sync="optionModel" v-if="optionModel.clickBindEvent=='1'"></searchDialogEventEditor>
-    <addTableDataEventEditor :designer="designer" :selectedWidget="selectedWidget" :optionModel.sync="optionModel" v-if="optionModel.clickBindEvent=='2'"></addTableDataEventEditor>
-  </div>
-</template>
-<script>
-import searchDialogEventEditor from "./search-dialog-event-editor.vue";
-import addTableDataEventEditor from "./addTableData-event-editor.vue";
-import {defaultSearchDialogConfig} from "../../../../../../components/xform/form-designer/widget-panel/widgetsConfig";
-
-
-import i18n from "../../../../../../components/xform/utils/i18n";
-
-let clickBindEventConfig = {
-  searchDialogConfig:{
-    ...defaultSearchDialogConfig
-  },
-  addTableDataConfig:{
-    tableRef:null,
-    tableData:{}
-  }
-}
-
-export default {
-  name: "clickBindEvent-editor",
-  mixins: [i18n],
-  props: {
-    designer: Object,
-    selectedWidget: Object,
-    optionModel: Object,
-  },
-  components:{
-    searchDialogEventEditor,
-    addTableDataEventEditor
-  },
-  provide(){
-    return {
-      defaultClickBindEventConfig:clickBindEventConfig
-    }
-  },
-  created() {
-    if(!this.optionModel.addTableDataConfig){
-      this.$set(this.optionModel, 'addTableDataConfig', this.$baseLodash.cloneDeep(clickBindEventConfig.addTableDataConfig));
-    }
-    if(!this.optionModel.searchDialogConfig){
-      this.$set(this.optionModel, 'searchDialogConfig', this.$baseLodash.cloneDeep(clickBindEventConfig.searchDialogConfig));
-    }
-    if(this.optionModel.searchDialogConfig.multipleChoices === void 0){
-      if(this.selectedWidget.type=='vabsearch'){
-        this.$set(this.optionModel.searchDialogConfig,'multipleChoices',false);
-      }else{
-        this.$set(this.optionModel.searchDialogConfig,'multipleChoices',true);
-      }
-    }
-  },
-  methods:{
-    changeEventType(val){
-      // this.optionModel.clickBindEventConfig = clickBindEventConfig;
-      // this.$set(this.optionModel, "clickBindEventConfig", clickBindEventConfig);
-    }
-  }
-}
-</script>
-<style scoped>
-
-</style>
+<template>
+  <div>
+    <el-form-item class="form-item-label-top" label="点击绑定事件">
+      <el-select v-model="optionModel.clickBindEvent" clearable @change="onActionChange">
+        <el-option v-for="action in actions" :key="action.value"
+                   :value="action.value" :label="action.label"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="点击前置事件" label-width="150px">
+      <a href="javascript:void(0);" class="a-link link-oneLind"
+         @click="editEventHandler('onBeforeClickButton', evnentParams)">
+        <span>{{ optionModel.onBeforeClickButton }}</span>
+        <i class="el-icon-edit"></i>
+      </a>
+    </el-form-item>
+    <!-- 子编辑器由注册表的 editorName 决定，新增动作不用再加 v-if 分支 -->
+    <component v-if="currentAction && currentAction.editorName"
+               :is="currentAction.editorName"
+               :designer="designer" :selectedWidget="selectedWidget"
+               :optionModel.sync="optionModel"
+               :actionValue="optionModel.clickBindEvent"></component>
+  </div>
+</template>
+<script>
+import searchDialogEventEditor from "./search-dialog-event-editor.vue";
+import addTableDataEventEditor from "./addTableData-event-editor.vue";
+import formHostEventEditor from "./form-host-event-editor.vue";
+import {
+  clickBindActions,
+  getClickBindAction,
+} from "./clickBindActions";
+
+import i18n from "../../../../../../components/xform/utils/i18n";
+import eventMixin
+  from "../../../../../../components/xform/form-designer/setting-panel/property-editor/event-handler/eventMixin";
+
+export default {
+  name: "clickBindEvent-editor",
+  mixins: [i18n, eventMixin],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+  components: {
+    searchDialogEventEditor,
+    addTableDataEventEditor,
+    formHostEventEditor
+  },
+  data() {
+    return {
+      actions: clickBindActions,
+      evnentParams: ["dataId", "formCode", "done"]
+    }
+  },
+  computed: {
+    currentAction() {
+      return getClickBindAction(this.optionModel.clickBindEvent);
+    }
+  },
+  created() {
+    // 存量模板兜底：只补当前已选动作的配置块，不再无条件塞两份空壳
+    this.ensureActionConfig(this.optionModel.clickBindEvent);
+  },
+  methods: {
+    // 切换动作时惰性注入配置：已有则保留（"3"↔"4" 共用 formHostConfig，互切不丢配置）
+    onActionChange(value) {
+      this.ensureActionConfig(value);
+    },
+    ensureActionConfig(value) {
+      let action = getClickBindAction(value);
+      if (!action || !action.configKey) return;
+      if (!this.optionModel[action.configKey]) {
+        this.$set(
+          this.optionModel,
+          action.configKey,
+          action.defaultConfig({widgetType: this.selectedWidget.type})
+        );
+      }
+      // 存量模板可能缺 multipleChoices，沿用原判定补上
+      if (
+        action.configKey === "searchDialogConfig"
+        && this.optionModel.searchDialogConfig.multipleChoices === void 0
+      ) {
+        this.$set(
+          this.optionModel.searchDialogConfig,
+          "multipleChoices",
+          this.selectedWidget.type !== "vabsearch"
+        );
+      }
+    }
+  }
+}
+</script>
+<style scoped>
+
+</style>