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