93 lines
2.3 KiB
Vue
93 lines
2.3 KiB
Vue
|
<template>
|
||
|
|
<!-- <el-dialog
|
||
|
|
title="修改步骤名称"
|
||
|
|
:visible.sync="dialogShow"
|
||
|
|
top="50px"
|
||
|
|
width="350px"
|
||
|
|
:before-do-close="roleDoClose"
|
||
|
|
:close-on-click-modal="false"
|
||
|
|
>
|
||
|
|
<div>
|
||
|
|
<el-input v-model="stepDescription" type="text" :style="{width: '80%'}" :maxlength="80" />
|
||
|
|
</div>
|
||
|
|
<span slot="footer" class="dialog-footer">
|
||
|
|
<el-button @click="roleDoClose">{{ $t('global.cancel') }}</el-button>
|
||
|
|
<el-button type="primary" @click="confirm">{{ $t('global.confirm') }}</el-button>
|
||
|
|
</span>
|
||
|
|
</el-dialog> -->
|
||
|
|
<div v-if="dialogShow" class="StepDescription">
|
||
|
|
<div class="StepDescriptionIn">
|
||
|
|
<div class="StepDescriptionInName">修改步骤名称</div>
|
||
|
|
<div class="StepDescriptionInInput">
|
||
|
|
<el-input v-model="stepDescription" type="text" :style="{width: '80%'}" :maxlength="80" />
|
||
|
|
</div>
|
||
|
|
<div class="StepDescription-footer">
|
||
|
|
<el-button @click="roleDoClose">{{ $t('global.cancel') }}</el-button>
|
||
|
|
<el-button type="primary" @click="confirm">{{ $t('global.confirm') }}</el-button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name:'StepDescription',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
dialogShow:false,
|
||
|
|
stepDescription:''
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
roleDoClose() {
|
||
|
|
this.dialogShow = false;
|
||
|
|
this.$emit('cancleDescription');
|
||
|
|
},
|
||
|
|
confirm() {
|
||
|
|
if (this.stepDescription.trim().length > 0) {
|
||
|
|
this.dialogShow = false;
|
||
|
|
this.$emit('submitDescription', this.stepDescription);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
doShow() {
|
||
|
|
this.stepDescription = '';
|
||
|
|
this.dialogShow = true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss">
|
||
|
|
.StepDescription{
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
left: 0;
|
||
|
|
top: 0;
|
||
|
|
background: rgba(0,0,0,0.7);
|
||
|
|
z-index: 2;
|
||
|
|
}
|
||
|
|
.StepDescriptionIn{
|
||
|
|
width: 350px;
|
||
|
|
background: #fff;
|
||
|
|
left: 50%;
|
||
|
|
position: absolute;
|
||
|
|
transform: translate(-50%,-50%);
|
||
|
|
top: 40%;
|
||
|
|
height: 240px;
|
||
|
|
}
|
||
|
|
.StepDescription-footer{
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.StepDescriptionInName{
|
||
|
|
font-size: 17px;
|
||
|
|
margin-top: 16px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.StepDescriptionInInput{
|
||
|
|
margin-top: 30px;
|
||
|
|
margin-bottom: 40px;
|
||
|
|
text-align: center;
|
||
|
|
padding: 0px 20px;
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|