cloud-web-corejs 1.1.0-dev.6 → 1.1.0-dev.61

package/src/components/xform/form-render/container-item/list-h5-item.vue

@@ -70,22 +70,16 @@
         v-for="(row, rowIndex) in fieldModel"
         :key="rowIndex"
         class="item"
-        @click="onRowClick(row)"
-        :class="[
-          { checked: checkItemIds.includes(row.id) },
-          itemCardClass,
-          getRowCompareClass(row),
-        ]"
+        @click="itemCheck(row)"
+        :class="{ checked: checkItemIds.includes(row.id) }"
       >
-        <!-- 右上角查看角标（对齐 bill_setting 的 .pro-item .t::after）。
-             与 itemStyle 解绑：点整行进详情是明细行的统一行为，
-             这个角标是它的视觉提示，不该藏在选项后面。
-             查询选择场景点行是勾选、不进详情，故不显示。 -->
-        <i class="h5-item-arrow" v-if="!widget.options.isQueryTable"></i>
-        <!-- 明细行不放删除按钮：点击整行进详情即可。
-             要恢复的话，除了放回这个 div，还得给它补流程判断
-             （有流程且当前节点不可编辑时要藏掉），它不是 widget，
-             拿不到 hiddenByWf / widgetShowRule 那两套。 -->
+        <div
+          v-if="!widget.options.isQueryTable"
+          class="del-btn"
+          @click.stop="deleteRow(row, rowIndex)"
+        >
+          <i class="el-icon-delete"></i>
+        </div>
         <template v-if="vxeOption.columns.length > 0">
           <div class="t1" v-if="widget.options.isQueryTable">
             <template
@@ -185,14 +179,6 @@
               <!--              <div class="status">未审核</div>-->
             </template>
           </div>
-          <!-- 明细卡片的主标题，对齐 bill_setting 的 .pro-item .t（render.vue:105）：
-               只出主字段的值、前面一个圆点、右上角是「查看」角标。
-               上面那个 .t1 是查询选择列表专用的（出「标题：值」若干对），两者互斥。
-               主字段就是 isMainFiled 标的那一列（columns() 里取第一个可见列），
-               查询选择模式一直用它当标题行，这里把同一口径用到明细卡片上。 -->
-          <div class="t1 h5-item-title" v-else-if="!!mainTitleColumn">
-            <b>{{ getColumnDisplayText(mainTitleColumn, row, rowIndex) }}</b>
-          </div>
           <div class="t2">
             <template
               v-if="
@@ -200,19 +186,13 @@
               "
             >
               <template v-for="(column, columnIndex) in vxeOption.columns">
-                <!-- 主字段已经当标题了，不再在字段区重复一遍（查询选择模式本来
-                     就是这个口径，这里两种模式统一）。没有主标题时(mainTitleColumn
-                     为空，如只有一列)照常全出。 -->
                 <template
                   v-if="
-                    (!column.isMainFiled || !mainTitleColumn) &&
+                    (!widget.options.isQueryTable || !column.isMainFiled) &&
                     column.showForRow
                   "
                 >
-                  <!-- m2 = 半行（一行两个）。类名沿用 style.scss:14095 早就留好的
-                       `.t2 > dl.m2{width:50%}`（那条规则一直没人往 dl 上打过类）。
-                       由列的「H5列宽」选项控制，见 isHalfColumn。 -->
-                  <dl :key="columnIndex" :class="{ m2: isHalfColumn(column) }">
+                  <dl :key="columnIndex">
                     <div>
                       <dt>{{ column.title }}：</dt>
                       <dd>
@@ -230,11 +210,84 @@
                           }}
                         </template>
 
