cloud-web-corejs 1.0.276 → 1.0.277

package/src/components/xform/form-designer/setting-panel/property-editor/container-detail/detail-editor.vue

@@ -1,74 +1,96 @@
-<template>
-  <div>
-    <el-form-item label-width="0">
-      <el-divider class="custom-divider">{{ i18nt('designer.setting.columnSetting') }}</el-divider>
-    </el-form-item>
-    <el-form-item :label="i18nt('隐藏导航')">
-      <el-switch v-model="optionModel.hideNav"></el-switch>
-    </el-form-item>
-    <el-form-item :label="i18nt('designer.setting.colsOfGrid')"></el-form-item>
-    <el-form-item label-width="0">
-      <draggable tag="ul" class="draggable-box" :list="selectedWidget.panes"
-                 v-bind="{ group: 'optionsGroup', ghostClass: 'ghost', handle: '.drag-option' }">
-        <li v-for="(colItem, colIdx) in selectedWidget.panes" :key="colIdx" class="col-item">
-          <i class="el-icon-s-operation drag-option"></i>
-          <el-input v-model="colItem.options.label" class="cell-span-input"></el-input>
-          <el-button circle plain size="mini" type="danger" @click="deleteCol(selectedWidget, colIdx)"
-                     icon="el-icon-minus" class="col-delete-button" style="position: unset;"></el-button>
-        </li>
-      </draggable>
-      <div>
-        <el-button type="text" @click="addNewCol(selectedWidget)" icon="el-icon-circle-plus-outline" class="add-option">
-          {{ i18nt('designer.setting.addColumn') }}
-        </el-button>
-      </div>
-    </el-form-item>
-  </div>
-</template>
-
-<script>
-import Draggable from 'vuedraggable';
-import i18n from "../../../../../../components/xform/utils/i18n"
-
-export default {
-  name: "detail-editor",
-  mixins: [i18n],
-  components: {
-    Draggable,
-  },
-  props: {
-    designer: Object,
-    selectedWidget: Object,
-    optionModel: Object,
-  },
-  methods: {
-    deleteCol(curGrid, colIdx) {
-      this.designer.deletePaneOfDetail(curGrid, colIdx)
-      this.designer.emitHistoryChange()
-    },
-
-    addNewCol(curGrid) {
-      this.designer.addNewPaneOfDetail(curGrid)
-      this.designer.emitHistoryChange()
-    },
-
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-li.col-item {
-  list-style: none;
-
-  span.col-span-title {
-    display: inline-block;
-    font-size: 13px;
-    width: 120px;
-  }
-
-  .col-delete-button {
-    margin-left: 6px;
-  }
-}
-
-</style>
+<template>
+  <div>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider">{{ i18nt('designer.setting.columnSetting') }}</el-divider>
+    </el-form-item>
+    <el-form-item :label="i18nt('隐藏导航')">
+      <el-switch v-model="optionModel.hideNav"></el-switch>
+    </el-form-item>
+    <el-form-item :label="i18nt('隐藏标题栏')">
+      <el-switch v-model="optionModel.hideHeader"></el-switch>
+      <span style="margin-left: 8px; color: #999; font-size: 12px">
+        整条标题栏不渲染（含标题、翻单/流程按钮及拖入的按钮控件）
+      </span>
+    </el-form-item>
+    <el-form-item :label="i18nt('designer.setting.colsOfGrid')"></el-form-item>
+    <el-form-item class="form-item-label-top" label-width="0">
+      <!-- panes 是通用容器列表(还可能挂 tab 等容器承载标签)。内容模块的 label 可改；
+           其它容器的 options.label 在画布上并不渲染,改了没反应,所以只读占位——
+           但必须列出来,否则标签形态下这个列表会整个空掉,看着像坏了。
+           拖拽排序绑的是原数组 selectedWidget.panes,排序结果能写回去。 -->
+      <draggable tag="ul" class="draggable-box" :list="selectedWidget.panes"
+                 v-bind="{ group: 'optionsGroup', ghostClass: 'ghost', handle: '.drag-option' }">
+        <li v-for="(colItem, colIdx) in selectedWidget.panes" :key="colItem.id || colIdx" class="col-item">
+          <i class="el-icon-s-operation drag-option"></i>
+          <el-input v-if="colItem.type === 'detail-pane'" v-model="colItem.options.label"
+                    class="cell-span-input"></el-input>
+          <el-input v-else :value="paneTypeLabel(colItem)" class="cell-span-input" disabled
+                    :title="i18nt('请在画布中编辑')"></el-input>
+          <el-button circle plain size="mini" type="danger" @click="deleteCol(selectedWidget, colItem)"
+                     icon="el-icon-minus" class="col-delete-button" style="position: unset;"></el-button>
+        </li>
+      </draggable>
+      <div>
+        <el-button type="text" @click="addNewCol(selectedWidget)" icon="el-icon-circle-plus-outline" class="add-option">
+          {{ i18nt('designer.setting.addColumn') }}
+        </el-button>
+      </div>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+import Draggable from 'vuedraggable';
+import i18n from "../../../../../../components/xform/utils/i18n"
+
+export default {
+  name: "detail-editor",
+  mixins: [i18n],
+  components: {
+    Draggable,
+  },
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+  methods: {
+    deleteCol(curGrid, colItem) {
+      // 传 widget 引用而非下标：列表里混着内容模块和其它容器，下标语义不如引用直白
+      this.designer.deletePaneOfDetail(curGrid, colItem)
+      this.designer.emitHistoryChange()
+    },
+
+    // 非内容模块(如标签容器)在列表里只做占位展示，取组件面板上的同一套显示名
+    paneTypeLabel(colItem) {
+      return this.i18n2t(
+        `designer.widgetLabel.${colItem.type}`,
+        `extension.widgetLabel.${colItem.type}`
+      )
+    },
+
+    addNewCol(curGrid) {
+      this.designer.addNewPaneOfDetail(curGrid)
+      this.designer.emitHistoryChange()
+    },
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+li.col-item {
+  list-style: none;
+
+  span.col-span-title {
+    display: inline-block;
+    font-size: 13px;
+    width: 120px;
+  }
+
+  .col-delete-button {
+    margin-left: 6px;
+  }
+}
+
+</style>

package/src/components/xform/form-designer/setting-panel/property-editor/container-detail-plain/detail-plain-editor.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider">{{ i18nt('designer.setting.columnSetting') }}</el-divider>
+    </el-form-item>
+    <el-form-item :label="i18nt('隐藏导航')">
+      <el-switch v-model="optionModel.hideNav"></el-switch>
+      <span style="margin-left: 8px; color: #999; font-size: 12px">
+        简洁详情默认隐藏模块导航
+      </span>
+    </el-form-item>
+    <el-form-item :label="i18nt('designer.setting.colsOfGrid')"></el-form-item>
+    <el-form-item class="form-item-label-top" label-width="0">
+      <draggable tag="ul" class="draggable-box" :list="selectedWidget.panes"
+                 v-bind="{ group: 'optionsGroup', ghostClass: 'ghost', handle: '.drag-option' }">
+        <li v-for="(colItem, colIdx) in selectedWidget.panes" :key="colIdx" class="col-item">
+          <i class="el-icon-s-operation drag-option"></i>
+          <el-input v-model="colItem.options.label" class="cell-span-input"></el-input>
+          <el-button circle plain size="mini" type="danger" @click="deleteCol(selectedWidget, colIdx)"
+                     icon="el-icon-minus" class="col-delete-button" style="position: unset;"></el-button>
+        </li>
+      </draggable>
+      <div>
+        <el-button type="text" @click="addNewCol(selectedWidget)" icon="el-icon-circle-plus-outline" class="add-option">
+          {{ i18nt('designer.setting.addColumn') }}
+        </el-button>
+      </div>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+import Draggable from 'vuedraggable';
+import i18n from "../../../../../../components/xform/utils/i18n"
+
+export default {
+  name: "detail-plain-editor",
+  mixins: [i18n],
+  components: {
+    Draggable,
+  },
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+  methods: {
+    deleteCol(curGrid, colIdx) {
+      this.designer.deletePaneOfDetail(curGrid, colIdx)
+      this.designer.emitHistoryChange()
+    },
+
+    addNewCol(curGrid) {
+      this.designer.addNewPaneOfDetail(curGrid)
+      this.designer.emitHistoryChange()
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+li.col-item {
+  list-style: none;
+
+  span.col-span-title {
+    display: inline-block;
+    font-size: 13px;
+    width: 120px;
+  }
+
+  .col-delete-button {
+    margin-left: 6px;
+  }
+}
+</style>

package/src/components/xform/form-designer/setting-panel/property-editor/container-grid/colHeight-editor.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-form-item :label="i18nt('designer.setting.gridColHeight')">
+    <el-form-item :label="i18nt('designer.setting.gridColHeight')" class="form-item-label-top">
       <el-input type="number" v-model="optionModel.colHeight" @input.native="inputNumberHandler"
                 min="0" class="hide-spin-button"></el-input>
     </el-form-item>

package/src/components/xform/form-designer/setting-panel/property-editor/container-grid/gutter-editor.vue

@@ -3,21 +3,22 @@
     <el-form-item label-width="0">
       <el-divider class="custom-divider">{{i18nt('designer.setting.columnSetting')}}</el-divider>
     </el-form-item>
-    <el-form-item :label="i18nt('designer.setting.gutter')">
+    <el-form-item :label="i18nt('designer.setting.gutter')" class="form-item-label-top">
       <el-input-number v-model="optionModel.gutter" style="width: 100%"></el-input-number>
     </el-form-item>
-    <el-form-item :label="i18nt('designer.setting.colsOfGrid')"></el-form-item>
-    <el-form-item label-width="0">
-      <li v-for="(colItem, colIdx) in selectedWidget.cols" :key="colIdx" class="col-item">
-        <span class="col-span-title">{{i18nt('designer.setting.colSpanTitle')}}{{colIdx + 1}}</span>
-        <el-input-number v-model.number="colItem.options.span" :min="1" :max="24"
-                         @change="(newValue, oldValue) => spanChanged(selectedWidget, colItem, colIdx, newValue, oldValue)"
-                         class="cell-span-input"></el-input-number>
-        <el-button circle plain size="mini" type="danger" @click="deleteCol(selectedWidget, colIdx)"
-                   icon="el-icon-minus" class="col-delete-button"></el-button>
-      </li>
-      <div>
-        <el-button type="text" @click="addNewCol(selectedWidget)" icon="el-icon-circle-plus-outline" class="add-option">{{i18nt('designer.setting.addColumn')}}</el-button>
+    <el-form-item :label="i18nt('designer.setting.colsOfGrid')" class="form-item-label-top">
+      <div class="draggable-list">
+        <li v-for="(colItem, colIdx) in selectedWidget.cols" :key="colIdx" class="col-item">
+          <span class="col-span-title">{{i18nt('designer.setting.colSpanTitle')}}{{colIdx + 1}}</span>
+          <el-input-number v-model.number="colItem.options.span" :min="1" :max="24"
+                           @change="(newValue, oldValue) => spanChanged(selectedWidget, colItem, colIdx, newValue, oldValue)"
+                           class="cell-span-input"></el-input-number>
+          <el-button circle plain size="mini" type="danger" @click="deleteCol(selectedWidget, colIdx)"
+                     icon="el-icon-minus" class="col-delete-button"></el-button>
+        </li>
+        <div>
+          <el-button type="text" @click="addNewCol(selectedWidget)" icon="el-icon-circle-plus-outline" class="add-option">{{i18nt('designer.setting.addColumn')}}</el-button>
+        </div>
       </div>
     </el-form-item>
   </div>

package/src/components/xform/form-designer/setting-panel/property-editor/container-grid-col/grid-col-height-editor.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form-item :label="i18nt('designer.setting.colHeight')">
+  <el-form-item :label="i18nt('designer.setting.colHeight')" class="form-item-label-top">
     <el-input type="text" v-model="optionModel.height"
               min="0" class="hide-spin-button"></el-input>
   </el-form-item>

package/src/components/xform/form-designer/setting-panel/property-editor/container-grid-col/grid-col-offset-editor.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form-item :label="i18nt('designer.setting.colOffsetTitle')">
+  <el-form-item :label="i18nt('designer.setting.colOffsetTitle')" class="form-item-label-top">
     <el-input-number v-model.number="optionModel.offset" :max="24"
                      style="width: 100%"></el-input-number>
   </el-form-item>

package/src/components/xform/form-designer/setting-panel/property-editor/container-grid-col/grid-col-pull-editor.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form-item :label="i18nt('designer.setting.colPullTitle')">
+  <el-form-item :label="i18nt('designer.setting.colPullTitle')" class="form-item-label-top">
     <el-input-number v-model.number="optionModel.pull" :max="24"
                      style="width: 100%"></el-input-number>
   </el-form-item>

package/src/components/xform/form-designer/setting-panel/property-editor/container-grid-col/grid-col-push-editor.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-form-item :label="i18nt('designer.setting.colPushTitle')">
+  <el-form-item :label="i18nt('designer.setting.colPushTitle')" class="form-item-label-top">
     <el-input-number v-model.number="optionModel.push" :max="24"
                      style="width: 100%"></el-input-number>
   </el-form-item>

package/src/components/xform/form-designer/setting-panel/property-editor/container-grid-col/grid-col-span-editor.vue

@@ -1,21 +1,21 @@
 <template>
   <div>
-    <el-form-item :label="i18nt('designer.setting.colSpanTitle')" v-if="!optionModel.responsive">
+    <el-form-item :label="i18nt('designer.setting.colSpanTitle')" v-if="!optionModel.responsive" class="form-item-label-top">
       <el-input-number v-model.number="optionModel.span" :min="1" :max="24"
                        style="width: 100%"></el-input-number>
     </el-form-item>
     <el-form-item :label="i18nt('designer.setting.colSpanTitle') + '(PC)'"
-                  v-if="!!optionModel.responsive && (formConfig.layoutType === 'PC')">
+                  v-if="!!optionModel.responsive && (formConfig.layoutType === 'PC')" class="form-item-label-top">
       <el-input-number v-model.number="optionModel.md" :min="1" :max="24"
                        style="width: 100%"></el-input-number>
     </el-form-item>
     <el-form-item :label="i18nt('designer.setting.colSpanTitle') + '(Pad)'"
-                  v-if="!!optionModel.responsive && (formConfig.layoutType === 'Pad')">
+                  v-if="!!optionModel.responsive && (formConfig.layoutType === 'Pad')" class="form-item-label-top">
       <el-input-number v-model.number="optionModel.sm" :min="1" :max="24"
                        style="width: 100%"></el-input-number>
     </el-form-item>
     <el-form-item :label="i18nt('designer.setting.colSpanTitle') + '(H5)'"
-                  v-if="!!optionModel.responsive && (formConfig.layoutType === 'H5')">
+                  v-if="!!optionModel.responsive && (formConfig.layoutType === 'H5')" class="form-item-label-top">
       <el-input-number v-model.number="optionModel.xs" :min="1" :max="24"
                        style="width: 100%"></el-input-number>
     </el-form-item>

package/src/components/xform/form-designer/setting-panel/property-editor/container-h5-card/h5-card-editor.vue

@@ -1,124 +1,124 @@
-<!--
-  因panes属性并不包含于options属性之中，故只能跟其他options属性之内的属性值合并设置，此处选择与customClass合并！！
--->
-
-<template>
-  <div>
-    <el-form-item :label="i18nt('designer.setting.tabPaneSetting')"></el-form-item>
-    <el-form-item label-width="0" class="panes-setting">
-      <draggable tag="ul" :list="selectedWidget.panes"
-                 v-bind="{group:'panesGroup', ghostClass: 'ghost', handle: '.drag-option'}" class="draggable-box">
-        <li v-for="(tpItem, tpIdx) in selectedWidget.panes" :key="tpIdx" class="col-item">
-          <!-- span style="margin-right: 12px">{{tpIdx + 1}}</span -->
-          <el-checkbox v-model="tpItem.options.active" disabled @change="(evt) => onTabPaneActiveChange(evt, tpItem)"
-                       style="margin-right: 8px">{{ i18nt('designer.setting.paneActive') }}
-          </el-checkbox>
-          <el-input type="text" v-model="tpItem.options.label" style="width:calc(100% - 65px) !important;"></el-input>
-          <i class="el-icon-s-operation drag-option"></i>
-          <el-button circle plain size="mini" type="danger" @click="deleteTabPane(selectedWidget, tpIdx)"
-                     icon="el-icon-minus" class="col-delete-button"></el-button>
-        </li>
-        <div>
-          <el-button type="text" @click="addTabPane(selectedWidget)" icon="el-icon-circle-plus-outline"
-                     class="add-option">{{ i18nt('designer.setting.addTabPane') }}
-          </el-button>
-        </div>
-      </draggable>
-    </el-form-item>
-  </div>
-</template>
-
-<script>
-import i18n from "../../../../../../components/xform/utils/i18n"
-import Draggable from 'vuedraggable'
-import {deepClone, generateId} from "../../../../../../components/xform/utils/util";
-
-export default {
-  name: "h5-card-editor",
-  componentName: 'PropertyEditor',
-  mixins: [i18n],
-  components: {
-    Draggable,
-  },
-  props: {
-    designer: Object,
-    selectedWidget: Object,
-    optionModel: Object,
-  },
-  data() {
-    return {
-      cssClassList: [],
-    }
-  },
-  created() {
-    this.cssClassList = deepClone(this.designer.getCssClassList())
-    //监听表单css代码改动事件并重新加载！
-    this.designer.handleEvent('form-css-updated', (cssClassList) => {
-      this.cssClassList = cssClassList
-    })
-  },
-  methods: {
-    onTabPaneActiveChange(evt, tpItem) {
-      //TODO: !!!
-    },
-
-    addTabPane(tabsWidget) {
-      // this.designer.addTabPaneOfTabs(curTabs)
-
-      const tabPanes = tabsWidget.panes;
-      let newTabPane = deepClone(this.designer.getContainerByType('h5-card-pane'));
-      newTabPane.id = 'h5-card-pane-' + generateId();
-      newTabPane.options.name = newTabPane.id;
-      newTabPane.options.label = 'h5-card ' + (tabPanes.length + 1);
-      tabPanes.push(newTabPane);
-
-      this.designer.emitHistoryChange()
-    },
-
-    deleteTabPane(curTabs, tpIdx) {
-      if (curTabs.panes.length === 1) {
-        this.$message.info(this.i18nt('designer.hint.lastPaneCannotBeDeleted'))
-        return
-      }
-
-      curTabs.panes.splice(tpIdx, 1);
-      this.designer.emitHistoryChange()
-    },
-
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-li.col-item {
-  list-style: none;
-
-  span.col-span-title {
-    display: inline-block;
-    font-size: 13px;
-    width: 120px;
-  }
-
-  .col-delete-button {
-    margin-left: 6px;
-  }
-}
-
-.panes-setting {
-  ul {
-    padding-inline-start: 0;
-    padding-left: 0; /* 重置IE11默认样式 */
-    margin: 0;
-  }
-
-  .drag-option {
-    cursor: move;
-  }
-
-  li.ghost {
-    background: #fff;
-    border: 2px dotted $--color-primary;
-  }
-}
-
-</style>
+<!--
+  因panes属性并不包含于options属性之中，故只能跟其他options属性之内的属性值合并设置，此处选择与customClass合并！！
+-->
+
+<template>
+  <div>
+    <el-form-item :label="i18nt('designer.setting.tabPaneSetting')"></el-form-item>
+    <el-form-item label-width="0" class="panes-setting form-item-label-top">
+      <draggable tag="ul" :list="selectedWidget.panes"
+                 v-bind="{group:'panesGroup', ghostClass: 'ghost', handle: '.drag-option'}" class="draggable-box">
+        <li v-for="(tpItem, tpIdx) in selectedWidget.panes" :key="tpIdx" class="col-item">
+          <!-- span style="margin-right: 12px">{{tpIdx + 1}}</span -->
+          <el-checkbox v-model="tpItem.options.active" disabled @change="(evt) => onTabPaneActiveChange(evt, tpItem)"
+                       style="margin-right: 8px">{{ i18nt('designer.setting.paneActive') }}
+          </el-checkbox>
+          <el-input type="text" v-model="tpItem.options.label" style="width:calc(100% - 65px) !important;"></el-input>
+          <i class="el-icon-s-operation drag-option"></i>
+          <el-button circle plain size="mini" type="danger" @click="deleteTabPane(selectedWidget, tpIdx)"
+                     icon="el-icon-minus" class="col-delete-button"></el-button>
+        </li>
+        <div>
+          <el-button type="text" @click="addTabPane(selectedWidget)" icon="el-icon-circle-plus-outline"
+                     class="add-option">{{ i18nt('designer.setting.addTabPane') }}
+          </el-button>
+        </div>
+      </draggable>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+import i18n from "../../../../../../components/xform/utils/i18n"
+import Draggable from 'vuedraggable'
+import {deepClone, generateId} from "../../../../../../components/xform/utils/util";
+
+export default {
+  name: "h5-card-editor",
+  componentName: 'PropertyEditor',
+  mixins: [i18n],
+  components: {
+    Draggable,
+  },
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+  data() {
+    return {
+      cssClassList: [],
+    }
+  },
+  created() {
+    this.cssClassList = deepClone(this.designer.getCssClassList())
+    //监听表单css代码改动事件并重新加载！
+    this.designer.handleEvent('form-css-updated', (cssClassList) => {
+      this.cssClassList = cssClassList
+    })
+  },
+  methods: {
+    onTabPaneActiveChange(evt, tpItem) {
+      //TODO: !!!
+    },
+
+    addTabPane(tabsWidget) {
+      // this.designer.addTabPaneOfTabs(curTabs)
+
+      const tabPanes = tabsWidget.panes;
+      let newTabPane = deepClone(this.designer.getContainerByType('h5-card-pane'));
+      newTabPane.id = 'h5-card-pane-' + generateId();
+      newTabPane.options.name = newTabPane.id;
+      newTabPane.options.label = 'h5-card ' + (tabPanes.length + 1);
+      tabPanes.push(newTabPane);
+
+      this.designer.emitHistoryChange()
+    },
+
+    deleteTabPane(curTabs, tpIdx) {
+      if (curTabs.panes.length === 1) {
+        this.$message.info(this.i18nt('designer.hint.lastPaneCannotBeDeleted'))
+        return
+      }
+
+      curTabs.panes.splice(tpIdx, 1);
+      this.designer.emitHistoryChange()
+    },
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+li.col-item {
+  list-style: none;
+
+  span.col-span-title {
+    display: inline-block;
+    font-size: 13px;
+    width: 120px;
+  }
+
+  .col-delete-button {
+    margin-left: 6px;
+  }
+}
+
+.panes-setting {
+  ul {
+    padding-inline-start: 0;
+    padding-left: 0; /* 重置IE11默认样式 */
+    margin: 0;
+  }
+
+  .drag-option {
+    cursor: move;
+  }
+
+  li.ghost {
+    background: #fff;
+    border: 2px dotted $--color-primary;
+  }
+}
+
+</style>