cloud-web-corejs 1.0.281 → 1.1.0-dev.11

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

@@ -1,1700 +1,1914 @@
-<template>
-  <container-item-wrapper
-    :widget="widget"
-    :class="widget.options.isFullscreen ? 'full-height' : ''"
-  >
-    <div class="h5-header">{{ widget.options.label }}</div>
-    <div class="h5-search-box">
-      <el-input v-model="keyword" placeholder="请选择" class="txt">
-        <i slot="suffix" class="el-input__icon el-icon-search"></i>
-        <el-button slot="append" class="btn" @click="searchEvent"
-          >搜索</el-button
-        >
-      </el-input>
-      <div class="icon-screen" @click="openAdvancedSearchDialog">
-        <i class="iconfont icon-chaxuntiaojianshezhi"></i>筛选
-      </div>
-    </div>
-    <div
-      v-if="widget.options.isQueryTable"
-      class="h5-fixed-top-btns"
-      title-width="92px"
-      title-align="right"
-    >
-      <el-form label-position="top">
-        <template v-if="!!widget.buttons && widget.buttons.length > 0">
-          <template v-for="(subWidget, swIdx) in widget.buttons">
-            <template v-if="'container' === subWidget.category">
-              <component
-                :is="subWidget.type + '-item'"
-                :widget="subWidget"
-                :key="swIdx"
-                :parent-list="widget.buttons"
-                :index-of-parent-list="swIdx"
-                :parent-widget="widget"
-              >
-                <!-- 递归传递插槽！！！ -->
-                <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.buttons"
-                :index-of-parent-list="swIdx"
-                :parent-widget="widget"
-              >
-                <!-- 递归传递插槽！！！ -->
-                <template
-                  v-for="slot in Object.keys($scopedSlots)"
-                  v-slot:[slot]="scope"
-                >
-                  <slot :name="slot" v-bind="scope" />
-                </template>
-              </component>
-            </template>
-          </template>
-        </template>
-      </el-form>
-    </div>
-    <div class="h5-list-box">
-      <div
-        v-for="(row, rowIndex) in fieldModel"
-        :key="rowIndex"
-        class="item"
-        @click="itemCheck(row)"
-        :class="{ checked: checkItemIds.includes(row.id) }"
-      >
-        <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
-              v-for="(column, columnIndex) in vxeOption.columns.filter(
-                (item, index) => item.isMainFiled
-              )"
-            >
-              <b :key="'1-' + columnIndex">{{ column.title }}：</b>
-              <span :key="'2-' + columnIndex">
-                <template v-if="!column.params.formatS">
-                  {{ row[column.field] }}
-                </template>
-                <template v-else-if="column.params.formatS == 'render'">
-                  {{
-                    column.slots.default({
-                      column: column,
-                      rowIndex: rowIndex,
-                      row: row,
-                      items: fieldModel,
-                    })
-                  }}
-                </template>
-                <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"
-                    :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="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(obj.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>
-                  {{
-                    column.formatter({
-                      cellValue: row[column.field],
-                      column: column,
-                      rowIndex: rowIndex,
-                      row: row,
-                      items: fieldModel,
-                    })
-                  }}
-                </template>
-              </span>
-              <!--              <div class="status">未审核</div>-->
-            </template>
-          </div>
-          <div class="t2">
-            <template
-              v-if="
-                !widget.options.isQueryTable || vxeOption.columns.length > 1
-              "
-            >
-              <template v-for="(column, columnIndex) in vxeOption.columns">
-                <template
-                  v-if="
-                    (!widget.options.isQueryTable || !column.isMainFiled) &&
-                    column.showForRow
-                  "
-                >
-                  <dl :key="columnIndex">
-                    <div>
-                      <dt>{{ column.title }}：</dt>
-                      <dd>
-                        <template v-if="!column.params.formatS">
-                          {{ row[column.field] }}
-                        </template>
-                        <template v-else-if="column.params.formatS == 'render'">
-                          {{
-                            column.slots.default({
-                              column: column,
-                              rowIndex: rowIndex,
-                              row: row,
-                              items: fieldModel,
-                            })
-                          }}
-                        </template>
-
-                        <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>
-                          {{
-                            column.formatter({
-                              cellValue: row[column.field],
-                              column: column,
-                              rowIndex: rowIndex,
-                              row: row,
-                              items: fieldModel,
-                            })
-                          }}
-                        </template>
-                      </dd>
-                    </div>
-                  </dl>
-                </template>
-              </template>
-            </template>
-          </div>
-          <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"
-            >
-              <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">
-                  <b>订单号：21533666</b>
-                  <div class="status">未审核</div>
-                </div>
-                <div class="t2">
-                  <p>产地：广东佛山</p>
-                  <p>产地：广东佛山</p>
-                  <p>产地：广东佛山</p>
-                </div>-->
-      </div>
-    </div>
-    <div class="vxe-grid" v-if="widget.options.isQueryTable">
-      <div class="vxe-grid&#45;&#45;pager-wrapper">
-        <vxe-pager
-          class="pages-box"
-          :current-page.sync="page.current"
-          :page-size.sync="page.size"
-          :total="page.total"
-          :layouts="['PrevPage', 'Number', 'NextPage']"
-          @page-change="changePageNew"
-        >
-          <template #right>
-            <span>
-              <span>当前记录</span>
-              <span class="f-red"> {{ page.records.length }} </span>
-              <span>/</span>
-              <span class="f-red"> {{ page.total }}</span>
-            </span>
-          </template>
-        </vxe-pager>
-      </div>
-    </div>
-
-    <advancedSearchDialog
-      v-if="showAdvancedSearch"
-      :visiable.sync="showAdvancedSearch"
-      class="adSearchForm_all"
-      :formData="advancedFormData"
-      @confirm="confirmAdvancedSearchDialog"
-      @clear="advancedClear"
-    >
-      <template #form>
-        <vxe-form
-          :model="formModel"
-          title-width="102px"
-          :inline="true"
-          class="adSearchForm"
-        >
-          <template v-for="(searchColumn, index) in vxeOption.searchColumns">
-            <vxe-form-item>
-              <component
-                :is="getColumnWidgetName(searchColumn.widget)"
-                :field="searchColumn.widget"
-                :form-model="globalModel.formModel"
-                :designer="null"
-                :key="index"
-                :parent-widget="widget"
-              ></component>
-            </vxe-form-item>
-          </template>
-        </vxe-form>
-      </template>
-    </advancedSearchDialog>
-    <el-dialog
-      title="明细详情"
-      :modal-append-to-body="false"
-      :close-on-click-modal="false"
-      :visible.sync="showRowDetailDialog"
-      :modal="false"
-      custom-class="dialog-style h5view-dialog"
-      width="100%"
-      top="0px"
-      v-el-drag-dialog
+<template>
+  <container-item-wrapper
+    :widget="widget"
+    :class="widget.options.isFullscreen ? 'full-height' : ''"
+  >
+    <div class="h5-header">{{ widget.options.label }}</div>
+    <div class="h5-search-box">
+      <el-input v-model="keyword" placeholder="请选择" class="txt">
+        <i slot="suffix" class="el-input__icon el-icon-search"></i>
+        <el-button slot="append" class="btn" @click="searchEvent"
+          >搜索</el-button
+        >
+      </el-input>
+      <div class="icon-screen" @click="openAdvancedSearchDialog">
+        <i class="iconfont icon-chaxuntiaojianshezhi"></i>筛选
+      </div>
+    </div>
+    <div
+      v-if="widget.options.isQueryTable"
+      class="h5-fixed-top-btns"
+      title-width="92px"
+      title-align="right"
+    >
+      <el-form label-position="top">
+        <template v-if="!!widget.buttons && widget.buttons.length > 0">
+          <template v-for="(subWidget, swIdx) in widget.buttons">
+            <template v-if="'container' === subWidget.category">
+              <component
+                :is="subWidget.type + '-item'"
+                :widget="subWidget"
+                :key="swIdx"
+                :parent-list="widget.buttons"
+                :index-of-parent-list="swIdx"
+                :parent-widget="widget"
+              >
+                <!-- 递归传递插槽！！！ -->
+                <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.buttons"
+                :index-of-parent-list="swIdx"
+                :parent-widget="widget"
+              >
+                <!-- 递归传递插槽！！！ -->
+                <template
+                  v-for="slot in Object.keys($scopedSlots)"
+                  v-slot:[slot]="scope"
+                >
+                  <slot :name="slot" v-bind="scope" />
+                </template>
+              </component>
+            </template>
+          </template>
+        </template>
+      </el-form>
+    </div>
+    <div class="h5-list-box">
+      <div
+        v-for="(row, rowIndex) in visibleRows"
+        :key="rowIndex"
+        class="item"
+        @click="onRowClick(row)"
+        :class="[
+          { checked: checkItemIds.includes(row.id) },
+          itemCardClass,
+          getRowCompareClass(row),
+        ]"
+      >
+        <!-- 右上角查看角标（对齐 bill_setting 的 .pro-item .t::after）。
+             与 itemStyle 解绑：点整行进详情是明细行的统一行为，
+             这个角标是它的视觉提示，不该藏在选项后面。
+             查询选择场景点行是勾选、不进详情，故不显示。 -->
+        <i class="h5-item-arrow" v-if="!widget.options.isQueryTable"></i>
+        <!-- 明细行不放删除按钮：点击整行进详情即可。
+             要恢复的话，除了放回这个 div，还得给它补流程判断
+             （有流程且当前节点不可编辑时要藏掉），它不是 widget，
+             拿不到 hiddenByWf / widgetShowRule 那两套。 -->
+        <template v-if="vxeOption.columns.length > 0">
+          <div class="t1" v-if="widget.options.isQueryTable">
+            <template
+              v-for="(column, columnIndex) in vxeOption.columns.filter(
+                (item, index) => item.isMainFiled
+              )"
+            >
+              <b :key="'1-' + columnIndex">{{ column.title }}：</b>
+              <span :key="'2-' + columnIndex">
+                <template v-if="!column.params.formatS">
+                  {{ row[column.field] }}
+                </template>
+                <template v-else-if="column.params.formatS == 'render'">
+                  {{
+                    column.slots.default({
+                      column: column,
+                      rowIndex: rowIndex,
+                      row: row,
+                      items: fieldModel,
+                    })
+                  }}
+                </template>
+                <template
+                  v-else-if="column.slots && column.slots.default == 'widget'"
+                >
+                  <!-- 临时只读：只出选中文本；关掉 H5_TEMP_READ_ONLY 后仍走下面的控件 -->
+                  <template v-if="getReadMode()">
+                    {{ getColumnDisplayText(column, row, rowIndex) }}
+                  </template>
+                  <component
+                    v-else
+                    :is="getColumnWidgetName(column.params.widget)"
+                    :field="column.params.widget"
+                    :form-model="globalModel.formModel"
+                    :designer="null"
+                    :key="rowIndex"
+                    :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="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(obj.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>
+                  {{
+                    column.formatter({
+                      cellValue: row[column.field],
+                      column: column,
+                      rowIndex: rowIndex,
+                      row: row,
+                      items: fieldModel,
+                    })
+                  }}
+                </template>
+              </span>
+              <!--              <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="
+                !widget.options.isQueryTable || vxeOption.columns.length > 1
+              "
+            >
+              <template v-for="(column, columnIndex) in vxeOption.columns">
+                <!-- 主字段已经当标题了，不再在字段区重复一遍（查询选择模式本来
+                     就是这个口径，这里两种模式统一）。没有主标题时(mainTitleColumn
+                     为空，如只有一列)照常全出。 -->
+                <template
+                  v-if="
+                    (!column.isMainFiled || !mainTitleColumn) &&
+                    column.showForRow
+                  "
+                >
+                  <!-- m2 = 半行（一行两个）。类名沿用 style.scss:14095 早就留好的
+                       `.t2 > dl.m2{width:50%}`（那条规则一直没人往 dl 上打过类）。
+                       由列的「H5列宽」选项控制，见 isHalfColumn。 -->
+                  <dl :key="columnIndex" :class="{ m2: isHalfColumn(column) }">
+                    <div>
+                      <dt>{{ column.title }}：</dt>
+                      <dd>
+                        <template v-if="!column.params.formatS">
+                          {{ row[column.field] }}
+                        </template>
+                        <template v-else-if="column.params.formatS == 'render'">
+                          {{
+                            column.slots.default({
+                              column: column,
+                              rowIndex: rowIndex,
+                              row: row,
+                              items: fieldModel,
+                            })
+                          }}
+                        </template>
+
+                        <!-- 临时只读：行上只出选中文本。控件/操作链接不能删，
+                             关掉 H5_TEMP_READ_ONLY 后仍要能编辑。 -->
+                        <template v-else-if="getReadMode()">
+                          {{ getColumnDisplayText(column, row, rowIndex) }}
+                        </template>
+                        <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="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>
+                          {{
+                            column.formatter({
+                              cellValue: row[column.field],
+                              column: column,
+                              rowIndex: rowIndex,
+                              row: row,
+                              items: fieldModel,
+                            })
+                          }}
+                        </template>
+                      </dd>
+                    </div>
+                  </dl>
+                </template>
+              </template>
+            </template>
+          </div>
+          <!-- 明细行不摆操作按钮区：点整行进详情。查询选择场景(isQueryTable)
+               仍保留行按钮，那边点行是勾选、按钮另有用途。 -->
+          <div class="btns" v-if="widget.options.isQueryTable">
+            <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">
+                  <b>订单号：21533666</b>
+                  <div class="status">未审核</div>
+                </div>
+                <div class="t2">
+                  <p>产地：广东佛山</p>
+                  <p>产地：广东佛山</p>
+                  <p>产地：广东佛山</p>
+                </div>-->
+      </div>
+      <!-- 折叠尾行：详情里挂的明细列表默认只出 H5_LIST_COLLAPSE_SIZE 条，
+           「更多（N）」展开全部、「收起」折回去，同一行来回切。
+           显示条件用 collapseTogglable 而不是 collapsedRest —— 展开后 collapsedRest
+           是 0，用它当条件的话「收起」会连同尾行一起消失，就折不回去了。
+           摆在 .h5-list-box 里当最后一个子元素，跟着它的内边距与卡片对齐。
+           样式见 styles/h5.scss 块 I4。 -->
+      <div
+        class="h5-list-more"
+        v-if="collapseTogglable"
+        @click="toggleAllRows"
+      >
+        <template v-if="showAllRows">
+          <span>{{ $t1("收起") }}</span>
+          <i class="el-icon-arrow-up"></i>
+        </template>
+        <template v-else>
+          <span>{{ $t1("更多") }}</span>
+          <span class="h5-list-more-count">（{{ collapsedRest }}）</span>
+          <i class="el-icon-arrow-down"></i>
+        </template>
+      </div>
+    </div>
+    <div class="vxe-grid" v-if="widget.options.isQueryTable">
+      <div class="vxe-grid&#45;&#45;pager-wrapper">
+        <vxe-pager
+          class="pages-box"
+          :current-page.sync="page.current"
+          :page-size.sync="page.size"
+          :total="page.total"
+          :layouts="['PrevPage', 'Number', 'NextPage']"
+          @page-change="changePageNew"
+        >
+          <template #right>
+            <span>
+              <span>当前记录</span>
+              <span class="f-red"> {{ page.records.length }} </span>
+              <span>/</span>
+              <span class="f-red"> {{ page.total }}</span>
+            </span>
+          </template>
+        </vxe-pager>
+      </div>
+    </div>
+
+    <advancedSearchDialog
+      v-if="showAdvancedSearch"
+      :visiable.sync="showAdvancedSearch"
+      class="adSearchForm_all"
+      :formData="advancedFormData"
+      @confirm="confirmAdvancedSearchDialog"
+      @clear="advancedClear"
+    >
+      <template #form>
+        <vxe-form
+          :model="formModel"
+          title-width="102px"
+          :inline="true"
+          class="adSearchForm"
+        >
+          <template v-for="(searchColumn, index) in vxeOption.searchColumns">
+            <vxe-form-item>
+              <component
+                :is="getColumnWidgetName(searchColumn.widget)"
+                :field="searchColumn.widget"
+                :form-model="globalModel.formModel"
+                :designer="null"
+                :key="index"
+                :parent-widget="widget"
+              ></component>
+            </vxe-form-item>
+          </template>
+        </vxe-form>
+      </template>
+    </advancedSearchDialog>
+    <el-dialog
+      title="明细详情"
+      :modal-append-to-body="false"
+      :close-on-click-modal="false"
+      :visible.sync="showRowDetailDialog"
+      :modal="false"
+      custom-class="dialog-style h5view-dialog"
+      width="100%"
+      top="0px"
+      v-el-drag-dialog
       v-el-dialog-center
