cloud-web-corejs 1.0.54-dev.81 → 1.0.54-dev.811

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

@@ -1,921 +1,1642 @@
-<template>
-  <div>
-    <div class="h5-box">
-      <div>
-        <!-- <div class="header-box"><i class="back el-icon-arrow-left"></i>杂发订单</div> -->
-        <div class="search-H5box">
-          <div class="txt">
-            <el-input placeholder="订单编号" suffix-icon="el-icon-search" v-model="formData.sn"
-                      @keyup.enter.native="searchEvent">
-              <el-button slot="append" @click="searchEvent"> 搜索</el-button>
-            </el-input>
-          </div>
-          <div class="icon-screen" @click="popStatus = true">
-            <i class="iconfont icon-shaixuan1"></i>
-            <span>高级筛选</span>
-          </div>
-        </div>
-        <div class="orderList-box" @scroll="handleScroll">
-          <div class="item" v-for="(row,rowIndex) in page.records" :key="rowIndex" @click="openEditDialog(row.id)">
-            <div class="info1">
-              <div class="name">订单编号：{{ row.orderSn }}</div>
-              <p>发货单号：{{ row.shippingSn }}</p>
-              <p>外部订单号：{{ row.outTradeSn }}</p>
-              <p>客户编码：{{ row.customerCode }}</p>
-              <p>客户名称：{{ row.customerName }}</p>
-              <p>机构：{{ row.saleOrgName }}</p>
-              <p>业务员：{{ row.salesManName }}</p>
-              <p>订单类型：{{ row.orderTypeVal }}</p>
-              <h5-status-tag :value="row.status"></h5-status-tag>
-            </div>
-            <!--          <div class="btns">
-                        <el-button type="success" icon="iconfont icon-shenhe" class="btn">审核</el-button>
-                        <el-button type="primary" icon="el-icon-edit-outline" class="btn" @click="openEditDialog(row.orderId)">
-                          编辑
-                        </el-button>
-                      </div>-->
-          </div>
-        </div>
-        <div class="float-addBtn" @click="openEditDialog()"><i class="el-icon-plus"></i><span>新增</span></div>
-        <h5SearchDialog v-if="popStatus" :visiable.sync="popStatus" @searchEvent="confirmSearchDialog"
-                        @resetEvent="resetSearchDialog">
-          <el-form label-position="top">
-            <el-form-item label="订单编号">
-              <el-input v-model="formData.sn" class="txt" clearable/>
-            </el-form-item>
-            <el-form-item label="发货单号">
-              <el-input v-model="formData.shippingSn" class="txt" clearable/>
-            </el-form-item>
-            <el-form-item label="订单状态">
-              <el-select v-model="formData.statuses" class="txt" multiple clearable>
-                <el-option :value="0" label="未审核"/>
-                <el-option :value="1" label="审核中"/>
-                <el-option :value="2" label="已审核"/>
-                <el-option :value="3" label="已作废"/>
-              </el-select>
-            </el-form-item>
-          </el-form>
-        </h5SearchDialog>
-      </div>
-    </div>
-<!--    <editView v-if="showViewDialog && showEdit" visible-key="showEdit" :_dataId.sync="dataId" :copyId.sync="copyId"
-              :parent-target="_self" @reload="$reloadHandle" @close="closeViewDialog"></editView>-->
-  </div>
-</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} from "../../../../components/xform/utils/util";
-import * as formatUtil from "../../../../components/xform/utils/format";
-import render from "../../../../views/user/bill_setting/render.vue";
-import mixin from "../../../../mixins/mobile/list/index";
-
-const baseRefUtil = {
-  emitter,
-  i18n,
-  refMixin,
-  containerItemMixin,
-  formatUtil,
-  assembleAxiosConfig,
-  getReportGlobalMap
-};
-
-export default {
-  name: 'list-h5-item',
-  components: {
-    ...FieldComponents
-  },
-  mixins: [emitter, i18n, refMixin, containerItemMixin,mixin],
-  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 = 2;
-    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: [],
-
-      dataId: 0,
-      showEdit: false,
-      showViewDialog: false
-    };
-  },
-  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
-          },
-          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 && column.params.formatS)
-        switch (column.params.formatS) {
-          case 'd1':
-            return baseRefUtil.formatUtil.formatDate1(cellValue);
-          case 'd2':
-            return baseRefUtil.formatUtil.formatDate2(cellValue);
-          case 'd3':
-            return baseRefUtil.formatUtil.formatDate3(cellValue);
-          case 'd4':
-            return baseRefUtil.formatUtil.formatDate4(cellValue);
-          case 'd5':
-            return baseRefUtil.formatUtil.formatDate4(cellValue);
-          case 'n1':
-            return baseRefUtil.formatUtil.formatNumber1(cellValue);
-          case 'n2':
-            return baseRefUtil.formatUtil.formatNumber2(cellValue);
-          case 'n3':
-            return baseRefUtil.formatUtil.formatNumber3(cellValue);
-          case 'n4':
-            return baseRefUtil.formatUtil.formatNumber4(cellValue);
-          case 'n5':
-            return baseRefUtil.formatUtil.formatNumber5(cellValue);
-          case 'n6':
-            return baseRefUtil.formatUtil.formatNumber6(cellValue);
-          case 'n7':
-            return baseRefUtil.formatUtil.formatNumber7(cellValue);
-        }
-      return cellValue;
-    },
-    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 mainDataSetDTO = null;
-      let requestAccess = this.requestAccess;
-      let tableRef = this.getTableRef();
-      let formDataModel = this.getFormRef().formDataModel;
-      let isQueryTable = this.widget.options.isQueryTable || false;
-      let isDataPage = this.widget.options.accessReturnType == "2";
-      let formCode = this.getFormRef().reportTemplate.formCode;
-      let dataId = this.formDataId;
-      let accessScript = this.widget.options.accessScript;
-      let searchColumns = null;
-      if (isQueryTable) {
-        path = this.getUrl();
-        paramFun = () => {
-          // let conditions = this.getSearchCondition();
-          let conditions = {keyword: this.keyword, ...this.advancedFormData};
-          if (this.widget.options.showPagination) {
-            let searchCount = true;
-            /*let isQueryAllPage = $grid.isQueryAllPage;
-            if (isQueryAllPage == false) {
-              searchCount = false;
-            }*/
-            /*let pager = proxyInfo ? proxyInfo.pager : null;
-            if (pager) {
-              conditions.current = pager.currentPage;
-              conditions.size = pager.pageSize;
-              conditions.searchCount = searchCount;
-            }*/
-          }
-
-          /*let formData = {
-            accessCode: requestAccess.accessCode,
-            conditions: conditions
-          };*/
-          let formData = conditions;
-          return formData;
-        };
-
-        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}) => {
-              if (!path) {
-                return;
-              }
-
-              let formData = tableOption.param ? tableOption.param() || {} : {};
-              const queryParams = Object.assign({}, formData);
-
-              // 处理排序条件
-              if (sorts) {
-                const firstSort = sorts[0];
-                if (firstSort) {
-                  queryParams.sort = firstSort.property;
-                  queryParams.order = firstSort.order;
-                }
-              }
-
-              // 处理筛选条件
-              if (filters) {
-                filters.forEach(({property, values}) => {
-                  queryParams[property] = values.join(",");
-                });
-              }
-
-              if (page.pageSize !== undefined) {
-                queryParams["size"] = `${page.pageSize}`;
-                queryParams["current"] = `${page.currentPage}`;
-              }
-
-              /*let $grid = this.getGridTable();
-              let isQueryAllPage = $grid.isQueryAllPage;
-              let pathStr1 = "";
-              if (isQueryAllPage === false) {
-                queryParams.searchCount = false;
-              }*/
-              Object.assign(queryParams, param)
-
-              var reqPath = typeof path == "function" ? path() : path;
-
-              return new Promise((resolve, reject) => {
-                let reqData = {
-                  formCode: formCode,
-                  ...queryParams
-                }
-                if (accessScript) {
-                  let index = 0;
-                  let toDo = () => {
-                    let f = new Function("dataId", "formCode", "param", "done", accessScript);
-                    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) {
-                          this.page = res.objx || {};
-                        }
-                        if (tableOption.callback) {
-                          that.$nextTick(() => {
-                            setTimeout(function () {
-                              tableOption.callback(rows);
-                            }, 0);
-                          });
-                        }
-                      } else {
-                        this.setValue([]);
-                      }
-                    }
-                    let r = f.call(that, dataId, formCode, reqData, done);
-                    if (r) {
-                      r.catch(error => {
-                        reject(error);
-                      });
-                    }
-                  };
-                  let loopHandle = () => {
-                    /*if (index < 500 && $grid.tableFormStop === true) {
-                      //阻塞列表查询，或者次数达到500时，自动释放
-                      index++
-                      setTimeout(() => {
-                        loopHandle();
-                      }, 10)
-                    } else {
-                      if ($grid.tableFormStop) $grid.tableFormStop = false;
-                      toDo();
-                    }*/
-                    toDo();
-                  }
-                  loopHandle();
-                } else {
-                  resolve();
-                }
-                /*that.scriptHttp({
-                  options: this.widget.options,
-                  params: queryParams,
-                  callback: (res) => {
-                    resolve(res);
-                    if (res.type == "success") {
-                      let rows = res.objx ? res.objx.records || res.objx || [] : [];
-                      /!*if (tableOption.treeNodeUrl) {
-                        if (rows.length > 0) {
-                          let $t = this.$refs[tableRef];
-                          var treeConditions = $t.originOption.treeConditions || [
-                            "enabled",
-                          ];
-                          let treeFiled = Object.keys(formData).some((key) => {
-                            return (
-                              !treeConditions.includes(key) && formData[key] != null && formData[key] != ""
-                            );
-                          });
-                          if (treeFiled) {
-                            that.$nextTick(() => {
-                              setTimeout(function () {
-                                let isLazy = $t.treeConfig.lazy;
-                                $t.treeConfig.lazy = false;
-                                $t.setAllTreeExpand(true).then(() => {
-                                  let fullAllDataRowMap = $t.$refs.xTable.fullAllDataRowMap;
-                                  let fullData = $t.getTableData().fullData;
-                                  fullData.forEach((lineData) => {
-                                    if (
-                                      $t.$refs.xTable.isTreeExpandByRow(lineData)
-                                    ) {
-                                      var rest = fullAllDataRowMap.get(lineData);
-                                      rest.treeLoaded = true;
-                                    }
-                                  });
-                                  $t.treeConfig.lazy = isLazy;
-                                });
-                              }, 0);
-                            });
-                          } else {
-                            let row = rows[0];
-                            if (row[result.treeConfig.hasChild]) {
-                              that.$nextTick(() => {
-                                setTimeout(function () {
-                                  $t.setTreeExpand(row, true);
-                                }, 0);
-                              });
-                            }
-                          }
-                        }
-                      }*!/
-                      if (tableOption.callback) {
-                        that.$nextTick(() => {
-                          setTimeout(function () {
-                            tableOption.callback(rows);
-                          }, 0);
-                        });
-                      }
-                    }
-                  },
-                  httpConfig: {
-                    error: (error) => {
-                      reject(error);
-                    }
-                  }
-                });*/
-              });
-            }
-          }
-        };
-        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();
-      }*/
-    },
-    getSearchFormData() {
-      let map = {};
-      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 !== '') {
-              map[formField] = vaule;
-            }
-          }
-        };
-        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 accessScript = this.widget.options.accessScript;
-      let formCode = this.getFormRef().reportTemplate.formCode;
-      if (accessScript) {
-        let f = new Function("dataId", "formCode", "param", "done", accessScript);
-        let toDo = (res) => {
-          let rows = res.objx ? res.objx.records || res.objx || [] : [];
-          // this.fieldModel = rows;
-          this.formModel[this.fieldKeyName] = rows
-          this.fieldModel = rows;
-        }
-
-        f.call(this, this.formDataId, formCode, null, toDo)
-      }
-
-      /*this.scriptHttp({
-        options: this.widget.options,
-        params: {},
-        success: (res) => {
-          let rows = res.objx ? res.objx.records || res.objx || [] : [];
-          this.fieldModel = 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 == 'date') {
-        columnEditFields = ['type', 'format', 'valueFormat']
-      } else if (type == 'select') {
-
-      }
-      if (type == 'vabsearch') {
-        columnEditFields = ['vabSearchField', 'formCode', 'formVersion', 'required', 'showFormField', 'onSearchConfirm', 'onSearchClear']
-      }*/
-
-      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 (obj.column.params.widget == 'vabsearch') {
-          let vabSearchName = obj.column.params.widget.options.vabSearchName;
-          propName = this.getFieldKeyName(widget) + '.' + obj.rowIndex + '.' + vabSearchName;
-        }
-        return propName;
-      }
-    },
-    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 + ""
-      })
-    },
-    exportData(option) {
-      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>
-@import "~@/resources/css/h5.scss";
-
-.orderList-box {
-  flex: 1;
-  overflow-y: auto;
-}
-
-.search-H5box {
-  margin: 0 0 9px;
-}
-</style>
+<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="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'"
+                >
+                  <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>
+
+                        <!-- 明细行只出纯文本：编辑控件(widget)与操作链接
+                             (editDelete/editButton)都不在行上渲染，点整行进详情，
+                             详情弹框里才是可编辑的控件。 -->
+                        <template v-else>
+                          {{ getColumnDisplayText(column, row, rowIndex) }}
+                        </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>
+    </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>
+              <!-- 明细详情弹框里不摆行操作按钮区：行按钮(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;
+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();
+    },
+    /**
+     * 明细行卡片样式开关。只判 === '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;
+    },
+    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 });
+    },
+    /**
+     * 行级对比标记，复用 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);
+    },
+    /**
+     * 明细行的显示文本。
+     *
+     * 行上不渲染编辑控件，所以有选项的列（下拉/状态/单选/多选）必须自己把
+     * value 换成 label —— 否则状态列会显示成 1 而不是「审核中」，
+     * 因为 formatterValue 只做日期与数字格式化，不查选项表。
+     */
+    getColumnDisplayText(column, row, rowIndex) {
+      let value = row[column.field];
+      let columnWidget = column.params ? column.params.widget : null;
+      let widgetOptions = (columnWidget && columnWidget.options) || {};
+      let optionList = widgetOptions.optionItems || widgetOptions.statusParam;
+      if (optionList && optionList.length) {
+        let hit = optionList.filter((o) => String(o.value) === String(value))[0];
+        if (hit) return hit.label;
+      }
+      return column.formatter({
+        cellValue: value,
+        column: column,
+        rowIndex: rowIndex,
+        row: row,
+        items: this.fieldModel,
+      });
+    },
+    /**
+     * 行点击：
+     * - 查询选择场景(isQueryTable)：点行是勾选，保持原行为；
+     * - 明细行：点整行打开明细详情（行上不再摆删除/操作按钮）。
+     */
+    onRowClick(row) {
+      if (this.widget.options.isQueryTable) {
+        this.itemCheck(row);
+        return
+      }
+      this.openRowDetailDialog(row);
+    },
+    itemCheck(row) {
+      let dataTableConfig = this.dataTableConfig;
+      if (dataTableConfig) {
+        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>