cloud-web-corejs 1.0.54-dev.688 → 1.0.54-dev.689

package/src/components/xform/form-designer/form-widget/field-widget/fieldMixin.js

@@ -8,6 +8,9 @@ import {
   getAccessUrl,
   generateId,
   trim,
+  isArrayValueWidgetType,
+  isAttachmentWidgetType,
+  isEmptyArrayFieldValue,
 } from "../../../../../components/xform/utils/util";
 import FormValidators, {
   getRegExp,
@@ -326,7 +329,8 @@ modules = {
           nullValue = undefined;
         } else if (
           widgetType === "checkbox" ||
-          (widgetType === "select" && this.field.options.multiple)
+          (widgetType === "select" && this.field.options.multiple) ||
+          isAttachmentWidgetType(widgetType)
         ) {
           nullValue = [];
         } else if (
@@ -339,11 +343,23 @@ modules = {
         if (void 0 === currentData[this.fieldKeyName]) {
           this.$set(currentData, this.fieldKeyName, nullValue);
         }
+        if (
+          widgetType === "number" &&
+          currentData[this.fieldKeyName] === null
+        ) {
+          this.$set(currentData, this.fieldKeyName, undefined);
+        }
         if (flag) {
           this.fieldModel = currentData[this.fieldKeyName];
-        } else if (currentData[this.fieldKeyName] !== null) {
+        } else if (
+          currentData[this.fieldKeyName] !== null &&
+          currentData[this.fieldKeyName] !== undefined
+        ) {
           this.fieldModel = currentData[this.fieldKeyName];
         } else {
+          if (widgetType === "number") {
+            this.fieldModel = undefined;
+          }
           if (!dataId) {
             //新增
             if (
@@ -916,19 +932,40 @@ modules = {
       result = this.$t1(value, { label });
       return result;
     },
+    resolveFieldValidateLabelCode() {
+      if (this.field.options.label) {
+        return this.field.options.label;
+      }
+      const columnConfig =
+        this.columnConfig || this.tableParam?.column?.params?.columnConfig;
+      if (columnConfig?.label) {
+        return columnConfig.label;
+      }
+      return (
+        (this.field.options.keyNameEnabled && this.field.options.keyName) ||
+        this.field.options.name ||
+        ""
+      );
+    },
     getValidationHintMsg() {
       let vldName = this.field.options.validation;
       if (this.field.options.validationHint) {
         return this.$t1(this.field.options.validationHint);
       } else {
-        return this.getValidateDefaultMsg(this.field.options.label, vldName);
+        return this.getValidateDefaultMsg(
+          this.resolveFieldValidateLabelCode(),
+          vldName
+        );
       }
     },
     getRequiredHintMsg() {
       if (this.field.options.requiredHint) {
         return this.$t1(this.field.options.requiredHint);
       } else {
-        return this.getValidateDefaultMsg(this.field.options.label, "required");
+        return this.getValidateDefaultMsg(
+          this.resolveFieldValidateLabelCode(),
+          "required"
+        );
       }
     },
     buildFieldRules() {
@@ -938,14 +975,37 @@ modules = {
 
       this.rules.splice(0, this.rules.length); //清空已有
       if (!!this.field.options.required) {
-        this.rules.push({
-          required: true,
-          //trigger: ['blur', 'change'],
-          trigger: [
-            "blur",
-          ] /* 去掉change事件触发校验，change事件触发时formModel数据尚未更新，导致radio/checkbox必填校验出错！！ */,
-          message: this.getRequiredHintMsg(),
-        });
+        if (isArrayValueWidgetType(this.field.type, this.field.options)) {
+          this.rules.push({
+            validator: (rule, value, callback) => {
+              const actualValue =
+                typeof this.getCurrentValue === "function"
+                  ? this.getCurrentValue()
+                  : value;
+              if (
+                isEmptyArrayFieldValue(
+                  actualValue,
+                  this.field.type,
+                  this.field.options
+                )
+              ) {
+                callback(new Error(this.getRequiredHintMsg()));
+              } else {
+                callback();
+              }
+            },
+            trigger: ["change", "blur"],
+          });
+        } else {
+          this.rules.push({
+            required: true,
+            //trigger: ['blur', 'change'],
+            trigger: [
+              "blur",
+            ] /* 去掉change事件触发校验，change事件触发时formModel数据尚未更新，导致radio/checkbox必填校验出错！！ */,
+            message: this.getRequiredHintMsg(),
+          });
+        }
       }
 
       if (!!this.field.options.validation) {
@@ -1122,8 +1182,8 @@ modules = {
           this.fieldModel = e;
         }
       } else if (widgetType === "number") {
-        if (e === undefined) {
-          e = null;
+        if (e === undefined || e === null) {
+          e = undefined;
           this.fieldModel = e;
         }
       }
@@ -1592,9 +1652,15 @@ modules = {
           : (this.fieldModel = ""));
     },
     getOptionItemValueKey() {
+      if (this.field.options.commonAttributeEnabled) {
+        return this.field.options.valueKey || "sn";
+      }
       return this.field.options.valueKey || "value";
     },
     getOptionItemLabelKey() {
+      if (this.field.options.commonAttributeEnabled) {
+        return this.field.options.labelKey || "value";
+      }
       return this.field.options.labelKey || "label";
     },
     loadRowGloatOptions: function (e) {

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

@@ -207,7 +207,10 @@
 
 <script>
 import i18n from "../../../../../components/xform/utils/i18n";
-import { getSubFormNameByFieldId } from "../../../../../components/xform/utils/util";
+import {
+  getSubFormNameByFieldId,
+  isVabsearchMultiWidget,
+} from "../../../../../components/xform/utils/util";
 
 export default {
   name: "form-item-wrapper",
@@ -261,7 +264,7 @@ export default {
     },
 
     label() {
-      if (!!this.field.options.labelHidden) {
+      if (this.shouldHideFieldLabel()) {
         return "";
       }
       return this.getI18nLabel(this.field.options.label);
@@ -270,7 +273,7 @@ export default {
     },
 
     labelWidth() {
-      if (!!this.field.options.labelHidden) {
+      if (this.shouldHideFieldLabel()) {
         return (!!this.designState ? 5 : 0) + "px"; //设计期间标签最小宽度5像素，以便于鼠标点击可选中组件！！
       }
 
@@ -322,6 +325,13 @@ export default {
     this.initShowType();
   },
   methods: {
+    shouldHideFieldLabel() {
+      if (!!this.field.options.labelHidden) {
+        return true;
+      }
+      // 数据表格列内字段：表头已展示列名，隐藏 form-item 标签
+      return this.isSubFormItem();
+    },
     isSubFormItem() {
       return !!this.tableParam;
     },
@@ -380,19 +390,11 @@ export default {
         });
       }
     },
-    getIsFormItemUnabled() {
-      return (
-        this.field.type == "vabUpload" || this.field.type == "baseAttachment"
-      );
-    },
     getRules() {
-      if (this.getIsFormItemUnabled()) {
-        return null;
-      }
       return this.rules;
     },
     getPropName() {
-      if (this.formItemProp === "false" || this.getIsFormItemUnabled()) {
+      if (this.formItemProp === "false") {
         return null;
       }
       // if (this.formItemProp) {
@@ -439,7 +441,10 @@ export default {
       let tableWidget = tableRef.widget;
       let fieldKeyName = this.getFieldKeyName(tableWidget);
       let property = this.getFieldKeyName(rowWidget);
-      if (this.isVabsearchFlagWidget(rowWidget)) {
+      if (
+        this.isVabsearchFlagWidget(rowWidget) &&
+        !isVabsearchMultiWidget(rowWidget)
+      ) {
         property = rowWidget.options.vabSearchName || property;
       }
       let rowIndex = Math.max(obj.rowIndex, 0);

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

@@ -85,16 +85,19 @@ export default {
   computed: {
     numberValue: {
       get() {
-        let fieldModel = this.fieldModel;
-        return fieldModel === null ? undefined : fieldModel;
+        const fieldModel = this.fieldModel;
+        if (fieldModel === null || fieldModel === undefined) {
+          return undefined;
+        }
+        return fieldModel;
       },
       set(val) {
-        let newValue = val === undefined ? null : val;
-        this.fieldModel = newValue
-        let currentData =
-        this.tableParam && this.tableParam.row
-          ? this.tableParam.row
-          : this.formModel;
+        const newValue = val === undefined || val === null ? undefined : val;
+        this.fieldModel = newValue;
+        const currentData =
+          this.tableParam && this.tableParam.row
+            ? this.tableParam.row
+            : this.formModel;
         currentData[this.fieldKeyName] = newValue;
       },
     },

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

@@ -0,0 +1,143 @@
+<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"
+  >
+    <div v-if="designState" class="script-input-design-placeholder">
+      {{ getI18nLabel(field.options.placeholder) || "脚本输入框" }}
+      <span class="script-input-mode">({{ editorMode }})</span>
+    </div>
+    <template v-else-if="isReadMode">
+      <pre class="readonly-mode-field script-input-readonly">{{ fieldModel }}</pre>
+    </template>
+    <code-editor
+      v-else
+      v-model="fieldModel"
+      :mode="editorMode"
+      :readonly="field.options.readonly || field.options.disabled"
+      :height="editorHeight"
+      :min-lines="editorMinLines"
+      :max-lines="editorMaxLines"
+      :user-worker="userWorker"
+      :resize="!field.options.disabled && !field.options.readonly"
+      @input="onEditorInput"
+    />
+  </form-item-wrapper>
+</template>
+
+<script>
+import FormItemWrapper from "./form-item-wrapper";
+import emitter from "../../../utils/emitter";
+import i18n from "../../../utils/i18n";
+import fieldMixin from "./fieldMixin";
+
+export default {
+  name: "script-input-widget",
+  componentName: "FieldWidget",
+  mixins: [emitter, fieldMixin, i18n],
+  props: {
+    field: Object,
+    parentWidget: Object,
+    parentList: Array,
+    indexOfParentList: Number,
+    designer: Object,
+    designState: {
+      type: Boolean,
+      default: false,
+    },
+    subFormRowIndex: {
+      type: Number,
+      default: -1,
+    },
+    subFormColIndex: {
+      type: Number,
+      default: -1,
+    },
+    subFormRowId: {
+      type: String,
+      default: "",
+    },
+  },
+  components: {
+    FormItemWrapper,
+  },
+  inject: ["refList", "globalOptionData", "globalModel"],
+  data() {
+    return {
+      oldFieldValue: null,
+      fieldModel: null,
+      rules: [],
+    };
+  },
+  computed: {
+    editorMode() {
+      return this.field.options.editorMode || "javascript";
+    },
+    editorHeight() {
+      return this.field.options.editorHeight || "200px";
+    },
+    editorMinLines() {
+      return this.field.options.editorMinLines || 8;
+    },
+    editorMaxLines() {
+      return this.field.options.editorMaxLines || 30;
+    },
+    userWorker() {
+      return this.field.options.userWorker === true;
+    },
+  },
+  created() {
+    this.initFieldModel();
+    this.registerToRefList();
+    this.initEventHandler();
+    this.buildFieldRules();
+    this.handleOnCreated();
+  },
+  mounted() {
+    this.handleOnMounted();
+  },
+  beforeDestroy() {
+    this.unregisterFromRefList();
+  },
+  methods: {
+    onEditorInput(val) {
+      this.handleInputCustomEvent(val);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/global.scss";
+
+.script-input-design-placeholder {
+  min-height: 120px;
+  padding: 12px;
+  border: 1px dashed #c0c4cc;
+  border-radius: 4px;
+  color: #909399;
+  font-size: 13px;
+  background: #fafafa;
+}
+
+.script-input-mode {
+  margin-left: 6px;
+  color: #336699;
+}
+
+.script-input-readonly {
+  margin: 0;
+  white-space: pre-wrap;
+  word-break: break-all;
+  font-family: Consolas, Monaco, monospace;
+  font-size: 12px;
+}
+</style>

package/src/components/xform/form-designer/setting-panel/property-editor/container-data-table/data-table-editor.vue

@@ -1,5 +1,21 @@
 <template>
   <div>
+    <!-- <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">数据集</el-divider>
+    </el-form-item>
+    <el-form-item :label="i18nt('designer.setting.required')">
+      <el-switch v-model="optionModel.required"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('designer.setting.requiredHint')">
+      <el-input
+        v-model="optionModel.requiredHint"
+        clearable
+        placeholder="留空则使用默认提示"
+      ></el-input>
+    </el-form-item> -->
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">表格布局</el-divider>
+    </el-form-item>
     <el-form-item :label="i18nt('designer.setting.tableWidth')">
       <el-input v-model="optionModel.tableWidth"></el-input>
     </el-form-item>
@@ -135,9 +151,19 @@
         <el-radio label="api">接口动态列</el-radio>
       </el-radio-group>
     </el-form-item>
-    <div v-if="optionModel.dynamicColumnSourceType === 'script'" class="dynamic-column-block">
-      <div class="form-section-label">前端列脚本</div>
-      <div class="form-section-desc">不调接口，脚本直接 return 列配置</div>
+    <div
+      v-if="optionModel.dynamicColumnSourceType === 'script'"
+      class="dynamic-column-block"
+    >
+      <div class="form-section-label">
+        前端列脚本
+        <el-tooltip effect="light" placement="top">
+          <div slot="content" class="field-tip-content">
+            不调接口，脚本直接 return 列配置
+          </div>
+          <i class="el-icon-info label-tip-icon"></i>
+        </el-tooltip>
+      </div>
       <div class="data-table-editor-subsection">
         <el-form-item label="列脚本">
           <a
@@ -153,18 +179,38 @@
         </el-form-item>
       </div>
     </div>
-    <div v-if="optionModel.dynamicColumnSourceType === 'api'" class="dynamic-column-block">
-      <div class="form-section-label">接口动态列</div>
-      <div class="form-section-desc">打开表单时请求后端脚本，返回列配置</div>
+    <div
+      v-if="optionModel.dynamicColumnSourceType === 'api'"
+      class="dynamic-column-block"
+    >
+      <div class="form-section-label">
+        接口动态列
+        <el-tooltip effect="light" placement="top">
+          <div slot="content" class="field-tip-content">
+            打开表单时请求后台脚本，返回字段/列定义（格式与「表头后台字段」一致，详见
+            docs/数据表格动态列 JSON 说明.md）
+          </div>
+          <i class="el-icon-info label-tip-icon"></i>
+        </el-tooltip>
+      </div>
       <div class="data-table-editor-subsection">
         <el-form-item label="脚本编码">
           <el-input
             v-model="optionModel.dynamicColumnScriptCode"
             clearable
-            placeholder="如 getDynamicColumns"
+            placeholder="scriptCode 或 formCode/scriptCode"
           ></el-input>
         </el-form-item>
-        <el-form-item label="请求参数">
+        <el-form-item>
+          <span slot="label">
+            额外参数
+            <el-tooltip effect="light" placement="top">
+              <div slot="content" class="field-tip-content">
+                格式： return { bizType: this.formModel.type }
+              </div>
+              <i class="el-icon-info label-tip-icon"></i>
+            </el-tooltip>
+          </span>
           <a
             href="javascript:void(0);"
             class="a-link link-oneLind"
@@ -178,37 +224,40 @@
         </el-form-item>
         <el-form-item>
           <span slot="label">
-            响应转换
+            转换脚本
             <el-tooltip effect="light" placement="top">
-              <div slot="content" style="line-height: 1.4; max-width: 320px">
-                将接口返回的
-                <code>res</code> 转为列数组；不配置则按平台默认结构解析。
+              <div slot="content" class="field-tip-content">
+                可选。入参 res，返回标准定义数组；不填时默认取
+                res.objx（数组）或 res.objx.fields / res.objx.columns
               </div>
-              <i class="el-icon-info"></i>
+              <i class="el-icon-info label-tip-icon"></i>
             </el-tooltip>
           </span>
           <a
             href="javascript:void(0);"
             class="a-link link-oneLind"
-            @click="editEventHandler('onDynamicColumnsConvert', ['res'])"
+            @click="editDynamicSchemaConvert"
           >
-            <span>{{ optionModel.onDynamicColumnsConvert }}</span>
+            <span>{{ dynamicSchemaConvertDisplay }}</span>
             <i class="el-icon-edit"></i>
           </a>
         </el-form-item>
       </div>
     </div>
-    <div v-if="optionModel.dynamicColumnSourceType !== 'none'" class="dynamic-column-block">
+    <div
+      v-if="optionModel.dynamicColumnSourceType !== 'none'"
+      class="dynamic-column-block"
+    >
       <div class="data-table-editor-subsection">
         <el-form-item>
           <span slot="label">
             加载条件
             <el-tooltip effect="light" placement="top">
-              <div slot="content" style="line-height: 1.4; max-width: 320px">
+              <div slot="content" class="field-tip-content">
                 表格初始化加载动态列前执行。<br />
                 <code>return false</code> 时不加载；不配置则默认加载。
               </div>
-              <i class="el-icon-info"></i>
+              <i class="el-icon-info label-tip-icon"></i>
             </el-tooltip>
           </span>
           <a
@@ -224,15 +273,15 @@
         </el-form-item>
       </div>
     </div>
-    <el-form-item v-if="optionModel.dynamicColumnSourceType !== 'none'" label="动态列模式">
+    <el-form-item v-if="optionModel.dynamicColumnSourceType !== 'none'">
       <span slot="label">
         动态列模式
         <el-tooltip effect="light" placement="top">
-          <div slot="content" style="line-height: 1.4; max-width: 320px">
+          <div slot="content" class="field-tip-content">
             对<strong>生效的动态列</strong>与静态列的合并方式：<br />
             追加 — 静态列 + 动态列；替换 — 仅动态列。
           </div>
-          <i class="el-icon-info"></i>
+          <i class="el-icon-info label-tip-icon"></i>
         </el-tooltip>
       </span>
       <el-select v-model="optionModel.dynamicColumnMode" style="width: 100%">
@@ -700,6 +749,9 @@ export default {
         this.optionModel.isNotShowQueryButton = !val;
       },
     },
+    dynamicSchemaConvertDisplay() {
+      return this.optionModel.dynamicSchemaConvert || "";
+    },
   },
   created: function () {
     // this.reportTemplate = this.getReportTemplate();
@@ -724,6 +776,9 @@ export default {
     }
   },
   methods: {
+    editDynamicSchemaConvert() {
+      this.editEventHandler("dynamicSchemaConvert", ["res"]);
+    },
     dragSort: function () {
       var e = this.$refs.singleTable.$el.querySelectorAll(
           ".el-table__body-wrapper > table > tbody"
@@ -1063,13 +1118,20 @@ export default {
   font-weight: 500;
   color: #303133;
   line-height: 22px;
+  margin-bottom: 8px;
 }
 
-.form-section-desc {
-  font-size: 12px;
+.label-tip-icon {
+  margin-left: 4px;
   color: #909399;
-  line-height: 18px;
-  margin: 2px 0 8px 8px;
+  cursor: pointer;
+  font-size: 14px;
+  vertical-align: middle;
+}
+
+.field-tip-content {
+  line-height: 1.4;
+  max-width: 320px;
 }
 
 .dynamic-column-hint {

package/src/components/xform/form-designer/setting-panel/property-editor/container-data-table/table-column-dialog.vue

@@ -771,6 +771,10 @@ export default {
               value: "textarea",
               label: "多行文本输入框",
             },
+            {
+              value: "editScriptInput",
+              label: "脚本输入框",
+            },
             {
               value: "editSelect",
               label: "下拉框",
@@ -1590,6 +1594,7 @@ export default {
           row.prop = null;
           row.label = null;
           row.sortable = false;
+          row.filterable = false;
         } else {
           let tmpId = "column" + generateId();
           if (!row.width || row.width == 47) row.width = 150;