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

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

@@ -2,7 +2,7 @@
   <static-content-wrapper :designer="designer" :field="field" :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">
-    <div ref="fieldEditor" v-html="field.options.htmlContent"></div>
+    <div :class="{'designer-html-container':designState}" ref="fieldEditor" v-html="field.options.htmlContent"></div>
   </static-content-wrapper>
 </template>
 
@@ -78,5 +78,9 @@
 
 <style lang="scss" scoped>
   @import "~@/styles/global.scss"; //* static-content-wrapper已引入，还需要重复引入吗？ *//
-
+  .designer-html-container{
+        outline: 1px dashed #336699;
+        padding: 10px;
+        margin: 5px;
+  }
 </style>

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

@@ -4,8 +4,8 @@
     :display-style="field.options.displayStyle"
     :parent-widget="parentWidget" :parent-list="parentList"
     :index-of-parent-list="indexOfParentList">
-    <el-button type="primary" class="button-sty" size="mini" icon="el-icon-download" @click="importHandle"
-               :disabled="field.options.disabled">{{$t1('导入')}}
+    <el-button :type="field.options.type" class="button-sty" size="mini" icon="el-icon-download" @click="importHandle"
+               :disabled="field.options.disabled">{{ getI18nLabel(field.options.label)}}
     </el-button>
   </static-content-wrapper>
 
