super-page-runtime 1.0.12 → 1.0.14

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

@@ -0,0 +1,622 @@
+<template>
+  <div>
+    <super-grid
+      v-if="listViewShowFlag"
+      ref="gridRef"
+      :url="baseURL + '/common/super-forms/sub-table'"
+      :options="listViewOptions"
+      :code="superGridSetting ? null : listCode"
+      :settings="superGridSetting"
+      @select="select"
+      @select-all="selectAll"
+      @selection-change="selectionChange"
+      @cell-click="cellClickEvent"
+      @cell-dblclick="cellDblClickEvent"
+      @row-click="rowClickEvent"
+      @row-dblclick="rowDblClickEvent"
+      @header-click="headerClickEvent"
+      @fn-prohibit-to-edit="fnProhibitToEdit"
+      @change-grid-data="changeGridData"
+      @reload-grid="changeInitializationSubTable"
+      @refresMainTableFields="refresMainTableFields"
+      @set-select-options="setSelectOptions"
+      @change-rows-per-page="changeRowsPerpage"
+      @new-open-grid-dialog="popupToPage"
+      @change-form-data="changeFormData"
+    />
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed, onMounted, watch, ref } from 'vue'
+import type { Component, PageContext } from '../../../../utils/interfaces/page-design-types'
+import {
+  gridSelectRecord,
+  setTableEvents,
+  gridSelectAllRecords,
+  gridSelectionChange,
+  cellClick,
+  cellDblClick,
+  rowClick,
+  rowDblClick,
+  headerClick
+} from '../../../../utils/events/event-util'
+import { getVariableValue, setVariableValue } from '../../../../utils/page-helper-util'
+import { getFormModelFields } from '../../../../utils/page-init-util'
+// import eventBus from '../../../../utils/eventBus'
+import { popupToPage } from '../../../../utils/table-utils'
+import { getListCode } from '../../../../utils/common-util'
+interface MyProps {
+  pageContext: PageContext
+  configure: Component
+}
+const props = defineProps<MyProps>()
+const pageContext = props.pageContext
+const configure = props.configure
+// 表单的数据
+const dataModel = pageContext.entity.data
+// 绑定变量
+const prop = configure.props && configure.props.base ? configure.props.base.prop : null
+// 附加参数
+const additionalParamMap = pageContext.entity.request
+// 表格事件
+const tableEvents = configure.events
+// 表单子表切换每页显示多少条记录时的事件处理
+const subTablePageInfo = ref({})
+const selections = ref([])
+const superGridItems = pageContext.superGridItems
+const superGridSetting = superGridItems ? superGridItems[configure.uuid] : null
+console.log('superGridSetting===', superGridItems, superGridSetting)
+
+//获取默认的样式及配置
+const runtimeInfo = props.configure.runtime ? props.configure.runtime : {}
+
+const runtimeStyle = runtimeInfo.style
+const runtimeClass = runtimeInfo.class
+
+const entity: any = props.pageContext.entity ? props.pageContext.entity : {}
+
+let dynamicFields: string[] = getFormModelFields(props.pageContext, props.configure)
+
+const listViewShowFlag = ref(false)
+const baseURL = window['$vueApp'].config.globalProperties.baseURL
+const listViewOptions = ref({
+  subTableData: null,
+  extraParam: {},
+  operations: {},
+  hiddenColumns: [],
+  pageCode: pageContext.code,
+  pageVersion: pageContext.version,
+  pageContext,
+  configureObj: configure,
+  showPageArea: false,
+  showOverflowTooltip: !!(
+    configure.props &&
+    configure.props.otherSettings &&
+    (configure.props.otherSettings.isBreakLine === undefined ||
+      configure.props.otherSettings.isBreakLine === false)
+  ) // 单元格内容是否换行显示
+})
+
+if (runtimeStyle) {
+  listViewOptions.value['tableStyle'] = runtimeStyle
+}
+if (runtimeClass) {
+  listViewOptions.value['tableClass'] = runtimeClass
+}
+if (
+  (configure.props && configure.props.base && configure.props.base.subPaging === undefined) ||
+  configure.props.base.subPaging === null ||
+  configure.props.base.subPaging === false
+) {
+  listViewOptions.value.showPageArea = false
+} else {
+  listViewOptions.value.showPageArea = true
+}
+// 获得列表的Ref对象
+const gridRef = ref(null)
+const listCode = getListCode(pageContext.code, pageContext.version, configure.uuid)
+
+// 列表设置-通用设置
+function currencyListViewSetting(canRrefreshSubtableData?: boolean) {
+  if (canRrefreshSubtableData === undefined) {
+    // 表示没有传该参数过来时，重新获得
+    canRrefreshSubtableData = judgeInitializationSubTable()
+  }
+  listViewOptions.value['isFormSubTable'] = true
+  listViewOptions.value['canRrefreshSubtableData'] = canRrefreshSubtableData
+  listViewOptions.value['getFormData'] = getParentFormData
+  listViewOptions.value['getGridData'] = getGridData
+  if (!(configure.props && configure.props.base && configure.props.base.showOperation)) {
+    let hiddenColumns = listViewOptions.value.hiddenColumns
+    if (!hiddenColumns) {
+      hiddenColumns = ['operation']
+    } else {
+      hiddenColumns.push('operation')
+    }
+    listViewOptions.value['hiddenColumns'] = hiddenColumns
+  }
+  listViewOptions.value['showOperationButton'] =
+    configure.props && configure.props.base ? configure.props.base.showOperation : false
+  listViewOptions.value['isPdfEditor'] = false
+  listViewOptions.value['tableRecordMaxNum'] =
+    configure.props && configure.props.otherSettings
+      ? configure.props.otherSettings.tableRecordMaxNum
+      : null
+  // TODO: table组件的”尺寸/高度“要保留
+  if (configure.props && configure.props.size && configure.props.size.fixHeight) {
+    listViewOptions.value['formSetHeight'] = configure.props.size.fixHeight
+  }
+  // TODO: table组件的”尺寸“添加”最大高度“
+  if (configure.props && configure.props.size && configure.props.size.maxHeight) {
+    listViewOptions.value['formSetMaxHeight'] = configure.props.size.maxHeight
+  }
+}
+
+// 是否初始化子表
+function judgeInitializationSubTable() {
+  if (!configure.props || !configure.props.otherSettings) {
+    return
+  }
+  // 判断时机
+  if (
+    configure.props.otherSettings.subtableSetting &&
+    configure.props.otherSettings.timeToInitializeSubTable &&
+    configure.props.otherSettings.subtableSetting.timeToInitializeSubTable.length > 0
+  ) {
+    let flag = false
+    if (
+      configure.props.otherSettings.subtableSetting.timeToInitializeSubTable.indexOf('create') !==
+      -1
+    ) {
+      if (dataModel.id || dataModel.ID) {
+        // 表示有id
+        flag = false
+      } else {
+        flag = true
+      }
+    }
+    if (
+      configure.props.otherSettings.subtableSetting.timeToInitializeSubTable.indexOf('noData') !==
+      -1
+    ) {
+      const tableData = dataModel[prop]
+      if (!tableData || tableData.length <= 0) {
+        // 表示没数据
+        flag = true
+      }
+    }
+    return flag
+  } else {
+    return false
+  }
+}
+
+// 获得表单内容
+function getParentFormData() {
+  return pageContext.entity.data
+}
+
+// 获得表格数据
+function getGridData() {
+  return getVariableValue(entity, dynamicFields)
+}
+
+function changeInitializationSubTable(canRrefreshSubtableData?: boolean) {
+  currencyListViewSetting(canRrefreshSubtableData)
+  // TODO:是否区分设计、预览、正常解析
+  listViewOptions.value['isPageInfo'] = false
+  listViewOptions.value['subTableData'] = null
+  listViewOptions.value.extraParam['subTableListViewCode'] = listCode
+  listViewOptions.value.extraParam['subtableSetting'] =
+    configure.props || !configure.props.otherSettings
+      ? JSON.stringify(configure.props.otherSettings.subtableSetting)
+      : null
+  listViewOptions.value.extraParam['additionalParamMap'] = additionalParamMap
+  // console.log('主表发生改变', models)
+  listViewOptions.value.extraParam['entityMap'] = pageContext.entity.data
+  // TODO: formViewCode没找到superGrid组件中使用的地方，后面再看
+  // listViewOptions.value.extraParam['formViewCode'] = store.get('formViewCode')
+  // 设置子表事件相关配置
+  setGridDataEventOptions()
+  // console.log('修改表单子表记录前---getElementId(widget)=', getElementId(widget))
+  // 重新加载子表记录
+  listViewShowFlag.value = false
+  setTimeout(() => {
+    // console.log('修改表单子表记录前11')
+    listViewShowFlag.value = true
+    setGridToStore()
+    // console.log('修改表单子表记录后')
+  }, 10)
+}
+
+// 初始化列表配置
+changeInitializationSubTable()
+
+// 设置子表事件相关配置
+function setGridDataEventOptions() {
+  // 设置子表字段权限相关信息
+  setSubTableValidateInfo()
+  // console.log('fieldPermissionMap', fieldPermissionMap)
+  // console.log('actionPermissionMap', actionPermissionMap)
+  const tableEvents = configure.events
+  setTableEvents(listViewOptions.value, tableEvents, pageContext, configure)
+  const customEvents = pageContext.customEvents
+  if (customEvents) {
+    // 表单页面中子表自定义事件集合
+    listViewOptions.value['eventCallBack'] = customEvents
+  }
+  listViewShowFlag.value = true
+  setGridToStore()
+}
+
+// 设置子表字段编辑权限相关信息
+function setSubTableValidateInfo() {
+  // console.log('fieldPermissionMap', fieldPermissionMap)
+  // console.log('propName', propName)
+  const fieldPermissionMap = pageContext.fieldPermissionMap
+  const actionPermissionMap = pageContext.actionPermissionMap
+  if (fieldPermissionMap && fieldPermissionMap != null) {
+    let validateRules = fieldPermissionMap.get(prop)
+    if (!validateRules) {
+      const allValidateRules = fieldPermissionMap.get('all_fields')
+      if (allValidateRules) {
+        validateRules = [allValidateRules]
+      }
+    }
+    // console.log('validateRules', validateRules)
+    if (validateRules) {
+      // 表示有子表行编辑验证
+      listViewOptions.value['validateRules'] = validateRules
+    } else {
+      listViewOptions.value['validateRules'] = null
+    }
+  }
+  if (actionPermissionMap && actionPermissionMap != null) {
+    let actionPermission = actionPermissionMap.get(prop)
+    if (!actionPermission) {
+      actionPermission = actionPermissionMap.get('all_sub_tables')
+    }
+    listViewOptions.value['actionPermission'] = actionPermission
+  }
+  // 子表是否可以新增记录
+  const subTableOperations = getOperations()
+  // 子表操作列按钮集合
+  listViewOptions.value['operations']['operation'] = subTableOperations
+  listViewOptions.value['subTableCanAdd'] = isShowAdd()
+}
+
+function setGridToStore() {
+  if (!pageContext.tableUuids) {
+    pageContext.tableUuids = []
+  }
+  pageContext.tableUuids.push(configure.uuid)
+  // TODO: 数据表子表集合如何获得？？选择服务时没有对应的数据表
+  // if(!pageContext.tableNames){
+  //   pageContext.tableNames = []
+  // }
+  // pageContext.tableNames.push(configure.props.dataOrigin.)
+}
+// 获得子表操作列按钮
+function getOperations() {
+  let operations = []
+  if (isShowAdd()) {
+    // 新增按钮
+    const addButton = {
+      props: {
+        elementType: 'el-button',
+        icon: 'Plus',
+        type: 'primary',
+        circle: true,
+        size: 'mini',
+        permission: 'true'
+      },
+      onClick: addSubTableData
+    }
+    operations.push(addButton)
+    // console.log('子表有创建权限')
+  }
+  if (isShowDelete(null, null, null, null, null, true)) {
+    // 删除按钮
+    const removeButton = {
+      props: {
+        elementType: 'el-button',
+        icon: 'Minus',
+        type: 'danger',
+        circle: true,
+        size: 'mini',
+        permission: 'true'
+      },
+      onClick: removeSubTableData,
+      isShow: isShowDelete
+    }
+    operations.push(removeButton)
+    // console.log('子表有删除权限')
+  }
+  return operations
+}
+function getEntityId(row) {
+  if (row && row.id) {
+    return row.id
+  } else if (row && row.ID) {
+    return row.ID
+  }
+}
+// 是否有新增权限
+function isShowAdd() {
+  const fieldPermissionMap = pageContext.fieldPermissionMap
+  const actionPermissionMap = pageContext.actionPermissionMap
+
+  let canAdd = true
+  if (fieldPermissionMap && fieldPermissionMap !== null) {
+    const allFieldPermission = fieldPermissionMap.get('all_fields')
+    if (
+      typeof allFieldPermission !== 'undefined' &&
+      allFieldPermission.canEdit === false &&
+      (allFieldPermission.rowIndexes === undefined ||
+        allFieldPermission.rowIndexes === null ||
+        allFieldPermission.rowIndexes.length === 0)
+    ) {
+      // 表示所有字段都禁止编辑，则表示子表也不能删除
+      canAdd = false
+    }
+  }
+  if (canAdd === true && prop && actionPermissionMap && actionPermissionMap !== null) {
+    let oneTableActionPermission = actionPermissionMap.get(prop)
+    if (!oneTableActionPermission) {
+      oneTableActionPermission = actionPermissionMap.get('all_sub_tables')
+    }
+    if (
+      oneTableActionPermission &&
+      oneTableActionPermission.canAdd !== undefined &&
+      oneTableActionPermission.canAdd === false
+    ) {
+      canAdd = false
+    }
+  }
+  return canAdd
+}
+
+// 是否有删除权限
+function isShowDelete(originalValue, formatValue, row, column, rowIndex, isFormJudge) {
+  // console.log('isShowDelete', originalValue, formatValue, row, column, rowIndex)
+  const fieldPermissionMap = pageContext.fieldPermissionMap
+  const actionPermissionMap = pageContext.actionPermissionMap
+  let canDelete = true
+  if (fieldPermissionMap && fieldPermissionMap !== null) {
+    const allFieldPermission = fieldPermissionMap.get('all_fields')
+    if (
+      typeof allFieldPermission !== 'undefined' &&
+      allFieldPermission.canEdit === false &&
+      (allFieldPermission.rowIndexes === undefined ||
+        allFieldPermission.rowIndexes === null ||
+        allFieldPermission.rowIndexes.length === 0)
+    ) {
+      // 表示所有字段都禁止编辑，则表示子表也不能删除
+      canDelete = false
+    }
+  }
+  if (canDelete === true && prop && actionPermissionMap && actionPermissionMap !== null) {
+    let oneTableActionPermission = actionPermissionMap.get(prop)
+    if (!oneTableActionPermission) {
+      oneTableActionPermission = actionPermissionMap.get('all_sub_tables')
+    }
+    if (
+      oneTableActionPermission &&
+      oneTableActionPermission.canDelete !== undefined &&
+      oneTableActionPermission.canDelete === false
+    ) {
+      canDelete = false
+    }
+    if (
+      oneTableActionPermission &&
+      oneTableActionPermission.canDelete !== undefined &&
+      oneTableActionPermission.canDelete === true
+    ) {
+      if (oneTableActionPermission.deleteRowIndexes) {
+        // 表示配置了可删除行记录
+        if (oneTableActionPermission.deleteRowIndexes.length > 0) {
+          if (isFormJudge) {
+            canDelete = true
+          } else {
+            // 表示配置了可删除，并且有满足条件的行记录，那就判断是否是当前行
+            const rowId = getEntityId(row)
+            if (
+              rowId !== undefined &&
+              oneTableActionPermission.deleteRowIndexes.indexOf(rowId) >= 0
+            ) {
+              canDelete = true
+            } else {
+              canDelete = false
+            }
+          }
+        } else {
+          // 表示没有配置行删除获取没有符合执行条件的记录，直接返回false
+          canDelete = false
+        }
+      }
+    }
+  }
+  // console.log('canDelete', canDelete)
+  return canDelete
+}
+function addSubTableData(originalValue, formatValue, row, column, rowIndex) {
+  gridRef.value.createRow(listCode)
+}
+function removeSubTableData(originalValue, formatValue, row, column, rowIndex) {
+  gridRef.value.deleteRow(rowIndex, listCode, false)
+}
+
+function changeGridData(gridData) {
+  setVariableValue(entity, dynamicFields, gridData)
+}
+
+// 捕获改变列表每页显示多少条记录事件处理
+function changeRowsPerpage(pageSize) {
+  console.log('表单组件--Item--changeRowsPerpage==pageSize=', pageSize)
+  if (!pageContext.subTablePageInfo) {
+    pageContext.subTablePageInfo = {}
+  }
+  pageContext.subTablePageInfo[prop] = { pageSize: pageSize }
+}
+
+// 下拉选集合初始化事件
+function setSelectOptions(valueSetOptions) {
+  const propName = valueSetOptions.key
+  const options = valueSetOptions.value
+  if (!pageContext.selectOptions) {
+    pageContext.selectOptions = {}
+  }
+  pageContext.selectOptions[propName] = options
+}
+
+// 设置禁止编辑字段
+function fnProhibitToEdit(data) {
+  const myPageCode = pageContext.code
+  const eventPageInfo = myPageCode + '_'
+  window['$eventBus'].$emit(eventPageInfo + 'prohibit-edit', data)
+}
+
+// 更新主表字段的值
+function refresMainTableFields(entity) {
+  const dataModel = pageContext.entity.data
+  if (entity) {
+    for (const key in entity) {
+      dataModel[key] = entity[key]
+    }
+  }
+}
+
+// 选择记录时
+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)
+}
+
+// TODO: pageModel更新如何更新
+function changeFormData(formData) {
+  pageContext.entity.data = formData
+}
+
+// api:子表保存时验证子表记录必填
+function validatorSunTableListData() {
+  return gridRef.value.validatorSunTableListData()
+}
+
+// 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 clearSelections() {
+  selections.value = []
+}
+// api:获得表格配置
+function getTableConfigure() {
+  return configure
+}
+
+/**
+ *api: 获取值
+ */
+function getValue() {
+  return getVariableValue(entity, dynamicFields)
+}
+
+/**
+ * api:设置值
+ */
+function setValue(value: any) {
+  return setVariableValue(entity, dynamicFields, value)
+}
+
+defineExpose({
+  createRow,
+  getSelections,
+  getSelectionIds,
+  clearSelections,
+  getTableConfigure,
+  validatorSunTableListData,
+  getValue,
+  setValue
+})
+</script>

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