-                        <!-- 明细行只出纯文本：编辑控件(widget)与操作链接
-                             (editDelete/editButton)都不在行上渲染，点整行进详情，
-                             详情弹框里才是可编辑的控件。 -->
+                        <template
+                          v-else-if="
+                            column.slots && column.slots.default == 'widget'
+                          "
+                        >
+                          <component
+                            :is="getColumnWidgetName(column.params.widget)"
+                            :field="column.params.widget"
+                            :form-model="globalModel.formModel"
+                            :designer="null"
+                            :key="rowIndex + '-' + columnIndex"
+                            :parent-widget="widget"
+                            :columnConfig="column.params.columnConfig"
+                            :subFormRowIndex="rowIndex"
+                            :formItemProp="
+                              getColumnProp(widget, {
+                                column: column,
+                                rowIndex: rowIndex,
+                                row: row,
+                                items: fieldModel,
+                              })
+                            "
+                            :tableParam="{
+                              column: column,
+                              rowIndex: rowIndex,
+                              row: row,
+                              items: fieldModel,
+                            }"
+                          ></component>
+                        </template>
+                        <template
+                          v-else-if="column.params.formatS == 'editDelete'"
+                        >
+                          <a
+                            href="javascript:void(0);"
+                            class="a-link"
+                            @click.stop="deleteRow(row, rowIndex)"
+                          >
+                            <el-tooltip
+                              :enterable="false"
+                              effect="dark"
+                              content="删除"
+                              placement="top"
+                              popper-class="tooltip-skin"
+                            >
+                              <i class="el-icon-delete" />
+                            </el-tooltip>
+                          </a>
+                        </template>
+                        <template
+                          v-else-if="column.params.formatS == 'editButton'"
+                        >
+                          <a
+                            href="javascript:void(0);"
+                            class="a-link"
+                            @click.stop="openEditDialog(row)"
+                          >
+                            <el-tooltip
+                              :enterable="false"
+                              effect="dark"
+                              content="查看"
+                              placement="top"
+                              popper-class="tooltip-skin"
+                            >
+                              <i class="el-icon-edit" />
+                            </el-tooltip>
+                          </a>
+                        </template>
                         <template v-else>
-                          {{ getColumnDisplayText(column, row, rowIndex) }}
+                          {{
+                            column.formatter({
+                              cellValue: row[column.field],
+                              column: column,
+                              rowIndex: rowIndex,
+                              row: row,
+                              items: fieldModel,
+                            })
+                          }}
                         </template>
                       </dd>
                     </div>
@@ -243,9 +296,12 @@
               </template>
             </template>
           </div>
-          <!-- 明细行不摆操作按钮区：点整行进详情。查询选择场景(isQueryTable)
-               仍保留行按钮，那边点行是勾选、按钮另有用途。 -->
-          <div class="btns" v-if="widget.options.isQueryTable">
+          <div class="btns">
+            <!-- <div class="checkbox_fl">
+              <el-checkbox></el-checkbox>
+            </div> -->
+            <!--            <a class="btn"><i class="el-icon-delete"/><span>删除</span></a>
+                        <a class="btn"><i class="el-icon-edit"/><span>查看</span></a>-->
             <template
               v-if="!!widget.lineButtons && widget.lineButtons.length > 0"
             >
@@ -605,9 +661,63 @@
                   </template>
                 </template>
               </div>
