init
This commit is contained in:
clay
217
src/views/custom-query/topo/top/toolbar-edit.vue
Normal file
217
src/views/custom-query/topo/top/toolbar-edit.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<div class="toolbar">
|
||||
<div class="left">
|
||||
<!-- <el-checkbox class="edge-enabled" title="连线模式" @change="$parent.enableEdgeHandler"></el-checkbox>-->
|
||||
<!-- <dropdown-->
|
||||
<!-- class="edge-shape"-->
|
||||
<!-- :dropdown-items="edgeShapeList"-->
|
||||
<!-- @change="changeEdgeShapeHandler"-->
|
||||
<!-- >-->
|
||||
<!-- </dropdown>-->
|
||||
<el-button size="mini" @click="router.push('/custom/query/topo')">返回</el-button>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="graph-ops">
|
||||
<svg-icon name="undo" title="撤回" :class-name="disableUndo ? 'disabled-icon':'er-icon'"
|
||||
@handle="undoHandler(disableUndo)"/>
|
||||
<svg-icon name="redo" title="重做" :class-name="disableRedo ? 'disabled-icon':'er-icon'" @handle="redoHandler"/>
|
||||
<span class="separator"></span>
|
||||
<svg-icon name="copy" title="复制" :class-name="disableCopy ? 'disabled-icon':'er-icon'" @handle="copyHandler"/>
|
||||
<svg-icon name="paste" title="粘贴" :class-name="disablePaste ? 'disabled-icon':'er-icon'"
|
||||
@handle="pasteHandler"/>
|
||||
<svg-icon name="clear" title="删除" :class-name="disableDelete ? 'disabled-icon':'er-icon'"
|
||||
@handle="deleteHandler"/>
|
||||
<span class="separator"></span>
|
||||
<svg-icon name="zoom-in" title="放大" :class-name="'er-icon'" @handle="zoomInHandler"/>
|
||||
<svg-icon name="zoom-out" title="缩小" :class-name="'er-icon'" @handle="zoomOutHandler"/>
|
||||
<svg-icon name="fit" title="适应画布" :class-name="'er-icon'" @handle="autoZoomHandler"/>
|
||||
<svg-icon name="actual_size" title="实际尺寸" :class-name="'er-icon'" @handle="resetZoomHandler"/>
|
||||
<span class="separator"></span>
|
||||
<!--id="multi-select"-->
|
||||
<svg-icon name="selector" title="框选" id="multi-select" :class-name="'er-icon'" @handle="multiSelectHandler"/>
|
||||
|
||||
<!-- <div v-if="graphMode === 'edit'" class="iconfont zx">-->
|
||||
<!-- <dropdown-->
|
||||
<!-- class="edge-shape"-->
|
||||
<!-- :dropdown-items="edgeShapeList"-->
|
||||
<!-- @change="changeEdgeShapeHandler"-->
|
||||
<!-- >-->
|
||||
<!-- </dropdown>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<el-button size="mini" @click="autoLayout">自动布局</el-button>
|
||||
<!--<el-button size="mini" @click="circularLayoutHandler">环形布局</el-button>-->
|
||||
<!--<el-button size="mini" @click="radialLayoutHandler">辐射</el-button>-->
|
||||
<!--<el-button size="mini" @click="mdsLayoutHandler">MDS</el-button>-->
|
||||
<!--<el-button size="mini" @click="dagreLayoutHandler">层次</el-button>-->
|
||||
<!--<el-button size="mini" @click="autoLayoutHandler">自动（old）</el-button>-->
|
||||
<!-- todo 返回到预览模式 -->
|
||||
<el-button size="mini" @click="handlePreview('preview')">预览</el-button>
|
||||
<el-button size="mini" @click="saveDataHandler">保存</el-button>
|
||||
<el-button size="mini" @click="handleTopLine">上线</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SvgIcon from '@/components/svgIcon/index.vue'
|
||||
import Dropdown from './elements/dropdown.vue'
|
||||
import {defineProps} from "vue";
|
||||
import {useRouter} from "vue-router";
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const emit = defineEmits(["autoLayout", "handlePreview", "saveDataHandler",
|
||||
"undoHandler", "redoHandler", "copyHandler", "pasteHandler", "deleteHandler", "zoomInHandler",
|
||||
"zoomOutHandler", "autoZoomHandler", "resetZoomHandler", "multiSelectHandler"]);
|
||||
const props = defineProps({
|
||||
disableUndo: {
|
||||
type: String, //参数类型
|
||||
default: String, //默认值
|
||||
},
|
||||
disableRedo: {
|
||||
type: String, //参数类型
|
||||
default: String, //默认值
|
||||
},
|
||||
disableCopy: {
|
||||
type: String, //参数类型
|
||||
default: String, //默认值
|
||||
},
|
||||
disablePaste: {
|
||||
type: String, //参数类型
|
||||
default: String, //默认值
|
||||
},
|
||||
disableDelete: {
|
||||
type: String, //参数类型
|
||||
default: String, //默认值
|
||||
},
|
||||
graphMode: {
|
||||
type: String, //参数类型
|
||||
default: String, //默认值
|
||||
},
|
||||
edgeShapeList: {
|
||||
type: Array, //参数类型
|
||||
default: [], //默认值
|
||||
}
|
||||
})
|
||||
const autoLayout = () => {
|
||||
emit('autoLayout');
|
||||
}
|
||||
const handlePreview = (graphMode) => {
|
||||
emit('handlePreview', graphMode);
|
||||
}
|
||||
const saveDataHandler = () => {
|
||||
emit('saveDataHandler');
|
||||
}
|
||||
const handleTopLine = () => {
|
||||
emit('handleTopLine');
|
||||
}
|
||||
const undoHandler = (flag) => {
|
||||
if (flag) return
|
||||
emit('undoHandler');
|
||||
}
|
||||
const redoHandler = () => {
|
||||
emit('redoHandler');
|
||||
}
|
||||
const copyHandler = () => {
|
||||
emit('copyHandler');
|
||||
}
|
||||
const pasteHandler = () => {
|
||||
emit('pasteHandler');
|
||||
}
|
||||
const deleteHandler = () => {
|
||||
emit('deleteHandler');
|
||||
}
|
||||
const zoomInHandler = () => {
|
||||
emit('zoomInHandler');
|
||||
}
|
||||
const zoomOutHandler = () => {
|
||||
emit('zoomOutHandler');
|
||||
}
|
||||
const autoZoomHandler = () => {
|
||||
emit('autoZoomHandler');
|
||||
}
|
||||
const resetZoomHandler = () => {
|
||||
emit('resetZoomHandler');
|
||||
}
|
||||
const multiSelectHandler = () => {
|
||||
emit('multiSelectHandler');
|
||||
}
|
||||
const changeEdgeShapeHandler = () => {
|
||||
emit('changeEdgeShapeHandler');
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.zx {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
padding-right: 10px;
|
||||
color: #333;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
line-height: 42px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #E9E9E9;
|
||||
box-shadow: 0 8px 12px 0 rgba(0, 52, 107, 0.04);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
|
||||
.left {
|
||||
display: inline-block;
|
||||
width: 12%;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: inline-block;
|
||||
width: 58%;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: inline-block;
|
||||
width: 30%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.edge-enabled {
|
||||
width: 40%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.edge-shape {
|
||||
width: 100%;
|
||||
/*margin-right: 20px;*/
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
/*border-right: 1px solid #E6E9ED;*/
|
||||
}
|
||||
|
||||
.graph-ops {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: 20px;
|
||||
|
||||
.icon-select {
|
||||
background-color: #EEEEEE;
|
||||
}
|
||||
|
||||
.separator {
|
||||
margin-right: 5px;
|
||||
border-left: 1px solid #E9E9E9;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user