@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <SubTable
+      v-if="pageType && pageType === 'form'"
+      ref="gridRef"
+      :pageContext="pageContext"
+      :configure="configure"
+    />
+    <MainTable v-else ref="gridRef" :pageContext="pageContext" :configure="tableConfigure" />
+  </div>
+</template>
+<script lang="ts" setup>
+import { SuperIcon } from 'agilebuilder-ui'
+import { computed, onMounted, watch, ref } from 'vue'
+import { Component, PageContext } from '../../../../utils/interfaces/page-design-types'
+import { getVariableValue, setVariableValue } from '../../../../utils/page-helper-util'
+import SubTable from './sub-table-runtime.vue'
+import MainTable from './main-table-runtime.vue'
+interface MyProps {
+  pageContext: PageContext
+  configure: Component
+}
+const props = defineProps<MyProps>()
+const pageType = props.pageContext.pageType
+const tableConfigure = ref(null)
+const tableUuid = props.configure.uuid
+const superGridItems = props.pageContext.superGridItems
+const superGridSetting = superGridItems ? superGridItems[tableUuid] : null
+tableConfigure.value = superGridSetting.configure ? JSON.parse(superGridSetting.configure) : null
+
+//获取默认的样式及配置
+const runtimeInfo = props.configure.runtime ? props.configure.runtime : {}
+
+const runtimeStyle = runtimeInfo.style
+const runtimeClass = runtimeInfo.class
+const gridRef = ref(null)
+// api:子表保存时验证子表记录必填
+function validatorSunTableListData() {
+  if (pageType && pageType === 'form') {
+    return gridRef.value.validatorSunTableListData()
+  }
+}
+
+// api:列表组件内容刷新后的回调事件
+function clearSelections() {
+  return gridRef.value.clearSelections()
+}
+
+// api:刷新列表数据
+function refresh() {
+  if (pageType && pageType === 'list') {
+    return gridRef.value.refresh()
+  }
+}
+
+// api:行编辑新建记录
+function createRow() {
+  return gridRef.value.createRow()
+}
+
+// api：获得选中记录集合
+function getSelections() {
+  return gridRef.value.getSelections()
+}
+
+// api：获得选中记录id集合
+function getSelectionIds() {
+  return gridRef.value.getSelectionIds()
+}
+
+// api:获得表格配置
+function getTableConfigure() {
+  return gridRef.value.getTableConfigure()
+}
+
+// api: 是否是执行了删除操作
+function isDeleteChange(value) {
+  if (pageType && pageType === 'list') {
+    gridRef.value.isDeleteChange(value)
+  }
+}
+
+defineExpose({
+  refresh,
+  createRow,
+  clearSelections,
+  getSelections,
+  getSelectionIds,
+  getTableConfigure,
+  isDeleteChange,
+  validatorSunTableListData
+})
+</script>