super-page-runtime 1.0.15 → 1.0.16

package/components/runtime/views/super-page.vue

@@ -0,0 +1,667 @@
+<template>
+  <div>
+    <div v-if="isShowPage" ref="thisRef" :class="pageClass" :style="pageStyle">
+      <template v-for="(element, itemIndex) in pageItems" :key="element.uuid">
+        <ObjectRender :configure="element" :pageContext="pageContext"></ObjectRender>
+      </template>
+      <exportFormReportDialog
+        v-if="showExportForm"
+        :configure="buttonConfigure"
+        :pageContext="buttonPageContext"
+        @close="closeExportFormDialog"
+        @export="doExportFormReport"
+      />
+      <input
+        ref="_selectFile_"
+        type="file"
+        name="_selectFile_"
+        style="display: none"
+        @change="doImport()"
+      />
+      <department-user-tree
+        v-if="selectAddSignerUser || selectCopyUser || selectAssignUser"
+        width="60%"
+        :multiple="isMulti"
+        @close="closeDeptUserTree"
+      />
+      <TaskInformitionDialog
+        v-if="showTaskInformitions"
+        :task-informitions="taskInformitions"
+        @close="showTaskInformitions = false"
+        @result="myReturnTaskTo"
+      />
+      <RemoveSignerDialog
+        v-if="showRemoveSigner"
+        :task-id="taskIdVal"
+        :active-tasks="activeTasks"
+        @close="showRemoveSigner = false"
+        @result="myDoRemoveSigners"
+      />
+      <superPageDialog
+        v-if="isShowDialog"
+        :parentPageContext="parentPageContext"
+        :parentPageEventParams="parentEventParams"
+        :jumpPageSetting="jumpPageSetting"
+        @close="closeDialog()"
+      >
+      </superPageDialog>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ref, reactive, onMounted, onUnmounted, onUpdated, nextTick, PropType } from 'vue'
+import ObjectRender from './assemblys/object-render.vue'
+import type { PageDesign, PageContext } from '../../../src/utils/interfaces/page-design-types'
+import { updateOptionDatasources } from '../../../src/utils/page-helper-util'
+import {
+  queryPageDesign,
+  queryPageDesignByCode,
+  convertToPageContext,
+  queryPageSuperGrids
+} from '../../../src/utils/page-init-util'
+import {
+  initComponentRefState,
+  addComponentRef,
+  removePageAllRef,
+  getComponentRefByCode
+} from '../../../src//utils/global-refs'
+import {
+  removeCustomFuncFromWindow,
+  initPageEvents,
+  handleEvent
+} from '../../../src/utils/events/event-util'
+import exportFormReportDialog from './assemblys/common/export-form-report-dialog.vue'
+import TaskInformitionDialog from './assemblys/common/task-informition-dialog.vue'
+import RemoveSignerDialog from './assemblys/common/remove-signer-dialog.vue'
+// import eventBus from '../utils/eventBus'
+import { getData } from '../../../src/utils/api/api-util'
+import {
+  exportFormReport,
+  doImportFinally,
+  doAddSigner,
+  doCreateCopyTask,
+  doAssign,
+  getTaskInformitions,
+  doReturnTaskTo,
+  getRemoveSigner,
+  doRemoveSigners
+} from '../../../src/utils/events/standard-event'
+import { ElMessage } from 'element-plus'
+import { useI18n } from 'vue-i18n'
+import { DepartmentUserTree } from 'agilebuilder-ui'
+import { i18nValidateRulesMessage } from '../../../src/utils/events/validator-util'
+import superPageDialog from '../../super-page-dialog/super-page-dialog.vue'
+import { useRouter } from 'vue-router'
+import { jumpToPage } from 'agilebuilder-ui/src/utils/jump-page-utils'
+const { t } = useI18n()
+
+//定义初始化的参数
+// interface MyProps {
+//   //页面编码
+//   pageCode?: string
+//   //页面版本
+//   pageVersion?: number
+//   //页面ID
+//   pageId?: number
+//   //表单数据ID
+//   dataIds?: string
+//   //测试对象
+//   pageDesign: PageDesign
+//   //是否测试
+//   isTest?: boolean
+//   // 系统版本号
+//   publishVersion: number
+//   // 任务id。流程表单页面办理任务时任务id
+//   taskId?: number
+//   // 页面跳转request参数
+//   pageRequest?: object
+// }
+const props = defineProps({
+  //页面编码
+  pageCode: {
+    type: String,
+    required: false
+  },
+  //页面版本
+  pageVersion: {
+    type: Number,
+    required: false
+  },
+  //页面ID
+  pageId: {
+    type: Number,
+    required: false
+  },
+  //表单数据ID
+  dataIds: {
+    type: String,
+    required: false
+  },
+  //测试对象
+  pageDesign: {
+    type: Object as PropType<PageDesign>,
+    required: false
+  },
+  //是否测试
+  isTest: {
+    type: Boolean,
+    required: false
+  },
+  // 系统版本号
+  publishVersion: {
+    type: Number,
+    required: false
+  },
+  // 任务id。流程表单页面办理任务时任务id
+  taskId: {
+    type: Number,
+    required: false
+  },
+  // 页面跳转request参数
+  pageRequest: {
+    type: Object,
+    required: false
+  }
+})
+const emits = defineEmits(['open', 'opened', 'close', 'closed'])
+
+//绑定页面对象
+const thisRef: any = ref(null)
+
+const pageItems: any = ref([])
+const pageClass = ref('')
+const pageStyle: any = ref({})
+const pageDesignResult = ref(null)
+const buttonParams = ref(null)
+const showExportForm = ref(false)
+const selectAddSignerUser = ref(false)
+const selectCopyUser = ref(false)
+const selectAssignUser = ref(false)
+const isMulti = ref(false)
+const eventPageInfo = ref(null) // 格式：pageCoe_pageVersion
+const showTaskInformitions = ref(false) // 显示可选退回环节弹框
+const taskInformitions = ref([]) //  可退回的环节名称集合
+const activeTasks = ref([]) // 可减签的任务集合
+const showRemoveSigner = ref(false) // 显示减签任务弹框
+const taskIdVal = ref(null) // 当前任务id
+const isShowPage = ref(false) // 是否显示页面
+const isShowDialog = ref(false) // 是否显示弹框
+const jumpPageSetting = ref(null) // 解析后的跳转页面配置
+const parentPageContext = ref(null) // 弹框的父页面的pageContext
+const parentConfigureObj = ref(null) // 点击的组件的配置信息，例如：按钮、超链接、前缀图标、后缀图标等的配置原信息
+const parentEventParams = ref(null) // 点击事件时的参数
+//查询页面设计对象
+let pageContext: PageContext | any
+const buttonConfigure = ref(null)
+const buttonPageContext = ref(null)
+
+/**
+ * 初始化页面对象
+ * @param pageDesign
+ */
+function initPageDesign(pageDesign: PageDesign) {
+  console.log('pageDesign==', pageDesign)
+  pageContext = reactive(convertToPageContext(pageDesign, props.pageRequest))
+  if (pageContext == null) {
+    return
+  }
+  //是否测试环境
+  pageContext.isTest = props.isTest
+
+  //初始化选项组等数据
+  setTimeout(() => {
+    initOptionDatas(pageContext, pageDesign.initOptionConfigs)
+  }, 0)
+
+  //指定初始化查询的数据值,缓存需要初始化的数据源的值
+  pageContext.initDataSources = []
+  //初始化缓存对象
+  initComponentRefState(pageContext)
+  //页面元素
+  pageItems.value = pageContext.items ? pageContext.items : []
+  //检查运行时的参数
+  const runtime = pageContext.runtime ? pageContext.runtime : {}
+  pageClass.value = runtime.class
+  pageStyle.value = runtime.style
+  // 缓存页面事件，并转为Function对象，并绑定自定义方法到window对象上
+  initPageEvents(pageDesign, pageContext)
+  // TODO: 国际化验证message功能待测试
+  i18nValidateRulesMessage(pageContext.rules)
+  // 页面布局加载后，但数据加载前的事件
+  handleEvent(null, pageContext, pageDesign, 'beforeload')
+
+  const myPageCode = pageContext.code
+  // const myPageVersion = pageContext.version
+  eventPageInfo.value = myPageCode + '_'
+  // 表单中导出报告功能
+  window['$eventBus'].$on(eventPageInfo.value + 'export-form-report', (params) => {
+    buttonParams.value = params
+    buttonConfigure.value = params.configureObj
+    buttonPageContext.value = params.pageContext
+    showExportForm.value = true
+  })
+  // 列表中导入功能
+  window['$eventBus'].$on(eventPageInfo.value + 'import-file', (params) => {
+    buttonParams.value = params
+    clickImport()
+  })
+  // 显示指派人员树
+  window['$eventBus'].$on(eventPageInfo.value + 'assign-task', (params) => {
+    buttonParams.value = params
+    selectAssignUser.value = true
+    isMulti.value = false
+  })
+  // 显示生成抄送任务人员树
+  window['$eventBus'].$on(eventPageInfo.value + 'copy-task', (params) => {
+    buttonParams.value = params
+    selectCopyUser.value = true
+    isMulti.value = true
+  })
+  // 显示加签人员树
+  window['$eventBus'].$on(eventPageInfo.value + 'add-signer', (params) => {
+    buttonParams.value = params
+    selectAddSignerUser.value = true
+    isMulti.value = true
+  })
+  // 显示可选的退回的环节集合
+  window['$eventBus'].$on(eventPageInfo.value + 'choose-return-node', (params) => {
+    buttonParams.value = params
+    getTaskInformitions(params)
+      .then((result) => {
+        taskInformitions.value = result
+        showTaskInformitions.value = true
+      })
+      .catch((e) => {
+        console.log('显示可选的退回的环节集合异常', e)
+        showTaskInformitions.value = false
+      })
+  })
+  // 显示可减签的环节集合
+  window['$eventBus'].$on(eventPageInfo.value + 'remove-signer', (params) => {
+    buttonParams.value = params
+    getRemoveSigner(params)
+      .then((result) => {
+        taskIdVal.value = params.pageContext.completeTaskParam.taskId
+        activeTasks.value = result
+        showRemoveSigner.value = true
+      })
+      .catch((e) => {
+        console.log('显示可减签的环节集合异常', e)
+        showRemoveSigner.value = false
+      })
+  })
+  // 设置禁止编辑
+  window['$eventBus'].$on(eventPageInfo.value + 'prohibit-edit', (data) => {
+    fnProhibitToEdit(data)
+  })
+  // 打开弹框
+  window['$eventBus'].$on(eventPageInfo.value + 'open-dialog', (params) => {
+    parentPageContext.value = params.pageContext
+    parentConfigureObj.value = params.configureObj
+    parentEventParams.value = params.eventParams
+    openDialog(params.configureObj)
+  })
+  // 关闭弹框
+  window['$eventBus'].$on(eventPageInfo.value + 'close-dialog', (pageContext, configureObj) => {
+    parentPageContext.value = null
+    parentConfigureObj.value = null
+    parentEventParams.value = null
+    closeDialog()
+  })
+  // 加载表单数据
+  getData(pageContext).then((commonEntity) => {
+    const pageType = pageContext.pageType
+    if (pageType && pageType === 'form') {
+      // 将工作流字段权限封装为map
+      changePermissionListToMap()
+      // 表单数据加载后的事件
+      handleEvent(null, pageContext, pageDesign, 'load')
+    }
+  })
+}
+
+/**
+ * 初始化选项组数据
+ */
+function initOptionDatas(pageContext: PageContext, optionConfigs: Array<any>) {
+  if (!optionConfigs || optionConfigs.length == 0) {
+    console.log('无需要初始化的选项组数据')
+    return
+  }
+  //剔除远程调用的数据
+  const initOptionConfigs = optionConfigs.filter((item: any) => {
+    return item.filterType != 'remote'
+  })
+  console.log('pageContext.initOptionConfigs:', initOptionConfigs)
+  if (initOptionConfigs && initOptionConfigs.length > 0) {
+    updateOptionDatasources(pageContext, initOptionConfigs, undefined)
+  }
+}
+
+//设置为全屏
+onMounted(() => {
+  if (props.pageDesign != null) {
+    pageDesignResult.value = props.pageDesign
+    setTimeout(() => {
+      initPageDesign(props.pageDesign)
+      if (
+        props.pageDesign.tableRuntimes &&
+        Object.keys(props.pageDesign.tableRuntimes).length > 0
+      ) {
+        queryPageSuperGrids(props.pageDesign, pageContext, props.publishVersion)
+          .then((superGridItems) => {
+            pageContext.superGridItems = superGridItems
+            isShowPage.value = true
+          })
+          .catch(() => {
+            isShowPage.value = true
+          })
+      } else {
+        isShowPage.value = true
+      }
+    }, 0)
+  } else if (props.pageCode) {
+    queryPageDesignByCode(props.pageCode).then((result) => {
+      pageDesignResult.value = result
+      initPageDesign(result)
+      isShowPage.value = true
+    })
+  }
+  if (thisRef.value) {
+    setTimeout(() => {
+      //设置父类的高度和自动滚动
+      const parentNode = thisRef.value.parentNode ? thisRef.value.parentNode : thisRef.value
+      const rect = parentNode.getBoundingClientRect()
+      const contentHeight = window.innerHeight - rect.y - 40
+      parentNode.style.height = contentHeight + 'px'
+      parentNode.style['overflow-y'] = 'auto'
+      //pageStyle.value.height = contentHeight + "px";
+    }, 10)
+  }
+})
+//更新完成后
+onUpdated(() => {
+  nextTick(() => {
+    if (pageContext && thisRef.value) {
+      addComponentRef(pageContext, '-1', thisRef)
+      //测试获取对象
+      // const testRef: any = getComponentRefByCode(pageContext, 'test');
+    }
+  })
+})
+onUnmounted(() => {
+  //移除页面缓存
+  removePageAllRef(pageContext)
+  if (pageDesignResult.value) {
+    removeCustomFuncFromWindow(pageDesignResult.value)
+  }
+  window['$eventBus'].$off(eventPageInfo.value + 'export-form-report')
+  window['$eventBus'].$off(eventPageInfo.value + 'import-file')
+  window['$eventBus'].$off(eventPageInfo.value + 'assign-task')
+  window['$eventBus'].$off(eventPageInfo.value + 'copy-task')
+  window['$eventBus'].$off(eventPageInfo.value + 'add-signer')
+  window['$eventBus'].$off(eventPageInfo.value + 'choose-return-node')
+  window['$eventBus'].$off(eventPageInfo.value + 'remove-signer')
+  window['$eventBus'].$off(eventPageInfo.value + 'prohibit-edit')
+})
+
+// 关闭选择导出模板弹框
+function closeExportFormDialog() {
+  showExportForm.value = false
+  buttonParams.value = null
+}
+
+// 执行导出报告
+function doExportFormReport(templateFile) {
+  const isPdf = false
+  exportFormReport(
+    buttonParams.value.pageContext,
+    buttonParams.value.configureObj,
+    templateFile,
+    isPdf
+  )
+}
+
+// 点击导入按钮弹出文件选择功能
+const _selectFile_ = ref(null)
+function clickImport() {
+  _selectFile_.value.click()
+}
+
+// 选择文件后执行导入
+function doImport() {
+  if (buttonParams.value) {
+    if (!_selectFile_.value) {
+      return
+    }
+    if (_selectFile_.value.value === '' || _selectFile_.value.value === null) return
+    const fileObj = _selectFile_.value.files[0]
+    if (fileObj) {
+      _selectFile_.value.value = null
+      // console.log('doImport=', button)
+      doImportFinally(buttonParams.value, fileObj)
+    } else {
+      ElMessage({
+        showClose: true,
+        type: 'warning',
+        message: t('superPageRuntimeMessage.noFileSelected')
+      })
+    }
+  }
+}
+
+function closeDeptUserTree(selectNodeInfo) {
+  if (selectAddSignerUser.value === true) {
+    // 表示是关闭加签人员树
+    selectAddSignerUser.value = false
+    doAddSigner(buttonParams.value, selectNodeInfo)
+  }
+  if (selectCopyUser.value === true) {
+    // 表示是关闭抄送人员树
+    selectCopyUser.value = false
+    doCreateCopyTask(buttonParams.value, selectNodeInfo)
+  }
+  if (selectAssignUser.value === true) {
+    // 表示是关闭指派人员树
+    selectAssignUser.value = false
+    doAssign(buttonParams.value, selectNodeInfo)
+  }
+}
+
+// 选择退回到的环节后功能
+function myReturnTaskTo(selectTaskNode) {
+  taskInformitions.value = []
+  showTaskInformitions.value = false
+  doReturnTaskTo(buttonParams.value, selectTaskNode)
+}
+
+function myDoRemoveSigners(selectRemoveTasks) {
+  activeTasks.value = []
+  showRemoveSigner.value = false
+  doRemoveSigners(buttonParams.value, selectRemoveTasks)
+}
+
+// 将工作流字段权限封装为map
+function changePermissionListToMap() {
+  changeFieldPermissionToMap()
+  changeActionPermissionToMap()
+}
+
+// 将工作流字段权限封装为map
+function changeFieldPermissionToMap() {
+  let fieldPermissionMap = pageContext.fieldPermissionMap
+  let actionPermissionMap = pageContext.actionPermissionMap
+  const fieldPermissions = pageContext.fieldPermissions
+  if (fieldPermissionMap === null) {
+    fieldPermissionMap = new Map()
+  }
+  if (actionPermissionMap === null) {
+    actionPermissionMap = new Map()
+  }
+  if (typeof fieldPermissions !== 'undefined') {
+    for (let i = 0; i < fieldPermissions.length; i++) {
+      const prop = fieldPermissions[i].name
+      if (prop) {
+        if (prop.indexOf('$') === 0 && prop.indexOf('.') > 0) {
+          // 表示是子表字段
+          const fieldPermissionOrg = fieldPermissions[i]
+          const fieldPermission = JSON.parse(JSON.stringify(fieldPermissionOrg))
+          // 获得子表model名，一般名称
+          const subModelName = prop.substring(1, prop.indexOf('.'))
+          // 获得子表字段名
+          const subProp = prop.substring(prop.indexOf('.') + 1)
+          fieldPermission.name = subProp
+
+          if (fieldPermission && fieldPermission.name === 'all_fields') {
+            // 表示所有字段的配置
+            if (fieldPermission.canEdit === false) {
+              // 表示所有字段禁止编辑
+              if (fieldPermission.rowIndexes) {
+                fieldPermissionMap.set(subModelName, [
+                  {
+                    name: 'all_fields',
+                    canEdit: false,
+                    rowIndexes: fieldPermission.rowIndexes
+                  }
+                ])
+              } else {
+                fieldPermissionMap.set(subModelName, [{ name: 'all_fields', canEdit: false }])
+              }
+            } else {
+              if (fieldPermission.rowIndexes) {
+                // 表示所有字段必填
+                fieldPermissionMap.set(subModelName, [
+                  {
+                    name: 'all_fields',
+                    canEdit: true,
+                    rowIndexes: fieldPermission.rowIndexes
+                  }
+                ])
+              } else {
+                fieldPermissionMap.set(subModelName, [{ name: 'all_fields', canEdit: true }])
+              }
+            }
+          } else {
+            let subTableFieldPermission = fieldPermissionMap.get(subModelName)
+            if (subTableFieldPermission) {
+              subTableFieldPermission.push(fieldPermission)
+            } else {
+              subTableFieldPermission = []
+              subTableFieldPermission.push(fieldPermission)
+            }
+            fieldPermissionMap.set(subModelName, subTableFieldPermission)
+          }
+        } else {
+          // 表示是主表字段
+          fieldPermissionMap.set(prop, fieldPermissions[i])
+        }
+      }
+    }
+  }
+
+  pageContext.fieldPermissionMap = fieldPermissionMap
+}
+
+function changeActionPermissionToMap() {
+  let fieldPermissionMap = pageContext.fieldPermissionMap
+  let actionPermissionMap = pageContext.actionPermissionMap
+  const actionPermissions = pageContext.actionPermissions
+  // 根据“修改”操作控制子表字段禁止编辑
+  if (typeof actionPermissions !== 'undefined' && actionPermissions !== null) {
+    const subModelNames = Object.keys(actionPermissions)
+    subModelNames.forEach((subModelName) => {
+      const oneTableActionPermission = actionPermissions[subModelName]
+      const subTableFieldPermission = fieldPermissionMap.get(subModelName)
+      if (
+        subTableFieldPermission &&
+        subTableFieldPermission.length > 0 &&
+        subTableFieldPermission[0].name === 'all_fields' &&
+        subTableFieldPermission[0].canEdit === false
+      ) {
+        // 表示所有字段都禁止编辑时，则修改、添加的权限不需要
+        oneTableActionPermission.canUpdate = false
+        oneTableActionPermission.canAdd = false
+      } else {
+        // 是否可修改
+        const canUpdate = oneTableActionPermission.canUpdate
+        // 控制的行下标
+        const updateRowIndexes = oneTableActionPermission.updateRowIndexes
+        if (
+          canUpdate !== undefined &&
+          canUpdate === false &&
+          updateRowIndexes !== undefined &&
+          updateRowIndexes !== null &&
+          updateRowIndexes.length > 0
+        ) {
+          // 表示该子表不可修改，则该子表所有列都不可编辑
+          fieldPermissionMap.set(subModelName, [
+            {
+              name: 'all_fields',
+              canEdit: false,
+              rowIndexes: updateRowIndexes
+            }
+          ])
+        }
+      }
+      actionPermissionMap.set(subModelName, oneTableActionPermission)
+    })
+  }
+  pageContext.actionPermissionMap = actionPermissionMap
+}
+// TODO: 禁止编辑字段或必填字段自定义功能
+/** 设置禁止编辑 */
+function fnProhibitToEdit(data) {}
+
+const router = useRouter()
+function openDialog(configureObj) {
+  isShowDialog.value = true
+  // const myJumpPageSetting =
+  //   configureObj && configureObj['props'] && configureObj['props'].linkPage
+  //     ? configureObj['props'].linkPage
+  //     : null
+  // if (myJumpPageSetting && myJumpPageSetting.jumpPageUrl) {
+  //   const additionalParamMap = pageContext.entity.request
+  //   let dataId
+  //   let ids
+  //   if (additionalParamMap) {
+  //     dataId = additionalParamMap.id
+  //     ids = additionalParamMap.ids
+  //   }
+  //   // 封装表单entity
+  //   const dataModel = pageContext.entity.data
+  //   const pageModel = pageContext.entity.page
+  //   let entity = {}
+  //   if (pageModel) {
+  //     Object.assign(entity, pageModel)
+  //   }
+  //   if (dataModel) {
+  //     Object.assign(entity, dataModel)
+  //   }
+  //   jumpToPage(myJumpPageSetting, null, dataId, entity, additionalParamMap, ids).then(
+  //     (openPageParams) => {
+  //       if (openPageParams) {
+  //         const jumpMode = openPageParams.jumpMode
+  //         const popPageSetting = openPageParams
+  //         if (jumpMode === 'popup') {
+  //           // 给页面发送弹框事件
+  //           jumpPageSetting.value = popPageSetting
+  //           isShowDialog.value = true
+  //         } else if (jumpMode === 'refresh') {
+  //           router.push({
+  //             path: '/dsc/page',
+  //             query: popPageSetting
+  //           })
+  //         }
+  //       }
+  //     }
+  //   )
+  // } else {
+  //   console.error('页面配置信息不存在')
+  // }
+}
+
+function closeDialog() {
+  isShowDialog.value = false
+}
+</script>
+../../../src/utils/interfaces/page-design-types../../../src/utils/page-helper-util../../../src/utils/page-init-util../../../src/utils/global-refs../../../src/utils/events/event-util../../../src/utils/api/api-util../../../src/utils/events/standard-event../../../src/utils/events/validator-util

package/components/super-page-dialog/index.ts

@@ -0,0 +1,2 @@
+import SuperPageDialog from './super-page-dialog.vue'
+export default SuperPageDialog