129 lines
2.9 KiB
Vue
129 lines
2.9 KiB
Vue
<template>
|
|
<div>
|
|
<div class="user-organ-wrap">
|
|
<!-- <div @click="selectClick">-->
|
|
<!-- <div v-for="item in selectValue" :key="item.id">{{item.label}}</div>-->
|
|
<!-- </div>-->
|
|
<a-select
|
|
class="user-organ-select"
|
|
mode="multiple"
|
|
:open="false"
|
|
:showSearch="false"
|
|
:filterOption="false"
|
|
:placeholder="$t('pleaseSelect')"
|
|
:maxTagCount="1"
|
|
:value="checkedValue"
|
|
@click="selectClick"
|
|
>
|
|
<a-select-option v-for="(item) in selectOptions" :key="item.key">
|
|
{{ item.title }}
|
|
</a-select-option>
|
|
</a-select>
|
|
<a-button type="primary" class="button-box" @click="selectClick">
|
|
{{this.$t('userOrOrganSelect.select')}}
|
|
</a-button>
|
|
</div>
|
|
<user-organ-select-modal v-bind="$attrs" ref="selectModal" :selectType="selectType" @change="selectChange"></user-organ-select-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import UserOrganSelectModal from './UserOrganSelectModal'
|
|
|
|
export default {
|
|
name: 'UserOrOrganSelection',
|
|
components: { UserOrganSelectModal },
|
|
props: {
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
selectType: {
|
|
type: String,
|
|
default: 'all'
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
value: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
organ: [],
|
|
user: []
|
|
}
|
|
}
|
|
}
|
|
},
|
|
mounted () {
|
|
this.selectOptions = this.value.organ.concat(this.value.user)
|
|
this.checkedValue = this.value.organ.concat(this.value.user).map(item => item.key)
|
|
},
|
|
data () {
|
|
return {
|
|
checkedValue: [],
|
|
selectOptions: [] // 下拉框数据，为了回显
|
|
}
|
|
},
|
|
methods: {
|
|
selectClick () {
|
|
this.$refs.selectModal.open()
|
|
},
|
|
selectChange (arrOne, arrTwo) {
|
|
console.log(arrOne, arrTwo)
|
|
if (this.selectType === 'all') {
|
|
this.selectOptions = arrOne.concat(arrTwo)
|
|
this.$emit('change', {
|
|
organ: arrOne,
|
|
user: arrTwo
|
|
})
|
|
} else {
|
|
this.selectOptions = arrOne
|
|
if (this.selectType === 'organ') {
|
|
this.$emit('change', {
|
|
organ: arrOne
|
|
})
|
|
} else {
|
|
this.$emit('change', {
|
|
user: arrOne
|
|
})
|
|
}
|
|
}
|
|
this.checkedValue = this.selectOptions.map(item => item.key)
|
|
}
|
|
},
|
|
model: {
|
|
prop: 'value',
|
|
event: 'change'
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.user-organ-wrap {
|
|
width: 100%;
|
|
position: relative;
|
|
.user-organ-select {
|
|
width: calc(100% - 70px);
|
|
/deep/ .ant-select-selection--multiple {
|
|
height: 38px;
|
|
|
|
.ant-select-selection__rendered > ul > li {
|
|
margin-top: 6px;
|
|
}
|
|
}
|
|
/deep/ .ant-select-selection__rendered {
|
|
line-height: 38px;
|
|
height: 38px;
|
|
}
|
|
}
|
|
.button-box {
|
|
height: 38px;
|
|
margin-left: 5px;
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
}
|
|
</style>
|