DepartSelect.vue
4.23 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
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
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
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<template>
<a-modal
:title="currTitle"
:width="450"
:visible="visible"
:closable="false"
:maskClosable="closable">
<template slot="footer">
<a-button v-if="closable" @click="close">关闭</a-button>
<a-button type="primary" @click="departOk">确认</a-button>
</template>
<a-form>
<a-form-item
:labelCol="{span:4}"
:wrapperCol="{span:20}"
style="margin-bottom:10px"
:validate-status="validate_status">
<a-tooltip placement="topLeft" >
<template slot="title">
<span>您隶属于多部门，请选择当前所在部门</span>
</template>
<a-avatar style="backgroundColor:#87d068" icon="gold" />
</a-tooltip>
<a-select v-model="departSelected" :class="{'valid-error':validate_status=='error'}" placeholder="请选择登录部门" style="margin-left:10px;width: 80%">
<a-icon slot="suffixIcon" type="gold" />
<a-select-option
v-for="d in departList"
:key="d.id"
:value="d.orgCode">
{{ d.departName }}
</a-select-option>
</a-select>
</a-form-item>
</a-form>
</a-modal>
</template>
<script>
import { getAction,putAction } from '@/api/manage'
import Vue from 'vue'
import store from '@/store/'
import { USER_INFO } from "@/store/mutation-types"
export default {
name: 'DepartSelect',
props:{
title:{
type:String,
default:"部门选择",
required:false
},
closable:{
type:Boolean,
default:false,
required:false
},
username:{
type:String,
default:"",
required:false
}
},
watch:{
username(val){
if(val){
this.loadDepartList()
}
}
},
data(){
return {
currTitle:this.title,
visible:false,
departList:[],
departSelected:"",
validate_status:"",
currDepartName:"",
}
},
created(){
//this.loadDepartList()
},
methods:{
loadDepartList(){
return new Promise(resolve => {
let url = "/sys/user/getCurrentUserDeparts"
this.currDepartName=''
getAction(url).then(res=>{
if(res.success){
let departs = res.result.list
let orgCode = res.result.orgCode
if(departs && departs.length>0){
for(let i of departs){
if(i.orgCode == orgCode){
this.currDepartName = i.departName
break
}
}
}
this.departSelected = orgCode
this.departList = departs
if(this.currDepartName){
this.currTitle ="部门切换（当前部门 : "+this.currDepartName+"）"
}
}
resolve()
})
})
},
close(){
this.departClear()
},
departOk(){
if(!this.departSelected){
this.validate_status='error'
return false
}
let obj = {
orgCode:this.departSelected,
username:this.username
}
putAction("/sys/selectDepart",obj).then(res=>{
if(res.success){
const userInfo = res.result.userInfo;
Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000);
store.commit('SET_INFO', userInfo);
//console.log("---切换组织机构---userInfo-------",store.getters.userInfo.orgCode);
this.departClear()
}
})
},
show(){
//如果组件传值username此处就不用loadDepartList了
this.loadDepartList().then(()=>{
this.visible=true
if(!this.departList || this.departList.length<=0){
this.$message.warning("您尚未设置部门信息!")
this.departClear()
}
})
},
departClear(){
this.departList=[]
this.departSelected=""
this.visible=false
this.validate_status=''
this.currDepartName=""
},
}
}
</script>
<style scoped>
.valid-error .ant-select-selection__placeholder{
color: #f5222d;
}
</style>