|
|
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
61
62
63
64
65
66
67
68
69
70
|
}
},
data(){
return {
visible:false,
confirmLoading:false,
departNames:"",
departIds:''
}
},
mounted(){
this.departIds = this.value
},
watch:{
value(val){
|
|
|
71
72
73
|
if (this.customReturnField === 'id') {
this.departIds = val
}
|
|
|
74
75
76
77
78
|
}
},
methods:{
initComp(departNames){
this.departNames = departNames
|
|
|
79
80
81
82
83
84
85
86
87
88
89
90
|
//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 部门选择组件自定义返回值，数据无法回填
|
|
|
91
92
93
94
|
},
openModal(){
this.$refs.innerDepartSelectModal.show()
},
|
|
|
95
96
97
|
handleOK(rows, idstr) {
let value = ''
if (!rows && rows.length <= 0) {
|
|
|
98
|
this.departNames = ''
|
|
|
99
100
101
102
103
|
this.departIds = ''
} else {
value = rows.map(row => row[this.customReturnField]).join(',')
this.departNames = rows.map(row => row['departName']).join(',')
this.departIds = idstr
|
|
|
104
|
}
|
|
|
105
|
this.$emit("change", value)
|
|
|
106
107
108
109
110
111
112
|
},
getDepartNames(){
return this.departNames
},
handleEmpty(){
this.handleOK('')
}
|
|
|
113
114
115
116
|
},
model: {
prop: 'value',
event: 'change'
|
|
|
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
|
}
}
</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>
|