-      :destroy-on-close="true"
-    >
-      <div class="cont" style="height: calc(100vh - 73px)">
-        <div class="h5-list-box">
-          <div
-            v-for="(row, rowIndex) in [editRow]"
-            :key="rowIndex"
-            class="item"
-          >
-            <!--            <div class="del-btn"><i class="el-icon-delete"></i></div>-->
-            <template v-if="vxeOption.columns.length > 0">
-              <div class="t1" v-if="widget.options.isQueryTable">
-                <template
-                  v-for="(column, columnIndex) in vxeOption.columns.filter(
-                    (item, index) => item.isMainFiled
-                  )"
-                >
-                  <b>{{ column.title }}：</b>
-                  <span>
-                    <template v-if="!column.params.formatS">
-                      {{ row[column.field] }}
-                    </template>
-                    <template v-else-if="column.params.formatS == 'render'">
-                      {{
-                        column.slots.default({
-                          column: column,
-                          rowIndex: rowIndex,
-                          row: row,
-                          items: fieldModel,
-                        })
-                      }}
-                    </template>
-                    <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"
-                        :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(obj.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>
-                      {{
-                        column.formatter({
-                          cellValue: row[column.field],
-                          column: column,
-                          rowIndex: rowIndex,
-                          row: row,
-                          items: fieldModel,
-                        })
-                      }}
-                    </template>
-                  </span>
-                  <!--              <div class="status">未审核</div>-->
-                </template>
-              </div>
-              <div class="t2">
-                <template
-                  v-if="
-                    !widget.options.isQueryTable || vxeOption.columns.length > 1
-                  "
-                >
-                  <template v-for="(column, columnIndex) in vxeOption.columns">
-                    <template
-                      v-if="!widget.options.isQueryTable || !column.isMainFiled"
-                    >
-                      <dl>
-                        <div>
-                          <dt>{{ column.title }}：</dt>
-                          <dd>
-                            <template v-if="!column.params.formatS">
-                              {{ row[column.field] }}
-                            </template>
-                            <template
-                              v-else-if="column.params.formatS == 'render'"
-                            >
-                              {{
-                                column.slots.default({
-                                  column: column,
-                                  rowIndex: rowIndex,
-                                  row: row,
-                                  items: fieldModel,
-                                })
-                              }}
-                            </template>
-
-                            <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="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="openEditDialog(obj.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>
-                              {{
-                                column.formatter({
-                                  cellValue: row[column.field],
-                                  column: column,
-                                  rowIndex: rowIndex,
-                                  row: row,
-                                  items: fieldModel,
-                                })
-                              }}
-                            </template>
-                          </dd>
-                        </div>
-                      </dl>
-                    </template>
-                  </template>
-                </template>
-              </div>
-              <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">
-                      <b>订单号：21533666</b>
-                      <div class="status">未审核</div>
-                    </div>
-                    <div class="t2">
-                      <p>产地：广东佛山</p>
-                      <p>产地：广东佛山</p>
-                      <p>产地：广东佛山</p>
-                    </div>-->
-          </div>
-        </div>
-      </div>
-    </el-dialog>
-  </container-item-wrapper>
-</template>
-
-<script>
-import emitter from "../../../../components/xform/utils/emitter";
-import i18n from "../../../../components/xform/utils/i18n";
-import refMixin from "../../../../components/xform/form-render/refMixin";
-import containerItemMixin from "./containerItemMixin";
-import FieldComponents from "../../../../components/xform/form-designer/form-widget/field-widget/index";
-import {
-  assembleAxiosConfig,
-  generateId,
-  getReportGlobalMap,
-  isVabsearchMultiWidget,
-} from "../../../../components/xform/utils/util";
-import * as formatUtil from "../../../../components/xform/utils/format";
-import {
-  buildTextMaskContext,
-  markMaskedExportColumns,
-} 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";
-
-const baseRefUtil = {
-  emitter,
-  i18n,
-  refMixin,
-  containerItemMixin,
-  formatUtil,
-  assembleAxiosConfig,
-  getReportGlobalMap,
-};
-
-const defaultPageSize = 2;
-export default {
-  name: "list-h5-item",
-  components: {
-    ...FieldComponents,
-  },
-  mixins: [emitter, i18n, refMixin, containerItemMixin],
-  componentName: "ContainerItem",
-  props: {
-    widget: Object,
-    parentWidget: Object,
-    parentList: Array,
-    indexOfParentList: Number,
-    subFormRowIndex: {
-      type: Number,
-      default: -1,
-    },
-    subFormColIndex: {
-      type: Number,
-      default: -1,
-    },
-    subFormRowId: {
-      type: String,
-      default: "",
-    },
-  },
-  inject: [
-    "refList",
-    "sfRefList",
-    "globalModel",
-    "getFormConfig",
-    "getGlobalDsv",
-  ],
-  data: function () {
-    let that = this;
-    let pageSize = defaultPageSize;
-    return {
-      showAdvancedSearch: false,
-      showRowDetailDialog: false,
-      editRow: {},
-      fieldModel: [],
-      selectedIndices: [],
-      /*pageSize: this.widget.options.pagination.pageSize,
-      pageSizes: this.widget.options.pagination.pageSizes,
-      currentPage: this.widget.options.pagination.currentPage,
-      total: this.widget.options.pagination.total,*/
-      formData: {
-        saleOrgName: "",
-        loginAccount: "",
-        mobile: "",
-        enabled: 1,
-      },
-      vxeOption: { columns: [] },
-      requestAccess: null,
-      columnFormatMap: {
-        editInput: "input",
-        editNumber: "number",
-        editDate: "date",
-        editSelect: "select",
-        editSearch: "vabsearch",
-        button: "button",
-      },
-      dataTableConfig: {},
-      advancedFormData: {},
-
-      pageSize: pageSize,
-      page: {
-        current: 1,
-        size: pageSize,
-        total: 0,
-        records: [],
-      },
-      keyword: null,
-
-      checkItemIds: [],
-    };
-  },
-  watch: {
-    fieldModel(val) {
-      this.formModel[this.fieldKeyName] = val || [];
-    },
-  },
-  computed: {
-    formConfig: function () {
-      return this.getFormConfig();
-    },
-    paginationLayout: function () {
-      return this.widget.options.smallPagination
-        ? "prev, pager, next"
-        : "total, sizes, prev, pager, next, jumper";
-    },
-    customClass: function () {
-      return this.widget.options.customClass || "";
-    },
-    singleRowSelectFlag: function () {
-      return !this.widget.options.showCheckBox;
-    },
-    buttonsColumnFixed: function () {
-      return void 0 === this.widget.options.buttonsColumnFixed
-        ? "right"
-        : !!this.widget.options.buttonsColumnFixed &&
-            this.widget.options.buttonsColumnFixed;
-    },
-    columns() {
-      let tableColumns = this.widget.options.tableColumns;
-      let newColumns = [];
-      /*newColumns.push({
-        type: 'checkbox',
-        width: 48,
-        resizable: false,
-        fixed: 'left'
-      });*/
-
-      let firstColumn = tableColumns.find((column) => {
-        return !!column.prop && !!column.showForRow;
-      });
-      let mainFiled = firstColumn?.prop;
-
-      let formRef = this.getFormRef();
-      let dateConfig = this.$baseLodash.cloneDeep(
-        formRef.getFieldWidgetByType("date").options
-      );
-      tableColumns.forEach((t) => {
-        let columnOption;
-        let widget;
-        let columnWidgetConfig = this.getColumnWidgetConfig(t);
-        let { columnSelectedWidget, columnEditFields } = columnWidgetConfig;
-        if (columnSelectedWidget) {
-          widget = columnSelectedWidget;
-          columnOption = widget.options;
-        } else {
-          columnOption = {};
-        }
-
-        let col = {
-          fixed: !!t.fixed && t.fixed,
-          field: t.prop,
-          title: t.label,
-          witdh: t.width,
-          sortable: t.sortable,
-          align: t.align ? t.align : "center",
-          formatter: this.formatterValue,
-          isMainFiled: mainFiled == t.prop,
-          showForRow: t.showForRow,
-          params: {
-            ...columnOption,
-            widget: widget,
-            formatS: t.formatS,
-            required: t.required || false,
-            columnConfig: t,
-            utcTransformEnabled: widget
-              ? !!columnOption.utcTransformEnabled
-              : !t.formatS ||
-                  [
-                    "d1",
-                    "d2",
-                    "d3",
-                    "d4",
-                    "d5",
-                    "render",
-                    "create_date",
-                    "modify_date",
-                  ].includes(t.formatS)
-                ? !!t.utcTransformEnabled
-                : false,
-          },
-          visible: t.show,
-        };
-
-        if (t.formatS == "render") {
-          let r = t.render ? new Function("params", "h", t.render) : null;
-          col.slots = {
-            default: (params, h) => {
-              return r ? r.call(this, params, h) : "";
-            },
-          };
-        } else if (columnSelectedWidget) {
-          col.slots = {
-            default: "widget",
-          };
-        } else if (["editDelete", "editButton"].includes(t.formatS)) {
-          col.slots = {
-            default: t.formatS,
-          };
-        }
-
-        newColumns.push(col);
-      });
-
-      /*if (baseRefUtil.tableConfig && baseRefUtil.tableConfig.className == "list-table") {
-        if (tableColumns.length) {
-          let tableColumn = [tableColumns.length - 1];
-          if (tableColumn.fixed != "right") {
-            newColumns.push({
-              width: 47,
-              title: '',
-              fixed: 'right',
-              sortable: false,
-            });
-          }
-        }
-      }*/
-      return newColumns;
-    },
-    formModel: {
-      cache: !1,
-      get: function () {
-        return this.globalModel.formModel;
-      },
-    },
-    formDataId() {
-      let formRef = this.getFormRef();
-      return formRef.dataId;
-    },
-  },
-  created: function () {
-    if (!this.formModel[this.fieldKeyName])
-      this.formModel[this.fieldKeyName] = [];
-    this.initRefList();
-    this.handleOnCreated();
-  },
-  mounted: async function () {
-    this.handleOnMounted();
-    this.initTableList();
-  },
-  beforeDestroy: function () {
-    this.unregisterFromRefList();
-  },
-  methods: {
-    openAdvancedSearchDialog() {
-      /*let formData = this.formModel;
-      let advancedFormData = {};
-      this.vxeOption.searchColumns.forEach(form1Field => {
-          let value = formData[form1Field.field];
-          if (value !== null && value !== undefined) {
-            advancedFormData[form1Field.field] = value
-          } else {
-            advancedFormData[form1Field.field] = null
-          }
-      });
-      this.advancedFormData = advancedFormData;*/
-      this.showAdvancedSearch = true;
-    },
-    confirmAdvancedSearchDialog() {
-      let formModel = this.formModel;
-      let advancedFormData = this.advancedFormData;
-      this.vxeOption.searchColumns.forEach((form1Field) => {
-        let value = formModel[form1Field.field];
-        if (value !== null && value !== undefined) {
-          advancedFormData[form1Field.field] = value;
-        } else {
-          advancedFormData[form1Field.field] = null;
-        }
-      });
-      this.searchEvent();
-    },
-    advancedClear() {
-      this.vxeOption.searchColumns.forEach((form1Field) => {
-        let widgetRef = this.getWidgetRef(form1Field.widget.options.name);
-        if (widgetRef && widgetRef.setValue) widgetRef.setValue(null);
-      });
-    },
-    setValue(val) {
-      let rows = val || [];
-      this.formModel[this.fieldKeyName] = rows;
-      this.fieldModel = rows;
-    },
-    getValue() {
-      return this.formModel[this.fieldKeyName];
-    },
-    getFieldKeyName(widget) {
-      let o = widget.options.name;
-      return (widget.options.keyNameEnabled && widget.options.keyName) || o;
-    },
-    formatterValue: function ({ cellValue, row, column }) {
-      if (cellValue === null || cellValue === undefined) return cellValue;
-      if (!column.params) return cellValue;
-
-      let value = cellValue;
-      const formatS = column.params.formatS;
-      const dateFormats = [
-        "d1",
-        "d2",
-        "d3",
-        "d4",
-        "d5",
-        "render",
-        "create_date",
-        "modify_date",
-      ];
-      const isColumnLevelUtc =
-        !formatS || dateFormats.includes(formatS);
-      const utcTransformEnabled = isColumnLevelUtc
-        ? !!(
-            column.params.utcTransformEnabled ||
-            column.params.columnConfig?.utcTransformEnabled
-          )
-        : false;
-
-      if (utcTransformEnabled && value != null && value !== "") {
-        value = this.$utcToLocal(value);
-      }
-
-      if (!formatS) {
-        return value;
-      }
-
-      switch (formatS) {
-        case "d1":
-          return baseRefUtil.formatUtil.formatDate1(value);
-        case "d2":
-          return baseRefUtil.formatUtil.formatDate2(value);
-        case "d3":
-          return baseRefUtil.formatUtil.formatDate3(value);
-        case "d4":
-          return baseRefUtil.formatUtil.formatDate4(value);
-        case "d5":
-          return baseRefUtil.formatUtil.formatDate4(value);
-        case "n1":
-          return baseRefUtil.formatUtil.formatNumber1(value);
-        case "n2":
-          return baseRefUtil.formatUtil.formatNumber2(value);
-        case "n3":
-          return baseRefUtil.formatUtil.formatNumber3(value);
-        case "n4":
-          return baseRefUtil.formatUtil.formatNumber4(value);
-        case "n5":
-          return baseRefUtil.formatUtil.formatNumber5(value);
-        case "n6":
-          return baseRefUtil.formatUtil.formatNumber6(value);
-        case "n7":
-          return baseRefUtil.formatUtil.formatNumber7(value);
-      }
-      return value;
-    },
-    searchEvent() {
-      // this.getGridTable().commitProxy('reload');
-      this.loadAccessData();
-    },
-    async resetEvent() {
-      let formData = this.formModel;
-      this.keyword = null;
-      this.widget.widgetList &&
-        this.widget.widgetList.forEach((subWidget) => {
-          let widgetRef = this.getWidgetRef(subWidget.options.name);
-          let fieldKeyName = this.getFieldKeyName(subWidget);
-          formData[fieldKeyName] = null;
-          this.advancedFormData[fieldKeyName] = null;
-          if (widgetRef && widgetRef.setValue) widgetRef.setValue(null);
-        });
-      // this.getGridTable().commitProxy('reload');
-      this.loadAccessData();
-    },
-    openEditDialog(row) {
-      let formRef = this.getFormRef();
-      let parentTarget = formRef.$attrs["parent-target"];
-      parentTarget &&
-        parentTarget.$attrs.openEditDialog &&
-        parentTarget.$attrs.openEditDialog(row);
-    },
-    initTableList() {
-      let that = this;
-      let path = null;
-      let paramFun = null;
-      let tableRef = this.getTableRef();
-      let isQueryTable = this.widget.options.isQueryTable || false;
-      let isDataPage = this.widget.options.accessReturnType === "2";
-      let isQueryAllPage = !this.widget.options.isNotQueryAllPage;
-      let searchColumns = null;
-      if (isQueryTable) {
-        path = "#";
-        paramFun = () => {
-          let conditions = this.getSearchCondition();
-          if (this.widget.options.showPagination) {
-            let searchCount = true;
-            if (isQueryAllPage === false) {
-              searchCount = false;
-            }
-            conditions.current = this.page.current;
-            conditions.size = this.page.size;
-            conditions.searchCount = searchCount;
-          }
-          return conditions;
-        };
-
-        searchColumns = [];
-        let widgetList = this.widget.widgetList;
-        let typeMap = {
-          input: "input",
-          number: "number",
-          inputBatch: "inputBatch",
-          date: "date",
-        };
-
-        widgetList.forEach((widget) => {
-          if ("container" !== widget.category) {
-            let options = widget.options;
-            let type = typeMap[widget.type] || null;
-            searchColumns.push({
-              title: options.label,
-              field: this.getFieldKeyName(widget),
-              type: type,
-              common: true,
-              disabled: options.disabled,
-              defaultValueEnabled: !!type,
-              slot: options.name,
-              widget: widget,
-              formItem: false,
-            });
-          }
-        });
-      }
-
-      let formRef = this.getFormRef();
-      let dataTableConfig = formRef.$attrs.dataTableOption || {};
-      this.dataTableConfig = dataTableConfig;
-
-      let tableOption = {
-        vue: this,
-        tableRef: tableRef,
-        tableName: this.widget.options.name,
-        param: paramFun,
-        columns: this.columns,
-        searchColumns: searchColumns,
-        vform: true,
-        config: {
-          height: isQueryTable ? "550px" : this.widget.options.tableHeight,
-          /*pagerConfig: {
-            autoHidden: !this.widget.options.showPagination
-          },*/
-          ...dataTableConfig.config,
-        },
-        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,
-          });
-        },
-      };
-
-      if (isQueryTable) {
-        tableOption.path = path;
-        tableOption.config.proxyConfig = {
-          props: {
-            result: isDataPage ? "objx.records" : "objx", // 配置响应结果列表字段
-            total: isDataPage ? "objx.total" : "objx.length", // 配置响应结果总页数字段
-          },
-          ajax: {
-            // 接收 Promise 对象
-            query: ({ page, sorts, filters, form, param }) => {
-              let scriptCode = this.getScriptCode();
-              let formData = tableOption.param ? tableOption.param() || {} : {};
-              const queryParams = Object.assign({}, formData);
-
-              if (filters) {
-                filters.forEach(({ property, values }) => {
-                  queryParams[property] = values.join(",");
-                });
-              }
-
-              if (page.pageSize !== undefined) {
-                queryParams.size = page.pageSize;
-                queryParams.current = page.currentPage;
-              }
-
-              queryParams.searchCount = isQueryAllPage !== false;
-              Object.assign(queryParams, param);
-
-              // 与 PC 链路同规则：condition 追加合并，其余键平铺覆盖
-              if (that.dataTableConfig.queryParam) {
-                mergeQueryParam(queryParams, that.dataTableConfig.queryParam);
-              }
-
-              return new Promise((resolve, reject) => {
-                let reqData = {
-                  ...queryParams,
-                };
-                if (scriptCode) {
-                  let done = (res) => {
-                    resolve(res);
-                    if (res.type === "success") {
-                      let rows = res.objx
-                        ? res.objx.records || res.objx || []
-                        : [];
-                      this.setValue(rows);
-                      if (res.objx && res.objx.records !== undefined) {
-                        this.page = {
-                          current: res.objx.current ?? this.page.current,
-                          size: res.objx.size ?? this.page.size,
-                          total: res.objx.total ?? 0,
-                          records: rows,
-                        };
-                      }
-                      that.$nextTick(() => {
-                        setTimeout(function () {
-                          dataTableConfig.callback &&
-                            dataTableConfig.callback(rows);
-                          tableOption.callback && tableOption.callback(rows);
-                          that.handleCustomEvent(
-                            that.widget.options.formScriptCallback,
-                            ["rows"],
-                            [rows]
-                          );
-                        }, 0);
-                      });
-                    } else {
-                      this.page = {
-                        current: 1,
-                        size: this.pageSize,
-                        total: 0,
-                        records: [],
-                      };
-                      this.setValue([]);
-                    }
-                  };
-                  this.loadDefaultQueryList(reqData, done).catch((error) => {
-                    reject(error);
-                  });
-                } else {
-                  resolve();
-                }
-              });
-            },
-          },
-        };
-        tableOption.callback = (rows) => {
-          // this.fieldModel = rows;
-          this.formModel[this.fieldKeyName] = rows;
-        };
-      }
-      this.vxeOption = tableOption;
-      this.loadAccessData();
-
-      /*this.$vxeTableUtil.initVxeTable(tableOption).then(opts => {
-        this.vxeOption = opts;
-        /!*if (!isQueryTable) {
-          this.$nextTick(() => {
-            this.loadAccessData();
-          });
-        }*!/
-      });
-      if (!isQueryTable) {
-        this.loadAccessData();
-      }*/
-    },
-    getTableCondition() {
-      if (this.widget.options.tableCondition) {
-        let e = new Function(this.widget.options.tableCondition);
-        return e.call(this);
-      }
-    },
-    getSearchCondition() {
-      // let extraAccessData = this.extraAccessData || {};
-      let searchFormData = this.getSearchFormData();
-      let conditions = {
-        // ...this.getTableCondition(),
-        ...searchFormData,
-        // ...this.advancedFormData,
-        // ...extraAccessData,
-      };
-      if (this.keyword) {
-        conditions.keyword = this.keyword;
-      }
-      return conditions;
-    },
-    getSearchFormData() {
-      let map = { condition: [] };
-      let formData = this.globalModel.formModel;
-      let widgetList = this.widget.widgetList;
-      if (!!widgetList && widgetList.length > 0) {
-        let loop = (wItem) => {
-          if (wItem.category === "container") {
-            loop(wItem);
-          } else {
-            let formField = this.getFieldKeyName(wItem);
-            let vaule = formData[formField];
-            if (vaule !== null && vaule !== undefined && vaule !== "") {
-              if (!Array.isArray(vaule) || vaule.length > 0) {
-                let item = {
-                  value: vaule,
-                  field: formField,
-                  filter: null,
-                };
-                let wType = wItem.type;
-                if (["date-range", "time-range"].includes(wType)) {
-                  item.filter = "between";
-                } else if (
-                  ["input-batch", "checkbox"].includes(wType) ||
-                  (wType === "select" && wItem.options.multiple)
-                ) {
-                  item.filter = "in";
-                } else if (
-                  ["radio", "time", "date"].includes(wType) ||
-                  (wType === "select" && !wItem.options.multiple)
-                ) {
-                  item.filter = "eq";
-                } else {
-                  item.filter = "like";
-                }
-                map.condition.push(item);
-              }
-            }
-          }
-        };
-        widgetList.forEach((wItem) => {
-          loop(wItem);
-        });
-      }
-      return map;
-    },
-    loadTableData(param) {
-      if (this.dataTableConfig?.queryFormDialog !== true) {
-        this.checkItemIds = [];
-      }
-      param = param || {};
-      let pageSize = param.size || this.pageSize;
-      let currentPage = param.current || 1;
-      let page = { pageSize, currentPage };
-      return this.vxeOption.config.proxyConfig.ajax.query.call(this, {
-        page,
-        param,
-      });
-    },
-    loadAccessData() {
-      let isQueryTable = this.widget.options.isQueryTable || false;
-      if (isQueryTable) {
-        this.loadTableData({});
-        return;
-      }
-      if (!isQueryTable && !this.formDataId) return;
-
-      let scriptCode = this.getScriptCode();
-      if (scriptCode) {
-        this.loadDefaultViewList();
-      }
-    },
-    getAccessParam() {
-      if (!this.widget.options.formScriptParam) return;
-      return this.handleCustomEvent(this.widget.options.formScriptParam);
-    },
-    getScriptCode() {
-      let accessReturnType = this.widget.options.accessReturnType;
-      let defaultScriptCode = "getList";
-      if (accessReturnType === "1") {
-        defaultScriptCode = "getList";
-      } else if (accessReturnType === "2") {
-        defaultScriptCode = "getPage";
-      }
-      return this.widget.options.formScriptCode || defaultScriptCode;
-    },
-    getAttachmentType() {
-      let result = [];
-      let tableColumns = this.widget.options.tableColumns || [];
-      tableColumns.forEach((item) => {
-        if (item.prop && item.label && item.formatS === "editAttachment") {
-          result.push(item.prop);
-        }
-      });
-      return result;
-    },
-    getHttpConfigForUser() {
-      return {
-        addCreateInfo: true,
-        queryCreateInfo: window.$vueRoot.$store.getters.queryCreateInfo || "0",
-      };
-    },
-    /**
-     * 构造表单脚本请求的 data 参数（通用）。
-     * 勾选"请求去掉data层"(removeDataLevel)时，内层参数平铺到外层，不再包一层 data。
-     */
-    buildFormScriptData(reportTemplate, innerData, taBm) {
-      let base = {
-        formCode: reportTemplate.formCode,
-        formVersion: reportTemplate.formVersion,
-        taBm: taBm || this.fieldKeyName,
-      };
-      return this.widget.options.removeDataLevel
-        ? { ...base, ...(innerData || {}) }
-        : { ...base, data: innerData || {} };
-    },
-    loadDefaultQueryList(reqData, done) {
-      let reportTemplate = this.getFormRef().reportTemplate;
-      let scriptCode = this.getScriptCode();
-      let accessParam = this.getAccessParam() || {};
-      let otherParam = {};
-      let attachmentType = this.getAttachmentType();
-      if (attachmentType.length) {
-        otherParam.attachmentType = attachmentType;
-      }
-      let defaultOption = this.getHttpConfigForUser();
-      let requestData = {
-        ...reqData,
-        ...otherParam,
-      };
-      requestData = extendDeeply(requestData, accessParam);
-      return this.formHttp({
-        scriptCode: scriptCode,
-        data: this.buildFormScriptData(reportTemplate, requestData),
-        isLoading: false,
-        ...defaultOption,
-        callback: (res) => {
-          done(res);
-        },
-      });
-    },
-    loadDefaultViewList() {
-      let dataId = this.formDataId;
-      let reportTemplate = this.getFormRef().reportTemplate;
-      let accessParam = this.getAccessParam() || {};
-      let otherParam = {};
-      let attachmentType = this.getAttachmentType();
-      if (attachmentType.length) {
-        otherParam.attachmentType = attachmentType;
-      }
-      let scriptCode = this.getScriptCode();
-      return this.formHttp({
-        scriptCode: scriptCode,
-        data: this.buildFormScriptData(reportTemplate, {
-          id: dataId,
-          ...otherParam,
-          ...accessParam,
-        }),
-        callback: (res) => {
-          let rows = res.objx ? res.objx.records || res.objx || [] : [];
-          this.setValue(rows);
-          this.handleCustomEvent(
-            this.widget.options.formScriptCallback,
-            ["rows"],
-            [rows]
-          );
-        },
-      });
-    },
-    getReqParam(item, dataId, billData) {
-      let param = {};
-      if (item.accessParam) {
-        if (typeof item.accessParam === "string") {
-          let n = new Function("billData", item.accessParam);
-          param = n.call(this, billData);
-        } else {
-          param = item.accessParam;
-        }
-      } else {
-        param = { id: dataId };
-      }
-      return param;
-    },
-    async deleteRow(row, rowIndex) {
-      this.fieldModel.splice(rowIndex, 1);
-    },
-    createNewTableData() {
-      let vailColumns = this.widget.options.tableColumns.filter(
-        (item) => item.prop && item.label
-      );
-      let newData = {};
-      vailColumns.forEach((item) => {
-        if (item.formatS == "editSearch") {
-          newData[item.prop] = null;
-          let vabSearchName = item?.columnOption?.vabSearchName;
-          if (vabSearchName) newData[vabSearchName] = null;
-        } else {
-          newData[item.prop] = null;
-        }
-      });
-      return newData;
-    },
-    addTableData(rows, field) {
-      let formDataModel = this.formModel;
-      let tableRows = this.fieldModel;
-      let fullData = this.fieldModel;
-      let items;
-      if (field) {
-        let keys = fullData.map((item) => {
-          return item[field] + "";
-        });
-        items = rows.filter((item) => {
-          let value = item[field] + "";
-          return !keys.includes(value);
-        });
-      } else {
-        items = rows;
-      }
-      if (items) {
-        if (items.length) {
-          items.forEach((row) => {
-            let newData = this.createNewTableData();
-            Object.assign(newData, row);
-
-            tableRows.push(newData);
-          });
-        }
-      } else {
-        let newData = this.createNewTableData();
-        tableRows.push(newData);
-      }
-      // this.formModel[this.fieldKeyName] = this.$baseLodash(this.fieldModel)
-      // this.fieldModel = tableRows
-      // $grid.loadData(tableRows);
-    },
-    getColumnWidgetConfig(row) {
-      let formRef = this.getFormRef();
-      let formatS = row.formatS;
-      let columnSelectedWidget = null;
-      let columnEditFields = null;
-
-      let type = this.columnFormatMap[row.formatS];
-
-      if (type) {
-        columnSelectedWidget = this.$baseLodash.cloneDeep(
-          formRef.getFieldWidgetByType(type)
-        );
-        let tmpId = generateId();
-        let idVal = row.prop ? row.prop : type + tmpId;
-        columnSelectedWidget.id = idVal;
-        columnSelectedWidget.options.name = idVal;
-        if (row.columnOption && Object.keys(row.columnOption).length) {
-          row.columnOption.required = row.required || false;
-          columnSelectedWidget.options = row.columnOption;
-        } else {
-          columnSelectedWidget.options.required = row.required || false;
-          row.columnOption = columnSelectedWidget.options;
-        }
-        columnSelectedWidget.options.name = row.prop;
-        columnSelectedWidget.options.label = row.label;
-        columnSelectedWidget.options.labelHidden = true;
-      }
-      return { columnSelectedWidget, columnEditFields };
-    },
-    getColumnProp(widget, obj) {
-      let isQueryTable = this.widget.options.isQueryTable || false;
-      if (isQueryTable) {
-        return "false";
-      } else {
-        let propName =
-          this.getFieldKeyName(widget) +
-          "." +
-          obj.rowIndex +
-          "." +
-          obj.column.field;
-        if (
-          this.isVabsearchFlagWidget(widget) &&
-          !isVabsearchMultiWidget(widget)
-        ) {
-          let vabSearchName = obj.column.params.widget.options.vabSearchName;
-          propName =
-            this.getFieldKeyName(widget) +
-            "." +
-            obj.rowIndex +
-            "." +
-            vabSearchName;
-        }
-        return propName;
-      }
-    },
-    isVabsearchFlagWidget(widget) {
-      let type = widget?.type;
-      return (
-        type === "vabsearch" ||
-        type === "singerSearch" ||
-        type === "multiSearch"
-      );
-    },
-    getColumnWidgetName(e) {
-      if (e && e.type) {
-        return e.type + "-widget";
-      }
-    },
-    getGridTable() {
-      let $grid = this.$refs[this.getTableRef()];
-      return $grid;
-    },
-    getTableRef() {
-      let tableRef = this.widget.id;
-      return tableRef;
-    },
-    getUrl() {
-      let accessUrl = this.widget.options.accessUrl;
-      return accessUrl || USER_PREFIX + `/form_ins/getFormInsData`;
-    },
-    openRowDetailDialog(row) {
-      /*let isQueryTable = this.widget.options.isQueryTable || false;
-      if(isQueryTable)return;*/
-      this.editRow = row;
-      this.showRowDetailDialog = true;
-    },
-    changePageNew({ type, currentPage, pageSize, $event }) {
-      this.loadTableData({
-        size: pageSize + "",
-        current: currentPage + "",
-      });
-    },
-    /** 导出前按脱敏规则剔除列，实现见 textMaskUtil.markMaskedExportColumns。 */
-    markMaskedColumnsForExport() {
-      markMaskedExportColumns(
-        this.getGridTable(),
-        buildTextMaskContext(this.getFormRef(), this.$store.getters.companyCode)
-      );
-    },
-    exportData(option) {
-      this.markMaskedColumnsForExport();
-      let tableRef = this.getTableRef();
-      let serverName = this.getFormRef().reportTemplate.serverName;
-      option.prefix = option.prefix || serverName;
-      this.$excelExport({ targetRef: tableRef, ...option });
-    },
-    itemCheck(row) {
-      let dataTableConfig = this.dataTableConfig;
-      if (dataTableConfig) {
-        let checkItemIds = this.checkItemIds;
-        let checked;
-        if (checkItemIds.includes(row.id)) {
-          checked = false;
-          checkItemIds.splice(checkItemIds.indexOf(row.id), 1);
-        } else {
-          checked = true;
-          checkItemIds.push(row.id);
-        }
-        let param = { row, checked };
-        dataTableConfig.onCheckboxChange &&
-          dataTableConfig.onCheckboxChange(param);
-      }
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped></style>
+      :append-to-body	="true"
+      :destroy-on-close="true"
+    >
+      <div class="cont" style="height: calc(100vh - 73px)">
+        <div class="h5-list-box">
+          <div
+            v-for="(row, rowIndex) in [editRow]"
+            :key="rowIndex"
+            class="item"
+          >
+            <!--            <div class="del-btn"><i class="el-icon-delete"></i></div>-->
+            <template v-if="vxeOption.columns.length > 0">
+              <div class="t1" v-if="widget.options.isQueryTable">
+                <template
+                  v-for="(column, columnIndex) in vxeOption.columns.filter(
+                    (item, index) => item.isMainFiled
+                  )"
+                >
+                  <b>{{ column.title }}：</b>
+                  <span>
+                    <template v-if="!column.params.formatS">
+                      {{ row[column.field] }}
+                    </template>
+                    <template v-else-if="column.params.formatS == 'render'">
+                      {{
+                        column.slots.default({
+                          column: column,
+                          rowIndex: rowIndex,
+                          row: row,
+                          items: fieldModel,
+                        })
+                      }}
+                    </template>
+                    <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"
+                        :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(obj.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>
+                      {{
+                        column.formatter({
+                          cellValue: row[column.field],
+                          column: column,
+                          rowIndex: rowIndex,
+                          row: row,
+                          items: fieldModel,
+                        })
+                      }}
+                    </template>
+                  </span>
+                  <!--              <div class="status">未审核</div>-->
+                </template>
+              </div>
+              <div class="t2">
+                <template
+                  v-if="
+                    !widget.options.isQueryTable || vxeOption.columns.length > 1
+                  "
+                >
+                  <template v-for="(column, columnIndex) in vxeOption.columns">
+                    <template
+                      v-if="!widget.options.isQueryTable || !column.isMainFiled"
+                    >
+                      <dl>
+                        <div>
+                          <dt>{{ column.title }}：</dt>
+                          <dd>
+                            <template v-if="!column.params.formatS">
+                              {{ row[column.field] }}
+                            </template>
+                            <template
+                              v-else-if="column.params.formatS == 'render'"
+                            >
+                              {{
+                                column.slots.default({
+                                  column: column,
+                                  rowIndex: rowIndex,
+                                  row: row,
+                                  items: fieldModel,
+                                })
+                              }}
+                            </template>
+
+                            <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="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="openEditDialog(obj.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>
+                              {{
+                                column.formatter({
+                                  cellValue: row[column.field],
+                                  column: column,
+                                  rowIndex: rowIndex,
+                                  row: row,
+                                  items: fieldModel,
+                                })
+                              }}
+                            </template>
+                          </dd>
+                        </div>
+                      </dl>
+                    </template>
+                  </template>
+                </template>
+              </div>
+              <!-- 明细详情弹框里不摆行操作按钮区：行按钮(lineButtons)属于列表行的
+                   操作，详情里用不上；容器本身带 border-top 和 padding，即使按钮被
+                   wf 联动隐藏了也会留下一条空白横条。关闭走右上角的 X。 -->
+            </template>
+
+            <!--        <div class="t1">
+                      <b>订单号：21533666</b>
+                      <div class="status">未审核</div>
+                    </div>
+                    <div class="t2">
+                      <p>产地：广东佛山</p>
+                      <p>产地：广东佛山</p>
+                      <p>产地：广东佛山</p>
+                    </div>-->
+          </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>
+
+<script>
+import emitter from "../../../../components/xform/utils/emitter";
+import i18n from "../../../../components/xform/utils/i18n";
+import refMixin from "../../../../components/xform/form-render/refMixin";
+import containerItemMixin from "./containerItemMixin";
+import FieldComponents from "../../../../components/xform/form-designer/form-widget/field-widget/index";
+import {
+  assembleAxiosConfig,
+  generateId,
+  getReportGlobalMap,
+  isVabsearchMultiWidget,
+} from "../../../../components/xform/utils/util";
+import * as formatUtil from "../../../../components/xform/utils/format";
+import {
+  buildTextMaskContext,
+  markMaskedExportColumns,
+} 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";
+
+const baseRefUtil = {
+  emitter,
+  i18n,
+  refMixin,
+  containerItemMixin,
+  formatUtil,
+  assembleAxiosConfig,
+  getReportGlobalMap,
+};
+
+const defaultPageSize = 2;
+
+/* H5 详情里挂的明细列表，折叠态露出的行数。
+   写死而不做成表单选项：与 detail-h5-item 的 H5_BOTTOM_MAX_BUTTONS 同理 ——
+   做成 options 后，已保存的表单会锁住旧值，改原型默认值不生效，反成绊脚石。 */
+const H5_LIST_COLLAPSE_SIZE = 5;
+export default {
+  name: "list-h5-item",
+  components: {
+    ...FieldComponents,
+  },
+  mixins: [emitter, i18n, refMixin, containerItemMixin],
+  componentName: "ContainerItem",
+  props: {
+    widget: Object,
+    parentWidget: Object,
+    parentList: Array,
+    indexOfParentList: Number,
+    subFormRowIndex: {
+      type: Number,
+      default: -1,
+    },
+    subFormColIndex: {
+      type: Number,
+      default: -1,
+    },
+    subFormRowId: {
+      type: String,
+      default: "",
+    },
+  },
+  inject: [
+    "refList",
+    "sfRefList",
+    "globalModel",
+    "getFormConfig",
+    "getGlobalDsv",
+    "getReadMode",
+  ],
+  data: function () {
+    let that = this;
+    let pageSize = defaultPageSize;
+    return {
+      showAdvancedSearch: false,
+      showRowDetailDialog: false,
+      editRow: {},
+      fieldModel: [],
+      selectedIndices: [],
+      /*pageSize: this.widget.options.pagination.pageSize,
+      pageSizes: this.widget.options.pagination.pageSizes,
+      currentPage: this.widget.options.pagination.currentPage,
+      total: this.widget.options.pagination.total,*/
+      formData: {
+        saleOrgName: "",
+        loginAccount: "",
+        mobile: "",
+        enabled: 1,
+      },
+      vxeOption: { columns: [] },
+      requestAccess: null,
+      columnFormatMap: {
+        editInput: "input",
+        editNumber: "number",
+        editDate: "date",
+        editSelect: "select",
+        editSearch: "vabsearch",
+        button: "button",
+      },
+      dataTableConfig: {},
+      advancedFormData: {},
+
+      pageSize: pageSize,
+      page: {
+        current: 1,
+        size: pageSize,
+        total: 0,
+        records: [],
+      },
+      keyword: null,
+
+      checkItemIds: [],
+      /* 「更多」是否点过。折叠只在详情里挂的明细列表上生效，见 collapsible */
+      showAllRows: false,
+    };
+  },
+  watch: {
+    fieldModel(val) {
+      this.formModel[this.fieldKeyName] = val || [];
+      /* 换了一整批数据（setValue / 重新取数）就退回折叠态。
+         push 追加行不会触发这里，那条路径由 addTableData 自己展开。 */
+      this.showAllRows = false;
+    },
+  },
+  computed: {
+    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"
+        : "total, sizes, prev, pager, next, jumper";
+    },
+    customClass: function () {
+      return this.widget.options.customClass || "";
+    },
+    singleRowSelectFlag: function () {
+      return !this.widget.options.showCheckBox;
+    },
+    buttonsColumnFixed: function () {
+      return void 0 === this.widget.options.buttonsColumnFixed
+        ? "right"
+        : !!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;
+    },
+    /**
+     * 是否走折叠（默认只出 H5_LIST_COLLAPSE_SIZE 条 + 「更多」尾行）。
+     * 两个条件缺一不可，见 isInDetailH5 与下面这条：
+     * 查询选择列表(isQueryTable)是整屏选数据用的、自己带分页器，再截断会跟分页打架。
+     */
+    collapsible() {
+      return !this.widget.options.isQueryTable && this.isInDetailH5();
+    },
+    /**
+     * 尾行（「更多 / 收起」）要不要出：够不着折叠线就不出，够着了就一直在 ——
+     * 展开态也要留着，那是「收起」的入口。
+     */
+    collapseTogglable() {
+      let total = (this.fieldModel || []).length;
+      return this.collapsible && total > H5_LIST_COLLAPSE_SIZE;
+    },
+    /* 折起来没露出的行数，即「更多」后面括号里那个数 */
+    collapsedRest() {
+      if (!this.collapsible || this.showAllRows) return 0;
+      let total = (this.fieldModel || []).length;
+      return total > H5_LIST_COLLAPSE_SIZE ? total - H5_LIST_COLLAPSE_SIZE : 0;
+    },
+    /**
+     * 真正渲染的行。
+     * ★ 只能从头切：rowIndex 在模板里同时当 subFormRowIndex / formItemProp 的下标
+     * （行内控件靠它定位 formModel 里的那一行）和 deleteRow 的下标，从头切时它与
+     * fieldModel 的下标恒等，不必再做一层映射。
+     * 传给格式化函数的 items 仍是整份 fieldModel（模板里没改），那是数据不是视图。
+     */
+    visibleRows() {
+      let rows = this.fieldModel || [];
+      if (this.collapsedRest <= 0) return rows;
+      return rows.slice(0, H5_LIST_COLLAPSE_SIZE);
+    },
+    columns() {
+      let tableColumns = this.widget.options.tableColumns;
+      let newColumns = [];
+      /*newColumns.push({
+        type: 'checkbox',
+        width: 48,
+        resizable: false,
+        fixed: 'left'
+      });*/
+
+      let firstColumn = tableColumns.find((column) => {
+        return !!column.prop && !!column.showForRow;
+      });
+      let mainFiled = firstColumn?.prop;
+
+      let formRef = this.getFormRef();
+      let dateConfig = this.$baseLodash.cloneDeep(
+        formRef.getFieldWidgetByType("date").options
+      );
+      tableColumns.forEach((t) => {
+        let columnOption;
+        let widget;
+        let columnWidgetConfig = this.getColumnWidgetConfig(t);
+        let { columnSelectedWidget, columnEditFields } = columnWidgetConfig;
+        if (columnSelectedWidget) {
+          widget = columnSelectedWidget;
+          columnOption = widget.options;
+        } else {
+          columnOption = {};
+        }
+
+        let col = {
+          fixed: !!t.fixed && t.fixed,
+          field: t.prop,
+          title: t.label,
+          // 原来这里还有一个 `witdh: t.width` —— 键名拼错(w-i-t-d-h)、全库无人读取，
+          // 且 H5 卡片是 dl/dt/dd 排版本来就不吃列宽。列配置里的「列宽」已一并去掉。
+          sortable: t.sortable,
+          align: t.align ? t.align : "center",
+          formatter: this.formatterValue,
+          isMainFiled: mainFiled == t.prop,
+          showForRow: t.showForRow,
+          params: {
+            ...columnOption,
+            widget: widget,
+            formatS: t.formatS,
+            required: t.required || false,
+            columnConfig: t,
+            utcTransformEnabled: widget
+              ? !!columnOption.utcTransformEnabled
+              : !t.formatS ||
+                  [
+                    "d1",
+                    "d2",
+                    "d3",
+                    "d4",
+                    "d5",
+                    "render",
+                    "create_date",
+                    "modify_date",
+                  ].includes(t.formatS)
+                ? !!t.utcTransformEnabled
+                : false,
+          },
+          visible: t.show,
+        };
+
+        if (t.formatS == "render") {
+          let r = t.render ? new Function("params", "h", t.render) : null;
+          col.slots = {
+            default: (params, h) => {
+              return r ? r.call(this, params, h) : "";
+            },
+          };
+        } else if (columnSelectedWidget) {
+          col.slots = {
+            default: "widget",
+          };
+        } else if (["editDelete", "editButton"].includes(t.formatS)) {
+          col.slots = {
+            default: t.formatS,
+          };
+        }
+
+        newColumns.push(col);
+      });
+
+      /*if (baseRefUtil.tableConfig && baseRefUtil.tableConfig.className == "list-table") {
+        if (tableColumns.length) {
+          let tableColumn = [tableColumns.length - 1];
+          if (tableColumn.fixed != "right") {
+            newColumns.push({
+              width: 47,
+              title: '',
+              fixed: 'right',
+              sortable: false,
+            });
+          }
+        }
+      }*/
+      return newColumns;
+    },
+    formModel: {
+      cache: !1,
+      get: function () {
+        return this.globalModel.formModel;
+      },
+    },
+    formDataId() {
+      let formRef = this.getFormRef();
+      return formRef.dataId;
+    },
+  },
+  created: function () {
+    if (!this.formModel[this.fieldKeyName])
+      this.formModel[this.fieldKeyName] = [];
+    this.initRefList();
+    this.handleOnCreated();
+  },
+  mounted: async function () {
+    this.handleOnMounted();
+    this.initTableList();
+  },
+  beforeDestroy: function () {
+    this.unregisterFromRefList();
+  },
+  methods: {
+    /**
+     * 是否挂在 H5 详情容器里 —— 折叠只对这种场景生效：list-h5 也能当整屏列表用，
+     * 整屏的不该只出 5 条。
+     *
+     * 沿父链找 detail-h5-item，中间隔着 transition-group / 卡片容器都无所谓；
+     * 遇到弹框/抽屉容器就停 —— 弹框里那份是独立的一屏，不算详情里挂的明细。
+     * 结果缓存在非响应式实例属性上：父链在实例生命周期内不变，而 collapsible
+     * 是渲染期求值的 computed，不能每次都走一遍链。
+     */
+    isInDetailH5() {
+      if (this._inDetailH5 === undefined) {
+        this._inDetailH5 = false;
+        let vm = this.$parent;
+        while (vm) {
+          let name = vm.$options.name;
+          if (name === "vf-dialog-item" || name === "vf-drawer-item") break;
+          if (name === "detail-h5-item") {
+            this._inDetailH5 = true;
+            break;
+          }
+          vm = vm.$parent;
+        }
+      }
+      return this._inDetailH5;
+    },
+    /* 尾行的开关：「更多」展开全部、「收起」折回前 H5_LIST_COLLAPSE_SIZE 条。
+       折回时不动任何数据，只切视图 —— 行下标始终是 fieldModel 的下标（见 visibleRows）。
+       重新取数时 watch 会自动退回折叠态。 */
+    toggleAllRows() {
+      this.showAllRows = !this.showAllRows;
+    },
+    openAdvancedSearchDialog() {
+      /*let formData = this.formModel;
+      let advancedFormData = {};
+      this.vxeOption.searchColumns.forEach(form1Field => {
+          let value = formData[form1Field.field];
+          if (value !== null && value !== undefined) {
+            advancedFormData[form1Field.field] = value
+          } else {
+            advancedFormData[form1Field.field] = null
+          }
+      });
+      this.advancedFormData = advancedFormData;*/
+      this.showAdvancedSearch = true;
+    },
+    confirmAdvancedSearchDialog() {
+      let formModel = this.formModel;
+      let advancedFormData = this.advancedFormData;
+      this.vxeOption.searchColumns.forEach((form1Field) => {
+        let value = formModel[form1Field.field];
+        if (value !== null && value !== undefined) {
+          advancedFormData[form1Field.field] = value;
+        } else {
+          advancedFormData[form1Field.field] = null;
+        }
+      });
+      this.searchEvent();
+    },
+    advancedClear() {
+      this.vxeOption.searchColumns.forEach((form1Field) => {
+        let widgetRef = this.getWidgetRef(form1Field.widget.options.name);
+        if (widgetRef && widgetRef.setValue) widgetRef.setValue(null);
+      });
+    },
+    setValue(val) {
+      let rows = val || [];
+      this.formModel[this.fieldKeyName] = rows;
+      this.fieldModel = rows;
+    },
+    getValue() {
+      return this.formModel[this.fieldKeyName];
+    },
+    getFieldKeyName(widget) {
+      let o = widget.options.name;
+      return (widget.options.keyNameEnabled && widget.options.keyName) || o;
+    },
+    formatterValue: function ({ cellValue, row, column }) {
+      if (cellValue === null || cellValue === undefined) return cellValue;
+      if (!column.params) return cellValue;
+
+      let value = cellValue;
+      const formatS = column.params.formatS;
+      const dateFormats = [
+        "d1",
+        "d2",
+        "d3",
+        "d4",
+        "d5",
+        "render",
+        "create_date",
+        "modify_date",
+      ];
+      const isColumnLevelUtc =
+        !formatS || dateFormats.includes(formatS);
+      const utcTransformEnabled = isColumnLevelUtc
+        ? !!(
+            column.params.utcTransformEnabled ||
+            column.params.columnConfig?.utcTransformEnabled
+          )
+        : false;
+
+      if (utcTransformEnabled && value != null && value !== "") {
+        value = this.$utcToLocal(value);
+      }
+
+      if (!formatS) {
+        return value;
+      }
+
+      switch (formatS) {
+        case "d1":
+          return baseRefUtil.formatUtil.formatDate1(value);
+        case "d2":
+          return baseRefUtil.formatUtil.formatDate2(value);
+        case "d3":
+          return baseRefUtil.formatUtil.formatDate3(value);
+        case "d4":
+          return baseRefUtil.formatUtil.formatDate4(value);
+        case "d5":
+          return baseRefUtil.formatUtil.formatDate4(value);
+        case "n1":
+          return baseRefUtil.formatUtil.formatNumber1(value);
+        case "n2":
+          return baseRefUtil.formatUtil.formatNumber2(value);
+        case "n3":
+          return baseRefUtil.formatUtil.formatNumber3(value);
+        case "n4":
+          return baseRefUtil.formatUtil.formatNumber4(value);
+        case "n5":
+          return baseRefUtil.formatUtil.formatNumber5(value);
+        case "n6":
+          return baseRefUtil.formatUtil.formatNumber6(value);
+        case "n7":
+          return baseRefUtil.formatUtil.formatNumber7(value);
+      }
+      return value;
+    },
+    searchEvent() {
+      // this.getGridTable().commitProxy('reload');
+      this.loadAccessData();
+    },
+    async resetEvent() {
+      let formData = this.formModel;
+      this.keyword = null;
+      this.widget.widgetList &&
+        this.widget.widgetList.forEach((subWidget) => {
+          let widgetRef = this.getWidgetRef(subWidget.options.name);
+          let fieldKeyName = this.getFieldKeyName(subWidget);
+          formData[fieldKeyName] = null;
+          this.advancedFormData[fieldKeyName] = null;
+          if (widgetRef && widgetRef.setValue) widgetRef.setValue(null);
+        });
+      // this.getGridTable().commitProxy('reload');
+      this.loadAccessData();
+    },
+    openEditDialog(row) {
+      let formRef = this.getFormRef();
+      let parentTarget = formRef.$attrs["parent-target"];
+      parentTarget &&
+        parentTarget.$attrs.openEditDialog &&
+        parentTarget.$attrs.openEditDialog(row);
+    },
+    initTableList() {
+      let that = this;
+      let path = null;
+      let paramFun = null;
+      let tableRef = this.getTableRef();
+      let isQueryTable = this.widget.options.isQueryTable || false;
+      let isDataPage = this.widget.options.accessReturnType === "2";
+      let isQueryAllPage = !this.widget.options.isNotQueryAllPage;
+      let searchColumns = null;
+      if (isQueryTable) {
+        path = "#";
+        paramFun = () => {
+          let conditions = this.getSearchCondition();
+          if (this.widget.options.showPagination) {
+            let searchCount = true;
+            if (isQueryAllPage === false) {
+              searchCount = false;
+            }
+            conditions.current = this.page.current;
+            conditions.size = this.page.size;
+            conditions.searchCount = searchCount;
+          }
+          return conditions;
+        };
+
+        searchColumns = [];
+        let widgetList = this.widget.widgetList;
+        let typeMap = {
+          input: "input",
+          number: "number",
+          inputBatch: "inputBatch",
+          date: "date",
+        };
+
+        widgetList.forEach((widget) => {
+          if ("container" !== widget.category) {
+            let options = widget.options;
+            let type = typeMap[widget.type] || null;
+            searchColumns.push({
+              title: options.label,
+              field: this.getFieldKeyName(widget),
+              type: type,
+              common: true,
+              disabled: options.disabled,
+              defaultValueEnabled: !!type,
+              slot: options.name,
+              widget: widget,
+              formItem: false,
+            });
+          }
+        });
+      }
+
+      let formRef = this.getFormRef();
+      let dataTableConfig = formRef.$attrs.dataTableOption || {};
+      this.dataTableConfig = dataTableConfig;
+
+      let tableOption = {
+        vue: this,
+        tableRef: tableRef,
+        tableName: this.widget.options.name,
+        param: paramFun,
+        columns: this.columns,
+        searchColumns: searchColumns,
+        vform: true,
+        config: {
+          height: isQueryTable ? "550px" : this.widget.options.tableHeight,
+          /*pagerConfig: {
+            autoHidden: !this.widget.options.showPagination
+          },*/
+          ...dataTableConfig.config,
+        },
+        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,
+          });
+        },
+      };
+
+      if (isQueryTable) {
+        tableOption.path = path;
+        tableOption.config.proxyConfig = {
+          props: {
+            result: isDataPage ? "objx.records" : "objx", // 配置响应结果列表字段
+            total: isDataPage ? "objx.total" : "objx.length", // 配置响应结果总页数字段
+          },
+          ajax: {
+            // 接收 Promise 对象
+            query: ({ page, sorts, filters, form, param }) => {
+              let scriptCode = this.getScriptCode();
+              let formData = tableOption.param ? tableOption.param() || {} : {};
+              const queryParams = Object.assign({}, formData);
+
+              if (filters) {
+                filters.forEach(({ property, values }) => {
+                  queryParams[property] = values.join(",");
+                });
+              }
+
+              if (page.pageSize !== undefined) {
+                queryParams.size = page.pageSize;
+                queryParams.current = page.currentPage;
+              }
+
+              queryParams.searchCount = isQueryAllPage !== false;
+              Object.assign(queryParams, param);
+
+              // 与 PC 链路同规则：condition 追加合并，其余键平铺覆盖
+              if (that.dataTableConfig.queryParam) {
+                mergeQueryParam(queryParams, that.dataTableConfig.queryParam);
+              }
+
+              return new Promise((resolve, reject) => {
+                let reqData = {
+                  ...queryParams,
+                };
+                if (scriptCode) {
+                  let done = (res) => {
+                    resolve(res);
+                    if (res.type === "success") {
+                      let rows = res.objx
+                        ? res.objx.records || res.objx || []
+                        : [];
+                      this.setValue(rows);
+                      if (res.objx && res.objx.records !== undefined) {
+                        this.page = {
+                          current: res.objx.current ?? this.page.current,
+                          size: res.objx.size ?? this.page.size,
+                          total: res.objx.total ?? 0,
+                          records: rows,
+                        };
+                      }
+                      that.$nextTick(() => {
+                        setTimeout(function () {
+                          dataTableConfig.callback &&
+                            dataTableConfig.callback(rows);
+                          tableOption.callback && tableOption.callback(rows);
+                          that.handleCustomEvent(
+                            that.widget.options.formScriptCallback,
+                            ["rows"],
+                            [rows]
+                          );
+                        }, 0);
+                      });
+                    } else {
+                      this.page = {
+                        current: 1,
+                        size: this.pageSize,
+                        total: 0,
+                        records: [],
+                      };
+                      this.setValue([]);
+                    }
+                  };
+                  this.loadDefaultQueryList(reqData, done).catch((error) => {
+                    reject(error);
+                  });
+                } else {
+                  resolve();
+                }
+              });
+            },
+          },
+        };
+        tableOption.callback = (rows) => {
+          // this.fieldModel = rows;
+          this.formModel[this.fieldKeyName] = rows;
+        };
+      }
+      this.vxeOption = tableOption;
+      this.loadAccessData();
+
+      /*this.$vxeTableUtil.initVxeTable(tableOption).then(opts => {
+        this.vxeOption = opts;
+        /!*if (!isQueryTable) {
+          this.$nextTick(() => {
+            this.loadAccessData();
+          });
+        }*!/
+      });
+      if (!isQueryTable) {
+        this.loadAccessData();
+      }*/
+    },
+    getTableCondition() {
+      if (this.widget.options.tableCondition) {
+        let e = new Function(this.widget.options.tableCondition);
+        return e.call(this);
+      }
+    },
+    getSearchCondition() {
+      // let extraAccessData = this.extraAccessData || {};
+      let searchFormData = this.getSearchFormData();
+      let conditions = {
+        // ...this.getTableCondition(),
+        ...searchFormData,
+        // ...this.advancedFormData,
+        // ...extraAccessData,
+      };
+      if (this.keyword) {
+        conditions.keyword = this.keyword;
+      }
+      return conditions;
+    },
+    getSearchFormData() {
+      let map = { condition: [] };
+      let formData = this.globalModel.formModel;
+      let widgetList = this.widget.widgetList;
+      if (!!widgetList && widgetList.length > 0) {
+        let loop = (wItem) => {
+          if (wItem.category === "container") {
+            loop(wItem);
+          } else {
+            let formField = this.getFieldKeyName(wItem);
+            let vaule = formData[formField];
+            if (vaule !== null && vaule !== undefined && vaule !== "") {
+              if (!Array.isArray(vaule) || vaule.length > 0) {
+                let item = {
+                  value: vaule,
+                  field: formField,
+                  filter: null,
+                };
+                let wType = wItem.type;
+                if (["date-range", "time-range"].includes(wType)) {
+                  item.filter = "between";
+                } else if (
+                  ["input-batch", "checkbox"].includes(wType) ||
+                  (wType === "select" && wItem.options.multiple)
+                ) {
+                  item.filter = "in";
+                } else if (
+                  ["radio", "time", "date"].includes(wType) ||
+                  (wType === "select" && !wItem.options.multiple)
+                ) {
+                  item.filter = "eq";
+                } else {
+                  item.filter = "like";
+                }
+                map.condition.push(item);
+              }
+            }
+          }
+        };
+        widgetList.forEach((wItem) => {
+          loop(wItem);
+        });
+      }
+      return map;
+    },
+    loadTableData(param) {
+      if (this.dataTableConfig?.queryFormDialog !== true) {
+        this.checkItemIds = [];
+      }
+      param = param || {};
+      let pageSize = param.size || this.pageSize;
+      let currentPage = param.current || 1;
+      let page = { pageSize, currentPage };
+      return this.vxeOption.config.proxyConfig.ajax.query.call(this, {
+        page,
+        param,
+      });
+    },
+    loadAccessData() {
+      let isQueryTable = this.widget.options.isQueryTable || false;
+      if (isQueryTable) {
+        this.loadTableData({});
+        return;
+      }
+      if (!isQueryTable && !this.formDataId) return;
+
+      let scriptCode = this.getScriptCode();
+      if (scriptCode) {
+        this.loadDefaultViewList();
+      }
+    },
+    getAccessParam() {
+      if (!this.widget.options.formScriptParam) return;
+      return this.handleCustomEvent(this.widget.options.formScriptParam);
+    },
+    getScriptCode() {
+      let accessReturnType = this.widget.options.accessReturnType;
+      let defaultScriptCode = "getList";
+      if (accessReturnType === "1") {
+        defaultScriptCode = "getList";
+      } else if (accessReturnType === "2") {
+        defaultScriptCode = "getPage";
+      }
+      return this.widget.options.formScriptCode || defaultScriptCode;
+    },
+    getAttachmentType() {
+      let result = [];
+      let tableColumns = this.widget.options.tableColumns || [];
+      tableColumns.forEach((item) => {
+        if (item.prop && item.label && item.formatS === "editAttachment") {
+          result.push(item.prop);
+        }
+      });
+      return result;
+    },
+    getHttpConfigForUser() {
+      return {
+        addCreateInfo: true,
+        queryCreateInfo: window.$vueRoot.$store.getters.queryCreateInfo || "0",
+      };
+    },
+    /**
+     * 构造表单脚本请求的 data 参数（通用）。
+     * 勾选"请求去掉data层"(removeDataLevel)时，内层参数平铺到外层，不再包一层 data。
+     */
+    buildFormScriptData(reportTemplate, innerData, taBm) {
+      let base = {
+        formCode: reportTemplate.formCode,
+        formVersion: reportTemplate.formVersion,
+        taBm: taBm || this.fieldKeyName,
+      };
+      return this.widget.options.removeDataLevel
+        ? { ...base, ...(innerData || {}) }
+        : { ...base, data: innerData || {} };
+    },
+    loadDefaultQueryList(reqData, done) {
+      let reportTemplate = this.getFormRef().reportTemplate;
+      let scriptCode = this.getScriptCode();
+      let accessParam = this.getAccessParam() || {};
+      let otherParam = {};
+      let attachmentType = this.getAttachmentType();
+      if (attachmentType.length) {
+        otherParam.attachmentType = attachmentType;
+      }
+      let defaultOption = this.getHttpConfigForUser();
+      let requestData = {
+        ...reqData,
+        ...otherParam,
+      };
+      requestData = extendDeeply(requestData, accessParam);
+      return this.formHttp({
+        scriptCode: scriptCode,
+        data: this.buildFormScriptData(reportTemplate, requestData),
+        isLoading: false,
+        ...defaultOption,
+        callback: (res) => {
+          done(res);
+        },
+      });
+    },
+    loadDefaultViewList() {
+      let dataId = this.formDataId;
+      let reportTemplate = this.getFormRef().reportTemplate;
+      let accessParam = this.getAccessParam() || {};
+      let otherParam = {};
+      let attachmentType = this.getAttachmentType();
+      if (attachmentType.length) {
+        otherParam.attachmentType = attachmentType;
+      }
+      let scriptCode = this.getScriptCode();
+      return this.formHttp({
+        scriptCode: scriptCode,
+        data: this.buildFormScriptData(reportTemplate, {
+          id: dataId,
+          ...otherParam,
+          ...accessParam,
+        }),
+        callback: (res) => {
+          let rows = res.objx ? res.objx.records || res.objx || [] : [];
+          this.setValue(rows);
+          this.handleCustomEvent(
+            this.widget.options.formScriptCallback,
+            ["rows"],
+            [rows]
+          );
+        },
+      });
+    },
+    getReqParam(item, dataId, billData) {
+      let param = {};
+      if (item.accessParam) {
+        if (typeof item.accessParam === "string") {
+          let n = new Function("billData", item.accessParam);
+          param = n.call(this, billData);
+        } else {
+          param = item.accessParam;
+        }
+      } else {
+        param = { id: dataId };
+      }
+      return param;
+    },
+    async deleteRow(row, rowIndex) {
+      this.fieldModel.splice(rowIndex, 1);
+    },
+    createNewTableData() {
+      let vailColumns = this.widget.options.tableColumns.filter(
+        (item) => item.prop && item.label
+      );
+      let newData = {};
+      vailColumns.forEach((item) => {
+        if (item.formatS == "editSearch") {
+          newData[item.prop] = null;
+          let vabSearchName = item?.columnOption?.vabSearchName;
+          if (vabSearchName) newData[vabSearchName] = null;
+        } else {
+          newData[item.prop] = null;
+        }
+      });
+      return newData;
+    },
+    addTableData(rows, field) {
+      if (this.getReadMode && this.getReadMode()) {
+        return;
+      }
+      let formDataModel = this.formModel;
+      let tableRows = this.fieldModel;
+      let fullData = this.fieldModel;
+      let items;
+      if (field) {
+        let keys = fullData.map((item) => {
+          return item[field] + "";
+        });
+        items = rows.filter((item) => {
+          let value = item[field] + "";
+          return !keys.includes(value);
+        });
+      } else {
+        items = rows;
+      }
+      if (items) {
+        if (items.length) {
+          items.forEach((row) => {
+            let newData = this.createNewTableData();
+            Object.assign(newData, row);
+
+            tableRows.push(newData);
+          });
+        }
+      } else {
+        let newData = this.createNewTableData();
+        tableRows.push(newData);
+      }
+      /* 追加的行落在末尾，折叠态下会被藏住 —— 加完就展开。
+         这里是 push 改数组，watch fieldModel 不触发，必须自己来。 */
+      this.showAllRows = true;
+      // this.formModel[this.fieldKeyName] = this.$baseLodash(this.fieldModel)
+      // this.fieldModel = tableRows
+      // $grid.loadData(tableRows);
+    },
+    getColumnWidgetConfig(row) {
+      let formRef = this.getFormRef();
+      let columnSelectedWidget = null;
+      let columnEditFields = null;
+      let type = this.columnFormatMap[row.formatS];
+
+      if (type) {
+        // 格式化配置写在 row.widget（含 optionItems）；老数据才落在 columnOption。
+        // 不能每次从字段模板重建，否则下拉选项丢失，行上只能看到 value。
+        if (row.widget && row.widget.type) {
+          columnSelectedWidget = this.$baseLodash.cloneDeep(row.widget);
+        } else {
+          columnSelectedWidget = this.$baseLodash.cloneDeep(
+            formRef.getFieldWidgetByType(type)
+          );
+          let tmpId = generateId();
+          let idVal = row.prop ? row.prop : type + tmpId;
+          columnSelectedWidget.id = idVal;
+          if (row.columnOption && Object.keys(row.columnOption).length) {
+            columnSelectedWidget.options = row.columnOption;
+          }
+        }
+        if (!columnSelectedWidget.options) {
+          columnSelectedWidget.options = {};
+        }
+        columnSelectedWidget.options.name = row.prop;
+        columnSelectedWidget.options.label = row.label;
+        columnSelectedWidget.options.labelHidden = true;
+        columnSelectedWidget.options.required = row.required || false;
+      }
+      return { columnSelectedWidget, columnEditFields };
+    },
+    getColumnProp(widget, obj) {
+      let isQueryTable = this.widget.options.isQueryTable || false;
+      if (isQueryTable) {
+        return "false";
+      } else {
+        let propName =
+          this.getFieldKeyName(widget) +
+          "." +
+          obj.rowIndex +
+          "." +
+          obj.column.field;
+        if (
+          this.isVabsearchFlagWidget(widget) &&
+          !isVabsearchMultiWidget(widget)
+        ) {
+          let vabSearchName = obj.column.params.widget.options.vabSearchName;
+          propName =
+            this.getFieldKeyName(widget) +
+            "." +
+            obj.rowIndex +
+            "." +
+            vabSearchName;
+        }
+        return propName;
+      }
+    },
+    isVabsearchFlagWidget(widget) {
+      let type = widget?.type;
+      return (
+        type === "vabsearch" ||
+        type === "singerSearch" ||
+        type === "multiSearch"
+      );
+    },
+    getColumnWidgetName(e) {
+      if (e && e.type) {
+        return e.type + "-widget";
+      }
+    },
+    getGridTable() {
+      let $grid = this.$refs[this.getTableRef()];
+      return $grid;
+    },
+    getTableRef() {
+      let tableRef = this.widget.id;
+      return tableRef;
+    },
+    getUrl() {
+      let accessUrl = this.widget.options.accessUrl;
+      return accessUrl || USER_PREFIX + `/form_ins/getFormInsData`;
+    },
+    openRowDetailDialog(row) {
+      /*let isQueryTable = this.widget.options.isQueryTable || false;
+      if(isQueryTable)return;*/
+      this.editRow = row;
+      this.showRowDetailDialog = true;
+    },
+    changePageNew({ type, currentPage, pageSize, $event }) {
+      this.loadTableData({
+        size: pageSize + "",
+        current: currentPage + "",
+      });
+    },
+    /** 导出前按脱敏规则剔除列，实现见 textMaskUtil.markMaskedExportColumns。 */
+    markMaskedColumnsForExport() {
+      markMaskedExportColumns(
+        this.getGridTable(),
+        buildTextMaskContext(this.getFormRef(), this.$store.getters.companyCode)
+      );
+    },
+    exportData(option) {
+      this.markMaskedColumnsForExport();
+      let tableRef = this.getTableRef();
+      let serverName = this.getFormRef().reportTemplate.serverName;
+      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";
+    },
+    /**
+     * 明细行的显示文本。
+     *
+     * H5 只读：行上不渲染下拉框，只出选中项文本。
+     * 有选项的列必须自己把 value 换成 label，formatterValue 不做选项映射。
+     */
+    getColumnDisplayText(column, row, rowIndex) {
+      let value = row[column.field];
+      let columnWidget = column.params ? column.params.widget : null;
+      if (columnWidget) {
+        let mapped = this.getWidgetOptionLabel(columnWidget, value);
+        if (mapped != null && mapped !== "") {
+          return mapped;
+        }
+      }
+      return column.formatter({
+        cellValue: value,
+        column: column,
+        rowIndex: rowIndex,
+        row: row,
+        items: this.fieldModel,
+      });
+    },
+    getOptionItemValueKey(widget) {
+      let options = (widget && widget.options) || {};
+      if (options.commonAttributeEnabled) {
+        return options.valueKey || "sn";
+      }
+      return options.valueKey || "value";
+    },
+    getOptionItemLabelKey(widget) {
+      let options = (widget && widget.options) || {};
+      if (options.commonAttributeEnabled) {
+        return options.labelKey || "value";
+      }
+      return options.labelKey || "label";
+    },
+    getWidgetOptionLabel(fieldWidget, fieldModel) {
+      if (fieldModel === null || fieldModel === undefined || fieldModel === "") {
+        return fieldModel;
+      }
+      let options = (fieldWidget && fieldWidget.options) || {};
+      let optionList = options.optionItems || options.statusParam;
+      if (!Array.isArray(optionList) || !optionList.length) {
+        return null;
+      }
+      let labelField = this.getOptionItemLabelKey(fieldWidget);
+      let valueField = this.getOptionItemValueKey(fieldWidget);
+      let values = Array.isArray(fieldModel) ? fieldModel : [fieldModel];
+      let labels = values.map((val) => {
+        let item = optionList.find(
+          (o) => o[valueField] === val || String(o[valueField]) === String(val)
+        );
+        if (!item) return null;
+        let label = item[labelField];
+        return this.$t1 ? this.$t1(label) : label;
+      });
+      let hit = labels.filter((x) => x != null && x !== "");
+      return hit.length ? hit.join(",") : null;
+    },
+    /**
+     * 行点击：
+     * - 查询选择场景(isQueryTable)：点行是勾选，保持原行为；
+     * - 明细行：点整行打开明细详情（行上不再摆删除/操作按钮）。
+     */
+    onRowClick(row) {
+      if (this.widget.options.isQueryTable) {
+        this.itemCheck(row);
+        return
+      }
+      this.openRowDetailDialog(row);
+    },
+    itemCheck(row) {
+      let dataTableConfig = this.dataTableConfig;
+      if (dataTableConfig) {
+        let checkItemIds = this.checkItemIds;
+        let checked;
+        if (checkItemIds.includes(row.id)) {
+          checked = false;
+          checkItemIds.splice(checkItemIds.indexOf(row.id), 1);
+        } else {
+          checked = true;
+          checkItemIds.push(row.id);
+        }
+        let param = { row, checked };
+        dataTableConfig.onCheckboxChange &&
+          dataTableConfig.onCheckboxChange(param);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>