rt-sim-training-client/src/views/jointTraining/menuDraft/chooseRole.vue
2019-11-14 13:59:33 +08:00

95 lines
2.2 KiB
Vue

<template>
<el-dialog
v-dialogDrag
:title="title"
:visible.sync="show"
width="400px"
:before-close="doClose"
:z-index="2000"
:modal="false"
:close-on-click-modal="false"
append-to-body
>
<el-input v-model="filterText" placeholder="输入名称进行过滤" clearable />
<ul v-if="filterList.length" class="listBox">
<li v-for="item in filterList" :key="item" class="listLi">
<el-radio v-model="selected" :label="item"><span>{{ item.name }}</span></el-radio>
</li>
</ul>
<span v-else class="tipLable"> {{ $t('global.temporarilyNoData') }} </span>
<span slot="footer" class="dialog-footer">
<el-button @click="doClose">{{ $t('global.cancel') }}</el-button>
<el-button type="primary" :loading="loading" @click="commit">{{ $t('global.confirm') }}</el-button>
</span>
</el-dialog>
</template>
<script>
export default {
name: 'CmdNotice',
data() {
return {
dialogShow: false,
title: '',
props: {
label: 'name'
},
sourceList: [],
filterText: '',
selected: '',
loading: false
};
},
computed: {
show() {
return this.dialogShow;
},
filterList() {
return this.sourceList.filter(p => p.name.indexOf(this.filterText) !== -1);
}
},
methods: {
doShow(obj) {
this.dialogShow = true;
this.title = obj.title;
this.sourceList = obj.list;
this.selected = '';
},
doClose() {
this.dialogShow = false;
},
commit() {
this.$emit('setDriver', this.selected);
this.doClose();
}
}
};
</script>
<style scoped lang="scss">
/deep/ {
.el-dialog__body {
padding: 0px 20px;
}
}
.listBox {
margin: 0px;
max-height: 270px;
overflow-y: auto;
padding-inline-start: 0px;
width: 100%;
.listLi {
list-style: none;
height: 30px;
line-height: 30px;
}
}
.tipLable {
line-height: 33px;
}
</style>