cloud-web-corejs 1.0.54-dev.709 → 1.0.54-dev.710

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.0.54-dev.709",
+  "version": "1.0.54-dev.710",
   "scripts": {
     "dev": "vue-cli-service serve",
     "lint": "eslint --ext .js,.vue src",

package/src/components/xform/docs/autocomplete /350/207/252/345/212/250/345/256/214/346/210/220/347/273/204/344/273/266/350/257/264/346/230/216.md"

@@ -0,0 +1,128 @@
+# autocomplete 自动完成组件
+
+基于 `el-autocomplete` 的远程搜索表单字段，支持**同时存储 ID 和名称**，可配置**后台逻辑脚本编码**进行远程搜索。
+
+## 特性
+
+- 远程搜索：输入关键词实时调用后台逻辑脚本获取候选项
+- 双值存储：选中后 ID 存入字段本身（`keyName`），名称存入展示字段（`vabSearchName`）
+- 逻辑脚本配置：复用 `httpConfig`（`formScriptCode` / `formScriptParam` / `formScriptSuccess`）
+- 选中回填：选中某项后可自动回填其他表单字段
+- ID 反查：编辑态可选通过反查脚本根据 ID 获取名称回显
+- 自定义下拉项模板：支持脚本自定义候选项展示 HTML
+- 支持子表单、只读模式、流程属性、显示规则等通用能力
+
+## 文件清单
+
+| 文件 | 作用 |
+|------|------|
+| `form-designer/form-widget/field-widget/autocomplete-widget.vue` | 运行期/设计期共用字段组件 |
+| `form-designer/form-widget/field-widget/mixins/autocomplete-mixin.js` | 核心逻辑（远程搜索、选择、回填、反查） |
+| `form-designer/widget-panel/widgetsConfig.js` | `autocompleteConfig` schema + 注册到 `advancedFields` |
+| `form-designer/setting-panel/property-editor/field-autocomplete/autocomplete-vabSearchName-editor.vue` | 属性编辑器（展示字段、回填配置等） |
+| `lang/zh-CN.js` / `lang/en-US.js` | 组件库标签 i18n |
+
+## 设计器配置
+
+在表单设计器左侧「高级字段」分组中拖入「自动完成」组件，右侧属性面板可配置：
+
+### 自动完成设置（`autocomplete-vabSearchName-editor`）
+- **存储ID字段**（`valueField`）：候选项数据中 ID 对应的字段名，留空则使用字段本身 `keyName`
+- **存储名称字段**（`vabSearchName`）：选中后名称持久化到的表单字段名
+- **输入提示**（`placeholder`）
+- **可清空**（`clearable`）
+- **聚焦即查询**（`triggerOnFocus`）：聚焦空输入框时是否触发一次查询
+- **防抖(ms)**（`debounce`）：输入防抖毫秒数
+- **ID反查脚本编码**（`getByIdScriptCode`）：选填，编辑态根据 ID 反查名称
+- **清空回调**（`onSearchClear`）
+- **下拉项模板**（`autocompleteItemTemplate`）：脚本，入参 `item`，返回 HTML 字符串
+- **选中回填**（`autocompleteFillConfig`）：数组，每项 `{ targetField, targetFormField, sourceField }`
+
+### 请求访问设置（复用 `formScriptEnabled-editor`）
+- **表单脚本编码**（`formScriptCode`）：远程搜索的后台逻辑脚本编码（必填）
+- **查询参数**（`formScriptParam`）：脚本，返回额外请求参数对象
+- **查询回调**（`formScriptSuccess`）：脚本，入参 `res`、`rows`，可返回处理后的数组
+
+## 远程搜索请求约定
+
+`querySearchAsync` 调用 `formHttp`，请求结构：
+
+```js
+{
+  scriptCode: formScriptCode,        // 配置的逻辑脚本编码
+  data: {
+    formCode,                        // 当前表单编码
+    formVersion,                     // 表单版本
+    taBm: fieldKeyName,              // 字段名
+    data: {
+      ...accessParam,                // formScriptParam 返回的额外参数
+      keyword: queryString           // 用户输入的关键词
+    }
+  }
+}
+```
+
+后台脚本返回的数据（`res.objx`）应为数组（或 `{ records: [...] }`），每个元素至少包含：
+- ID 字段：对应配置的 `valueField`（或字段 `keyName`）
+- 名称字段：对应配置的 `vabSearchName`
+
+`formScriptSuccess` 回调可对返回结果二次处理，返回新数组。
+
+## 选中行为
+
+`handleSelect(item)`：
+1. 取 `item[valueField]` 作为 ID，写入 `currentData[fieldKeyName]`（提交字段）
+2. 取 `item[labelField]` 作为名称，写入 `currentData[vabSearchName]`（展示字段）
+3. 按 `autocompleteFillConfig` 把 `item[sourceField]` 回填到目标字段/属性
+4. 触发 `onChange(value, oldValue, item)` 自定义事件
+
+## 清空行为
+
+`handleClear()`：同时清空 ID 与名称，触发 `onSearchClear`。
+
+## 编辑态回显
+
+- 默认：表单数据中 ID（`keyName`）与名称（`vabSearchName`）同时存在时，直接回显名称
+- 仅 ID 无名称：若配置了 `getByIdScriptCode`，`mounted` 时自动调用反查脚本获取名称回显
+
+反查脚本请求结构：
+```js
+{
+  scriptCode: getByIdScriptCode,
+  data: { formCode, formVersion, taBm, data: { ...accessParam, id } }
+}
+```
+
+## 与 vabsearch 的区别
+
+| 维度 | vabsearch | autocomplete |
+|------|-----------|--------------|
+| 交互 | 点击弹框选择 | 输入实时搜索下拉选择 |
+| 组件 | `el-input` + 弹框 | `el-autocomplete` |
+| 多选 | 支持 | 不支持（单选） |
+| 脚本 | 弹框表单编码 | 逻辑脚本编码（远程搜索） |
+| 存储 | ID + 名称 | ID + 名称（同） |
+
+## 关键选项 JSON 示例
+
+```json
+{
+  "type": "autocomplete",
+  "options": {
+    "name": "input123456",
+    "keyNameEnabled": true,
+    "keyName": "customer_id",
+    "vabSearchName": "customer_name",
+    "label": "客户",
+    "valueField": "id",
+    "formScriptEnabled": true,
+    "formScriptCode": "searchCustomer",
+    "triggerOnFocus": true,
+    "debounce": 300,
+    "clearable": true,
+    "autocompleteFillConfig": [
+      { "targetFormField": "customer_code", "sourceField": "code" }
+    ]
+  }
+}
+```

package/src/components/xform/form-designer/form-widget/field-widget/autocomplete-widget.vue

@@ -0,0 +1,77 @@
+<template>
+  <form-item-wrapper :designer="designer" :field="field" :rules="rules" :design-state="designState"
+                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
+                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex"
+                     :sub-form-row-id="subFormRowId">
+    <el-autocomplete
+      ref="fieldEditor"
+      v-model="displayValue"
+      v-show="!isReadMode"
+      class="full-width-input"
+      :disabled="field.options.disabled"
+      :readonly="field.options.readonly"
+      :size="field.options.size"
+      :placeholder="getI18nLabel(field.options.placeholder || '请输入关键词搜索')"
+      :clearable="field.options.clearable"
+      :fetch-suggestions="querySearchAsync"
+      :trigger-on-focus="field.options.triggerOnFocus !== false"
+      :debounce="field.options.debounce || 300"
+      :value-key="valueKey"
+      :prefix-icon="field.options.prefixIcon"
+      :suffix-icon="field.options.suffixIcon"
+      :popper-class="field.options.customClass ? field.options.customClass.join(' ') : ''"
+      @select="handleSelect"
+      @clear="handleClear"
+      @focus="handleFocusCustomEvent"
+      @blur="handleBlurCustomEvent"
+      @input="handleInputChange"
+      :style="'width:' + field.options.widgetWidth + ' !important;'"
+      :class="{'custom-width': field.options.widgetWidth != null}">
+      <template slot-scope="{ item }">
+        <template v-if="field.options.autocompleteItemTemplate">
+          <!-- 支持自定义下拉项模板脚本(返回 HTML 字符串) -->
+          <span v-html="renderItemTemplate(item)"></span>
+        </template>
+        <template v-else>
+          <span>{{ item[valueKey] }}</span>
+        </template>
+      </template>
+    </el-autocomplete>
+    <template v-if="isReadMode">
+      <span class="readonly-mode-field">{{ displayValue }}</span>
+    </template>
+  </form-item-wrapper>
+</template>
+
+<script>
+import mixins from "@base/components/xform/form-designer/form-widget/field-widget/mixins/autocomplete-mixin";
+
+export default {
+  name: "autocomplete-widget",
+  componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+  mixins: [mixins],
+  methods: {
+    /**
+     * 渲染自定义下拉项模板(可选)。
+     * autocompleteItemTemplate 为一段返回 HTML 字符串的脚本，入参为 item
+     */
+    renderItemTemplate(item) {
+      if (!this.field.options.autocompleteItemTemplate) return "";
+      try {
+        let fn = new Function("item", this.field.options.autocompleteItemTemplate);
+        return fn.call(this, item) || "";
+      } catch (e) {
+        return "";
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/global.scss";
+
+.full-width-input {
+  width: 100% !important;
+}
+</style>

package/src/components/xform/form-designer/form-widget/field-widget/mixins/autocomplete-mixin.js

@@ -0,0 +1,377 @@
+import FormItemWrapper from "@base/components/xform/form-designer/form-widget/field-widget/form-item-wrapper";
+import emitter from "@base/components/xform/utils/emitter";
+import i18n from "@base/components/xform/utils/i18n";
+import { deepClone, trim } from "@base/components/xform/utils/util";
+import fieldMixin from "@base/components/xform/form-designer/form-widget/field-widget/fieldMixin";
+
+export default {
+  mixins: [emitter, fieldMixin, i18n],
+  props: {
+    field: Object,
+    parentWidget: Object,
+    parentList: Array,
+    indexOfParentList: Number,
+    designer: Object,
+
+    designState: {
+      type: Boolean,
+      default: false,
+    },
+
+    columnConfig: {
+      type: Object,
+      default: null,
+    },
+    subFormRowIndex: {
+      /* 子表单组件行索引，从0开始计数 */
+      type: Number,
+      default: -1,
+    },
+    subFormColIndex: {
+      /* 子表单组件列索引，从0开始计数 */
+      type: Number,
+      default: -1,
+    },
+    subFormRowId: {
+      /* 子表单组件行Id，唯一id且不可变 */
+      type: String,
+      default: "",
+    },
+  },
+  components: {
+    FormItemWrapper,
+  },
+  data() {
+    return {
+      oldFieldValue: null, //field组件change之前的值
+      fieldModel: null, //存储 ID 值（提交字段）
+      displayValue: null, //el-autocomplete 的 v-model，存储展示名称（仅用于输入框显示）
+      rules: [],
+      isSelecting: false, //标记当前是否由"选择某一项"触发的输入变化
+      lastQueryKeyword: null, //最近一次查询关键词，避免重复查询
+    };
+  },
+  watch: {
+    fieldModel(val) {
+      //同步 ID 到当前数据行/表单模型
+      let currentData = this.currentData;
+      let fieldKeyName = this.fieldKeyName;
+      currentData[fieldKeyName] = val;
+    },
+    showValue(val) {
+      //外部回显：当 currentData[labelField] 变化时，同步到输入框
+      this.displayValue = val;
+    },
+  },
+  computed: {
+    /**
+     * 选项数据中"ID/值"对应的字段名
+     */
+    valueField() {
+      return trim(this.field.options.valueField) || this.fieldKeyName;
+    },
+    /**
+     * 选项数据中"名称"对应的字段名（同时作为持久化到表单数据的展示字段）
+     */
+    labelField() {
+      return trim(this.field.options.vabSearchName) || this.fieldKeyName;
+    },
+    /**
+     * el-autocomplete 下拉项展示用的 value-key
+     */
+    valueKey() {
+      return this.labelField;
+    },
+    tableRow() {
+      let tableParam = this.tableParam;
+      return tableParam && tableParam.row ? tableParam.row : null;
+    },
+    currentData() {
+      let tableParam = this.tableParam;
+      return tableParam && tableParam.row ? tableParam.row : this.formModel;
+    },
+    /**
+     * 表单数据中持久化的展示名称，用于回显
+     */
+    showValue() {
+      let currentData = this.currentData;
+      let labelField = this.labelField;
+      let value = currentData[labelField] ?? null;
+      this.displayValue = value;
+      return value;
+    },
+  },
+  beforeCreate() {
+    /* 这里不能访问方法和属性！！ */
+  },
+
+  created() {
+    /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+       需要在父组件created中初始化！！ */
+    this.initFieldModel();
+    this.registerToRefList();
+    this.initEventHandler();
+    this.buildFieldRules();
+
+    this.handleOnCreated();
+  },
+
+  mounted() {
+    this.handleOnMounted();
+    //编辑态回显：若有 ID 但无名称，且配置了反查脚本，则自动反查
+    this.$nextTick(() => {
+      if (this.designState) return;
+      let id = this.fieldModel;
+      let label = this.currentData[this.labelField];
+      if (this.isNotNullVal(id) && !this.isNotNullVal(label)) {
+        this.fetchLabelById(id);
+      }
+    });
+  },
+
+  beforeDestroy() {
+    this.unregisterFromRefList();
+  },
+
+  methods: {
+    /**
+     * 设置展示名称到当前数据行/表单模型，并同步到输入框
+     */
+    setShowValue(val = null) {
+      let labelField = this.labelField;
+      this.currentData[labelField] = val;
+      this.displayValue = val;
+    },
+    setValue: function (e) {
+      if (this.field.formItemFlag) {
+        let value = e ?? null;
+        let currentData = this.currentData;
+        if (void 0 === currentData[this.fieldKeyName]) {
+          this.$set(currentData, this.fieldKeyName, null);
+        }
+        let t = deepClone(this.fieldModel);
+        this.fieldModel = value;
+        this.initFileList();
+        this.syncUpdateFormModel(value);
+        this.emitFieldDataChange(value, t);
+      }
+    },
+    fieldModelLabel() {
+      return this.displayValue;
+    },
+    /**
+     * 远程搜索：调用后台逻辑脚本，返回建议列表
+     * el-autocomplete 的 fetch-suggestions 回调签名 (queryString, callback)
+     */
+    querySearchAsync(queryString, cb) {
+      if (this.designState) {
+        cb([]);
+        return;
+      }
+      let formScriptEnabled = this.field.options.formScriptEnabled || false;
+      let scriptCode = this.field.options.formScriptCode;
+      if (!formScriptEnabled || !scriptCode) {
+        cb([]);
+        return;
+      }
+      //避免对相同关键词重复查询（el-autocomplete focus/input 都会触发）
+      let keyword = queryString == null ? "" : String(queryString);
+      if (
+        keyword === this.lastQueryKeyword
+        && this._lastSuggestions
+        && this._lastSuggestions.length
+      ) {
+        cb(this._lastSuggestions);
+        return;
+      }
+      this.lastQueryKeyword = keyword;
+
+      let reportTemplate = this.getFormRef().reportTemplate;
+      let formCode = reportTemplate.formCode;
+      let accessParam = this.handleCustomEvent(
+        this.field.options.formScriptParam
+      );
+      let taBm = this.fieldKeyName;
+      let data = {
+        formCode: formCode,
+        formVersion: reportTemplate.formVersion,
+        taBm: taBm,
+        data: {
+          ...accessParam,
+          keyword: keyword,
+        },
+      };
+      return this.formHttp({
+        scriptCode: scriptCode,
+        isLoading: false,
+        data: data,
+        callback: (res) => {
+          let rows = res.objx?.records || res.objx || [];
+          //允许通过 formScriptSuccess 对结果进行二次处理
+          let handled = this.handleCustomEvent(
+            this.field.options.formScriptSuccess,
+            ["res", "rows"],
+            [res, rows]
+          );
+          if (Array.isArray(handled)) {
+            rows = handled;
+          }
+          this._lastSuggestions = rows;
+          cb(rows);
+        },
+        fail: () => {
+          cb([]);
+        },
+        error: () => {
+          cb([]);
+        },
+      });
+    },
+    /**
+     * 选中某一项：存储 ID 与名称，并回填配置的其他字段
+     */
+    handleSelect(item) {
+      this.isSelecting = true;
+      try {
+        let valueField = this.valueField;
+        let labelField = this.labelField;
+        let id = item[valueField] ?? null;
+        let label = item[labelField] ?? null;
+
+        //存储 ID（提交字段）
+        this.setValue(id);
+        //存储展示名称（持久化到表单数据 + 输入框）
+        this.setShowValue(label);
+
+        //回填其他字段
+        this.fillBackFields(item);
+
+        //触发 onChange 自定义事件
+        if (this.field.options.onChange) {
+          let fn = new Function(
+            "value",
+            "oldValue",
+            "item",
+            this.field.options.onChange
+          );
+          fn.call(this, id, this.oldFieldValue, item);
+        }
+      } finally {
+        this.$nextTick(() => {
+          this.isSelecting = false;
+        });
+      }
+    },
+    /**
+     * 清空：同时清除 ID 与名称
+     */
+    handleClear() {
+      this.setValue(null);
+      this.setShowValue(null);
+      this.lastQueryKeyword = null;
+      this._lastSuggestions = null;
+      if (this.field.options.onSearchClear) {
+        let tableParam = this.tableParam;
+        let eventParamNames = [];
+        let eventParamValues = [];
+        if (tableParam) {
+          eventParamNames = ["rowData", "rowIndex"];
+          eventParamValues = [tableParam.row, tableParam.rowIndex];
+        }
+        this.handleCustomEvent(
+          this.field.options.onSearchClear,
+          eventParamNames,
+          eventParamValues
+        );
+      }
+    },
+    /**
+     * 输入框内容变化：若非"选中"触发，且与已存储名称不一致，则清空 ID（用户正在重新搜索）
+     */
+    handleInputChange(text) {
+      if (this.isSelecting) return;
+      if (!this.designState) {
+        if (!text) {
+          //输入框被清空（非通过 clear 按钮）
+          this.setValue(null);
+          this.setShowValue(null);
+          return;
+        }
+        let storedLabel = this.currentData[this.labelField];
+        if (text !== storedLabel) {
+          //用户手动输入了与已选中名称不同的内容，清空已存储的 ID 与名称
+          this.fieldModel = null;
+          this.currentData[this.fieldKeyName] = null;
+          this.currentData[this.labelField] = null;
+          this.oldFieldValue = null;
+        }
+      }
+      //同步到表单模型并派发校验
+      this.dispatch("VFormRender", "fieldValidation", [this.getPropName()]);
+      if (this.field.options.onInput) {
+        let fn = new Function("value", this.field.options.onInput);
+        fn.call(this, text);
+      }
+    },
+    /**
+     * 根据回填配置把选中项的其他字段值写入表单
+     */
+    fillBackFields(item) {
+      let fillConfig = this.field.options.autocompleteFillConfig || [];
+      if (!fillConfig.length) return;
+      let formModel = this.formModel;
+      fillConfig.forEach((cfg) => {
+        let targetField = trim(cfg.targetField);
+        let targetFormField = trim(cfg.targetFormField);
+        let sourceField = trim(cfg.sourceField);
+        let value = sourceField ? item[sourceField] ?? null : null;
+        if (targetField) {
+          let ref = this.getWidgetRef(targetField);
+          if (ref && ref.setValue) {
+            ref.setValue(value);
+          }
+        } else if (targetFormField) {
+          formModel[targetFormField] = value;
+        }
+      });
+    },
+    /**
+     * 通过 ID 反查名称（编辑态回显场景）。
+     * 当 fieldModel 有值但 currentData[labelField] 为空时调用。
+     */
+    fetchLabelById(id) {
+      let formScriptEnabled = this.field.options.formScriptEnabled || false;
+      let scriptCode = this.field.options.formScriptCode;
+      let getByIdScriptCode = this.field.options.getByIdScriptCode;
+      if (!formScriptEnabled || !id) return;
+      //优先使用专用的 getById 脚本；否则不自动反查
+      if (!getByIdScriptCode) return;
+      let reportTemplate = this.getFormRef().reportTemplate;
+      let formCode = reportTemplate.formCode;
+      let accessParam = this.handleCustomEvent(
+        this.field.options.formScriptParam
+      );
+      return this.formHttp({
+        scriptCode: getByIdScriptCode,
+        isLoading: false,
+        data: {
+          formCode: formCode,
+          formVersion: reportTemplate.formVersion,
+          taBm: this.fieldKeyName,
+          data: {
+            ...accessParam,
+            id: id,
+          },
+        },
+        callback: (res) => {
+          let rows = res.objx?.records || res.objx || [];
+          let row = Array.isArray(rows) ? rows[0] : rows;
+          if (row) {
+            let label = row[this.labelField] ?? null;
+            this.setShowValue(label);
+          }
+        },
+      });
+    },
+  },
+};

package/src/components/xform/form-designer/setting-panel/property-editor/field-autocomplete/autocomplete-vabSearchName-editor.vue

@@ -0,0 +1,201 @@
+<template>
+  <div>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">自动完成设置</el-divider>
+    </el-form-item>
+
+    <el-form-item label="存储ID字段">
+      <el-input
+        type="text"
+        v-model="optionModel.valueField"
+        placeholder="留空则使用字段本身"
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="存储名称字段">
+      <el-input
+        type="text"
+        v-model="optionModel.vabSearchName"
+        placeholder="存储展示名称的字段名"
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="输入提示">
+      <el-input
+        type="text"
+        v-model="optionModel.placeholder"
+      ></el-input>
+    </el-form-item>
+    <el-form-item label="可清空">
+      <el-switch v-model="optionModel.clearable"></el-switch>
+    </el-form-item>
+    <el-form-item label="聚焦即查询">
+      <el-switch v-model="optionModel.triggerOnFocus"></el-switch>
+    </el-form-item>
+    <el-form-item label="防抖(ms)">
+      <el-input-number
+        v-model="optionModel.debounce"
+        :min="0"
+        :max="2000"
+        :step="100"
+        controls-position="right"
+        style="width: 100%"
+      ></el-input-number>
+    </el-form-item>
+
+    <el-form-item label="ID反查脚本编码">
+      <el-input
+        type="text"
+        v-model="optionModel.getByIdScriptCode"
+        placeholder="选填，编辑态根据ID反查名称"
+      ></el-input>
+    </el-form-item>
+
+    <el-form-item label="清空回调">
+      <a
+        href="javascript:void(0);"
+        class="a-link link-oneLind"
+        @click="editEventHandler('onSearchClear', ['rowData', 'rowIndex'])"
+      >
+        <span>{{ optionModel.onSearchClear }}</span>
+        <i class="el-icon-edit"></i>
+      </a>
+    </el-form-item>
+
+    <el-form-item label="下拉项模板">
+      <a
+        href="javascript:void(0);"
+        class="a-link link-oneLind"
+        @click="editEventHandler('autocompleteItemTemplate', ['item'])"
+      >
+        <span>{{ optionModel.autocompleteItemTemplate }}</span>
+        <i class="el-icon-edit"></i>
+      </a>
+    </el-form-item>
+
+    <el-form-item label="选中回填">
+      <el-button type="primary" plain round @click="showFillDialog = true">
+        {{ i18nt('designer.setting.editAction') }}
+      </el-button>
+    </el-form-item>
+
+    <el-dialog
+      custom-class="dialog-style list-dialog"
+      title="选中回填配置"
+      :visible.sync="showFillDialog"
+      :modal="false"
+      :show-close="true"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :destroy-on-close="true"
+      top="5vh"
+      width="640px"
+      v-dialog-drag
+    >
+      <div class="cont">
+        <el-table
+          ref="fillTable"
+          width="100%"
+          height="420"
+          :data="fillData"
+          border
+          stripe
+        >
+          <el-table-column label="目标字段(组件名)" width="180" prop="targetField">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.targetField"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column label="目标数据属性" width="180" prop="targetFormField">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.targetFormField"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column label="来源字段" width="160" prop="sourceField">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.sourceField"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" min-width="60" fixed="right">
+            <template #header>
+              <el-tooltip
+                :hide-after="500"
+                class="item"
+                effect="dark"
+                content="添加"
+                placement="top"
+              >
+                <el-button
+                  size="mini"
+                  type=""
+                  circle
+                  icon="el-icon-plus"
+                  @click="fillData.push({})"
+                />
+              </el-tooltip>
+            </template>
+            <template #default="{ $index }">
+              <el-tooltip effect="dark" content="删除" placement="top">
+                <el-button
+                  size="mini"
+                  type=""
+                  circle
+                  icon="el-icon-delete"
+                  @click="fillData.splice($index, 1)"
+                />
+              </el-tooltip>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="dialog-footer" slot="footer">
+        <span class="fl tips">注：'目标字段'与'目标数据属性'只需维护一个即可。</span>
+        <el-button @click="showFillDialog = false" class="button-sty" icon="el-icon-close">
+          {{ i18nt('designer.hint.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="confirmFillDialog" class="button-sty" icon="el-icon-check">
+          {{ i18nt('designer.hint.confirm') }}
+        </el-button>
+      </div>
+    </el-dialog>
+  </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 propertyMixin from "../../../../../../components/xform/form-designer/setting-panel/property-editor/propertyMixin";
+
+export default {
+  name: "autocomplete-vabSearchName-editor",
+  mixins: [i18n, eventMixin, propertyMixin],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+  data() {
+    return {
+      showFillDialog: false,
+      fillData: [],
+    };
+  },
+  methods: {
+    confirmFillDialog() {
+      this.optionModel.autocompleteFillConfig = this.$baseLodash.cloneDeep(
+        this.fillData
+      );
+      this.showFillDialog = false;
+    },
+  },
+  watch: {
+    showFillDialog(val) {
+      if (val) {
+        this.fillData = this.$baseLodash.cloneDeep(
+          this.optionModel.autocompleteFillConfig || []
+        );
+      }
+    },
+  },
+};
+</script>
+
+<style scoped></style>

package/src/components/xform/form-designer/widget-panel/widgetsConfig.js

@@ -887,6 +887,57 @@ const vabsearchConfig = {
   showRules: [],
 };
 
+const autocompleteConfig = {
+  name: "",
+  keyNameEnabled: !1,
+  keyName: "",
+  //存储"名称"的字段(展示字段)，与 ID 字段配合实现"存储ID和名称"
+  vabSearchName: "",
+  label: "",
+  labelColor: "",
+  submitFlag: true,
+  disabled: !1,
+  hidden: !1,
+  required: !1,
+  labelWidth: null,
+  labelHidden: !1,
+  ...defaultLabelIconConfig,
+  readonly: false,
+  size: "",
+  widgetWidth: null,
+  customClass: [],
+  placeholder: "请输入关键词搜索",
+  clearable: true,
+  //el-autocomplete 相关
+  triggerOnFocus: true,
+  debounce: 300,
+  prefixIcon: null,
+  suffixIcon: null,
+  //选项数据中"值/ID"对应的字段名(为空时取字段本身 keyName)
+  valueField: null,
+  //远程搜索后台逻辑脚本配置(复用 httpConfig)
+  ...httpConfig,
+  formScriptCode: null,
+  //通过 ID 反查名称的脚本编码(可选，用于编辑态回显)
+  getByIdScriptCode: null,
+  //选中后回填其他表单字段的配置
+  autocompleteFillConfig: [],
+  //自定义下拉项模板脚本(可选，入参 item，返回 HTML 字符串)
+  autocompleteItemTemplate: null,
+  //事件
+  onCreated: "",
+  onMounted: "",
+  onChange: "",
+  onFocus: "",
+  onBlur: "",
+  onInput: "",
+  onSearchClear: "",
+  ...defaultWfConfig,
+  showRuleFlag: 1,
+  showRuleEnabled: 1,
+  showRules: [],
+};
+
 const projectTagConfig = {
   name: "",
   keyNameEnabled: !1,
@@ -2946,6 +2997,17 @@ export const advancedFields = [
       ...vabsearchConfig,
     },
   },
+  {
+    type: "autocomplete",
+    icon: "searchbox",
+    commonFlag: !0,
+    columnFlag: true,
+    formItemFlag: !0,
+    tableField: null,
+    options: {
+      ...autocompleteConfig,
+    },
+  },
   {
     type: "search_button",
     icon: "button",

package/src/components/xform/form-render/container-item/data-table-mixin.js

@@ -20,7 +20,10 @@ import {
   isAttachmentWidgetType,
   isVabsearchMultiWidget,
 } from "../../../../components/xform/utils/util";
-import { applyColumnLabelIcon, resolveColumnRequiredFlag } from "../../../../components/xform/utils/tableColumnHelper";
+import {
+  applyColumnLabelIcon,
+  resolveColumnRequiredFlag,
+} from "../../../../components/xform/utils/tableColumnHelper";
 import {
   buildCellRequiredHint,
   buildTableCellFormProp,
@@ -314,8 +317,7 @@ modules = {
       });
     },
     initColumnWidgetConfig(callback, options = {}) {
-      const tableColumns =
-        options.columns ?? this.getEffectiveTableColumns();
+      const tableColumns = options.columns ?? this.getEffectiveTableColumns();
       const requests = this.collectColumnWidgetConfigRequests(
         tableColumns,
         options
@@ -329,8 +331,7 @@ modules = {
       }
     },
     refreshColumnWidgetConfig(options = {}) {
-      const tableColumns =
-        options.columns ?? this.getEffectiveTableColumns();
+      const tableColumns = options.columns ?? this.getEffectiveTableColumns();
       const forceRefresh = options.forceRefresh !== false;
       return new Promise((resolve, reject) => {
         const requests = this.collectColumnWidgetConfigRequests(tableColumns, {
@@ -346,11 +347,13 @@ modules = {
           resolve();
         };
         if (requests.length) {
-          Promise.all(requests).then(finish).catch((err) => {
-            options.fail && options.fail(err);
-            options.error && options.error(err);
-            reject(err);
-          });
+          Promise.all(requests)
+            .then(finish)
+            .catch((err) => {
+              options.fail && options.fail(err);
+              options.error && options.error(err);
+              reject(err);
+            });
         } else {
           finish();
         }
@@ -1019,9 +1022,7 @@ modules = {
       });
     },
     shouldSkipDynamicColumnsOnInit() {
-      return (
-        this.dynamicColumnsInitResolved && this.dynamicColumnsInitSkipped
-      );
+      return this.dynamicColumnsInitResolved && this.dynamicColumnsInitSkipped;
     },
     getColumnVisible(columnConfig) {
       if (columnConfig.show === false) {
@@ -1041,34 +1042,37 @@ modules = {
       this.ensureEffectiveColumnWidgets(true);
       const effectiveColumns = this.getEffectiveTableColumns(true);
       return new Promise((resolve) => {
-        this.initColumnWidgetConfig(() => {
-          const columns = this.createColumns();
-          this.widgets = columns
-            .filter((column) => !!column?.params?.widget)
-            .map((column) => column.params.widget);
-          this.editWidgets = columns
-            .filter((column) => !!column?.params?.editWidget)
-            .map((column) => column.params.editWidget);
-          if (this.vxeOption) {
-            this.$set(this.vxeOption, "columns", columns);
-          }
-          const $grid = this.getGridTable();
-          if ($grid?.reloadColumn) {
-            const reloadResult = $grid.reloadColumn(columns);
-            const finish = () => {
-              this.initFieldSchemaData(true);
-              this.afterDynamicColumnsCommonWidget(effectiveColumns);
-              resolve(columns);
-            };
-            if (reloadResult?.then) {
-              reloadResult.then(finish).catch(finish);
+        this.initColumnWidgetConfig(
+          () => {
+            const columns = this.createColumns();
+            this.widgets = columns
+              .filter((column) => !!column?.params?.widget)
+              .map((column) => column.params.widget);
+            this.editWidgets = columns
+              .filter((column) => !!column?.params?.editWidget)
+              .map((column) => column.params.editWidget);
+            if (this.vxeOption) {
+              this.$set(this.vxeOption, "columns", columns);
+            }
+            const $grid = this.getGridTable();
+            if ($grid?.reloadColumn) {
+              const reloadResult = $grid.reloadColumn(columns);
+              const finish = () => {
+                this.initFieldSchemaData(true);
+                this.afterDynamicColumnsCommonWidget(effectiveColumns);
+                resolve(columns);
+              };
+              if (reloadResult?.then) {
+                reloadResult.then(finish).catch(finish);
+              } else {
+                finish();
+              }
             } else {
-              finish();
+              resolve(columns);
             }
-          } else {
-            resolve(columns);
-          }
-        }, { columns: effectiveColumns, forceRefresh: true });
+          },
+          { columns: effectiveColumns, forceRefresh: true }
+        );
       });
     },
     reloadTableColumns(tableColumns) {
@@ -2819,11 +2823,7 @@ modules = {
             }
           } else {
             if (widget) {
-              this.handleWidgetNullValue(
-                widget,
-                newData,
-                defaultValueEnabled
-              );
+              this.handleWidgetNullValue(widget, newData, defaultValueEnabled);
             } else {
               newData[item.prop] = null;
             }
@@ -3086,7 +3086,6 @@ modules = {
       let formCode = reportTemplate?.formCode;
       let scriptCode = formConfig.saveScriptCode || "saveUpdate";
 
-      let that = this;
       let $grid = obj.$table.$xegrid;
       let originOption = $grid.params.originOption;
 
@@ -3138,20 +3137,10 @@ modules = {
               confirmText: "您确定要保存吗？",
               success: (res0) => {
                 this.getRowData(res0.objx, (res) => {
-                  if (obj.row.id === res.objx.id) {
-                    $grid.clearActived().then(() => {
-                      Object.assign(obj.row, res.objx);
-                    });
-                  } else {
-                    // $grid.remove(obj.row);
-                    // $grid.insertAt(res.objx);
-                    let items = that.getValue();
-                    let index = items.findIndex(
-                      (item) => item.id === obj.row.id
-                    );
-                    items.splice(index, 1, res.objx);
-                    that.setValue(items);
-                  }
+                  $grid.clearActived().then(() => {
+                    // 保留 vxe 内部行引用和 _X_ROW_KEY，仅同步服务端字段。
+                    Object.assign(obj.row, res.objx);
+                  });
                   delete obj.$table.editCloneRow;
                 });
               },
@@ -3243,7 +3232,7 @@ modules = {
         this.$nextTick(() => {
           this.handleWbs();
           if (isEditTable) {
-            $grid.setActiveRow(newRow);
+            this.setActiveRowById($grid, newRow.id);
           }
         });
 
@@ -3253,10 +3242,9 @@ modules = {
           if (toEnd === true) {
             tableRows.push(newRow);
           } else if (toSibling === true) {
-            let addIndex =
-              tableRows.findIndex(
-                (item) => item._X_ROW_KEY === obj.row._X_ROW_KEY
-              ) + 1;
+            let addIndex = tableRows.findIndex(
+              (item) => item._X_ROW_KEY === obj.row._X_ROW_KEY
+            ) + 1;
             tableRows.splice(addIndex, 0, newRow);
           } else {
             tableRows.splice(0, 0, newRow);
@@ -3266,7 +3254,7 @@ modules = {
             this.handleWbs();
             $grid.setTreeExpand(obj.row, true).then(() => {
               if (isEditTable) {
-                $grid.setActiveRow(newRow);
+                this.setActiveRowById($grid, newRow.id);
               }
             });
           });
@@ -3276,40 +3264,50 @@ modules = {
     removeTreeRow(obj) {
       let row = obj.row;
       let $grid = this.getGridTable();
+      let isTreeTable = this.widget.options.isTreeTable || false;
       let childrenField = $grid.treeConfig?.children;
-      // let tableRows = this.formModel[this.fieldKeyName];
-      // let index = tableRows.findIndex(item => item.id === row.id)
-      let delIds = [];
+      let tableRows = this.getValue() || [];
+      let delKeys = new Set();
+      // 收集当前行；若数据是嵌套结构，同时收集 children 下的子节点
       let loopDo = (item) => {
-        if (item._X_ROW_KEY) delIds.push(item._X_ROW_KEY);
-        if (childrenField && item[childrenField]) {
+        if (item && item._X_ROW_KEY) delKeys.add(item._X_ROW_KEY);
+        if (childrenField && item && item[childrenField]) {
           item[childrenField].forEach((subItem) => {
             loopDo(subItem);
           });
         }
       };
       loopDo(row);
-      /* delIds.forEach((id) => {
-        let index = tableRows.findIndex((item) => item.id === id);
-        let delRow = tableRows[index];
-        tableRows.splice(index, 1);
-        this.deleteRowWidgets(delRow);
-      }); */
-      let tableRows = this.getValue();
-      let delIndex = [];
-      tableRows.map((item, index) => {
-        if (delIds.includes(item._X_ROW_KEY)) {
-          delIndex.push(index);
+      // 树表使用扁平数据(transform)，子节点通过 parentField 关联，
+      // 需按 parentField 递归收集所有后代，避免删除父节点后子节点残留
+      if (isTreeTable && $grid.treeConfig) {
+        let parentField = $grid.treeConfig.parentField;
+        let rowField = $grid.treeConfig.rowField || "id";
+        let pending = [row];
+        while (pending.length) {
+          let cur = pending.shift();
+          let curId = cur[rowField];
+          tableRows.forEach((item) => {
+            if (!item || !item._X_ROW_KEY || delKeys.has(item._X_ROW_KEY)) {
+              return;
+            }
+            let parentValue = item[parentField];
+            let matched =
+              parentValue === curId ||
+              (parentValue != null &&
+                curId != null &&
+                String(parentValue) === String(curId));
+            if (matched) {
+              delKeys.add(item._X_ROW_KEY);
+              pending.push(item);
+            }
+          });
         }
-      });
-      delIndex.reverse().forEach((index) => {
-        tableRows.splice(index, 1);
-      });
-
-      // $grid.remove(obj.row);
-
-      // let newRows = tableRows.filter((item) => !delIds.includes(item.id));
-      // this.setValue(newRows);
+      }
+      let newRows = tableRows.filter((item) => !delKeys.has(item._X_ROW_KEY));
+      // 通过 setValue 重新赋值数据源，触发 vxe-grid 重新加载。
+      // 树表(transform)下直接 splice 原数组不会刷新视图，会导致“删除无反应”。
+      this.setValue(newRows);
       this.$nextTick(() => {
         this.handleWbs();
       });
@@ -3430,6 +3428,55 @@ modules = {
       newRow = Object.assign({}, newData, newRow, editDefaultRow, rowData);
 
       let tableRows = this.formModel[this.fieldKeyName] || [];
+      // 编辑表统一使用 vxe 内部插入，避免 setValue 重载整表并丢失编辑状态。
+      if (isEditTable) {
+        let insertTarget = toEnd === true ? -1 : null;
+        if (toSibling === true) {
+          let currentIndex = tableRows.findIndex(
+            (item) => item._X_ROW_KEY === obj.row._X_ROW_KEY
+          );
+          if (isTreeTable) {
+            let parentField = $grid.treeConfig.parentField;
+            let nextSibling = tableRows
+              .slice(currentIndex + 1)
+              .find(
+                (item) => item[parentField] === obj.row[parentField]
+              );
+            insertTarget = nextSibling || -1;
+          } else {
+            insertTarget = tableRows[currentIndex + 1] || -1;
+          }
+        }
+        $grid.insertAt(newRow, insertTarget).then(({ row }) => {
+          let nextRows = tableRows.slice();
+          if (toEnd === true) {
+            nextRows.push(row);
+          } else if (toSibling === true) {
+            let addIndex = nextRows.findIndex(
+              (item) => item._X_ROW_KEY === obj.row._X_ROW_KEY
+            ) + 1;
+            nextRows.splice(addIndex, 0, row);
+          } else {
+            nextRows.splice(0, 0, row);
+          }
+          // 不修改绑定给 vxe-grid 的 fieldModel，避免数组监听触发整表重载。
+          this.formModel[this.fieldKeyName] = nextRows;
+          this.initRowIdData();
+          this.initFieldSchemaData();
+          this.$nextTick(() => {
+            Promise.resolve(this.handleWbs()).then(() => {
+              if (isTreeTable && parent) {
+                $grid.setTreeExpand(parent, true).then(() => {
+                  $grid.setActiveRow(row);
+                });
+              } else {
+                $grid.setActiveRow(row);
+              }
+            });
+          });
+        });
+        return;
+      }
       if (!parent) {
         if (toEnd === true) {
           tableRows.push(newRow);
@@ -3445,12 +3492,7 @@ modules = {
         this.setValue(tableRows);
         this.$nextTick(() => {
           this.handleWbs();
-          if (isEditTable) {
-            $grid.setActiveRow(newRow);
-          }
         });
-
-        // $grid.insert(newRow).then(({row}) => $grid.setActiveRow(row));
       } else {
         $grid.setTreeExpand(obj.row, true).then(() => {
           if (toEnd === true) {
@@ -3467,17 +3509,50 @@ modules = {
           this.setValue(tableRows);
           this.$nextTick(() => {
             this.handleWbs();
-            $grid.setTreeExpand(obj.row, true).then(() => {
-              if (isEditTable) {
-                $grid.setActiveRow(newRow);
-              }
-            });
+            $grid.setTreeExpand(obj.row, true);
           });
         });
       }
     },
+    // setValue 会生成新的数据行并触发 vxe 异步重载，需等待内部行映射更新后再激活。
+    setActiveRowById($grid, rowId, retry = 0) {
+      if (!$grid || rowId == null) {
+        return;
+      }
+      let sourceRow = (this.getValue() || []).find(
+        (item) => item && item.id === rowId
+      );
+      if (!sourceRow) {
+        return;
+      }
+      // vxe-table 使用 _X_ROW_KEY 缓存内部行对象。树数据重载后，sourceRow
+      // 与表格内部渲染的行并非同一引用，必须从 vxe 的行映射中重新获取。
+      let realRow = $grid.getRowById
+        ? $grid.getRowById(sourceRow._X_ROW_KEY)
+        : sourceRow;
+      if (!realRow && retry < 10) {
+        this.$nextTick(() => {
+          this.setActiveRowById($grid, rowId, retry + 1);
+        });
+        return;
+      }
+      if (realRow) {
+        $grid.setActiveRow(realRow);
+      }
+    },
     async removeEditRow(obj) {
-      this.removeTreeRow(obj);
+      let row = obj.row;
+      let $grid = this.getGridTable();
+      await $grid.remove(row);
+
+      // 临时编辑行由 vxe 内部删除；仅同步表单模型，避免 setValue 重载整表。
+      let tableRows = this.getValue() || [];
+      this.formModel[this.fieldKeyName] = tableRows.filter(
+        (item) => item._X_ROW_KEY !== row._X_ROW_KEY
+      );
+      this.initRowIdData();
+      this.initFieldSchemaData();
+      this.handleWbs();
     },
     //editTable end
     getHttpConfigForUser() {
@@ -3489,7 +3564,7 @@ modules = {
     },
     handleWbs() {
       if (this.widget.options.wbsEnabled) {
-        this.updateWbs();
+        return this.updateWbs();
       }
     },
     updateWbs() {
@@ -3497,6 +3572,15 @@ modules = {
       let $grid = that.getGridTable();
       let childrenField = $grid.treeConfig.children;
       let fullData = $grid.getTableData().fullData;
+      let isEditTable = this.widget.options.isEditTable || false;
+      let isTreeTable = this.widget.options.isTreeTable || false;
+      if (
+        isEditTable
+        && isTreeTable
+        && $grid.$refs?.xTable?.tableFullTreeData
+      ) {
+        fullData = $grid.$refs.xTable.tableFullTreeData;
+      }
       let tableRows = this.formModel[that.fieldKeyName] || [];
       let map = {};
       let loopDo = (item, wbs) => {
@@ -3512,7 +3596,14 @@ modules = {
         let wbs = index + 1 + "";
         loopDo(item, wbs);
       });
-      $grid.updateData();
+      if (isEditTable) {
+        tableRows.forEach((item) => {
+          if (Object.prototype.hasOwnProperty.call(map, item._X_ROW_KEY)) {
+            item.f_wbs = map[item._X_ROW_KEY];
+          }
+        });
+      }
+      return $grid.updateData();
     },
     moveUpRow(obj) {
       let row = obj.row;

package/src/components/xform/lang/en-US.js

@@ -58,7 +58,8 @@ export default {
           cascader: "Cascader",
           "area-select": "Area Select",
           slot: "Slot",
-          custom: "Custom Component"
+          custom: "Custom Component",
+          autocomplete: "Autocomplete"
         },
         hint: {
           selectParentWidget: "Select parent of this widget",

package/src/components/xform/lang/zh-CN.js

@@ -65,6 +65,7 @@ export default {
       vabUpload: "凭证",
       vabUpload2: "凭证(海信)",
       vabsearch: "搜索框",
+      autocomplete: "自动完成",
       search_button: "搜索按钮",
       save_button: "保存按钮",
       reset_button: "刷新按钮",