81 lines
2.0 KiB
Vue
81 lines
2.0 KiB
Vue
<template>
|
|
<div style="max-width: 350px">
|
|
<template v-if="mode === 'DESIGN'">
|
|
<el-button disabled icon="iconfont icon-map-site" type="primary" size="mini" round> 选择部门</el-button>
|
|
<span class="placeholder"> {{placeholder}}</span>
|
|
</template>
|
|
<template v-else>
|
|
<template v-if="perm === 'E'">
|
|
<el-button icon="iconfont icon-map-site" type="primary" size="mini" round @click="selectDept"> 选择部门</el-button>
|
|
<org-picker type="dept" :multiple="multiple" ref="deptPicker" :v-model="select" :selected="_value" @ok="selected"/>
|
|
<span class="placeholder"> {{placeholder}}</span>
|
|
<div style="margin-top: 5px">
|
|
<el-tag size="mini" style="margin: 5px" closable v-for="(dept, i) in _value" :key="i" @close="delDept(i)">{{dept.label}}</el-tag>
|
|
</div>
|
|
</template>
|
|
<template v-else-if="perm === 'R'">
|
|
<div v-for="(dept, i) in _value" :key="i">
|
|
{{dept.label}}
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import componentMinxins from '../ComponentMinxins'
|
|
import OrgPicker from "@/components/common/DeptPicker";
|
|
|
|
export default {
|
|
mixins: [componentMinxins],
|
|
name: "DeptPicker",
|
|
components: {OrgPicker},
|
|
props: {
|
|
value:{
|
|
type: Array,
|
|
default: () => {
|
|
return []
|
|
}
|
|
},
|
|
perm: {
|
|
type: String,
|
|
default: 'E'
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '请选择部门'
|
|
},
|
|
multiple:{
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
showOrgSelect: false
|
|
}
|
|
},
|
|
methods: {
|
|
//弹出部门选择器,选择部门
|
|
selectDept() {
|
|
this.$refs.deptPicker.showDeptPicker()
|
|
},
|
|
selected(select){
|
|
// this.showOrgSelect = false
|
|
this._value = select
|
|
},
|
|
delDept(i){
|
|
this._value.splice(i, 1)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.placeholder{
|
|
margin-left: 10px;
|
|
color: #adabab;
|
|
font-size: smaller;
|
|
}
|
|
</style>
|