<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>