agilebuilder-ui 1.1.37 → 1.1.38

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.
@@ -1,500 +1,484 @@
1
1
  <template>
2
- <el-form-item
3
- :label-width="labelWidth ?? (column.querySetting ? getLabelWidth(column.querySetting) : '110px')"
4
- :prop="column.prop"
5
- >
6
- <template v-slot:label>
7
- <span :title="(column.searchLabel ?? column.label).replace(/\\n/g, '</br>')" v-html="(column.searchLabel ?? column.label).replace(/\\n/g, '</br>')" />
8
- </template>
9
- <span v-if="customComponent(column) === true">
2
+ <el-form-item
3
+ :label-width="labelWidth ?? (column.querySetting ? getLabelWidth(column.querySetting) : '110px')"
4
+ :prop="column.prop"
5
+ >
6
+ <template v-slot:label>
7
+ <span
8
+ :title="(column.searchLabel ?? column.label).replace(/\\n/g, '</br>')"
9
+ v-html="(column.searchLabel ?? column.label).replace(/\\n/g, '</br>')"
10
+ />
11
+ </template>
12
+ <span v-if="customComponent(column) === true">
10
13
  <component
11
- :is="column.componentName"
12
- :ref="column.componentName"
13
- :entity="searchForm"
14
- :additional-settings="controlConfig"
15
- :model-value="getFormItemValue(column.prop)"
16
- :prop="column.prop"
17
- :row="searchForm"
18
- :select-options="column.valueSet"
19
- class="customComponent"
20
- @change="setValueToModelProp(column.prop,$event, column.componentName)"
14
+ :is="column.componentName"
15
+ :ref="column.componentName"
16
+ :entity="searchForm"
17
+ :additional-settings="controlConfig"
18
+ :model-value="getFormItemValue(column.prop)"
19
+ :prop="column.prop"
20
+ :row="searchForm"
21
+ :select-options="column.valueSet"
22
+ class="customComponent"
23
+ @change="setValueToModelProp(column.prop, $event, column.componentName)"
21
24
  />
22
25
  </span>
23
- <!-- 日期区间-两个输入框方式 -->
24
- <span v-else-if="column.componentType === 'dateSection'">
26
+ <!-- 日期区间-两个输入框方式 -->
27
+ <span v-else-if="column.componentType === 'dateSection'">
25
28
  <el-date-picker
26
- v-model="searchForm[column.prop][0]"
27
- :placeholder="$t('imatrixUIMessage.startDate')"
28
- :style="column.searchControlWidth"
29
- type="date"
30
- @change="setValueToModelProp(column.prop,$event, null, 0)"
29
+ v-model="searchForm[column.prop][0]"
30
+ :placeholder="$t('imatrixUIMessage.startDate')"
31
+ :style="column.searchControlWidth"
32
+ type="date"
33
+ @change="setValueToModelProp(column.prop, $event, null, 0)"
31
34
  />
32
35
  <el-date-picker
33
- v-model="searchForm[column.prop][1]"
34
- :placeholder="$t('imatrixUIMessage.endDate')"
35
- :style="column.searchControlWidth"
36
- type="date"
37
- @change="setValueToModelProp(column.prop,$event, null, 1)"
36
+ v-model="searchForm[column.prop][1]"
37
+ :placeholder="$t('imatrixUIMessage.endDate')"
38
+ :style="column.searchControlWidth"
39
+ type="date"
40
+ @change="setValueToModelProp(column.prop, $event, null, 1)"
38
41
  />
39
42
  </span>
