|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<template>
<div class="components-input-demo-presuffix" v-if="avalid">
<!---->
<a-input @click="openModal" :placeholder="placeholder" v-model="showText" readOnly :disabled="disabled">
<a-icon slot="prefix" type="cluster" :title="title"/>
<a-icon v-if="showText" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
</a-input>
<j-popup-onl-report
ref="jPopupOnlReport"
:code="code"
:multi="multi"
:sorter="sorter"
:groupId="uniqGroupId"
:param="param"
@ok="callBack"
/>
</div>
</template>
<script>
|
|
23
|
import JPopupOnlReport from './modal/JPopupOnlReport'
|
|
24
|
|
|
25
26
27
28
29
30
31
32
33
34
|
export default {
name: 'JPopup',
components: {
JPopupOnlReport
},
props: {
code: {
type: String,
default: '',
required: false
|
|
35
|
},
|
|
36
37
38
39
|
field: {
type: String,
default: '',
required: false
|
|
40
|
},
|
|
41
42
43
44
|
orgFields: {
type: String,
default: '',
required: false
|
|
45
|
},
|
|
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
|
destFields: {
type: String,
default: '',
required: false
},
/** 排序列,指定要排序的列,使用方式:列名=desc|asc */
sorter: {
type: String,
default: ''
},
width: {
type: Number,
default: 1200,
required: false
},
placeholder: {
type: String,
default: '请选择',
required: false
},
value: {
type: String,
required: false
},
triggerChange: {
type: Boolean,
required: false,
default: false
},
disabled: {
type: Boolean,
required: false,
default: false
},
multi: {
type: Boolean,
required: false,
default: false
},
//popup动态参数 支持系统变量语法
param: {
type: Object,
required: false,
default: () => {
|
|
90
91
|
}
},
|
|
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
spliter: {
type: String,
required: false,
default: ','
},
/** 分组ID,用于将多个popup的请求合并到一起,不传不分组 */
groupId: String
},
data() {
return {
showText: '',
title: '',
avalid: true
}
},
computed: {
uniqGroupId() {
if (this.groupId) {
let {groupId, code, field, orgFields, destFields} = this
return `${groupId}_${code}_${field}_${orgFields}_${destFields}`
}
}
},
watch: {
value: {
immediate: true,
handler: function (val) {
if (!val) {
this.showText = ''
} else {
this.showText = val.split(this.spliter).join(',')
|
|
124
125
|
}
}
|
|
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
}
},
created() {
},
mounted() {
if (!this.orgFields || !this.destFields || !this.code) {
this.$message.error('popup参数未正确配置!')
this.avalid = false
}
if (this.destFields.split(',').length != this.orgFields.split(',').length) {
this.$message.error('popup参数未正确配置,原始值和目标值数量不一致!')
this.avalid = false
}
},
methods: {
openModal() {
if (this.disabled === false) {
this.$refs.jPopupOnlReport.show()
}
|
|
145
|
},
|
|
146
147
148
149
|
handleEmpty() {
// 禁用时,不允许清空内容
if (this.disabled) {
return
|
|
150
|
}
|
|
151
152
153
154
155
156
157
158
159
160
161
162
163
|
this.showText = ''
let destFieldsArr = this.destFields.split(',')
if (destFieldsArr.length === 0) {
return
}
let res = {}
for (let i = 0; i < destFieldsArr.length; i++) {
res[destFieldsArr[i]] = ''
}
if (this.triggerChange) {
this.$emit('callback', res)
} else {
this.$emit('input', '', res)
|
|
164
165
|
}
},
|
|
166
167
168
169
170
171
|
callBack(rows) {
// update--begin--autor:lvdandan-----date:20200630------for:多选时未带回多个值------
let orgFieldsArr = this.orgFields.split(',')
let destFieldsArr = this.destFields.split(',')
let resetText = false
if (this.field && this.field.length > 0) {
|
|
172
|
this.showText = ''
|
|
173
174
175
176
177
178
179
180
181
182
183
|
resetText = true
}
let res = {}
if (orgFieldsArr.length > 0) {
for (let i = 0; i < orgFieldsArr.length; i++) {
let tempDestArr = []
for (let rw of rows) {
let val = rw[orgFieldsArr[i]]
// update--begin--autor:liusq-----date:20210713------for:处理val等于0的情况issues/I3ZL4T------
if (typeof val == 'undefined' || val == null || val.toString() == "") {
val = ""
|
|
184
|
}
|
|
185
186
|
// update--end--autor:liusq-----date:20210713------for:处理val等于0的情况issues/I3ZL4T------
tempDestArr.push(val)
|
|
187
|
}
|
|
188
189
190
191
192
193
194
195
|
res[destFieldsArr[i]] = tempDestArr.join(",")
}
if (resetText === true) {
let tempText = []
for (let rw of rows) {
let val = rw[orgFieldsArr[destFieldsArr.indexOf(this.field)]]
if (!val) {
val = ""
|
|
196
|
}
|
|
197
|
tempText.push(val)
|
|
198
|
}
|
|
199
|
this.showText = tempText.join(",")
|
|
200
|
}
|
|
201
202
203
204
205
206
207
208
209
210
211
|
// update--end--autor:lvdandan-----date:20200630------for:多选时未带回多个值------
}
if (this.triggerChange) {
//v-dec时即triggerChange为true时 将整个对象给form页面 让他自己setFieldsValue
this.$emit('callback', res)
} else {
//v-model时 需要传一个参数field 表示当前这个字段 从而根据这个字段的顺序找到原始值
// this.$emit("input",row[orgFieldsArr[destFieldsArr.indexOf(this.field)]])
let str = ''
if (this.showText) {
str = this.showText.split(',').join(this.spliter)
|
|
212
|
}
|
|
213
|
this.$emit('input', str, res)
|
|
214
215
216
|
}
}
}
|
|
217
|
}
|
|
218
219
|
</script>
<style scoped>
|
|
220
221
222
223
224
225
|
.components-input-demo-presuffix .anticon-close-circle {
cursor: pointer;
color: #ccc;
transition: color 0.3s;
font-size: 12px;
}
|
|
226
|
|
|
227
228
229
|
.components-input-demo-presuffix .anticon-close-circle:hover {
color: #f5222d;
}
|
|
230
|
|
|
231
232
233
|
.components-input-demo-presuffix .anticon-close-circle:active {
color: #666;
}
|
|
234
|
</style>
|