af-mobile-client-vue3 1.0.84 → 1.0.86
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/data/XCellList/index.vue +5 -2
- package/src/components/data/XCellListFilter/index.vue +1 -1
- package/src/components/data/XFormItem/index.vue +16 -2
- package/src/components/data/XReportGrid/XAddReport/XAddReport.vue +202 -0
- package/src/components/data/XReportGrid/XAddReport/index.js +3 -0
- package/src/components/data/XReportGrid/XAddReport/index.md +56 -0
- package/src/components/data/XReportGrid/XAddReport/index.ts +10 -0
- package/src/components/data/XReportGrid/XReport.vue +973 -0
- package/src/components/data/XReportGrid/XReportDemo.vue +33 -0
- package/src/components/data/XReportGrid/XReportDesign.vue +597 -0
- package/src/components/data/XReportGrid/XReportDrawer/XReportDrawer.vue +148 -0
- package/src/components/data/XReportGrid/XReportDrawer/index.js +3 -0
- package/src/components/data/XReportGrid/XReportDrawer/index.ts +10 -0
- package/src/components/data/XReportGrid/XReportJsonRender.vue +386 -0
- package/src/components/data/XReportGrid/XReportTrGroup.vue +592 -0
- package/src/components/data/XReportGrid/index.md +44 -0
- package/src/components/data/XReportGrid/print.js +184 -0
- package/src/layout/GridView/index.vue +16 -0
- package/src/layout/PageLayout.vue +5 -4
- package/src/router/routes.ts +18 -0
- package/src/views/component/XCellListView/index.vue +5 -5
- package/src/views/component/XFormGroupView/index.vue +2 -2
- package/src/views/component/XReportGridView/index.vue +18 -0
- package/src/views/component/index.vue +4 -0
package/package.json
CHANGED
|
@@ -502,6 +502,8 @@ function addOption() {
|
|
|
502
502
|
display: flex;
|
|
503
503
|
align-items: center;
|
|
504
504
|
justify-content: center;
|
|
505
|
+
height: 100%; // 确保高度与搜索框一致
|
|
506
|
+
padding: var(--van-search-padding); // 使用与搜索框相同的内边距
|
|
505
507
|
}
|
|
506
508
|
:deep(.van-search__content) {
|
|
507
509
|
border-radius: 8px;
|
|
@@ -534,8 +536,9 @@ function addOption() {
|
|
|
534
536
|
}
|
|
535
537
|
|
|
536
538
|
:deep(.van-dropdown-menu__item) {
|
|
537
|
-
|
|
538
|
-
|
|
539
|
+
display: flex;
|
|
540
|
+
align-items: center;
|
|
541
|
+
justify-content: center;
|
|
539
542
|
}
|
|
540
543
|
}
|
|
541
544
|
|
|
@@ -106,7 +106,7 @@ onMounted(() => {
|
|
|
106
106
|
<VanDropdownMenu :close-on-click-outside="false">
|
|
107
107
|
<VanDropdownItem ref="listFilterMenu">
|
|
108
108
|
<template #title>
|
|
109
|
-
<VanIcon name="filter-o" size="
|
|
109
|
+
<VanIcon name="filter-o" size="23" />
|
|
110
110
|
</template>
|
|
111
111
|
<div class="order-condition">
|
|
112
112
|
<template v-if="props.orderList.length > 0">
|
|
@@ -101,10 +101,17 @@ const showDatePicker = ref(false)
|
|
|
101
101
|
const showTimePicker = ref(false)
|
|
102
102
|
const showArea = ref(false)
|
|
103
103
|
const errorMessage = ref('')
|
|
104
|
+
|
|
105
|
+
// 表单默认值
|
|
106
|
+
// 输入-非查询
|
|
104
107
|
const formInputDefaultValue = ref('')
|
|
108
|
+
// 输入-查询
|
|
105
109
|
const queryInputDefaultValue = ref('')
|
|
110
|
+
// 选择-非查询
|
|
106
111
|
const formSelectDefaultValue = ref([])
|
|
112
|
+
// 选择-查询
|
|
107
113
|
const querySelectDefaultValue = ref([])
|
|
114
|
+
|
|
108
115
|
// eslint-disable-next-line ts/no-use-before-define
|
|
109
116
|
const currUser = computed(() => userState.f.resources.id)
|
|
110
117
|
// 是否展示当前项
|
|
@@ -140,10 +147,17 @@ const localValue = computed({
|
|
|
140
147
|
// return props.modelValue
|
|
141
148
|
// }
|
|
142
149
|
switch (attr.type) {
|
|
150
|
+
case 'uploader':
|
|
151
|
+
if (mode === '查询') {
|
|
152
|
+
// console.log(querySelectDefaultValue.value)
|
|
153
|
+
return props.modelValue !== undefined ? props.modelValue : querySelectDefaultValue.value
|
|
154
|
+
}
|
|
155
|
+
else {
|
|
156
|
+
return props.modelValue !== undefined ? props.modelValue : formSelectDefaultValue.value
|
|
157
|
+
}
|
|
143
158
|
case 'switch':
|
|
144
159
|
return props.modelValue !== undefined ? props.modelValue : false
|
|
145
160
|
case 'checkbox':
|
|
146
|
-
case 'uploader':
|
|
147
161
|
case 'file':
|
|
148
162
|
case 'image':
|
|
149
163
|
case 'datePicker':
|
|
@@ -392,7 +406,7 @@ function init() {
|
|
|
392
406
|
|
|
393
407
|
if (attr.type === 'checkbox' || attr.type === 'uploader' || attr.type === 'file' || attr.type === 'image' || attr.type === 'datePicker' || attr.type === 'timePicker' || attr.type === 'select') {
|
|
394
408
|
if (attr.formDefault) {
|
|
395
|
-
if (attr.type === 'checkbox')
|
|
409
|
+
if (attr.type === 'checkbox' || attr.type === 'image' || attr.type === 'file')
|
|
396
410
|
formSelectDefaultValue.value = attr.formDefault
|
|
397
411
|
else
|
|
398
412
|
formSelectDefaultValue.value.push(attr.formDefault)
|
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { inject, provide, ref } from 'vue'
|
|
3
|
+
import { storeToRefs } from 'pinia'
|
|
4
|
+
import { Dialog as VanDialog, showDialog } from 'vant'
|
|
5
|
+
import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
|
|
6
|
+
import { executeStrFunctionByContext } from '@af-mobile-client-vue3/utils/runEvalFunction'
|
|
7
|
+
import XReport from '@af-mobile-client-vue3/components/data/XReportGrid/XReport.vue'
|
|
8
|
+
|
|
9
|
+
// Props
|
|
10
|
+
const props = defineProps({
|
|
11
|
+
env: {
|
|
12
|
+
type: String,
|
|
13
|
+
default: 'prod',
|
|
14
|
+
},
|
|
15
|
+
})
|
|
16
|
+
|
|
17
|
+
// Emits
|
|
18
|
+
const emit = defineEmits<{
|
|
19
|
+
(e: 'close'): void
|
|
20
|
+
(e: 'selectRow', keys: any[], rows: any[]): void
|
|
21
|
+
}>()
|
|
22
|
+
// 状态管理
|
|
23
|
+
const showReport = ref(true)
|
|
24
|
+
const configName = ref('')
|
|
25
|
+
const displayOnly = ref(true)
|
|
26
|
+
const serverName = ref(process.env.VUE_APP_SYSTEM_NAME)
|
|
27
|
+
const loading = ref(false)
|
|
28
|
+
const visible = ref(false)
|
|
29
|
+
const selectedId = ref(null)
|
|
30
|
+
const mixinData = ref({})
|
|
31
|
+
const outEnv = ref({})
|
|
32
|
+
const attr = ref({})
|
|
33
|
+
|
|
34
|
+
// Store
|
|
35
|
+
const userStore = useUserStore()
|
|
36
|
+
const { user: currUser } = storeToRefs(userStore)
|
|
37
|
+
|
|
38
|
+
// Refs
|
|
39
|
+
const mainRef = ref()
|
|
40
|
+
|
|
41
|
+
// 注入
|
|
42
|
+
const getParentComponentByName = inject<Function>('getParentComponentByName')
|
|
43
|
+
const setGlobalData = inject<Function>('setGlobalData')
|
|
44
|
+
const getGlobalData = inject<Function>('getGlobalData')
|
|
45
|
+
|
|
46
|
+
// 提供依赖
|
|
47
|
+
provide('getSelectedId', () => getSelectedId())
|
|
48
|
+
provide('getSelectedData', () => selectedId.value)
|
|
49
|
+
provide('getMixinData', () => mixinData.value)
|
|
50
|
+
provide('getOutEnv', () => outEnv.value)
|
|
51
|
+
provide('isInAModal', () => true)
|
|
52
|
+
provide('currUser', currUser)
|
|
53
|
+
|
|
54
|
+
// Methods
|
|
55
|
+
function init(params: {
|
|
56
|
+
configName?: string
|
|
57
|
+
serverName?: string
|
|
58
|
+
displayOnly?: boolean
|
|
59
|
+
selectedId?: any
|
|
60
|
+
outEnv?: Record<string, any>
|
|
61
|
+
mixinData?: Record<string, any>
|
|
62
|
+
attr?: Record<string, any>
|
|
63
|
+
}) {
|
|
64
|
+
const {
|
|
65
|
+
configName: initConfigName = 'medicalRecordCover',
|
|
66
|
+
serverName: initServerName = process.env.VUE_APP_SYSTEM_NAME,
|
|
67
|
+
displayOnly: initDisplayOnly = true,
|
|
68
|
+
selectedId: initSelectedId = null,
|
|
69
|
+
outEnv: initOutEnv = {},
|
|
70
|
+
mixinData: initMixinData = {},
|
|
71
|
+
attr: initAttr = {},
|
|
72
|
+
} = params
|
|
73
|
+
|
|
74
|
+
configName.value = initConfigName
|
|
75
|
+
serverName.value = initServerName
|
|
76
|
+
displayOnly.value = initDisplayOnly
|
|
77
|
+
visible.value = true
|
|
78
|
+
attr.value = initAttr
|
|
79
|
+
|
|
80
|
+
if (initSelectedId)
|
|
81
|
+
selectedId.value = initSelectedId
|
|
82
|
+
|
|
83
|
+
mixinData.value = initMixinData
|
|
84
|
+
outEnv.value = initOutEnv
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
function getSelectedId() {
|
|
88
|
+
if (typeof selectedId.value === 'object') {
|
|
89
|
+
if (selectedId.value?.selectedId)
|
|
90
|
+
return selectedId.value.selectedId
|
|
91
|
+
|
|
92
|
+
if (Object.keys(selectedId.value).length > 0)
|
|
93
|
+
return selectedId.value[Object.keys(selectedId.value)[0]]
|
|
94
|
+
}
|
|
95
|
+
return selectedId.value
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
function selectRow(selectedRowKeys: any[], selectedRows: any[]) {
|
|
99
|
+
console.log('XAddReport')
|
|
100
|
+
emit('selectRow', selectedRowKeys, selectedRows)
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
function close() {
|
|
104
|
+
loading.value = false
|
|
105
|
+
visible.value = false
|
|
106
|
+
emit('close')
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
function getComponentByName(name: string) {
|
|
110
|
+
const innerRef = getParentComponentByName?.(name)
|
|
111
|
+
if (innerRef)
|
|
112
|
+
return innerRef
|
|
113
|
+
|
|
114
|
+
return mainRef.value?.getComponentByName(name)
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
async function onSubmit() {
|
|
118
|
+
if (mainRef.value?.config?.confirmFunction) {
|
|
119
|
+
console.info('执行自定义确认逻辑')
|
|
120
|
+
let func = mainRef.value.config.confirmFunction
|
|
121
|
+
if (func && func.startsWith('function'))
|
|
122
|
+
func = func.replace('function', 'async function')
|
|
123
|
+
|
|
124
|
+
try {
|
|
125
|
+
const result = await executeStrFunctionByContext(null, func, [])
|
|
126
|
+
if (!result) {
|
|
127
|
+
close()
|
|
128
|
+
return
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
let messageType = 'success'
|
|
132
|
+
|
|
133
|
+
if (result?.name) {
|
|
134
|
+
const waitRefreshRef = getComponentByName(result.name)
|
|
135
|
+
if (waitRefreshRef)
|
|
136
|
+
waitRefreshRef.refresh()
|
|
137
|
+
else
|
|
138
|
+
console.warn(`未找到组件${result.name}无法刷新`)
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
if (result?.messageType)
|
|
142
|
+
messageType = result.messageType
|
|
143
|
+
|
|
144
|
+
if (result?.message) {
|
|
145
|
+
showDialog({
|
|
146
|
+
message: result.message,
|
|
147
|
+
type: messageType,
|
|
148
|
+
})
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
close()
|
|
152
|
+
}
|
|
153
|
+
catch (error) {
|
|
154
|
+
console.error('确认逻辑执行失败:', error)
|
|
155
|
+
close()
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
else {
|
|
159
|
+
console.warn('未配置modal确认按钮逻辑')
|
|
160
|
+
close()
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
function updateImg(data: any) {
|
|
165
|
+
console.log(data)
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
// 暴露方法
|
|
169
|
+
defineExpose({
|
|
170
|
+
init,
|
|
171
|
+
getComponentByName,
|
|
172
|
+
})
|
|
173
|
+
</script>
|
|
174
|
+
|
|
175
|
+
<template>
|
|
176
|
+
<VanDialog
|
|
177
|
+
v-model:show="visible"
|
|
178
|
+
:before-close="close"
|
|
179
|
+
:confirm-loading="loading"
|
|
180
|
+
width="80%"
|
|
181
|
+
:show-confirm-button="true"
|
|
182
|
+
confirm-text="提交"
|
|
183
|
+
v-bind="attr"
|
|
184
|
+
@confirm="onSubmit"
|
|
185
|
+
>
|
|
186
|
+
<div v-if="showReport" style="max-height: 70vh; overflow-y: auto; overflow-x: hidden;">
|
|
187
|
+
<XReport
|
|
188
|
+
ref="mainRef"
|
|
189
|
+
:env="env"
|
|
190
|
+
:use-oss-for-img="false"
|
|
191
|
+
:config-name="configName"
|
|
192
|
+
:show-img-in-cell="true"
|
|
193
|
+
:display-only="displayOnly"
|
|
194
|
+
:edit-mode="false"
|
|
195
|
+
:show-save-button="false"
|
|
196
|
+
:dont-format="true"
|
|
197
|
+
@update-img="updateImg"
|
|
198
|
+
@select-row="selectRow"
|
|
199
|
+
/>
|
|
200
|
+
</div>
|
|
201
|
+
</VanDialog>
|
|
202
|
+
</template>
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
# XAddForm
|
|
2
|
+
|
|
3
|
+
动态新增/修改表单控件,根据JSON配置生成一个完整的可供新增/修改数据的动态表单
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
## 何时使用
|
|
7
|
+
|
|
8
|
+
当需要一个可供新增/修改数据的动态生成的表单时
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
引用方式:
|
|
12
|
+
|
|
13
|
+
```javascript
|
|
14
|
+
import XAddReport from '@vue2-client/base-client/components/XAddReport/XAddReport'
|
|
15
|
+
|
|
16
|
+
export default {
|
|
17
|
+
components: {
|
|
18
|
+
XAddReport
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## 代码演示
|
|
26
|
+
|
|
27
|
+
```html
|
|
28
|
+
<x-add-report
|
|
29
|
+
|
|
30
|
+
>
|
|
31
|
+
</x-add-report>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## API
|
|
35
|
+
|
|
36
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
37
|
+
|-----------------|--------------------------|---------|-------|
|
|
38
|
+
| businessTitle | 业务标题 | String | '' |
|
|
39
|
+
| businessType | 业务类型 | String | '' |
|
|
40
|
+
| visible | 是否显示模态框 | Boolean | false |
|
|
41
|
+
| jsonData | JSON配置,根据[工具>查询配置生成]功能生成 | Object | {} |
|
|
42
|
+
| modifyModelData | 修改操作前查询出的业务数据 | Object | {} |
|
|
43
|
+
| loading | 新增或修改业务是否执行中 | Boolean | false |
|
|
44
|
+
| fixedAddForm | 固定新增表单,会和新增表单合并 | Object | {} |
|
|
45
|
+
| getDataParams | 调用logic获取数据源的追加参数 | Object | - |
|
|
46
|
+
| @onSubmit | 表单的提交事件 | event | - |
|
|
47
|
+
|
|
48
|
+
## 例子1
|
|
49
|
+
----
|
|
50
|
+
参考XFormTable组件
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
注意事项
|
|
54
|
+
----
|
|
55
|
+
|
|
56
|
+
> 本组件已经实现了自适应布局,在不同分辨率下的设备均可得到基本理想的展示效果
|