rt-sim-training-client/src/views/trainRoom/e-role.vue

<template>
  <div class="role">
    <div class="role__head">
      <div class="role__head--title">
        {{ $t(titleI18n) }}
      </div>
      <div class="role__head--add">
        <el-button v-if="userId == room.creatorId" icon="el-icon-plus" circle plain @click="handleAddUser()" />
      </div>
    </div>
    <div class="role__container">
      <ul class="role__container--list">
        <li v-for="(node, index) in options" :key="index">
          <span>{{ node.nickName }}</span>
          <i v-if="userId == room.creatorId" class="el-icon-close delete" @click="handleDelUser(node, index)" />
          <div v-if="hasDevice" style="float: right; margin-right: 15px;">
            <el-cascader
              v-if="roleType == 'IBP'"
              v-model="node.deviceCode"
              size="mini"
              :placeholder="$t('global.choose')"
              :disabled="isDisable"
              :options="deviceList"
              @change="handleUpdUser(node, index)"
            />
            <el-select
              v-if="roleType == 'Attendant'"
              v-model="node.deviceCode"
              :placeholder="$t('global.choose')"
              size="mini"
              :disabled="isDisable"
              @change="handleUpdUser(node, index)"
            >
              <el-option
                v-for="item in deviceList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
                :disabled="item.disabled"
                style="margin-left: 10px"
              />
            </el-select>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

export default {
    props: {
        titleI18n: {
            type: String,
            required: true
        },
        room: {
            type:Object,
            required: true
        },
        options: {
            type: Array,
            required: true
        },
        roleType: {
            type: String,
            default: ''
        },
        deviceList: {
            type: Array,
            default() {
                return [];
            }
        }
    },
    data() {
        return {
        };
    },
    computed: {
        hasDevice() {
            return ['Attendant', 'IBP'].includes(this.roleType);
        },
        isDisable() {
            return this.userId != this.room.creatorId;
        },
        userId() {
            return this.$store.state.user ? this.$store.state.user.id : '';
        }
    },
    methods: {
        handleAddUser() {
            this.$emit('addUser', { roleType: this.roleType });
        },
        handleUpdUser(node, index) {
            this.$emit('changeUser', { roleType: this.roleType, user: node, deviceList: this.deviceList });
        },
        handleDelUser(node, index) {
            this.$emit('delUser', { roleType: this.roleType, user: node, deviceList: this.deviceList });
        }
    }
};
</script>

<style scoped lang="scss">
    ul,
    li {
        list-style: none;
        padding: 0;
        margin: 0;
    }

	.role {
		border: 1px solid #ccc;
		height: 200px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;

		&__head {
			border-bottom: 1px solid #ccc;
			background: #f0f0f0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 3px;
			&--title {
				font-size: 14px;
				font-weight: bold;
        margin-left:10px;
			}

			&--add {
        margin-right:2px;
				/deep/ .el-button.is-circle {
					padding: 5px;
				}
			}
		}

		&__container {
			flex-grow: 1;
			&--list {
				li {
					height: 30px;
					line-height: 30px;
					padding-left: 10px;
					display: flow-root;

					&:hover {
						background: #D6E0F2;
					}
				}

				.delete {
					float: right;
					margin-right: 10px;
					margin-top: 7px;
					cursor: pointer;
				}
			}
		}
	}
</style>