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

package/src/components/xform/form-render/container-item/h5-card-pane-item.vue

@@ -1,140 +1,160 @@
-<template>
-  <div class="h5-item">
-    <div class="h5-title">
-      <b>{{ widget.options.label }}</b>
-      <div class="btns">
-        <template v-for="(subWidget, swIdx) in widget.buttonWidgetList">
-          <template v-if="'container' === subWidget.category">
-            <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx"
-                       :parent-list="widget.buttonWidgetList"
-                       :index-of-parent-list="swIdx" :parent-widget="widget">
-              <!-- 递归传递插槽！！！ -->
-              <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="subWidget.type + '-widget'" :field="subWidget" :designer="null" :key="swIdx"
-                       :parent-list="widget.buttonWidgetList"
-                       :index-of-parent-list="swIdx" :parent-widget="widget">
-              <!-- 递归传递插槽！！！ -->
-              <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
-                <slot :name="slot" v-bind="scope"/>
-              </template>
-            </component>
-          </template>
-        </template>
-      </div>
-    </div>
-    <div class="h5-form-box">
-      <transition-group name="fade" tag="div" class="form-widget-list">
-        <template v-if="!!widget.widgetList && (widget.widgetList.length > 0)">
-          <template v-for="(subWidget, swIdx) in widget.widgetList">
-            <template v-if="'container' === subWidget.category">
-              <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx"
-                         :parent-list="widget.widgetList"
-                         :index-of-parent-list="swIdx" :parent-widget="widget">
-                <!-- 递归传递插槽！！！ -->
-                <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="subWidget.type + '-widget'" :field="subWidget" :designer="null" :key="swIdx"
-                         :parent-list="widget.widgetList"
-                         :index-of-parent-list="swIdx" :parent-widget="widget">
-                <!-- 递归传递插槽！！！ -->
-                <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
-                  <slot :name="slot" v-bind="scope"/>
-                </template>
-              </component>
-            </template>
-          </template>
-        </template>
-      </transition-group>
-    </div>
-  </div>
-</template>
-
-<script>
-import emitter from '../../../../components/xform/utils/emitter'
-import i18n from "../../../../components/xform/utils/i18n"
-import refMixin from "../../../../components/xform/form-render/refMixin"
-import containerItemMixin from "./containerItemMixin"
-import FieldComponents from '../../../../components/xform/form-designer/form-widget/field-widget/index'
-
-export default {
-  name: "h5-card-pane-item",
-  componentName: 'ContainerItem',
-  mixins: [emitter, i18n, refMixin, containerItemMixin],
-  components: {
-    ...FieldComponents,
-  },
-  props: {
-    widget: Object,
-    parentWidget: Object,
-    parentList: Array,
-    indexOfParentList: Number,
-  },
-  inject: ['refList', 'globalModel', 'previewState'],
-  computed: {
-    customClass() {
-      return this.widget.options.customClass || ''
-    }
-  },
-  watch: {
-    //
-  },
-  created() {
-    this.initRefList()
-    this.handleOnCreated();
-  },
-  mounted() {
-    this.handleOnMounted();
-  },
-  methods: {}
-}
-</script>
-
-<style lang="scss" scoped>
-.grid-container {
-  min-height: 50px;
-  //line-height: 48px;
-  //padding: 6px;
-  outline: 1px dashed #336699;
-
-  > div {
-    height: 100%;
-  }
-
-  .form-widget-list {
-    // min-height: 28px;
-    height: 100%;
-  }
-
-}
-
-.grid-container.selected, .grid-cell.selected {
-  outline: 2px solid $--color-primary !important;
-}
-
-.grid-cell {
-  min-height: 80px;
-  //margin: 6px 0;  /* 设置了margin，栅格列的offset、push、pull会失效！！ */
-  padding: 3px;
-  outline: 1px dashed #336699;
-  position: relative;
-
-  > div {
-    height: 100%;
-  }
-
-  .form-widget-list {
-    min-height: 28px;
-    height: 100%
-  }
-
-}
-</style>
+<template>
+  <!-- customClass 必须绑上：设计器侧 h5-card-pane-widget 是绑了的，
+       这里漏绑会导致设计器里配的 class 到运行期丢失 -->
+  <div class="h5-item" :class="[customClass]">
+    <!-- 标题栏整条可点来折叠，与流程信息卡片（mobile/h5Card/h5CardPane.vue）同交互。
+         标题里的按钮区要 @click.stop，否则点按钮会连带把卡片折起来。 -->
+    <div class="h5-title" @click="toggleFold">
+      <b>{{ widget.options.label }}</b>
+      <i class="arrow" :class="foldClass"></i>
+      <div class="btns" @click.stop>
+        <template v-for="(subWidget, swIdx) in widget.buttonWidgetList">
+          <template v-if="'container' === subWidget.category">
+            <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx"
+                       :parent-list="widget.buttonWidgetList"
+                       :index-of-parent-list="swIdx" :parent-widget="widget">
+              <!-- 递归传递插槽！！！ -->
+              <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="subWidget.type + '-widget'" :field="subWidget" :designer="null" :key="swIdx"
+                       :parent-list="widget.buttonWidgetList"
+                       :index-of-parent-list="swIdx" :parent-widget="widget">
+              <!-- 递归传递插槽！！！ -->
+              <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+                <slot :name="slot" v-bind="scope"/>
+              </template>
+            </component>
+          </template>
+        </template>
+      </div>
+    </div>
+    <!-- 折叠必须用 v-show 而不是 v-if：里面的字段组件挂着 el-form-item 的
+         prop/rules，v-if 销毁重建会打断校验链、丢掉组件内部状态 -->
+    <div class="h5-form-box" v-show="showContent">
+      <transition-group name="fade" tag="div" class="form-widget-list">
+        <template v-if="!!widget.widgetList && (widget.widgetList.length > 0)">
+          <template v-for="(subWidget, swIdx) in widget.widgetList">
+            <template v-if="'container' === subWidget.category">
+              <component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx"
+                         :parent-list="widget.widgetList"
+                         :index-of-parent-list="swIdx" :parent-widget="widget">
+                <!-- 递归传递插槽！！！ -->
+                <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="subWidget.type + '-widget'" :field="subWidget" :designer="null" :key="swIdx"
+                         :parent-list="widget.widgetList"
+                         :index-of-parent-list="swIdx" :parent-widget="widget">
+                <!-- 递归传递插槽！！！ -->
+                <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
+                  <slot :name="slot" v-bind="scope"/>
+                </template>
+              </component>
+            </template>
+          </template>
+        </template>
+      </transition-group>
+    </div>
+  </div>
+</template>
+
+<script>
+import emitter from '../../../../components/xform/utils/emitter'
+import i18n from "../../../../components/xform/utils/i18n"
+import refMixin from "../../../../components/xform/form-render/refMixin"
+import containerItemMixin from "./containerItemMixin"
+import FieldComponents from '../../../../components/xform/form-designer/form-widget/field-widget/index'
+
+export default {
+  name: "h5-card-pane-item",
+  componentName: 'ContainerItem',
+  mixins: [emitter, i18n, refMixin, containerItemMixin],
+  components: {
+    ...FieldComponents,
+  },
+  props: {
+    widget: Object,
+    parentWidget: Object,
+    parentList: Array,
+    indexOfParentList: Number,
+  },
+  inject: ['refList', 'globalModel', 'previewState'],
+  data() {
+    return {
+      // 展开/收起，默认展开
+      showContent: true,
+    }
+  },
+  computed: {
+    customClass() {
+      return this.widget.options.customClass || ''
+    },
+    foldClass() {
+      return this.showContent ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
+    }
+  },
+  watch: {
+    //
+  },
+  created() {
+    this.initRefList()
+    this.handleOnCreated();
+  },
+  mounted() {
+    this.handleOnMounted();
+  },
+  methods: {
+    toggleFold() {
+      this.showContent = !this.showContent;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.grid-container {
+  min-height: 50px;
+  //line-height: 48px;
+  //padding: 6px;
+  outline: 1px dashed #336699;
+
+  > div {
+    height: 100%;
+  }
+
+  .form-widget-list {
+    // min-height: 28px;
+    height: 100%;
+  }
+
+}
+
+.grid-container.selected, .grid-cell.selected {
+  outline: 2px solid $--color-primary !important;
+}
+
+.grid-cell {
+  min-height: 80px;
+  //margin: 6px 0;  /* 设置了margin，栅格列的offset、push、pull会失效！！ */
+  padding: 3px;
+  outline: 1px dashed #336699;
+  position: relative;
+
+  > div {
+    height: 100%;
+  }
+
+  .form-widget-list {
+    min-height: 28px;
+    height: 100%
+  }
+
+}
+</style>