-              <!-- 明细详情弹框里不摆行操作按钮区：行按钮(lineButtons)属于列表行的
-                   操作，详情里用不上；容器本身带 border-top 和 padding，即使按钮被
-                   wf 联动隐藏了也会留下一条空白横条。关闭走右上角的 X。 -->
+              <div class="btns">
+                <template
+                  v-if="!!widget.lineButtons && widget.lineButtons.length > 0"
+                >
+                  <template v-for="(subWidget, swIdx) in widget.lineButtons">
+                    <template v-if="'container' === subWidget.category">
+                      <component
+                        :is="subWidget.type + '-item'"
+                        :widget="subWidget"
+                        :key="swIdx"
+                        :parent-list="widget.lineButtons"
+                        :index-of-parent-list="swIdx"
+                        :parent-widget="widget"
+                        :subFormRowIndex="rowIndex"
+                        :tableParam="{
+                          rowIndex: rowIndex,
+                          row: row,
+                          items: fieldModel,
+                        }"
+                      >
+                        <!-- 递归传递插槽！！！ -->
+                        <template
+                          v-for="slot in Object.keys($scopedSlots)"
+                          v-slot:[slot]="scope"
+                        >
+                          <slot :name="slot" v-bind="scope" />
+                        </template>
+                      </component>
+                    </template>
+                    <template v-else>
+                      <component
+                        :is="subWidget.type + '-widget'"
+                        :field="subWidget"
+                        :designer="null"
+                        :key="swIdx"
+                        :parent-list="widget.lineButtons"
+                        :index-of-parent-list="swIdx"
+                        :parent-widget="widget"
+                        :subFormRowIndex="rowIndex"
+                        :tableParam="{
+                          rowIndex: rowIndex,
+                          row: row,
+                          items: fieldModel,
+                        }"
+                      >
+                        <!-- 递归传递插槽！！！ -->
+                        <template
+                          v-for="slot in Object.keys($scopedSlots)"
+                          v-slot:[slot]="scope"
+                        >
+                          <slot :name="slot" v-bind="scope" />
+                        </template>
+                      </component>
+                    </template>
+                  </template>
+                </template>
+              </div>
             </template>
 
             <!--        <div class="t1">
@@ -622,16 +732,6 @@
           </div>
         </div>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button
-          type="primary"
-          plain
-          class="button-sty"
-          icon="el-icon-close"
-          @click="showRowDetailDialog = false"
-          >{{ $t1("关闭") }}</el-button
-        >
-      </span>
     </el-dialog>
   </container-item-wrapper>
 </template>
@@ -655,7 +755,8 @@ import {
 } from "../../../../components/xform/utils/textMaskUtil";
 import { extendDeeply } from "../../../../utils/index.js";
 import { mergeQueryParam } from "../../../../components/xform/utils/queryParamUtil";
