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

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

@@ -6,18 +6,19 @@
     <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-table/table-dynamicField-editor.vue

@@ -33,7 +33,7 @@
         </el-tooltip>
       </div>
       <div class="data-table-editor-subsection">
-        <el-form-item label="字段脚本">
+        <el-form-item label="字段脚本" class="el-form-item-second">
           <a
             href="javascript:void(0);"
             class="a-link link-oneLind"
@@ -60,14 +60,14 @@
         </el-tooltip>
       </div>
       <div class="data-table-editor-subsection">
-        <el-form-item class="form-item-label-top" label="脚本编码">
+        <el-form-item class="form-item-label-top el-form-item-second" label="脚本编码" >
           <el-input
             v-model="optionModel.dynamicSchemaScriptCode"
             clearable
             placeholder="scriptCode 或 formCode/scriptCode"
           ></el-input>
         </el-form-item>
-        <el-form-item>
+        <el-form-item  class="el-form-item-second">
           <span slot="label">
             额外参数
             <el-tooltip effect="light" placement="top">
@@ -88,7 +88,7 @@
             <i class="el-icon-edit"></i>
           </a>
         </el-form-item>
-        <el-form-item>
+        <el-form-item  class="el-form-item-second">
           <span slot="label">
             转换脚本
             <el-tooltip effect="light" placement="top">
@@ -115,7 +115,7 @@
       class="dynamic-column-block"
     >
       <div class="data-table-editor-subsection">
-        <el-form-item>
+        <el-form-item  class="el-form-item-second">
           <span slot="label">
             加载条件
             <el-tooltip effect="light" placement="top">
@@ -139,7 +139,7 @@
         </el-form-item>
       </div>
     </div>
-    <el-form-item class="form-item-label-top" v-if="optionModel.dynamicSchemaSourceType !== 'none'">
+    <el-form-item class="form-item-label-top  el-form-item-second" v-if="optionModel.dynamicSchemaSourceType !== 'none'">
       <span slot="label">
         生成模式
         <el-tooltip effect="light" placement="top">
@@ -212,7 +212,8 @@
           optionModel.dynamicSchemaMode !== 'anchor' ||
           !optionModel.dynamicSchemaInheritLayout
         "
-        label="每行列数"
+        label="每行列数"
+        class="el-form-item-second"
       >
         <el-input-number
           v-model="optionModel.dynamicSchemaColumns"
