cloud-web-corejs 1.0.54-dev.80 → 1.0.54-dev.800

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

@@ -668,13 +668,7 @@ export default {
       }
     },
     changeFormatS(row) {
-      let columnWidgetConfig = this.getColumnWidgetConfig(row, true);
-      let {columnSelectedWidget, columnEditFields} = columnWidgetConfig;
-      if (columnSelectedWidget) {
-        row.columnOption = columnSelectedWidget.options;
-      } else {
-        row.columnOption = {}
-      }
+      row.widget = this.designer.createColumnWidget(row, false) || null;
       if (row.formatS == 'editDelete' || row.formatS == 'editButton') {
         row.width = 47;
         row.prop = null;
@@ -689,32 +683,32 @@ export default {
       }
     },
     getColumnWidgetConfig(row, isChange) {
-      let formatS = row.formatS
       let columnSelectedWidget = null;
       let columnEditFields = null;
 
       let type = this.columnFormatMap[row.formatS];
-      /*if (type == 'date') {
-        columnEditFields = ['type', 'format', 'valueFormat']
-      } else if (type == 'select') {
-
-      }
-      if (type == 'vabsearch') {
-        columnEditFields = ['vabSearchField', 'formCode', 'formVersion', 'required', 'showFormField', 'onSearchConfirm', 'onSearchClear']
-      }*/
 
       if (type) {
-        columnSelectedWidget = this.$baseLodash.cloneDeep(this.designer.getFieldWidgetByType(type));
-        let tmpId = generateId();
-        let idVal = row.prop ? row.prop : (type + tmpId);
-        columnSelectedWidget.id = idVal;
-        columnSelectedWidget.options.name = idVal;
-        if (!isChange && row.columnOption && Object.keys(row.columnOption).length) {
-          row.columnOption.required = row.required || false;
-          columnSelectedWidget.options = row.columnOption;
+        if (!isChange) {
+          const sourceWidget = this.designer.getColumnWidget(row, false);
+          if (sourceWidget) {
+            columnSelectedWidget = this.$baseLodash.cloneDeep(sourceWidget);
+            columnSelectedWidget.options.required = row.required || false;
+          } else {
+            columnSelectedWidget = this.$baseLodash.cloneDeep(this.designer.getFieldWidgetByType(type));
+            let tmpId = generateId();
+            let idVal = row.prop ? row.prop : (type + tmpId);
+            columnSelectedWidget.id = idVal;
+            columnSelectedWidget.options.name = idVal;
+            columnSelectedWidget.options.required = row.required || false;
+          }
         } else {
+          columnSelectedWidget = this.$baseLodash.cloneDeep(this.designer.getFieldWidgetByType(type));
+          let tmpId = generateId();
+          let idVal = row.prop ? row.prop : (type + tmpId);
+          columnSelectedWidget.id = idVal;
+          columnSelectedWidget.options.name = idVal;
           columnSelectedWidget.options.required = row.required || false;
-          row.columnOption = columnSelectedWidget.options;
         }
         columnSelectedWidget.options.name = row.prop;
         columnSelectedWidget.options.label = row.label;
@@ -724,38 +718,32 @@ export default {
       return {columnSelectedWidget, columnEditFields};
     },
     openFormatConfigDialog(row, index) {
-      let option = row.columnOption;
-      let selectedWidget;
-      let columnWidgetConfig = this.getColumnWidgetConfig(row);
-      let {columnSelectedWidget, columnEditFields} = columnWidgetConfig;
-      if (columnSelectedWidget) {
-        option = columnSelectedWidget.options;
-        selectedWidget = columnSelectedWidget;
-      } else {
-        option = {}
-        selectedWidget = {};
+      const {columnSelectedWidget, columnEditFields} = this.getColumnWidgetConfig(row);
+      if (!columnSelectedWidget) {
+        return;
       }
-
-      let columnOption = this.$baseLodash.cloneDeep(option);
-      row.columnOption = columnOption;
+      columnSelectedWidget.options = this.$baseLodash.cloneDeep(
+        columnSelectedWidget.options
+      );
       this.operateIndex = index;
 
       this.openWidgetPropertyDialog({
         row: row,
-        columnSelectedWidget: selectedWidget,
+        columnSelectedWidget,
         index: index,
         columnEditFields: columnEditFields,
-        callback: (columnOption) => {
-          this.confirmFormatConfigDialog(columnOption);
+        callback: (confirmedWidget) => {
+          this.confirmFormatConfigDialog(confirmedWidget);
         }
       })
     },
-    confirmFormatConfigDialog(columnOption) {
+    confirmFormatConfigDialog(columnSelectedWidget) {
+      const options = columnSelectedWidget.options;
       let row = this.optionModel.tableColumns[this.operateIndex];
-      row.columnOption = columnOption;
-      row.prop = columnOption.name;
-      row.label = columnOption.label;
-      row.required = columnOption.required;
+      row.widget = columnSelectedWidget;
+      row.prop = options.name;
+      row.label = options.label;
+      row.required = options.required;
     },
     openFieldTreeDialog() {
       this.treeData = [{

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

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

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

@@ -1,5 +1,5 @@
 <template>
-  <el-form-item :label="i18nt('designer.setting.cellWidth')">
+  <el-form-item :label="i18nt('designer.setting.cellWidth')" class="form-item-label-top">
     <el-input type="text" v-model="optionModel.width"></el-input>
   </el-form-item>
 </template>

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

@@ -1,119 +1,119 @@
-<!--
-  因tabs属性并不包含于options属性之中，故只能跟其他options属性之内的属性值合并设置，此处选择与customClass合并！！
--->
-
-<template>
-  <div>
-    <el-form-item :label="i18nt('designer.setting.customClass')">
-      <el-select v-model="optionModel.customClass" multiple filterable allow-create
-                 default-first-option>
-        <el-option v-for="(item, idx) in cssClassList" :key="idx" :label="item" :value="item"></el-option>
-      </el-select>
-    </el-form-item>
-    <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.tabs"
-                 v-bind="{group:'panesGroup', ghostClass: 'ghost', handle: '.drag-option'}" class="draggable-box">
-        <li v-for="(tpItem, tpIdx) in selectedWidget.tabs" :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} from "../../../../../../components/xform/utils/util";
-
-  export default {
-    name: "tab-customClass-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(curTabs) {
-        this.designer.addTabPaneOfTabs(curTabs)
-        this.designer.emitHistoryChange()
-      },
-
-      deleteTabPane(curTabs, tpIdx) {
-        if (curTabs.tabs.length === 1) {
-          this.$message.info(this.i18nt('designer.hint.lastPaneCannotBeDeleted'))
-          return
-        }
-
-        this.designer.deleteTabPaneOfTabs(curTabs, tpIdx)
-        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>
+<!--
+  因tabs属性并不包含于options属性之中，故只能跟其他options属性之内的属性值合并设置，此处选择与customClass合并！！
+-->
+
+<template>
+  <div>
+    <el-form-item class="form-item-label-top" :label="i18nt('designer.setting.customClass')">
+      <el-select v-model="optionModel.customClass" multiple filterable allow-create
+                 default-first-option>
+        <el-option v-for="(item, idx) in cssClassList" :key="idx" :label="item" :value="item"></el-option>
+      </el-select>
+    </el-form-item>
+    <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.tabs"
+                 v-bind="{group:'panesGroup', ghostClass: 'ghost', handle: '.drag-option'}" class="draggable-box">
+        <li v-for="(tpItem, tpIdx) in selectedWidget.tabs" :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} from "../../../../../../components/xform/utils/util";
+
+  export default {
+    name: "tab-customClass-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(curTabs) {
+        this.designer.addTabPaneOfTabs(curTabs)
+        this.designer.emitHistoryChange()
+      },
+
+      deleteTabPane(curTabs, tpIdx) {
+        if (curTabs.tabs.length === 1) {
+          this.$message.info(this.i18nt('designer.hint.lastPaneCannotBeDeleted'))
+          return
+        }
+
+        this.designer.deleteTabPaneOfTabs(curTabs, tpIdx)
+        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>

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

@@ -1,45 +1,45 @@
-<template>
-  <el-form-item :label="i18nt('designer.setting.tabClass')">
-    <el-select v-model="optionModel.tabClass">
-      <el-option v-for="(item, idx) in classList" :key="idx" :label="item.name" :value="item.value"></el-option>
-    </el-select>
-  </el-form-item>
-</template>
-
-<script>
-  import i18n from "../../../../../../components/xform/utils/i18n";
-  // import {deepClone} from "../../../../../../components/xform/utils/util";
-
-  export default {
-    name: "tabClass-editor",
-    componentName: 'PropertyEditor',
-    mixins: [i18n],
-    props: {
-      designer: Object,
-      selectedWidget: Object,
-      optionModel: Object,
-    },
-    data() {
-      return {
-        classList:[{
-          name:'样式一',
-          value:'tab-boxCard tabCard-sty1'
-        },{
-          name:'样式二',
-          value:'tab-box'
-        }],
-      }
-    },
-    created() {
-     /* this.cssClassList = deepClone(this.designer.getCssClassList())
-      //监听表单css代码改动事件并重新加载！
-      this.designer.handleEvent('form-css-updated', (cssClassList) => {
-        this.cssClassList = cssClassList
-      }) */
-    }
-  }
-</script>
-
-<style scoped>
-
-</style>
+<template>
+  <el-form-item class="form-item-label-top" :label="i18nt('designer.setting.tabClass')">
+    <el-select v-model="optionModel.tabClass">
+      <el-option v-for="(item, idx) in classList" :key="idx" :label="item.name" :value="item.value"></el-option>
+    </el-select>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "../../../../../../components/xform/utils/i18n";
+  // import {deepClone} from "../../../../../../components/xform/utils/util";
+
+  export default {
+    name: "tabClass-editor",
+    componentName: 'PropertyEditor',
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        classList:[{
+          name:'样式一',
+          value:'tab-boxCard tabCard-sty1'
+        },{
+          name:'样式二',
+          value:'tab-box'
+        }],
+      }
+    },
+    created() {
+     /* this.cssClassList = deepClone(this.designer.getCssClassList())
+      //监听表单css代码改动事件并重新加载！
+      this.designer.handleEvent('form-css-updated', (cssClassList) => {
+        this.cssClassList = cssClassList
+      }) */
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>