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

package/src/components/xform/form-render/index.vue

@@ -1,147 +1,153 @@
-<!--
-/**
- * author: vformAdmin
- * email: vdpadmin@163.com
- * website: https://www.vform666.com
- * date: 2021.08.18
- * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
- */
--->
-
-<template>
-  <div>
-    <el-form
-      :label-position="labelPosition"
-      :size="size"
-      :class="[customClass]"
-      class="render-form"
-      :label-width="labelWidth"
-      :validate-on-rule-change="false"
-      :model="formDataModel"
-      ref="renderForm"
-      @submit.native.prevent
-    >
-      <template v-if="showFormContent">
-        <template v-for="(widget, index) in widgetList">
-          <template v-if="'container' === widget.category">
-            <component
-              :is="getContainerWidgetName(widget)"
-              :widget="widget"
-              :field="widget"
-              :key="widget.id"
-              :parent-list="widgetList"
-              :index-of-parent-list="index"
-              :parent-widget="null"
-            >
-              <!-- 递归传递插槽！！！ -->
-              <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
-                <slot :name="slot" v-bind="scope" />
-              </template>
-            </component>
-          </template>
-          <template v-else>
-            <component
-              :is="getWidgetName(widget)"
-              :field="widget"
-              :form-model="formDataModel"
-              :designer="null"
-              :key="widget.id"
-              :parent-list="widgetList"
-              :index-of-parent-list="index"
-              :parent-widget="null"
-            >
-              <!-- 递归传递插槽！！！ -->
-              <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
-                <slot :name="slot" v-bind="scope" />
-              </template>
-            </component>
-          </template>
-        </template>
-      </template>
-    </el-form>
-    <searchFormDialog
-      v-if="showSearchDialog"
-      :visiable.sync="showSearchDialog"
-      ref="searchFormDialog"
-      :option="searchDialogOption"
-    ></searchFormDialog>
-    <formDialog
-      v-if="showFormDialog"
-      :visiable.sync="showFormDialog"
-      ref="formDialog"
-      :option="formDialogOption"
-    ></formDialog>
-    <importDialog
-      v-if="showImportDialog"
-      :visiable.sync="showImportDialog"
-      :param="importDialogOption"
-      :parentTarget="_self"
-    ></importDialog>
-    <fileReferenceDialog
-      v-if="showFileReferenceDialog"
-      :visiable.sync="showFileReferenceDialog"
-      :option="fileReferenceDialogOption"
-    ></fileReferenceDialog>
-    <formulaDialog
-      v-if="formulaDialogVisible"
-      :visiable.sync="formulaDialogVisible"
-      :option="formulaDialogOption"
-    ></formulaDialog>
-    <baseFormulaDialog
-      v-if="baseFormulaDialogVisible"
-      :visiable.sync="baseFormulaDialogVisible"
-      :option="baseFormulaDialogOption"
-    ></baseFormulaDialog>
-    <template v-if="showQrCanvas">
-      <canvas ref="qrCanvas" v-show="false" :width="qrWidth" :height="qrHeight"></canvas>
-    </template>
-    <univerDialog
-      v-if="showUniverDialog"
-      :visiable.sync="showUniverDialog"
-      :option="univerDialogOption"
-    ></univerDialog>
-    <compareDelList
-      v-if="showCompareDelList"
-      :visiable.sync="showCompareDelList"
-      :option="compareDelListOption"
-    ></compareDelList>
-  </div>
-</template>
-
-<script>
-//import ElForm from 'element-ui/packages/form/src/form.vue'  /* 用于源码调试Element UI */
-import "./container-item/index";
-import FieldComponents from "../../../components/xform/form-designer/form-widget/field-widget/index";
-import indexMixin from "../../../components/xform/form-render/indexMixin";
-import formDynamicFieldMixin from "../../../components/xform/form-render/formDynamicFieldMixin";
-
-export default {
-  name: "VFormRender",
-  components: {
-    ...FieldComponents,
-    searchFormDialog: () =>
-      import(
-        "../../../components/xform/form-designer/form-widget/dialog/searchFormDialog.vue"
-      ),
-    formDialog: () =>
-      import("../../../components/xform/form-designer/form-widget/dialog/formDialog.vue"),
-    importDialog: () =>
-      import(
-        "../../../components/xform/form-designer/form-widget/dialog/importDialog.vue"
-      ),
-    fileReferenceDialog: () =>
-      import(
-        "../../../components/xform/form-designer/form-widget/dialog/fileReferenceDialog.vue"
-      ),
-    compareDelList: () =>
-      import("../../../components/xform/form-render/compareDelList.vue"),
-  },
-  mixins: [indexMixin, formDynamicFieldMixin],
-};
-</script>
-
-<style lang="scss" scoped>
-.el-form ::v-deep .el-row {
-  // padding: 8px;
-}
-</style>
+<!--
+/**
+ * author: vformAdmin
+ * email: vdpadmin@163.com
+ * website: https://www.vform666.com
+ * date: 2021.08.18
+ * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
+ */
+-->
+
+<template>
+  <div>
+    <el-form
+      :label-position="labelPosition"
+      :size="size"
+      :class="[customClass, h5RootClass]"
+      class="render-form"
+      :label-width="labelWidth"
+      :validate-on-rule-change="false"
+      :model="formDataModel"
+      ref="renderForm"
+      @submit.native.prevent
+    >
+      <template v-if="showFormContent">
+        <template v-for="(widget, index) in widgetList">
+          <template v-if="'container' === widget.category">
+            <component
+              :is="getContainerWidgetName(widget)"
+              :widget="widget"
+              :field="widget"
+              :key="widget.id"
+              :parent-list="widgetList"
+              :index-of-parent-list="index"
+              :parent-widget="null"
+            >
+              <!-- 递归传递插槽！！！ -->
+              <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+                <slot :name="slot" v-bind="scope" />
+              </template>
+            </component>
+          </template>
+          <template v-else>
+            <component
+              :is="getWidgetName(widget)"
+              :field="widget"
+              :form-model="formDataModel"
+              :designer="null"
+              :key="widget.id"
+              :parent-list="widgetList"
+              :index-of-parent-list="index"
+              :parent-widget="null"
+            >
+              <!-- 递归传递插槽！！！ -->
+              <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+                <slot :name="slot" v-bind="scope" />
+              </template>
+            </component>
+          </template>
+        </template>
+      </template>
+    </el-form>
+    <searchFormDialog
+      v-if="showSearchDialog"
+      :visiable.sync="showSearchDialog"
+      ref="searchFormDialog"
+      :option="searchDialogOption"
+    ></searchFormDialog>
+    <formDialog
+      v-if="showFormDialog"
+      :visiable.sync="showFormDialog"
+      ref="formDialog"
+      :option="formDialogOption"
+    ></formDialog>
+    <importDialog
+      v-if="showImportDialog"
+      :visiable.sync="showImportDialog"
+      :param="importDialogOption"
+      :parentTarget="_self"
+    ></importDialog>
+    <fileReferenceDialog
+      v-if="showFileReferenceDialog"
+      :visiable.sync="showFileReferenceDialog"
+      :option="fileReferenceDialogOption"
+    ></fileReferenceDialog>
+    <formulaDialog
+      v-if="formulaDialogVisible"
+      :visiable.sync="formulaDialogVisible"
+      :option="formulaDialogOption"
+    ></formulaDialog>
+    <baseFormulaDialog
+      v-if="baseFormulaDialogVisible"
+      :visiable.sync="baseFormulaDialogVisible"
+      :option="baseFormulaDialogOption"
+    ></baseFormulaDialog>
+    <template v-if="showQrCanvas">
+      <canvas ref="qrCanvas" v-show="false" :width="qrWidth" :height="qrHeight"></canvas>
+    </template>
+    <univerDialog
+      v-if="showUniverDialog"
+      :visiable.sync="showUniverDialog"
+      :option="univerDialogOption"
+    ></univerDialog>
+    <compareDelList
+      v-if="showCompareDelList"
+      :visiable.sync="showCompareDelList"
+      :option="compareDelListOption"
+    ></compareDelList>
+  </div>
+</template>
+
+<script>
+//import ElForm from 'element-ui/packages/form/src/form.vue'  /* 用于源码调试Element UI */
+import "./container-item/index";
+import FieldComponents from "../../../components/xform/form-designer/form-widget/field-widget/index";
+import indexMixin from "../../../components/xform/form-render/indexMixin";
+import formDynamicFieldMixin from "../../../components/xform/form-render/formDynamicFieldMixin";
+
+export default {
+  name: "VFormRender",
+  components: {
+    ...FieldComponents,
+    searchFormDialog: () =>
+      import(
+        "../../../components/xform/form-designer/form-widget/dialog/searchFormDialog.vue"
+      ),
+    formDialog: () =>
+      import("../../../components/xform/form-designer/form-widget/dialog/formDialog.vue"),
+    importDialog: () =>
+      import(
+        "../../../components/xform/form-designer/form-widget/dialog/importDialog.vue"
+      ),
+    fileReferenceDialog: () =>
+      import(
+        "../../../components/xform/form-designer/form-widget/dialog/fileReferenceDialog.vue"
+      ),
+    compareDelList: () =>
+      import("../../../components/xform/form-render/compareDelList.vue"),
+  },
+  mixins: [indexMixin, formDynamicFieldMixin],
+};
+</script>
+
+<style lang="scss" scoped>
+.el-form ::v-deep .el-row {
+  // padding: 8px;
+}
+</style>
+
+<!-- H5 版式样式基线：必须非 scoped，要穿透到各 field-widget 内部的 el-form-item。
+     全部规则收在 .xform-h5 下（由上面 el-form 的 h5RootClass 输出），PC 版式不生效。 -->
+<style lang="scss">
+@import "../styles/h5.scss";
+</style>