40
- <!--后面再优化年份及年份区间控件--->
41
- <year-range-picker
42
- v-else-if="column.componentType === 'yearRange'"
43
- :value="getFormItemValue(column.prop)"
44
- type="yearRange"
45
- @change="setYearRangeValue(column.prop, $event)"
46
- />
47
- <el-date-picker
48
- v-else-if="column.componentType === 'dateTimePicker'"
49
- :default-time="getDefaultTime(column)"
50
- :end-placeholder="$t('imatrixUIMessage.endDate')"
51
- v-model="searchForm[column.prop]"
52
- :range-separator="$t('imatrixUIPublicModel.to')"
53
- :start-placeholder="$t('imatrixUIMessage.startDate')"
54
- :style="column.searchControlWidth"
55
- type="datetimerange"
56
- unlink-panels
57
- format="YYYY-MM-DD HH:mm:ss"
58
- value-format="YYYY-MM-DD HH:mm:ss"
59
- @change="setValueToModelProp(column.prop,$event)"
60
- />
61
- <!--:model-value="getFormItemValue(column.prop)"改成v-model="searchForm[column.prop]" 是因为新页面查询日期时会无法选中日期-->
62
- <el-date-picker
63
- v-else-if="column.dataType === 'DATE' || column.componentType === 'date'"
64
- :end-placeholder="$t('imatrixUIMessage.endDate')"
65
- v-model="searchForm[column.prop]"
66
- :range-separator="$t('imatrixUIPublicModel.to')"
67
- :start-placeholder="$t('imatrixUIMessage.startDate')"
68
- :style="column.searchControlWidth"
69
- type="daterange"
70
- unlink-panels
71
- format="YYYY-MM-DD"
72
- value-format="YYYY-MM-DD"
73
- @change="setValueToModelProp(column.prop,$event)"
74
- />
75
- <el-date-picker
76
- v-else-if="
77
- column.dataType === 'TIME' && column.componentType === 'timepicker'
78
- "
79
- :end-placeholder="$t('imatrixUIMessage.endDate')"
80
- v-model="searchForm[column.prop]"
81
- :range-separator="$t('imatrixUIPublicModel.to')"
82
- :start-placeholder="$t('imatrixUIMessage.startDate')"
83
- :style="column.searchControlWidth"
84
- type="datetimerange"
85
- unlink-panels
86
- format="HH:mm:ss"
87
- value-format="HH:mm:ss"
88
- @change="setValueToModelProp(column.prop,$event)"
89
- />
90
-
91
- <el-time-picker
92
- v-else-if="
93
- column.componentType === 'timepicker' &&
94
- column.dataType !== 'TIME' &&
95
- column.dataType !== 'DATE'
96
- "
97
- v-model="searchForm[column.prop]"
98
- :placeholder="$t('imatrixUIMessage.selectTime')"
99
- style="width: 100%"
100
- type="fixed-time"
101
- format="HH:mm:ss"
102
- value-format="HH:mm:ss"
103
- @change="setValueToModelProp(column.prop,$event)"
104
- />
43
+ <!--后面再优化年份及年份区间控件--->
44
+ <year-range-picker
45
+ v-else-if="column.componentType === 'yearRange'"
46
+ :value="getFormItemValue(column.prop)"
47
+ type="yearRange"
48
+ @change="setYearRangeValue(column.prop, $event)"
49
+ />
50
+ <el-date-picker
51
+ v-else-if="column.componentType === 'dateTimePicker'"
52
+ :default-time="getDefaultTime(column)"
53
+ :end-placeholder="$t('imatrixUIMessage.endDate')"
54
+ v-model="searchForm[column.prop]"
55
+ :range-separator="$t('imatrixUIPublicModel.to')"
56
+ :start-placeholder="$t('imatrixUIMessage.startDate')"
57
+ :style="column.searchControlWidth"
58
+ type="datetimerange"
59
+ unlink-panels
60
+ format="YYYY-MM-DD HH:mm:ss"
61
+ value-format="YYYY-MM-DD HH:mm:ss"
62
+ @change="setValueToModelProp(column.prop, $event)"
63
+ />
64
+ <!--:model-value="getFormItemValue(column.prop)"改成v-model="searchForm[column.prop]" 是因为新页面查询日期时会无法选中日期-->
65
+ <el-date-picker
66
+ v-else-if="column.dataType === 'DATE' || column.componentType === 'date'"
67
+ :end-placeholder="$t('imatrixUIMessage.endDate')"
68
+ v-model="searchForm[column.prop]"
69
+ :range-separator="$t('imatrixUIPublicModel.to')"
70
+ :start-placeholder="$t('imatrixUIMessage.startDate')"
71
+ :style="column.searchControlWidth"
72
+ type="daterange"
73
+ unlink-panels
74
+ format="YYYY-MM-DD"
75
+ value-format="YYYY-MM-DD"
76
+ @change="setValueToModelProp(column.prop, $event)"
77
+ />
78
+ <el-date-picker
79
+ v-else-if="column.dataType === 'TIME' && column.componentType === 'timepicker'"
80
+ :end-placeholder="$t('imatrixUIMessage.endDate')"
81
+ v-model="searchForm[column.prop]"
82
+ :range-separator="$t('imatrixUIPublicModel.to')"
83
+ :start-placeholder="$t('imatrixUIMessage.startDate')"
84
+ :style="column.searchControlWidth"
85
+ type="datetimerange"
86
+ unlink-panels
87
+ format="HH:mm:ss"
88
+ value-format="HH:mm:ss"
89
+ @change="setValueToModelProp(column.prop, $event)"
90
+ />
105
91
 
