vue2-client 1.8.181 → 1.8.182

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.8.181",
3
+ "version": "1.8.182",
4
4
  "private": false,
5
5
  "scripts": {
6
6
  "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",
@@ -1,346 +1,346 @@
1
- <template>
2
- <div>
3
- <a-cascader
4
- v-if="type === 'cascader'"
5
- :options="tagData.divisionsForTree"
6
- :placeholder="placeholder"
7
- style="width: 100%;"
8
- :size="size"
9
- />
10
- <a-select
11
- ref="select"
12
- :size="size"
13
- v-model="valueView"
14
- style="width: 100%;"
15
- :dropdownMatchSelectWidth="false"
16
- :dropdownStyle="dropdownStyle"
17
- :placeholder="placeholder"
18
- @blur="selectBlurHandle"
19
- allow-clear
20
- :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
21
- :style="inputStyle">
22
- <div slot="dropdownRender" @mousedown.prevent>
23
- <a-tabs v-model="activeKey" :size="size">
24
- <a-tab-pane
25
- :tab="view.key"
26
- v-for="(view,index) in viewArr"
27
- :key="view.key"
28
- v-if="contexts > index"
29
- :disabled="tagData[view.value].length === 0">
30
-
31
- <a-checkable-tag
32
- :style="tagStyle"
33
- v-for="item of tagData[view.value]"
34
- :key="item.code"
35
- @change="tagClick(view.key,item)">
36
- <a-tooltip
37
- placement="top"
38
- :mouseEnterDelay="0.5"
39
- :title="item.name"
40
- :getPopupContainer=" triggerNode => { return triggerNode.parentElement } "
41
- >
42
- {{ item.name.length > 8 ?`${item.name.slice(0, 8)}...`:item.name }}
43
- </a-tooltip>
44
- </a-checkable-tag>
45
- </a-tab-pane>
46
- </a-tabs>
47
- </div>
48
- </a-select>
49
- </div>
50
- </template>
51
-
52
- <script>
53
- import { mapState } from 'vuex'
54
- import { runLogic } from '@vue2-client/services/api/common'
55
- import { handleTree } from '@vue2-client/utils/util'
56
-
57
- const viewArr = [
58
- {
59
- key: '省/直辖市',
60
- value: 'divisionsForTree',
61
- }, {
62
- key: '市',
63
- value: 'cityData',
64
- }, {
65
- key: '区',
66
- value: 'areaData',
67
- }, {
68
- key: '街道',
69
- value: 'streetData',
70
- }, {
71
- key: '小区',
72
- value: 'communityData',
73
- }
74
- ]
75
- export default {
76
- name: 'CitySelect',
77
- data () {
78
- return {
79
- open: false,
80
- tagData: {
81
- divisionsForTree: [],
82
- // 市
83
- cityData: [],
84
- // 区
85
- areaData: [],
86
- // 街道
87
- streetData: [],
88
- // 小区
89
- communityData: [],
90
- },
91
- // model: {
92
- // provinceModel: { name: '', code: '' },
93
- // cityModel: { name: '', code: '' },
94
- // areaModel: { name: '', code: '' },
95
- // streetModel: { name: '', code: '' }
96
- // },
97
- model: [
98
- { name: '', code: '' },
99
- { name: '', code: '' },
100
- { name: '', code: '' },
101
- { name: '', code: '' },
102
- { name: '', code: '' }
103
- ],
104
- // 控制标签
105
- activeKey: '省/直辖市',
106
- // 遍历以渲染页面
107
- viewArr,
108
- // 框内显示值 valueView
109
- valueView: undefined
110
- }
111
- },
112
- async mounted () {
113
- await this.$appdata.getDivisionsOhChinaForTree().then(res => {
114
- if (res) {
115
- this.tagData.divisionsForTree = res
116
- if (this.value) {
117
- this.setValue(this.value, res)
118
- }
119
- } else {
120
- runLogic('getOperatingAreas', {}, 'af-revenue').then(res => {
121
- this.tagData.divisionsForTree = handleTree(res, 'code', 'parentcode')
122
- if (this.value) {
123
- this.setValue(this.value, res)
124
- }
125
- })
126
- }
127
- })
128
- },
129
- model: {
130
- prop: 'value',
131
- event: 'onChange'
132
- },
133
- computed: {
134
- ...mapState('account', { currUser: 'user' })
135
- },
136
- props: {
137
- // 页面渲染内容 默认 省市区街道 四个 所以是4 5 是到小区
138
- contexts: {
139
- type: Number,
140
- default: 4
141
- },
142
- placeholder: {
143
- type: String,
144
- default: '请选择省市区'
145
- },
146
- // small lage 输入框大小
147
- size: {
148
- type: String,
149
- default: undefined
150
- },
151
- // 类型 simple / undefined
152
- // simple 就是用的 cascader 不穿就是用的 自己封装的
153
- type: {
154
- type: String,
155
- default: undefined
156
- },
157
- // 框的样式
158
- inputStyle: {
159
- type: Object,
160
- default: () => {
161
- }
162
- },
163
- // 下拉框的样式
164
- dropdownStyle: {
165
- type: Object,
166
- default: () => {
167
- return {
168
- width: '35rem',
169
- padding: '1%'
170
- }
171
- }
172
- },
173
- // 标签的样式
174
- tagStyle: {
175
- type: Object,
176
- default: () => {
177
- return {
178
- fontSize: '0.88rem',
179
- width: '23%',
180
- textAlign: 'left',
181
- margin: '0.5%',
182
- cursor: 'pointer'
183
- }
184
- }
185
- },
186
- // 用于v-model 绑定
187
- value: {
188
- type: String,
189
- default: undefined
190
- },
191
- // 用于仅用于展示
192
- defaultValue: {
193
- type: String,
194
- default: undefined
195
- },
196
- // 用于v-model 绑定 code :最后一级的code address: 所有级拼接的地址
197
- valueType: {
198
- type: String,
199
- default: 'code'
200
- }
201
- },
202
- watch: {
203
- value () {
204
- if (!this.value && this.valueView) {
205
- /// 兼容外层重置方法
206
- this.model = [
207
- { name: '', code: '' },
208
- { name: '', code: '' },
209
- { name: '', code: '' },
210
- { name: '', code: '' },
211
- { name: '', code: '' }
212
- ]
213
- this.getResultText(this.contexts)
214
- }
215
- }
216
- },
217
- methods: {
218
- setValue (code, tree) {
219
- const findNode = (code, tree) => {
220
- for (let i = 0; i < tree.length; i++) {
221
- if (tree[i].code === code) {
222
- return tree[i]
223
- } else if (tree[i].children && tree[i].children.length > 0) {
224
- const node = findNode(code, tree[i].children)
225
- if (node) {
226
- return node
227
- }
228
- }
229
- }
230
- }
231
-
232
- const findParent = (code, tree, parent = null) => {
233
- for (let i = 0; i < tree.length; i++) {
234
- if (tree[i].code === code) {
235
- return parent
236
- } else if (tree[i].children && tree[i].children.length > 0) {
237
- const node = findParent(code, tree[i].children, tree[i])
238
- if (node) {
239
- return node
240
- }
241
- }
242
- }
243
- }
244
-
245
- const node = findNode(code, tree)
246
- if (node) {
247
- this.model[this.contexts - 1].name = node.name
248
- this.model[this.contexts - 1].code = node.code
249
- let parent = findParent(code, tree)
250
- for (let i = this.contexts - 2; i >= 0; i--) {
251
- this.model[i].name = parent ? parent.name : null
252
- this.model[i].code = parent ? parent.code : null
253
- if (i < this.contexts - 1 && parent) {
254
- parent = findParent(parent.code, tree)
255
- }
256
- }
257
- this.getResultText(this.contexts)
258
- }
259
- },
260
- tagClick (e, item) {
261
- if (e === '省/直辖市') {
262
- // 如果是同一个标签
263
- if (this.model[0].name !== item.name) {
264
- this.tagData.cityData = item.children
265
- this.tagData.areaData = []
266
- this.tagData.streetData = []
267
- this.model[0].name = item.name
268
- this.model[0].code = item.code
269
- this.model[1] = { name: '', code: '' }
270
- this.model[2] = { name: '', code: '' }
271
- this.model[3] = { name: '', code: '' }
272
- }
273
- if (this.contexts !== 1) {
274
- this.activeKey = '市'
275
- }
276
- this.getResultText(1)
277
- } else if (e === '市') {
278
- if (this.model[1].name !== item.name) {
279
- this.tagData.areaData = item.children
280
- this.tagData.streetData = []
281
- this.model[1].name = item.name
282
- this.model[1].code = item.code
283
- this.model[2] = { name: '', code: '' }
284
- this.model[3] = { name: '', code: '' }
285
- }
286
- if (this.contexts !== 2) {
287
- this.activeKey = '区'
288
- }
289
- this.getResultText(2)
290
- } else if (e === '区') {
291
- if (this.model[2].name !== item.name) {
292
- this.tagData.streetData = item.children || []
293
- this.model[2].name = item.name
294
- this.model[2].code = item.code
295
- this.model[3] = { name: '', code: '' }
296
- }
297
- if (this.contexts !== 3) {
298
- this.activeKey = '街道'
299
- }
300
- this.getResultText(3)
301
- } else if (e === '街道') {
302
- if (this.model[3].name !== item.name) {
303
- this.tagData.communityData = item.children || []
304
- this.model[3].name = item.name
305
- this.model[3].code = item.code
306
-
307
- this.model[4] = { name: '', code: '' }
308
- }
309
- if (this.contexts !== 4) {
310
- this.activeKey = '小区'
311
- }
312
- this.getResultText(4)
313
- } else if (e === '小区') {
314
- if (this.model[4].name !== item.name) {
315
- this.model[4].name = item.name
316
- this.model[4].code = item.code
317
- }
318
- this.getResultText(5)
319
- }
320
- },
321
- getResultText (tag) {
322
- const address = []
323
- let code = ''
324
- for (let i = 0; i < this.contexts; i++) {
325
- if (this.model[i].name && this.model[i].name !== '') {
326
- address.push(this.model[i].name)
327
- }
328
- code = this.model[i].code ?? ''
329
- }
330
- this.valueView = address.length === 0 ? undefined : address.join('')
331
- if (tag === this.contexts) {
332
- this.$refs.select.blur()
333
- // this.$emit('onChange', this.valueType === 'address' ? address.join('') : code)
334
- this.$emit('onChange', code)
335
- }
336
- },
337
- // 失去焦点回调
338
- selectBlurHandle () {
339
- console.log(this.model[this.contexts - 1])
340
- if (!this.model[this.contexts - 1].code || this.model[this.contexts - 1].code === '') {
341
- this.valueView = undefined
342
- }
343
- }
344
- }
345
- }
346
- </script>
1
+ <template>
2
+ <div>
3
+ <a-cascader
4
+ v-if="type === 'cascader'"
5
+ :options="tagData.divisionsForTree"
6
+ :placeholder="placeholder"
7
+ style="width: 100%;"
8
+ :size="size"
9
+ />
10
+ <a-select
11
+ ref="select"
12
+ :size="size"
13
+ v-model="valueView"
14
+ style="width: 100%;"
15
+ :dropdownMatchSelectWidth="false"
16
+ :dropdownStyle="dropdownStyle"
17
+ :placeholder="placeholder"
18
+ @blur="selectBlurHandle"
19
+ allow-clear
20
+ :getPopupContainer=" triggerNode => { return triggerNode.parentNode } "
21
+ :style="inputStyle">
22
+ <div slot="dropdownRender" @mousedown.prevent>
23
+ <a-tabs v-model="activeKey" :size="size">
24
+ <a-tab-pane
25
+ :tab="view.key"
26
+ v-for="(view,index) in viewArr"
27
+ :key="view.key"
28
+ v-if="contexts > index"
29
+ :disabled="tagData[view.value].length === 0">
30
+
31
+ <a-checkable-tag
32
+ :style="tagStyle"
33
+ v-for="item of tagData[view.value]"
34
+ :key="item.code"
35
+ @change="tagClick(view.key,item)">
36
+ <a-tooltip
37
+ placement="top"
38
+ :mouseEnterDelay="0.5"
39
+ :title="item.name"
40
+ :getPopupContainer=" triggerNode => { return triggerNode.parentElement } "
41
+ >
42
+ {{ item.name.length > 8 ?`${item.name.slice(0, 8)}...`:item.name }}
43
+ </a-tooltip>
44
+ </a-checkable-tag>
45
+ </a-tab-pane>
46
+ </a-tabs>
47
+ </div>
48
+ </a-select>
49
+ </div>
50
+ </template>
51
+
52
+ <script>
53
+ import { mapState } from 'vuex'
54
+ import { runLogic } from '@vue2-client/services/api/common'
55
+ import { handleTree } from '@vue2-client/utils/util'
56
+
57
+ const viewArr = [
58
+ {
59
+ key: '省/直辖市',
60
+ value: 'divisionsForTree',
61
+ }, {
62
+ key: '市',
63
+ value: 'cityData',
64
+ }, {
65
+ key: '区',
66
+ value: 'areaData',
67
+ }, {
68
+ key: '街道',
69
+ value: 'streetData',
70
+ }, {
71
+ key: '小区',
72
+ value: 'communityData',
73
+ }
74
+ ]
75
+ export default {
76
+ name: 'CitySelect',
77
+ data () {
78
+ return {
79
+ open: false,
80
+ tagData: {
81
+ divisionsForTree: [],
82
+ // 市
83
+ cityData: [],
84
+ // 区
85
+ areaData: [],
86
+ // 街道
87
+ streetData: [],
88
+ // 小区
89
+ communityData: [],
90
+ },
91
+ // model: {
92
+ // provinceModel: { name: '', code: '' },
93
+ // cityModel: { name: '', code: '' },
94
+ // areaModel: { name: '', code: '' },
95
+ // streetModel: { name: '', code: '' }
96
+ // },
97
+ model: [
98
+ { name: '', code: '' },
99
+ { name: '', code: '' },
100
+ { name: '', code: '' },
101
+ { name: '', code: '' },
102
+ { name: '', code: '' }
103
+ ],
104
+ // 控制标签
105
+ activeKey: '省/直辖市',
106
+ // 遍历以渲染页面
107
+ viewArr,
108
+ // 框内显示值 valueView
109
+ valueView: undefined
110
+ }
111
+ },
112
+ async mounted () {
113
+ await this.$appdata.getDivisionsOhChinaForTree().then(res => {
114
+ if (res) {
115
+ this.tagData.divisionsForTree = res
116
+ if (this.value) {
117
+ this.setValue(this.value, res)
118
+ }
119
+ } else {
120
+ runLogic('getOperatingAreas', {}, 'af-revenue').then(res => {
121
+ this.tagData.divisionsForTree = handleTree(res, 'code', 'parentcode')
122
+ if (this.value) {
123
+ this.setValue(this.value, res)
124
+ }
125
+ })
126
+ }
127
+ })
128
+ },
129
+ model: {
130
+ prop: 'value',
131
+ event: 'onChange'
132
+ },
133
+ computed: {
134
+ ...mapState('account', { currUser: 'user' })
135
+ },
136
+ props: {
137
+ // 页面渲染内容 默认 省市区街道 四个 所以是4 5 是到小区
138
+ contexts: {
139
+ type: Number,
140
+ default: 4
141
+ },
142
+ placeholder: {
143
+ type: String,
144
+ default: '请选择省市区'
145
+ },
146
+ // small lage 输入框大小
147
+ size: {
148
+ type: String,
149
+ default: undefined
150
+ },
151
+ // 类型 simple / undefined
152
+ // simple 就是用的 cascader 不穿就是用的 自己封装的
153
+ type: {
154
+ type: String,
155
+ default: undefined
156
+ },
157
+ // 框的样式
158
+ inputStyle: {
159
+ type: Object,
160
+ default: () => {
161
+ }
162
+ },
163
+ // 下拉框的样式
164
+ dropdownStyle: {
165
+ type: Object,
166
+ default: () => {
167
+ return {
168
+ width: '35rem',
169
+ padding: '1%'
170
+ }
171
+ }
172
+ },
173
+ // 标签的样式
174
+ tagStyle: {
175
+ type: Object,
176
+ default: () => {
177
+ return {
178
+ fontSize: '0.88rem',
179
+ width: '23%',
180
+ textAlign: 'left',
181
+ margin: '0.5%',
182
+ cursor: 'pointer'
183
+ }
184
+ }
185
+ },
186
+ // 用于v-model 绑定
187
+ value: {
188
+ type: String,
189
+ default: undefined
190
+ },
191
+ // 用于仅用于展示
192
+ defaultValue: {
193
+ type: String,
194
+ default: undefined
195
+ },
196
+ // 用于v-model 绑定 code :最后一级的code address: 所有级拼接的地址
197
+ valueType: {
198
+ type: String,
199
+ default: 'code'
200
+ }
201
+ },
202
+ watch: {
203
+ value () {
204
+ if (!this.value && this.valueView) {
205
+ /// 兼容外层重置方法
206
+ this.model = [
207
+ { name: '', code: '' },
208
+ { name: '', code: '' },
209
+ { name: '', code: '' },
210
+ { name: '', code: '' },
211
+ { name: '', code: '' }
212
+ ]
213
+ this.getResultText(this.contexts)
214
+ }
215
+ }
216
+ },
217
+ methods: {
218
+ setValue (code, tree) {
219
+ const findNode = (code, tree) => {
220
+ for (let i = 0; i < tree.length; i++) {
221
+ if (tree[i].code === code) {
222
+ return tree[i]
223
+ } else if (tree[i].children && tree[i].children.length > 0) {
224
+ const node = findNode(code, tree[i].children)
225
+ if (node) {
226
+ return node
227
+ }
228
+ }
229
+ }
230
+ }
231
+
232
+ const findParent = (code, tree, parent = null) => {
233
+ for (let i = 0; i < tree.length; i++) {
234
+ if (tree[i].code === code) {
235
+ return parent
236
+ } else if (tree[i].children && tree[i].children.length > 0) {
237
+ const node = findParent(code, tree[i].children, tree[i])
238
+ if (node) {
239
+ return node
240
+ }
241
+ }
242
+ }
243
+ }
244
+
245
+ const node = findNode(code, tree)
246
+ if (node) {
247
+ this.model[this.contexts - 1].name = node.name
248
+ this.model[this.contexts - 1].code = node.code
249
+ let parent = findParent(code, tree)
250
+ for (let i = this.contexts - 2; i >= 0; i--) {
251
+ this.model[i].name = parent ? parent.name : null
252
+ this.model[i].code = parent ? parent.code : null
253
+ if (i < this.contexts - 1 && parent) {
254
+ parent = findParent(parent.code, tree)
255
+ }
256
+ }
257
+ this.getResultText(this.contexts)
258
+ }
259
+ },
260
+ tagClick (e, item) {
261
+ if (e === '省/直辖市') {
262
+ // 如果是同一个标签
263
+ if (this.model[0].name !== item.name) {
264
+ this.tagData.cityData = item.children
265
+ this.tagData.areaData = []
266
+ this.tagData.streetData = []
267
+ this.model[0].name = item.name
268
+ this.model[0].code = item.code
269
+ this.model[1] = { name: '', code: '' }
270
+ this.model[2] = { name: '', code: '' }
271
+ this.model[3] = { name: '', code: '' }
272
+ }
273
+ if (this.contexts !== 1) {
274
+ this.activeKey = '市'
275
+ }
276
+ this.getResultText(1)
277
+ } else if (e === '市') {
278
+ if (this.model[1].name !== item.name) {
279
+ this.tagData.areaData = item.children
280
+ this.tagData.streetData = []
281
+ this.model[1].name = item.name
282
+ this.model[1].code = item.code
283
+ this.model[2] = { name: '', code: '' }
284
+ this.model[3] = { name: '', code: '' }
285
+ }
286
+ if (this.contexts !== 2) {
287
+ this.activeKey = '区'
288
+ }
289
+ this.getResultText(2)
290
+ } else if (e === '区') {
291
+ if (this.model[2].name !== item.name) {
292
+ this.tagData.streetData = item.children || []
293
+ this.model[2].name = item.name
294
+ this.model[2].code = item.code
295
+ this.model[3] = { name: '', code: '' }
296
+ }
297
+ if (this.contexts !== 3) {
298
+ this.activeKey = '街道'
299
+ }
300
+ this.getResultText(3)
301
+ } else if (e === '街道') {
302
+ if (this.model[3].name !== item.name) {
303
+ this.tagData.communityData = item.children || []
304
+ this.model[3].name = item.name
305
+ this.model[3].code = item.code
306
+
307
+ this.model[4] = { name: '', code: '' }
308
+ }
309
+ if (this.contexts !== 4) {
310
+ this.activeKey = '小区'
311
+ }
312
+ this.getResultText(4)
313
+ } else if (e === '小区') {
314
+ if (this.model[4].name !== item.name) {
315
+ this.model[4].name = item.name
316
+ this.model[4].code = item.code
317
+ }
318
+ this.getResultText(5)
319
+ }
320
+ },
321
+ getResultText (tag) {
322
+ const address = []
323
+ let code = ''
324
+ for (let i = 0; i < this.contexts; i++) {
325
+ if (this.model[i].name && this.model[i].name !== '') {
326
+ address.push(this.model[i].name)
327
+ }
328
+ code = this.model[i].code ?? ''
329
+ }
330
+ this.valueView = address.length === 0 ? undefined : address.join('')
331
+ if (tag === this.contexts) {
332
+ this.$refs.select.blur()
333
+ // this.$emit('onChange', this.valueType === 'address' ? address.join('') : code)
334
+ this.$emit('onChange', code)
335
+ }
336
+ },
337
+ // 失去焦点回调
338
+ selectBlurHandle () {
339
+ console.log(this.model[this.contexts - 1])
340
+ if (!this.model[this.contexts - 1].code || this.model[this.contexts - 1].code === '') {
341
+ this.valueView = undefined
342
+ }
343
+ }
344
+ }
345
+ }
346
+ </script>
@@ -13,7 +13,7 @@
13
13
  v-for="(item, index) in realJsonData"
14
14
  :key="index"
15
15
  :attr="item"
16
- :disabled="itemDisabled(item)"
16
+ :disabled="itemDisabled(item) || readonly(item)"
17
17
  :files="files"
18
18
  :form="form"
19
19
  :images="images"
@@ -62,7 +62,9 @@
62
62
  </a-card>
63
63
  </a-row>
64
64
  </a-form-model>
65
- <a-button v-if="showSubmitBtn" :loading="loading" type="primary" @click="onSubmit()">提交</a-button>
65
+ <a-row type="flex" justify="end">
66
+ <a-button v-if="showSubmitBtn" :loading="loading" type="primary" @click="onSubmit()">提交</a-button>
67
+ </a-row>
66
68
  </div>
67
69
  </template>
68
70
  <script>
@@ -164,8 +166,8 @@ export default {
164
166
  formItemLayout () {
165
167
  return this.layout === 'horizontal'
166
168
  ? {
167
- labelCol: { span: 4 },
168
- wrapperCol: { span: 15 },
169
+ labelCol: { span: 4, offset: 2 },
170
+ wrapperCol: { span: 14 },
169
171
  }
170
172
  : {}
171
173
  },
@@ -235,7 +237,9 @@ export default {
235
237
  this.loaded = true
236
238
  },
237
239
  setFormProps (formData, item, groupItem) {
238
- formData[item.model] = undefined
240
+ if (!formData[item.model]) {
241
+ formData[item.model] = undefined
242
+ }
239
243
  // 处理表单校验情况
240
244
  if (item.rule) {
241
245
  if (groupItem) {
@@ -340,6 +344,9 @@ export default {
340
344
  return (this.businessType === '新增' && value.addOrEdit === 'edit') ||
341
345
  (this.businessType === '修改' && value.addOrEdit === 'add')
342
346
  },
347
+ readonly (value) {
348
+ return value.addOrEdit === 'readonly'
349
+ },
343
350
  async onSubmit () {
344
351
  this.$refs.selectForm.validate(async valid => {
345
352
  // 验证未通过直接返回
@@ -1,24 +1,15 @@
1
1
  <template>
2
- <div v-show="visible && realJsonData.length > 0" class="table-page-search-wrapper">
3
- <a-form-model
4
- v-if="loaded"
5
- ref="form"
6
- :model="form"
7
- :rules="rules"
8
- layout="inline">
9
- <a-row :gutter="24">
10
- <x-form-item
11
- v-for="(item, index) in realJsonData.slice(0,7)"
12
- :key="index"
13
- :attr="item"
14
- :form="form"
15
- :service-name="serviceName"
16
- :get-data-params="getDataParams"
17
- :env="env"
18
- />
19
- <div v-for="(groupItem, groupIndex) in groupJsonData" :key="'group-' + groupIndex">
2
+ <div :style="{marginBottom: !visible ? '12px':''}">
3
+ <div v-show="visible && realJsonData.length > 0" class="table-page-search-wrapper">
4
+ <a-form-model
5
+ v-if="loaded"
6
+ ref="form"
7
+ :model="form"
8
+ :rules="rules"
9
+ layout="inline">
10
+ <a-row :gutter="24">
20
11
  <x-form-item
21
- v-for="(item, index) in groupItem.groupItems"
12
+ v-for="(item, index) in realJsonData.slice(0,7)"
22
13
  :key="index"
23
14
  :attr="item"
24
15
  :form="form"
@@ -26,42 +17,53 @@
26
17
  :get-data-params="getDataParams"
27
18
  :env="env"
28
19
  />
29
- </div>
30
- <div v-show="advanced">
31
- <x-form-item
32
- v-for="(item, index) in realJsonData.slice(7)"
33
- :key="'advanced'+index"
34
- :attr="item"
35
- :form="form"
36
- :service-name="serviceName"
37
- :get-data-params="getDataParams"
38
- :env="env"
39
- />
40
- </div>
41
- <a-col>
42
- <span
43
- :style="advanced && { float: 'right', overflow: 'hidden' } || {} "
44
- class="table-page-search-submitButtons">
45
- <template v-if="realJsonData.length >7">
46
- <a @click="toggleAdvanced">
47
- <span v-show="!advanced"><a-icon type="eye" :style="iconStyle"/>&nbsp;更多条件</span>
48
- <span v-show="advanced"><a-icon type="eye-invisible" :style="iconStyle"/>&nbsp;收起更多</span>
49
- </a>
50
- <a-divider type="vertical"/>
51
- </template>
52
- <a-button
53
- htmlType="submit"
54
- type="primary"
55
- @click="onSubmit">
56
- <a-icon :style="iconStyle" type="search"/>查询
57
- </a-button>
58
- <a-button style="margin-left: 8px" @click="resetForm">重置</a-button>
59
- <slot></slot>
60
- </span>
61
- </a-col>
62
- </a-row>
63
- </a-form-model>
64
- <div class="next-divider-dashed" role="separator"></div>
20
+ <div v-for="(groupItem, groupIndex) in groupJsonData" :key="'group-' + groupIndex">
21
+ <x-form-item
22
+ v-for="(item, index) in groupItem.groupItems"
23
+ :key="index"
24
+ :attr="item"
25
+ :form="form"
26
+ :service-name="serviceName"
27
+ :get-data-params="getDataParams"
28
+ :env="env"
29
+ />
30
+ </div>
31
+ <div v-show="advanced">
32
+ <x-form-item
33
+ v-for="(item, index) in realJsonData.slice(7)"
34
+ :key="'advanced'+index"
35
+ :attr="item"
36
+ :form="form"
37
+ :service-name="serviceName"
38
+ :get-data-params="getDataParams"
39
+ :env="env"
40
+ />
41
+ </div>
42
+ <a-col>
43
+ <span
44
+ :style="advanced && { float: 'right', overflow: 'hidden' } || {} "
45
+ class="table-page-search-submitButtons">
46
+ <template v-if="realJsonData.length >7">
47
+ <a @click="toggleAdvanced">
48
+ <span v-show="!advanced"><a-icon type="eye" :style="iconStyle"/>&nbsp;更多条件</span>
49
+ <span v-show="advanced"><a-icon type="eye-invisible" :style="iconStyle"/>&nbsp;收起更多</span>
50
+ </a>
51
+ <a-divider type="vertical"/>
52
+ </template>
53
+ <a-button
54
+ htmlType="submit"
55
+ type="primary"
56
+ @click="onSubmit">
57
+ <a-icon :style="iconStyle" type="search"/>查询
58
+ </a-button>
59
+ <a-button style="margin-left: 8px" @click="resetForm">重置</a-button>
60
+ <slot></slot>
61
+ </span>
62
+ </a-col>
63
+ </a-row>
64
+ </a-form-model>
65
+ <div class="next-divider-dashed" role="separator"></div>
66
+ </div>
65
67
  </div>
66
68
  </template>
67
69
  <script>
@@ -306,6 +306,7 @@
306
306
  v-else-if="attr.type === 'treeSelect'"
307
307
  :flex="attr.flex">
308
308
  <x-tree-select
309
+ v-model="form[attr.model]"
309
310
  ref="xTreeSelect">
310
311
  </x-tree-select>
311
312
  </x-form-col>
@@ -421,9 +422,9 @@ export default {
421
422
  const value = newVal[this.attr.model]
422
423
  const isEmpty = !value || !value.toString()
423
424
  // 查询表单点击重置按钮时清空树形选择框选中状态
424
- if (this.$refs.XTreeSelect && this.attr.type === 'treeSelect' && isEmpty) {
425
- this.$refs.xTreeSelect.setValue(undefined)
426
- }
425
+ // if (this.$refs.xTreeSelect && this.attr.type === 'treeSelect' && isEmpty) {
426
+ // this.$refs.xTreeSelect.setValue(undefined)
427
+ // }
427
428
  },
428
429
  deep: true
429
430
  }
@@ -4,7 +4,7 @@
4
4
  <!-- 树形选择框 -->
5
5
  <a-form-model-item v-if="loaded" :ref="model" :label="name" :prop="model">
6
6
  <a-tree-select
7
- v-model="value"
7
+ v-model="localValue"
8
8
  :disabled="disabled"
9
9
  :tree-data="getTreeData()"
10
10
  :tree-checkable="mode === '查询' && queryType !== 'RIGHT_LIKE'"
@@ -29,6 +29,21 @@ import XFormCol from '@vue2-client/base-client/components/common/XFormCol'
29
29
  export default {
30
30
  name: 'XTreeSelect',
31
31
  components: { XFormCol },
32
+ model: {
33
+ prop: 'value',
34
+ event: 'onChange'
35
+ },
36
+ props: ['value'],
37
+ watch: {
38
+ value (newVal) {
39
+ if (newVal.length && !newVal[0]) {
40
+ this.localValue = undefined
41
+ }
42
+ if (!newVal) {
43
+ this.localValue = undefined
44
+ }
45
+ },
46
+ },
32
47
  data () {
33
48
  return {
34
49
  // 内容加载是否完成
@@ -47,8 +62,7 @@ export default {
47
62
  mode: '查询',
48
63
  // 是否禁用
49
64
  disabled: false,
50
- // 选中值
51
- value: undefined
65
+ localValue: this.value
52
66
  }
53
67
  },
54
68
  methods: {
@@ -107,7 +121,8 @@ export default {
107
121
  label = node.label + '.' + label
108
122
  node = node.$parent
109
123
  }
110
- this.form[this.model] = label
124
+ // this.form[this.model] = label
125
+ this.$emit('onChange', label)
111
126
  } else {
112
127
  // 如果选中值含'-',代表是由多个数据源组成的树,需要重新组织查询或新增/编辑时的表单
113
128
  if ((value instanceof Array && value.length > 0 && value[0].indexOf('-') !== -1) || (typeof value === 'string' && value.indexOf('-') !== -1)) {
@@ -137,11 +152,13 @@ export default {
137
152
  treeDatas[name] = values
138
153
  }
139
154
  // 移除默认的表单项,将组织好后的表单项合并进表单
140
- this.form[this.model] = undefined
141
- Object.assign(this.form, treeDatas)
155
+ // this.form[this.model] = undefined
156
+ // Object.assign(this.form, treeDatas)
157
+ this.$emit('onChange', treeDatas)
142
158
  } else {
143
159
  // 从单一数据源组成的树可以直接赋值
144
- this.form[this.model] = value
160
+ // this.form[this.model] = value
161
+ this.$emit('onChange', value)
145
162
  }
146
163
  }
147
164
  },
@@ -31,7 +31,6 @@
31
31
  </div>
32
32
  <x-form
33
33
  ref="xForm"
34
- style="margin-bottom: 14px;"
35
34
  @onSubmit="onSearchSubmit">
36
35
  <slot name="formBtnExpand"></slot>
37
36
  </x-form>
@@ -173,16 +173,20 @@ defineExpose({
173
173
  <span>{{ config.title }}</span>
174
174
  </a-col>
175
175
  </a-row>
176
- <a-input-search
177
- v-if="config.search"
178
- style="margin-bottom: 8px"
179
- placeholder="请输入搜索关键字"
180
- @change="onChange"/>
176
+ <a-row v-if="config.search">
177
+ <div class="content-search">
178
+ <a-input
179
+ placeholder="请输入搜索关键字"
180
+ @change="onChange">
181
+ <a-icon slot="prefix" type="search"/>
182
+ </a-input>
183
+ </div>
184
+ </a-row>
181
185
  </div>
182
186
  <div
183
187
  class="tree_main"
184
188
  :style="{
185
- maxHeight:config.search?'calc(100vh - 200px - 5rem)':'calc(100vh - 200px - 3rem)'
189
+ maxHeight:config.search?'calc(100vh - 200px - 5.6rem)':'calc(100vh - 200px - 3rem)'
186
190
  }">
187
191
  <a-spin :spinning="spinning">
188
192
  <a-tree
@@ -221,10 +225,22 @@ defineExpose({
221
225
  .tree_title {
222
226
  background-color: #E0E5EB;
223
227
  border-radius: 8px 8px 0 0;
228
+
229
+ .content-search {
230
+ background-color: rgb(224, 229, 235);
231
+ height: 2.6rem;
232
+ padding: 0 10px;
233
+ display: flex;
234
+ align-items: center;
235
+ justify-content: center;
236
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
237
+ margin: auto 0;
238
+ }
224
239
  }
225
240
 
226
241
  .tree_main {
227
- width: 97%;
242
+ margin-top: 1rem;
243
+ width: 100%;
228
244
  display: inline-block;
229
245
  overflow-y: auto;
230
246
 
@@ -288,7 +304,7 @@ defineExpose({
288
304
  }
289
305
 
290
306
  :deep(.ant-tree li) {
291
- padding-left: 4px;
307
+ padding-left: 2px;
292
308
  }
293
309
 
294
310
  :deep(.ant-tree ul) {