cloud-web-corejs 1.1.0-dev.5 → 1.1.0-dev.7

package/src/components/xform/form-designer/toolbar-panel/indexMixin.js

@@ -354,6 +354,7 @@ modules = {
         let importObj = JSON.parse(this.importTemplate);
         this.designer.handleImportJson(importObj);
         this.designer.loadFormJson(importObj);
+        this.$emit("loadWidgets");
 
         this.showImportJsonDialogFlag = false;
         this.$message.success(this.i18nt("designer.hint.importJsonSuccess"));

package/src/components/xform/form-designer/widget-panel/index.vue

@@ -6,7 +6,7 @@
         <el-tab-pane v-if="showComponentLib" name="componentLib">
           <span slot="label"><i class="el-icon-set-up"></i> {{ i18nt('designer.componentLib') }}</span>
 
-          <el-collapse v-model="activeNames" class="widget-collapse">
+          <el-collapse v-model="activeNames" class="widget-collapse" :key="currentLayoutType">
             <el-collapse-item name="1" :title="i18nt('designer.containerTitle')">
               <draggable tag="ul" :list="containers" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                          :clone="handleContainerWidgetClone" ghost-class="ghost" :sort="false"
@@ -34,6 +34,7 @@
               </draggable>
             </el-collapse-item>
 
+            <template v-if="advancedFields.length">
             <el-collapse-item name="3" :title="i18nt('designer.advancedFieldTitle')">
               <draggable tag="ul" :list="advancedFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                          :move="checkFieldMove"
@@ -47,8 +48,9 @@
                 </li>
               </draggable>
             </el-collapse-item>
+            </template>
 
-            <!-- -->
+            <template v-if="customFields.length">
             <el-collapse-item name="4" :title="i18nt('designer.customFieldTitle')">
               <draggable tag="ul" :list="customFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                          :move="checkFieldMove"
@@ -62,7 +64,7 @@
                 </li>
               </draggable>
             </el-collapse-item>
-            <!-- -->
+            </template>
 
 
           </el-collapse>
@@ -71,7 +73,7 @@
         <el-tab-pane v-if="showMetadataLib" name="metadataLib">
           <span slot="label"><i class="el-icon-set-up"></i> {{ i18nt('designer.metadataLib') }}</span>
 
-          <el-collapse v-model="metadataActiveNames" class="widget-collapse">
+          <el-collapse v-model="metadataActiveNames" class="widget-collapse" :key="currentLayoutType">
             <el-collapse-item name="0" :title="i18nt('designer.containerTitle')">
               <draggable tag="ul" :list="commonContainers" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                          :clone="handleContainerWidgetClone" ghost-class="ghost" :sort="false"
@@ -97,6 +99,7 @@
                 </li>
               </draggable>
             </el-collapse-item>
+            <template v-if="commonAdvancedFields.length">
             <el-collapse-item name="3" :title="i18nt('designer.advancedFieldTitle')">
               <draggable tag="ul" :list="commonAdvancedFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                          :move="checkFieldMove"
@@ -110,6 +113,7 @@
                 </li>
               </draggable>
             </el-collapse-item>
+            </template>
 
 
 
@@ -160,7 +164,7 @@
                 </li>
               </draggable>
             </el-collapse-item>
-            <el-collapse-item name="compare" :title="i18nt('对比组件')">
+            <el-collapse-item v-if="currentLayoutType !== 'H5'" name="compare" :title="i18nt('对比组件')">
               <draggable tag="ul" :list="compareFields" :group="{name: 'dragGroup', pull: 'clone', put: false}"
                          :move="checkFieldMove"
                          :clone="handleFieldWidgetClone" ghost-class="ghost" :sort="false">
@@ -311,8 +315,8 @@ export default {
         background: #f1f2f3;
         font-size: 12px;
         padding-left: 12px;
-        > span{
-          display: flex;align-items: center;white-space: normal;line-height: 1.2;height: 35px;
+        > span{
+          display: flex;align-items: center;white-space: normal;line-height: 1.2;height: 35px;
         }
         svg {
           display: inline-block;

package/src/components/xform/form-designer/widget-panel/indexMixin.js

@@ -6,7 +6,8 @@ import {
   advancedFields,
   customFields,
   businessFields,
-  widgetPanelOrder
+  widgetPanelOrder,
+  h5PanelAllowTypes
 } from "./widgetsConfig"
 import {
   formTemplates
@@ -115,6 +116,16 @@ modules = {
         ? !1
         : !!this.designerConfig.metadataLib;
     },
+    currentLayoutType() {
+      return (this.designer && this.designer.formConfig && this.designer.formConfig.layoutType) || "PC";
+    },
+  },
+  watch: {
+    /* 打开 H5 模板是 setFormJson 后才写入 layoutType；面板 mounted 时仍是默认 PC。
+       版式变化后必须按新 layoutType 重筛，否则左侧一直停在 PC 组件列表。 */
+    currentLayoutType() {
+      this.loadWidgets();
+    },
   },
   mounted() {
     this.designerConfig.chartLib && (this.firstTab = "chartLib"),
@@ -181,7 +192,8 @@ modules = {
 
       this.commonContainers = this.containers.filter(con => !!con.commonFlag && this.getIsShow(con));
 
-      this.basicFields = this.basicFields.map(fld => {
+      /* 每次从 widgetsConfig 原表筛，不能拿 this.xxx（已被上次 layoutType 滤过）再滤一遍 */
+      this.basicFields = basicFields.map(fld => {
         return {
           ...fld,
           displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
@@ -190,13 +202,13 @@ modules = {
         return !this.isBanned(fld.type) && this.getIsShow(fld);
       });
 
-      this.advancedFields = this.advancedFields.map(fld => {
+      this.advancedFields = advancedFields.map(fld => {
         return {
           ...fld,
           displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
         };
       }).filter(fld => {
-        return !this.isBanned(fld.type) && this.getIsShow(fld);
+        return !fld.internal && !this.isBanned(fld.type) && this.getIsShow(fld);
       });
 
       /* 面板分组归一：表单数据字段（搜索框/自动完成/级联/凭证/状态等）展示在基础字段分组 */
@@ -209,7 +221,7 @@ modules = {
       );
       this.advancedFields = this.sortByPanelOrder(this.advancedFields, widgetPanelOrder.advancedFields);
 
-      this.businessFields = this.businessFields.map(fld => {
+      this.businessFields = businessFields.map(fld => {
         return {
           ...fld,
           displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
@@ -229,7 +241,7 @@ modules = {
           && moveTypes.indexOf(fld.type) === -1;
       }), widgetPanelOrder.advancedFields);
 
-      this.customFields = this.customFields.map(fld => {
+      this.customFields = customFields.map(fld => {
         return {
           ...fld,
           displayName: this.i18n2t(`designer.widgetLabel.${fld.type}`, `extension.widgetLabel.${fld.type}`)
@@ -257,6 +269,14 @@ modules = {
         return !this.isBanned(fld.type) && this.getIsShow(fld);
       });
 
+      /* 空分组不渲染（见 index.vue 的 v-if），展开项按当前版式重算：
+         不能只做减法，否则从 H5 切回 PC 时分组回来了却是收起状态 */
+      this.activeNames = ["1", "2"]
+        .concat(this.advancedFields.length ? ["3"] : [])
+        .concat(this.customFields.length ? ["4"] : []);
+      this.metadataActiveNames = ["0", "1", "2", "4"]
+        .concat(this.commonAdvancedFields.length ? ["3"] : []);
+
     },
 
     /* 按 widgetPanelOrder 排序面板展示列表；未列出的类型（含扩展组件）排在末尾，保持原有相对顺序 */
@@ -343,6 +363,10 @@ modules = {
       let flag = !ftd.layoutType || ftd.layoutType === layoutType;
       let flag2 = this.checkColumnFlag(ftd)
       let flag3 = !!ftd.commonFlag
+      /* H5 面板按白名单收口，PC 不受影响 */
+      if (layoutType === "H5") {
+        flag = flag && h5PanelAllowTypes.indexOf(ftd.type) > -1;
+      }
       return flag && flag2 && flag3;
     }
   }

package/src/components/xform/form-designer/widget-panel/widgetsConfig.js

@@ -51,6 +51,7 @@ export const containers = [
     category: "container",
     icon: "table",
     commonFlag: !0,
+    layoutType: "PC",
     columnFlag: true,
     rows: [],
     options: {
@@ -341,6 +342,7 @@ export const containers = [
     category: "container",
     icon: "text-field",
     commonFlag: !0,
+    layoutType: "PC",
     formItemFlag: !0,
     widgetList: [],
     options: {
@@ -716,6 +718,7 @@ export const containers = [
     category: "container",
     icon: "tree-pane",
     commonFlag: !0,
+    layoutType: "PC",
     leftWidgetList: [],
     widgetList: [],
     options: {
@@ -771,7 +774,7 @@ export const containers = [
       name: "",
       hidden: !1,
       customClass: "",
-      fullWidth: false,
+      fullWidth: true,
     },
   },
   {
@@ -795,6 +798,7 @@ export const containers = [
     icon: "tree",
     category: "container",
     commonFlag: !0,
+    layoutType: "PC",
     widgetList: [],
     options: {
       name: "tree",
@@ -1174,6 +1178,7 @@ export const basicFields = [
     type: "input-batch",
     icon: "input-batch",
     commonFlag: !0,
+    layoutType: "PC",
     formItemFlag: !0,
     columnFlag: true,
     tableField: null,
@@ -2071,6 +2076,7 @@ export const basicFields = [
     type: "html-text",
     icon: "html-text",
     commonFlag: !0,
+    layoutType: "PC",
     formItemFlag: !1,
     columnFlag: false,
     options: {
@@ -2397,6 +2403,7 @@ export const advancedFields = [
     type: "echart-pie",
     icon: "echart-pie",
     commonFlag: !0,
+    layoutType: "PC",
     formItemFlag: false,
     options: {
       name: "",
@@ -2501,6 +2508,7 @@ export const advancedFields = [
     type: "echart-bar",
     icon: "echart",
     commonFlag: !0,
+    layoutType: "PC",
     formItemFlag: false,
     options: {
       name: "",
@@ -2691,6 +2699,7 @@ export const advancedFields = [
     type: "echart-category",
     icon: "echart-category",
     commonFlag: !0,
+    layoutType: "PC",
     formItemFlag: false,
     options: {
       name: "",
@@ -3264,6 +3273,7 @@ export const advancedFields = [
     icon: "el-icon-upload",
     formItemFlag: !1,
     commonFlag: !0,
+    layoutType: "PC",
     columnFlag: true,
     tableField: null,
     options: {
@@ -3293,6 +3303,7 @@ export const advancedFields = [
     icon: "el-icon-upload",
     formItemFlag: !1,
     commonFlag: !0,
+    layoutType: "PC",
     columnFlag: true,
     options: {
       name: "",
@@ -3324,6 +3335,7 @@ export const advancedFields = [
     icon: "el-icon-upload",
     formItemFlag: !1,
     commonFlag: !0,
+    layoutType: "PC",
     columnFlag: true,
     options: {
       name: "",
@@ -3396,6 +3408,7 @@ export const advancedFields = [
     type: "import-button",
     icon: "el-icon-download",
     commonFlag: !0,
+    layoutType: "PC",
     columnFlag: true,
     formItemFlag: !1,
     options: {
@@ -3448,6 +3461,7 @@ export const advancedFields = [
     type: "import2-button",
     icon: "el-icon-download",
     commonFlag: !0,
+    layoutType: "PC",
     columnFlag: true,
     formItemFlag: !1,
     options: {
@@ -3496,6 +3510,7 @@ export const advancedFields = [
     type: "print-button",
     icon: "el-icon-printer",
     commonFlag: !0,
+    layoutType: "PC",
     columnFlag: true,
     formItemFlag: !1,
     options: {
@@ -3537,6 +3552,7 @@ export const advancedFields = [
     type: "print-detail-button",
     icon: "el-icon-printer",
     commonFlag: !0,
+    layoutType: "PC",
     columnFlag: false,
     formItemFlag: !1,
     options: {
@@ -3654,6 +3670,7 @@ export const advancedFields = [
     type: "census",
     icon: "census",
     commonFlag: !0,
+    layoutType: "PC",
     formItemFlag: false,
     options: {
       name: "",
@@ -3720,6 +3737,7 @@ export const advancedFields = [
     category: "container",
     icon: "tree-table",
     commonFlag: !0,
+    layoutType: "PC",
     formItemFlag: !0,
     rows: [],
     options: {
@@ -3796,6 +3814,7 @@ export const advancedFields = [
     type: "gantt",
     icon: "chart",
     commonFlag: !0,
+    layoutType: "PC",
     formItemFlag: !1,
     options: {
       name: "",
@@ -3818,6 +3837,7 @@ export const advancedFields = [
     type: "download-button",
     icon: "el-icon-download",
     commonFlag: !0,
+    layoutType: "PC",
     columnFlag: true,
     formItemFlag: !1,
     options: {
@@ -3856,6 +3876,7 @@ export const advancedFields = [
     type: "vue-page",
     icon: "vue-sfc",
     commonFlag: !0,
+    layoutType: "PC",
     formItemFlag: !1,
     columnFlag: false,
     options: {
@@ -4104,6 +4125,8 @@ export const businessFields = [
     commonFlag: !0,
     columnFlag: true,
     formItemFlag: !0,
+    /* H5 业务组件只保留创建人/更新人/创建时间/更新时间 */
+    layoutType: "PC",
     tableField: null,
     options: {
       ...vabsearchConfig,
@@ -4127,6 +4150,7 @@ export const businessFields = [
     commonFlag: !0,
     columnFlag: true,
     formItemFlag: !0,
+    layoutType: "PC",
     tableField: null,
     options: {
       ...vabsearchConfig,
@@ -4151,6 +4175,7 @@ export const businessFields = [
     commonFlag: !0,
     columnFlag: true,
     formItemFlag: !0,
+    layoutType: "PC",
     tableField: null,
     options: {
       ...projectTagConfig,
@@ -4172,6 +4197,7 @@ export const businessFields = [
     commonFlag: !0,
     columnFlag: true,
     formItemFlag: !0,
+    layoutType: "PC",
     tableField: null,
     options: {
       ...projectTagConfig,
@@ -4234,6 +4260,7 @@ export const businessFields = [
     commonFlag: !0,
     columnFlag: true,
     formItemFlag: !1,
+    layoutType: "PC",
     options: {
       name: "",
       label: "复制",
@@ -4264,6 +4291,7 @@ export const businessFields = [
     commonFlag: !0,
     columnFlag: true,
     formItemFlag: !1,
+    layoutType: "PC",
     options: {
       name: "",
       // label: "暂存",
@@ -4286,6 +4314,7 @@ export const businessFields = [
     type: "oplog",
     icon: "list",
     commonFlag: !0,
+    layoutType: "PC",
     formItemFlag: !1,
     options: {
       name: "",
@@ -4308,6 +4337,7 @@ export const businessFields = [
     icon: "file-upload-field",
     commonFlag: !0,
     formItemFlag: !0,
+    layoutType: "PC",
     tableField: null,
     options: {
       name: "",
@@ -4653,6 +4683,28 @@ export const widgetPanelOrder = {
   ],
 };
 
+/**
+ * H5 版式左侧组件面板白名单（仅影响面板展示，不影响已有模板渲染与按 type 查找）。
+ * 容器：H5详情 / H5列表 / H5卡片 / h5表格
+ * 基础字段：文本、状态、凭证、下拉选项
+ *   （status / vabUpload 定义在 advancedFields，面板会归入基础字段）
+ * 业务组件：创建人、更新人、创建时间、更新时间
+ */
+export const h5PanelAllowTypes = [
+  "detail-h5",
+  "list-h5",
+  "h5-card",
+  "h5-table",
+  "text",
+  "status",
+  "vabUpload",
+  "select",
+  "create_by-text",
+  "modify_by-text",
+  "create_date-text",
+  "modify_date-text",
+];
+
 /**
  * H5 版式：所有表单字段统一具备 h5Span（整宽/半宽）。
  *