imatrix-ui 0.0.15 → 0.1.1-up

package/components/super-grid/super-grid.vue

@@ -0,0 +1,2893 @@
+<template>
+  <div>
+    <search-form
+      v-if="
+        !isFormSubTable &&
+        hasLoadedColumns &&
+        query &&
+        query.showType === 'embedded'
+      "
+      ref="sf"
+      :columns="columns"
+      :code="code"
+      :url="url"
+      :pagination="pagination"
+      :query="query"
+      :search-form-info="searchFormInfo"
+      :search-param="searchFormContent"
+      :init-search-props="initSearchProps"
+      :list-toolbar-form-data="listToolbarFormData"
+      @search="doSearch"
+      @reset="resetSearch"
+      @open-fold="openFold"
+    />
+    <search-form-dialog
+      v-if="hasLoadedColumns && query && query.showType === 'popup'"
+      ref="sfDialog"
+      :columns="columns"
+      :code="code"
+      :url="url"
+      :pagination="pagination"
+      :query="query"
+      :search-param="searchFormContent"
+      :init-search-props="initSearchProps"
+      @search="doSearchDialog"
+      @reset="resetSearch"
+      @close="closeSearchFormDialog"
+    />
+    <div :class="'grid-area ' + code">
+      <el-table
+        v-if="refreshGrid && hasLoadedColumns"
+        ref="superGrid"
+        :data="gridData"
+        :row-key="getRowKeyProp"
+        :show-summary="showSummary"
+        :summary-method="getSummaries"
+        style="width: 100%"
+        :stripe="stripe"
+        :border="true"
+        :default-expand-all="defaultExpandAll"
+        :lazy="isLazy"
+        :load="loadChildren"
+        :row-style="changeRowStyle"
+        :cell-style="changeCellStyle"
+        :header-cell-style="changeHeaderStyle"
+        :highlight-current-row="true"
+        :span-method="rowSpan"
+        :max-height="maxHeight"
+        :height="height"
+        class="elTable"
+        :tree-props="getTreeProps(parentProp, isSql, isLazy, dataSourceType)"
+        @sort-change="handleSortChange"
+        @select="select"
+        @select-all="selectAll"
+        @row-click="rowClickEvent"
+        @row-dblclick="rowDblclickEvent"
+        @expand-change="expandChange"
+        @header-click="headerClick"
+        @header-dragend="changeHederWidth"
+        @header-contextmenu="headerContextmenu"
+        @cell-click="selectCell"
+      >
+        <template v-if="myCustomFormatter">
+          <component
+            :is="getComponentType(column.prop)"
+            v-for="(column, index) in visibleColumns"
+            :ref="column.prop"
+            :key="column.label + index"
+            :column="column"
+            :is-sql="isSql"
+            :list-code="code"
+            :custom-format="
+              getComponentType(column.prop) === 'GroupColumn'
+                ? myCustomFormatter
+                : myCustomFormatter[column.prop]
+            "
+            :new-width="newWidth"
+            :drag-column-prop="dragColumnProp"
+            :right-click-menu-arr="options.rightClickMenuArr"
+            :table-name="tableName"
+            :page-code="pageCode"
+            :list-name="listName"
+            :options="options"
+            :pagination="pagination"
+            :current-page="currentPage"
+            :grid-data="isSubTableShowPage ? subTableData : gridData"
+            :page-grid-data="
+              isSubTableShowPage ? getSubTableGridData(subTableData) : gridData
+            "
+            @open-page="openPageDialog"
+            @refresPortData="refresPortData"
+            @refresPortsData="refresPortsData"
+            @refresMainTableFields="refresMainTableFields"
+            @prohibitToEdit="prohibitToEdit"
+          />
+        </template>
+        <template v-else>
+          <component
+            :is="getComponentType(column.prop)"
+            v-for="(column, index) in visibleColumns"
+            :ref="column.prop"
+            :key="column.label + index"
+            :is-sql="isSql"
+            :column="column"
+            :list-code="code"
+            :is-line-edit="lineEdit !== null && lineEdit.editable"
+            :new-width="newWidth"
+            :drag-column-prop="dragColumnProp"
+            :right-click-menu-arr="options.rightClickMenuArr"
+            :table-name="tableName"
+            :page-code="pageCode"
+            :list-toolbar-form-data="listToolbarFormData"
+            :list-name="listName"
+            :options="options"
+            :current-page="currentPage"
+            :pagination="pagination"
+            :grid-data="isSubTableShowPage ? subTableData : gridData"
+            :page-grid-data="
+              isSubTableShowPage ? getSubTableGridData(subTableData) : gridData
+            "
+            @open-page="openPageDialog"
+            @refresData="refresData"
+            @refresPortData="refresPortData"
+            @refresPortsData="refresPortsData"
+            @refresMainTableFields="refresMainTableFields"
+            @prohibitToEdit="prohibitToEdit"
+          />
+        </template>
+      </el-table>
+      <div v-if="showPagination" style="position: relative; margin-top: 5px">
+        <el-row>
+          <!-- <el-col
+                      v-if="
+                        !(
+                          typeof options.isAdministerListView !== 'undefined' &&
+                          options.isAdministerListView != null &&
+                          options.isAdministerListView === true
+                        )
+                      "
+                      :span="2"
+                    > -->
+          <el-icon style="float: left; padding: 10px 0px; color: #777"
+            ><el-icon-setting
+          /></el-icon>
+          <el-icon style="float: left; padding: 10px 0px; color: #777"
+            ><el-icon-refresh
+          /></el-icon>
+          <!-- </el-col> -->
+          <el-col
+            :span="
+              !(
+                typeof options.isAdministerListView !== 'undefined' &&
+                options.isAdministerListView != null &&
+                options.isAdministerListView === true
+              )
+                ? 22
+                : 24
+            "
+          >
+            <el-pagination
+              v-if="pagination && isShowPage"
+              background
+              v-model:current-page="currentPage"
+              :page-sizes="pagination.pageSizes"
+              :page-size="pagination.pageSize"
+              :layout="pagination.layout"
+              :total="pagination.total"
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+            />
+          </el-col>
+        </el-row>
+      </div>
+    </div>
+
+    <columns-config
+      v-if="showColumnConfig"
+      :columns="columns"
+      :list-code="code"
+      :is-sql="isSql"
+      @close="closeCustomConfig($event)"
+      @reset="resetCustomConfig($event)"
+    />
+    <header-context-menu
+      v-show="showHeaderContextmenu"
+      ref="headerMenu"
+      :buttom-arr="options.rightClickMenuArr"
+      :column="rightClickColumn"
+      @clearHeaderContextmenu="clearHeaderContextmenu"
+    />
+    <super-page-dialog
+      v-if="isShowPageDialog"
+      :dev-mode="pageDevMode"
+      :jump-page-setting="jumpPageSetting"
+      :source-page-code="pageCode"
+      @close="closePageDialog"
+      @update-value="updateValues"
+    />
+  </div>
+</template>
+
+<script>
+import {
+  Setting as ElIconSetting,
+  Refresh as ElIconRefresh,
+} from '@element-plus/icons'
+import { $on, $off, $once, $emit } from '../utils/gogocodeTransfer'
+import IndexColumn from './index-column.vue'
+import SelectionColumn from './selection-column.vue'
+import NormalColumn from './normal-column.vue'
+import GroupColumn from './group-column.vue'
+import ColumnsConfig from './columns-config.vue'
+import SearchForm from './search-form.vue'
+import searchFormDialog from './search-form-dialog.vue'
+import { setEntityFieldValue } from '../../src/utils/util'
+import eventBus from './eventBus'
+import {
+  getSpanValuesForColumn,
+  getFirstEditableColumn,
+  getGridParams,
+  getTableHeight,
+  isObjectValueEqual,
+  isHasEditOption,
+  isHasOptionFunction,
+  isCanRefreshGrid,
+  isEditOptionFunction,
+  getExtraParam,
+  getLastPageNum,
+} from './utils'
+import Sortable from 'sortablejs'
+import store from './store'
+import events from './events'
+import publicMethods from './public-methods'
+import superGridService from './super-grid-service'
+import formValidatorService from './formValidatorUtil'
+import { getSystemCode } from '../../src/utils/permissionAuth'
+import apis from './apis'
+import headerContextMenu from './header-context-menu.vue'
+import { addDynamicProp } from './utils'
+import { updateWithPageValue } from '../../src/utils/jump-page-utils'
+import { getEntityFieldValueWithOutCase } from '../../src/utils/util'
+import { checkPermission } from '../../src/utils/permission'
+import * as Vue from 'vue'
+export default {
+  components: {
+    IndexColumn,
+    SelectionColumn,
+    NormalColumn,
+    GroupColumn,
+    ColumnsConfig,
+    SearchForm,
+    headerContextMenu,
+    searchFormDialog,
+    ElIconSetting,
+    ElIconRefresh,
+  },
+  name: 'SuperGrid',
+  props: {
+    code: {
+      type: String,
+      default: '',
+    },
+    url: {
+      type: String,
+      default: '',
+    },
+    options: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+    // 为了兼容平台的旧写法，暂不删除以下属性
+    // 操作列、占位符列内容显示的函数，格式为：{'属性名':方法},例如：{'name':viewUser,'operation':showOperation}
+    customFormatter: {
+      type: Object,
+      default: null,
+    },
+    searchFormInfo: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+    // 是否显示分页器
+    showPagination: {
+      type: Boolean,
+      default: true,
+    },
+    listToolbarFormData: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    let parentProp
+    const parentPropSetting = this.options.parentProp
+    if (
+      typeof parentPropSetting !== 'undefined' &&
+      parentPropSetting !== '' &&
+      parentPropSetting !== null
+    ) {
+      parentProp = parentPropSetting
+    }
+    let mergeFields = []
+    if (
+      this.options &&
+      this.options.mergeFields &&
+      this.options.mergeFields !== ''
+    ) {
+      mergeFields = this.options.mergeFields.split(',')
+    }
+    let optionTableHeight
+    if (
+      this.options &&
+      this.options.optionTableHeight &&
+      this.options.optionTableHeight !== ''
+    ) {
+      optionTableHeight = this.options.optionTableHeight
+    }
+    let pageCode
+    if (this.options && this.options.pageCode) {
+      pageCode = this.options.pageCode
+    }
+    let pageHeight
+    if (this.options && this.options.pageHeight) {
+      pageHeight = this.options.pageHeight
+    }
+    let isLazy = true
+    if (this.options && this.options.lazy !== undefined) {
+      isLazy = this.options.lazy
+    }
+    let defaultExpandAll = true
+    if (this.options && this.options.defaultExpandAll !== undefined) {
+      defaultExpandAll = this.options.defaultExpandAll
+    }
+    // 数据库类型，值为mysql、oracle、sqlserver，默认是mysql，树形表格时需要使用
+    let dataSourceType = 'mysql'
+    if (window.$vueApp.config.globalProperties.dataSourceType) {
+      dataSourceType =
+        window.$vueApp.config.globalProperties.dataSourceType.toLowerCase()
+    }
+    let pageDevMode = this.options.pageDevMode
+    if (pageDevMode === undefined) {
+      pageDevMode = false
+    }
+    return {
+      isLoading: false,
+      currentPage: 1,
+      showColumnConfig: false,
+      basicInfo: {
+        summary: 'no',
+      },
+      columns: [],
+      pagination: null,
+      query: null,
+      lineEdit: null,
+      gridData: [],
+      summaries: null,
+      sortInfo: null,
+      pageSize: null,
+      showSearch: false,
+      myCustomFormatter: null,
+      height: null,
+      timer: null,
+      timer2: null,
+      isSql: false, // 是否是sql查询
+      parentProp, // 树状结构数据时，父字段名，默认是id
+      hasLoadData: false,
+      mergeFields,
+      newWidth: null,
+      dragColumnProp: null,
+      hasLoadedColumns: false, // 是否已经加载了列配置
+      backgroundColorMap: {},
+      showHeaderContextmenu: false,
+      rightClickColumn: null,
+      externalClickFlag: false, // 是否是外部点击
+      dataTableCode: null,
+      dynamicColumnInfo: null, // 列表管理/字段配置/动态列配置中解析的动态列集合，在获得列表数据和行编辑保存动态列时使用
+      mainDefaultValueColumns: null, // 当前列表对应的数据表的字段配置有默认值的字段集合，动态列insert插入主表记录时使用
+      dynamicServiceName: null, // 动态列展示及行编辑时数据保存的service处理类，可以不填，使用平台默认的处理类
+      searchFormContent: null,
+      initSearchProps: [], // 初始查询的字段属性名集合
+      refreshGrid: true, // 字段配置刷新列表时用于重新渲染列表的状态位
+      optionTableHeight, // option传递的table高度
+      isFormSubTable: false,
+      isShowPageDialog: false, // 是否显示弹框
+      jumpPageSetting: null,
+      pageCode,
+      maxHeight: null,
+      pageHeight, // 页面高度
+      currentSelectCell: null,
+      isLazy, // 树形结构时是否懒加载，默认是懒加载的
+      defaultExpandAll, // 树形结构是否默认展开所有节点
+      parentFormData: null, // 父表单实体信息
+      stripe: true,
+      dataSourceType,
+      pageDevMode,
+      toolbarFieldParam: [],
+      tableName: null,
+      listName: null,
+      subTableData: [],
+      isShowPage: false, // 子表或普通列表是否显示分页
+      isSubTableShowPage: false, // 子表是否显示分页
+      isDelete: false, // 获取请求参数是否删除后
+    }
+  },
+  computed: {
+    visibleColumns() {
+      const gridParams = store.get(this.code)
+      const operations = this.getOptionOperations()
+      gridParams.canntEdit = false
+      if (
+        operations &&
+        operations.operation &&
+        operations.operation.length > 0
+      ) {
+        operations.operation.forEach((buttonInfo) => {
+          if (buttonInfo.props.code === 'lineEditUpdate') {
+            if (checkPermission(buttonInfo.props.functionCode)) {
+              gridParams.canntEdit = true
+            }
+          }
+        })
+      }
+      if (
+        typeof this.options.isAdministerListView !== 'undefined' &&
+        this.options.isAdministerListView != null &&
+        this.options.isAdministerListView === true
+      ) {
+        return this.columns
+      } else {
+        return this.columns.filter((column) => {
+          if (
+            typeof this.options.multiple !== 'undefined' &&
+            this.options.multiple === false &&
+            column.prop === '$selection'
+          ) {
+            // 表示不显示“多选”列
+            return false
+          }
+          if (
+            typeof this.options.showIndex !== 'undefined' &&
+            this.options.showIndex === false &&
+            column.prop === '$index'
+          ) {
+            // 表示不显示“序号”列
+            return false
+          }
+          let isVisible
+          if (column.show === undefined || column.show) {
+            isVisible = true
+            const hiddenColumns = this.options.hiddenColumns
+            if (
+              hiddenColumns &&
+              hiddenColumns.length > 0 &&
+              hiddenColumns.indexOf(column.prop) !== -1
+            ) {
+              // 如果当前字段包含在隐藏字段集合中，则不显示该字段
+              isVisible = false
+              return isVisible
+            }
+            // 给列配置操作属性
+            this.initColumnOperation(column, operations)
+            if (!gridParams.$dataTypeMap) {
+              gridParams.$dataTypeMap = {}
+            }
+            // sql时行编辑保存后台代码需要
+            gridParams.$dataTypeMap[column.prop] = column.dataType
+          } else {
+            isVisible = false
+          }
+          // 存储有默认值的字段集合
+          this.storeHasDefaultValueColumns(column, gridParams)
+          return isVisible
+        })
+      }
+    },
+    spanArr() {
+      const spanArr = []
+      for (const column of this.columns) {
+        if (
+          column.span ||
+          (this.mergeFields && this.mergeFields.indexOf(column.prop) !== -1)
+        ) {
+          spanArr[column.prop] = getSpanValuesForColumn(
+            this.gridData,
+            column.prop,
+            column.mergerCellBasis
+          )
+        }
+      }
+      return spanArr
+    },
+    showSummary() {
+      return (
+        this.basicInfo.summary !== undefined && this.basicInfo.summary !== 'no'
+      )
+    },
+    // 返回table用来确定唯一的字段。必须配置，否则树形结构时无法显示子集合。
+    getRowKeyProp() {
+      const gridParams = store.get(this.code)
+      if (gridParams && gridParams.options && gridParams.options.rowKeyProp) {
+        return gridParams.options.rowKeyProp
+      } else {
+        if (this.dataSourceType === 'oracle') {
+          return 'ID'
+        } else {
+          return 'id'
+        }
+      }
+    },
+    // ,
+    // hasLoadMainTable() {
+    //   const hasLoadMainTable = store.get('hasLoadMainTable')
+    //   if (typeof (hasLoadMainTable) === 'undefined') {
+    //     return false
+    //   }
+    //   return hasLoadMainTable
+    // }
+  },
+  watch: {
+    'options.SuperGrid': {
+      deep: true,
+      handler: function () {
+        this.externalClickFlag = true
+        console.log('监听到数据改变')
+        this.initSetting()
+        this.initialize()
+      },
+    },
+    // 监控列表数据修改，列表作为表单编辑器中子表时使用
+    gridData: {
+      deep: true,
+      immediate: true,
+      handler: function (Val) {
+        if (!this.isSubTableShowPage) {
+          // 列表子表不分页时使用
+          $emit(this, 'change-grid-data', this.gridData)
+        }
+      },
+    },
+    // 监控列表数据修改，列表作为表单编辑器中子表时使用
+    subTableData: {
+      deep: true,
+      immediate: true,
+      handler: function () {
+        if (this.isSubTableShowPage) {
+          // 列表子表分页时使用
+          const gridParams = store.get(this.code)
+          $emit(this, 'change-grid-data', this.subTableData)
+          if (
+            gridParams.isChangePage !== undefined &&
+            gridParams.isChangePage
+          ) {
+            // 表示新建记录时
+            // 新建记录时跳转到最后一页
+            const lastPageNum = getLastPageNum(
+              this.subTableData.length,
+              this.pageSize
+            )
+            // 表示最后一页页码和当前页不同时需要切换页码
+            if (lastPageNum !== this.currentPage) {
+              // 切换当前页码为最后一页
+              this.currentPage = lastPageNum
+              // 切换当前页码到最后一页的数据
+              this.changePage()
+            } else {
+              // 表示不需要切换页码
+              this.gridData = this.getSubTableGridData(this.subTableData)
+              gridParams.gridData = this.gridData // 完成深拷贝，复制一份对象，行编辑时使用
+              gridParams.orgGridData = [].concat(
+                JSON.parse(JSON.stringify(this.gridData))
+              )
+            }
+            if (gridParams.lineEdit.editingCell) {
+              gridParams.lineEdit.editingCell.row = this.gridData.length
+            }
+            // 使用完状态还原
+            gridParams.isChangePage = false
+          } else {
+            // 表示不是子表新建记录
+            this.gridData = this.getSubTableGridData(this.subTableData)
+            gridParams.gridData = this.gridData
+            // 完成深拷贝，复制一份对象，行编辑时使用
+            gridParams.orgGridData = [].concat(
+              JSON.parse(JSON.stringify(this.gridData))
+            )
+          }
+        }
+      },
+    },
+    currentSelectCell: {
+      deep: true,
+      handler: function (newVal, oldVal) {
+        this.$nextTick(() => {
+          if (newVal) {
+            // 手动触发新单元格的点击事件
+            newVal.click()
+          }
+          if (oldVal) {
+            // 清空上一个单元格的选中样式
+            oldVal.style.border = ''
+          }
+        })
+      },
+    },
+    'options.validateRules': {
+      deep: true,
+      handler: function () {
+        this.externalClickFlag = true
+        console.log(
+          '监听到数据改变================',
+          this.options.validateRules
+        )
+        const gridParams = store.get(this.code)
+        if (gridParams && gridParams.options) {
+          gridParams.options.validateRules = this.options.validateRules
+          store.set(this.code, gridParams)
+        }
+        // this.initSetting()
+        // this.initialize()
+      },
+    },
+    'options.subTableCanAdd': {
+      deep: true,
+      handler: function () {
+        const gridParams = store.get(this.code)
+        if (gridParams && gridParams.options) {
+          gridParams.options.subTableCanAdd = this.options.subTableCanAdd
+          store.set(this.code, gridParams)
+        }
+      },
+    },
+    // pageSize每页显示多少条，改变时抛出事件，配置出来的流程表单子表验证提示信息时使用，例如：“第x页第x条记录，xxx必填”，获得页数时需要使用
+    pageSize: {
+      deep: true,
+
+      handler(newValue, oldValue) {
+        $emit(this, 'change-rows-per-page', this.pageSize)
+      },
+    },
+  },
+  provide() {
+    return {}
+  },
+  created() {
+    store.set(this.code, getGridParams())
+    store.set('_list_code', this.code)
+    this.initSetting()
+    this.judgeIsFormSubTable()
+    let stripe = true
+    if (isHasOptionFunction('rowStyleRender', this.code)) {
+      // 当行需要自定义样式时，斑马线样式会影响效果，所以需要去掉斑马线配置
+      stripe = false
+    }
+    this.stripe = stripe
+
+    // if (this.parentProp) {
+    //   // 表示配置了树形配置
+    //   this.treeProps = this.getTreeProps()
+    // }
+    // this.showDemo()
+  },
+  mounted() {
+    this.initialize().then(() => {
+      const gridParams = store.get(this.code)
+      if (
+        gridParams &&
+        gridParams.basicInfo &&
+        gridParams.basicInfo.tableName
+      ) {
+        this.tableName = gridParams.basicInfo.tableName
+      }
+      if (gridParams && gridParams.basicInfo && gridParams.basicInfo.name) {
+        this.listName = gridParams.basicInfo.name
+      }
+      this.$nextTick(() => {
+        // 将子表选项组值传递super-pages中，解决到处报告时子表选项组赋值问题
+        this.columns.forEach((column) => {
+          if (column.valueSet) {
+            $emit(this, 'set-select-options', {
+              prop: this.code + '.' + column.prop,
+              valueSet: column.valueSet,
+            })
+          }
+        })
+        this.rowDrop()
+        this.columnDrop()
+        store.get(this.code).superGrid = this.$refs.superGrid
+        if (this.query && this.query.showType === 'embedded') {
+          // 嵌入查询时，刚进台账要计算一次列表高度
+          this.resizeTableHeight()
+        } else {
+          this.$watch(
+            'showSearch',
+            function (newVal, oldVal) {
+              this.resizeTableHeight()
+            },
+            {
+              immediate: true,
+              deep: true,
+            }
+          )
+        }
+
+        this.$watch(
+          'hasLoadData',
+          function (newVal, oldVal) {
+            if (newVal === true) {
+              this.$nextTick(() => {
+                const gridParams = store.get(this.code)
+                if (isHasOptionFunction('gridComplete', this.code)) {
+                  gridParams.options.gridComplete.call(this, {
+                    gridData: this.isSubTableShowPage
+                      ? this.subTableData
+                      : this.gridData,
+                    columns: gridParams.columns,
+                    superGrid: this.$refs.superGrid,
+                    pageGridData: this.isSubTableShowPage
+                      ? this.gridData
+                      : null,
+                  })
+                }
+              })
+            }
+          },
+          {
+            immediate: true,
+            deep: true,
+          }
+        )
+
+        const that = this
+        const isShowUserTreeDialog =
+          document.querySelector('.user-tree') !== null
+        // 当前页面监视键盘输入
+        document.querySelector('.' + this.code).onkeydown = function (e) {
+          if (!that.isShowPageDialog && !isShowUserTreeDialog) {
+            // 当前列表页面没有弹框或选人弹框，才走键盘监视事件
+            // 事件对象兼容
+            // eslint-disable-next-line no-caller
+            const e1 =
+              e || event || window.event || arguments.callee.caller.arguments[0]
+            // 处于行编辑状态时，左右上下箭头事件不需要生效
+            const isEdit = that.isEditRow(that)
+            // 键盘按键判断:左箭头-37;上箭头-38；右箭头-39;下箭头-40
+            // 左
+            if (e1 && e1.keyCode === 37) {
+              // 左箭头
+              if (!isEdit) {
+                that.selectLeftCell(that)
+              }
+            } else if (e1 && e1.keyCode === 38) {
+              // 上箭头
+              if (!isEdit) {
+                that.selectUpCell(that)
+              }
+            } else if (e1 && e1.keyCode === 39) {
+              // 右箭头
+              if (!isEdit) {
+                that.selectRightCell(that)
+              }
+            } else if (e1 && e1.keyCode === 40) {
+              // 下箭头
+              if (!isEdit) {
+                that.selectDownCell(that)
+              }
+            } else if (e1 && e1.keyCode === 13) {
+              // 回车
+              that.enterOperation(that)
+            } else if (e1 && e1.keyCode === 27) {
+              // ESC
+              that.escOperation(that)
+            }
+          }
+        }
+      })
+      if (this.query && this.query.showType === 'popup') {
+        $emit(this, 'setSearchType', true)
+      }
+      this.$watch(
+        'options.extraParam',
+        function (newValue, oldVal) {
+          this.options['extraParam'] = newValue
+          const gridParams = store.get(this.code)
+          gridParams.options.extraParam = newValue
+        },
+        {
+          deep: true,
+        }
+      )
+    })
+  },
+  methods: {
+    ...events,
+    ...publicMethods,
+    ...superGridService,
+    ...apis,
+    isDeleteChange(boole) {
+      this.isDelete = boole
+    },
+    isShowPageArea() {
+      if (this.isFormSubTable) {
+        return (
+          this.options.showPageArea !== undefined &&
+          this.options.showPageArea === true
+        )
+      } else {
+        return true
+      }
+    },
+    resizeTableHeight() {
+      this.$nextTick(() => {
+        let tableHeight = getTableHeight(
+          this.$refs.superGrid,
+          this.code,
+          this.pageHeight
+        )
+        const gridParams = store.get(this.code)
+        if (isHasOptionFunction('resizeHeight', this.code)) {
+          let searchHeight = 0
+          if (this.$refs.sf) {
+            // 获得查询区高度
+            searchHeight = this.$refs.sf.$el.offsetHeight
+          }
+          const newHeight = gridParams.options.resizeHeight.call(this, {
+            code: this.code,
+            height: tableHeight,
+            searchHeight: searchHeight,
+          })
+          if (newHeight) {
+            tableHeight = newHeight
+          }
+        }
+        this.height = tableHeight
+        if (this.optionTableHeight) {
+          this.height = this.optionTableHeight
+        } else if (
+          gridParams.options &&
+          gridParams.options.isFormSubTable &&
+          gridParams.options.isPdfEditor
+        ) {
+          this.height = null
+        } else if (
+          gridParams.options &&
+          gridParams.options.isFormSubTable &&
+          gridParams.options.formSetHeight
+        ) {
+          this.height = gridParams.options.formSetHeight
+        } else if (
+          !this.basicInfo.displayEffect ||
+          this.basicInfo.displayEffect === '' ||
+          this.basicInfo.displayEffect === 'default'
+        ) {
+          this.height = null
+        }
+        this.maxHeight = tableHeight
+        if (
+          gridParams.options &&
+          gridParams.options.isFormSubTable &&
+          gridParams.options.isPdfEditor
+        ) {
+          this.maxHeight = null
+        } else if (
+          gridParams.options &&
+          gridParams.options.isFormSubTable &&
+          gridParams.options.formSetMaxHeight
+        ) {
+          this.maxHeight = gridParams.options.formSetMaxHeight
+        }
+      })
+    },
+    // 回车键
+    enterOperation(that) {
+      const gridParams = store.get(that.code)
+      if (gridParams.options && gridParams.options.isFormSubTable) {
+        // 如果是子表，只是取消行编辑状态
+        const editRow = gridParams.$editRow
+        if (editRow) {
+          setEntityFieldValue(editRow, '$editing', false)
+          gridParams.$editRow = null
+        }
+      } else {
+        // 不是子表
+        if (gridParams.options && !gridParams.options.isFormSubTable) {
+          const currentSelectCell = that.currentSelectCell
+          if (currentSelectCell) {
+            const textAreaCell = currentSelectCell.querySelector('.el-textarea')
+            if (textAreaCell) {
+              return
+            }
+          }
+          // 表示不是表单子表时，才需要回车保存
+          const rowIndex = gridParams.$rowIndex
+          if (rowIndex !== undefined && rowIndex !== null) {
+            const row = gridParams.gridData[rowIndex]
+            if (isEditOptionFunction('enter', that.listCode)) {
+              gridParams.options.lineEditOptions.enter.call(
+                that,
+                rowIndex,
+                that.column,
+                row,
+                gridParams.orgGridData[rowIndex]
+              )
+            } else {
+              that.saveRow(rowIndex, that.code)
+            }
+          }
+        }
+      }
+    },
+    // ESC键取消行编辑
+    escOperation(that) {
+      const gridParams = store.get(that.code)
+      if (gridParams.options && !gridParams.options.isFormSubTable) {
+        // 表示不是表单子表时，才需要处理ESC取消操作
+        const rowIndex = gridParams.$rowIndex
+        if (rowIndex !== undefined && rowIndex !== null) {
+          that.restoreRow(rowIndex, that.code)
+          const row = gridParams.gridData[rowIndex]
+          if (isEditOptionFunction('esc', that.listCode)) {
+            gridParams.options.lineEditOptions.esc.call(
+              that,
+              rowIndex,
+              that.column,
+              row,
+              gridParams.orgGridData[rowIndex]
+            )
+          } else {
+            that.restoreRow(rowIndex, that.code)
+          }
+        }
+      }
+    },
+    // 是否正在编辑行，如果正在编辑左右上下箭头事件不需要生效
+    isEditRow(that) {
+      const currentSelectCell = that.currentSelectCell
+      if (currentSelectCell) {
+        const inputInner = currentSelectCell.querySelector('.el-input__inner')
+        if (inputInner) {
+          return true
+        }
+      }
+      return false
+    },
+    // 选中上方单元格
+    selectUpCell(that) {
+      const currentSelectCell = that.currentSelectCell
+      if (currentSelectCell) {
+        const trDom = currentSelectCell.parentNode
+        if (trDom) {
+          let tdClass = null
+          let classes = null
+          const classObj = currentSelectCell.attributes['class']
+          if (classObj) {
+            classes = classObj['nodeValue']
+          }
+          if (classes && classes.indexOf(' ') > 0) {
+            const classArr = classes.split(' ')
+            tdClass = classArr[0]
+          }
+          const preTr = trDom['previousSibling']
+          if (preTr) {
+            const targetCell = preTr.querySelector('.' + tdClass)
+            that.currentSelectCell = targetCell
+          }
+        }
+      }
+    },
+    // 选中下方单元格
+    selectDownCell(that) {
+      const currentSelectCell = that.currentSelectCell
+      if (currentSelectCell) {
+        const trDom = currentSelectCell.parentNode
+        if (trDom) {
+          let tdClass = null
+          let classes = null
+          const classObj = currentSelectCell.attributes['class']
+          if (classObj) {
+            classes = classObj['nodeValue']
+          }
+          if (classes && classes.indexOf(' ') > 0) {
+            const classArr = classes.split(' ')
+            tdClass = classArr[0]
+          }
+          const preTr = trDom['nextSibling']
+          if (preTr) {
+            const targetCell = preTr.querySelector('.' + tdClass)
+            that.currentSelectCell = targetCell
+          }
+        }
+      }
+    },
+    // 选中右侧单元格
+    selectRightCell(that) {
+      if (that.currentSelectCell) {
+        const nextCell = that.currentSelectCell['nextSibling']
+        if (nextCell) {
+          let classes
+          const classObj = nextCell.attributes['class']
+          if (classObj) {
+            classes = classObj['nodeValue']
+          }
+          if (classes && classes.indexOf(' is-hidden') > 0) {
+            // 表示需要处理冻结列情况
+            that.getTargetCellWithFixTable(that, classes, nextCell)
+          } else {
+            that.currentSelectCell = nextCell
+          }
+        }
+      }
+    },
+    // 选中左侧单元格
+    selectLeftCell(that) {
+      if (that.currentSelectCell) {
+        const preCell = that.currentSelectCell['previousSibling']
+        if (preCell) {
+          let classes
+          const classObj = preCell.attributes['class']
+          if (classObj) {
+            classes = classObj['nodeValue']
+          }
+          if (classes && classes.indexOf(' is-hidden') > 0) {
+            // 表示需要处理冻结列情况
+            that.getTargetCellWithFixTable(that, classes, preCell)
+          } else {
+            that.currentSelectCell = preCell
+          }
+        }
+      }
+    },
+    // 左右箭头时，有冻结列时，获得目的单元格
+    getTargetCellWithFixTable(that, classes, currentCell) {
+      const tr = currentCell.parentNode
+      if (tr) {
+        const tbody = tr.parentNode
+        if (tbody) {
+          const table = tbody.parentNode
+          if (table) {
+            const tableDiv = table.parentNode
+            if (tableDiv) {
+              const classObj = tableDiv.attributes['class']
+              if (classObj) {
+                const tableDivClasses = classObj['nodeValue']
+                if (
+                  tableDivClasses &&
+                  tableDivClasses.indexOf('el-table__fixed-body-wrapper') >= 0
+                ) {
+                  // 表示当前单元格是冻结列中的，需要在非冻结列中获得该单元格
+                  let tdClass = null
+                  if (classes && classes.indexOf(' ') > 0) {
+                    const classArr = classes.split(' ')
+                    tdClass = classArr[0]
+                  }
+                  if (tdClass) {
+                    const targetCell = document.querySelector(
+                      '.' +
+                        this.code +
+                        ' .el-table__body-wrapper .current-row .' +
+                        tdClass
+                    )
+                    that.currentSelectCell = targetCell
+                  }
+                } else if (
+                  tableDivClasses &&
+                  tableDivClasses.indexOf('el-table__body-wrapper') >= 0
+                ) {
+                  // 表示当前单元格是非冻结列中的，需要在冻结列中获得该单元格
+                  let tdClass = null
+                  if (classes && classes.indexOf(' ') > 0) {
+                    const classArr = classes.split(' ')
+                    tdClass = classArr[0]
+                  }
+                  if (tdClass) {
+                    const targetCell = document.querySelector(
+                      '.' +
+                        this.code +
+                        ' .el-table__fixed-body-wrapper .current-row  .' +
+                        tdClass
+                    )
+                    that.currentSelectCell = targetCell
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    },
+    // 存储有默认值的字段集合
+    storeHasDefaultValueColumns(column, gridParams) {
+      if (
+        column.defaultValue !== undefined &&
+        column.defaultValue !== null &&
+        column.defaultValue !== ''
+      ) {
+        if (
+          gridParams.defaultValueColumns === undefined ||
+          gridParams.defaultValueColumns === null
+        ) {
+          gridParams.defaultValueColumns = []
+        }
+        gridParams.defaultValueColumns.push(column)
+      }
+    },
+    // 判断是不是表单子表的使用
+    judgeIsFormSubTable() {
+      // 没有分页
+      // 没有排序
+      const gridParams = store.get(this.code)
+      if (
+        gridParams &&
+        gridParams.options &&
+        gridParams.options.isFormSubTable !== undefined &&
+        gridParams.options.isFormSubTable === true
+      ) {
+        this.isFormSubTable = true
+      }
+    },
+    /**
+     * 给列设置操作信息
+     * @param operationSetting 操作列设置，{prop:[{按钮组件},{按钮组件},{link组件}],prop:[{},{}]}
+     */
+    initColumnOperation(column, operationSetting) {
+      if (operationSetting && operationSetting[column.prop]) {
+        const prop = column.prop
+        column.operations = operationSetting[prop]
+      }
+    },
+    // 获得属性列操作信息
+    getOptionOperations() {
+      if (
+        typeof this.options['operations'] !== 'undefined' &&
+        this.options['operations'] !== null
+      ) {
+        return this.options['operations']
+      }
+    },
+    initSetting() {
+      const gridParams = store.get(this.code)
+      if (typeof this.options !== 'undefined') {
+        Object.assign(gridParams.options, this.options)
+        if (!gridParams.options.lineEditOptions) {
+          gridParams.options.lineEditOptions = gridParams.defaultLineEditOptions
+        }
+        if (
+          typeof this.options['customFormatter'] !== 'undefined' &&
+          this.options['customFormatter'] !== null
+        ) {
+          this.myCustomFormatter = this.options['customFormatter']
+        }
+      } else {
+        gridParams.options = {}
+        gridParams.options.lineEditOptions = gridParams.defaultLineEditOptions
+      }
+      if (!isHasEditOption('input', this.code)) {
+        gridParams.options.lineEditOptions.input =
+          gridParams.defaultLineEditOptions.input
+      }
+      if (
+        !this.myCustomFormatter &&
+        typeof this.customFormatter !== 'undefined' &&
+        this.customFormatter !== null
+      ) {
+        this.myCustomFormatter = this.customFormatter
+      }
+      if (
+        this.options &&
+        this.options.dynamicServiceName &&
+        this.options.dynamicServiceName !== undefined
+      ) {
+        this.dynamicServiceName = this.options.dynamicServiceName
+        gridParams.dynamicServiceName = this.dynamicServiceName
+      }
+      if (
+        this.options &&
+        this.options.system &&
+        this.options.system !== undefined
+      ) {
+        gridParams.system = this.options.system
+      }
+      if (
+        this.options &&
+        this.options.additionalParamMap &&
+        this.options.additionalParamMap !== undefined
+      ) {
+        gridParams.additionalParamMap = this.options.additionalParamMap
+      }
+    },
+    changeRowStyle(param) {
+      // param的格式：{row, rowIndex}
+      const gridParams = store.get(this.code)
+      if (this.lineEdit && this.lineEdit.editable) {
+        if (param.rowIndex === gridParams.$rowIndex) {
+          if (
+            !isObjectValueEqual(
+              param.row,
+              gridParams.orgGridData[gridParams.$rowIndex]
+            )
+          ) {
+            // return { 'background': 'rgb(245, 181, 203)' }
+          }
+        }
+      }
+      if (isHasOptionFunction('rowStyleRender', this.code)) {
+        return gridParams.options.rowStyleRender.call(this, param)
+      }
+      if (
+        this.options &&
+        this.options.renderRow &&
+        this.options.renderRow.hasOwnProperty(param.rowIndex)
+      ) {
+        return { background: this.options.renderRow[param.rowIndex] }
+      }
+    },
+    changeCellStyle(param) {
+      const gridParams = store.get(this.code)
+      let funName = null
+      let columnOptions = null
+      if (param && param.column && param.column.property) {
+        if (gridParams && gridParams.columnOptionMap) {
+          if (gridParams.columnOptionMap[param.column.property]) {
+            columnOptions = gridParams.columnOptionMap[param.column.property]
+            if (columnOptions.events && columnOptions.events.cellStyle) {
+              funName = columnOptions.events.cellStyle
+            }
+          }
+        }
+      }
+      // {row, column, rowIndex, columnIndex}
+      // 获取对应单元格配置
+      if (isHasOptionFunction('cellStyleRender', this.code)) {
+        return gridParams.options.cellStyleRender.call(this, param)
+      } else if (
+        funName !== null &&
+        columnOptions !== null &&
+        gridParams.options &&
+        gridParams.options['eventCallBack'] &&
+        gridParams.options['eventCallBack'][funName] &&
+        typeof gridParams.options['eventCallBack'][funName] === 'function'
+      ) {
+        const params = {
+          value: param.row[param.column.property],
+          row: param.row,
+          column: columnOptions,
+          prop: param.column.property,
+        }
+        return gridParams.options['eventCallBack'][funName].call(this, params)
+      }
+    },
+    changeHeaderStyle(param) {
+      // param的格式：{row, column, rowIndex, columnIndex}
+      // 区分是编辑模式还是应用模式
+      if (
+        typeof this.options.isAdministerListView !== 'undefined' &&
+        this.options.isAdministerListView != null &&
+        this.options.isAdministerListView === true
+      ) {
+        // 编辑模式
+        const column = param.column
+        if (column.type === 'selection') {
+          if (this.backgroundColorMap['$selection']) {
+            return { background: this.backgroundColorMap['$selection'] }
+          }
+        } else if (
+          column.type &&
+          column.type === 'default' &&
+          !column.property
+        ) {
+          if (this.backgroundColorMap['$index']) {
+            return { background: this.backgroundColorMap['$index'] }
+          }
+        } else {
+          if (column.property && this.backgroundColorMap[column.property]) {
+            return { background: this.backgroundColorMap[column.property] }
+          }
+        }
+      } else {
+        const gridParams = store.get(this.code)
+        let funName = null
+        let columnOptions = null
+        if (param && param.column && param.column.property) {
+          if (gridParams && gridParams.columnOptionMap) {
+            if (gridParams.columnOptionMap[param.column.property]) {
+              columnOptions = gridParams.columnOptionMap[param.column.property]
+              if (
+                columnOptions.events &&
+                columnOptions.events.headerCellStyle
+              ) {
+                funName = columnOptions.events.headerCellStyle
+              }
+            }
+          }
+        }
+        // 应用模式
+        // 修改表头样式，当某些字段需要编辑时，某些字段不需要编辑时，为了突出显示有权限编辑的字段，可以使用该功能
+        if (
+          gridParams.options.renderHeader &&
+          gridParams.options.renderHeader.props
+        ) {
+          const column = param.column
+          const props = gridParams.options.renderHeader.props
+          const propsArr = props.split(',')
+          for (let i = 0; i < propsArr.length; i++) {
+            const prop = propsArr[i]
+            if (column.property === prop.trim()) {
+              let backgroundColor = '#c3f4e2'
+              if (
+                typeof gridParams.options.renderHeader.color !== 'undefined'
+              ) {
+                backgroundColor = gridParams.options.renderHeader.color
+              }
+              return { background: backgroundColor }
+            }
+          }
+        } else if (
+          funName !== null &&
+          columnOptions !== null &&
+          gridParams.options &&
+          gridParams.options['eventCallBack'] &&
+          gridParams.options['eventCallBack'][funName] &&
+          typeof gridParams.options['eventCallBack'][funName] === 'function'
+        ) {
+          // const param = { value: param.row[param.column.property], row: param.row, column: columnOptions, prop: param.column.property }
+          return gridParams.options['eventCallBack'][funName].call(this, param)
+        }
+      }
+    },
+    fetchData(searchParam, isSearch, parentRowIds, resove) {
+      const gridParams = store.get(this.code)
+      // 查询数据需要区分，如果时列表管理编辑模式，使用静态数据
+      if (gridParams.options && gridParams.options.isPageInfo) {
+        // 预览模式且从表单子表进入
+      } else {
+        if (gridParams.options && gridParams.options.isAdministerListView) {
+          // 根据类型生成静态数据
+          if (
+            gridParams.options.SuperGrid &&
+            gridParams.options.SuperGrid.simulationDate
+          ) {
+            if (isHasOptionFunction('gridDataLoaded', this.code)) {
+              const gridData = gridParams.options.gridDataLoaded.call(this, {
+                gridData: gridParams.options.SuperGrid.simulationDate,
+                columns: gridParams.columns,
+              })
+              if (gridData) {
+                this.gridData = gridData
+              } else {
+                this.gridData = gridParams.options.SuperGrid.simulationDate
+              }
+            } else {
+              this.gridData = gridParams.options.SuperGrid.simulationDate
+            }
+            gridParams.gridData = this.gridData
+          }
+        } else if (
+          gridParams.options &&
+          gridParams.options.isFormSubTable &&
+          gridParams.options.subTableData &&
+          gridParams.options.subTableData.length > 0
+        ) {
+          this.hasLoadData = false
+          gridParams.loaded = true
+          let subTableData = []
+          // 如果有子表数据，则展示传递的子表数据
+          if (isHasOptionFunction('gridDataLoaded', this.code)) {
+            const gridData = gridParams.options.gridDataLoaded.call(this, {
+              gridData: gridParams.options.subTableData,
+              columns: gridParams.columns,
+            })
+            if (gridData) {
+              subTableData = gridData
+              this.hasLoadData = true
+            } else {
+              subTableData = gridParams.options.subTableData
+              this.hasLoadData = true
+            }
+          } else {
+            subTableData = gridParams.options.subTableData
+            this.hasLoadData = true
+          }
+          if (subTableData) {
+            // 子表时所有记录的所有字段设置默认值null，优化子表编辑时性能
+            subTableData.forEach((item) => {
+              this.setColumnsDefaultValue(gridParams.allColumns, item)
+            })
+          }
+          if (this.pagination && this.isSubTableShowPage === true) {
+            // 表示子表需要显示分页
+            this.subTableData = subTableData
+            // 更新记录总条数
+            this.pagination.total = this.subTableData.length
+            gridParams.subTableData = this.subTableData
+            this.gridData = this.getSubTableGridData(this.subTableData)
+          } else {
+            this.gridData = subTableData
+          }
+          gridParams.gridData = this.gridData
+          // 完成深拷贝，复制一份对象，行编辑时使用
+          gridParams.orgGridData = [].concat(
+            JSON.parse(JSON.stringify(this.gridData))
+          )
+        } else {
+          return this.fetchListData(searchParam, isSearch, parentRowIds, resove)
+        }
+      }
+    },
+    getSubTableGridData(subTableData) {
+      let gridData = subTableData
+      if (this.isSubTableShowPage === true) {
+        if (subTableData && subTableData.length > 0) {
+          // const subTableData = JSON.parse(JSON.stringify(this.subTableData))
+          this.pagination.total = subTableData.length
+          // 当前是第几页
+          let currentPage = this.currentPage
+          if (currentPage === undefined || currentPage === null) {
+            currentPage = 1
+          }
+          // 每页显示多少条记录
+          let pageSize = this.pageSize
+          if (pageSize === null && this.pagination) {
+            pageSize = this.pagination.pageSize
+          }
+          if (pageSize === undefined || pageSize === null) {
+            pageSize = 20
+          }
+          // 当前页的第一条记录的数组下标
+          const startRowIndex = (currentPage - 1) * pageSize
+          // 当前页的最后一条记录的数组下标
+          let lastRowIndex = startRowIndex + pageSize
+          if (subTableData.length > startRowIndex) {
+            // 表示当前页有记录
+            if (lastRowIndex > subTableData.length) {
+              // 表示最后一条记录超过下标了
+              lastRowIndex = subTableData.length
+            }
+            // 前包，后不包
+            gridData = subTableData.slice(startRowIndex, lastRowIndex)
+          }
+        }
+      }
+      if (gridData === undefined || gridData === null) {
+        gridData = []
+      }
+      return gridData
+    },
+    fetchListData(searchParam, isSearch, parentRowIds, resove) {
+      return new Promise((resolve, reject) => {
+        this.isLoading = true
+        this.hasLoadData = false
+        if (isSearch === undefined || isSearch === false) {
+          // 如果不是查询时才需要从缓存中获得结果
+          // 如果是刷新当前列表，则需要获得缓存中的window.sessionStorage
+          const isRefreshList = window.sessionStorage.getItem(
+            'refreshList-' + this.code
+          )
+          // console.log('fetchData--isRefreshList--', isRefreshList)
+          if (isRefreshList !== undefined && isRefreshList === 'true') {
+            const searchParamJson = window.sessionStorage.getItem(
+              'searchParam-' + this.code
+            )
+            // console.log('fetchData--searchParamJson--', searchParamJson)
+            // console.log('fetchData--pagination--', this.pagination)
+            if (
+              searchParamJson !== undefined &&
+              searchParamJson !== null &&
+              searchParamJson !== ''
+            ) {
+              searchParam = JSON.parse(searchParamJson)
+              const pagination = searchParam.pagination
+              if (pagination) {
+                this.currentPage = pagination.currentPage
+                this.pagination.pageSize = pagination.pageSize
+                this.pagination.showTotal = pagination.showTotal
+              }
+              this.getInitSearchForm(searchParam.searchForm)
+              // this.searchFormContent = searchParam.searchForm
+            }
+          }
+        }
+        window.sessionStorage.removeItem('refreshList-' + this.code)
+        if (searchParam === undefined) {
+          searchParam = this.getSearchParam()
+        }
+        const gridParams = store.get(this.code)
+        let param = searchParam
+
+        if (gridParams.options.extraParam || parentRowIds !== undefined) {
+          param = getExtraParam(searchParam, gridParams)
+        }
+        // 导出需要这两个参数
+        gridParams.searchParam = searchParam
+        gridParams.url = this.url
+        let requestUrl = this.url
+        if (parentRowIds !== undefined && parentRowIds !== null) {
+          // 表示是查询子集合时
+          param = Object.assign({}, param)
+          // 清空查询子集合时，分页信息，即不需要分页查询子集合
+          param.searchParam.pagination = null
+          // 父节点id传给后台
+          param['parentIds'] = parentRowIds
+          // 父级字段名，例如：parentId 或 fk_parent_id
+          param['parentProp'] = this.parentProp
+          // 传入系统code
+          param.systemCode = getSystemCode()
+
+          requestUrl = this.options.subRowUrl
+        }
+        // 解决新建后，查询，再点新建报“有未保存的行”问题，解决方案是一旦刷新列表，就还原这些状态
+        gridParams.isCreateRow = false
+        gridParams.isEditRow = false
+        gridParams.$lastSaveRowIndex = null
+        gridParams.$rowIndex = null
+        gridParams.canSaveRow = true
+        // 是否根据权限显示数据
+        gridParams.withDataPermission = gridParams.options.isWithDataPermission
+        // 对象是否是流程实体
+        gridParams.isWorkflowEntity = gridParams.options.isWorkflowEntity
+        // 缓存查询条件及当前页数
+        window.sessionStorage.setItem(
+          'searchParam-' + this.code,
+          JSON.stringify(param)
+        )
+        if (
+          this.parentProp &&
+          searchParam.searchForm &&
+          searchParam.searchForm.length > 0
+        ) {
+          // 表示是树形列表的查询时，查询结果不需要树形显示，后台处理的数据没有加has_children来实现的
+          param.listViewTreeSetting = null
+        }
+        this.$http
+          .post(requestUrl, param)
+          .then((data) => {
+            if (typeof parentRowIds === 'undefined' || parentRowIds === null) {
+              let tableData = []
+              // 对数据做序列化，比如：处理xss攻击
+              if (isHasOptionFunction('gridDataLoaded', this.code)) {
+                const gridData = gridParams.options.gridDataLoaded.call(this, {
+                  gridData: data.data,
+                  columns: gridParams.columns,
+                })
+                if (gridData) {
+                  tableData = gridData
+                } else {
+                  tableData = data.data
+                }
+              } else {
+                tableData = data.data
+              }
+              if (!tableData) {
+                tableData = []
+              }
+              if (gridParams.options.isFormSubTable) {
+                // 子表时默认不全部行编辑
+                if (tableData) {
+                  // 子表时所有记录的所有字段设置默认值null，优化子表编辑时性能
+                  tableData.forEach((item) => {
+                    this.setColumnsDefaultValue(gridParams.allColumns, item)
+                  })
+                }
+                // console.log('子表数据循环', this.gridData)
+                // this.gridData.forEach(item => {
+                //   item.$editing = true
+                // })
+                if (this.pagination && this.isSubTableShowPage === true) {
+                  // 表示子表需要显示分页
+                  this.subTableData = tableData
+                  this.gridData = this.getSubTableGridData(this.subTableData)
+                  gridParams.subTableData = this.subTableData
+                } else {
+                  this.gridData = tableData
+                }
+                if (this.pagination) {
+                  this.pagination.total = tableData.length
+                }
+              } else {
+                this.gridData = tableData
+
+                if (this.pagination) {
+                  this.pagination.total = data.total
+                }
+              }
+              if (data.summaries && Object.keys(data.summaries).length > 0) {
+                this.summaries = data.summaries
+              }
+
+              gridParams.gridData = this.gridData
+
+              // 完成深拷贝，复制一份对象，行编辑时使用
+              gridParams.orgGridData = [].concat(
+                JSON.parse(JSON.stringify(this.gridData))
+              )
+
+              gridParams.pagination = this.pagination
+              gridParams.loaded = true
+
+              // TODO: 输入焦点默认停在第一个可编辑的单元格
+              if (this.lineEdit.editable) {
+                if (typeof isSearch === 'undefined' || isSearch === false) {
+                  // 不是查询时，才需要创建第一行记录
+                  if (this.gridData.length === 0) {
+                    if (
+                      this.options &&
+                      this.options.isDefaultShowEdit !== null &&
+                      this.options.isDefaultShowEdit !== undefined &&
+                      this.options.isDefaultShowEdit === true
+                    ) {
+                      this.createRow(this.code, null, this.gridData)
+                    }
+                  }
+                  if (this.gridData.length > 0) {
+                    this.lineEdit['editingCell'] = {
+                      row: 0,
+                      prop: getFirstEditableColumn(this.code),
+                    }
+                  }
+                }
+              }
+              this.hasLoadData = true
+            } else {
+              // 对数据做序列化，比如：处理xss攻击
+              if (isHasOptionFunction('gridDataLoaded', this.code)) {
+                gridParams.options.gridDataLoaded.call(this, { gridData: data })
+              }
+
+              if (isHasOptionFunction('loadChildrenComplete', this.code)) {
+                gridParams.options.loadChildrenComplete.call(this, {
+                  parentRowIds: parentRowIds,
+                  gridData: data,
+                  columns: gridParams.columns,
+                })
+              }
+              if (typeof resove !== 'undefined' && resove !== null) {
+                // 首次加载或点击三角展开父节点时走该分支
+                // 刷新数据后，移除该父节点下的所有已选中的子节点记录。
+                // 必须调用该方法，否则在删除记录时，数据即使刷新了，已选中集合this.$refs.superGrid.store.states.selection中仍会有该已删除记录，导致再次执行删除报id不存在
+                this.removeGridStoreSelection(parentRowIds)
+                resove(data[parentRowIds[0]])
+              } else {
+                // 刷新父记录对应的子记录集合时需要，例如：删除时
+                parentRowIds.forEach((parentRowId) => {
+                  // 单行父记录id
+                  this.$refs.superGrid.store.states.lazyTreeNodeMap[
+                    parentRowId
+                  ] = data[parentRowId]
+                  this.$refs.superGrid.store.states.treeData[
+                    parentRowId
+                  ].children = data[parentRowId]
+                })
+                // 刷新数据后，移除该父节点下的所有已选中的子节点记录
+                // 必须调用该方法，否则在删除记录时，数据即使刷新了，已选中集合this.$refs.superGrid.store.states.selection中仍会有该已删除记录，导致再次执行删除报id不存在
+                this.removeGridStoreSelection(parentRowIds)
+              }
+              this.hasLoadData = true
+            }
+            resolve()
+          })
+          .catch((error) => {
+            if (isHasOptionFunction('loadError', this.code)) {
+              gridParams.options.loadError.call(this, this.code, error)
+            }
+            reject(error)
+          })
+      })
+    },
+    // 获得初始查询条件对象
+    getInitSearchForm(searchFormArr) {
+      const gridParams = store.get(this.code)
+      if (searchFormArr && searchFormArr.length > 0) {
+        this.searchFormContent = {}
+        searchFormArr.forEach((item) => {
+          // 获得的是"isDeleted"
+          let prop = item.propName
+          // 获得的是“deleted”
+          const columnProp = item.columnProp
+          const dataType = item.dataType
+          if (dataType && dataType === 'BOOLEAN') {
+            prop = columnProp
+          }
+          this.initSearchProps.push(prop)
+          const propValue = item.propValue
+          if (prop && prop.indexOf('.') > 0) {
+            // 动态给searchForm添加属性，包括多级嵌套属性,属性的初始值都为 null
+            addDynamicProp(this.searchFormContent, prop, propValue)
+          } else {
+            this.searchFormContent[prop] = propValue
+          }
+        })
+        gridParams.searchForm = searchFormArr
+        // 调用查询api方法，该方法中调用了@showSearch方法，用于控制“查询”按钮改名为“取消查询”
+        this.showSearchForm()
+      } else {
+        gridParams.searchForm = null
+      }
+    },
+    showDemo() {
+      this.isLoading = true
+      this.$http
+        .get(this.url)
+        .then((data) => {
+          // 根据this.options.showColumns设置显示的字段
+          this.getShowColumns(data)
+
+          Object.assign(this, data)
+          const gridParams = store.get(this.code)
+          gridParams.listCode = this.code
+
+          gridParams.columns = this.columns
+          if (gridParams.columns && this.options.dynamicColumns) {
+            for (var i = 0; i < this.options.dynamicColumns.length; i++) {
+              this.options.dynamicColumns[i].dynamic = true
+              gridParams.columns.push(this.options.dynamicColumns[i])
+            }
+          }
+          gridParams.lineEdit = this.lineEdit
+          gridParams.basicInfo = this.basicInfo
+          gridParams.pagination = this.pagination
+          gridParams.query = this.query
+
+          this.gridData = data.gridData
+          // 对数据做序列化，比如：处理xss攻击
+          if (isHasOptionFunction('gridDataLoaded', this.code)) {
+            const gridData = gridParams.options.gridDataLoaded.call(
+              this,
+              data.gridData
+            )
+            if (gridData) {
+              this.gridData = gridData
+            } else {
+              this.gridData = data.gridData
+            }
+          } else {
+            this.gridData = data.gridData
+          }
+
+          if (this.pagination) {
+            this.pagination.total = data.total
+          }
+          if (!this.gridData) {
+            this.gridData = []
+          }
+          gridParams.gridData = this.gridData
+          // 完成深拷贝，复制一份对象，行编辑时使用
+          gridParams.orgGridData = [].concat(
+            JSON.parse(JSON.stringify(this.gridData))
+          )
+          gridParams.pagination = this.pagination
+
+          // TODO: 输入焦点默认停在第一个可编辑的单元格
+          if (this.lineEdit.editable) {
+            if (this.gridData.length === 0) {
+              this.createRow(this.code, null, this.gridData)
+            }
+            this.lineEdit['editingCell'] = {
+              row: 0,
+              prop: getFirstEditableColumn(this.code),
+            }
+          }
+          if (isHasOptionFunction('gridComplete', this.code)) {
+            gridParams.options.gridComplete.call(
+              this,
+              this.gridData,
+              gridParams.columns
+            )
+          }
+        })
+        .catch((error) => {
+          if (isHasOptionFunction('loadError', this.code)) {
+            const gridParams = store.get(this.code)
+            gridParams.options.loadError.call(this, this.code, error)
+          }
+        })
+    },
+    doSearch(searchForm) {
+      // 修改当前页为第1页
+      this.currentPage = 1
+      // 将toolbar 参数和查询表单参数合并
+      if (searchForm) {
+        if (searchForm.length > 0) {
+          if (this.toolbarFieldParam && this.toolbarFieldParam.length > 0) {
+            if (searchForm.length === 1) {
+              searchForm[0].leftBracket = '('
+              searchForm[0].rightBracket = ')'
+            }
+            if (searchForm[searchForm.length - 1].joinSign === 'or') {
+              searchForm[searchForm.length - 1].joinSign = 'and'
+            }
+            // 拼接
+            // param.concat(toolbarFieldParam)
+            Array.prototype.push.apply(searchForm, this.toolbarFieldParam)
+          }
+        } else {
+          if (this.toolbarFieldParam && this.toolbarFieldParam.length > 0) {
+            searchForm = this.toolbarFieldParam
+          }
+        }
+      }
+      this.search(searchForm, true)
+    },
+    doSearchDialog(searchForm) {
+      // 修改当前页为第1页
+      this.currentPage = 1
+      this.search(searchForm, true)
+      this.closeSearchFormDialog()
+    },
+    // cs123
+    search(searchForm, isSearch, parentRowIds) {
+      // 重新查询列表数据时，抛出refresh事件，供父组件捕获做自己的业务处理
+      $emit(this, 'refresh')
+      const vm = this
+      return new Promise((resolve, reject) => {
+        const gridParams = store.get(vm.code)
+        if (typeof searchForm !== 'undefined' && searchForm !== null) {
+          gridParams.searchForm = searchForm
+        } else {
+          gridParams.searchForm = null
+        }
+        if (gridParams.options && gridParams.options.isAdministerListView) {
+          // 根据类型生成静态数据
+          if (
+            gridParams.options.SuperGrid &&
+            gridParams.options.SuperGrid.simulationDate
+          ) {
+            let gridData
+            if (isHasOptionFunction('gridDataLoaded', vm.code)) {
+              gridData = gridParams.options.gridDataLoaded.call(this, {
+                gridData: gridParams.options.SuperGrid.simulationDate,
+                columns: gridParams.columns,
+              })
+              if (!gridData) {
+                gridData = gridParams.options.SuperGrid.simulationDate
+              }
+            } else {
+              gridData = gridParams.options.SuperGrid.simulationDate
+            }
+            resolve(gridData)
+          }
+        } else if (
+          gridParams.options &&
+          gridParams.options.isFormSubTable &&
+          gridParams.options.subTableData &&
+          gridParams.options.subTableData.length > 0
+        ) {
+          let gridData
+          vm.hasLoadData = false
+          gridParams.loaded = true
+          // 如果有子表数据，则展示传递的子表数据
+          if (isHasOptionFunction('gridDataLoaded', vm.code)) {
+            gridData = gridParams.options.gridDataLoaded.call(this, {
+              gridData: gridParams.options.subTableData,
+              columns: gridParams.columns,
+            })
+            if (!gridData) {
+              gridData = gridParams.options.subTableData
+              vm.hasLoadData = true
+            }
+          } else {
+            gridData = gridParams.options.subTableData
+            vm.hasLoadData = true
+          }
+          resolve(gridData)
+        } else {
+          vm.fetchData(vm.getSearchParam(), isSearch, parentRowIds)
+            .then((data) => {
+              console.log('打印1====', gridParams)
+              if (
+                gridParams !== undefined &&
+                gridParams.options !== undefined &&
+                gridParams.options.isHiddenSearchForm !== undefined &&
+                gridParams.options.isHiddenSearchForm === true
+              ) {
+                // 查询时，是否隐藏查询区域，默认是不隐藏查询区域
+                console.log('打印2====', vm)
+                vm.showSearch = false
+                $emit(vm, 'cancel-search')
+              }
+              console.log('打印3====', vm)
+              console.log('打印4====', vm.$refs)
+              if (vm.$refs && vm.$refs.sf) {
+                console.log('打印5====', vm.$refs.sf)
+                vm.$refs.sf.loading = false
+                vm.$refs.sf.searchComplete()
+              }
+              console.log('打印6====', vm)
+              // 重新计算列表高度
+              this.resizeTableHeight()
+              resolve(data)
+            })
+            .catch((error) => {
+              if (vm.$refs.sf) {
+                vm.$refs.sf.loading = false
+                vm.$refs.sf.searchComplete()
+              }
+              reject(error)
+            })
+        }
+      })
+    },
+    // addSearchParam(searchData) {
+    //   if (searchData && searchData.length > 0) {
+    //     const gridParams = store.get(this.code)
+    //     if (typeof (gridParams.searchForm) !== 'undefined') {
+    //       const searchForm = gridParams.searchForm
+    //       searchForm.concat()
+    //       searchParam.searchForm = gridParams.searchForm
+    //     } else {
+    //       searchParam.searchForm = []
+    //     }
+    //   }
+    // },
+    getPaginationInfo() {
+      const gridParams = store.get(this.code)
+      if (this.pagination) {
+        // 判断是否删除后请求数据
+        if (this.isDelete && this.currentPage > 1) {
+          const pageNum = Math.ceil(
+            (this.pagination.total - this.gridData.length) /
+              this.pagination.pageSize
+          )
+          this.currentPage =
+            this.currentPage > pageNum ? pageNum : this.currentPage
+          this.isDelete = false
+        }
+        const pagination = {
+          currentPage: this.currentPage,
+          pageSize: this.pagination.pageSize,
+          showTotal: this.pagination.showTotal,
+        }
+        if (this.pageSize !== null) {
+          // 表示更改了每页显示的数据条数
+          pagination.pageSize = this.pageSize
+        }
+        if (
+          typeof gridParams.currentPage !== 'undefined' &&
+          gridParams.currentPage !== null
+        ) {
+          // 保持页数时使用
+          pagination.currentPage = gridParams.currentPage
+          // 必须清空一下，否则会导致翻页有问题
+          gridParams.currentPage = null
+        }
+        return pagination
+      } else {
+        // TODO 临时解决列表工具栏有默认值时触发查询，查询没有分页问题，
+        // 因为获取页面默认值后触发查询时候，列表的配置信息，比如分页是否编辑等元数据还没有查询过来
+        return {
+          currentPage: 1,
+          pageSize: 20,
+          showTotal: true,
+        }
+      }
+    },
+    getSearchParam() {
+      const searchParam = {
+        code: this.code,
+      }
+      const gridParams = store.get(this.code)
+      const pagination = this.getPaginationInfo()
+      if (pagination && pagination !== null) {
+        searchParam.pagination = pagination
+      }
+      // 排序信息
+      if (this.sortInfo !== null) {
+        // 表示更改了排序信息
+        searchParam.sorts = this.sortInfo
+      }
+      if (this.mergeFields && this.mergeFields.length > 0) {
+        if (!searchParam.sorts) {
+          searchParam.sorts = []
+        }
+        const mergeFieldsArr = []
+        for (const mergeField of this.mergeFields) {
+          let flag = true
+          for (const so of searchParam.sorts) {
+            if (so.prop === mergeField) {
+              flag = false
+              break
+            }
+          }
+          if (flag) {
+            mergeFieldsArr.push({
+              prop: mergeField,
+              order: 'ascending',
+            })
+          }
+        }
+        mergeFieldsArr.push(...searchParam.sorts)
+        searchParam.sorts = mergeFieldsArr
+      }
+      // 是否有初始过滤条件
+      if (
+        gridParams.options &&
+        typeof gridParams.options.initSearchForm !== 'undefined'
+      ) {
+        searchParam.initSearchForm = gridParams.options.initSearchForm
+      }
+      if (
+        gridParams.query &&
+        typeof gridParams.query.defaultQueryCriteria !== 'undefined'
+      ) {
+        // json字符串转数组
+        searchParam.defaultQueryCriteria = JSON.parse(
+          gridParams.query.defaultQueryCriteria
+        )
+      }
+      if (typeof gridParams.searchForm !== 'undefined') {
+        searchParam.searchForm = gridParams.searchForm
+      } else {
+        searchParam.searchForm = []
+      }
+      if (this.dynamicColumnInfo) {
+        searchParam.dynamicColumnInfo = this.dynamicColumnInfo
+      }
+      if (this.dynamicServiceName) {
+        searchParam.dynamicServiceName = this.dynamicServiceName
+      }
+      const additionalParamMap = gridParams.additionalParamMap
+      if (additionalParamMap) {
+        if (additionalParamMap && typeof additionalParamMap === 'object') {
+          searchParam.additionalParamMap = additionalParamMap
+        } else if (additionalParamMap && additionalParamMap !== '') {
+          searchParam.additionalParamMap = JSON.parse(additionalParamMap)
+        }
+      }
+      return searchParam
+    },
+    getComponentType(prop) {
+      let type = 'NormalColumn'
+      if (prop === '$index') {
+        type = 'IndexColumn'
+      } else if (prop === '$selection') {
+        // 设置选中行时使用
+        store.get(this.code).isMulitiSelect = true
+        type = 'SelectionColumn'
+      } else if (prop === undefined) {
+        type = 'GroupColumn'
+      }
+      return type
+    },
+    focusOnFirstEditableInput() {
+      if (this.basicInfo.editable) {
+        this.lineEdit.editingCell.row = 0
+        this.lineEdit.editingCell.prop = getFirstEditableColumn(this.code)
+      }
+    },
+    handleSizeChange(val) {
+      if (!this.options || !this.options.isPageShow) {
+        // console.log(`每页 ${val} 条`)
+        this.pageSize = val
+        this.pagination.pageSize = val
+        this.changePage()
+      }
+    },
+    handleCurrentChange(val) {
+      if (!this.options || !this.options.isPageShow) {
+        // 翻页操作会导致筛选项发生变化，所以需要清空已有的
+        this.changePage()
+      }
+    },
+    changePage() {
+      // 翻页操作会导致筛选项发生变化，所以需要清空已有的
+      this.$refs.superGrid.clearFilter()
+      // TODO: 把当前页数、每页条数、查询条件、排序信息传回后台
+      if (this.isSubTableShowPage) {
+        this.gridData = this.getSubTableGridData(this.subTableData)
+        const gridParams = store.get(this.code)
+        gridParams.gridData = this.gridData
+        // 完成深拷贝，复制一份对象，行编辑时使用
+        gridParams.orgGridData = [].concat(
+          JSON.parse(JSON.stringify(this.gridData))
+        )
+      } else {
+        this.fetchData(this.getSearchParam())
+      }
+    },
+    handleSortChange({ column, prop, order }) {
+      if (!this.options || !this.options.isPageShow) {
+        let columnSetting = null
+        const items = this.visibleColumns.filter((item) => {
+          return column.property === item.prop
+        })
+        if (items && items.length > 0) {
+          columnSetting = items[0]
+        }
+        if (!isCanRefreshGrid(this.code)) {
+          // 如果最后编辑行没有保存或撤销编辑，则给出提示
+          const gridParams = store.get(this.code)
+          console.log(
+            '请先保存或撤销编辑第' + gridParams.$rowIndex + 1 + '行记录，再排序'
+          )
+          this.$refs.superGrid.clearSort()
+        } else {
+          // TODO: 应该调用fetchData来获取信息，把当前页数、查询条件、排序信息传回后台
+          if (prop !== null && columnSetting && columnSetting !== null) {
+            // 当点击第3次时，prop会是空，表示清空排序字段，还原原顺序
+            let orgProp = columnSetting.orgProp
+            // sql查询时，会把点“.”改为两个下划线"__"
+            const replaceDot = '__'
+            if (orgProp && orgProp.indexOf(replaceDot) > 0) {
+              // 表示包括点“.”，需要把两个下划线"__"重新改为点“.”,否则会导致查询报500错误
+              orgProp = orgProp.replace(replaceDot, '.')
+            }
+            this.sortInfo = [
+              {
+                prop: orgProp,
+                order: order,
+              },
+            ]
+          } else {
+            this.sortInfo = null
+          }
+          this.fetchData(this.getSearchParam())
+          this.focusOnFirstEditableInput()
+          $emit(this, 'sort-change', { columnSetting, prop, order, column })
+        }
+      }
+    },
+    isMergeable(prop) {
+      for (const column of this.columns) {
+        if (column.prop === prop) {
+          if (
+            this.mergeFields &&
+            this.mergeFields.indexOf(column.prop) !== -1
+          ) {
+            return true
+          } else {
+            return column.span
+          }
+        }
+      }
+    },
+    rowSpan({ row, column, rowIndex, columnIndex }) {
+      if (this.isMergeable(column.property)) {
+        const row = this.spanArr[column.property][rowIndex]
+        const col = row > 0 ? 1 : 0
+        return {
+          rowspan: row,
+          colspan: col,
+        }
+      }
+    },
+    packageSummaryColumnProps() {
+      const summaryColumnProps = []
+      this.visibleColumns.forEach((item) => {
+        if (item.total !== undefined && item.total === true) {
+          summaryColumnProps.push(item.prop)
+        }
+      })
+      return summaryColumnProps
+    },
+    getSummaries(param) {
+      // 后台返回时需要处理好序号列和多选列
+      if (this.basicInfo.summary !== 'no') {
+        const summaryMap = this.summaries
+        if (summaryMap) {
+          return this.getCustomSummaries(param, summaryMap)
+        } else {
+          return this.getDefaultSummaries(param)
+        }
+      } else {
+        return []
+      }
+    },
+    getCustomSummaries(param, summaryMap) {
+      // key为字段名，value为
+      const { columns } = param
+      const sums = []
+      columns.forEach((column, index) => {
+        const prop = column.property
+        const summaryVal = summaryMap[prop]
+        if (summaryVal !== undefined && summaryVal !== null) {
+          sums[index] = summaryVal
+        } else {
+          sums[index] = ''
+        }
+      })
+      return sums
+    },
+    getDefaultSummaries(param) {
+      const sums = []
+      const summaryColumnProps = this.packageSummaryColumnProps()
+      if (summaryColumnProps.length > 0) {
+        const { columns, data } = param
+        let totalColIndex = null
+        columns.forEach((column, index) => {
+          let colTotal = 0
+          const prop = column.property
+          if (prop && prop !== '$selection' && prop !== '$index') {
+            // 设置合计列
+            if (totalColIndex === undefined || totalColIndex === null) {
+              totalColIndex = index
+              sums[index] = '合计'
+              return
+            }
+          }
+          if (summaryColumnProps.indexOf(prop) >= 0) {
+            // 表示该列需要合计
+            if (data) {
+              data.forEach((row) => {
+                let fieldValue = getEntityFieldValueWithOutCase(row, prop)
+                let numberValue
+                if (fieldValue !== undefined && fieldValue !== null) {
+                  // 表示值存在，不需要转换
+                  numberValue = Number(fieldValue)
+                } else {
+                  // 表示值不存在，需要转小写，再获得一遍
+                  const reg1 = /[A-Z]+/ // 大写字母
+                  if (this.isSql && reg1.test(prop)) {
+                    fieldValue = getEntityFieldValueWithOutCase(
+                      row,
+                      prop.toLowerCase()
+                    )
+                    if (fieldValue !== undefined && fieldValue !== null) {
+                      numberValue = Number(fieldValue)
+                    }
+                  }
+                }
+                if (
+                  numberValue !== undefined &&
+                  numberValue !== null &&
+                  !isNaN(numberValue)
+                ) {
+                  colTotal += numberValue
+                }
+              })
+            }
+            sums[index] = colTotal
+          } else {
+            sums[index] = ''
+          }
+        })
+      }
+      return sums
+    },
+    configColumns() {
+      this.showColumnConfig = true
+      // 完成深拷贝，复制一份对象，行编辑时使用
+      this.orgColumnConfig = [].concat(JSON.parse(JSON.stringify(this.columns)))
+    },
+    // 行拖拽
+    rowDrop() {
+      if (this.lineEdit && this.lineEdit.urlToSaveOrder) {
+        const tbody = document.querySelector('.el-table__body-wrapper tbody')
+        if (tbody != null) {
+          const vm = this
+          Sortable.create(tbody, {
+            onEnd({ newIndex, oldIndex }) {
+              const params = {
+                oldIndex: oldIndex,
+                newIndex: newIndex,
+              }
+              this.$http
+                .post(this.lineEdit.urlToSaveOrder, params)
+                .then((data) => {
+                  const currRow = vm.gridData.splice(oldIndex, 1)[0]
+                  vm.gridData.splice(newIndex, 0, currRow)
+                })
+            },
+          })
+        }
+      }
+    },
+    closeCustomConfig(isRefreshGrid) {
+      if (isRefreshGrid !== undefined && isRefreshGrid === true) {
+        this.refreshGridInitialize()
+      }
+      this.showColumnConfig = false
+    },
+    resetCustomConfig() {
+      this.refreshGridInitialize()
+    },
+    refreshGridInitialize() {
+      this.initialize().then(() => {
+        // 添加该代码是为了解决保存字段个性化配置后，重新渲染列表问题，例如：列宽重新计算问题
+        this.refreshGrid = false
+        const vm = this
+        setTimeout(function () {
+          vm.refreshGrid = true
+        }, 100)
+      })
+    },
+    loadChildren(row, treeNode, resove) {
+      if (this.isLazy) {
+        this.loadChildrenNode(row, treeNode, resove)
+      }
+    },
+    loadChildrenNode(row, treeNode, resove) {
+      const subRowUrl = this.options.subRowUrl
+      if (
+        typeof subRowUrl !== 'undefined' &&
+        subRowUrl !== '' &&
+        subRowUrl !== null
+      ) {
+        const parentRowIds = []
+        parentRowIds.push(row.id ? row.id : row.ID)
+        this.fetchData(this.getSearchParam(), false, parentRowIds, resove)
+      }
+    },
+    expandChange(row, expanded) {
+      if (this.isLazy) {
+        // console.log('expandChange==row, expanded', row, expanded, this.$refs.superGrid.store.states)
+        if (expanded === false) {
+          // 折叠时清空表格缓存的已加载的标识位，使其能够动态更新子集合
+          // 必须添加这句，否则不会重新走load
+          if (this.$refs.superGrid.store.states.treeData) {
+            this.$refs.superGrid.store.states.treeData[
+              row.id ? row.id : row.ID
+            ].loaded = false
+          }
+        } else {
+          // console.log('expandChange=this.$refs.superGrid.store.states.lazyTreeNodeMap', this.$refs.superGrid.store.states.lazyTreeNodeMap)
+          // console.log('expandChange=this.$refs.superGrid.store.states.treeData', this.$refs.superGrid.store.states.treeData)
+          // console.log('expandChange=this.$refs.superGrid.store.states.selection', this.$refs.superGrid.store.states.selection)
+        }
+      }
+    },
+    removeGridStoreSelection(parentRowIds) {
+      let selection = []
+      if (this.$refs.superGrid.store.states.selection) {
+        selection = [].concat(
+          JSON.parse(
+            JSON.stringify(this.$refs.superGrid.store.states.selection)
+          )
+        )
+      }
+      for (let i = 0; i < selection.length; i++) {
+        if (
+          parentRowIds &&
+          parentRowIds.indexOf(selection[i][this.parentProp]) >= 0
+        ) {
+          // 移除第i个元素
+          this.$refs.superGrid.store.states.selection.splice(i, 1)
+          if (this.$refs.superGrid.store.states.selection.length > 0) {
+            this.removeGridStoreSelection(parentRowIds)
+          }
+          break
+        }
+      }
+    },
+    changeHederWidth(newWidth, oldWidth, column, event) {
+      const newCellWidth = newWidth - 5
+      let myNewWidth = newCellWidth
+      this.dragColumnProp = column.property
+      const gridParams = store.get(this.code)
+      if (isHasOptionFunction('resizeColumn', this.code)) {
+        const newWidth = gridParams.options.resizeColumn.call(this, {
+          code: this.code,
+          newWidth: newWidth,
+          oldWidth: oldWidth,
+          column: column,
+        })
+        if (newWidth) {
+          myNewWidth = newWidth
+        }
+      }
+      this.newWidth = Math.ceil(myNewWidth)
+      if (
+        typeof this.options.isAdministerListView !== 'undefined' &&
+        this.options.isAdministerListView != null &&
+        this.options.isAdministerListView === true
+      ) {
+        // 表示是列表字段配置时
+        $emit(this, 'changeHederWidth', this.newWidth)
+      } else {
+        // 应用模式时
+        // 保存拖动后的列宽
+        this.saveColumnWidth(this.dragColumnProp, this.newWidth).then(() => {
+          const items = this.getColumnByElementColumn(column)
+          if (items && items.length > 0) {
+            items[0].widthType = 'custom'
+            items[0].width = this.newWidth + ''
+          }
+        })
+      }
+    },
+    resetSearch() {
+      let searchForm = null
+      if (this.toolbarFieldParam && this.toolbarFieldParam.length > 0) {
+        searchForm = this.toolbarFieldParam
+      }
+      // 修改当前页为第1页
+      this.currentPage = 1
+      this.search(searchForm, false)
+    },
+    // 获取列信息
+    getColumnInformation() {
+      return this.visibleColumns
+    },
+    // 点击表头触发回调
+    headerClick(column, event) {
+      // 三种类型
+      const items = this.getColumnByElementColumn(column)
+      if (items && items.length > 0) {
+        $emit(this, 'header-click', items[0])
+        this.changeHeaderStyleTwo(items[0])
+      } else {
+        $emit(this, 'header-click', null)
+      }
+      this.clearHeaderContextmenu()
+    },
+    changeHeaderStyleTwo(item) {
+      // 改变options中的配置
+      // 还原所有颜色（隐藏字段判断，设置为灰色；选中字段设置为蓝色）
+      if (
+        typeof this.options.isAdministerListView !== 'undefined' &&
+        this.options.isAdministerListView != null &&
+        this.options.isAdministerListView === true
+      ) {
+        this.createBackgroundColorMap()
+        this.backgroundColorMap[item.prop] = '#409EFF'
+        if (this.$refs && this.$refs.superGrid) {
+          this.$refs.superGrid.doLayout()
+        }
+      }
+    },
+    // 编辑模式下创建一个对象，存储各个表头的背景色
+    createBackgroundColorMap() {
+      const items = this.getColumnInformation()
+      const backgroundColorMap = {}
+      if (items && items.length > 0) {
+        for (var i = 0; i < items.length; i++) {
+          const item = items[i]
+          if (item.show === undefined || item.show) {
+            // 表示显示
+          } else {
+            backgroundColorMap[item.prop] = '#808080'
+          }
+          if (
+            this.backgroundColorMap &&
+            this.backgroundColorMap[item.prop] === '#409EFF' &&
+            this.externalClickFlag
+          ) {
+            backgroundColorMap[item.prop] = '#409EFF'
+          }
+        }
+      }
+      this.backgroundColorMap = backgroundColorMap
+      this.externalClickFlag = false
+      if (this.$refs && this.$refs.superGrid) {
+        this.$refs.superGrid.doLayout()
+      }
+    },
+    // 根据element事件传递的column来获取自定义封装的column
+    getColumnByElementColumn(column) {
+      let items = null
+      if (column.type && column.type === 'selection') {
+        // 表示为选择框
+        items = this.visibleColumns.filter((item) => {
+          return item.prop === '$selection'
+        })
+      } else if (column.type && column.type === 'default' && !column.property) {
+        // 表示为序号
+        items = this.visibleColumns.filter((item) => {
+          return item.prop === '$index'
+        })
+      } else if (column.property) {
+        // 表示为普通字段
+        items = this.visibleColumns.filter((item) => {
+          return column.property === item.prop
+        })
+      }
+      return items
+    },
+    // 右键表头
+    headerContextmenu(column, event) {
+      // 阻止鼠标的默认事件
+      event.preventDefault()
+      const items = this.getColumnByElementColumn(column)
+      if (items && items.length > 0) {
+        const item = items[0]
+        $emit(this, 'header-click', items[0])
+        this.changeHeaderStyleTwo(items[0])
+        this.showHeaderContextmenu = true
+        this.rightClickColumn = item
+        const menu = this.$refs.headerMenu.$el
+        const scrollTop =
+          document.documentElement.scrollTop || document.body.scrollTop
+        menu.style.display = 'block'
+        menu.style.left = event.clientX + 'px'
+        // 当滑动滚动条时也能准确获取菜单位置
+        menu.style.top = event.clientY + scrollTop - 10 + 'px'
+      }
+    },
+    // 清除右键菜单显示
+    clearHeaderContextmenu() {
+      this.showHeaderContextmenu = false
+      this.rightClickColumn = null
+    },
+    // 返回表单子表模式下数据
+    validatorSunTableListData() {
+      // 返回之前需要进行规则校验
+      let gridData = this.gridData
+      if (this.isSubTableShowPage) {
+        gridData = this.subTableData
+      }
+      if (gridData && gridData.length > 0) {
+        const pageSize = this.pagination && this.pagination.pageSize
+        const validateRules = formValidatorService.getValidator(this.code)
+        for (let i = 0; i < gridData.length; i++) {
+          const row = gridData[i]
+          // 取消最后一个编辑行的状态
+          if (row.$editing !== undefined && row.$editing === true) {
+            setEntityFieldValue(row, '$editing', false)
+            // 取消上一行选中状态时，触发un-edit事件，处理下拉多选选项组问题
+            $emit(eventBus, 'un-edit', { row: row })
+          }
+          let needValidate = true
+          if (isHasEditOption('isEnableValidate', this.code)) {
+            // 表示配置了是否启用必填验证
+            needValidate =
+              this.gridParams.options.lineEditOptions['isEnableValidate']
+          }
+          let validateResult = true
+          if (needValidate === true) {
+            let pageNum
+            // 每页的记录下标，提示时使用
+            let pageRowIndex
+            if (
+              this.isSubTableShowPage &&
+              pageSize !== undefined &&
+              pageSize > 0
+            ) {
+              pageNum = Math.ceil((i + 1) / pageSize)
+              pageRowIndex = i + 1 - (pageNum - 1) * pageSize
+            }
+            validateResult = formValidatorService.validator(
+              row,
+              this.code,
+              i,
+              validateRules,
+              this.isSubTableShowPage,
+              pageNum,
+              pageRowIndex
+            )
+          }
+          if (validateResult !== null && validateResult !== undefined) {
+            if (
+              typeof validateResult === 'string' ||
+              validateResult === false
+            ) {
+              return false
+            }
+          }
+        }
+        return true
+      }
+      return true
+    },
+    getSunTableListData() {
+      return this.isSubTableShowPage ? this.subTableData : this.gridData
+    },
+    rowDblclickEvent(row, column, event) {
+      const gridParams = store.get(this.code)
+      if (
+        gridParams.options &&
+        gridParams.options.isFormSubTable &&
+        gridParams.options.isPdfEditor
+      ) {
+        // 如果是子表并且是pdf模式
+      } else if (this.isFormSubTable) {
+        // 表示是表单的子表，点击时需要将当前行设为行编辑状态，并保存上一行的记录（不是保存到数据库，只是把编辑状态改为false）
+        if (column.property && column.property !== 'operation') {
+          const isSubTableShowPage = gridParams.isSubTableShowPage
+          console.log(gridParams.options.lineEditOptions)
+          const canEdit = gridParams.options.lineEditOptions.beforeEditRow.call(
+            this,
+            isSubTableShowPage ? gridParams.subTableData : gridParams.gridData,
+            row,
+            -1
+          )
+          if (canEdit === undefined || canEdit === true) {
+            // 取消上一行的编辑状态
+            let editRows
+            const gridParams = store.get(this.code)
+            if (this.isSubTableShowPage) {
+              editRows = this.subTableData.filter(
+                (row) => row.$editing !== undefined && row.$editing === true
+              )
+            } else {
+              editRows = this.gridData.filter(
+                (row) => row.$editing !== undefined && row.$editing === true
+              )
+            }
+            if (editRows && editRows.length > 0) {
+              editRows.forEach((editRow) => {
+                setEntityFieldValue(editRow, '$editing', false)
+                // 取消上一行选中状态时，触发un-edit事件，处理下拉多选选项组问题
+                $emit(eventBus, 'un-edit', { row: editRow })
+                // this.$set(editRow, '$editing', false)
+              })
+            }
+            gridParams.isEditRow = false
+            setEntityFieldValue(row, '$editing', true)
+            gridParams.$editRow = row
+            // this.$set(row, '$editing', true)
+            gridParams.isEditRow = true
+          }
+        }
+      } else {
+        if (row) {
+          if (
+            gridParams &&
+            gridParams.lineEdit &&
+            gridParams.lineEdit.editable &&
+            gridParams.canntEdit
+          ) {
+            let index = this.gridData.findIndex(function (item) {
+              return (
+                (item.id && item.id === row.id) ||
+                (item.ID && item.ID === row.ID)
+              )
+            })
+            if (index < 0) {
+              index = 0
+            }
+            this.editRow(index)
+          }
+        }
+      }
+      this.rowDblClick(row, column, event)
+    },
+    rowClickEvent(row, column, event) {
+      // if (
+      //   this.isFormSubTable &&
+      //   column.property &&
+      //   column.property !== 'operation'
+      // ) {
+      //   // 表示是表单的子表，点击时需要将当前行设为行编辑状态，并保存上一行的记录（不是保存到数据库，只是把编辑状态改为false）
+      //   // 取消上一行的编辑状态
+      //   const gridParams = store.get(this.code)
+      //   const editRows = this.gridData.filter(
+      //     row => row.$editing !== undefined && row.$editing === true
+      //   )
+      //   if (editRows && editRows.length > 0) {
+      //     editRows.forEach(editRow => {
+      //       this.$set(editRow, '$editing', false)
+      //     })
+      //   }
+      //   gridParams.isEditRow = false
+      //   this.$set(row, '$editing', true)
+      //   gridParams.isEditRow = true
+      // }
+      // this.rowClick(row, column, event)
+    },
+    openPageDialog(openPageParams) {
+      let jumpMode
+      if (openPageParams) {
+        jumpMode = openPageParams.jumpMode
+      }
+      const popPageSetting = openPageParams
+      if (jumpMode === 'popup') {
+        // 弹出页面
+        this.jumpPageSetting = popPageSetting
+        this.isShowPageDialog = true
+      } else if (jumpMode === 'refresh') {
+        this.$router.push({ path: '/dsc/page', query: popPageSetting })
+      }
+    },
+    // api方法，super-pages中有调用该方法
+    closePageDialog(popParams) {
+      // popParams格式为：{ entity, pageCode }
+      if (this.jumpPageSetting) {
+        // 调用关闭弹框事件
+        const gridParams = store.get(this.code)
+        const closeEventName = this.jumpPageSetting.closeEvent
+        const row = this.jumpPageSetting.row
+        let closeEvent
+        if (
+          gridParams.options.eventCallBack &&
+          closeEventName &&
+          closeEventName !== null &&
+          gridParams.options.eventCallBack[closeEventName]
+        ) {
+          // 表单页面中子表自定义事件集合
+          closeEvent = gridParams.options.eventCallBack[closeEventName]
+        }
+        if (closeEvent) {
+          const params = {
+            params: gridParams.additionalParamMap,
+            entity: row,
+          }
+          if (popParams) {
+            params.eventParams = {
+              popEntity: popParams.entity,
+              popPageCode: popParams.pageCode,
+              pageCode: this.pageCode,
+            }
+          }
+          closeEvent.call(this, params)
+        }
+      }
+      this.isShowPageDialog = false
+      this.jumpPageSetting = null
+    },
+    updateValues(sourceModel, sourceTableName, targetRowIndex) {
+      // TODO 值更新
+      const gridParams = store.get(this.code)
+      const editRowIndex = targetRowIndex
+      if (
+        editRowIndex !== undefined &&
+        editRowIndex !== null &&
+        editRowIndex < this.gridData.length
+      ) {
+        // 返回true表示不需要替换字段，false表示需要替换字段
+        const isNotNeedReplaceFieldName =
+          this.isSql === false ||
+          (gridParams.options &&
+            ((gridParams.options.isAdministerListView !== undefined &&
+              gridParams.options.isAdministerListView === true) ||
+              (gridParams.options.isFormSubTable !== undefined &&
+                gridParams.options.isFormSubTable === true)))
+        const tableName = this.tableName
+        updateWithPageValue(
+          sourceModel,
+          sourceTableName,
+          this.jumpPageSetting,
+          this.gridData[editRowIndex],
+          tableName,
+          !isNotNeedReplaceFieldName
+        )
+        const updateValueEventName =
+          this.jumpPageSetting && this.jumpPageSetting.updateValueEvent
+            ? this.jumpPageSetting.updateValueEvent
+            : null
+        let updateValueEvent
+        if (
+          gridParams.options.eventCallBack &&
+          updateValueEventName &&
+          updateValueEventName !== null &&
+          gridParams.options.eventCallBack[updateValueEventName]
+        ) {
+          // 表单页面中子表自定义事件集合
+          updateValueEvent =
+            gridParams.options.eventCallBack[updateValueEventName]
+        }
+        if (updateValueEvent) {
+          updateValueEvent.call(this, {
+            sourceModel,
+            sourceTableName,
+            jumpPageSetting: this.jumpPageSetting,
+            entity: this.gridData[editRowIndex],
+            targetTableName: tableName,
+            isNeedReplaceFieldName: !isNotNeedReplaceFieldName,
+          })
+        }
+      }
+    },
+    closeSearchFormDialog() {
+      this.showSearch = false
+    },
+    // 获取当前列表的查询方式,page项目使用
+    getQueryMode() {
+      if (this.query && this.query.showType === 'popup') {
+        return 'popup'
+      } else {
+        return 'embedded'
+      }
+    },
+    selectCell(row, column, cell, event) {
+      if (cell) {
+        this.cellClick(row, column, cell, event)
+        this.$nextTick(() => {
+          cell.style['border'] = '2px solid #409EFF'
+          this.currentSelectCell = cell
+        })
+      }
+    },
+    // 刷新列表数据
+    refreshGridData() {
+      this.refresh(false, true)
+    },
+    // 刷新列表数据
+    refresData(data) {
+      const gridParams = store.get(this.code)
+      gridParams.gridData = data
+      store.set(this.code, gridParams)
+      this['gridData'] = data
+    },
+    refresPortData(port, value, index) {
+      if (this.gridData[index]) {
+        this.gridData[index][port] = value
+        this.$forceUpdate()
+      }
+    },
+
+    refresPortsData(entity, index) {
+      if (entity) {
+        for (const key in entity) {
+          if (this.gridData[index]) {
+            this.gridData[index][key] = entity[key]
+            this.$forceUpdate()
+            console.log('this.$forceUpdate()', this.$refs[key])
+          }
+        }
+        // entity.forEach(item => {
+        //   if (this.gridData[index]) {
+        //     this.$set(this.gridData[index], item.prop, item.value)
+        //   }
+        // })
+      }
+    },
+    refresMainTableFields(map) {
+      $emit(this, 'refresMainTableFields', map)
+    },
+    openFold(isOpen) {
+      this.resizeTableHeight()
+    },
+    // 设置字段禁止编辑
+    fnProhibitToEdit(entity) {
+      if (entity) {
+        for (const key in entity) {
+          // console.log('key', key)
+          // console.log('this.$refs[key]', this.$refs)
+          if (this.$refs[key]) {
+            this.$refs[key][0].fnProhibitToEdit(entity[key])
+          }
+        }
+      }
+    },
+    // 设置字段禁止编辑
+    prohibitToEdit(entity) {
+      this.fnProhibitToEdit(entity)
+    },
+    // 树形结构时数据展示
+    getTreeProps(parentProp, isSql, isLazy, dataSourceType) {
+      let treeProps = {
+        children: 'children',
+        hasChildren: '_has_children',
+      }
+      if (parentProp) {
+        treeProps = {
+          children: 'children',
+        }
+        let hasChildren = 'hasChildren'
+        if (isLazy) {
+          if (isSql) {
+            if (dataSourceType === 'oracle') {
+              hasChildren = 'HAS_CHILDREN'
+            } else {
+              hasChildren = 'has_children'
+            }
+          }
+        }
+        treeProps.hasChildren = hasChildren
+      }
+      return treeProps
+    },
+    refreshSubTableData(data) {
+      const gridParams = store.get(this.code)
+      gridParams.subTableData = data
+      store.set(this.code, gridParams)
+      this['subTableData'] = data
+    },
+  },
+  emits: [
+    'change-grid-data',
+    'change-rows-per-page',
+    'set-select-options',
+    'setSearchType',
+    'sort-change',
+    'changeHederWidth',
+    'header-click',
+    'un-edit',
+    'refresMainTableFields',
+    'refresh',
+    'cancel-search',
+    ,
+    ,
+  ],
+}
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+.grid-area {
+  .elTable th {
+    padding: 2px 0 !important;
+  }
+  .elTable td {
+    padding: 2px 0 !important;
+  }
+}
+</style>