164 lines
3.8 KiB
Vue
164 lines
3.8 KiB
Vue
<template>
|
|
<el-dialog v-dialogDrag class="person" :title="$t(titleI18n)" :visible.sync="show" width="20%" :z-index="2000" :modal="true" :before-close="cancel" :close-on-click-modal="false">
|
|
<el-input v-model="filterText" :placeholder="this.$t('global.enterNameToFilter')" clearable />
|
|
<ul class="person__container">
|
|
<li v-for="(item,index) in filterList" :key="index" class="person__container--li">
|
|
<input
|
|
v-model="item.select"
|
|
class="checkbox"
|
|
type="checkbox"
|
|
>
|
|
<span>{{ item.node.nickName }}</span>
|
|
</li>
|
|
</ul>
|
|
<span slot="footer" class="person__footer">
|
|
<el-button @click="cancel">{{ $t('global.cancel') }}</el-button>
|
|
<el-button type="primary" @click="commit">{{ $t('global.confirm') }}</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
audienceList: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
roleType: '',
|
|
filterText: ''
|
|
};
|
|
},
|
|
computed: {
|
|
show() {
|
|
return this.visible;
|
|
},
|
|
props() {
|
|
return { label: 'name' };
|
|
},
|
|
personList() {
|
|
return this.audienceList.map(e => { return { select: false, node: e }; });
|
|
},
|
|
filterList() {
|
|
return this.personList.filter(e => e.node.nickName.includes(this.filterText));
|
|
},
|
|
titleI18n() {
|
|
return {
|
|
'Dispatcher': 'trainRoom.increaseDispatchers',
|
|
'Attendant': 'trainRoom.increaseStationAttendant',
|
|
'Instructor': 'trainRoom.increaseTeacher',
|
|
'Repair': 'trainRoom.increaseUniversalAccount',
|
|
'Driver': 'trainRoom.driver',
|
|
'IBP': 'trainRoom.increaseIbp'
|
|
}[this.roleType];
|
|
}
|
|
},
|
|
methods: {
|
|
doShow(roleType) {
|
|
this.roleType = roleType;
|
|
this.visible = true;
|
|
},
|
|
doClose() {
|
|
this.visible = false;
|
|
},
|
|
commit() {
|
|
const userList = this.personList.filter(e => { return e.select; }).map(e=> { return e.node; });
|
|
this.$emit('dispatch', {roleType: this.roleType, userList});
|
|
this.visible = false;
|
|
},
|
|
cancel() {
|
|
this.doClose();
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
ul,
|
|
li {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 2px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: #c7c7c7;
|
|
}
|
|
|
|
/deep/ .el-dialog__body {
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.person {
|
|
&__container {
|
|
max-height: 270px;
|
|
overflow-y: scroll;
|
|
width: 100%;
|
|
|
|
&--li {
|
|
height: 30px;
|
|
line-height: 30px;
|
|
|
|
.checkbox {
|
|
margin-right: 5px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
width: 14px;
|
|
height: 14px;
|
|
position: relative;
|
|
display: block;
|
|
margin-top: 9px;
|
|
float: left;
|
|
|
|
&.disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&.disabled:after {
|
|
background-color: #edf2fc;
|
|
border-color: #dcdfe6;
|
|
}
|
|
}
|
|
|
|
.checkbox:after {
|
|
position: absolute;
|
|
width: 14px;
|
|
height: 14px;
|
|
top: 0;
|
|
content: " ";
|
|
background-color: #fff;
|
|
color: #fff;
|
|
display: inline-block;
|
|
visibility: visible;
|
|
padding: 0px 3px;
|
|
border: 1px solid #dcdfe6;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.checkbox:checked:after {
|
|
content: "✓";
|
|
font-size: 12px;
|
|
width: 14px;
|
|
height: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: #409EFF;
|
|
border: 1px solid #409EFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|