cloud-web-corejs 1.0.54-dev.673 → 1.0.54-dev.675

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

@@ -22,6 +22,9 @@
     <el-form-item :label="i18nt('合并行唯一字段')">
       <el-input v-model="optionModel.mergeRowKey"></el-input>
     </el-form-item>
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">查询与分页</el-divider>
+    </el-form-item>
     <el-form-item label="查询列表">
       <el-switch v-model="optionModel.isQueryTable"></el-switch>
     </el-form-item>
@@ -50,8 +53,8 @@
         :max="10000"
       />
     </el-form-item>
-    <el-form-item :label="i18nt('可选择每页查询数')"></el-form-item>
     <el-form-item label-width="0">
+      <div class="form-section-label">{{ i18nt("可选择每页查询数") }}</div>
       <template v-if="optionModel.gridPageSizeList">
         <draggable
           tag="ul"
@@ -117,12 +120,72 @@
         <el-option v-for="e in widgetSizes" :key="e.value" :value="e.value" :label="e.label"></el-option>
       </el-select>
     </el-form-item> -->
+    <el-form-item label-width="0">
+      <el-divider class="custom-divider-margin-top">列与动态列</el-divider>
+    </el-form-item>
     <el-form-item :label="i18nt('designer.setting.tableColEdit')">
       <el-button type="primary" plain="" round="" @click="openSetting"
         >{{ i18nt("designer.setting.editAction") }}
       </el-button>
     </el-form-item>
-    <el-form-item label="自定义表格配置" label-width="150px">
+    <el-form-item label="动态列模式">
+      <el-select v-model="optionModel.dynamicColumnMode" style="width: 100%">
+        <el-option label="追加到静态列" value="append"></el-option>
+        <el-option label="替换静态列" value="replace"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="启用接口动态列">
+      <el-switch
+        v-model="optionModel.dynamicColumnScriptEnabled"
+        @change="handleDynamicColumnScriptEnabledChange"
+      ></el-switch>
+    </el-form-item>
+    <div
+      v-if="optionModel.dynamicColumnScriptEnabled"
+      class="data-table-editor-subsection"
+    >
+      <el-form-item label="脚本编码">
+        <el-input
+          v-model="optionModel.dynamicColumnScriptCode"
+          clearable
+          placeholder="如 getDynamicColumns"
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="请求参数">
+        <a
+          href="javascript:void(0);"
+          class="a-link link-oneLind"
+          @click="editEventHandler('dynamicColumnScriptParam', tableConfigParams)"
+        >
+          <span>{{ optionModel.dynamicColumnScriptParam }}</span>
+          <i class="el-icon-edit"></i>
+        </a>
+      </el-form-item>
+      <el-form-item label="转换脚本">
+        <a
+          href="javascript:void(0);"
+          class="a-link link-oneLind"
+          @click="editEventHandler('onDynamicColumnsConvert', ['res'])"
+        >
+          <span>{{ optionModel.onDynamicColumnsConvert }}</span>
+          <i class="el-icon-edit"></i>
+        </a>
+      </el-form-item>
+      <el-form-item>
+        <span slot="label">
+          加载后自动请求
+          <el-tooltip
+            effect="light"
+            placement="top"
+            content="默认开启。打开表单时先请求动态列，再一次性渲染完整表格。"
+          >
+            <i class="el-icon-info"></i>
+          </el-tooltip>
+        </span>
+        <el-switch v-model="optionModel.dynamicColumnAutoLoad"></el-switch>
+      </el-form-item>
+    </div>
+    <el-form-item label="自定义表格配置">
       <a
         href="javascript:void(0);"
         class="a-link link-oneLind"
@@ -153,7 +216,7 @@
     <el-form-item :label="i18nt('明细导出脚本编码')">
       <el-input v-model="optionModel.exportItemScriptCode"></el-input>
     </el-form-item>
-    <el-form-item label="自定义明细导出参数" label-width="150px">
+    <el-form-item label="自定义明细导出参数">
       <a
         href="javascript:void(0);"
         class="a-link link-oneLind"
@@ -163,7 +226,7 @@
         <i class="el-icon-edit"></i>
       </a>
     </el-form-item>
-    <el-form-item label="明细导出列维护" label-width="150px">
+    <el-form-item label="明细导出列维护">
       <a
         href="javascript:void(0);"
         class="a-link link-oneLind"