106
- <organization-input
107
- v-else-if="componentTypeTypeIsTree(column.componentType)"
108
- :fields="getTreeFields(column.orgTreeSet)"
109
- :models="searchForm"
110
- :multiple="getTreeIsMultiTree(column.componentType)"
111
- :tree-type="getTreeType(column.componentType)"
112
- :value="getFormItemValue(column.prop)"
113
- @clear="clearOrganizationInputEvent"
114
- @setValue="organizationInputEvent"
115
- />
92
+ <el-time-picker
93
+ v-else-if="column.componentType === 'timepicker' && column.dataType !== 'TIME' && column.dataType !== 'DATE'"
94
+ v-model="searchForm[column.prop]"
95
+ :placeholder="$t('imatrixUIMessage.selectTime')"
96
+ style="width: 100%"
97
+ type="fixed-time"
98
+ format="HH:mm:ss"
99
+ value-format="HH:mm:ss"
100
+ @change="setValueToModelProp(column.prop, $event)"
101
+ />
116
102
 
117
- <el-select
118
- v-else-if="
119
- ((column.componentType && column.componentType === 'select') ||
120
- column.dataType === 'BOOLEAN') &&
121
- !isDynamicDataSourceSource(column)
122
- "
123
- :model-value="getFormItemValue(column.prop)"
124
- :placeholder="$t('imatrixUIMessage.pleaseSelect')"
125
- :style="column.searchControlWidth"
126
- clearable
127
- filterable
128
- @change="setValueToModelProp(column.prop,$event)"
129
- >
130
- <el-option
131
- v-for="item in column.valueSet"
132
- :key="item.value"
133
- :label="item.label"
134
- :value="item.value"
135
- />
136
- </el-select>
137
- <el-select
138
- v-else-if="
139
- column.componentType &&
140
- column.componentType === 'multiselect' &&
103
+ <organization-input
104
+ v-else-if="componentTypeTypeIsTree(column.componentType)"
105
+ :fields="getTreeFields(column.orgTreeSet)"
106
+ :models="searchForm"
107
+ :multiple="getTreeIsMultiTree(column.componentType)"
108
+ :tree-type="getTreeType(column.componentType)"
109
+ :value="getFormItemValue(column.prop)"
110
+ @clear="clearOrganizationInputEvent"
111
+ @setValue="organizationInputEvent"
112
+ />
113
+ <el-select
114
+ v-else-if="column?.componentType === 'radio'"
115
+ :model-value="getFormItemValue(column.prop)"
116
+ :placeholder="$t('imatrixUIMessage.pleaseSelect')"
117
+ :style="column.searchControlWidth"
118
+ clearable
119
+ filterable
120
+ @change="setValueToModelProp(column.prop, $event)"
121
+ >
122
+ <el-option v-for="item in column.valueSet" :key="item.value" :label="item.label" :value="item.value" />
123
+ </el-select>
124
+ <el-select
125
+ v-else-if="
126
+ ((column.componentType && column.componentType === 'select') || column.dataType === 'BOOLEAN') &&
141
127
  !isDynamicDataSourceSource(column)
142
128
  "
143
- :model-value="getFormItemValue(column.prop)"
144
- :placeholder="$t('imatrixUIMessage.pleaseSelect')"
145
- :style="column.searchControlWidth"
146
- clearable
147
- collapse-tags
148
- filterable
149
- multiple
150
- @change="setValueToModelProp(column.prop,$event)"
151
- >
152
- <el-option
153
- v-for="item in column.valueSet"
154
- :key="item.value"
155
- :label="item.label"
156
- :value="item.value"
157
- />
158
- </el-select>
159
- <dynamic-source-select
160
- v-else-if="
129
+ :model-value="getFormItemValue(column.prop)"
130
+ :placeholder="$t('imatrixUIMessage.pleaseSelect')"
131
+ :style="column.searchControlWidth"
132
+ clearable
133
+ filterable
134
+ @change="setValueToModelProp(column.prop, $event)"
135
+ >
136
+ <el-option v-for="item in column.valueSet" :key="item.value" :label="item.label" :value="item.value" />
137
+ </el-select>
138
+ <el-select
139
+ v-else-if="column.componentType && column.componentType === 'multiselect' && !isDynamicDataSourceSource(column)"
140
+ :model-value="getFormItemValue(column.prop)"
141
+ :placeholder="$t('imatrixUIMessage.pleaseSelect')"
142
+ :style="column.searchControlWidth"
143
+ clearable
144
+ collapse-tags
145
+ filterable
146
+ multiple
147
+ @change="setValueToModelProp(column.prop, $event)"
148
+ >
149
+ <el-option v-for="item in column.valueSet" :key="item.value" :label="item.label" :value="item.value" />
150
+ </el-select>
151
+ <dynamic-source-select
152
+ v-else-if="
161
153
  column.componentType &&
