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

<template>
  <div class="device">
    <div class="device__head">
      <div class="device__head--title">
        {{ $t(titleI18n) }}<span>-{{ hasPlc? $t('trainRoom.plcGatewayOnline') : $t('trainRoom.plcGatewayOffline') }}</span>
      </div>
      <div class="device__head--add">
        <el-button v-if="userId == room.creatorId" icon="el-icon-plus" circle plain @click="handleAddDevice()" />
      </div>
    </div>
    <div class="device__container">
      <ul class="device__container--list">
        <li v-for="(node, index) in options" :key="index">
          <span>{{ realDeviceType[node.deviceType] }}</span>
          <i v-if="userId == room.creatorId" class="el-icon-close delete" @click="handleDelDevice(node, index)" />
          <div style="float: right; margin-right: 15px;">
            <el-select
              v-model="node.deviceCode"
              :placeholder="$t('global.choose')"
              size="mini"
              :disabled="userId != room.creatorId"
              @change="handleUpdDevice(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>
import { RealDeviceType } from '@/scripts/ConstDic';

export default {
    props: {
        titleI18n: {
            type: String,
            required: true
        },
        room: {
            type:Object,
            required: true
        },
        options: {
            type: Array,
            required: true
        },
        deviceType: {
            type: String,
            default: ''
        },
        deviceList: {
            type: Array,
            default() {
                return [];
            }
        },
        hasPlc: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            realDeviceType: RealDeviceType
        };
    },
    computed: {
        userId() {
            return this.$store.state.user ? this.$store.state.user.id : '';
        }
    },
    methods: {
        handleAddDevice() {
            this.$emit('addDevice', { deviceType: this.deviceType });
        },
        handleUpdDevice(node, index) {
            this.$emit('changeDevice', { deviceType: this.deviceType, device: node, deviceList: this.deviceList });
        },
        handleDelDevice(node, index) {
            this.$emit('delDevice', { deviceType: this.deviceType, device: node, deviceList: this.deviceList });
        }
    }
};
</script>

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

	.device {
		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;
				}

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