cloud-web-corejs 1.0.54-dev.674 → 1.0.54-dev.676

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "cloud-web-corejs",
   "private": false,
-  "version": "1.0.54-dev.674",
+  "version": "1.0.54-dev.676",
   "scripts": {
     "dev": "vue-cli-service serve",
     "lint": "eslint --ext .js,.vue src",

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,128 @@
         <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">
+    <div class="dynamic-column-hint">
+      动态列来源<strong>二选一</strong>：前端列脚本（同步算列）或接口动态列（后端拉取）。同时配置时<strong>列脚本优先</strong>。
+    </div>
+    <div class="dynamic-column-block">
+      <div class="form-section-label">前端列脚本</div>
+      <div class="form-section-desc">不调接口，脚本直接 return 列配置</div>
+      <div class="data-table-editor-subsection">
+        <el-form-item label="列脚本">
+          <a
+            href="javascript:void(0);"
+            class="a-link link-oneLind"
+            @click="
+              editEventHandler('dynamicColumnsScript', defaultEventParams)
+            "
+          >
+            <span>{{ optionModel.dynamicColumnsScript }}</span>
+            <i class="el-icon-edit"></i>
+          </a>
+        </el-form-item>
+      </div>
+    </div>
+    <div class="dynamic-column-block">
+      <div class="form-section-label">接口动态列</div>
+      <div class="form-section-desc">打开表单时请求后端脚本，返回列配置</div>
+      <div class="data-table-editor-subsection">
+        <el-form-item label="启用">
+          <el-switch
+            v-model="optionModel.dynamicColumnScriptEnabled"
+          ></el-switch>
+        </el-form-item>
+        <template v-if="optionModel.dynamicColumnScriptEnabled">
+          <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>
+            <span slot="label">
+              响应转换
+              <el-tooltip effect="light" placement="top">
+                <div slot="content" style="line-height: 1.4; max-width: 320px">
+                  将接口返回的
+                  <code>res</code> 转为列数组；不配置则按平台默认结构解析。
+                </div>
+                <i class="el-icon-info"></i>
+              </el-tooltip>
+            </span>
+            <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">
+                <div slot="content" style="line-height: 1.4; max-width: 320px">
+                  启用后打开表单时<strong>默认</strong>自动请求动态列。<br />
+                  同步：仅写 <code>return false</code> /
+                  <code>return null</code> 跳过。<br />
+                  异步：先写异步逻辑，末尾
+                  <code>return false</code>；条件满足时调用
+                  <code>done()</code>（无参）。
+                </div>
+                <i class="el-icon-info"></i>
+              </el-tooltip>
+            </span>
+            <a
+              href="javascript:void(0);"
+              class="a-link link-oneLind"
+              @click="editEventHandler('dynamicColumnAutoLoadScript', ['done'])"
+            >
+              <span>{{ optionModel.dynamicColumnAutoLoadScript }}</span>
+              <i class="el-icon-edit"></i>
+            </a>
+          </el-form-item>
+        </template>
+      </div>
+    </div>
+    <el-form-item label="动态列模式">
+      <span slot="label">
+        动态列模式
+        <el-tooltip effect="light" placement="top">
+          <div slot="content" style="line-height: 1.4; max-width: 320px">
+            对<strong>生效的动态列</strong>与静态列的合并方式：<br />
+            追加 — 静态列 + 动态列；替换 — 仅动态列。
+          </div>
+          <i class="el-icon-info"></i>
+        </el-tooltip>
+      </span>
+      <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="自定义表格配置">
       <a
         href="javascript:void(0);"
         class="a-link link-oneLind"
@@ -153,7 +272,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 +282,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"
@@ -553,6 +672,7 @@ export default {
       },
       defaultCheckedKeys: [],
       tableConfigParams: ["dataId", "formCode"],
+      defaultEventParams: ["dataId", "formCode"],
       showExportItemColumnsDialog: false,
     };
   },
@@ -931,3 +1051,43 @@ 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: 13px;
+  font-weight: 500;
+  color: #303133;
+  line-height: 22px;
+}
+
+.form-section-desc {
+  font-size: 12px;
+  color: #909399;
+  line-height: 18px;
+  margin: 2px 0 8px 8px;
+}
+
+.dynamic-column-hint {
+  font-size: 12px;
+  color: #606266;
+  line-height: 1.5;
+  margin: 0 0 12px;
+  padding: 8px 10px;
+  background: #f4f4f5;
+  border-radius: 4px;
+}
+
+.dynamic-column-block {
+  margin-bottom: 12px;
+}
+
+.dynamic-column-block .data-table-editor-subsection {
+  margin-top: 0;
+}
+</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>
@@ -962,6 +972,7 @@ export default {
 
       eventParamsMap: {
         footerMethodConfg: "footerMethodConfg(dataId,formCode,param) {",
+        columnShow: "columnShow(dataId,formCode,columnConfig) {",
       },
 
       showColumnRenderDialog: false,
@@ -1321,6 +1332,7 @@ export default {
         rowEditAuthName: this.createRowAuthName("Edit"),
         rowAddShow: null,
         rowEditShow: null,
+        columnShow: null,
         utcTransformEnabled: false,
         labelIconClass: null,
         labelIconPosition: "rear",
@@ -1845,6 +1857,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/widget-panel/widgetsConfig.js

@@ -234,6 +234,13 @@ export const containers = [
       onCellDblclick: "",
       onSearchTable: "",
       onResetTable: "",
+      dynamicColumnsScript: null,
+      dynamicColumnMode: "append",
+      dynamicColumnScriptEnabled: false,
+      dynamicColumnScriptCode: null,
+      dynamicColumnScriptParam: null,
+      onDynamicColumnsConvert: null,
+      dynamicColumnAutoLoadScript: null,
       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>