@@ -307,18 +308,15 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.data-table-editor-subsection {
-  margin: 0 0 4px 8px;
-  padding-left: 12px;
-  border-left: 2px solid #ebeef5;
-}
-
 .form-section-label {
-  font-size: 13px;
-  font-weight: 500;
-  color: #303133;
-  line-height: 22px;
-  margin-bottom: 8px;
+  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;
 }
 
 .label-tip-icon {

package/src/components/xform/form-designer/setting-panel/property-editor/event-handler/afterColumnsCreated-editor.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="afterColumnsCreated" label-width="150px">
+    <a href="javascript:void(0);" class="a-link link-oneLind" @click="editEventHandler('afterColumnsCreated', eventParams)">
+      <span>{{ optionModel.afterColumnsCreated }}</span>
+      <i class="el-icon-edit"></i>
+    </a>
+  </el-form-item>
+</template>
+
+<script>
+import i18n from "../../../../../../components/xform/utils/i18n";
+import eventMixin from "../../../../../../components/xform/form-designer/setting-panel/property-editor/event-handler/eventMixin";
+
+export default {
+  name: "afterColumnsCreated-editor",
+  mixins: [i18n, eventMixin],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+  data() {
+    return {
+      eventParams: ["columns", "$grid"],
+    };
+  },
+};
+</script>
+
+<style scoped></style>

package/src/components/xform/form-designer/setting-panel/property-editor/field-button/search-dialog-event-editor.vue

@@ -1,237 +1,237 @@
-<template>
-  <div>
-    <el-form-item label-width="0">
-      <el-divider class="custom-divider">选择弹框配置</el-divider>
-    </el-form-item>
-    <!-- 搜索类控件的多选是结构性的（决定字段值是数组还是标量），由控件自身的「是否多选」决定，
-         这里只做展示，避免两个开关各说各话 -->
-    <el-form-item label="是否多选">
-      <el-switch v-model="eventConfig.multipleChoices" v-if="!vabsearchFlag"></el-switch>
-      <template v-else>
-        <span>{{ optionModel.multipleChoices ? '是' : '否' }}</span>
-        <span class="tips">由控件自身的「是否多选」决定</span>
-      </template>
-    </el-form-item>
-    <el-form-item class="form-item-label-top" label="弹框表单编码">
-      <el-input type="text" v-model="eventConfig.formCode"></el-input>
-    </el-form-item>
-    <el-form-item label="弹框查询参数">
-      <a href="javascript:void(0);" class="a-link link-oneLind"
-         @click="editEventHandler('confirmCallback', ['dataId', 'formCode','rows'], option2)">
-        <span>{{ eventConfig.dialogQueryParam }}</span>
-        <i class="el-icon-edit"></i>
-      </a>
-      <span class="tips">按业务字段过滤写
-        <code>return {'{'} condition: {'{'} status: 1 {'}'} {'}'}</code>（追加进查询区条件，同字段以脚本为准）</span>
-    </el-form-item>
-    <el-form-item label="弹框自定义参数">
-      <a href="javascript:void(0);" class="a-link link-oneLind"
-         @click="editEventHandler('dialogCustomParam', ['dataId', 'formCode','rows'], option3)">
-        <span>{{ eventConfig.dialogCustomParam }}</span>
-        <i class="el-icon-edit"></i>
-      </a>
-    </el-form-item>
-    <template v-if="hasConfig('vabsearchFlag')">
-      <el-form-item class="form-item-label-top" label="关联来源字段">
-        <el-input type="text" v-model="eventConfig.valueSourceField"></el-input>
-      </el-form-item>
-
-      <el-form-item class="form-item-label-top" label="展示来源字段">
-        <el-input type="text" v-model="eventConfig.labelSourceField"></el-input>
-      </el-form-item>
-    </template>
-    <!--      <el-form-item label="多选">
-          <el-switch v-model="optionModel.multiple"></el-switch>
-        </el-form-item>-->
-    <template v-if="!hasConfig('vabsearchFlag')">
-      <el-form-item label="关联表格">
-        <el-switch v-model="eventConfig.tableEnabled"></el-switch>
-      </el-form-item>
-      <template v-if="eventConfig.tableEnabled">
-        <el-form-item class="form-item-label-top" label="关联表格ID">
-          <el-input type="text" v-model="eventConfig.tableRef"></el-input>
-        </el-form-item>
-        <el-form-item class="form-item-label-top" label="关联表格唯一字段">
-          <el-input type="text" v-model="eventConfig.tableUniqueKey"></el-input>
-        </el-form-item>
-      </template>
-    </template>
-    <el-form-item label="数据回填">
-      <el-button type="primary" plain="" round="" @click="openDialog">{{
-          i18nt('designer.setting.editAction')
-        }}
-      </el-button>
-    </el-form-item>
-    <el-form-item label="确认回调">
-      <a href="javascript:void(0);" class="a-link link-oneLind"
-         @click="editEventHandler('confirmCallback', ['dataId', 'formCode','rows'], option1)">
-        <span>{{ eventConfig.confirmCallback }}</span>
-        <i class="el-icon-edit"></i>
-      </a>
-    </el-form-item>
-
-    <el-dialog
-      custom-class="dialog-style list-dialog"
-      title="数据回填"
-      :visible.sync="showDialog"
-      :modal="false"
-      :show-close="!0"
-      :close-on-click-modal="!1"
-      :close-on-press-escape="!1"
-      :destroy-on-close="!0"
-      top="5vh"
-      width="600px"
-      v-dialog-drag
-    >
-      <div class="cont">
-        <el-table
-          ref="singleTable"
-          width="100%"
-          height="500"
-          :data="tableData"
-          border=""
-          stripe=""
-          default-expand-all
-        >
-          <el-table-column label="目标字段" width="150" prop="targetField">
-            <template slot-scope="scope">
-              <el-input v-model="scope.row.targetField"></el-input>
-            </template>
-          </el-table-column>
-          <el-table-column label="目标数据属性名称" width="150" prop="targetField">
-            <template slot-scope="scope">
-              <el-input v-model="scope.row.targetFormField"></el-input>
-            </template>
-          </el-table-column>
-          <el-table-column label="来源字段" width="150" prop="sourceField">
-            <template slot-scope="scope">
-              <el-input v-model="scope.row.sourceField"></el-input>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" min-width="50" fixed="right">
-            <template #header="{ row, $index }">
-              <el-tooltip
-                :hide-after="500"
-                class="item"
-                effect="dark"
-                content="添加"
-                placement="top"
-              >
-                <el-button
-                  size="mini" type="" circle=""
-                  icon="el-icon-plus"
-                  @click="tableData.push({})"
-                />
-              </el-tooltip>
-            </template>
-            <template #default="{ row, $index }">
-              <el-tooltip
-                effect="dark"
-                content="删除"
-                placement="top"
-              >
-                <el-button
-                  size="mini" type="" circle=""
-                  icon="el-icon-delete"
-                  @click="tableData.splice($index,1)"
-                />
-              </el-tooltip>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <div class="dialog-footer" slot="footer">
-        <span class="fl tips">注：'目标字段'与'目标数据属性名称'只需要维护一个即可。</span>
-        <el-button @click="showDialog=false" class="button-sty" icon="el-icon-close">
-          {{ i18nt('designer.hint.cancel') }}
-        </el-button>
-        <el-button type="primary" @click="confirmDialog" class="button-sty" icon="el-icon-check">
-          {{ i18nt('designer.hint.confirm') }}
-        </el-button>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import i18n from "../../../../../../components/xform/utils/i18n"
-import eventMixin
-  from "../../../../../../components/xform/form-designer/setting-panel/property-editor/event-handler/eventMixin"
-import propertyMixin from "../../../../../../components/xform/form-designer/setting-panel/property-editor/propertyMixin"
-
-export default {
-  mixins: [i18n, eventMixin, propertyMixin],
-  props: {
-    designer: Object,
-    selectedWidget: Object,
-    optionModel: Object,
-  },
-  data() {
-    return {
-      showDialog: false,
-      tableData: [],
-      option1: {
-        customCode: () => {
-          return this.eventConfig.confirmCallback;
-        },
-        callback: (code) => {
-          this.eventConfig.confirmCallback = code;
-          this.$forceUpdate()
-        }
-      },
-      option2: {
-        customCode: () => {
-          return this.eventConfig.dialogQueryParam;
-        },
-        callback: (code) => {
-          this.eventConfig.dialogQueryParam = code;
-          this.$forceUpdate()
-        }
-      },
-      option3: {
-        customCode: () => {
-          return this.eventConfig.dialogCustomParam;
-        },
-        callback: (code) => {
-          this.eventConfig.dialogCustomParam = code;
-          this.$forceUpdate()
-        }
-      },
-    }
-  },
-  computed: {
-    eventConfig() {
-      return this.optionModel.searchDialogConfig || {};
-    },
-    vabsearchFlag() {
-      let type = this.selectedWidget.type;
-      return (
-        type === "vabsearch"
-        || type === "singerSearch"
-        || type === "multiSearch"
-      );
-    }
-  },
-  created() {
-
-  },
-  methods: {
-    openDialog() {
-      this.tableData = this.$baseLodash.cloneDeep(this.eventConfig.tableData);
-      this.showDialog = true;
-    },
-    confirmDialog() {
-      this.eventConfig.tableData = this.$baseLodash.cloneDeep(this.tableData);
-      this.showDialog = false;
-    }
-  }
-}
-</script>
-
-<style scoped>
-.tips {
-  margin-left: 8px;
-  color: #909399;
-  font-size: 12px;
-}
-</style>
+<template>
+  <div>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider">选择弹框配置</el-divider>
+    </el-form-item>
+    <!-- 搜索类控件的多选是结构性的（决定字段值是数组还是标量），由控件自身的「是否多选」决定，
+         这里只做展示，避免两个开关各说各话 -->
+    <el-form-item label="是否多选">
+      <el-switch v-model="eventConfig.multipleChoices" v-if="!vabsearchFlag"></el-switch>
+      <template v-else>
+        <span>{{ optionModel.multipleChoices ? '是' : '否' }}</span>
+        <span class="tips">由控件自身的「是否多选」决定</span>
+      </template>
+    </el-form-item>
+    <el-form-item class="form-item-label-top" label="弹框表单编码">
+      <el-input type="text" v-model="eventConfig.formCode"></el-input>
+    </el-form-item>
+    <el-form-item label="弹框查询参数">
+      <a href="javascript:void(0);" class="a-link link-oneLind"
+         @click="editEventHandler('confirmCallback', ['dataId', 'formCode','rows'], option2)">
+        <span>{{ eventConfig.dialogQueryParam }}</span>
+        <i class="el-icon-edit"></i>
+      </a>
+      <span class="tips">按业务字段过滤写
+        <code>return {'{'} condition: {'{'} status: 1 {'}'} {'}'}</code>（追加进查询区条件，同字段以脚本为准）</span>
+    </el-form-item>
+    <el-form-item label="弹框自定义参数">
+      <a href="javascript:void(0);" class="a-link link-oneLind"
+         @click="editEventHandler('dialogCustomParam', ['dataId', 'formCode','rows'], option3)">
+        <span>{{ eventConfig.dialogCustomParam }}</span>
+        <i class="el-icon-edit"></i>
+      </a>
+    </el-form-item>
+    <template v-if="hasConfig('vabsearchFlag')">
+      <el-form-item class="form-item-label-top" label="关联来源字段">
+        <el-input type="text" v-model="eventConfig.valueSourceField"></el-input>
+      </el-form-item>
+
+      <el-form-item class="form-item-label-top" label="展示来源字段">
+        <el-input type="text" v-model="eventConfig.labelSourceField"></el-input>
+      </el-form-item>
+    </template>
+    <!--      <el-form-item label="多选">
+          <el-switch v-model="optionModel.multiple"></el-switch>
+        </el-form-item>-->
+    <template v-if="!hasConfig('vabsearchFlag')">
+      <el-form-item label="关联表格">
+        <el-switch v-model="eventConfig.tableEnabled"></el-switch>
+      </el-form-item>
+      <template v-if="eventConfig.tableEnabled">
+        <el-form-item class="form-item-label-top el-form-item-second" label="关联表格ID">
+          <el-input type="text" v-model="eventConfig.tableRef"></el-input>
+        </el-form-item>
+        <el-form-item class="form-item-label-top el-form-item-second" label="关联表格唯一字段">
+          <el-input type="text" v-model="eventConfig.tableUniqueKey"></el-input>
+        </el-form-item>
+      </template>
+    </template>
+    <el-form-item label="数据回填">
+      <el-button type="primary" plain="" round="" @click="openDialog">{{
+          i18nt('designer.setting.editAction')
+        }}
+      </el-button>
+    </el-form-item>
+    <el-form-item label="确认回调">
+      <a href="javascript:void(0);" class="a-link link-oneLind"
+         @click="editEventHandler('confirmCallback', ['dataId', 'formCode','rows'], option1)">
+        <span>{{ eventConfig.confirmCallback }}</span>
+        <i class="el-icon-edit"></i>
+      </a>
+    </el-form-item>
+
+    <el-dialog
+      custom-class="dialog-style list-dialog"
+      title="数据回填"
+      :visible.sync="showDialog"
+      :modal="false"
+      :show-close="!0"
+      :close-on-click-modal="!1"
+      :close-on-press-escape="!1"
+      :destroy-on-close="!0"
+      top="5vh"
+      width="600px"
+      v-dialog-drag
+    >
+      <div class="cont">
+        <el-table
+          ref="singleTable"
+          width="100%"
+          height="500"
+          :data="tableData"
+          border=""
+          stripe=""
+          default-expand-all
+        >
+          <el-table-column label="目标字段" width="150" prop="targetField">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.targetField"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column label="目标数据属性名称" width="150" prop="targetField">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.targetFormField"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column label="来源字段" width="150" prop="sourceField">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.sourceField"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" min-width="50" fixed="right">
+            <template #header="{ row, $index }">
+              <el-tooltip
+                :hide-after="500"
+                class="item"
+                effect="dark"
+                content="添加"
+                placement="top"
+              >
+                <el-button
+                  size="mini" type="" circle=""
+                  icon="el-icon-plus"
+                  @click="tableData.push({})"
+                />
+              </el-tooltip>
+            </template>
+            <template #default="{ row, $index }">
+              <el-tooltip
+                effect="dark"
+                content="删除"
+                placement="top"
+              >
+                <el-button
+                  size="mini" type="" circle=""
+                  icon="el-icon-delete"
+                  @click="tableData.splice($index,1)"
+                />
+              </el-tooltip>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="dialog-footer" slot="footer">
+        <span class="fl tips">注：'目标字段'与'目标数据属性名称'只需要维护一个即可。</span>
+        <el-button @click="showDialog=false" class="button-sty" icon="el-icon-close">
+          {{ i18nt('designer.hint.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="confirmDialog" class="button-sty" icon="el-icon-check">
+          {{ i18nt('designer.hint.confirm') }}
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import i18n from "../../../../../../components/xform/utils/i18n"
+import eventMixin
+  from "../../../../../../components/xform/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+import propertyMixin from "../../../../../../components/xform/form-designer/setting-panel/property-editor/propertyMixin"
+
+export default {
+  mixins: [i18n, eventMixin, propertyMixin],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+  data() {
+    return {
+      showDialog: false,
+      tableData: [],
+      option1: {
+        customCode: () => {
+          return this.eventConfig.confirmCallback;
+        },
+        callback: (code) => {
+          this.eventConfig.confirmCallback = code;
+          this.$forceUpdate()
+        }
+      },
+      option2: {
+        customCode: () => {
+          return this.eventConfig.dialogQueryParam;
+        },
+        callback: (code) => {
+          this.eventConfig.dialogQueryParam = code;
+          this.$forceUpdate()
+        }
+      },
+      option3: {
+        customCode: () => {
+          return this.eventConfig.dialogCustomParam;
+        },
+        callback: (code) => {
+          this.eventConfig.dialogCustomParam = code;
+          this.$forceUpdate()
+        }
+      },
+    }
+  },
+  computed: {
+    eventConfig() {
+      return this.optionModel.searchDialogConfig || {};
+    },
+    vabsearchFlag() {
+      let type = this.selectedWidget.type;
+      return (
+        type === "vabsearch"
+        || type === "singerSearch"
+        || type === "multiSearch"
+      );
+    }
+  },
+  created() {
+
+  },
+  methods: {
+    openDialog() {
+      this.tableData = this.$baseLodash.cloneDeep(this.eventConfig.tableData);
+      this.showDialog = true;
+    },
+    confirmDialog() {
+      this.eventConfig.tableData = this.$baseLodash.cloneDeep(this.tableData);
+      this.showDialog = false;
+    }
+  }
+}
+</script>
+
+<style scoped>
+.tips {
+  margin-left: 8px;
+  color: #909399;
+  font-size: 12px;
+}
+</style>

package/src/components/xform/form-designer/setting-panel/property-editor/field-common/keyName-editor.vue

@@ -1,16 +1,16 @@
 <template>
   <div>
-    <el-form-item class="form-item-label-top" prop="keyName" v-if="optionModel.keyNameEnabled">
+    <el-form-item class="form-item-label-top el-form-item-second" prop="keyName" v-if="optionModel.keyNameEnabled">
       <span slot="label">数据属性名称
         <el-tooltip effect="light" content="数据属性名称是指form-data对象中字段组件所对应的属性名称">
           <i class="el-icon-info"></i></el-tooltip>
       </span>
       <el-input type="text" v-model="optionModel.keyName" :disabled="prefixMode"></el-input>
     </el-form-item>
-    <el-form-item prop="keyName" label="属性名称前缀" v-if="optionModel.keyNameEnabled && prefixMode">
-      <span>{{ keyNamePrefixMap[selectedWidget.type] }}</span>
+    <el-form-item prop="keyName" label="属性名称前缀" v-if="optionModel.keyNameEnabled && prefixMode" class="el-form-item-second">
+      <span class="form-item-txt">{{ keyNamePrefixMap[selectedWidget.type] }}</span>
     </el-form-item>
-    <el-form-item prop="keyName" label="属性名称后缀" v-if="optionModel.keyNameEnabled && prefixMode" class="form-item-label-top">
+    <el-form-item prop="keyName" label="属性名称后缀" v-if="optionModel.keyNameEnabled && prefixMode" class="form-item-label-top el-form-item-second">
       <el-input
         class="search-input"
         max="200"