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

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

@@ -0,0 +1,90 @@
+<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.hideHeader"></el-switch>
+    </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-temp-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-grid/gutter-editor.vue

@@ -1,82 +1,82 @@
-<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('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')" 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>
-</template>
-
-<script>
-  import i18n from "../../../../../../components/xform/utils/i18n"
-
-  export default {
-    name: "gutter-editor",
-    mixins: [i18n],
-    props: {
-      designer: Object,
-      selectedWidget: Object,
-      optionModel: Object,
-    },
-    methods: {
-      spanChanged(curGrid) {
-        let spanSum = 0
-        curGrid.cols.forEach((colItem) => {
-          spanSum += colItem.options.span
-        })
-        if (spanSum > 24) {
-          //this.$message.info('列栅格之和超出24')
-          console.log('列栅格之和超出24')
-          //TODO: 语言字符串资源化
-        }
-
-        this.designer.saveCurrentHistoryStep()
-      },
-
-      deleteCol(curGrid, colIdx) {
-        this.designer.deleteColOfGrid(curGrid, colIdx)
-        this.designer.emitHistoryChange()
-      },
-
-      addNewCol(curGrid) {
-        this.designer.addNewColOfGrid(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('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')" 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>
+</template>
+
+<script>
+  import i18n from "../../../../../../components/xform/utils/i18n"
+
+  export default {
+    name: "gutter-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    methods: {
+      spanChanged(curGrid) {
+        let spanSum = 0
+        curGrid.cols.forEach((colItem) => {
+          spanSum += colItem.options.span
+        })
+        if (spanSum > 24) {
+          //this.$message.info('列栅格之和超出24')
+          console.log('列栅格之和超出24')
+          //TODO: 语言字符串资源化
+        }
+
+        this.designer.saveCurrentHistoryStep()
+      },
+
+      deleteCol(curGrid, colIdx) {
+        this.designer.deleteColOfGrid(curGrid, colIdx)
+        this.designer.emitHistoryChange()
+      },
+
+      addNewCol(curGrid) {
+        this.designer.addNewColOfGrid(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-list-h5/list-h5-editor.vue

@@ -59,11 +59,10 @@
               <el-input v-model="scope.row.prop"></el-input>
             </template>
           </el-table-column>
-          <el-table-column :label="i18nt('designer.setting.columnWidth')" width="100" prop="width">
-            <template slot-scope="scope">
-              <el-input v-model="scope.row.width"></el-input>
-            </template>
-          </el-table-column>
+<!-- 「列宽」已移除：H5 明细卡片是 dl/dt/dd 排版，不读列宽 —— 它当年是从数据表格
+           那套列配置沿用过来的，运行期只被塞进一个拼错的键(witdh)、无人读取。
+           列在卡片里占整行还是半行，由下面的「H5列宽」控制。
+           存量模板里残留的 width 值不用清，读不到就是了。 -->
           <el-table-column :label="i18nt('designer.setting.visibleColumn')" width="70" prop="show">
             <template slot-scope="scope">
               <el-switch v-model="scope.row.show"></el-switch>
@@ -79,6 +78,21 @@
               <el-switch v-model="scope.row.showForRow"></el-switch>
             </template>
           </el-table-column>
+          <!-- H5 明细卡片里这个字段占整行还是半行（半行=一行两个）。
+               不配即整行，运行期判等只认 'half'（存量列读到 undefined 就是整行），
+               不能写成 !== 'full'。样式见 xform/styles/h5.scss 块 I2。
+               ★ 用 :value + $set 而不是 v-model：h5Span 是后加的键，存量列上没有，
+               Vue 2 只给赋值那一刻已存在的属性装 getter/setter，直接 v-model
+               新增属性追踪不到，选完不回显。 -->
+          <el-table-column label="H5列宽" width="110" prop="h5Span">
+            <template slot-scope="scope">
+              <el-select :value="scope.row.h5Span" clearable placeholder="整行"
+                         @input="v => $set(scope.row, 'h5Span', v)">
+                <el-option value="full" label="整行"></el-option>
+                <el-option value="half" label="半行(一行两个)"></el-option>
+              </el-select>
+            </template>
+          </el-table-column>
           <el-table-column :label="i18nt('designer.setting.formatOfColumn')" width="200" prop="formatS">
             <template slot-scope="scope">
               <el-select v-model="scope.row.formatS" @change="changeFormatS(scope.row)" clearable>

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

@@ -212,7 +212,7 @@
           optionModel.dynamicSchemaMode !== 'anchor' ||
           !optionModel.dynamicSchemaInheritLayout
         "
-        label="每行列数"
+        label="每行列数"
         class="el-form-item-second"
       >
         <el-input-number
@@ -309,13 +309,13 @@ export default {
 
 <style lang="scss" scoped>
 .form-section-label {
-  margin: 16px 0 8px;
-  padding-left: 8px;
-  color: rgba(0, 0, 0, 0.65);
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 1.3;
-  background: rgba(0, 0, 0, 0.04);
+  margin: 16px 0 8px;
+  padding-left: 8px;
+  color: rgba(0, 0, 0, 0.65);
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.3;
+  background: rgba(0, 0, 0, 0.04);
   padding: 4px 0 4px 8px;
 }
 

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

@@ -1,137 +1,137 @@
-<template>
-  <div>
-    <el-form-item label-width="0">
-      <el-divider class="custom-divider">下拉按钮设置</el-divider>
-    </el-form-item>
-    <el-form-item label="按钮样式" class="form-item-label-top">
-      <el-select
-        v-model="optionModel.dropdownType"
-        placeholder="请选择按钮样式"
-      >
-        <el-option label="按钮" value="button"></el-option>
-        <el-option label="链接" value="link"></el-option>
-      </el-select>
-    </el-form-item>
-    <el-form-item label="下拉触发方式" class="form-item-label-top">
-      <el-select
-        v-model="optionModel.dropdownTrigger"
-        placeholder="请选择下拉触发方式"
-      >
-        <el-option label="点击" value="click"></el-option>
-        <el-option label="悬停" value="hover"></el-option>
-      </el-select>
-    </el-form-item>
-    <el-form-item label="下拉按钮选项">
-      <draggable
-        tag="ul"
-        class="draggable-box"
-      >
-        <li
-          v-for="(colItem, colIdx) in selectedWidget.widgetList"
-          :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="button"
-            icon="el-icon-edit"
-            class="col-delete-button"
-            style="position: unset"
-            @click="openEditFormatConfigDialog(colItem, colIdx)"
-          ></el-button>
-          <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"
-        >
-          增加
-        </el-button>
-      </div>
-    </el-form-item>
-  </div>
-</template>
-
-<script>
-import Draggable from "vuedraggable";
-import i18n from "../../../utils/i18n";
-import { deepClone, generateId } from "../../../utils/util";
-
-export default {
-  name: "dropdownFlag-editor",
-  mixins: [i18n],
-  components: {
-    Draggable,
-  },
-  props: {
-    designer: Object,
-    selectedWidget: Object,
-    optionModel: Object,
-  },
-  inject: ["openWidgetPropertyDialog"],
-  methods: {
-    deleteCol(gridWidget, colIdx) {
-      if (!!gridWidget && !!gridWidget.widgetList) {
-        gridWidget.widgetList.splice(colIdx, 1);
-      }
-      this.designer.emitHistoryChange();
-    },
-
-    addNewCol(gridWidget) {
-      let newGridCol = deepClone(
-        this.designer.getFieldWidgetByType("dropdown-item")
-      );
-      let tmpId = generateId();
-      newGridCol.id = "dropdown-item-" + tmpId;
-      newGridCol.options.name = "dropdownItem" + tmpId;
-      newGridCol.options.label = "dropdownItem" + tmpId;
-      gridWidget.widgetList.push(newGridCol);
-      this.designer.emitHistoryChange();
-    },
-    openEditFormatConfigDialog(fieldWidget, index) {
-      this.openWidgetPropertyDialog({
-        columnSelectedWidget: deepClone(fieldWidget),
-        callback: (columnSelectedWidget) => {
-          fieldWidget.options = columnSelectedWidget.options;
-        },
-      });
-    },
-  },
-};
-</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">下拉按钮设置</el-divider>
+    </el-form-item>
+    <el-form-item label="按钮样式" class="form-item-label-top">
+      <el-select
+        v-model="optionModel.dropdownType"
+        placeholder="请选择按钮样式"
+      >
+        <el-option label="按钮" value="button"></el-option>
+        <el-option label="链接" value="link"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="下拉触发方式" class="form-item-label-top">
+      <el-select
+        v-model="optionModel.dropdownTrigger"
+        placeholder="请选择下拉触发方式"
+      >
+        <el-option label="点击" value="click"></el-option>
+        <el-option label="悬停" value="hover"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="下拉按钮选项">
+      <draggable
+        tag="ul"
+        class="draggable-box"
+      >
+        <li
+          v-for="(colItem, colIdx) in selectedWidget.widgetList"
+          :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="button"
+            icon="el-icon-edit"
+            class="col-delete-button"
+            style="position: unset"
+            @click="openEditFormatConfigDialog(colItem, colIdx)"
+          ></el-button>
+          <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"
+        >
+          增加
+        </el-button>
+      </div>
+    </el-form-item>
+  </div>
+</template>
+
+<script>
+import Draggable from "vuedraggable";
+import i18n from "../../../utils/i18n";
+import { deepClone, generateId } from "../../../utils/util";
+
+export default {
+  name: "dropdownFlag-editor",
+  mixins: [i18n],
+  components: {
+    Draggable,
+  },
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+  inject: ["openWidgetPropertyDialog"],
+  methods: {
+    deleteCol(gridWidget, colIdx) {
+      if (!!gridWidget && !!gridWidget.widgetList) {
+        gridWidget.widgetList.splice(colIdx, 1);
+      }
+      this.designer.emitHistoryChange();
+    },
+
+    addNewCol(gridWidget) {
+      let newGridCol = deepClone(
+        this.designer.getFieldWidgetByType("dropdown-item")
+      );
+      let tmpId = generateId();
+      newGridCol.id = "dropdown-item-" + tmpId;
+      newGridCol.options.name = "dropdownItem" + tmpId;
+      newGridCol.options.label = "dropdownItem" + tmpId;
+      gridWidget.widgetList.push(newGridCol);
+      this.designer.emitHistoryChange();
+    },
+    openEditFormatConfigDialog(fieldWidget, index) {
+      this.openWidgetPropertyDialog({
+        columnSelectedWidget: deepClone(fieldWidget),
+        callback: (columnSelectedWidget) => {
+          fieldWidget.options = columnSelectedWidget.options;
+        },
+      });
+    },
+  },
+};
+</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>