<template>
|
<toolbar class="toolbar">
|
<template>
|
<toolbar-button command="undo" text="撤销"/>
|
<toolbar-button command="redo" text="重做"/>
|
<!-- <toolbar-button command="copy" text="复制"/>-->
|
<!-- <toolbar-button command="paste" text="粘贴"/>-->
|
<div class="split"></div>
|
</template>
|
<toolbar-button command="zoomIn" icon="zoom-in" text="放大"/>
|
<toolbar-button command="zoomOut" icon="zoom-out" text="缩小"/>
|
<toolbar-button command="autoZoom" icon="fit" text="自适应"/>
|
<toolbar-button command="resetZoom" icon="actual-size" text="实际尺寸"/>
|
<template>
|
<div class="split"></div>
|
<!-- <toolbar-button command="toBack" icon="to-back" text="向下一层" /> -->
|
<!-- <toolbar-button command="toFront" icon="to-front" text="向上一层" /> -->
|
<!-- <toolbar-button command="addGroup" icon="group" text="编组" /> -->
|
<!-- <toolbar-button command="unGroup" icon="ungroup" text="取消编组" /> -->
|
<toolbar-button v-show="disabledBtn" command="selectAll" icon="select-all" text="全选"/>
|
<toolbar-button v-shof="disabledBtn" command="multiSelect" icon="select" text="框选"/>
|
<div v-if="disabledBtn" class="split"></div>
|
<toolbar-button v-show="disabledBtn" command="delete" text="删除"/>
|
<toolbar-button v-show="disabledBtn" command="clear" icon="clear" text="清空画布"/>
|
</template>
|
<template>
|
<div class="split"></div>
|
<toolbar-button command="downloadImage" icon="image" text="下载图像"/>
|
</template>
|
<!-- <el-button>{{this.$store}}</el-button>-->
|
<el-button :disabled="!disabledBtn" icon="el-icon-check" plain size="small" type="success"
|
@click="saveClickHandler">保存
|
</el-button>
|
<el-button :disabled="!disabledBtn" icon="el-icon-close" plain size="small" type="danger"
|
@click="removeClickHandler">取消
|
</el-button>
|
<!-- right toolbar button -->
|
<!-- <div class="pull-right">-->
|
<!-- <toolbar-button-->
|
<!-- command="generateData"-->
|
<!-- icon="save"-->
|
<!-- text="生成数据"-->
|
<!-- label="保存数据"-->
|
<!-- />-->
|
<!-- </div>-->
|
</toolbar>
|
</template>
|
|
<script>
|
import {Toolbar} from 'vue-flowchart-editor'
|
import ToolbarButton from './ToolbarButton'
|
|
export default {
|
name: 'FlowToolbar',
|
|
components: {
|
Toolbar,
|
ToolbarButton,
|
},
|
|
props: ['chartData', 'toggleReadOnly'],
|
created() {
|
|
},
|
computed: {
|
disabledBtn() {
|
return this.$store.state.flow.methodBtn;
|
}
|
},
|
|
methods: {
|
// 取消按钮点击
|
removeClickHandler() {
|
this.$confirm("您确认执行取消操作?", "提示", {
|
confirmButtonText: "确定",
|
cancelButtonText: "取消",
|
type: "warning",
|
}).then(() => {
|
this.$store.dispatch('updateMethodBtn', false);
|
this.$store.dispatch('typeChange', '');
|
console.log(this.$s)
|
// this.$emit('reset-tree'); // 触发父组件重置
|
}).catch(() => {
|
this.$message({
|
type: 'info',
|
message: '已取消'
|
});
|
});
|
},
|
|
// 保存按钮点击事件
|
saveClickHandler(){
|
this.$emit('handler-save');
|
},
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.toolbar {
|
display: flex;
|
align-items: center;
|
height: 27px;
|
|
.split {
|
width: 10px;
|
height: 100%;
|
border-right: 1px solid #eee;
|
margin-right: 10px;
|
}
|
|
.pull-right {
|
display: flex;
|
align-items: center;
|
margin-left: auto;
|
}
|
|
.command {
|
margin-right: 15px;
|
display: flex;
|
color: #333;
|
|
i {
|
display: block;
|
width: 27px;
|
height: 27px;
|
margin: 0 6px;
|
padding-top: 10px;
|
text-align: center;
|
border: 1px solid #fff;
|
cursor: pointer;
|
}
|
|
span {
|
display: block;
|
font-size: 12px;
|
padding-top: 10px;
|
margin-left: -6px;
|
padding-right: 6px;
|
line-height: 20px;
|
cursor: pointer;
|
}
|
|
&:hover {
|
color: #1890ff;
|
}
|
}
|
|
.disable {
|
color: rgba(0, 0, 0, 0.25);
|
|
i {
|
cursor: not-allowed;
|
}
|
|
span {
|
cursor: not-allowed;
|
}
|
|
&:hover {
|
color: rgba(0, 0, 0, 0.25);
|
}
|
}
|
}
|
</style>
|