@@ -605,6 +668,11 @@ export default {
     }
   },
   methods: {
+    handleDynamicColumnScriptEnabledChange(enabled) {
+      if (enabled) {
+        this.$set(this.optionModel, "dynamicColumnAutoLoad", true);
+      }
+    },
     dragSort: function () {
       var e = this.$refs.singleTable.$el.querySelectorAll(
           ".el-table__body-wrapper > table > tbody"
@@ -931,3 +999,18 @@ export default {
   content: "\e61d";
 }
 </style>
+
+<style scoped>
+.data-table-editor-subsection {
+  margin: 0 0 4px 8px;
+  padding-left: 12px;
+  border-left: 2px solid #ebeef5;
+}
+
+.form-section-label {
+  font-size: 12px;
+  color: #606266;
+  line-height: 22px;
+  margin-bottom: 8px;
+}
+</style>

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

@@ -534,6 +534,16 @@
           <el-form-item :label="i18nt('designer.setting.visibleColumn')">
             <el-switch v-model="rowData.show"></el-switch>
           </el-form-item>
+          <el-form-item label="动态显示脚本">
+            <a
+              href="javascript:void(0);"
+              class="a-link link-oneLind"
+              @click="openColumnShowDialog(rowData)"
+            >
+              <span>{{ rowData.columnShow }}</span>
+              <i class="el-icon-edit"></i>
+            </a>
+          </el-form-item>
           <el-form-item :label="i18nt('designer.setting.sortableColumn')">
             <el-switch v-model="rowData.sortable"></el-switch>
           </el-form-item>
@@ -1321,6 +1331,7 @@ export default {
         rowEditAuthName: this.createRowAuthName("Edit"),
         rowAddShow: null,
         rowEditShow: null,
+        columnShow: null,
         utcTransformEnabled: false,
         labelIconClass: null,
         labelIconPosition: "rear",
@@ -1845,6 +1856,9 @@ export default {
     confirmEditFormatConfigDialog(columnSelectedWidget, row) {
       row.editWidget = columnSelectedWidget;
     },
+    openColumnShowDialog(row) {
+      this.editFormEventHandler(row, this.rowDataIndex, "columnShow");
+    },
     openTableColumnConfigDialog(row, index) {
       this.operateIndex = index;
       this.currentTableColumn = row;

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

@@ -0,0 +1,44 @@
+<template>
+  <el-form-item label-width="150px">
+    <span slot="label">
+      onDynamicColumns
+      <el-tooltip effect="light" placement="top">
+        <div slot="content" style="line-height: 1.4; max-width: 320px">
+          同步脚本：直接 return 列配置（字段同设计器列：prop、label、formatS、editFormatS 等）。<br />
+          接口动态列请使用「接口动态列」配置或 loadDynamicColumnsFromApi。
+        </div>
+        <i class="el-icon-info"></i>
+      </el-tooltip>
+    </span>
+    <a
+      href="javascript:void(0);"
+      class="a-link link-oneLind"
+      @click="editEventHandler('onDynamicColumns', eventParams)"
+    >
+      <span>{{ optionModel.onDynamicColumns }}</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: "onDynamicColumns-editor",
+  mixins: [i18n, eventMixin],
+  props: {
+    designer: Object,
+    selectedWidget: Object,
+    optionModel: Object,
+  },
+  data() {
+    return {
+      eventParams: [],
+    };
+  },
+};
+</script>
+
+<style scoped></style>

package/src/components/xform/form-designer/setting-panel/propertyRegister.js

@@ -256,6 +256,7 @@ const EVENT_PROPERTIES = {
   onCheckboxChange: "onCheckboxChange-editor",
   onSearchTable: "onSearchTable-editor",
   onResetTable: "onResetTable-editor",
+  onDynamicColumns: "onDynamicColumns-editor",
 
   //tree事件
   onNodeClick: "onNodeClick-editor",

package/src/components/xform/form-designer/widget-panel/widgetsConfig.js

@@ -234,6 +234,13 @@ export const containers = [
       onCellDblclick: "",
       onSearchTable: "",
       onResetTable: "",
+      onDynamicColumns: "",
+      dynamicColumnMode: "append",
+      dynamicColumnScriptEnabled: false,
+      dynamicColumnScriptCode: null,
+      dynamicColumnScriptParam: null,
+      onDynamicColumnsConvert: null,
+      dynamicColumnAutoLoad: false,
       accessType: "1",
       accessUrl: null,
       accessReturnType: "1",

package/src/components/xform/form-render/container-item/data-table-item.vue

@@ -322,15 +322,6 @@ export default {
     ...FieldComponents,
   },
   mixins: [dataTableMixin],
-  computed: {
-    /*heightStyle() {
-      let tableHeight = this.widget.options.tableHeight;
-      if (tableHeight && (tableHeight == 'auto' || tableHeight.slice(-1) == '%')) {
-        return 'height:100%';
-      }
-      return '';
-    }*/
-  },
 };
 </script>