cloud-web-corejs 1.0.281 → 1.1.0-dev.4

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

@@ -1,154 +1,154 @@
-<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-date-picker ref="fieldEditor" :type="field.options.type" v-model="fieldModel" v-show="!isReadMode" class="full-width-input"
-                    :readonly="field.options.readonly" :disabled="field.options.disabled"
-                    :size="field.options.size"
-                    :clearable="field.options.clearable" :editable="field.options.editable"
-                    :format="field.options.format" :value-format="field.options.valueFormat"
-                    :placeholder="getI18nLabel(field.options.placeholder || '选择日期')"
-                    @focus="handleDateFocusEvent" @blur="handleBlurCustomEvent"
-                    @change="handleDateChangeEvent"
-                    :picker-options="pickerOptions"
-    >
-    </el-date-picker>
-    <template v-if="isReadMode">
-      <span class="readonly-mode-field">{{contentForReadMode}}</span>
-    </template>
-  </form-item-wrapper>
-</template>
-
-<script>
-import FormItemWrapper from './form-item-wrapper'
-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 dateLimitMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/mixins/date-limit-mixin";
-import utcTransformMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/mixins/utc-transform-mixin";
-import relativeDefaultMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/mixins/relative-default-mixin";
-
-export default {
-  name: "date-widget",
-  componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
-  mixins: [emitter, fieldMixin, i18n, dateLimitMixin, utcTransformMixin, relativeDefaultMixin],
-  props: {
-    field: Object,
-    parentWidget: Object,
-    parentList: Array,
-    indexOfParentList: Number,
-    designer: Object,
-
-    designState: {
-      type: Boolean,
-      default: false
-    },
-
-    subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
-      type: Number,
-      default: -1
-    },
-    subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
-      type: Number,
-      default: -1
-    },
-    subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
-      type: String,
-      default: ''
-    },
-
-  },
-  components: {
-    FormItemWrapper,
-  },
-  inject: ['refList', 'globalOptionData', 'globalModel'],
-  data() {
-    return {
-      oldFieldValue: null, //field组件change之前的值
-      fieldModel: null,
-      rules: [],
-      pickerOptions: {}
-    }
-  },
-  computed: {
-    contentForReadMode() {
-      if (!this.fieldModel) {
-        return '';
-      }
-      return this.fieldModel;
-    },
-  },
-  watch: {
-    "field.options.limitStartField"() {
-      this.initDateLimitPickerOptions();
-    },
-    "field.options.limitEndField"() {
-      this.initDateLimitPickerOptions();
-    },
-    "field.options.minDate"() {
-      this.initDateLimitPickerOptions();
-    },
-    "field.options.maxDate"() {
-      this.initDateLimitPickerOptions();
-    },
-    "field.options.minDateType"() {
-      this.initDateLimitPickerOptions();
-    },
-  },
-  beforeCreate() {
-    /* 这里不能访问方法和属性！！ */
-  },
-
-  created() {
-    /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
-       需要在父组件created中初始化！！ */
-    this.initRelativeFieldModel()
-    this.registerToRefList()
-    this.initEventHandler()
-    this.buildFieldRules()
-
-    this.handleOnCreated()
-    this.initDateLimitPickerOptions()
-  },
-
-  mounted() {
-    this.handleOnMounted()
-    this.initDateLimitWatch()
-  },
-
-  beforeDestroy() {
-    this.unregisterFromRefList()
-  },
-
-  methods: {
-    handleDateFocusEvent(event) {
-      /* 最小日期为「当前时间」时，每次展开面板都需按当前时刻重新计算 */
-      if (this.isNowDateValueType(this.field.options.minDateType)) {
-        this.initDateLimitPickerOptions();
-      }
-      this.handleFocusCustomEvent(event);
-    },
-    handleDateChangeEvent(value) {
-      if (this.isDateLimitViolated(value)) {
-        this.$message.warning(this.getDateLimitViolationMessage());
-        this.fieldModel = this.oldFieldValue;
-        return;
-      }
-      this.handleChangeEvent(value);
-    },
-    setNow() {
-      this.$refs.fieldEditor.panel.changeToNow()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import "~@/styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
-
-.full-width-input {
-  width: 100% !important;
-}
-
-</style>
+<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-date-picker ref="fieldEditor" :type="field.options.type" v-model="fieldModel" v-show="!isReadMode" class="full-width-input"
+                    :readonly="field.options.readonly" :disabled="field.options.disabled"
+                    :size="field.options.size"
+                    :clearable="field.options.clearable" :editable="field.options.editable"
+                    :format="field.options.format" :value-format="field.options.valueFormat"
+                    :placeholder="getI18nLabel(field.options.placeholder || '选择日期')"
+                    @focus="handleDateFocusEvent" @blur="handleBlurCustomEvent"
+                    @change="handleDateChangeEvent"
+                    :picker-options="pickerOptions"
+    >
+    </el-date-picker>
+    <template v-if="isReadMode">
+      <span class="readonly-mode-field">{{contentForReadMode}}</span>
+    </template>
+  </form-item-wrapper>
+</template>
+
+<script>
+import FormItemWrapper from './form-item-wrapper'
+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 dateLimitMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/mixins/date-limit-mixin";
+import utcTransformMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/mixins/utc-transform-mixin";
+import relativeDefaultMixin from "../../../../../components/xform/form-designer/form-widget/field-widget/mixins/relative-default-mixin";
+
+export default {
+  name: "date-widget",
+  componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
+  mixins: [emitter, fieldMixin, i18n, dateLimitMixin, utcTransformMixin, relativeDefaultMixin],
+  props: {
+    field: Object,
+    parentWidget: Object,
+    parentList: Array,
+    indexOfParentList: Number,
+    designer: Object,
+
+    designState: {
+      type: Boolean,
+      default: false
+    },
+
+    subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
+      type: Number,
+      default: -1
+    },
+    subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
+      type: Number,
+      default: -1
+    },
+    subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
+      type: String,
+      default: ''
+    },
+
+  },
+  components: {
+    FormItemWrapper,
+  },
+  inject: ['refList', 'globalOptionData', 'globalModel'],
+  data() {
+    return {
+      oldFieldValue: null, //field组件change之前的值
+      fieldModel: null,
+      rules: [],
+      pickerOptions: {}
+    }
+  },
+  computed: {
+    contentForReadMode() {
+      if (!this.fieldModel) {
+        return '';
+      }
+      return this.fieldModel;
+    },
+  },
+  watch: {
+    "field.options.limitStartField"() {
+      this.initDateLimitPickerOptions();
+    },
+    "field.options.limitEndField"() {
+      this.initDateLimitPickerOptions();
+    },
+    "field.options.minDate"() {
+      this.initDateLimitPickerOptions();
+    },
+    "field.options.maxDate"() {
+      this.initDateLimitPickerOptions();
+    },
+    "field.options.minDateType"() {
+      this.initDateLimitPickerOptions();
+    },
+  },
+  beforeCreate() {
+    /* 这里不能访问方法和属性！！ */
+  },
+
+  created() {
+    /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
+       需要在父组件created中初始化！！ */
+    this.initRelativeFieldModel()
+    this.registerToRefList()
+    this.initEventHandler()
+    this.buildFieldRules()
+
+    this.handleOnCreated()
+    this.initDateLimitPickerOptions()
+  },
+
+  mounted() {
+    this.handleOnMounted()
+    this.initDateLimitWatch()
+  },
+
+  beforeDestroy() {
+    this.unregisterFromRefList()
+  },
+
+  methods: {
+    handleDateFocusEvent(event) {
+      /* 最小日期为「当前时间」时，每次展开面板都需按当前时刻重新计算 */
+      if (this.isNowDateValueType(this.field.options.minDateType)) {
+        this.initDateLimitPickerOptions();
+      }
+      this.handleFocusCustomEvent(event);
+    },
+    handleDateChangeEvent(value) {
+      if (this.isDateLimitViolated(value)) {
+        this.$message.warning(this.getDateLimitViolationMessage());
+        this.fieldModel = this.oldFieldValue;
+        return;
+      }
+      this.handleChangeEvent(value);
+    },
+    setNow() {
+      this.$refs.fieldEditor.panel.changeToNow()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "~@/styles/global.scss"; //* form-item-wrapper已引入，还需要重复引入吗？ *//
+
+.full-width-input {
+  width: 100% !important;
+}
+
+</style>

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

@@ -11,7 +11,12 @@
 <template>
   <div
     class="field-wrapper"
-    :class="{ 'design-time-bottom-margin': !!this.designer }"
+    :class="[
+      { 'design-time-bottom-margin': !!this.designer },
+      isH5Field ? 'h5-field' : '',
+      field.options.h5Span === 'half' ? 'h5-half' : '',
+      isH5BlockField ? 'h5-block' : '',
+    ]"
     v-show="!field.options.hidden || designState === true"
   >
     <div>
@@ -258,6 +263,18 @@ import {
   resolveTextMaskFlag,
 } from "../../../../../components/xform/utils/textMaskUtil";
 
+/* H5 版式下独占整行、左对齐的「宽内容」字段（见 isH5BlockField） */
+const H5_BLOCK_FIELD_TYPES = [
+  "vabUpload",
+  "vabUpload2",
+  "baseAttachment",
+  "singleUpload",
+  "picture-upload",
+  "file-upload",
+  "rich-editor",
+  "html-text",
+];
+
 export default {
   name: "form-item-wrapper",
   mixins: [i18n],
@@ -362,6 +379,35 @@ export default {
         : "";
     },
 
+    /**
+     * H5 版式下的「宽内容」字段：附件、图片、富文本这类，
+     * 内容本身是一片区域而不是一行值。
+     *
+     * H5 的紧凑行版式（标签定宽 80px + 内容右对齐，见 styles/h5.scss 块 C/D）
+     * 是给单行输入设计的，套到这些字段上会把附件列表挤到右边贴着边框、
+     * 文件名压线。打上 h5-block 后由样式让它们独占整行、左对齐。
+     */
+    isH5BlockField() {
+      return H5_BLOCK_FIELD_TYPES.indexOf(this.field.type) > -1;
+    },
+
+    /**
+     * H5 版式的字段行锚点。整套 H5 行版式（styles/h5.scss 块 C/C1/C2/C3/D/E）都挂在
+     * .field-wrapper.h5-field 上，与容器解耦。
+     *
+     * 原先锚在 `.h5-detail-wrap .h5-item .h5-form-box`，而 `.h5-item` 只有
+     * h5-card-pane 会吐（h5-card-pane-item.vue），h5-card 吐的是 `.grid-cell`，
+     * 字段/表格直挂 detail-h5.panes 时（设计器的 draggable 是单一 dragGroup，
+     * 任何容器都能拖进去）连 `.h5-form-box` 都没有 —— 这些摆法下整套行版式会
+     * 静默落空，表现为「标签右对齐、值左对齐」（element 默认），与卡片内的
+     * 「标签左、值右」对不上。
+     *
+     * PC 版式不打这个类，故 PC 表单零影响。
+     */
+    isH5Field() {
+      return this.formConfig?.layoutType === "H5";
+    },
+
     subFormName() {
       return !!this.parentWidget ? this.parentWidget.options.name : "";
     },