vue2-client 1.17.18 → 1.17.19

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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue2-client",
3
- "version": "1.17.18",
3
+ "version": "1.17.19",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",
@@ -1,276 +1,276 @@
1
- <template>
2
- <div>
3
- <!-- 树形选择框 -->
4
- <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model" :rules="rules">
5
- <a-spin v-show="!loaded" size="small"/>
6
- <a-tree-select
7
- v-show="loaded"
8
- ref="tree-select"
9
- v-model="localValue"
10
- :disabled="disabled"
11
- :tree-data="getTreeData()"
12
- :tree-checkable="mode === '查询' && queryType !== 'RIGHT_LIKE'"
13
- :placeholder="`请选择${name||''}`"
14
- :dropdown-style="{ maxHeight: '400px' }"
15
- tree-node-filter-prop="label"
16
- :show-checked-strategy="queryType === 'RIGHT_LIKE' ? 'SHOW_ALL' : undefined"
17
- allow-clear
18
- :showArrow="true"
19
- class="tree-select"
20
- :getPopupContainer="(triggerNode) => triggerNode.parentNode"
21
- @change="onTreeSelectChange">
22
- </a-tree-select>
23
- </a-form-model-item>
24
- </div>
25
- </template>
26
- <script>
27
- import XFormCol from '@vue2-client/base-client/components/common/XFormCol'
28
-
29
- export default {
30
- name: 'XTreeSelect',
31
- components: { XFormCol },
32
- model: {
33
- prop: 'value',
34
- event: 'onChange'
35
- },
36
- // eslint-disable-next-line vue/require-prop-types
37
- props: ['value', 'attr', 'rules'],
38
- watch: {
39
- value (newVal) {
40
- if (newVal.length && !newVal[0]) {
41
- this.localValue = undefined
42
- }
43
- if (!newVal) {
44
- this.localValue = undefined
45
- }
46
- },
47
- },
48
- data () {
49
- return {
50
- // 内容加载是否完成
51
- loaded: false,
52
- // 数据列表
53
- option: [],
54
- // 表单
55
- form: {},
56
- // 查询方式
57
- queryType: 'IN',
58
- // label名称
59
- name: undefined,
60
- // 模型名称
61
- model: undefined,
62
- // 使用方式
63
- mode: '查询',
64
- // 是否禁用
65
- disabled: false,
66
- localValue: this.value
67
- }
68
- },
69
- methods: {
70
- init (params) {
71
- const {
72
- option = [], form, queryType = 'IN', name, model, mode = '查询', disabled = false
73
- } = params
74
- this.loaded = false
75
- this.option = option
76
- this.form = form
77
- this.queryType = queryType
78
- this.name = name
79
- this.model = model
80
- this.mode = mode
81
- this.disabled = disabled
82
- // 修改时恢复树形选择框选中状态
83
- if (this.queryType !== 'RIGHT_LIKE') {
84
- const value = this.form[this.model]
85
- if (value) {
86
- // 如果数据源中值含'-',代表是由多个数据源组成的树,需要重新组织新增/编辑时的表单值
87
- if (this.option.length > 0 && this.option[0].value.toString().indexOf('-') !== -1) {
88
- this.value = model + '-' + value
89
- } else {
90
- if (this.mode === '查询') {
91
- const values = []
92
- this.getValues(option, value, values)
93
- this.$emit('onChange', values)
94
- } else {
95
- this.value = value
96
- }
97
- // value = option 自身和所有子得集合
98
- }
99
- } else {
100
- this.value = undefined
101
- }
102
- }
103
- this.$emit('mounted', this.attr)
104
- this.loaded = true
105
- },
106
- getValues (option, value, values) {
107
- const _values = []
108
- for (const item of option) {
109
- if (value.includes(item.value)) {
110
- values.push(item.value)
111
- _values.push(item.value)
112
- // 找到匹配节点后,递归添加所有子节点的值
113
- if (item.children && item.children.length) {
114
- this.getAllChildrenValues(item.children, values)
115
- }
116
- }
117
- if (item.children && item.children.length) {
118
- const tempV = this.getValues(item.children, value, values)
119
- if (tempV.length === item.children.length) {
120
- values.push(item.value)
121
- }
122
- }
123
- }
124
- return _values
125
- },
126
- getAllChildrenValues (children, values) {
127
- for (const child of children) {
128
- values.push(child.value)
129
- if (child.children && child.children.length) {
130
- this.getAllChildrenValues(child.children, values)
131
- }
132
- }
133
- return values
134
- },
135
- // 获取树形选择框数据
136
- getTreeData () {
137
- const treeData = this.option
138
- if (this.mode === '新增/修改') {
139
- this.setParentSelectable(treeData)
140
- }
141
- return treeData
142
- },
143
- // 设置树形选择框不能选择父节点
144
- setParentSelectable (treeData) {
145
- treeData.forEach(item => {
146
- if (item.children && item.children.length) {
147
- item.selectable = false
148
- this.setParentSelectable(item.children)
149
- }
150
- })
151
- },
152
- // 选中树节点
153
- onTreeSelectChange (value, label, extra) {
154
- if (this.queryType === 'RIGHT_LIKE') {
155
- // 获取可用于模糊查询的组织机构字符串
156
- let node = extra.triggerNode.$parent
157
- label = label[0]
158
- while (node && node.label) {
159
- label = node.label + '.' + label
160
- node = node.$parent
161
- }
162
- // this.form[this.model] = label
163
- this.$emit('onChange', label)
164
- } else {
165
- // 如果选中值含'-',代表是由多个数据源组成的树,需要重新组织查询或新增/编辑时的表单
166
- if ((Array.isArray(value) && value.length > 0 && String(value[0]).indexOf('-') !== -1) || (typeof value === 'string' && value.indexOf('-') !== -1)) {
167
- const treeDatas = {}
168
- // 单选情况用于新增.修改表单场景,使用extra.triggerNode获取选中节点信息
169
- if (!extra.allCheckedNodes) {
170
- this.setNodeData(treeDatas, extra.triggerNode)
171
- } else {
172
- // 多选情况用于查询表单场景,使用extra.allCheckedNodes获取选中节点集合
173
- const nodes = extra.allCheckedNodes
174
- // 获取任意选中节点的叶子节点的字段名,用于查询时组织查询项的key
175
- const name = this.getNodeDataProps(nodes[0])
176
- // 获取所有选中节点的叶子节点的value,用于查询时组织查询项的value
177
- const values = []
178
- for (const node of nodes) {
179
- const ref = this.setDataRef(node)
180
- if (ref instanceof Array) {
181
- for (const nodeRef of ref) {
182
- const keyValue = nodeRef.node.key
183
- values.push(keyValue.substring(keyValue.lastIndexOf('-') + 1))
184
- }
185
- } else {
186
- const keyValue = ref.node.key
187
- values.push(keyValue.substring(keyValue.lastIndexOf('-') + 1))
188
- }
189
- }
190
- treeDatas[name] = values
191
- }
192
- // 移除默认的表单项,将组织好后的表单项合并进表单
193
- this.form[this.model] = undefined
194
- Object.assign(this.form, treeDatas)
195
- // this.$emit('onChange', treeDatas)
196
- } else {
197
- // 从单一数据源组成的树可以直接赋值
198
- // this.form[this.model] = value
199
- // 获取所有选中节点的value
200
- if (this.mode === '查询') {
201
- const values = []
202
- if (extra.allCheckedNodes) {
203
- for (const item of extra.allCheckedNodes) {
204
- if (item.node.key) {
205
- if (item.node?.data?.props?.label === item.node?.data?.props?.value) {
206
- if (!item.children?.length) {
207
- values.push(`${item.node.key}`)
208
- }
209
- } else {
210
- values.push(`${item.node.key}`)
211
- }
212
- }
213
- if (item.children && item.children.length) {
214
- this.getNodeValues(item.children, value, values)
215
- }
216
- }
217
- }
218
- this.$emit('onChange', values)
219
- } else {
220
- this.$emit('onChange', value)
221
- }
222
- }
223
- }
224
- },
225
- getNodeValues (data, value, values) {
226
- for (const item of data) {
227
- values.push(`${item.node.key}`)
228
- if (item.children && item.children.length) {
229
- this.getNodeValues(item.children, value, values)
230
- }
231
- }
232
- },
233
- // 设置选中值
234
- setValue (value) {
235
- this.value = value
236
- },
237
- setDataRef (node) {
238
- if (node.children) {
239
- return this.setDataRef(node.children)
240
- }
241
- return node
242
- },
243
- /**
244
- * 组织节点和每层父节点的数据,用于新增/修改时更新表单数据
245
- * @param data 组织完成的数据
246
- * @param node 节点
247
- * @return 返回示例: { parentId: 1, childId: 2 }
248
- */
249
- setNodeData (data, node) {
250
- if (node.value) {
251
- const value = node.value
252
- const columnsName = value.substring(0, value.indexOf('-'))
253
- data[columnsName] = value.substring(value.lastIndexOf('-') + 1)
254
- if (node.$parent) {
255
- this.setNodeData(data, node.$parent)
256
- }
257
- }
258
- },
259
- getNodeDataProps (node) {
260
- if (node.children && node.children.length > 0) {
261
- return this.getNodeDataProps(node.children[0])
262
- }
263
- const value = node.node.key
264
- return value.substring(0, value.indexOf('-'))
265
- }
266
- }
267
- }
268
- </script>
269
- <style lang="less" scoped>
270
- .tree-select {
271
- /deep/ .ant-select-selection.ant-select-selection--multiple {
272
- max-height: 32px;
273
- overflow-y: auto;
274
- }
275
- }
276
- </style>
1
+ <template>
2
+ <div>
3
+ <!-- 树形选择框 -->
4
+ <a-form-model-item :ref="attr.model" :label="attr.name" :prop="attr.model" :rules="rules">
5
+ <a-spin v-show="!loaded" size="small"/>
6
+ <a-tree-select
7
+ v-show="loaded"
8
+ ref="tree-select"
9
+ v-model="localValue"
10
+ :disabled="disabled"
11
+ :tree-data="getTreeData()"
12
+ :tree-checkable="mode === '查询' && queryType !== 'RIGHT_LIKE'"
13
+ :placeholder="`请选择${name||''}`"
14
+ :dropdown-style="{ maxHeight: '400px' }"
15
+ tree-node-filter-prop="label"
16
+ :show-checked-strategy="queryType === 'RIGHT_LIKE' ? 'SHOW_ALL' : undefined"
17
+ allow-clear
18
+ :showArrow="true"
19
+ class="tree-select"
20
+ :getPopupContainer="(triggerNode) => triggerNode.parentNode"
21
+ @change="onTreeSelectChange">
22
+ </a-tree-select>
23
+ </a-form-model-item>
24
+ </div>
25
+ </template>
26
+ <script>
27
+ import XFormCol from '@vue2-client/base-client/components/common/XFormCol'
28
+
29
+ export default {
30
+ name: 'XTreeSelect',
31
+ components: { XFormCol },
32
+ model: {
33
+ prop: 'value',
34
+ event: 'onChange'
35
+ },
36
+ // eslint-disable-next-line vue/require-prop-types
37
+ props: ['value', 'attr', 'rules'],
38
+ watch: {
39
+ value (newVal) {
40
+ if (newVal.length && !newVal[0]) {
41
+ this.localValue = undefined
42
+ }
43
+ if (!newVal) {
44
+ this.localValue = undefined
45
+ }
46
+ },
47
+ },
48
+ data () {
49
+ return {
50
+ // 内容加载是否完成
51
+ loaded: false,
52
+ // 数据列表
53
+ option: [],
54
+ // 表单
55
+ form: {},
56
+ // 查询方式
57
+ queryType: 'IN',
58
+ // label名称
59
+ name: undefined,
60
+ // 模型名称
61
+ model: undefined,
62
+ // 使用方式
63
+ mode: '查询',
64
+ // 是否禁用
65
+ disabled: false,
66
+ localValue: this.value
67
+ }
68
+ },
69
+ methods: {
70
+ init (params) {
71
+ const {
72
+ option = [], form, queryType = 'IN', name, model, mode = '查询', disabled = false
73
+ } = params
74
+ this.loaded = false
75
+ this.option = option
76
+ this.form = form
77
+ this.queryType = queryType
78
+ this.name = name
79
+ this.model = model
80
+ this.mode = mode
81
+ this.disabled = disabled
82
+ // 修改时恢复树形选择框选中状态
83
+ if (this.queryType !== 'RIGHT_LIKE') {
84
+ const value = this.form[this.model]
85
+ if (value) {
86
+ // 如果数据源中值含'-',代表是由多个数据源组成的树,需要重新组织新增/编辑时的表单值
87
+ if (this.option.length > 0 && this.option[0].value.toString().indexOf('-') !== -1) {
88
+ this.value = model + '-' + value
89
+ } else {
90
+ if (this.mode === '查询') {
91
+ const values = []
92
+ this.getValues(option, value, values)
93
+ this.$emit('onChange', values)
94
+ } else {
95
+ this.value = value
96
+ }
97
+ // value = option 自身和所有子得集合
98
+ }
99
+ } else {
100
+ this.value = undefined
101
+ }
102
+ }
103
+ this.$emit('mounted', this.attr)
104
+ this.loaded = true
105
+ },
106
+ getValues (option, value, values) {
107
+ const _values = []
108
+ for (const item of option) {
109
+ if (value.includes(item.value)) {
110
+ values.push(item.value)
111
+ _values.push(item.value)
112
+ // 找到匹配节点后,递归添加所有子节点的值
113
+ if (item.children && item.children.length) {
114
+ this.getAllChildrenValues(item.children, values)
115
+ }
116
+ }
117
+ if (item.children && item.children.length) {
118
+ const tempV = this.getValues(item.children, value, values)
119
+ if (tempV.length === item.children.length) {
120
+ values.push(item.value)
121
+ }
122
+ }
123
+ }
124
+ return _values
125
+ },
126
+ getAllChildrenValues (children, values) {
127
+ for (const child of children) {
128
+ values.push(child.value)
129
+ if (child.children && child.children.length) {
130
+ this.getAllChildrenValues(child.children, values)
131
+ }
132
+ }
133
+ return values
134
+ },
135
+ // 获取树形选择框数据
136
+ getTreeData () {
137
+ const treeData = this.option
138
+ if (this.mode === '新增/修改') {
139
+ this.setParentSelectable(treeData)
140
+ }
141
+ return treeData
142
+ },
143
+ // 设置树形选择框不能选择父节点
144
+ setParentSelectable (treeData) {
145
+ treeData.forEach(item => {
146
+ if (item.children && item.children.length) {
147
+ item.selectable = false
148
+ this.setParentSelectable(item.children)
149
+ }
150
+ })
151
+ },
152
+ // 选中树节点
153
+ onTreeSelectChange (value, label, extra) {
154
+ if (this.queryType === 'RIGHT_LIKE') {
155
+ // 获取可用于模糊查询的组织机构字符串
156
+ let node = extra.triggerNode.$parent
157
+ label = label[0]
158
+ while (node && node.label) {
159
+ label = node.label + '.' + label
160
+ node = node.$parent
161
+ }
162
+ // this.form[this.model] = label
163
+ this.$emit('onChange', label)
164
+ } else {
165
+ // 如果选中值含'-',代表是由多个数据源组成的树,需要重新组织查询或新增/编辑时的表单
166
+ if ((Array.isArray(value) && value.length > 0 && String(value[0]).indexOf('-') !== -1) || (typeof value === 'string' && value.indexOf('-') !== -1)) {
167
+ const treeDatas = {}
168
+ // 单选情况用于新增.修改表单场景,使用extra.triggerNode获取选中节点信息
169
+ if (!extra.allCheckedNodes) {
170
+ this.setNodeData(treeDatas, extra.triggerNode)
171
+ } else {
172
+ // 多选情况用于查询表单场景,使用extra.allCheckedNodes获取选中节点集合
173
+ const nodes = extra.allCheckedNodes
174
+ // 获取任意选中节点的叶子节点的字段名,用于查询时组织查询项的key
175
+ const name = this.getNodeDataProps(nodes[0])
176
+ // 获取所有选中节点的叶子节点的value,用于查询时组织查询项的value
177
+ const values = []
178
+ for (const node of nodes) {
179
+ const ref = this.setDataRef(node)
180
+ if (ref instanceof Array) {
181
+ for (const nodeRef of ref) {
182
+ const keyValue = nodeRef.node.key
183
+ values.push(keyValue.substring(keyValue.lastIndexOf('-') + 1))
184
+ }
185
+ } else {
186
+ const keyValue = ref.node.key
187
+ values.push(keyValue.substring(keyValue.lastIndexOf('-') + 1))
188
+ }
189
+ }
190
+ treeDatas[name] = values
191
+ }
192
+ // 移除默认的表单项,将组织好后的表单项合并进表单
193
+ this.form[this.model] = undefined
194
+ Object.assign(this.form, treeDatas)
195
+ // this.$emit('onChange', treeDatas)
196
+ } else {
197
+ // 从单一数据源组成的树可以直接赋值
198
+ // this.form[this.model] = value
199
+ // 获取所有选中节点的value
200
+ if (this.mode === '查询') {
201
+ const values = []
202
+ if (extra.allCheckedNodes) {
203
+ for (const item of extra.allCheckedNodes) {
204
+ if (item.node.key) {
205
+ if (item.node?.data?.props?.label === item.node?.data?.props?.value) {
206
+ if (!item.children?.length) {
207
+ values.push(`${item.node.key}`)
208
+ }
209
+ } else {
210
+ values.push(`${item.node.key}`)
211
+ }
212
+ }
213
+ if (item.children && item.children.length) {
214
+ this.getNodeValues(item.children, value, values)
215
+ }
216
+ }
217
+ }
218
+ this.$emit('onChange', values)
219
+ } else {
220
+ this.$emit('onChange', value)
221
+ }
222
+ }
223
+ }
224
+ },
225
+ getNodeValues (data, value, values) {
226
+ for (const item of data) {
227
+ values.push(`${item.node.key}`)
228
+ if (item.children && item.children.length) {
229
+ this.getNodeValues(item.children, value, values)
230
+ }
231
+ }
232
+ },
233
+ // 设置选中值
234
+ setValue (value) {
235
+ this.value = value
236
+ },
237
+ setDataRef (node) {
238
+ if (node.children) {
239
+ return this.setDataRef(node.children)
240
+ }
241
+ return node
242
+ },
243
+ /**
244
+ * 组织节点和每层父节点的数据,用于新增/修改时更新表单数据
245
+ * @param data 组织完成的数据
246
+ * @param node 节点
247
+ * @return 返回示例: { parentId: 1, childId: 2 }
248
+ */
249
+ setNodeData (data, node) {
250
+ if (node.value) {
251
+ const value = node.value
252
+ const columnsName = value.substring(0, value.indexOf('-'))
253
+ data[columnsName] = value.substring(value.lastIndexOf('-') + 1)
254
+ if (node.$parent) {
255
+ this.setNodeData(data, node.$parent)
256
+ }
257
+ }
258
+ },
259
+ getNodeDataProps (node) {
260
+ if (node.children && node.children.length > 0) {
261
+ return this.getNodeDataProps(node.children[0])
262
+ }
263
+ const value = node.node.key
264
+ return value.substring(0, value.indexOf('-'))
265
+ }
266
+ }
267
+ }
268
+ </script>
269
+ <style lang="less" scoped>
270
+ .tree-select {
271
+ /deep/ .ant-select-selection.ant-select-selection--multiple {
272
+ max-height: 32px;
273
+ overflow-y: auto;
274
+ }
275
+ }
276
+ </style>
@@ -1,89 +1,89 @@
1
- <template>
2
- <a-card :bordered="false">
3
- <x-form-table
4
- title="示例表单"
5
- :queryParamsName="queryParamsName"
6
- :fixedAddForm="fixedAddForm"
7
- :externalSelectedRowKeys="selectedKeys"
8
- @action="action"
9
- @selectRow="selectRow"
10
- @columnClick="columnClick"
11
- serviceName="af-system"
12
- ref="xFormTable">
13
- </x-form-table>
14
- </a-card>
15
- </template>
16
-
17
- <script>
18
- import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
19
- import { microDispatch } from '@vue2-client/utils/microAppUtils'
20
-
21
- export default {
22
- name: 'Demo',
23
- components: {
24
- XFormTable
25
- },
26
- data () {
27
- return {
28
- // 查询配置文件名
29
- queryParamsName: 'ceshiCRUD',
30
- // 查询配置左侧tree
31
- xTreeConfigName: 'addressType',
32
- // 新增表单固定值
33
- fixedAddForm: {},
34
- // 是否显示详情抽屉
35
- detailVisible: false,
36
- // 当前记录
37
- record: {},
38
- // 选中的行keys
39
- selectedKeys: [],
40
- selected: {
41
- keys: [],
42
- rows: []
43
- }
44
- }
45
- },
46
- methods: {
47
- test () {
48
- this.$refs.xFormTable.setTableData([])
49
- },
50
- defaultF () {
51
- this.$refs.xFormTable.setTableSize('default')
52
- },
53
- middleF () {
54
- this.$refs.xFormTable.setTableSize('middle')
55
- },
56
- smallF () {
57
- this.$refs.xFormTable.setTableSize('small')
58
- },
59
- columnClick (key, value, record) {
60
- microDispatch({
61
- type: 'v3route',
62
- path: '/bingliguanli/dianzibingliluru',
63
- props: { selected: arguments[0].his_f_admission_id }
64
- })
65
- },
66
- action (record, id, actionType) {
67
- this.detailVisible = true
68
- console.log('触发了详情操作', record, id, actionType)
69
- },
70
- onClose () {
71
- this.detailVisible = false
72
- // 关闭详情之后重新查询表单
73
- this.$refs.xFormTable.refreshTable(true)
74
- },
75
- selectRow (selectedRowKeys, selectedRows) {
76
- this.selected = {
77
- keys: selectedRowKeys,
78
- rows: selectedRows
79
- }
80
- console.log('selectedDemo', this.selected)
81
- },
82
- },
83
- computed: {},
84
- }
85
- </script>
86
-
87
- <style scoped>
88
-
89
- </style>
1
+ <template>
2
+ <a-card :bordered="false">
3
+ <x-form-table
4
+ title="示例表单"
5
+ :queryParamsName="queryParamsName"
6
+ :fixedAddForm="fixedAddForm"
7
+ :externalSelectedRowKeys="selectedKeys"
8
+ @action="action"
9
+ @selectRow="selectRow"
10
+ @columnClick="columnClick"
11
+ serviceName="af-system"
12
+ ref="xFormTable">
13
+ </x-form-table>
14
+ </a-card>
15
+ </template>
16
+
17
+ <script>
18
+ import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
19
+ import { microDispatch } from '@vue2-client/utils/microAppUtils'
20
+
21
+ export default {
22
+ name: 'Demo',
23
+ components: {
24
+ XFormTable
25
+ },
26
+ data () {
27
+ return {
28
+ // 查询配置文件名
29
+ queryParamsName: 'ceshiCRUD',
30
+ // 查询配置左侧tree
31
+ xTreeConfigName: 'addressType',
32
+ // 新增表单固定值
33
+ fixedAddForm: {},
34
+ // 是否显示详情抽屉
35
+ detailVisible: false,
36
+ // 当前记录
37
+ record: {},
38
+ // 选中的行keys
39
+ selectedKeys: [],
40
+ selected: {
41
+ keys: [],
42
+ rows: []
43
+ }
44
+ }
45
+ },
46
+ methods: {
47
+ test () {
48
+ this.$refs.xFormTable.setTableData([])
49
+ },
50
+ defaultF () {
51
+ this.$refs.xFormTable.setTableSize('default')
52
+ },
53
+ middleF () {
54
+ this.$refs.xFormTable.setTableSize('middle')
55
+ },
56
+ smallF () {
57
+ this.$refs.xFormTable.setTableSize('small')
58
+ },
59
+ columnClick (key, value, record) {
60
+ microDispatch({
61
+ type: 'v3route',
62
+ path: '/bingliguanli/dianzibingliluru',
63
+ props: { selected: arguments[0].his_f_admission_id }
64
+ })
65
+ },
66
+ action (record, id, actionType) {
67
+ this.detailVisible = true
68
+ console.log('触发了详情操作', record, id, actionType)
69
+ },
70
+ onClose () {
71
+ this.detailVisible = false
72
+ // 关闭详情之后重新查询表单
73
+ this.$refs.xFormTable.refreshTable(true)
74
+ },
75
+ selectRow (selectedRowKeys, selectedRows) {
76
+ this.selected = {
77
+ keys: selectedRowKeys,
78
+ rows: selectedRows
79
+ }
80
+ console.log('selectedDemo', this.selected)
81
+ },
82
+ },
83
+ computed: {},
84
+ }
85
+ </script>
86
+
87
+ <style scoped>
88
+
89
+ </style>
@@ -166,12 +166,28 @@ export default {
166
166
  // 使用 $nextTick 确保 DOM 更新完成
167
167
  await this.$nextTick()
168
168
 
169
+ // 确保组件完全就绪后再执行 changeFunc
170
+ if (newRef && newRef[0]) {
171
+ // 等待组件完全就绪(包括内部异步初始化)
172
+ await this.waitForComponentFullyReady(newRef[0], newKey)
173
+ } else {
174
+ // 如果没有组件实例,等待一个 tick 确保 DOM 更新
175
+ await this.$nextTick()
176
+ }
177
+
169
178
  result = executeStrFunctionByContext(this, this.config.changeFunc, args)
170
179
 
171
180
  if (result && result.noChange) {
172
181
  console.info('不切换页签作为按钮使用')
182
+ // 如果返回 noChange,恢复原来的 activeKey
183
+ if (this.activeKey === newKey) {
184
+ this.activeKey = oldKey
185
+ }
173
186
  } else {
174
- this.activeKey = newKey
187
+ // 确保 activeKey 已更新(如果还没更新的话)
188
+ if (this.activeKey !== newKey) {
189
+ this.activeKey = newKey
190
+ }
175
191
  // 确保回调在组件完全就绪后执行
176
192
  if (result && result.callback && typeof result.callback === 'function') {
177
193
  await this.$nextTick()
@@ -214,6 +230,96 @@ export default {
214
230
  checkComponent()
215
231
  })
216
232
  },
233
+ // 等待组件完全就绪(包括内部异步初始化)
234
+ waitForComponentFullyReady (component, index) {
235
+ return new Promise((resolve) => {
236
+ if (!component) {
237
+ resolve()
238
+ return
239
+ }
240
+
241
+ let attempts = 0
242
+ const maxAttempts = 60 // 最多等待3秒
243
+ const checkInterval = 50
244
+
245
+ const checkReady = () => {
246
+ attempts++
247
+
248
+ // 1. 检查组件是否有 loading 状态,确保不在加载中
249
+ if (component.loading === true) {
250
+ if (attempts < maxAttempts) {
251
+ setTimeout(checkReady, checkInterval)
252
+ return
253
+ }
254
+ }
255
+
256
+ // 2. 检查组件是否有 loaded 状态(如 XAddNativeForm)
257
+ if (component.loaded === false) {
258
+ if (attempts < maxAttempts) {
259
+ setTimeout(checkReady, checkInterval)
260
+ return
261
+ }
262
+ }
263
+
264
+ // 3. 检查组件是否有 realQueryConfig(如 XFormTable)
265
+ const tab = this.config.data[index]
266
+ const isFormTableType = tab?.slotType === 'x-form-table' ||
267
+ tab?.slotType === 'XFormTable' ||
268
+ tab?.slotType?.toLowerCase() === 'xformtable'
269
+ if (isFormTableType && component.realQueryConfig === undefined && !component.loadError) {
270
+ if (attempts < maxAttempts) {
271
+ setTimeout(checkReady, checkInterval)
272
+ return
273
+ }
274
+ }
275
+
276
+ // 4. 检查关键方法是否存在(如 setForm、setFormWithKey)
277
+ const hasSetForm = typeof component.setForm === 'function'
278
+ const hasSetFormWithKey = typeof component.setFormWithKey === 'function'
279
+ const hasSetFormWithNoKey = typeof component.setFormWithNoKey === 'function'
280
+
281
+ // 5. 如果组件有这些方法,确保表单对象存在
282
+ if (hasSetForm || hasSetFormWithKey || hasSetFormWithNoKey) {
283
+ // 检查组件是否有 form 对象
284
+ if (component.form && Object.keys(component.form).length > 0) {
285
+ // 表单已初始化,等待 DOM 渲染完成
286
+ this.$nextTick(() => {
287
+ // 额外等待一个 tick,确保所有子组件也渲染完成
288
+ this.$nextTick(() => {
289
+ resolve()
290
+ })
291
+ })
292
+ return
293
+ } else if (component.loaded !== false) {
294
+ // 如果没有 form 对象但 loaded 不为 false,可能还在初始化
295
+ if (attempts < maxAttempts) {
296
+ setTimeout(checkReady, checkInterval)
297
+ return
298
+ }
299
+ }
300
+ }
301
+
302
+ // 6. 如果以上都通过,或者超时,等待 DOM 渲染完成
303
+ if (attempts >= 3 || attempts >= maxAttempts) {
304
+ // 至少等待几次检查,确保有时间初始化
305
+ this.$nextTick(() => {
306
+ this.$nextTick(() => {
307
+ resolve()
308
+ })
309
+ })
310
+ return
311
+ }
312
+
313
+ // 继续等待
314
+ setTimeout(checkReady, checkInterval)
315
+ }
316
+
317
+ // 首次检查前等待一个 tick
318
+ this.$nextTick(() => {
319
+ checkReady()
320
+ })
321
+ })
322
+ },
217
323
  initConfig () {
218
324
  if (this.configName) {
219
325
  this.getConfig()