155 lines
4.8 KiB
Vue
155 lines
4.8 KiB
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>
|