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

package/src/components/formDialog/index.vue

@@ -1,724 +1,802 @@
-<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>
+<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>
+      <!-- 自定义按钮（formConfig.actionButtons / options.buttons）：固定取消 + 配置按钮，resolve {action, data} -->
+      <template v-else-if="visibleFooterButtons">
+        <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
+          v-for="btn in visibleFooterButtons"
+          :key="btn.code"
+          :type="btn.type || 'primary'"
+          :plain="btn.plain === true"
+          class="button-sty"
+          :loading="!!btnLoadingMap[btn.code]"
+          @click="handleActionButton(btn)"
+          ><i v-if="btn.icon" :class="[btn.icon, 'el-icon']"></i
+          >{{ btnLabel(btn) }}</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";
+import {
+  resolveActionButtons,
+  hasButtonPermission,
+  isButtonVisible,
+  runActionButton,
+} from "./actionButtons";
+
+// 自定义渲染逃生口：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,
+      // 自定义按钮（模板 formConfig.actionButtons / 调用方 options.buttons，权限过滤后）
+      customButtons: null,
+      btnLoadingMap: {},
+      formRefMounted: false,
+    };
+  },
+  computed: {
+    // 自定义按钮渲染列表：权限已在 initCustomButtons 过滤，此处按 visible 脚本过滤
+    //（依赖 formRefMounted：表单挂载后重算一次；不追踪 formData 变化）
+    visibleFooterButtons() {
+      if (!this.xformMode || !this.customButtons || !this.customButtons.length) {
+        return null;
+      }
+      this.formRefMounted; // eslint-disable-line no-unused-expressions
+      const buttons = this.customButtons.filter((btn) =>
+        isButtonVisible(btn, this.$refs.vFormRef)
+      );
+      return buttons.length ? buttons : null;
+    },
+    // 显隐联动：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._callerButtons = Array.isArray(options.buttons)
+        ? options.buttons
+        : null;
+      this._formCode = options.formCode || null;
+      this.customButtons = null;
+      this.btnLoadingMap = {};
+      this.formRefMounted = 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.initCustomButtons(formJson.formConfig, formCode || this._formCode);
+      this.xformReady = true;
+    },
+    // 自定义按钮：调用方 buttons 覆盖模板 actionButtons；权限（formCode:authName）在此一次性过滤
+    initCustomButtons(formConfig, formCode) {
+      const buttons = resolveActionButtons(this._callerButtons, formConfig);
+      this.customButtons = buttons
+        ? buttons.filter((btn) => hasButtonPermission(btn, formCode, this))
+        : null;
+    },
+    // VFormRender 为异步组件，挂载时机不确定，用 hook:mounted 收口
+    handleXformMounted() {
+      const formRef = this.$refs.vFormRef;
+      if (!formRef) return;
+      if (this.readonly) {
+        formRef.setReadMode(true);
+      }
+      this.formRefMounted = true;
+      if (typeof this._onReady === "function") {
+        this._onReady(formRef, this);
+      }
+    },
+    btnLabel(btn) {
+      return this.$t1 ? this.$t1(btn.label) : btn.label;
+    },
+    handleActionButton(btn) {
+      const formRef = this.$refs.vFormRef;
+      if (!formRef || this.btnLoadingMap[btn.code]) return;
+      this.$set(this.btnLoadingMap, btn.code, true);
+      const clearLoading = () => this.$set(this.btnLoadingMap, btn.code, false);
+      runActionButton(btn, {
+        formRef,
+        host: this,
+        getSelection: () => [],
+        onSettle: (payload, close) => {
+          this.settle(payload);
+          if (close) this.showWrap = false;
+        },
+      }).then(clearLoading, clearLoading);
+    },
+    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>