-import render from "../../../../views/user/bill_setting/render.vue";
+import render from "../../../../views/user/bill_setting/render.vue";
+import axios from "axios";
 
 const baseRefUtil = {
   emitter,
@@ -741,7 +842,10 @@ export default {
       },
       keyword: null,
 
-      checkItemIds: [],
+      checkItemIds: [],
+      tableQuerySeq: 0,
+      tableQueryCancelSource: null,
+      tableDestroyed: false,
     };
   },
   watch: {
@@ -753,13 +857,6 @@ export default {
     formConfig: function () {
       return this.getFormConfig();
     },
-    /**
-     * 明细行卡片样式开关。只判 === 'card'：老表单该 option 为 null/undefined
-     * （upgradeWidgetConfig 补的是 null，运行时读不到这个键），必须退回朴素列表。
-     */
-    itemCardClass: function () {
-      return this.widget.options.itemStyle === "card" ? "h5-item-card" : "";
-    },
     paginationLayout: function () {
       return this.widget.options.smallPagination
         ? "prev, pager, next"
@@ -777,26 +874,6 @@ export default {
         : !!this.widget.options.buttonsColumnFixed &&
             this.widget.options.buttonsColumnFixed;
     },
-    /**
-     * 明细卡片主标题所用的列（对齐 bill_setting 的 mainFieldName）。
-     *
-     * 主字段就是 columns() 里标了 isMainFiled 的那一列 —— 第一个既有 prop
-     * 又 showForRow 的列，不是另配的选项。查询选择列表一直拿它当标题行，
-     * 这里把同一口径用到明细卡片上。
-     *
-     * 返回值同时决定字段区要不要把主字段排除掉（模板里那个 v-if）。
-     */
-    mainTitleColumn() {
-      let visible = (this.vxeOption.columns || []).filter(
-        (column) => column.showForRow
-      );
-      let main = visible.find((column) => column.isMainFiled) || null;
-      if (!main) return null;
-      // 查询选择模式的标题行是另一个 .t1，与可见列数无关，一直排除主字段，保持原口径
-      if (this.widget.options.isQueryTable) return main;
-      // 明细卡片：只有一列时不抽标题 —— 抽走字段区就空了，不如照常当字段出
-      return visible.length < 2 ? null : main;
-    },
     columns() {
       let tableColumns = this.widget.options.tableColumns;
       let newColumns = [];
@@ -832,8 +909,7 @@ export default {
           fixed: !!t.fixed && t.fixed,
           field: t.prop,
           title: t.label,
-          // 原来这里还有一个 `witdh: t.width` —— 键名拼错(w-i-t-d-h)、全库无人读取，
-          // 且 H5 卡片是 dl/dt/dd 排版本来就不吃列宽。列配置里的「列宽」已一并去掉。
+          witdh: t.width,
           sortable: t.sortable,
           align: t.align ? t.align : "center",
           formatter: this.formatterValue,
@@ -920,10 +996,38 @@ export default {
     this.handleOnMounted();
     this.initTableList();
   },
-  beforeDestroy: function () {
-    this.unregisterFromRefList();
-  },
-  methods: {
+  beforeDestroy: function () {
+    this.tableDestroyed = true;
+    this.cancelActiveTableQuery("table destroyed");
+    this.unregisterFromRefList();
+  },
+  methods: {
+    cancelActiveTableQuery(reason) {
+      if (this.tableQueryCancelSource) {
+        this.tableQueryCancelSource.cancel(reason || "superseded table query");
+        this.tableQueryCancelSource = null;
+      }
+    },
+    startTableQuery() {
+      this.cancelActiveTableQuery();
+      const source = axios.CancelToken.source();
+      const context = { seq: ++this.tableQuerySeq, source };
+      this.tableQueryCancelSource = source;
+      return context;
+    },
+    isCurrentTableQuery(context) {
+      return (
+        !this.tableDestroyed &&
+        context &&
+        context.seq === this.tableQuerySeq &&
+        this.tableQueryCancelSource === context.source
+      );
+    },
+    finishTableQuery(context) {
+      if (context && this.tableQueryCancelSource === context.source) {
+        this.tableQueryCancelSource = null;
+      }
+    },
     openAdvancedSearchDialog() {
       /*let formData = this.formModel;
       let advancedFormData = {};
@@ -1127,15 +1231,15 @@ export default {
           },*/
           ...dataTableConfig.config,
         },
-        exportAjax: (param) => {
+        exportAjax: (param) => {
           let $grid = this.getGridTable();
           let pageSize = param.size;
           let currentPage = param.current;
           let page = { pageSize, currentPage };
-          return this.vxeOption.config.proxyConfig.ajax.query.call(this, {
-            page,
-            param,
-          });
+          return this.vxeOption.config.proxyConfig.ajax.query.call(this, {
+            page,
+            param: { ...param, __exportQuery: true },
+          });
         },
       };
 
@@ -1147,8 +1251,12 @@ export default {
             total: isDataPage ? "objx.total" : "objx.length", // 配置响应结果总页数字段
           },
           ajax: {
-            // 接收 Promise 对象
-            query: ({ page, sorts, filters, form, param }) => {
+            // 接收 Promise 对象
+            query: ({ page, sorts, filters, form, param }) => {
+              const isExportQuery = param?.__exportQuery === true;
+              const queryContext = isExportQuery
+                ? null
+                : this.startTableQuery();
               let scriptCode = this.getScriptCode();
               let formData = tableOption.param ? tableOption.param() || {} : {};
               const queryParams = Object.assign({}, formData);
@@ -1164,8 +1272,9 @@ export default {
                 queryParams.current = page.currentPage;
               }
 
-              queryParams.searchCount = isQueryAllPage !== false;
-              Object.assign(queryParams, param);
+              queryParams.searchCount = isQueryAllPage !== false;
+              Object.assign(queryParams, param);
+              delete queryParams.__exportQuery;
 
               // 与 PC 链路同规则：condition 追加合并，其余键平铺覆盖
               if (that.dataTableConfig.queryParam) {
@@ -1177,8 +1286,18 @@ export default {
                   ...queryParams,
                 };
                 if (scriptCode) {
-                  let done = (res) => {
-                    resolve(res);
+                  let done = (res) => {
+                    if (
+                      !isExportQuery &&
+                      !this.isCurrentTableQuery(queryContext)
+                    ) {
+                      reject(new axios.Cancel("stale table query"));
+                      return;
+                    }
+                    resolve(res);
+                    if (isExportQuery) return;
+                    const querySeq = queryContext.seq;
+                    this.finishTableQuery(queryContext);
                     if (res.type === "success") {
                       let rows = res.objx
                         ? res.objx.records || res.objx || []
@@ -1192,8 +1311,13 @@ export default {
                           records: rows,
                         };
                       }
-                      that.$nextTick(() => {
-                        setTimeout(function () {
+                      that.$nextTick(() => {
+                        setTimeout(function () {
+                          if (
+                            that.tableDestroyed ||
+                            querySeq !== that.tableQuerySeq
+                          )
+                            return;
                           dataTableConfig.callback &&
                             dataTableConfig.callback(rows);
                           tableOption.callback && tableOption.callback(rows);
@@ -1214,11 +1338,17 @@ export default {
                       this.setValue([]);
                     }
                   };
-                  this.loadDefaultQueryList(reqData, done).catch((error) => {
-                    reject(error);
-                  });
-                } else {
-                  resolve();
+                  this.loadDefaultQueryList(
+                    reqData,
+                    done,
+                    queryContext?.source.token
+                  ).catch((error) => {
+                    if (queryContext) this.finishTableQuery(queryContext);
+                    reject(error);
+                  });
+                } else {
+                  if (queryContext) this.finishTableQuery(queryContext);
+                  resolve();
                 }
               });
             },
@@ -1330,10 +1460,14 @@ export default {
       }
       if (!isQueryTable && !this.formDataId) return;
 
-      let scriptCode = this.getScriptCode();
-      if (scriptCode) {
-        this.loadDefaultViewList();
-      }
+      let scriptCode = this.getScriptCode();
+      if (scriptCode) {
+        this.loadDefaultViewList().catch((error) => {
+          if (!axios.isCancel(error) && !this.tableDestroyed) {
+            console.error("[data-table-h5] default view query failed", error);
+          }
+        });
+      }
     },
     getAccessParam() {
       if (!this.widget.options.formScriptParam) return;
@@ -1379,7 +1513,7 @@ export default {
         ? { ...base, ...(innerData || {}) }
         : { ...base, data: innerData || {} };
     },
-    loadDefaultQueryList(reqData, done) {
+    loadDefaultQueryList(reqData, done, cancelToken) {
       let reportTemplate = this.getFormRef().reportTemplate;
       let scriptCode = this.getScriptCode();
       let accessParam = this.getAccessParam() || {};
@@ -1397,14 +1531,16 @@ export default {
       return this.formHttp({
         scriptCode: scriptCode,
         data: this.buildFormScriptData(reportTemplate, requestData),
-        isLoading: false,
+        isLoading: false,
+        cancelToken,
         ...defaultOption,
         callback: (res) => {
           done(res);
         },
       });
     },
-    loadDefaultViewList() {
+    loadDefaultViewList() {
+      const queryContext = this.startTableQuery();
       let dataId = this.formDataId;
       let reportTemplate = this.getFormRef().reportTemplate;
       let accessParam = this.getAccessParam() || {};
@@ -1414,23 +1550,30 @@ export default {
         otherParam.attachmentType = attachmentType;
       }
       let scriptCode = this.getScriptCode();
-      return this.formHttp({
-        scriptCode: scriptCode,
+      const requestTask = this.formHttp({
+        scriptCode: scriptCode,
+        cancelToken: queryContext.source.token,
         data: this.buildFormScriptData(reportTemplate, {
           id: dataId,
           ...otherParam,
           ...accessParam,
         }),
-        callback: (res) => {
-          let rows = res.objx ? res.objx.records || res.objx || [] : [];
-          this.setValue(rows);
+        callback: (res) => {
+          if (!this.isCurrentTableQuery(queryContext)) return;
+          let rows = res.objx ? res.objx.records || res.objx || [] : [];
+          this.finishTableQuery(queryContext);
+          this.setValue(rows);
           this.handleCustomEvent(
             this.widget.options.formScriptCallback,
             ["rows"],
             [rows]
           );
-        },
-      });
+        },
+      });
+      return Promise.resolve(requestTask).catch((error) => {
+        this.finishTableQuery(queryContext);
+        throw error;
+      });
     },
     getReqParam(item, dataId, billData) {
       let param = {};
@@ -1604,66 +1747,6 @@ export default {
       option.prefix = option.prefix || serverName;
       this.$excelExport({ targetRef: tableRef, ...option });
     },
-    /**
-     * 行级对比标记，复用 indexMixin 的 getCompareRowClass（data-table 也在用，
-     * 见 data-table-mixin.js 的 rowClassName）。返回
-     * xform-compare-row-new / xform-compare-row-changed / ""。
-     * 未参与对比的子表由 getCompareRowClass 内部的 isCompareSubTable 拦掉，
-     * 不会满屏高亮，这里无需重复判断。
-     */
-    getRowCompareClass(row) {
-      let formRef = this.getFormRef();
-      if (!formRef || !formRef.isCompare || !formRef.getCompareRowClass)
-        return "";
-      return formRef.getCompareRowClass(this.fieldKeyName, row);
-    },
-    /**
-     * 该列在 H5 明细卡片里是否占半行（一行两个）。
-     *
-     * 取列的「H5列宽」选项（table-column-dialog 的「编辑更多属性」里配），
-     * 运行期从 columnConfig 上读 —— createColumns 把整个设计器列对象原样挂在
-     * `col.params.columnConfig` 上（data-table-mixin.js:1762）。
-     * 只认 'half'：没配过的老列读到 undefined，按整行处理；不能写成 !== 'full'。
-     */
-    isHalfColumn(column) {
-      return column?.params?.columnConfig?.h5Span === "half";
-    },
-    /**
-     * 明细行的显示文本。
-     *
-     * 行上不渲染编辑控件，所以有选项的列（下拉/状态/单选/多选）必须自己把
-     * value 换成 label —— 否则状态列会显示成 1 而不是「审核中」，
-     * 因为 formatterValue 只做日期与数字格式化，不查选项表。
-     */
-    getColumnDisplayText(column, row, rowIndex) {
-      let value = row[column.field];
-      let columnWidget = column.params ? column.params.widget : null;
-      let widgetOptions = (columnWidget && columnWidget.options) || {};
-      let optionList = widgetOptions.optionItems || widgetOptions.statusParam;
-      if (optionList && optionList.length) {
-        let hit = optionList.filter((o) => String(o.value) === String(value))[0];
-        if (hit) return hit.label;
-      }
-      return column.formatter({
-        cellValue: value,
-        column: column,
-        rowIndex: rowIndex,
-        row: row,
-        items: this.fieldModel,
-      });
-    },
-    /**
-     * 行点击：
-     * - 查询选择场景(isQueryTable)：点行是勾选，保持原行为；
-     * - 明细行：点整行打开明细详情（行上不再摆删除/操作按钮）。
-     */
-    onRowClick(row) {
-      if (this.widget.options.isQueryTable) {
-        this.itemCheck(row);
-        return
-      }
-      this.openRowDetailDialog(row);
-    },
     itemCheck(row) {
       let dataTableConfig = this.dataTableConfig;
       if (dataTableConfig) {

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

@@ -1,7 +1,7 @@
 <template>
   <container-item-wrapper :widget="widget">
     <div :key="widget.id" class="table-container" v-show="!widget.options.hidden" :style="heightStyle">
-      <template v-if="!!widget.widgetList && widget.widgetList.length > 0" v-show="!widget.options.hidden">
+      <template v-if="!!widget.widgetList && widget.widgetList.length > 0">
         <template v-for="(subWidget, swIdx) in widget.widgetList">
           <template v-if="'container' === subWidget.category">
             <component