cloud-web-corejs 1.1.0-dev.19 → 1.1.0-dev.21

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

@@ -1,153 +1,164 @@
-<!--
-/**
- * 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>
+<!--
+/**
+ * author: vformAdmin
+ * email: vdpadmin@163.com
+ * website: https://www.vform666.com
+ * date: 2021.08.18
+ * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
+ */
+-->
+
+<template>
+  <div>
+    <el-alert v-if="fieldControlError" :title="fieldControlError" type="error" :closable="false" show-icon>
+      <el-button type="text" @click="retryFieldControl">重新计算字段规则</el-button>
+    </el-alert>
+    <div v-if="fieldControlBlocked" role="status">正在准备表单，请稍候…</div>
+    <el-form
+      :label-position="labelPosition"
+      :size="size"
+      :class="[customClass, h5RootClass]"
+      class="render-form"
+      :style="fieldControlBlocked
+        ? { visibility: 'hidden' }
+        : (fieldControlInteractionBlocked ? { pointerEvents: 'none' } : null)"
+      :inert="fieldControlInteractionBlocked ? '' : null"
+      :aria-busy="fieldControlBlocked ? 'true' : 'false'"
+      :aria-disabled="fieldControlInteractionBlocked ? 'true' : 'false'"
+      :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 fieldControlMixin from "@base/components/xform/form-render/fieldControlMixin";
+
+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, fieldControlMixin],
+};
+</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>