super-page-runtime 1.0.13 → 1.0.14

package/src/components/runtime/views/assemblys/data/table/main-table-runtime.vue

@@ -0,0 +1,852 @@
+<template>
+  <div>
+    <!--//TODO:暂不支持弹框方式查询 @setSearchType="closeSearch" -->
+    <super-grid
+      ref="gridRef"
+      :url="urlToListData"
+      :options="listOptions"
+      :code="superGridSetting ? null : listCode"
+      :settings="superGridSetting"
+      :search-form-info="searchFormInfo"
+      :list-toolbar-form-data="listToolbarFormData"
+      @select="select"
+      @select-all="selectAll"
+      @selection-change="selectionChange"
+      @cell-click="cellClickEvent"
+      @cell-dblclick="cellDblClickEvent"
+      @row-click="rowClickEvent"
+      @row-dblclick="rowDblClickEvent"
+      @header-click="headerClickEvent"
+      @refresh="clearSelections"
+      @new-open-grid-dialog="popupToPage"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { SuperIcon } from 'agilebuilder-ui'
+import { computed, onMounted, watch, ref, onUnmounted } from 'vue'
+import type { Component, PageContext } from '../../../../utils/interfaces/page-design-types'
+import {
+  doAfterClickEvent,
+  canExecuteButton,
+  doBeforeClickEvent,
+  getEventFuncByType,
+  getHandleEvent,
+  gridSelectRecord,
+  setTableEvents,
+  gridSelectAllRecords,
+  gridSelectionChange,
+  cellClick,
+  cellDblClick,
+  rowClick,
+  rowDblClick,
+  headerClick
+} from '../../../../utils/events/event-util'
+import { getRealRestApiPath, getListCode } from '../../../../utils/common-util'
+import { getSaveFormRequest, standardEvents } from '../../../../utils/events/standard-event'
+import { isPromise } from 'agilebuilder-ui/src/utils/common-util'
+import { getDataTypeMap, popupToPage } from '../../../../utils/table-utils'
+// import eventBus from '../../../../utils/eventBus'
+interface MyProps {
+  pageContext: PageContext
+  configure: Component
+}
+const props = defineProps<MyProps>()
+const pageContext = props.pageContext
+const configure = props.configure
+
+//获取默认的样式及配置
+const runtimeInfo = props.configure.runtime ? props.configure.runtime : {}
+
+const runtimeStyle = runtimeInfo.style
+const runtimeClass = runtimeInfo.class
+
+const system = pageContext.entity.system
+// TODO： table的数据表名是这样获得吗？？
+const tableName = pageContext.tableName
+const baseURL = window['$vueApp'].config.globalProperties.baseURL
+const operationButtonObj = ref(null)
+const eventName = ref(null)
+const listOptions = ref({})
+listOptions.value = getOptions()
+
+// 获得列表的Ref对象
+const gridRef = ref(null)
+
+const urlToListData = getUrlToListData(system)
+const listCode = getListCode(pageContext.code, pageContext.version, configure.uuid)
+
+const myPageCode = pageContext.code
+// TODO: 列表“-close-component-page-dialog”事件处理，事件名多了“_listCode"信息
+const eventPageInfo = myPageCode + '_' + listCode
+const selections = ref([])
+const listToolbarFormData = pageContext.entity.page
+const searchFormInfo = ref({ data: [] })
+const superGridItems = pageContext.superGridItems
+const superGridSetting = superGridItems ? superGridItems[configure.uuid] : null
+console.log('superGridSetting1111===', superGridItems, superGridSetting)
+
+onMounted(() => {
+  window.addEventListener('message', recieveMessage)
+  // TODO: 列表“-close-component-page-dialog”事件处理，事件名多了“_listCode"信息 myPageCode + '_' + myPageVersion + '_' + listCode
+  window['$eventBus'].$on(
+    eventPageInfo + '-close-component-page-dialog',
+    function ({ jumpInfo, popEntity, popPageCode }) {
+      gridRef.value.closePageDialog({
+        entity: popEntity,
+        pageCode: popPageCode,
+        jumpInfo: jumpInfo
+      })
+    }
+  )
+  // TODO:  刷新指定页签的表格数据(原list-page页面中的事件)
+  // window['$eventBus'].$on(that.pageCode + '-refresh-tab', function({ tabCode, entity }) {
+  //   if (
+  //     that.$refs.grid &&
+  //     tabCode !== undefined &&
+  //     tabCode === that.tabCode
+  //   ) {
+  //     that.$refs.grid.refresh()
+  //   }
+  // })
+  // 关闭弹框事件回调使用
+  // TODO: 列表“_close-dialog-get-entity”事件处理，事件名多了“_listCode"信息 myPageCode + '_' + myPageVersion + '_' + listCode
+  window['$eventBus'].$on(eventPageInfo + '_close-dialog-get-entity', () => {
+    window['$eventBus'].$emit(eventPageInfo + '_close-super-dialog')
+  })
+})
+// 监听查询条件更新
+watch(
+  () => props.pageContext.searchFormData,
+  (searchFormData) => {
+    searchFormInfo.value.data = searchFormData
+  }
+)
+// 监听工具栏快捷查询组件
+watch(
+  () => props.pageContext.entity.data,
+  (searchFormData) => {
+    searchGridData(props.pageContext.entity.data)
+  }
+)
+// 监听工具栏快捷查询组件
+watch(
+  () => props.pageContext.entity.page,
+  (searchFormData) => {
+    searchGridData(props.pageContext.entity.page)
+  }
+)
+
+onUnmounted(() => {
+  window['$eventBus'].$off(eventPageInfo + '-close-component-page-dialog')
+  window['$eventBus'].$off(eventPageInfo + '_close-dialog-get-entity')
+})
+
+function getUrlToListData(system) {
+  let urlToListData
+  if (!pageContext.isTest) {
+    urlToListData = baseURL + '/dsc/commons/list'
+    if (urlToListData) {
+      urlToListData = getRealRestApiPath(urlToListData, system)
+    }
+  }
+  return urlToListData
+}
+
+function getOptions() {
+  const system = pageContext.entity.system
+  const permissionPrefix = system.code + '.' + pageContext.code
+  let initSearchForm =
+    configure.props && configure.props.dataOrigin
+      ? configure.props.dataOrigin.sqlFilterCondition
+      : null
+  if (typeof initSearchForm === 'undefined' || initSearchForm === null) {
+    initSearchForm = []
+  }
+  const options = {
+    isSql: true,
+    extraParam: {
+      beanName: pageContext.beanName,
+      functionCode: permissionPrefix + '.list',
+      tableName: tableName,
+      systemCode: system.code // 系统编码传给列表数据后台请求
+    },
+    initSearchForm,
+    lineEditOptions: {
+      aftersaveIsCreateRow: false,
+      autoSave: false,
+      enter: enterSave,
+      esc: escRestorRow
+    },
+    indexContinuous:
+      configure.props && configure.props.otherSettings
+        ? configure.props.otherSettings.serialNumberContinuous
+        : false,
+    initSearch:
+      configure.props && configure.props.base.initializationQuery
+        ? configure.props.base.initializationQuery
+        : true, // 初始化时是否查询，默认是查询
+    resizeHeight: resizeListHeight,
+    pageCode: pageContext.code,
+    pageVersion: pageContext.version,
+    // pageHeight: pageHeight, // 页面的高度 //TODO: pageHeight如何获得，页面高度，计算列表高度应该会用
+    additionalParamMap: pageContext.entity.request, // 将路由参数传给列表组件
+    showOverflowTooltip: !!(
+      configure.props &&
+      configure.props.otherSettings &&
+      (configure.props.otherSettings.isBreakLine === undefined ||
+        configure.props.otherSettings.isBreakLine === false)
+    ), // 单元格内容是否换行显示
+    isEnableEnterEvent:
+      configure.props &&
+      configure.props.otherSettings &&
+      configure.props.otherSettings.isEnableEnterEvent, // 是否启用回车事件
+    // 当前系统，表示是当前的自定义系统信息
+    system,
+    isWithDataPermission:
+      configure.props &&
+      configure.props.otherSettings &&
+      configure.props.otherSettings.isWithDataPermission
+        ? configure.props.otherSettings.isWithDataPermission
+        : false,
+    pageDevMode: false,
+    isWorkflowEntity: pageContext.workflowCode ? true : false,
+    tableClass: runtimeClass,
+    tableStyle: runtimeStyle,
+    pageContext,
+    configureObj: configure
+  }
+  // 设置排序字段信息
+  setSortInfo(options)
+  //  获得字段集合
+  myGetDataTypeMap(options)
+  //  设置树形配置
+  setTreeSetting(options)
+  // 设置表格事件
+  setGridEvents(options)
+  // TODO: 是否需要区分预览
+  // const isPreview = getStoreInfo(this.pageCode, '_pagePreview')
+  //   if (isPreview !== undefined && isPreview === true) {
+  //     // 预览时，不请求数据，只查看列表结构
+  //     options.loadBeforeSend = function () {
+  //       return false
+  //     }
+  return options
+}
+
+// 设置排序字段信息
+function setSortInfo(options) {
+  if (configure.props && configure.props.dataOrigin && configure.props.dataOrigin.sortFields) {
+    options.initSortInfo = []
+    this.colSetting.options.sortFields.forEach((item) => {
+      const sortInfo = {
+        order: item.sortOrder
+      }
+      sortInfo['prop'] = item.propDbName
+      options.initSortInfo.push(sortInfo)
+    })
+  }
+}
+
+// 获得字段集合
+function myGetDataTypeMap(options) {
+  if (!system || !tableName) {
+    return
+  }
+  getDataTypeMap(system, tableName).then((result) => {
+    pageContext['dataTypeMaps'][tableName] = result['dataTypeMap']
+    // 设置列表操作列按钮
+    setOperationButtons(options)
+  })
+}
+
+// 设置列表组件需要的操作列按钮配置信息
+function setOperationButtons(options) {
+  const showOperation =
+    configure.props && configure.props.base ? configure.props.base.showOperation : false
+  const operationButtons = configure.btnList
+  if (showOperation && operationButtons) {
+    // 是否受权限控制
+    let noPermission = false
+    const operationButtons = []
+    operationButtons.forEach((buttonConfigure) => {
+      const myButtonSet = {}
+      const myButtonProps = Object.assign({}, buttonConfigure.props.base)
+      // element plus不支持该属性了
+      // myButtonProps.type = 'text'
+      myButtonProps.elementType = 'el-button'
+      if (
+        !noPermission &&
+        (buttonConfigure.isPermission === undefined || buttonConfigure.isPermission + '' === 'true')
+      ) {
+        // 表示受权限控制
+        if (buttonConfigure.functionCode) {
+          myButtonProps.permission = buttonConfigure.functionCode
+        }
+      }
+
+      myButtonSet['props'] = myButtonProps
+      myButtonSet['onClick'] = getOperationButtonClickEvent(buttonConfigure)
+      operationButtons.push(myButtonSet)
+    })
+    if (!options.operations) {
+      options.operations = {}
+    }
+    options.operations.operation = operationButtons
+  }
+}
+
+// 设置树形配置
+function setTreeSetting(options) {
+  const dataOrigin = configure.props ? configure.props.dataOrigin : {}
+  if (dataOrigin.treeTable) {
+    let parentPropDbName
+    // 格式为：name~~dbCloumnName,name表示实体字段名，dbCloumnName表示数据库字段名
+    const parentPropInfo = dataOrigin.rowKey
+    if (parentPropInfo && parentPropInfo.indexOf('~~') > 0) {
+      parentPropDbName = parentPropInfo.substring(parentPropInfo.indexOf('~~') + 2)
+    } else {
+      parentPropDbName = parentPropInfo
+    }
+    // 数据库字段名
+    options.parentProp = parentPropDbName
+    if (options.parentProp) {
+      // 表示配置了父级字段名，则表示是树状结构数据
+      const isLazy = dataOrigin.lazy
+      const defaultExpandAll = dataOrigin.defaultExpandAll
+      if (isLazy === undefined || isLazy === null) {
+        options.lazy = true
+      } else {
+        options.lazy = isLazy
+      }
+      if (defaultExpandAll === undefined || defaultExpandAll === null) {
+        options.defaultExpandAll = false
+      } else {
+        options.defaultExpandAll = defaultExpandAll
+      }
+      const listViewTreeTableSetting = {
+        parentProp: parentPropDbName,
+        lazy: options.lazy,
+        defaultExpandAll: options.defaultExpandAll
+      }
+      // 树表格配置传给后台
+      options.extraParam.listViewTreeSetting = JSON.stringify(listViewTreeTableSetting)
+      options.subRowUrl = baseURL + '/dsc/commons/list-subs'
+    }
+  }
+}
+
+// 设置表格事件
+function setGridEvents(options) {
+  const tableEvents = configure.events
+  setTableEvents(options, tableEvents, pageContext, configure)
+  const customEvents = pageContext.customEvents
+  if (customEvents) {
+    // 将页面中配置的自定义事件集合传给列表组件super-grid，供列表行编辑控件使用
+    options.eventCallBack = customEvents
+    const rowStyleEvent = getEventFuncByType(pageContext, tableEvents, 'rowStyle')
+    if (rowStyleEvent) {
+      options.rowStyleRender = rowStyleEvent
+    }
+  }
+}
+
+// 回车保存事件
+function enterSave(rowIndex, column, row, orgRow) {
+  saveRow(null, null, row, column, rowIndex)
+}
+
+// 行编辑保存
+function saveRow(originalValue, formatValue, row, column, rowIndex) {
+  const buttonConfigure = operationButtonObj.value[eventName.value]
+  listOptions.value['lineEditOptions']['beforeSave'] = beforeSaveRow
+  pageContext.editData = row
+  canExecuteButton({ pageContext, configureObj: buttonConfigure })
+    .then((result) => {
+      if (result['canExecute'] === true) {
+        // 设置保存的自定义实现
+        listOptions.value['lineEditOptions']['saveRow'] = saveLineEditRow
+        gridRef.value.saveRow(rowIndex, listCode).then(() => {
+          const otherParams = {
+            originalValue,
+            formatValue,
+            row,
+            column,
+            rowIndex
+          }
+          // 调用afterClick回调方法
+          doAfterClickEvent(pageContext, buttonConfigure, otherParams)
+        })
+      }
+    })
+    .finally(() => {
+      pageContext.editData = null
+    })
+}
+
+// 获得操作列按钮点击事件
+function getOperationButtonClickEvent(buttonConfigure) {
+  let onClick
+  eventName.value = buttonConfigure.eventName
+  operationButtonObj.value[eventName.value] = buttonConfigure
+  if (eventName.value === 'lineEditSave') {
+    // 行编辑保存
+    onClick = saveRow
+  } else if (eventName.value === 'restoreEdit') {
+    onClick = restoreRow
+  } else if (eventName.value === 'lineEditUpdate') {
+    // 行编辑修改按钮
+    onClick = editRow
+  } else if (eventName.value === 'lineEditDelete') {
+    // 行编辑删除按钮
+    onClick = deleteRow
+  } else {
+    onClick = customButtonClick
+    // TODO 自定义行编辑按钮事件处理
+  }
+  if (!onClick) {
+    onClick = function () {}
+  }
+  return onClick
+}
+
+function beforeSaveRow(
+  row,
+  columns,
+  dataTypeMap,
+  dynamicColumnInfo,
+  additionalParamMap,
+  mainDefaultValueColumns
+) {
+  const buttonConfigure = operationButtonObj.value[eventName.value]
+  const otherParams = {
+    dynamicColumnInfo,
+    mainDefaultValueColumns,
+    dataTypeMap,
+    row,
+    columns
+  }
+  return doBeforeClickEvent(pageContext, buttonConfigure, otherParams)
+}
+
+// 重写行编辑时保存的实现
+function saveLineEditRow(
+  row,
+  columns,
+  dataTypeMap,
+  dynamicColumnInfo,
+  additionalParamMap,
+  mainDefaultValueColumns
+) {
+  const buttonConfigure = operationButtonObj.value[eventName.value]
+  return new Promise((resolve, reject) => {
+    getSaveFormRequest(
+      pageContext,
+      buttonConfigure,
+      '/dsc/commons',
+      false,
+      mainDefaultValueColumns,
+      dynamicColumnInfo
+    )
+      .then((commonEntity) => {
+        if (commonEntity) {
+          resolve(commonEntity.entity)
+        } else {
+          resolve({})
+        }
+      })
+      .catch((error) => {
+        reject(error)
+      })
+  })
+}
+
+// esc取消行编辑
+function escRestorRow(rowIndex, column, row, orgRow) {
+  restoreRow(null, null, row, column, rowIndex)
+}
+
+// 行编辑取消编辑
+function restoreRow(originalValue, formatValue, row, column, rowIndex) {
+  const buttonConfigure = operationButtonObj.value[eventName.value]
+  const otherParams = {
+    originalValue,
+    formatValue,
+    row,
+    column,
+    rowIndex
+  }
+  const beforeClickResult = doBeforeClickEvent(pageContext, buttonConfigure, otherParams)
+  if (!beforeClickResult) {
+    // 返回值为false，不继续执行按钮操作
+    return
+  }
+  if (isPromise(beforeClickResult)) {
+    // 表示是promise函数
+    beforeClickResult.then((result) => {
+      if (result) {
+        gridRef.value.restoreRow(rowIndex, listCode)
+      }
+    })
+  } else {
+    gridRef.value.restoreRow(rowIndex, listCode)
+  }
+  const afterOtherParams = {
+    originalValue,
+    formatValue,
+    row,
+    column,
+    rowIndex
+  }
+  // 调用afterClick回调方法
+  doAfterClickEvent(pageContext, configure, afterOtherParams)
+}
+
+// 行编辑的修改
+function editRow(originalValue, formatValue, row, column, rowIndex) {
+  const buttonConfigure = operationButtonObj.value[eventName.value]
+  const otherParams = {
+    originalValue,
+    formatValue,
+    row,
+    column,
+    rowIndex
+  }
+  const beforeClickResult = doBeforeClickEvent(pageContext, buttonConfigure, otherParams)
+  if (!beforeClickResult) {
+    // 返回值为false，不继续执行按钮操作
+    return
+  }
+  if (isPromise(beforeClickResult)) {
+    // 表示是promise函数
+    beforeClickResult.then((result) => {
+      if (result) {
+        editRowReal(originalValue, formatValue, row, column, rowIndex, buttonConfigure)
+      }
+    })
+  } else {
+    editRowReal(originalValue, formatValue, row, column, rowIndex, buttonConfigure)
+  }
+}
+
+function editRowReal(originalValue, formatValue, row, column, rowIndex, buttonConfigure) {
+  pageContext.editData = row
+  canExecuteButton({ pageContext, configureObj: buttonConfigure })
+    .then((result) => {
+      if (result['canExecute'] === true) {
+        // TODO: 行编辑修改按钮跳转页面解析
+        // if (buttonConfigure.jumpPage) {
+        // let dataId
+        // if (row && row.id) {
+        //   dataId = row.id
+        // } else if (row && row.ID) {
+        //   dataId = row.ID
+        // }
+        // if (!dataId) {
+        //   this.$message({
+        //     showClose: true,
+        //     type: 'warning',
+        //     message: this.$t('superPageMessage.pleaseSaveRow')
+        //   })
+        //   return
+        // }
+        // this.update(button.jumpPage, this.system, dataId, button)
+        // } else {
+        gridRef.value.editRow(rowIndex, listCode)
+        // 调用afterClick回调方法
+        const afterOtherParams = {
+          originalValue,
+          formatValue,
+          row,
+          column,
+          rowIndex
+        }
+        doAfterClickEvent(pageContext, configure, afterOtherParams)
+        // }
+      }
+    })
+    .finally(() => {
+      pageContext.editData = null
+    })
+}
+
+// 行编辑的删除
+function deleteRow(originalValue, formatValue, row, column, rowIndex) {
+  const buttonConfigure = operationButtonObj.value[eventName.value]
+  const otherParams = {
+    originalValue,
+    formatValue,
+    row,
+    column,
+    rowIndex
+  }
+  const beforeClickResult = doBeforeClickEvent(pageContext, buttonConfigure, otherParams)
+  if (!beforeClickResult) {
+    // 返回值为false，不继续执行按钮操作
+    return
+  }
+  if (isPromise(beforeClickResult)) {
+    // 表示是promise函数
+    beforeClickResult.then((result) => {
+      if (result) {
+        deleteRowReal(originalValue, formatValue, row, column, rowIndex, buttonConfigure)
+      }
+    })
+  } else {
+    deleteRowReal(originalValue, formatValue, row, column, rowIndex, buttonConfigure)
+  }
+}
+
+function deleteRowReal(originalValue, formatValue, row, column, rowIndex, buttonConfigure) {
+  if (row.id || row.ID) {
+    pageContext.editData = row
+    canExecuteButton({ pageContext, configureObj: buttonConfigure })
+      .then((result) => {
+        if (result['canExecute'] === true) {
+          const ids = []
+          if (row.id) {
+            ids.push(row.id)
+          } else {
+            ids.push(row.ID)
+          }
+          standardEvents.delete({
+            pageContext,
+            configureObj: buttonConfigure,
+            ids,
+            tableUuid: listCode
+          })
+          // }
+        }
+      })
+      .finally(() => {
+        pageContext.editData = null
+      })
+  } else {
+    restoreRow(originalValue, formatValue, row, column, rowIndex)
+    const afterOtherParams = {
+      originalValue,
+      formatValue,
+      row,
+      column,
+      rowIndex
+    }
+    // 调用afterClick回调方法
+    doAfterClickEvent(pageContext, configure, afterOtherParams)
+  }
+}
+
+//TODO: 接受工具栏参数，刷新列表,需要测试是否这样实现？？
+function searchGridData(data) {
+  if (!pageContext['dataTypeMaps'] || !pageContext['dataTypeMaps'][tableName]) {
+    return
+  }
+  const dataTypeObj = pageContext['dataTypeMaps'][tableName]
+  let toolbarFieldParam = []
+  if (data) {
+    for (var key in data) {
+      const value = data[key]
+      if (value !== null && value !== undefined && value !== '') {
+        // 需要解析data为FieldParam,
+        // 如果是多选，需要用or拼接，其他不为空不为“”的值，用and连接
+        if (value instanceof Array) {
+          // 需要解析为两个
+          if (value.length > 0) {
+            const multipleFieldParam = []
+            for (var i = 0; i < value.length; i++) {
+              const fieldParam = {}
+              if (i === 0) {
+                fieldParam['leftBracket'] = '(('
+              } else {
+                fieldParam['leftBracket'] = '('
+              }
+              fieldParam['propName'] = key
+              fieldParam['propDbName'] = key
+              fieldParam['dataType'] = dataTypeObj[key] ? dataTypeObj[key] : 'TEXT'
+              fieldParam['operator'] = 'EQ'
+              fieldParam['propValue'] = value[i]
+              if (i === value.length - 1) {
+                fieldParam['rightBracket'] = '))'
+                fieldParam['joinSign'] = 'and'
+              } else {
+                fieldParam['rightBracket'] = ')'
+                fieldParam['joinSign'] = 'or'
+              }
+              multipleFieldParam.push(fieldParam)
+            }
+            toolbarFieldParam = toolbarFieldParam.concat(multipleFieldParam)
+          }
+        } else {
+          // 解析为单个-判断是普通值还是时间选择
+          const fieldParam = {}
+          fieldParam['leftBracket'] = '('
+          fieldParam['propName'] = key
+          fieldParam['propDbName'] = key
+          fieldParam['dataType'] = dataTypeObj[key] ? dataTypeObj[key] : 'TEXT'
+          fieldParam['operator'] = 'EQ'
+          fieldParam['propValue'] = value
+          fieldParam['rightBracket'] = ')'
+          fieldParam['joinSign'] = 'and'
+          toolbarFieldParam.push(fieldParam)
+        }
+      }
+    }
+  }
+  gridRef.value.toolbarRefresh(null, null, toolbarFieldParam)
+}
+
+function resizeListHeight(params) {
+  // TODO: 重新计算列表高度
+  // const pageHeight = getStoreInfo(this.pageCode, '_pageHeight')
+  // if (pageHeight === undefined || pageHeight === null || pageHeight === '') {
+  //   return params.height - 20
+  // }
+}
+
+function customButtonClick(originalValue, formatValue, row, column, rowIndex, button) {
+  const otherParams = {
+    originalValue,
+    formatValue,
+    row,
+    column,
+    rowIndex,
+    button
+  }
+  const buttonConfigure = operationButtonObj.value[eventName.value]
+  getHandleEvent(null, pageContext, buttonConfigure, 'click', otherParams)
+}
+
+// 关闭浏览器页签时刷新列表
+function recieveMessage(event) {
+  if (event.data === 'close_open_win') {
+    gridRef.value.refresh()
+  }
+}
+
+// 选择记录时
+function select(selection, row) {
+  selections.value = selection
+  const params = {
+    selection,
+    row
+  }
+  gridSelectRecord(pageContext, configure, params)
+}
+
+function selectAll(selection) {
+  selections.value = selection
+  const params = {
+    selection
+  }
+  gridSelectAllRecords(pageContext, configure, params)
+}
+
+function selectionChange(newSelection) {
+  const params = {
+    newSelection
+  }
+  gridSelectionChange(pageContext, configure, params)
+}
+
+function cellClickEvent(row: any, column: any, cell: HTMLTableCellElement, event: Event) {
+  const params = {
+    row,
+    column,
+    cell,
+    event
+  }
+  cellClick(pageContext, configure, params)
+}
+
+function cellDblClickEvent(row: any, column: any, cell: HTMLTableCellElement, event: Event) {
+  const params = {
+    row,
+    column,
+    cell,
+    event
+  }
+  cellDblClick(pageContext, configure, params)
+}
+
+function rowClickEvent(row: any, column: any, event: Event) {
+  const params = {
+    row,
+    column,
+    event
+  }
+  rowClick(pageContext, configure, params)
+}
+
+function rowDblClickEvent(row: any, column: any, event: Event) {
+  const params = {
+    row,
+    column,
+    event
+  }
+  rowDblClick(pageContext, configure, params)
+}
+
+function headerClickEvent(column: any, event: Event) {
+  const params = {
+    column,
+    event
+  }
+  headerClick(pageContext, configure, params)
+}
+
+// api:子表保存时验证子表记录必填
+function validatorSunTableListData() {
+  return gridRef.value.validatorSunTableListData()
+}
+
+// api:列表组件内容刷新后的回调事件
+function clearSelections() {
+  selections.value = []
+}
+
+// api:刷新列表数据
+function refresh() {
+  return gridRef.value.refresh()
+}
+
+// api:行编辑新建记录
+function createRow() {
+  return gridRef.value.createRow(listCode)
+}
+
+// api：获得选中记录集合
+function getSelections() {
+  return selections.value
+}
+
+// api：获得选中记录id集合
+function getSelectionIds() {
+  const dataIds = []
+  if (selections.value !== null) {
+    selections.value.forEach((item) => {
+      dataIds.push(item.id ? item.id : item.ID ? item.ID : null)
+    })
+  }
+  return dataIds
+}
+
+// api:获得表格配置
+function getTableConfigure() {
+  return configure
+}
+
+// api: 是否是执行了删除操作
+function isDeleteChange(value) {
+  gridRef.value.isDeleteChange(value)
+}
+
+defineExpose({
+  refresh,
+  createRow,
+  clearSelections,
+  getSelections,
+  getSelectionIds,
+  getTableConfigure,
+  isDeleteChange,
+  validatorSunTableListData
+})
+</script>