|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<template>
<div class="components-input-demo-presuffix">
<!---->
<a-input @click="openModal" placeholder="请点击选择部门" v-model="departNames" readOnly :disabled="disabled">
<a-icon slot="prefix" type="cluster" title="部门选择控件"/>
<a-icon v-if="departIds" slot="suffix" type="close-circle" @click="handleEmpty" title="清空"/>
</a-input>
<j-select-depart-modal
ref="innerDepartSelectModal"
:modal-width="modalWidth"
:multi="multi"
:rootOpened="rootOpened"
|
|
|
14
|
:depart-id="departIds"
|
|
|
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
@ok="handleOK"
@initComp="initComp"/>
</div>
</template>
<script>
import JSelectDepartModal from './modal/JSelectDepartModal'
export default {
name: 'JSelectDepart',
components:{
JSelectDepartModal
},
props:{
modalWidth:{
type:Number,
default:500,
required:false
},
multi:{
type:Boolean,
default:false,
required:false
},
rootOpened:{
type:Boolean,
default:true,
required:false
},
value:{
type:String,
required:false
},
disabled:{
type: Boolean,
required: false,
default: false
|
|
|
51
52
53
54
55
|
},
// 自定义返回字段，默认返回 id
customReturnField: {
type: String,
default: 'id'
|
|
|
56
57
58
59
60
|
},
backDepart: {
type: Boolean,
default: false,
required: false
|
|
|
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
}
},
data(){
return {
visible:false,
confirmLoading:false,
departNames:"",
departIds:''
}
},
mounted(){
this.departIds = this.value
},
watch:{
value(val){
|
|
|
76
77
|
//update-begin-author:wangshuai date:20201124 for:组件 JSelectDepart.vue不是默认id时新内容编辑问题 gitee I247X2
// if (this.customReturnField === 'id') {
|
|
|
78
|
this.departIds = val
|
|
|
79
80
|
// }
//update-end-author:wangshuai date:20201124 for:组件 JSelectDepart.vue不是默认id时新内容编辑问题 gitee I247X2
|
|
|
81
82
83
84
85
|
}
},
methods:{
initComp(departNames){
this.departNames = departNames
|
|
|
86
87
88
89
90
91
92
93
94
95
96
97
|
//update-begin-author:lvdandan date:20200513 for:TESTA-438 部门选择组件自定义返回值，数据无法回填
//TODO 当返回字段为部门名称时会有问题,因为部门名称不唯一
//返回字段不为id时，根据返回字段获取id
if(this.customReturnField !== 'id' && this.value){
const dataList = this.$refs.innerDepartSelectModal.dataList;
console.log('this.value',this.value)
this.departIds = this.value.split(',').map(item => {
const data = dataList.filter(d=>d[this.customReturnField] === item)
return data.length > 0 ? data[0].id : ''
}).join(',')
}
//update-end-author:lvdandan date:20200513 for:TESTA-438 部门选择组件自定义返回值，数据无法回填
|
|
|
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
|
this.backDeparInfo()
},
//返回选中的部门信息
backDeparInfo(){
if(this.backDepart===true){
if(this.departIds && this.departIds.length>0){
let arr1 = this.departIds.split(',')
let arr2 = this.departNames.split(',')
let info = []
for(let i=0;i<arr1.length;i++){
info.push({
value: arr1[i],
text: arr2[i]
})
}
this.$emit('back', info)
}
}
|
|
|
116
117
118
119
|
},
openModal(){
this.$refs.innerDepartSelectModal.show()
},
|
|
|
120
121
122
|
handleOK(rows, idstr) {
let value = ''
if (!rows && rows.length <= 0) {
|
|
|
123
|
this.departNames = ''
|
|
|
124
125
126
127
128
|
this.departIds = ''
} else {
value = rows.map(row => row[this.customReturnField]).join(',')
this.departNames = rows.map(row => row['departName']).join(',')
this.departIds = idstr
|
|
|
129
|
}
|
|
|
130
|
this.$emit("change", value)
|
|
|
131
132
133
134
135
136
137
|
},
getDepartNames(){
return this.departNames
},
handleEmpty(){
this.handleOK('')
}
|
|
|
138
139
140
141
|
},
model: {
prop: 'value',
event: 'change'
|
|
|
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
}
}
</script>
<style scoped>
.components-input-demo-presuffix .anticon-close-circle {
cursor: pointer;
color: #ccc;
transition: color 0.3s;
font-size: 12px;
}
.components-input-demo-presuffix .anticon-close-circle:hover {
color: #f5222d;
}
.components-input-demo-presuffix .anticon-close-circle:active {
color: #666;
}
</style>
|