@@ -61,16 +61,27 @@ export default {
 
   methods: {
     importHandle() {
-      let scriptCode = this.field.options.importScriptCode;
-      let entity = this.field.options.importEntity;
-      let importAttachCode = this.field.options.importAttachCode;
-      // let importCodes = this.field.options.importCodes;
-      this.getFormRef().openImportDialog({
-        importOption: this.field.options,
-        callback: () => {
-          // this.getWidgetRef(tableTarget).searchEvent();
+      const done = () => {
+        let multi = this.field.options.importMultiple || false;
+        let multiSize = this.field.options.importMultiSize || 1;
+        this.getFormRef().openImportDialog({
+          target: this,
+          importOption: this.field.options,
+          importFrontOnly: false,
+          multi,
+          multiSize,
+          callback: (resultData, file, done) => {
+
+          }
+        });
+      }
+      if (this.field.options.onBeforeClickButton) {
+        if (this.handleCustomEvent(this.field.options.onBeforeClickButton, ["done"], [done]) !== false) {
+          done();
         }
-      });
+      } else {
+        done();
+      }
     }
   }
 

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

@@ -0,0 +1,90 @@
+<template>
+  <static-content-wrapper
+    :designer="designer" :field="field" :design-state="designState"
+    :display-style="field.options.displayStyle"
+    :parent-widget="parentWidget" :parent-list="parentList"
+    :index-of-parent-list="indexOfParentList">
+    <el-button :type="field.options.type" class="button-sty" size="mini" icon="el-icon-download" @click="importHandle"
+               :disabled="field.options.disabled">{{ getI18nLabel(field.options.label)}}
+    </el-button>
+  </static-content-wrapper>
+
+</template>
+<script>
+import emitter from '../../../../../components/xform/utils/emitter'
+import i18n from "../../../../../components/xform/utils/i18n";
+import fieldMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/fieldMixin";
+import StaticContentWrapper
+  from "../../../../../components/xform/form-designer/form-widget/field-widget/static-content-wrapper.vue";
+
+export default {
+  name: "import2-button-widget",
+  components: {StaticContentWrapper},
+  componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+  mixins: [emitter, fieldMixin, i18n],
+  props: {
+    field: Object,
+    parentWidget: Object,
+    parentList: Array,
+    indexOfParentList: Number,
+    designer: Object,
+    designState: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      exportOption: {}
+    }
+  },
+  beforeCreate() {
+    /* 这里不能访问方法和属性！！ */
+  },
+  created() {
+
+    /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+       需要在父组件created中初始化！！ */
+    this.registerToRefList()
+    this.initEventHandler()
+
+    this.handleOnCreated()
+  },
+
+  mounted() {
+    this.handleOnMounted()
+  },
+
+  beforeDestroy() {
+    this.unregisterFromRefList()
+  },
+
+  methods: {
+    importHandle() {
+      const done = () => {
+        this.getFormRef().openImportDialog({
+          target: this,
+          importOption: this.field.options,
+          importFrontOnly: true,
+          callback: (resultData, file, done) => {
+
+          }
+        });
+      }
+      if (this.field.options.onBeforeClickButton) {
+        if (this.handleCustomEvent(this.field.options.onBeforeClickButton, ["done"], [done]) !== false) {
+          done();
+        }
+      } else {
+        done();
+      }
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/global.scss"; //* static-content-wrapper已引入，还需要重复引入吗？ *//
+
+</style>

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

@@ -2,7 +2,7 @@
   <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-input v-if="!field.options.showText" ref="fieldEditor" v-model="fieldModel"
+    <el-input ref="fieldEditor" v-model="fieldModel" v-show="!isReadMode"
               :disabled="field.options.disabled" :readonly="field.options.readonly"
               :size="field.options.size" class="hide-spin-button"
               :type="inputType"
@@ -19,7 +19,9 @@
       <el-button slot="append" v-if="field.options.appendButton" :disabled="field.options.disabled || field.options.appendButtonDisabled"
                  :class="field.options.buttonIcon" @click.native="emitAppendButtonClick"></el-button>
     </el-input>
-    <span v-else>{{ fieldModel}}</span>
+    <template v-if="isReadMode">
+      <span class="readonly-mode-field pre-wrap" :title="contentForReadMode">{{contentForReadMode}}</span>
+    </template>
   </form-item-wrapper>
 </template>
 
@@ -77,6 +79,9 @@
 
         return this.field.options.type
       },
+      contentForReadMode() {
+        return this.fieldModel ? this.fieldModel : ''
+      },
 
     },
     beforeCreate() {

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

@@ -0,0 +1,451 @@
+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[displayField] 变化时，同步到输入框
+      this.displayValue = val;
+    },
+  },
+  computed: {
+    /**
+     * 关联来源字段：候选数据中"ID/值"对应的字段名
+     */
+    valueField() {
+      return trim(this.field.options.valueField) || this.fieldKeyName;
+    },
+    /**
+     * 展示来源字段：候选数据中"名称"对应的字段名
+     * （为空时回退展示字段 vabSearchName，再回退字段本身，保证旧表单兼容）
+     */
+    sourceLabelField() {
+      return (
+        trim(this.field.options.labelSourceField) ||
+        trim(this.field.options.vabSearchName) ||
+        this.fieldKeyName
+      );
+    },
+    /**
+     * 展示字段：表单数据中持久化"名称"的字段（用于存储与回显）
+     */
+    displayField() {
+      return trim(this.field.options.vabSearchName) || this.fieldKeyName;
+    },
+    /**
+     * el-autocomplete 下拉项展示用的 value-key（取自候选数据的展示来源字段）
+     */
+    valueKey() {
+      return this.sourceLabelField;
+    },
+    /**
+     * 查询字段：远程搜索时关键词传给后台的参数名（默认 keyword）
+     */
+    queryField() {
+      return trim(this.field.options.queryField) || "keyword";
+    },
+    /**
+     * condition格式下查询的数据表 taBm（留空取字段本身 keyName）
+     */
+    conditionTaBm() {
+      return trim(this.field.options.conditionTaBm) || this.fieldKeyName;
+    },
+    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 displayField = this.displayField;
+      let value = currentData[displayField] ?? 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.displayField];
+      if (this.isNotNullVal(id) && !this.isNotNullVal(label)) {
+        this.fetchLabelById(id);
+      }
+    });
+  },
+
+  beforeDestroy() {
+    this.unregisterFromRefList();
+  },
+
+  methods: {
+    /**
+     * 设置展示名称到当前数据行/表单模型，并同步到输入框
+     */
+    setShowValue(val = null) {
+      let displayField = this.displayField;
+      this.currentData[displayField] = 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;
+    },
+    // 对比旧值：label 存在原单同行的伴随字段(displayField)，从 oldRow 取
+    resolveCompareOldDisplay(oldRow) {
+      if (!oldRow) return null;
+      return oldRow[this.displayField] ?? null;
+    },
+    /**
+     * 远程搜索：调用后台逻辑脚本，返回建议列表
+     * 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;
+      }
+      //需要有内容才执行搜索：关键词为空（含聚焦触发的空串）时不查询
+      let keyword = queryString == null ? "" : String(queryString);
+      if (!trim(keyword)) {
+        this.lastQueryKeyword = null;
+        this._lastSuggestions = null;
+        cb([]);
+        return;
+      }
+      //避免对相同关键词重复查询（el-autocomplete focus/input 都会触发）
+      if (
+        keyword === this.lastQueryKeyword
+        && this._lastSuggestions
+        && this._lastSuggestions.length
+      ) {
+        cb(this._lastSuggestions);
+        return;
+      }
+      this.lastQueryKeyword = keyword;
+
+      let reportTemplate = this.getFormRef().reportTemplate;
+      let accessParam = this.handleCustomEvent(
+        this.field.options.formScriptParam
+      );
+      let innerData;
+      if (this.field.options.conditionFormat) {
+        //condition 传值格式：关键词以 { field, value, filter:'like' } 追加到 condition 数组
+        let extra = accessParam || {};
+        let conditions = Array.isArray(extra.condition)
+          ? extra.condition.slice()
+          : [];
+        conditions.push({
+          value: keyword,
+          field: this.queryField,
+          filter: "like",
+        });
+        innerData = {
+          current: 1,
+          size: this.field.options.conditionSize || 100,
+          searchCount: true,
+          ...extra,
+          condition: conditions,
+        };
+      } else {
+        innerData = {
+          ...accessParam,
+          [this.queryField]: keyword,
+        };
+      }
+      let taBm = this.field.options.conditionFormat
+        ? this.conditionTaBm
+        : undefined;
+      let data = this.buildFormScriptData(reportTemplate, innerData, taBm);
+      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 sourceLabelField = this.sourceLabelField;
+        let id = item[valueField] ?? null;
+        let label = item[sourceLabelField] ?? 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
+        );
+      }
+    },
+    /**
+     * 输入框内容变化：仅派发校验与自定义 onInput，不清除已存储的 ID/名称。
+     * 用户输入但未选择、直接失焦时，由 handleBlur 还原为已存储的展示名称。
+     */
+    handleInputChange(text) {
+      if (this.isSelecting) return;
+      this.dispatch("VFormRender", "fieldValidation", [this.getPropName()]);
+      if (this.field.options.onInput) {
+        let fn = new Function("value", this.field.options.onInput);
+        fn.call(this, text);
+      }
+    },
+    /**
+     * 失焦：若未通过"选择"确认新值，则把输入框内容还原为已存储的展示名称
+     * （已存储 ID 保持不变；从未选择过则清空输入框）。
+     */
+    handleBlur(e) {
+      if (!this.designState) {
+        //延迟到"选择"事件之后再还原，避免点击下拉项时被误还原
+        setTimeout(() => {
+          if (this.isSelecting) return;
+          let storedLabel = this.currentData[this.displayField] ?? null;
+          if (this.displayValue !== storedLabel) {
+            this.displayValue = storedLabel;
+          }
+        }, 150);
+      }
+      this.handleBlurCustomEvent(e);
+    },
+    /**
+     * 根据回填配置把选中项的其他字段值写入表单
+     */
+    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[displayField] 为空时调用。
+     */
+    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 accessParam = this.handleCustomEvent(
+        this.field.options.formScriptParam
+      );
+      let innerData;
+      if (this.field.options.conditionFormat) {
+        //condition 传值格式：按 关联来源字段 eq id 反查
+        let extra = accessParam || {};
+        let conditions = Array.isArray(extra.condition)
+          ? extra.condition.slice()
+          : [];
+        conditions.push({
+          value: id,
+          field: this.valueField,
+          filter: "eq",
+        });
+        innerData = {
+          current: 1,
+          size: this.field.options.conditionSize || 100,
+          searchCount: true,
+          ...extra,
+          condition: conditions,
+        };
+      } else {
+        innerData = {
+          ...accessParam,
+          id: id,
+        };
+      }
+      let taBm = this.field.options.conditionFormat
+        ? this.conditionTaBm
+        : undefined;
+      let data = this.buildFormScriptData(reportTemplate, innerData, taBm);
+      return this.formHttp({
+        scriptCode: getByIdScriptCode,
+        isLoading: false,
+        data: data,
+        callback: (res) => {
+          let rows = res.objx?.records || res.objx || [];
+          let row = Array.isArray(rows) ? rows[0] : rows;
+          if (row) {
+            let label = row[this.sourceLabelField] ?? null;
+            this.setShowValue(label);
+          }
+        },
+      });
+    },
+  },
+};