162
- (column.componentType === 'multiselect' ||
163
- column.componentType === 'select') &&
154
+ (column.componentType === 'multiselect' || column.componentType === 'select') &&
164
155
  isDynamicDataSourceSource(column)
165
156
  "
166
- :allow-create="true"
167
- :base-props="{
168
- multiple: column.componentType === 'multiselect' ? true : false,
157
+ :allow-create="true"
158
+ :base-props="{
159
+ multiple: column.componentType === 'multiselect' ? true : false
169
160
  }"
170
- :entity="searchForm"
171
- :filterable="true"
172
- :is-join-table="isJoinTable"
173
- :list-code="code"
174
- :list-toolbar-form-data="listToolbarFormData"
175
- :options="getDynamicDataSourceOptions(column)"
176
- :table-name="tableName"
177
- :value="getFormItemValue(column.prop)"
178
- @input="setValueToModelProp(column.prop, $event)"
179
- />
180
- <!--
161
+ :entity="searchForm"
162
+ :filterable="true"
163
+ :is-join-table="isJoinTable"
164
+ :list-code="code"
165
+ :list-toolbar-form-data="listToolbarFormData"
166
+ :options="getDynamicDataSourceOptions(column)"
167
+ :table-name="tableName"
168
+ :value="getFormItemValue(column.prop)"
169
+ @input="setValueToModelProp(column.prop, $event)"
170
+ />
171
+ <!--
181
172
  <el-input-number
182
173
  v-else-if="column.componentType && column.componentType==='inputNumber'"
183
174
  :value="getFormItemValue(column.prop)"
184
175
  @input="setValueToModelProp(column.prop,$event)"
185
176
  /> -->
186
177
 
187
- <search-form-number
188
- v-else-if="column.componentType && column.componentType === 'inputNumber'"
189
- :item-value="searchForm[column.prop]"
190
- :module-config="moduleConfig"
191
- @setValue="setNumberValue"
192
- />
178
+ <search-form-number
179
+ v-else-if="column.componentType && column.componentType === 'inputNumber'"
180
+ :item-value="searchForm[column.prop]"
181
+ :module-config="moduleConfig"
182
+ @setValue="setNumberValue"
183
+ />
193
184
 
194
- <el-switch
195
- v-else-if="column.componentType && column.componentType === 'switch'"
196
- :model-value="getFormItemValue(column.prop)"
197
- :style="column.searchControlWidth"
198
- active-color="#13ce66"
199
- inactive-color="#ff4949"
200
- @change="setValueToModelProp(column.prop,$event)"
201
- />
202
- <el-slider
203
- v-else-if="column.componentType && column.componentType === 'slider'"
204
- :model-value="getFormItemValue(column.prop)"
205
- :style="column.searchControlWidth"
206
- @change="setValueToModelProp(column.prop,$event)"
207
- />
185
+ <el-switch
186
+ v-else-if="column.componentType && column.componentType === 'switch'"
187
+ :model-value="getFormItemValue(column.prop)"
188
+ :style="column.searchControlWidth"
189
+ active-color="#13ce66"
190
+ inactive-color="#ff4949"
191
+ @change="setValueToModelProp(column.prop, $event)"
192
+ />
193
+ <el-slider
194
+ v-else-if="column.componentType && column.componentType === 'slider'"
195
+ :model-value="getFormItemValue(column.prop)"
196
+ :style="column.searchControlWidth"
197
+ @change="setValueToModelProp(column.prop, $event)"
198
+ />
208
199
 
209
- <el-rate
210
- v-else-if="column.componentType && column.componentType === 'rate'"
211
- :model-value="getFormItemValue(column.prop)"
212
- :style="column.searchControlWidth"
213
- @change="setValueToModelProp(column.prop,$event)"
214
- />
215
- <el-input
216
- v-else
217
- :model-value="getFormItemValue(column.prop)"
218
- :style="column.searchControlWidth"
219
- @keyup.enter="submitForm('searchForm')"
220
- @input="setValueToModelProp(column.prop,$event)"
221
- />
222
- </el-form-item>
200
+ <el-rate
201
+ v-else-if="column.componentType && column.componentType === 'rate'"
202
+ :model-value="getFormItemValue(column.prop)"
203
+ :style="column.searchControlWidth"
204
+ @change="setValueToModelProp(column.prop, $event)"
205
+ />
206
+ <el-input
207
+ v-else
208
+ :model-value="getFormItemValue(column.prop)"
209
+ :style="column.searchControlWidth"
210
+ @keyup.enter="submitForm('searchForm')"
211
+ @input="setValueToModelProp(column.prop, $event)"
212
+ />
213
+ </el-form-item>
223
214
  </template>
