cloud-web-corejs 1.0.54-dev.810 → 1.0.54-dev.811

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

@@ -338,6 +338,18 @@ 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"
+        : "";
+    },
+
     formModel() {
       return this.formDataModel;
     },

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

@@ -193,6 +193,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卡片",
@@ -347,6 +348,16 @@ export default {
       fixedQuery: "固定查询条件",
       fixedQueryHelp:
         "开启后该条件不被刷新、查询条件设置的还原/确定清空，且在查询条件设置里只读",
+      h5Span: "H5 占宽",
+      h5SpanFull: "整宽",
+      h5SpanHalf: "半宽",
+      h5SpanHelp:
+        "仅 H5 版式生效。半宽时两个字段并排一行，对应移动端的紧凑两列版式",
+      itemStyle: "明细行样式",
+      itemStylePlain: "朴素列表",
+      itemStyleCard: "卡片",
+      itemStyleHelp:
+        "卡片样式带圆点标题与右侧箭头，点击进入明细详情；朴素列表为原有表现",
       textContent: "静态文字",
       preWrap: "自动换行",
       htmlContent: "HTML",
@@ -498,6 +509,7 @@ export default {
       containerClass: "容器样式",
       styleTitClass: "样式选择",
       styleTableClass: "表格样式",
+      styleTempClass: "模板样式",
       iconClass: "图标样式",
       globalFunctions: "表单全局函数",
       addEventHandler: "编写代码",