af-mobile-client-vue3 1.0.84 → 1.0.85

package/src/components/data/XReportGrid/XAddReport/XAddReport.vue

@@ -0,0 +1,202 @@
+<script setup lang="ts">
+import { inject, provide, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { Dialog as VanDialog, showDialog } from 'vant'
+import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
+import { executeStrFunctionByContext } from '@af-mobile-client-vue3/utils/runEvalFunction'
+import XReport from '@af-mobile-client-vue3/components/data/XReportGrid/XReport.vue'
+
+// Props
+const props = defineProps({
+  env: {
+    type: String,
+    default: 'prod',
+  },
+})
+
+// Emits
+const emit = defineEmits<{
+  (e: 'close'): void
+  (e: 'selectRow', keys: any[], rows: any[]): void
+}>()
+// 状态管理
+const showReport = ref(true)
+const configName = ref('')
+const displayOnly = ref(true)
+const serverName = ref(process.env.VUE_APP_SYSTEM_NAME)
+const loading = ref(false)
+const visible = ref(false)
+const selectedId = ref(null)
+const mixinData = ref({})
+const outEnv = ref({})
+const attr = ref({})
+
+// Store
+const userStore = useUserStore()
+const { user: currUser } = storeToRefs(userStore)
+
+// Refs
+const mainRef = ref()
+
+// 注入
+const getParentComponentByName = inject<Function>('getParentComponentByName')
+const setGlobalData = inject<Function>('setGlobalData')
+const getGlobalData = inject<Function>('getGlobalData')
+
+// 提供依赖
+provide('getSelectedId', () => getSelectedId())
+provide('getSelectedData', () => selectedId.value)
+provide('getMixinData', () => mixinData.value)
+provide('getOutEnv', () => outEnv.value)
+provide('isInAModal', () => true)
+provide('currUser', currUser)
+
+// Methods
+function init(params: {
+  configName?: string
+  serverName?: string
+  displayOnly?: boolean
+  selectedId?: any
+  outEnv?: Record<string, any>
+  mixinData?: Record<string, any>
+  attr?: Record<string, any>
+}) {
+  const {
+    configName: initConfigName = 'medicalRecordCover',
+    serverName: initServerName = process.env.VUE_APP_SYSTEM_NAME,
+    displayOnly: initDisplayOnly = true,
+    selectedId: initSelectedId = null,
+    outEnv: initOutEnv = {},
+    mixinData: initMixinData = {},
+    attr: initAttr = {},
+  } = params
+
+  configName.value = initConfigName
+  serverName.value = initServerName
+  displayOnly.value = initDisplayOnly
+  visible.value = true
+  attr.value = initAttr
+
+  if (initSelectedId)
+    selectedId.value = initSelectedId
+
+  mixinData.value = initMixinData
+  outEnv.value = initOutEnv
+}
+
+function getSelectedId() {
+  if (typeof selectedId.value === 'object') {
+    if (selectedId.value?.selectedId)
+      return selectedId.value.selectedId
+
+    if (Object.keys(selectedId.value).length > 0)
+      return selectedId.value[Object.keys(selectedId.value)[0]]
+  }
+  return selectedId.value
+}
+
+function selectRow(selectedRowKeys: any[], selectedRows: any[]) {
+  console.log('XAddReport')
+  emit('selectRow', selectedRowKeys, selectedRows)
+}
+
+function close() {
+  loading.value = false
+  visible.value = false
+  emit('close')
+}
+
+function getComponentByName(name: string) {
+  const innerRef = getParentComponentByName?.(name)
+  if (innerRef)
+    return innerRef
+
+  return mainRef.value?.getComponentByName(name)
+}
+
+async function onSubmit() {
+  if (mainRef.value?.config?.confirmFunction) {
+    console.info('执行自定义确认逻辑')
+    let func = mainRef.value.config.confirmFunction
+    if (func && func.startsWith('function'))
+      func = func.replace('function', 'async function')
+
+    try {
+      const result = await executeStrFunctionByContext(null, func, [])
+      if (!result) {
+        close()
+        return
+      }
+
+      let messageType = 'success'
+
+      if (result?.name) {
+        const waitRefreshRef = getComponentByName(result.name)
+        if (waitRefreshRef)
+          waitRefreshRef.refresh()
+        else
+          console.warn(`未找到组件${result.name}无法刷新`)
+      }
+
+      if (result?.messageType)
+        messageType = result.messageType
+
+      if (result?.message) {
+        showDialog({
+          message: result.message,
+          type: messageType,
+        })
+      }
+
+      close()
+    }
+    catch (error) {
+      console.error('确认逻辑执行失败:', error)
+      close()
+    }
+  }
+  else {
+    console.warn('未配置modal确认按钮逻辑')
+    close()
+  }
+}
+
+function updateImg(data: any) {
+  console.log(data)
+}
+
+// 暴露方法
+defineExpose({
+  init,
+  getComponentByName,
+})
+</script>
+
+<template>
+  <VanDialog
+    v-model:show="visible"
+    :before-close="close"
+    :confirm-loading="loading"
+    width="80%"
+    :show-confirm-button="true"
+    confirm-text="提交"
+    v-bind="attr"
+    @confirm="onSubmit"
+  >
+    <div v-if="showReport" style="max-height: 70vh; overflow-y: auto; overflow-x: hidden;">
+      <XReport
+        ref="mainRef"
+        :env="env"
+        :use-oss-for-img="false"
+        :config-name="configName"
+        :show-img-in-cell="true"
+        :display-only="displayOnly"
+        :edit-mode="false"
+        :show-save-button="false"
+        :dont-format="true"
+        @update-img="updateImg"
+        @select-row="selectRow"
+      />
+    </div>
+  </VanDialog>
+</template>

package/src/components/data/XReportGrid/XAddReport/index.js

@@ -0,0 +1,3 @@
+import XAddReport from './XAddReport'
+
+export default XAddReport

package/src/components/data/XReportGrid/XAddReport/index.md

@@ -0,0 +1,56 @@
+# XAddForm
+
+动态新增/修改表单控件，根据JSON配置生成一个完整的可供新增/修改数据的动态表单
+
+
+## 何时使用
+
+当需要一个可供新增/修改数据的动态生成的表单时
+
+
+引用方式：
+
+```javascript
+import XAddReport from '@vue2-client/base-client/components/XAddReport/XAddReport'
+
+export default {
+    components: {
+      XAddReport
+    }
+}
+```
+
+
+
+## 代码演示
+
+```html
+<x-add-report
+
+>
+</x-add-report>
+```
+
+## API
+
+| 参数              | 说明                       | 类型      | 默认值   |
+|-----------------|--------------------------|---------|-------|
+| businessTitle   | 业务标题                     | String  | ''    |
+| businessType    | 业务类型                     | String  | ''    |
+| visible         | 是否显示模态框                  | Boolean | false |
+| jsonData        | JSON配置，根据[工具>查询配置生成]功能生成 | Object  | {}    |
+| modifyModelData | 修改操作前查询出的业务数据            | Object  | {}    |
+| loading         | 新增或修改业务是否执行中             | Boolean | false |
+| fixedAddForm    | 固定新增表单，会和新增表单合并          | Object  | {}    |
+| getDataParams | 调用logic获取数据源的追加参数 | Object | - |
+| @onSubmit       | 表单的提交事件                  | event   | -     |
+
+## 例子1
+----
+参考XFormTable组件
+```
+
+注意事项
+----
+
+> 本组件已经实现了自适应布局，在不同分辨率下的设备均可得到基本理想的展示效果

package/src/components/data/XReportGrid/XAddReport/index.ts

@@ -0,0 +1,10 @@
+import type { App } from 'vue'
+import XAddReport from './XAddReport.vue'
+
+export { XAddReport }
+
+export default {
+  install(app: App) {
+    app.component('XAddReport', XAddReport)
+  }
+}