rt-sim-training-client/src/views/trainingManage/editOperate.vue

<template>
  <div>
    <div class="editContentTab">
      <div v-if="dialogVisible" class="editContentTabLable" @click="minisize">
        <span class="titleStyle">{{ $t('trainingManage.editTagTitle') }}</span>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="500" :modal="false" :close-on-click-modal="false" :show-close="false" center style="margin-left: 200px">
      <el-row style="font-size: 16px;padding: 5px;">
        <el-col :span="4">步骤描述：</el-col>
        <el-col :span="20">{{ stepDetail.description }}</el-col>
      </el-row>
      <el-row style="font-size: 16px;padding: 5px;overflow: hidden;word-wrap: break-word;">
        <el-col :span="4">操作详情：</el-col>
        <el-col :span="20">
          <!--<div v-for="item in stepDetail.operations" :key="item">
            <div>{{ item }}</div>
          </div>-->
          <template v-for="(item, index) in stepDetail.operations">
            <div :key="index">
              <el-tag :type="tagIndex === index? 'success':''" closable @close="deleteOperation(index)" @click="changeTagIndex(index)">
                {{ covertString(item) }}
              </el-tag>
            </div>
          </template>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="success" @click="backStepList">返回步骤列表</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
    name: 'EditOperate',
    data() {
        return {
            title: '编辑操作',
            dialogVisible: false,
            dialogWidth: 500,
            dataIndex: 0,
            tagIndex: 0,
            stepDetail: {
                id: '',
                description: '',
                operations: []
            }
        };
    },
    watch: {
        '$store.state.trainingNew.trainingOperate': function (val) {
            if (val && this.dialogVisible) {
                const data = {
                    deviceCode: val.code || '',
                    userOperationType: val.userOperationType || '',
                    domId: val.operation || '',
                    operationType: val.cmdType ? val.cmdType.value : '',
                    params: val.params || {},
                    t: 'C'
                };
                this.stepDetail.operations.push(data);
            }
        }
    },
    methods: {
        doShow(data) {
            if (data) {
                this.stepDetail.id = data.data.id;
                this.stepDetail.description = data.data.description;
                this.stepDetail.operations = data.data.operations || [];
                this.dataIndex = data.index;
                this.dialogVisible = true;
            }
        },
        minisize() {
            this.dialogVisible = true;
        },
        deleteOperation(index) {
            if (this.tagIndex === index) {
                this.tagIndex = 0;
            }
            this.stepDetail.operations.splice(index, 1);
        },
        changeTagIndex(index) {
            this.tagIndex = index;
        },
        backStepList() {
            const tipPosition = {};
            if (this.stepDetail.operations[this.tagIndex]) {
                tipPosition.domId = this.stepDetail.operations[this.tagIndex].domId;
                tipPosition.deviceCode = this.stepDetail.operations[this.tagIndex].deviceCode;
                tipPosition.operateIndex = this.tagIndex;
            }
            this.$emit('backStepList', { index: this.dataIndex, stepDetail: this.stepDetail, tipPosition: tipPosition });
            this.dialogVisible = false;
            this.stepDetail = {
                id: '',
                description: '',
                operations: []
            };
            this.dataIndex = 0;
            this.tagIndex = 0;
        },
        covertString(data) {
            const userOperationTypeMap = {
                rightClick: '右键点击',
                leftClick: '左键点击',
                chooseValue: '选择',
                fillValue: '填写'
            };
            if (userOperationTypeMap[data.userOperationType]) {
                return userOperationTypeMap[data.userOperationType] + data.domId;
            } else {
                return data.domId;
            }
        }
    }
};
</script>

<style scoped>
/deep/ .el-dialog__wrapper {
	width: 1px;
	height: 1px;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	overflow: visible !important;
}
/deep/ .el-dialog--center{
	width: 600px;
}
.editContentTab{
	position: absolute;
	z-index: 10;
	right: 12px;
	top: calc(45% + 100px);
}
.editContentTabLable{
	position: absolute;
	background: #fff;
	border-radius: 5px 0 0 5px ;
	padding: 5px 0;
	width: 23px;
	text-align: center;
	left: 50%;
	transform: translateX(-50%);
	cursor: pointer;
	top:-28px;
}
</style>