cloud-web-corejs 1.0.54-dev.754 → 1.0.54-dev.755

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.0.54-dev.754",
+  "version": "1.0.54-dev.755",
   "scripts": {
     "dev": "vue-cli-service serve",
     "lint": "eslint --ext .js,.vue src",
@@ -166,6 +166,7 @@
     "src/components/xform",
     "src/components/xhsPrint",
     "src/components/langTag",
+    "src/components/formDialog",
     "src/api",
     "src/views/bd",
     "src/views/support",
@@ -186,7 +187,6 @@
     "src/index.js",
     "src/public-path.js",
     "src/microRouter",
-    "src/formDialog",
     "src/App.vue"
   ],
   "publishConfig": {

package/src/components/formDialog/README.md

@@ -0,0 +1,239 @@
+# $formDialog 表单弹框
+
+JS 调用式表单弹框：传入字段配置即可打开一个可编辑表单，确认后以 Promise 返回表单数据，无需为每个小表单单独编写 `.vue` 弹框组件。
+
+- 组件位置：`src/components/formDialog/`
+- 全局注册：`src/index.js` 中 `Vue.use(FormDialog)`，挂载为 `Vue.prototype.$formDialog`
+- 示例页面：`src/views/support/form-dialog-demo/index.vue`（路由 `/support/form-dialog-demo`，11 个可运行示例）
+
+两种模式：
+
+1. **字段配置模式**（默认）——传 `fields` 数组，由本组件渲染 element 控件；
+2. **xform 整表模式**——传 `formCode`（或 `formJson`），弹框内渲染设计器里配置好的完整 xform 表单，见「xform 整表模式」一节。
+
+## 快速上手
+
+```js
+const data = await this.$formDialog({
+  title: "新增分类",
+  fields: [
+    { prop: "name", label: "名称", required: true },
+    {
+      prop: "type",
+      label: "类型",
+      type: "select",
+      options: [
+        { label: "普通", value: 1 },
+        { label: "重要", value: 2 },
+      ],
+    },
+    { prop: "enabled", label: "启用", type: "switch" },
+    { prop: "remark", label: "备注", type: "textarea" },
+  ],
+});
+// 点确定且校验通过 => data 为表单数据对象
+// 取消 / 右上角关闭 => data 为 null（不使用 reject，无需 catch）
+if (data !== null) {
+  // ...
+}
+```
+
+## 顶层 options
+
+| 参数 | 类型 | 默认值 | 说明 |
+|---|---|---|---|
+| `title` | String | `""` | 弹框标题 |
+| `width` | String | `"600px"` | 弹框宽度 |
+| `labelWidth` | String | `"100px"` | 表单 label 宽度 |
+| `model` | Object | `{}` | 初始值（编辑回显）。未提供的字段按类型补默认值 |
+| `fields` | Array | `[]` | 字段配置，见下 |
+| `rules` | Object | `{}` | 额外的 el-form 校验规则，与字段级 `required`/`rules` 合并 |
+| `readonly` | Boolean | `false` | 只读查看模式：整表单禁用，底部只有"关闭"按钮 |
+| `beforeConfirm` | Function | - | `(data) => Promise`。确认前钩子（常用于调保存接口），reject 则弹框不关闭；执行期间确定按钮 loading 防重复提交 |
+| `formCode` / `formJson` | String / Object | - | 传入即切换为 **xform 整表模式**（`fields` 不再生效），见「xform 整表模式」一节 |
+
+返回值：`Promise`。确认（校验通过、beforeConfirm 成功）resolve 表单数据浅拷贝；取消/关闭 resolve `null`。
+
+## 字段配置（field）
+
+### 通用属性
+
+| 属性 | 类型 | 说明 |
+|---|---|---|
+| `prop` | String | 字段名（必填，作为 model 的 key） |
+| `label` | String | 标签文字 |
+| `type` | String | 控件类型，缺省为 `input`，见下表 |
+| `span` | Number | 栅格宽度（24 为一行一个，默认 24） |
+| `required` | Boolean | 必填（自动生成"XX不能为空"规则） |
+| `rules` | Array/Object | 字段级校验规则 |
+| `placeholder` | String | 占位文案 |
+| `disabled` | Boolean / `(model) => Boolean` | 禁用（支持函数联动） |
+| `visible` | Boolean / `(model) => Boolean` | 显隐（支持函数联动；隐藏时不渲染、不参与校验） |
+| `props` | Object | 透传给底层 element 控件的 props（如 `min`/`max`/`multiple`/`valueFormat` 等，可覆盖默认值） |
+| `render` | `(h, model, field) => VNode` | 自定义渲染逃生口，内置类型覆盖不了时使用（配置了 render 则忽略 type） |
+| `onChange` | `(value, model, field, dialog) => void` | 值变化回调，见「联动」 |
+| `dependsOn` | Array\<String\> | 依赖字段列表，见「联动」 |
+
+### 控件类型（type）
+
+| type | 控件 | 值类型 | 说明 |
+|---|---|---|---|
+| `input`（默认） | el-input | String | |
+| `textarea` | el-input type=textarea | String | 默认 3 行 |
+| `number` | baseInputNumber | Number | 字段级 `scale`（小数位，默认 2，0=整数）、`negative`（允许负数）；`min`/`max` 走 `props` |
+| `select` | el-select | 任意 | 三种数据源见下节 |
+| `date` | el-date-picker | String | value-format 默认 `yyyy-MM-dd` |
+| `datetime` | el-date-picker | String | value-format 默认 `yyyy-MM-dd HH:mm:ss` |
+| `daterange` | el-date-picker | Array | value-format 默认 `yyyy-MM-dd` |
+| `switch` | el-switch | Boolean | |
+| `radio` | el-radio-group | 任意 | 用 `options` |
+| `checkbox` | el-checkbox-group | Array | 用 `options` |
+| `search` | el-input + 搜索图标 | String | 通用搜索框样式（同 xform vabsearch），见「搜索框」 |
+
+## 下拉数据源（select / radio / checkbox 通用）
+
+三选一：
+
+```js
+// 1. 静态值：数组（或函数，见「联动」）
+{ prop: "type", type: "select", options: [{ label: "普通", value: 1 }, "直接字符串也可以"] }
+
+// 2. 词汇：/user/common_attribute/listItems，显示 value、取值 sn（与 xform 约定一致）
+{ prop: "sex", type: "select", dictCode: "SEX", dictData: { ... } }
+
+// 3. 脚本编码："formCode/scriptCode"，先取服务名再请求 /{serviceName}/bd_api/{formCode}/{scriptCode}
+{
+  prop: "org", type: "select",
+  scriptCode: "demoForm/getOptions",
+  scriptData: { ... },        // 请求参数，也支持 (model) => ({...})
+  labelField: "name",         // 默认 "label"
+  valueField: "id",           // 默认 "value"
+  // 或完全自定义解析：
+  // parseOptions: (res) => [{ label, value }],
+}
+```
+
+远程选项加载中 select 显示 loading。脚本模式选项对象上带 `row`（原始行数据）。
+
+## 搜索框（type: "search"）
+
+样式与 xform vabsearch 控件一致：输入框内右侧 `el-icon-search` 图标 + 悬停清除图标。输入框默认禁止手输（值由选择回填），传 `props: { editable: true }` 放开。
+
+点击搜索图标的行为，三选一（优先级从上到下）：
+
+```js
+// 方式1：onSearch 完全自定义（自己开弹框、自己回写 model；model 是响应式的）
+{
+  prop: "customerName", label: "客户", type: "search",
+  onSearch: async (model, field) => { /* ... */ },
+  onClear: (model, field) => { model.customerId = null; model.customerName = null; },
+}
+
+// 方式2：searchComponent —— 打开自定义 Vue 弹框组件（走 utils/componentDialog）
+{
+  prop: "supplierName", label: "供应商", type: "search",
+  searchComponent: {
+    componentPath: "views/xx/pickerDialog.vue", // openComponentDialog 的全部选项均可透传
+    fieldMap: { supplierId: "id", supplierName: "name" },
+  },
+}
+// 组件契约：自带弹框（wrapper 默认 false）、确认时 $emit("confirm", rows)、
+// 关闭时 $emit("update:visiable", false)。参考 demo 的 demoPickerDialog.vue
+
+// 方式3：searchDialog —— 打开 xform 搜索弹框（searchFormDialog，按 formCode 渲染数据表格）
+{
+  prop: "billName", label: "单据", type: "search",
+  searchDialog: {
+    formCode: "xxx",            // 目标表单编码（需已配置搜索弹框）
+    multiple: false,
+    queryParam: { ... },        // 可选查询参数
+    rows: (model) => [...],     // 可选回显已选行，支持函数
+    fieldMap: { billId: "id", billName: "_tt" },
+    // layoutType: "PC",        // 默认 PC
+  },
+}
+```
+
+选中回写规则（方式2/3 共用，优先级从上到下）：
+
+1. `onConfirm(model, rows, field)` —— 完全自定义
+2. `fieldMap: { model字段: 行字段名 | (row, rows) => value }` —— 逐字段映射（函数形式可处理多选拼接）
+3. 默认把首行中与 `prop` 同名（或 `showField` 指定）的字段写回本字段
+
+清除图标触发 `onClear(model, field)`，不传则默认清空本字段；`clearable: false` 隐藏清除。
+
+## 联动
+
+四种机制可组合：
+
+```js
+fields: [
+  {
+    prop: "province", label: "省份", type: "select", options: [...],
+    // 1. onChange：任意字段值变化时触发（含搜索框 fieldMap 回写、render 控件改 model）
+    //    dialog 上可用：dialog.setFieldOptions(prop, options) 手动设选项
+    //                  dialog.reloadFieldOptions(prop) 按最新 model 重拉词汇/脚本选项
+    onChange: (val, model, field, dialog) => { ... },
+  },
+  {
+    prop: "city", label: "城市", type: "select",
+    // 2. dependsOn：依赖字段变化时自动清空自身值；
+    //    若选项来自 dictCode/scriptCode，会按最新 model 自动重新拉取
+    dependsOn: ["province"],
+    // 静态级联：options 支持函数，渲染时实时按 model 求值
+    options: (model) => cityMap[model.province] || [],
+    // 远程级联传参：dictData / scriptData 支持 (model) => ({...})
+  },
+  // 3. 显隐联动：隐藏时不渲染、不参与必填校验
+  { prop: "taxNo", label: "税号", required: true, visible: (model) => model.needInvoice },
+  // 4. 禁用联动
+  { prop: "reason", label: "原因", disabled: (model) => model.level !== 2 },
+]
+```
+
+实现方式为深度监听 model + 快照 diff，链式联动（A 变 → B 清 → B 的 onChange）可用；避免在 onChange 里循环写值。
+
+## xform 整表模式
+
+传 `formCode`（或直接传 `formJson`）即进入整表模式：不再走 `fields` 渲染，而是按 `USER_PREFIX + /formTemplate/getByFormCode` 加载表单模板（与 `views/user/form/vform/render.vue` 同链路），弹框内用 `VFormRender` 渲染完整 xform 表单——业务控件、明细表、脚本事件等设计器能力全部可用。
+
+```js
+const data = await this.$formDialog({
+  formCode: "xxx",              // 表单模板编码（与 formJson 二选一，formJson 直接传模板 JSON 对象）
+  // title: "自定义标题",        // 缺省取表单模板名称
+  // width: "1000px",           // 整表模式默认 1000px
+  model: { name: "初始值" },     // 初始数据，结构与 getFormData 一致（也可用 formData 字段名）
+  // readonly: true,            // 只读：走 xform setReadMode，底部只有"关闭"
+  // optionData: {},            // 透传 VFormRender 的 option-data
+  // globalDsv: {},             // 透传 VFormRender 的 global-dsv
+  onReady: (formRef, dialog) => {
+    // 表单挂载后回调，formRef 即 VFormRender 实例：
+    // formRef.setFieldValue / getWidgetRef / disableForm(...) 等 API 均可用
+  },
+  beforeConfirm: (formData) => this.$http({ ... }),  // 同字段模式，reject 不关闭
+});
+// data 为 xform getFormData 的完整表单数据（含明细表）；取消/关闭仍为 null
+```
+
+说明：
+
+- 确认时走 xform 自身的 `validateForm`（失败自动提示"必填项不能为空"并滚动定位到出错字段），通过后 resolve `getFormData` 的深拷贝。
+- `VFormRender` 为异步组件（独立 chunk），只在首次打开整表模式时加载，不增加主包体积；加载前会自动执行 `loadExtension()` 注册 xform 扩展控件。
+- 弹框规格与 xform 自己的 `dynamicDialogRender` 一致（`dialog-style list-dialog` + `.cont` 容器）。
+- 整表模式下 `fields`/`rules`/联动等字段配置模式的参数不生效——表单结构、校验、联动都在设计器里配置。
+
+## 其他说明
+
+- 每次调用创建独立实例，支持叠开多层弹框（如在 `onSearch` 里再开一层 `$formDialog`，见 demo 示例 7/8）。
+- 弹框规格与项目一致：`append-to-body`、禁点遮罩关闭、可拖拽（`v-el-drag-dialog`）、`dialog-style` 样式类。
+- 实例挂在 `window.$vueRoot` 之下，弹框内可正常使用 `$t2`、`$http`、`$getBaseDicts` 等原型能力。
+- 也可不经 Vue 实例调用：`import FormDialog from "@base/components/formDialog/index.js"; FormDialog.open({...})`。
+- 数字框底层为 `baseInputNumber`（`v-limit-number` 指令限制小数位/负号，支持按键、选区替换与粘贴校验）。
+
+## 与既有设施的分工
+
+| 场景 | 用什么 |
+|---|---|
+| 轻量配置化表单（增改查小弹框） | `$formDialog`（本组件） |
+| 复杂业务表单弹框（已有/需要专用 .vue） | `openComponentDialog`（`src/utils/componentDialog.js`） |
+| 按 xform 表单模板渲染的完整表单 | xform（`VFormRender` / `searchFormDialog`） |

package/src/components/formDialog/index.js

@@ -0,0 +1,35 @@
+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;

package/src/components/formDialog/index.vue

@@ -0,0 +1,724 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="showWrap"
+    :width="width"
+    :close-on-click-modal="false"
+    :append-to-body="true"
+    :custom-class="xformMode ? 'dialog-style list-dialog' : 'dialog-style'"
+    v-el-drag-dialog
+    @close="handleClose"
+    @closed="handleClosed"
+  >
+    <!-- xform 整表模式：按 formCode/formJson 渲染已配置的 xform 表单 -->
+    <div
+      v-if="xformMode"
+      class="cont"
+      v-loading="xformLoading"
+      :style="xformReady ? '' : 'min-height: 120px'"
+    >
+      <v-form-render
+        v-if="xformReady"
+        ref="vFormRef"
+        :form-json="xformJson"
+        :form-data="xformFormData"
+        :option-data="xformOptionData"
+        :global-dsv="xformGlobalDsv"
+        :report-template="xformTemplate"
+        :dynamic-creation="true"
+        @hook:mounted="handleXformMounted"
+      />
+    </div>
+    <el-form
+      v-else
+      ref="form"
+      :model="model"
+      :rules="mergedRules"
+      :label-width="labelWidth"
+      :disabled="readonly"
+      @submit.native.prevent
+    >
+      <el-row :gutter="16">
+        <el-col
+          v-for="field in visibleFields"
+          :key="field.prop"
+          :span="field.span || 24"
+        >
+          <el-form-item :label="field.label" :prop="field.prop">
+            <field-render
+              v-if="field.render"
+              :field="field"
+              :form-model="model"
+            />
+            <el-input
+              v-else-if="!field.type || field.type === 'input'"
+              v-model="model[field.prop]"
+              v-bind="controlProps(field)"
+            />
+            <el-input
+              v-else-if="field.type === 'textarea'"
+              v-model="model[field.prop]"
+              v-bind="controlProps(field)"
+            />
+            <el-input
+              v-else-if="field.type === 'search'"
+              class="search-input"
+              v-model="model[field.prop]"
+              v-el-readonly="searchReadonly(field)"
+              v-bind="controlProps(field)"
+              @clear="handleSearchClear(field)"
+            >
+              <i
+                slot="suffix"
+                class="el-input__icon el-icon-search"
+                @click="handleSearch(field)"
+              ></i>
+            </el-input>
+            <base-input-number
+              v-else-if="field.type === 'number'"
+              v-model="model[field.prop]"
+              style="width: 100%"
+              v-bind="controlProps(field)"
+            />
+            <el-select
+              v-else-if="field.type === 'select'"
+              v-model="model[field.prop]"
+              style="width: 100%"
+              :loading="optionsLoadingMap[field.prop]"
+              v-bind="controlProps(field)"
+            >
+              <el-option
+                v-for="opt in getOptions(field)"
+                :key="opt.value"
+                :label="opt.label"
+                :value="opt.value"
+              />
+            </el-select>
+            <el-date-picker
+              v-else-if="
+                field.type === 'date'
+                  || field.type === 'datetime'
+                  || field.type === 'daterange'
+              "
+              v-model="model[field.prop]"
+              style="width: 100%"
+              v-bind="controlProps(field)"
+            />
+            <el-switch
+              v-else-if="field.type === 'switch'"
+              v-model="model[field.prop]"
+              v-bind="controlProps(field)"
+            />
+            <el-radio-group
+              v-else-if="field.type === 'radio'"
+              v-model="model[field.prop]"
+              v-bind="controlProps(field)"
+            >
+              <el-radio
+                v-for="opt in getOptions(field)"
+                :key="opt.value"
+                :label="opt.value"
+                >{{ opt.label }}</el-radio
+              >
+            </el-radio-group>
+            <el-checkbox-group
+              v-else-if="field.type === 'checkbox'"
+              v-model="model[field.prop]"
+              v-bind="controlProps(field)"
+            >
+              <el-checkbox
+                v-for="opt in getOptions(field)"
+                :key="opt.value"
+                :label="opt.value"
+                >{{ opt.label }}</el-checkbox
+              >
+            </el-checkbox-group>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <template v-if="readonly">
+        <el-button type="primary" class="button-sty" @click="showWrap = false"
+          ><i class="el-icon-close el-icon"></i
+          >{{ $t2("关 闭", "system.button.close2") }}</el-button
+        >
+      </template>
+      <template v-else>
+        <el-button
+          type="primary"
+          plain
+          class="button-sty"
+          @click="showWrap = false"
+          ><i class="el-icon-close el-icon"></i
+          >{{ $t2("取 消", "system.button.cancel2") }}</el-button
+        >
+        <el-button
+          type="primary"
+          class="button-sty"
+          :loading="confirmLoading"
+          @click="handleConfirm"
+          ><i class="el-icon-check el-icon"></i
+          >{{ $t2("确 定", "system.button.confirm2") }}</el-button
+        >
+      </template>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { openComponentDialog } from "@base/utils/componentDialog";
+
+// 自定义渲染逃生口：field.render(h, formModel, field) 返回 VNode
+const FieldRender = {
+  functional: true,
+  props: {
+    field: { type: Object, required: true },
+    formModel: { type: Object, required: true },
+  },
+  render(h, ctx) {
+    return ctx.props.field.render(h, ctx.props.formModel, ctx.props.field);
+  },
+};
+
+export default {
+  name: "formDialog",
+  components: {
+    FieldRender,
+    // xform 渲染器按需加载（独立 chunk），加载前先注册 xform 扩展控件
+    VFormRender: () =>
+      import("@base/components/xform/extension/extension-loader").then(
+        (ext) => {
+          ext.loadExtension();
+          return import("@base/components/xform/form-render/index.vue");
+        }
+      ),
+  },
+  data() {
+    return {
+      title: "",
+      width: "600px",
+      labelWidth: "100px",
+      fields: [],
+      model: {},
+      rules: {},
+      readonly: false,
+      showWrap: false,
+      confirmLoading: false,
+      // 词汇/脚本编码等远程数据源取回的下拉选项，按 field.prop 存放
+      remoteOptionsMap: {},
+      optionsLoadingMap: {},
+      // xform 整表模式（formCode/formJson 二选一触发）
+      xformMode: false,
+      xformLoading: false,
+      xformReady: false,
+      xformJson: null,
+      xformFormData: {},
+      xformOptionData: {},
+      xformGlobalDsv: {},
+      xformTemplate: null,
+    };
+  },
+  computed: {
+    // 显隐联动：visible 为函数时按 model 动态计算，隐藏字段不渲染也不参与校验
+    visibleFields() {
+      return this.fields.filter((field) =>
+        typeof field.visible === "function"
+          ? !!field.visible(this.model)
+          : field.visible !== false
+      );
+    },
+    mergedRules() {
+      const rules = {};
+      this.fields.forEach((field) => {
+        const list = [];
+        if (field.required) {
+          list.push({
+            required: true,
+            message: `${field.label}${this.$t2(
+              "不能为空",
+              "system.validate.notEmpty"
+            )}`,
+            trigger: ["blur", "change"],
+          });
+        }
+        if (field.rules) {
+          list.push(...[].concat(field.rules));
+        }
+        if (list.length) {
+          rules[field.prop] = list;
+        }
+      });
+      Object.keys(this.rules || {}).forEach((prop) => {
+        rules[prop] = (rules[prop] || []).concat(this.rules[prop]);
+      });
+      return rules;
+    },
+  },
+  watch: {
+    // 联动入口：深度监听 model，diff 出变化字段后派发 onChange / dependsOn 级联
+    model: {
+      deep: true,
+      handler() {
+        this.handleModelChange();
+      },
+    },
+  },
+  methods: {
+    open(options = {}) {
+      if (options.formCode || options.formJson) {
+        return this.openXform(options);
+      }
+      const { fields = [], model = {} } = options;
+      const formModel = { ...model };
+      fields.forEach((field) => {
+        if (field.prop in formModel) return;
+        formModel[field.prop] = this.defaultFieldValue(field);
+      });
+
+      this.title = options.title || "";
+      this.width = options.width || "600px";
+      this.labelWidth = options.labelWidth || "100px";
+      this.fields = fields;
+      this.model = formModel;
+      this.rules = options.rules || {};
+      this.readonly = options.readonly === true;
+      this._beforeConfirm = options.beforeConfirm;
+      this._settled = false;
+      this._prevModel = this.$baseLodash.cloneDeep(formModel);
+      this.showWrap = true;
+      this.loadRemoteOptions();
+
+      return new Promise((resolve) => {
+        this._resolve = resolve;
+      });
+    },
+    // xform 整表模式：加载模板后由 VFormRender 渲染，确认走 xform 校验并返回表单数据
+    openXform(options) {
+      this.xformMode = true;
+      this.title = options.title || "";
+      this.width = options.width || "1000px";
+      this.readonly = options.readonly === true;
+      this._beforeConfirm = options.beforeConfirm;
+      this._onReady = options.onReady;
+      this._settled = false;
+      this.xformFormData = options.model || options.formData || {};
+      this.xformOptionData = options.optionData || {};
+      this.xformGlobalDsv = options.globalDsv || {};
+      this.showWrap = true;
+
+      if (options.formJson) {
+        this.initXformJson(options.formJson, options.formCode);
+      } else {
+        this.loadXformTemplate(options.formCode);
+      }
+      return new Promise((resolve) => {
+        this._resolve = resolve;
+      });
+    },
+    // 与 vform/render.vue 同链路：formTemplate/getByFormCode 取模板 JSON
+    loadXformTemplate(formCode) {
+      this.xformLoading = true;
+      this.$http({
+        aes: true,
+        url: USER_PREFIX + "/formTemplate/getByFormCode",
+        method: "post",
+        data: { stringOne: formCode },
+        isLoading: false,
+        success: (res) => {
+          this.xformLoading = false;
+          const template = res.objx || {};
+          const formJson = template.formViewContent
+            ? JSON.parse(template.formViewContent)
+            : {};
+          this.xformTemplate = template;
+          if (!this.title) {
+            this.title = template.name || template.formName || "";
+          }
+          this.initXformJson(formJson, formCode);
+        },
+      });
+    },
+    initXformJson(formJson, formCode) {
+      if (!formJson || !formJson.formConfig) {
+        this.$message.error(
+          `${this.$t2("表单模板不存在或内容为空", "system.message.formTemplateEmpty")}: ${formCode || ""}`
+        );
+        return;
+      }
+      this.xformJson = formJson;
+      this.xformReady = true;
+    },
+    // VFormRender 为异步组件，挂载时机不确定，用 hook:mounted 收口
+    handleXformMounted() {
+      const formRef = this.$refs.vFormRef;
+      if (!formRef) return;
+      if (this.readonly) {
+        formRef.setReadMode(true);
+      }
+      if (typeof this._onReady === "function") {
+        this._onReady(formRef, this);
+      }
+    },
+    handleXformConfirm() {
+      const formRef = this.$refs.vFormRef;
+      if (!formRef) return;
+      // validateForm 自带失败提示与滚动定位；通过后 getFormData(false) 直取数据
+      formRef.validateForm((valid) => {
+        if (!valid) return;
+        this.confirmWithData(this.$baseLodash.cloneDeep(formRef.getFormData(false)));
+      });
+    },
+    defaultFieldValue(field) {
+      if (field.type === "checkbox" || field.type === "daterange") return [];
+      if (field.type === "switch") return false;
+      return null;
+    },
+    evalFieldFlag(value) {
+      return typeof value === "function" ? !!value(this.model) : value;
+    },
+    getOptions(field) {
+      // 选项来源优先级：远程结果 > options 函数（可依赖 model 做级联）> 静态数组
+      const source
+        = this.remoteOptionsMap[field.prop]
+        || (typeof field.options === "function"
+          ? field.options(this.model)
+          : field.options)
+        || [];
+      return source.map((opt) =>
+        opt !== null && typeof opt === "object"
+          ? opt
+          : { label: String(opt), value: opt }
+      );
+    },
+    // 联动派发：对比上次快照，逐字段触发 onChange，并处理 dependsOn 级联
+    handleModelChange() {
+      const prev = this._prevModel || {};
+      const current = this.model;
+      const keys = new Set([...Object.keys(current), ...Object.keys(prev)]);
+      const changedKeys = [];
+      keys.forEach((key) => {
+        if (!this.$baseLodash.isEqual(current[key], prev[key])) {
+          changedKeys.push(key);
+        }
+      });
+      if (!changedKeys.length) return;
+      this._prevModel = this.$baseLodash.cloneDeep(current);
+
+      changedKeys.forEach((key) => {
+        const field = this.fields.find((item) => item.prop === key);
+        if (field && typeof field.onChange === "function") {
+          field.onChange(current[key], current, field, this);
+        }
+        // dependsOn：依赖字段变化时清空自身值并刷新远程选项
+        this.fields.forEach((item) => {
+          if (Array.isArray(item.dependsOn) && item.dependsOn.includes(key)) {
+            if (
+              !this.$baseLodash.isEqual(
+                current[item.prop],
+                this.defaultFieldValue(item)
+              )
+            ) {
+              this.$set(this.model, item.prop, this.defaultFieldValue(item));
+            }
+            this.reloadFieldOptions(item.prop);
+          }
+        });
+      });
+    },
+    // 供 onChange 回调使用：手动覆盖某字段选项
+    setFieldOptions(prop, options) {
+      this.$set(this.remoteOptionsMap, prop, options || []);
+    },
+    // 供 onChange 回调使用：按最新 model 重新拉取词汇/脚本选项
+    reloadFieldOptions(prop) {
+      const field = this.fields.find((item) => item.prop === prop);
+      if (!field) return;
+      if (field.dictCode) {
+        this.fetchDictOptions(field);
+      } else if (field.scriptCode) {
+        this.fetchScriptOptions(field);
+      }
+    },
+    loadRemoteOptions() {
+      this.remoteOptionsMap = {};
+      this.optionsLoadingMap = {};
+      this.fields.forEach((field) => {
+        if (field.dictCode) {
+          this.fetchDictOptions(field);
+        } else if (field.scriptCode) {
+          this.fetchScriptOptions(field);
+        }
+      });
+    },
+    // 词汇：/user/common_attribute/listItems，显示 value、取值 sn（与 xform 约定一致）
+    fetchDictOptions(field) {
+      this.$set(this.optionsLoadingMap, field.prop, true);
+      this.$getBaseDicts({
+        code: field.dictCode,
+        data:
+          typeof field.dictData === "function"
+            ? field.dictData(this.model)
+            : field.dictData,
+        success: ({ dicts }) => {
+          this.$set(this.optionsLoadingMap, field.prop, false);
+          this.$set(
+            this.remoteOptionsMap,
+            field.prop,
+            dicts.map((item) => ({ label: item.value, value: item.sn }))
+          );
+        },
+      });
+    },
+    // 脚本编码："formCode/scriptCode"，先取服务名再请求 bd_api 脚本接口
+    fetchScriptOptions(field) {
+      const parts = String(field.scriptCode)
+        .split("/")
+        .filter((item) => item);
+      if (parts.length < 2) {
+        console.warn(
+          `[formDialog] scriptCode 需为 "formCode/scriptCode" 格式：${field.scriptCode}`
+        );
+        return;
+      }
+      const [formCode, scriptCode] = parts;
+      this.$set(this.optionsLoadingMap, field.prop, true);
+      this.$http({
+        aes: true,
+        url: USER_PREFIX + "/formScript/getServiceName",
+        method: "post",
+        data: { formCode, scriptCode },
+        isLoading: false,
+        success: (res) => {
+          const serviceName = res.objx;
+          if (!serviceName) {
+            this.$set(this.optionsLoadingMap, field.prop, false);
+            this.$baseAlert("服务名不存在");
+            return;
+          }
+          this.$http({
+            url: `/${serviceName}/bd_api/${formCode}/${scriptCode}`,
+            method: "post",
+            data: {
+              ...(typeof field.scriptData === "function"
+                ? field.scriptData(this.model)
+                : field.scriptData),
+            },
+            isLoading: false,
+            success: (res2) => {
+              this.$set(this.optionsLoadingMap, field.prop, false);
+              let options;
+              if (typeof field.parseOptions === "function") {
+                options = field.parseOptions(res2) || [];
+              } else {
+                const objx = res2.objx;
+                const rows = Array.isArray(objx)
+                  ? objx
+                  : (objx && objx.records) || [];
+                const labelField = field.labelField || "label";
+                const valueField = field.valueField || "value";
+                options = rows.map((row) => ({
+                  label: row[labelField],
+                  value: row[valueField],
+                  row,
+                }));
+              }
+              this.$set(this.remoteOptionsMap, field.prop, options);
+            },
+          });
+        },
+      });
+    },
+    // 搜索框默认禁止手输（值由选择回填），传 props: { editable: true } 可放开
+    searchReadonly(field) {
+      return !(field.props && field.props.editable === true);
+    },
+    handleSearch(field) {
+      if (this.readonly || this.evalFieldFlag(field.disabled)) return;
+      if (typeof field.onSearch === "function") {
+        field.onSearch(this.model, field);
+      } else if (field.searchComponent) {
+        this.openSearchComponent(field);
+      } else if (field.searchDialog) {
+        this.openXformSearchDialog(field);
+      }
+    },
+    // 方式2：按路径打开自定义 Vue 弹框组件，组件 $emit("confirm", rows) 回写
+    openSearchComponent(field) {
+      const cfg = field.searchComponent;
+      const events = cfg.events || {};
+      openComponentDialog(
+        {
+          wrapper: false,
+          ...cfg,
+          events: {
+            ...events,
+            confirm: (...args) => {
+              if (typeof events.confirm === "function") {
+                events.confirm(...args);
+              }
+              this.applySearchResult(field, args[0], cfg);
+            },
+          },
+        },
+        this
+      );
+    },
+    // 方式3：打开 xform 搜索弹框（searchFormDialog，按 formCode 渲染目标表单的数据表格）
+    openXformSearchDialog(field) {
+      const cfg = field.searchDialog;
+      const { layoutType, fieldMap, onConfirm, showField, ...option } = cfg;
+      openComponentDialog(
+        {
+          componentPath:
+            "components/xform/form-designer/form-widget/dialog/searchFormDialog.vue",
+          wrapper: false,
+          // searchFormDialog 在 xform 环境外运行需要注入 getFormConfig
+          provide: {
+            getFormConfig: () => ({ layoutType: layoutType || "PC" }),
+          },
+          props: {
+            option: {
+              multiple: false,
+              ...option,
+              rows:
+                typeof cfg.rows === "function" ? cfg.rows(this.model) : cfg.rows,
+              confirm: (rows, formRef, dialogVm) => {
+                if (typeof cfg.confirm === "function") {
+                  return cfg.confirm(rows, formRef, dialogVm);
+                }
+                this.applySearchResult(field, rows, cfg);
+              },
+            },
+          },
+        },
+        this
+      );
+    },
+    // 选中结果回写 model：onConfirm 完全自定义 > fieldMap 逐字段映射 > 默认回写本字段
+    applySearchResult(field, rows, cfg) {
+      const list = Array.isArray(rows) ? rows : rows ? [rows] : [];
+      if (typeof cfg.onConfirm === "function") {
+        cfg.onConfirm(this.model, list, field);
+        return;
+      }
+      if (!list.length) return;
+      const row = list[0];
+      if (cfg.fieldMap) {
+        Object.keys(cfg.fieldMap).forEach((modelKey) => {
+          const source = cfg.fieldMap[modelKey];
+          this.$set(
+            this.model,
+            modelKey,
+            typeof source === "function" ? source(row, list) : row[source]
+          );
+        });
+      } else {
+        this.$set(this.model, field.prop, row[cfg.showField || field.prop]);
+      }
+    },
+    handleSearchClear(field) {
+      if (this.readonly || this.evalFieldFlag(field.disabled)) return;
+      if (typeof field.onClear === "function") {
+        field.onClear(this.model, field);
+      } else {
+        this.model[field.prop] = null;
+      }
+    },
+    controlProps(field) {
+      const defaults = {
+        placeholder: field.placeholder,
+        disabled: this.evalFieldFlag(field.disabled),
+        clearable: true,
+      };
+      switch (field.type) {
+        case "textarea":
+          Object.assign(defaults, { type: "textarea", rows: 3 });
+          break;
+        case "search":
+          // 搜索框与 xform vabsearch 同款样式：suffix 搜索图标 + clearable；
+          // 只读用 v-el-readonly（原生 readonly，不影响清除图标），不走 readonly prop
+          defaults.clearable = field.clearable !== false;
+          break;
+        case "number":
+          // baseInputNumber：scale 控制小数位（v-limit-number），negative 放开负号输入
+          Object.assign(defaults, {
+            scale: field.scale != null ? field.scale : 2,
+            negative: field.negative,
+            controls: false,
+          });
+          break;
+        case "date":
+          Object.assign(defaults, { type: "date", valueFormat: "yyyy-MM-dd" });
+          break;
+        case "datetime":
+          Object.assign(defaults, {
+            type: "datetime",
+            valueFormat: "yyyy-MM-dd HH:mm:ss",
+          });
+          break;
+        case "daterange":
+          Object.assign(defaults, {
+            type: "daterange",
+            valueFormat: "yyyy-MM-dd",
+          });
+          break;
+      }
+      const merged = { ...defaults, ...field.props };
+      if (field.type === "search") {
+        // editable 只用于 searchReadonly 判断，不透传给 el-input
+        delete merged.editable;
+      }
+      return merged;
+    },
+    settle(value) {
+      if (this._settled) return;
+      this._settled = true;
+      if (this._resolve) {
+        this._resolve(value);
+      }
+    },
+    handleConfirm() {
+      if (this.xformMode) {
+        this.handleXformConfirm();
+        return;
+      }
+      this.$refs.form.validate((valid) => {
+        if (!valid) return;
+        this.confirmWithData({ ...this.model });
+      });
+    },
+    confirmWithData(data) {
+      if (typeof this._beforeConfirm === "function") {
+        this.confirmLoading = true;
+        Promise.resolve()
+          .then(() => this._beforeConfirm(data))
+          .then(() => {
+            this.confirmLoading = false;
+            this.settle(data);
+            this.showWrap = false;
+          })
+          .catch(() => {
+            // beforeConfirm 失败时不关闭弹框，由调用方自行提示错误
+            this.confirmLoading = false;
+          });
+      } else {
+        this.settle(data);
+        this.showWrap = false;
+      }
+    },
+    handleClose() {
+      // 取消/右上角关闭：resolve(null)；确认路径已先 settle，此处不生效
+      this.settle(null);
+    },
+    handleClosed() {
+      this.$destroy();
+      if (this.$el && this.$el.parentNode) {
+        this.$el.parentNode.removeChild(this.$el);
+      }
+    },
+  },
+};
+</script>
+
+<style></style>