cloud-web-corejs 1.0.276 → 1.0.278

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,88 +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>
-    <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>
-    <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";
-import eventMixin
-  from "../../../../../../components/xform/form-designer/setting-panel/property-editor/event-handler/eventMixin";
-
-let clickBindEventConfig = {
-  searchDialogConfig: {
-    ...defaultSearchDialogConfig
-  },
-  addTableDataConfig: {
-    tableRef: null,
-    tableData: {}
-  }
-}
-
-export default {
-  name: "clickBindEvent-editor",
-  mixins: [i18n, eventMixin],
-  props: {
-    designer: Object,
-    selectedWidget: Object,
-    optionModel: Object,
-  },
-  components: {
-    searchDialogEventEditor,
-    addTableDataEventEditor
-  },
-  provide() {
-    return {
-      defaultClickBindEventConfig: clickBindEventConfig
-    }
-  },
-  data() {
-    return {
-      evnentParams: ["dataId", "formCode", "done"]
-    }
-  },
-  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>

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

@@ -0,0 +1,188 @@
+<template>
+  <div>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider">{{ drawerMode ? '表单抽屉配置' : '表单弹框配置' }}</el-divider>
+    </el-form-item>
+    <el-form-item class="form-item-label-top" label="表单编码">
+      <el-input type="text" v-model="eventConfig.formCode"></el-input>
+    </el-form-item>
+    <el-form-item label="表单编码脚本" label-width="150px">
+      <a href="javascript:void(0);" class="a-link link-oneLind"
+         @click="editEventHandler('formCodeScript', scriptParams, optionFormCode)">
+        <span>{{ eventConfig.formCodeScript }}</span>
+        <i class="el-icon-edit"></i>
+      </a>
+    </el-form-item>
+    <el-form-item label="以列表页承载">
+      <el-switch v-model="listHost"></el-switch>
+      <span class="tips">开启后按「常规/列表」页签的列表页打开</span>
+    </el-form-item>
+    <el-form-item class="form-item-label-top" label="标题">
+      <el-input type="text" v-model="eventConfig.title" placeholder="缺省取表单模板名称"></el-input>
+    </el-form-item>
+
+    <template v-if="!listHost">
+      <el-form-item class="form-item-label-top" label="打开方式">
+        <el-select v-model="eventConfig.openMode">
+          <el-option value="1" label="新增"></el-option>
+          <el-option value="2" label="详情"></el-option>
+        </el-select>
+      </el-form-item>
+      <template v-if="eventConfig.openMode === '2'">
+        <el-form-item class="form-item-label-top" label="单据ID来源">
+          <el-select v-model="eventConfig.dataIdFrom">
+            <el-option value="1" label="当前控件值"></el-option>
+            <el-option value="2" label="指定表单字段"></el-option>
+            <el-option value="3" label="当前表格行字段"></el-option>
+            <el-option value="4" label="脚本"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item class="form-item-label-top" label="来源字段名"
+                      v-if="eventConfig.dataIdFrom === '2' || eventConfig.dataIdFrom === '3'">
+          <el-input type="text" v-model="eventConfig.dataIdField"></el-input>
+        </el-form-item>
+        <el-form-item label="单据ID脚本" label-width="150px" v-if="eventConfig.dataIdFrom === '4'">
+          <a href="javascript:void(0);" class="a-link link-oneLind"
+             @click="editEventHandler('dataIdScript', scriptParams, optionDataId)">
+            <span>{{ eventConfig.dataIdScript }}</span>
+            <i class="el-icon-edit"></i>
+          </a>
+        </el-form-item>
+      </template>
+    </template>
+
+    <el-form-item label="查询参数" label-width="150px" v-if="!listHost">
+      <a href="javascript:void(0);" class="a-link link-oneLind"
+         @click="editEventHandler('queryParamScript', scriptParams, optionQueryParam)">
+        <span>{{ eventConfig.queryParamScript }}</span>
+        <i class="el-icon-edit"></i>
+      </a>
+      <span class="tips">脚本返回对象合并进目标表单查询表格的请求参数；按业务字段过滤写
+        <code>return {'{'} condition: {'{'} status: 1 {'}'} {'}'}</code>（追加进查询区条件，同字段以脚本为准）</span>
+    </el-form-item>
+    <el-form-item label="自定义参数" label-width="150px">
+      <a href="javascript:void(0);" class="a-link link-oneLind"
+         @click="editEventHandler('paramScript', scriptParams, optionParam)">
+        <span>{{ eventConfig.paramScript }}</span>
+        <i class="el-icon-edit"></i>
+      </a>
+      <span class="tips">脚本返回对象 → 目标表单的 param，只给模板脚本用，不参与请求</span>
+    </el-form-item>
+    <el-form-item label="只读">
+      <el-switch v-model="eventConfig.readonly"></el-switch>
+      <span class="tips">{{ drawerMode ? '只读态渲染，底部仅保留「关闭」' : '整表禁用，底部按钮不变' }}</span>
+    </el-form-item>
+    <el-form-item label="显示底部按钮">
+      <el-switch v-model="eventConfig.showFooter"></el-switch>
+      <span class="tips">按钮由目标表单的「表单操作按钮」决定</span>
+    </el-form-item>
+
+    <!-- 形态字段：弹框/抽屉各一组 -->
+    <template v-if="drawerMode">
+      <el-form-item label="素身详情">
+        <el-switch v-model="eventConfig.plain"></el-switch>
+        <span class="tips">不渲染详情标题栏与模块导航</span>
+      </el-form-item>
+      <el-form-item class="form-item-label-top" label="抽屉尺寸">
+        <el-input type="text" v-model="eventConfig.drawerSize" placeholder="缺省 62%，列表页 85%"></el-input>
+      </el-form-item>
+      <el-form-item class="form-item-label-top" label="弹出方向">
+        <el-select v-model="eventConfig.drawerDirection" clearable placeholder="缺省 右侧滑出">
+          <el-option value="rtl" label="右侧滑出"></el-option>
+          <el-option value="ltr" label="左侧滑出"></el-option>
+          <el-option value="ttb" label="顶部滑出"></el-option>
+          <el-option value="btt" label="底部滑出"></el-option>
+        </el-select>
+      </el-form-item>
+    </template>
+    <template v-else>
+      <el-form-item class="form-item-label-top" label="弹框宽度">
+        <el-input type="text" v-model="eventConfig.dialogWidth" placeholder="缺省 1200px"></el-input>
+      </el-form-item>
+      <el-form-item label="全屏">
+        <el-switch v-model="eventConfig.fullscreen"></el-switch>
+      </el-form-item>
+    </template>
+
+    <el-form-item label="关闭后事件" label-width="150px">
+      <a href="javascript:void(0);" class="a-link link-oneLind"
+         @click="editEventHandler('onCloseScript', closeScriptParams, optionClose)">
+        <span>{{ eventConfig.onCloseScript }}</span>
+        <i class="el-icon-edit"></i>
+      </a>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+import i18n from "../../../../../../components/xform/utils/i18n"
+import eventMixin
+  from "../../../../../../components/xform/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+import {CLICK_BIND} from "./clickBindActions";
+
+/**
+ * 「打开表单弹框 / 打开表单抽屉」共用配置编辑器（optionModel.formHostConfig）。
+ * 两个动作共用一份配置，形态字段按 actionValue 切换，弹框/抽屉互切时配置不丢。
+ */
+export default {
+  mixins: [i18n, eventMixin],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+    actionValue: String,
+  },
+  data() {
+    return {
+      optionFormCode: this.buildScriptOption("formCodeScript"),
+      optionDataId: this.buildScriptOption("dataIdScript"),
+      optionQueryParam: this.buildScriptOption("queryParamScript"),
+      optionParam: this.buildScriptOption("paramScript"),
+      optionClose: this.buildScriptOption("onCloseScript"),
+      // 脚本可用参数：dataId/formCode 由 getEventParam 统一注入，这里只列附加项
+      scriptParams: ["dataId", "formCode", "rowData"],
+      closeScriptParams: ["dataId", "formCode", "formRef", "result"],
+    }
+  },
+  computed: {
+    drawerMode() {
+      return this.actionValue === CLICK_BIND.FORM_DRAWER;
+    },
+    eventConfig() {
+      return this.optionModel.formHostConfig || {};
+    },
+    // 列表页承载时不需要新增/详情与素身设置，统一按开关处理
+    listHost: {
+      get() {
+        return this.eventConfig.host === "list";
+      },
+      set(val) {
+        this.eventConfig.host = val ? "list" : null;
+      }
+    }
+  },
+  methods: {
+    buildScriptOption(key) {
+      return {
+        customCode: () => {
+          return this.eventConfig[key];
+        },
+        callback: (code) => {
+          // $set 而非直接赋值：存量模板的 formHostConfig 没有后加的字段（如 queryParamScript），
+          // 直接赋值不会变成响应式，编辑器里改完不刷新
+          this.$set(this.eventConfig, key, code);
+          this.$forceUpdate();
+        }
+      };
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tips {
+  margin-left: 8px;
+  color: #909399;
+  font-size: 12px;
+}
+</style>

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

@@ -1,23 +1,22 @@
 <template>
   <el-form-item :label="i18nt('designer.setting.buttonIcon')">
-    <el-input type="text" v-model="optionModel.icon"></el-input>
+    <icon-picker v-model="optionModel.icon"></icon-picker>
   </el-form-item>
 </template>
 
 <script>
-  import i18n from "../../../../../../components/xform/utils/i18n"
-
-  export default {
-    name: "icon-editor",
-    mixins: [i18n],
-    props: {
-      designer: Object,
-      selectedWidget: Object,
-      optionModel: Object,
-    },
-  }
+import i18n from "@base/components/xform/utils/i18n";
+import IconPicker from "@base/components/xform/icon-picker/index.vue";
+export default {
+  name: "icon-editor",
+  components: { IconPicker },
+  mixins: [i18n],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+};
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>