224
215
 
225
216
  <script>
226
- import {$emit} from '../../utils/gogocodeTransfer'
217
+ import { $emit } from '../../utils/gogocodeTransfer'
227
218
  import searchMethods from './search-methods'
228
219
  import searchFormNumber from './search-form-number.vue'
229
220
  import store from './store'
230
- import {getDynamicDataSourceOptions, isDynamicDataSourceSource, getControlConfig} from './utils'
221
+ import { getDynamicDataSourceOptions, isDynamicDataSourceSource, getControlConfig } from './utils'
231
222
 
232
223
  export default {
233
- name: 'SearchFormItem',
234
- components: {
235
- searchFormNumber,
236
- },
237
- inject: ['getListToolbarFormData'],
238
- props: {
239
- column: {
240
- type: Object,
241
- default: null,
242
- },
243
- code: {
244
- type: String,
245
- default: null,
246
- },
247
- isSql: {
248
- type: Boolean,
249
- default: false,
250
- },
251
- tableName: {
252
- type: String,
253
- default: null,
254
- },
255
- isJoinTable: {
256
- type: Boolean,
257
- default: false,
258
- },
259
- // 查询表单信息
260
- searchForm: {
261
- type: Object,
262
- default: null,
263
- },
264
- index: {
265
- type: Number,
266
- default: 0,
267
- },
268
- length: {
269
- type: Number,
270
- default: 0,
271
- },
272
- loadCompleteQuery: {
273
- type: Boolean,
274
- default: false,
275
- },
276
- labelWidth: {
277
- type: [String, Number, undefined],
278
- default: undefined,
279
- },
280
- },
281
- data() {
282
- const customComponentNames = new Set()
283
- return {
284
- customComponentNames: customComponentNames,
285
- dateOne: null,
286
- dataTwo: null,
287
- moduleConfig: {},
288
- dateVal: this.getFormItemValue(this.column.prop),
289
- controlConfig: getControlConfig(this.column)
290
- }
291
- },
292
- computed: {
293
- listToolbarFormData() {
294
- const data = this.getListToolbarFormData()
295
- if (data && data.listToolbarFormData) {
296
- return data.listToolbarFormData
297
- }
298
- return null
299
- }
300
- },
301
- created() {
302
- if (this.column.valueSetOptions) {
303
- this.moduleConfig = JSON.parse(this.column.valueSetOptions)
304
- }
305
- console.log('searchitem页面', this.column)
306
- },
307
- mounted() {
308
- // 查询页面加载完成
309
- if (this.index + 1 === this.length && this.loadCompleteQuery) {
310
- $emit(this, 'submit-form')
311
- }
312
- },
313
- methods: {
314
- ...searchMethods,
315
- getDynamicDataSourceOptions(column) {
316
- const gridParams = store.get(this.code)
317
- let baseURL = gridParams.options.backendUrl
318
- if (!baseURL) {
319
- baseURL = window.$vueApp.config.globalProperties.baseURL
320
- }
321
- return getDynamicDataSourceOptions(
322
- column,
323
- this.isSql,
324
- gridParams.additionalParamMap,
325
- baseURL
326
- )
327
- },
328
- // 值设置是否是动态数据源类型的数据源
329
- isDynamicDataSourceSource(column) {
330
- return isDynamicDataSourceSource(column)
331
- },
332
- setValueToModelProp(prop, value, componentName, index) {
333
- console.log('%c描述-105004', 'color:#2E3435;background:#F8BB07;padding:3px;border-radius:2px', prop, value, componentName, index);
334
- if (prop && prop.indexOf('.') > 0) {
335
- const parentOjbect = this.getParentObject(prop)
336
- // 嵌套属性中的最后一个属性是属于这个中间父对象的,所有要通过中间父对象来赋值
337
- if (index != null && index !== undefined) {
338
- // parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)][index] = value
339
- parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)][index] = value
340
- } else {
341
- parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)] = value
342
- }
343
- } else {
344
- if (index != null && index !== undefined) {
345
- this.searchForm[prop][index] = value
346
- } else {
347
- this.searchForm[prop] = value
348
- }
349
- }
350
- },
351
- getLabelWidth(querySetting) {
352
- const configData = JSON.parse(querySetting)
353
- if (
354
- configData.labelWidth !== '' &&
355
- configData.labelWidth !== null &&
356
- configData.labelWidth !== undefined
357
- ) {
358
- return configData.labelWidth + 'px'
359
- } else {
360
- return '110px'
361
- }
362
- },
363
- componentTypeTypeIsTree(componentType) {
364
- if (componentType) {
365
- if (componentType.indexOf('DeptManTree') > 0) {
366
- // 说明是部门人员树
367
- return true
368
- }
369
- if (componentType.indexOf('DeptTree') > 0) {
370
- // 说明是部门树
371
- return true
372
- }
373
- if (componentType.indexOf('WgManTree') > 0) {
374
- // 说明是工作组人员树
375
- return true
376
- }
377
- if (componentType.indexOf('WgManTree') > 0) {
378
- // 说明是工作组树
379
- return true
380
- }
381
- }
382
- return false
383
- },
384
- getTreeFields(orgTreeSetJson) {
385
- if (orgTreeSetJson && orgTreeSetJson !== '') {
386
- const orgTreeSet = JSON.parse(orgTreeSetJson)
387
- if (orgTreeSet.length) {
388
- return orgTreeSet
389
- } else {
390
- if (orgTreeSet.orgTreeSetArr) {
391
- return orgTreeSet.orgTreeSetArr
392
- }
393
- }
394
- }
395
- },
396
- getTreeIsMultiTree(componentType) {
397
- if (
398
- componentType &&
399
- componentType.indexOf('single') >= 0 &&
400
- componentType.indexOf('Tree') > 0
401
- ) {
402
- return false
403
- } else {
404
- return true
405
- }
406
- },
407
- getTreeType(componentType) {
408
- if (componentType) {
409
- if (componentType.indexOf('DeptManTree') > 0) {
410
- // 说明是部门人员树
411
- return 'DeptUserTree'
412
- }
413
- if (componentType.indexOf('DeptTree') > 0) {
414
- // 说明是部门树
415
- return 'DeptTree'
416
- }
417
- if (componentType.indexOf('WgTree') > 0) {
418
- // 说明是工作组人员树
419
- return 'WgTree'
420
- }
421
- if (componentType.indexOf('WgManTree') > 0) {
422
- // 说明是工作组树
423
- return 'WgUserTree'
424
- }
425
- }
426
- },
427
- // 组织结构树文本框值改变事件
428
- organizationInputEvent(prop, value) {
429
- if (prop) {
430
- // 必须手动调用一下input事件,否则不会更新组件的值
431
- this.searchForm[prop] = value
432
- }
433
- },
434
- // 组织结构树文本框值清空事件
435
- clearOrganizationInputEvent(prop) {
436
- if (prop) {
437
- // 必须手动调用一下input事件,否则不会更新组件的值
438
- this.searchForm[prop] = null
439
- }
440
- },
441
- customComponent(column) {
442
- const gridParams = store.get(this.code)
443
- if (column.componentName && column.componentName !== '') {
444
- this.customComponentNames.add(column.componentName)
445
- return true
446
- }
447
- if (
448
- (!column.componentName || column.componentName === '') &&
449
- gridParams.options &&
450
- gridParams.options.search &&
451
- gridParams.options.search.customSearchElements
452
- ) {
453
- // 定义了自定义查询组件
454
- const propSearchEle =
455
- gridParams.options.search.customSearchElements[column.prop]
456
- // console.log('customComponent-customSearchElements-propSearchEle-', column.prop)
457
- if (propSearchEle) {
458
- column.componentName = 'custom-' + column.prop
459
- const component = propSearchEle.call(this, column)
460
- // console.log('customComponent-customSearchElements-')
461
- if (component) {
462
- this.customComponentNames.add(column.componentName)
463
- window.$vueApp.component(column.componentName, component)
464
- return true
465
- }
466
- }
467
- }
468
- return false
469
- },
470
- setNumberValue(value, r, n) {
471
- let itemValue = this.getFormItemValue(this.column.prop)
472
- itemValue = value
473
- this.setValueToModelProp(this.column.prop, itemValue)
474
- },
475
- setYearRangeValue(prop, value) {
476
- this.searchForm[prop][0] = value[0]
477
- this.searchForm[prop][1] = value[1]
478
- },
479
- getDefaultTime(column) {
480
- if (column['valueSetOptions']) {
481
- const valueSetOptions = JSON.parse(column['valueSetOptions'])
482
- if (valueSetOptions.defaultTime) {
483
- return [valueSetOptions.defaultTime, valueSetOptions.defaultTime]
484
- } else {
485
- return ['00:00:00']
486
- }
487
- } else {
488
- return ['00:00:00']
489
- }
490
- },
491
- },
492
- emits: ['submit-form'],
224
+ name: 'SearchFormItem',
225
+ components: {
226
+ searchFormNumber
227
+ },
228
+ inject: ['getListToolbarFormData'],
229
+ props: {
230
+ column: {
231
+ type: Object,
232
+ default: null
233
+ },
234
+ code: {
235
+ type: String,
236
+ default: null
237
+ },
238
+ isSql: {
239
+ type: Boolean,
240
+ default: false
241
+ },
242
+ tableName: {
243
+ type: String,
244
+ default: null
245
+ },
246
+ isJoinTable: {
247
+ type: Boolean,
248
+ default: false
249
+ },
250
+ // 查询表单信息
251
+ searchForm: {
252
+ type: Object,
253
+ default: null
254
+ },
255
+ index: {
256
+ type: Number,
257
+ default: 0
258
+ },
259
+ length: {
260
+ type: Number,
261
+ default: 0
262
+ },
263
+ loadCompleteQuery: {
264
+ type: Boolean,
265
+ default: false
266
+ },
267
+ labelWidth: {
268
+ type: [String, Number, undefined],
269
+ default: undefined
270
+ }
271
+ },
272
+ data() {
273
+ const customComponentNames = new Set()
274
+ return {
275
+ customComponentNames: customComponentNames,
276
+ dateOne: null,
277
+ dataTwo: null,
278
+ moduleConfig: {},
279
+ dateVal: this.getFormItemValue(this.column.prop),
280
+ controlConfig: getControlConfig(this.column)
281
+ }
282
+ },
283
+ computed: {
284
+ listToolbarFormData() {
285
+ const data = this.getListToolbarFormData()
286
+ if (data && data.listToolbarFormData) {
287
+ return data.listToolbarFormData
288
+ }
289
+ return null
290
+ }
291
+ },
292
+ created() {
293
+ if (this.column.valueSetOptions) {
294
+ this.moduleConfig = JSON.parse(this.column.valueSetOptions)
295
+ }
296
+ console.log('searchitem页面', this.column)
297
+ },
298
+ mounted() {
299
+ // 查询页面加载完成
300
+ if (this.index + 1 === this.length && this.loadCompleteQuery) {
301
+ $emit(this, 'submit-form')
302
+ }
303
+ },
304
+ methods: {
305
+ ...searchMethods,
306
+ getDynamicDataSourceOptions(column) {
307
+ const gridParams = store.get(this.code)
308
+ let baseURL = gridParams.options.backendUrl
309
+ if (!baseURL) {
310
+ baseURL = window.$vueApp.config.globalProperties.baseURL
311
+ }
312
+ return getDynamicDataSourceOptions(column, this.isSql, gridParams.additionalParamMap, baseURL)
313
+ },
314
+ // 值设置是否是动态数据源类型的数据源
315
+ isDynamicDataSourceSource(column) {
316
+ return isDynamicDataSourceSource(column)
317
+ },
318
+ setValueToModelProp(prop, value, componentName, index) {
319
+ console.log(
320
+ '%c描述-105004',
321
+ 'color:#2E3435;background:#F8BB07;padding:3px;border-radius:2px',
322
+ prop,
323
+ value,
324
+ componentName,
325
+ index
326
+ )
327
+ if (prop && prop.indexOf('.') > 0) {
328
+ const parentOjbect = this.getParentObject(prop)
329
+ // 嵌套属性中的最后一个属性是属于这个中间父对象的,所有要通过中间父对象来赋值
330
+ if (index != null && index !== undefined) {
331
+ // parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)][index] = value
332
+ parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)][index] = value
333
+ } else {
334
+ parentOjbect[prop.substring(prop.lastIndexOf('.') + 1)] = value
335
+ }
336
+ } else {
337
+ if (index != null && index !== undefined) {
338
+ this.searchForm[prop][index] = value
339
+ } else {
340
+ this.searchForm[prop] = value
341
+ }
342
+ }
343
+ },
344
+ getLabelWidth(querySetting) {
345
+ const configData = JSON.parse(querySetting)
346
+ if (configData.labelWidth !== '' && configData.labelWidth !== null && configData.labelWidth !== undefined) {
347
+ return configData.labelWidth + 'px'
348
+ } else {
349
+ return '110px'
350
+ }
351
+ },
352
+ componentTypeTypeIsTree(componentType) {
353
+ if (componentType) {
354
+ if (componentType.indexOf('DeptManTree') > 0) {
355
+ // 说明是部门人员树
356
+ return true
357
+ }
358
+ if (componentType.indexOf('DeptTree') > 0) {
359
+ // 说明是部门树
360
+ return true
361
+ }
362
+ if (componentType.indexOf('WgManTree') > 0) {
363
+ // 说明是工作组人员树
364
+ return true
365
+ }
366
+ if (componentType.indexOf('WgManTree') > 0) {
367
+ // 说明是工作组树
368
+ return true
369
+ }
370
+ }
371
+ return false
372
+ },
373
+ getTreeFields(orgTreeSetJson) {
374
+ if (orgTreeSetJson && orgTreeSetJson !== '') {
375
+ const orgTreeSet = JSON.parse(orgTreeSetJson)
376
+ if (orgTreeSet.length) {
377
+ return orgTreeSet
378
+ } else {
379
+ if (orgTreeSet.orgTreeSetArr) {
380
+ return orgTreeSet.orgTreeSetArr
381
+ }
382
+ }
383
+ }
384
+ },
385
+ getTreeIsMultiTree(componentType) {
386
+ if (componentType && componentType.indexOf('single') >= 0 && componentType.indexOf('Tree') > 0) {
387
+ return false
388
+ } else {
389
+ return true
390
+ }
391
+ },
392
+ getTreeType(componentType) {
393
+ if (componentType) {
394
+ if (componentType.indexOf('DeptManTree') > 0) {
395
+ // 说明是部门人员树
396
+ return 'DeptUserTree'
397
+ }
398
+ if (componentType.indexOf('DeptTree') > 0) {
399
+ // 说明是部门树
400
+ return 'DeptTree'
401
+ }
402
+ if (componentType.indexOf('WgTree') > 0) {
403
+ // 说明是工作组人员树
404
+ return 'WgTree'
405
+ }
406
+ if (componentType.indexOf('WgManTree') > 0) {
407
+ // 说明是工作组树
408
+ return 'WgUserTree'
409
+ }
410
+ }
411
+ },
412
+ // 组织结构树文本框值改变事件
413
+ organizationInputEvent(prop, value) {
414
+ if (prop) {
415
+ // 必须手动调用一下input事件,否则不会更新组件的值
416
+ this.searchForm[prop] = value
417
+ }
418
+ },
419
+ // 组织结构树文本框值清空事件
420
+ clearOrganizationInputEvent(prop) {
421
+ if (prop) {
422
+ // 必须手动调用一下input事件,否则不会更新组件的值
423
+ this.searchForm[prop] = null
424
+ }
425
+ },
426
+ customComponent(column) {
427
+ const gridParams = store.get(this.code)
428
+ if (column.componentName && column.componentName !== '') {
429
+ this.customComponentNames.add(column.componentName)
430
+ return true
431
+ }
432
+ if (
433
+ (!column.componentName || column.componentName === '') &&
434
+ gridParams.options &&
435
+ gridParams.options.search &&
436
+ gridParams.options.search.customSearchElements
437
+ ) {
438
+ // 定义了自定义查询组件
439
+ const propSearchEle = gridParams.options.search.customSearchElements[column.prop]
440
+ // console.log('customComponent-customSearchElements-propSearchEle-', column.prop)
441
+ if (propSearchEle) {
442
+ column.componentName = 'custom-' + column.prop
443
+ const component = propSearchEle.call(this, column)
444
+ // console.log('customComponent-customSearchElements-')
445
+ if (component) {
446
+ this.customComponentNames.add(column.componentName)
447
+ window.$vueApp.component(column.componentName, component)
448
+ return true
449
+ }
450
+ }
451
+ }
452
+ return false
453
+ },
454
+ setNumberValue(value, r, n) {
455
+ let itemValue = this.getFormItemValue(this.column.prop)
456
+ itemValue = value
457
+ this.setValueToModelProp(this.column.prop, itemValue)
458
+ },
459
+ setYearRangeValue(prop, value) {
460
+ this.searchForm[prop][0] = value[0]
461
+ this.searchForm[prop][1] = value[1]
462
+ },
463
+ getDefaultTime(column) {
464
+ if (column['valueSetOptions']) {
465
+ const valueSetOptions = JSON.parse(column['valueSetOptions'])
466
+ if (valueSetOptions.defaultTime) {
467
+ return [valueSetOptions.defaultTime, valueSetOptions.defaultTime]
468
+ } else {
469
+ return ['00:00:00']
470
+ }
471
+ } else {
472
+ return ['00:00:00']
473
+ }
474
+ }
475
+ },
476
+ emits: ['submit-form']
493
477
  }
494
478
  </script>
495
479
 
496
480
  <style lang="scss" scoped>
497
481
  :deep(.el-range-separator) {
498
- min-width: 20px;
482
+ min-width: 20px;
499
483
  }
500
484
  </style>