You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
3.1 KiB
127 lines
3.1 KiB
<!-- 选择部门 -->
|
|
|
|
<template>
|
|
<div>
|
|
<el-input v-model="selectedObj.name" :placeholder="$t('form.placeholderSelect')" readonly @click.native="showSelectDeptUser" />
|
|
<el-dialog :title="$t('form.selectMember')" :visible.sync="open" width="500px" append-to-body>
|
|
<el-input
|
|
:placeholder="$t('form.placeholderInput')"
|
|
v-model="filterText"
|
|
style="margin-bottom:10px">
|
|
</el-input>
|
|
|
|
<el-tree
|
|
class="filter-tree"
|
|
:data="list"
|
|
:props="defaultProps"
|
|
:default-expand-all="selected==''"
|
|
:default-expanded-keys="selected=='' ? []:[selected]"
|
|
:filter-node-method="filterNode"
|
|
ref="tree"
|
|
@node-click="handleChange"
|
|
node-key="id"
|
|
>
|
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
|
<el-radio :ref="'radio'+data.id" v-if="data.type===7" v-model="selected" :label="data.id">{{ data.name }}</el-radio>
|
|
<span v-else>{{ data.name }}</span>
|
|
</span>
|
|
</el-tree>
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button @click="open=false">{{$t('form.cancel')}}</el-button>
|
|
<el-button type="primary" @click="save">{{$t('form.saveConfirm')}}</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { deptUserList } from "@/api/system/user"
|
|
export default {
|
|
name: "SelectDeptUser",
|
|
components: {},
|
|
props: {
|
|
value: {
|
|
type: [Number, String , Array],
|
|
default: ''
|
|
},
|
|
},
|
|
watch: {
|
|
value: {
|
|
immediate: true,
|
|
handler(v) {
|
|
this.selected = v ?((v+'').indexOf('u_')>-1? v:('u_'+v)):''
|
|
debugger
|
|
this.selectedObj = {
|
|
id:this.selected,
|
|
name:this.getName(this.selected)
|
|
}
|
|
}
|
|
},
|
|
filterText(val) {
|
|
this.$refs.tree.filter(val);
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
open:false,
|
|
|
|
selected: '',
|
|
selectedObj :{
|
|
id:'',
|
|
name:''
|
|
},
|
|
|
|
listData: [],
|
|
list: [],
|
|
filterText:'',
|
|
defaultProps: {
|
|
children: 'children',
|
|
label: 'name'
|
|
}
|
|
};
|
|
},
|
|
mounted() {
|
|
this.getList()
|
|
},
|
|
methods: {
|
|
filterNode(value, data) {
|
|
if (!value) return true;
|
|
return data.name.indexOf(value) !== -1;
|
|
},
|
|
showSelectDeptUser(){
|
|
this.open = true
|
|
this.filterText = ''
|
|
},
|
|
getList() {
|
|
this.listData = []
|
|
this.list = []
|
|
deptUserList().then(response => {
|
|
this.listData = response.data
|
|
this.list = this.handleTree(response.data, "id")
|
|
})
|
|
},
|
|
handleChange(data) {
|
|
if(data && data.type===7){
|
|
this.selected = data.id
|
|
this.selectedObj = data
|
|
}
|
|
},
|
|
getName(id){
|
|
debugger
|
|
let name = ''
|
|
let arr = _.filter(this.listData, (o)=> { return o.id===id })
|
|
if(arr && arr.length>0){
|
|
name = arr[0].name
|
|
}
|
|
return name
|
|
},
|
|
save(){
|
|
this.$emit('change', this.selectedObj)
|
|
this.$emit('input', this.selectedObj && this.selectedObj.id?this.selectedObj.id.replace('u_',''):'')
|
|
debugger
|
|
this.open = false
|
|
},
|
|
}
|
|
};
|
|
</script>
|