rt-sim-training-client/src/views/trainRoom/add-person.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];
        }
    },
    mounted() {
    },
    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: 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>