cloud-web-corejs 1.0.0

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

@@ -0,0 +1,922 @@
+<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 ContainerItemWrapper from './container-item-wrapper';
+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>