update 调整任务面板样式
This commit is contained in:
LiuHao
parent
a43fef6316
commit
21554d2bfa
1
src/assets/icons/svg/caret-back.svg
Normal file
1
src/assets/icons/svg/caret-back.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M321.94 98L158.82 237.78a24 24 0 000 36.44L321.94 414c15.57 13.34 39.62 2.28 39.62-18.22v-279.6c0-20.5-24.05-31.56-39.62-18.18z"/></svg>
|
||||
|
After Width: | Height: | Size: 223 B |
1
src/assets/icons/svg/caret-forward.svg
Normal file
1
src/assets/icons/svg/caret-forward.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512"><path d="M190.06 414l163.12-139.78a24 24 0 000-36.44L190.06 98c-15.57-13.34-39.62-2.28-39.62 18.22v279.6c0 20.5 24.05 31.56 39.62 18.18z"/></svg>
|
||||
|
After Width: | Height: | Size: 223 B |
@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<div ref="propertyPanel" class="property-panel">
|
||||
<div v-if="nodeName">{{ nodeName }}</div>
|
||||
<el-divider />
|
||||
<div ref="propertyPanel">
|
||||
<div v-if="nodeName" class="node-name">{{ nodeName }}</div>
|
||||
<component :is="component" v-if="element" :element="element" :modeler="modeler" :users="users" :groups="groups" />
|
||||
</div>
|
||||
</template>
|
||||
@ -92,9 +91,9 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.el-divider {
|
||||
margin-top: 10px;
|
||||
margin-bottom: 15px;
|
||||
border: 1px solid #ccc;
|
||||
.node-name {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,11 +3,12 @@
|
||||
<el-dialog ref="flowDialogRef" v-model="dialog.visible" width="100%" fullscreen :title="dialog.title" @close="closeDialog">
|
||||
<div class="app-containers">
|
||||
<el-container class="h-full">
|
||||
<el-container style="align-items: stretch">
|
||||
<el-header>
|
||||
<div class="">
|
||||
<div>
|
||||
<div class="process-toolbar">
|
||||
<el-space wrap :size="10">
|
||||
<el-button size="small" type="primary">保 存</el-button>
|
||||
<el-dropdown size="small" class="ml-[13px]">
|
||||
<el-dropdown size="small">
|
||||
<el-button size="small" type="primary"> 预 览 </el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
@ -17,7 +18,7 @@
|
||||
</template>
|
||||
</el-dropdown>
|
||||
|
||||
<el-dropdown size="small" class="ml-[13px]">
|
||||
<el-dropdown size="small">
|
||||
<el-button size="small" type="primary"> 下 载 </el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
@ -28,7 +29,7 @@
|
||||
</el-dropdown>
|
||||
<el-upload ref="xmlUploadRef" action="" style="display: none" />
|
||||
<el-tooltip effect="dark" content="加载xml" placement="bottom">
|
||||
<el-button class="ml-[13px]" size="small" icon="FolderOpened" @click="loadXML" />
|
||||
<el-button size="small" icon="FolderOpened" @click="loadXML" />
|
||||
</el-tooltip>
|
||||
<el-tooltip effect="dark" content="新建" placement="bottom">
|
||||
<el-button size="small" icon="CirclePlus" @click="newDiagram" />
|
||||
@ -50,23 +51,30 @@
|
||||
</el-tooltip>
|
||||
|
||||
<el-dialog v-model="perviewXMLShow" title="XML预览" width="80%">
|
||||
<div v-code class="hljs-container">
|
||||
<highlightjs :code="xmlStr" :autodetect="false" language="XML" />
|
||||
</div>
|
||||
<highlightjs :code="xmlStr" language="XML" />
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-model="perviewSVGShow" title="SVG预览" width="80%">
|
||||
<div style="text-align: center" v-html="svgData" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</el-space>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-container class="pl-[20px] pr-[20px]" style="align-items: stretch">
|
||||
<div ref="canvas" class="canvas" />
|
||||
<div class="panel-div">
|
||||
<PropertyPanel v-if="bpmnModeler" :modeler="bpmnModeler" :users="users" :groups="groups" />
|
||||
</div>
|
||||
</el-container>
|
||||
<div :class="{ 'process-panel': true, 'hide': panelFlag }">
|
||||
<div class="process-panel-bar" @click="panelFlag = !panelFlag">
|
||||
<div class="open-bar">
|
||||
<el-link type="default" :underline="false">
|
||||
<svg-icon class-name="open-bar" :icon-class="panelFlag ? 'caret-back' : 'caret-forward'"></svg-icon>
|
||||
</el-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="!panelFlag" v-if="bpmnModeler" class="panel-content">
|
||||
<PropertyPanel :modeler="bpmnModeler" :users="users" :groups="groups" />
|
||||
</div>
|
||||
</div>
|
||||
</el-container>
|
||||
</div>
|
||||
</el-dialog>
|
||||
@ -95,6 +103,8 @@ const dialog = reactive({
|
||||
title: '编辑流程'
|
||||
});
|
||||
|
||||
const panelFlag = ref(false);
|
||||
|
||||
const xmlUploadRef = ref<ElUploadInstance>();
|
||||
|
||||
const canvas = ref<HTMLDivElement>();
|
||||
@ -340,29 +350,76 @@ const getProcessElement = () => {
|
||||
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHBhdHRlcm4gaWQ9ImEiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHBhdGggZD0iTTAgMTBoNDBNMTAgMHY0ME0wIDIwaDQwTTIwIDB2NDBNMCAzMGg0ME0zMCAwdjQwIiBmaWxsPSJub25lIiBzdHJva2U9IiNlMGUwZTAiIG9wYWNpdHk9Ii4yIi8+PHBhdGggZD0iTTQwIDBIMHY0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZTBlMGUwIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2EpIi8+PC9zdmc+');
|
||||
}
|
||||
.el-header {
|
||||
border-bottom: -1px 0 1px solid rgb(218 218 218);
|
||||
height: 30px;
|
||||
height: 35px;
|
||||
padding: 0;
|
||||
}
|
||||
.panel-div {
|
||||
|
||||
.process-panel {
|
||||
transition: width 0.25s ease-in;
|
||||
.process-panel-bar {
|
||||
width: 34px;
|
||||
height: 40px;
|
||||
.open-bar {
|
||||
width: 34px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
// 收起面板样式
|
||||
&.hide {
|
||||
width: 34px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
.process-panel-bar {
|
||||
width: 34px;
|
||||
height: 100%;
|
||||
box-shadow: 0 0 8px #cccccc;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
box-sizing: border-box;
|
||||
width: 500px;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
display: block;
|
||||
text-align: left;
|
||||
line-height: 34px;
|
||||
}
|
||||
.process-panel-bar:hover {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-dialog .el-dialog__body) {
|
||||
padding: 0 !important;
|
||||
max-height: 100% !important;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
height: calc(100vh - 50px);
|
||||
}
|
||||
:deep(.el-dialog) {
|
||||
overflow: hidden;
|
||||
|
||||
.process-toolbar {
|
||||
pre {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
max-height: calc(80vh - 32px);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
:deep(.hljs) {
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.open-bar {
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
color: #606266;
|
||||
}
|
||||
.process-panel {
|
||||
box-sizing: border-box;
|
||||
padding: 0 8px 0 8px;
|
||||
border-left: 1px solid #eeeeee;
|
||||
box-shadow: #cccccc 0 0 8px;
|
||||
max-height: 100%;
|
||||
width: 480px;
|
||||
:deep(.el-collapse) {
|
||||
height: calc(100vh - 162px);
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,92 +0,0 @@
|
||||
/* 语法高亮 */
|
||||
.hljs-container {
|
||||
position: relative;
|
||||
display: block;
|
||||
display: flex;
|
||||
width: max-content;
|
||||
margin-left: 100px;
|
||||
padding: 30px 10px 2px 0;
|
||||
overflow-x: hidden;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
background: #21252b;
|
||||
box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%);
|
||||
}
|
||||
|
||||
/** 3个点 */
|
||||
.hljs-container::before {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 15px;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
overflow: visible;
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 12px;
|
||||
white-space: nowrap;
|
||||
text-indent: 75px;
|
||||
background-color: #fc625d;
|
||||
border-radius: 16px;
|
||||
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
|
||||
content: attr(codetype);
|
||||
}
|
||||
|
||||
/** 滚动条 */
|
||||
:deep(.hljs) {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
:deep(.hljs::-webkit-scrollbar) {
|
||||
width: 12px !important;
|
||||
height: 12px !important;
|
||||
}
|
||||
|
||||
:deep(.hljs::-webkit-scrollbar-thumb) {
|
||||
height: 30px !important;
|
||||
background: #d1d8e6;
|
||||
background-clip: content-box;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 19px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
:deep(.hljs::-webkit-scrollbar-thumb:hover) {
|
||||
background: #a5b3cf;
|
||||
background-clip: content-box;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
:deep(.hljs::-webkit-scrollbar-track-piece) {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: #333;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/** 行数样式 */
|
||||
.hljs-code-number {
|
||||
padding: 17px 10px 0;
|
||||
color: #d1d8e6;
|
||||
font-size: 12px;
|
||||
list-style: none;
|
||||
border-right: 1px solid #d1d8e6;
|
||||
}
|
||||
|
||||
/** 复制样式 */
|
||||
.hljs-copy {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 30px;
|
||||
display: none;
|
||||
padding: 0 10px;
|
||||
color: #66a9ff;
|
||||
font-size: 10px;
|
||||
background-color: #ecf5ff;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -1,55 +0,0 @@
|
||||
import './code.scss';
|
||||
import { Directive } from 'vue';
|
||||
const vCode: Directive = {
|
||||
mounted(el: HTMLElement) {
|
||||
//获取代码片段
|
||||
const code: HTMLElement = el.querySelector('code.hljs');
|
||||
const pre = document.getElementsByTagName('pre')[0];
|
||||
const html = code?.innerHTML;
|
||||
const size = html.split('\n').length;
|
||||
|
||||
//插入行数
|
||||
const ul = document.createElement('ul');
|
||||
for (let i = 1; i <= size; i++) {
|
||||
const li = document.createElement('li');
|
||||
li.innerText = i + '';
|
||||
ul.appendChild(li);
|
||||
}
|
||||
|
||||
ul.classList.add('hljs-code-number');
|
||||
|
||||
el.insertBefore(ul, pre);
|
||||
|
||||
//插入复制功能
|
||||
const copy: HTMLDivElement = document.createElement('div');
|
||||
copy.classList.add('hljs-copy');
|
||||
copy.innerText = '复制';
|
||||
//添加点击事件
|
||||
copy.addEventListener('click', () => {
|
||||
//创建一个输入框
|
||||
const textarea = document.createElement('textarea');
|
||||
document.body.appendChild(textarea);
|
||||
textarea.setAttribute('readonly', 'readonly');
|
||||
textarea.value = code.innerText;
|
||||
textarea.select();
|
||||
if (document.execCommand('copy')) {
|
||||
document.execCommand('copy');
|
||||
copy.innerText = '复制成功';
|
||||
}
|
||||
document.body.removeChild(textarea);
|
||||
});
|
||||
|
||||
pre.appendChild(copy);
|
||||
|
||||
//鼠标移入显示复制按钮
|
||||
el.addEventListener('mouseout', () => {
|
||||
copy.innerText = '复制';
|
||||
copy.style.display = 'none';
|
||||
});
|
||||
el.addEventListener('mouseover', () => {
|
||||
copy.style.display = 'block';
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default vCode;
|
||||
@ -1,12 +1,9 @@
|
||||
import copyText from './common/copyText';
|
||||
import { hasPermi, hasRoles } from './permission';
|
||||
import code from './highCode';
|
||||
import { App } from 'vue';
|
||||
|
||||
export default (app: App) => {
|
||||
app.directive('copyText', copyText);
|
||||
app.directive('hasPermi', hasPermi);
|
||||
app.directive('hasRoles', hasRoles);
|
||||
app.directive('hasRoles', hasRoles);
|
||||
app.directive('code', code);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user