package/src/components/xform/form-render/indexMixin.js

@@ -69,6 +69,9 @@ import {
   resolveTreeSubmitConfig,
 } from "../utils/treeTableUtil";
 
+/* 暂时：H5 运行时整表只读（设计器画布不受影响）。打开 H5 编辑时改 false 即可。 */
+const H5_TEMP_READ_ONLY = true;
+
 let modules = {};
 const baseRefUtil = {
   emitter,
@@ -184,7 +187,7 @@ modules = {
       },
       previewState: this.previewState,
       getReadMode: function () {
-        return e.readModeFlag;
+        return e.getReadMode();
       },
       getSubFormFieldFlag: function () {
         return !1;
@@ -338,6 +341,27 @@ modules = {
         : "";
     },
 
+    /**
+     * H5 版式根类：整套移动端样式都收在 .xform-h5 作用域下（styles/h5.scss）。
+     * 必须由 form-render 自己输出，不能依赖宿主壳——表单还会从 formDialog /
+     * formDrawer / outLink/form_view / 微前端子应用等路径渲染，
+     * views/user/form/vform/render.vue 的 .h5-layout 在那几条路径上拿不到。
+     */
+    h5RootClass() {
+      return !!this.formConfig && this.formConfig.layoutType === "H5"
+        ? "xform-h5"
+        : "";
+    },
+
+    /** 暂时：H5 版式强制只读 */
+    isH5TempReadOnly() {
+      return (
+        H5_TEMP_READ_ONLY &&
+        !!this.formConfig &&
+        this.formConfig.layoutType === "H5"
+      );
+    },
+
     formModel() {
       return this.formDataModel;
     },
@@ -350,6 +374,7 @@ modules = {
     this.currentFormData = this.formData;
 
     this.initGlobalConfig(); //初始化全局配置
+    this.applyH5TempReadOnly();
     this.buildFormModel(!this.formJsonObj ? null : this.formJsonObj.widgetList);
 
     // this.handleOnCreated(),
@@ -2043,6 +2068,7 @@ modules = {
             this.$set(this.formJsonObj, "formConfig", i.formConfig),
             (this._provided.formConfig = i.formConfig),
             this.$set(this.formJsonObj, "widgetList", i.widgetList),
+            this.applyH5TempReadOnly(),
             this.insertCustomStyleAndScriptNode(),
             this.$nextTick(function () {
               t.initFormObject(!1), t.handleOnMounted();
@@ -3586,10 +3612,16 @@ modules = {
     setReadMode: function () {
       let e =
         !(arguments.length > 0 && void 0 !== arguments[0]) || arguments[0];
-      this.readModeFlag = e;
+      /* H5 暂时只读：不允许关掉 */
+      this.readModeFlag = this.isH5TempReadOnly ? true : e;
     },
     getReadMode: function () {
-      return this.readModeFlag;
+      return this.readModeFlag || this.isH5TempReadOnly;
+    },
+    applyH5TempReadOnly() {
+      if (this.isH5TempReadOnly) {
+        this.readModeFlag = true;
+      }
     },
     getGlobalDsv: function () {
       return this.globalDsv;

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

@@ -62,6 +62,10 @@ export default {
           autocomplete: "Autocomplete"
         },
         hint: {
+          h5DetailContentArea: "Content: drop h5 card",
+          h5DetailBottomArea: "Bottom buttons: 3 inline, rest in More",
+          h5PaneButtonArea: "Buttons",
+          h5PaneFieldArea: "Fields: drop field / h5 table / h5 list",
           selectParentWidget: "Select parent of this widget",
           moveUpWidget: "Move up this widget",
           moveDownWidget: "Move down this widget",
@@ -193,6 +197,16 @@ export default {
           fixedQuery: "Fixed Query Condition",
           fixedQueryHelp:
             "Keeps its value when Refresh / Revert / Confirm runs, and is read-only in Query Condition Setting",
+          h5Span: "H5 Width",
+          h5SpanFull: "Full",
+          h5SpanHalf: "Half",
+          h5SpanHelp:
+            "H5 layout only. Half puts two fields side by side, matching the compact two-column mobile layout",
+          itemStyle: "Item Style",
+          itemStylePlain: "Plain",
+          itemStyleCard: "Card",
+          itemStyleHelp:
+            "Card style adds a dot title and a right arrow, tap to open item detail; Plain keeps the original look",
           textContent: "Text",
           htmlContent: "HTML",
           clearable: "Clearable",

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

@@ -97,6 +97,7 @@ export default {
       "detail-pane": "内容模块",
       "detail-h5": "H5详情",
       "list-h5": "H5列表",
+      "detail-temp":'模板模块',
       text: "文本",
       "tree-pane": "树/列表布局",
       "h5-card": "h5卡片",
@@ -132,6 +133,11 @@ export default {
       childrenKeyName: "子节点属性名称",
     },
     hint: {
+      /* h5卡片选项卡的两个投放区说明（设计器画布常驻，见 h5-card-pane-widget） */
+      h5DetailContentArea: "内容区：拖入 h5卡片",
+      h5DetailBottomArea: "底部按钮区：拖入按钮（平铺 3 个，超出收进「更多」）",
+      h5PaneButtonArea: "按钮区",
+      h5PaneFieldArea: "字段区：拖入字段 / h5表格 / H5列表",
       formulaSetting: "公式设置",
       formulaModel: "模式",
       formulaModelView: "查看",
@@ -347,6 +353,16 @@ export default {
       fixedQuery: "固定查询条件",
       fixedQueryHelp:
         "开启后该条件不被刷新、查询条件设置的还原/确定清空，且在查询条件设置里只读",
+      h5Span: "H5 占宽",
+      h5SpanFull: "整宽",
+      h5SpanHalf: "半宽",
+      h5SpanHelp:
+        "仅 H5 版式生效。半宽时两个字段并排一行，对应移动端的紧凑两列版式",
+      itemStyle: "明细行样式",
+      itemStylePlain: "朴素列表",
+      itemStyleCard: "卡片",
+      itemStyleHelp:
+        "卡片样式带圆点标题与右侧箭头，点击进入明细详情；朴素列表为原有表现",
       textContent: "静态文字",
       preWrap: "自动换行",
       htmlContent: "HTML",
@@ -498,6 +514,7 @@ export default {
       containerClass: "容器样式",
       styleTitClass: "样式选择",
       styleTableClass: "表格样式",
+      styleTempClass: "模板样式",
       iconClass: "图标样式",
       globalFunctions: "表单全局函数",
       addEventHandler: "编写代码",