-
{{ nodeName }}
-
+
@@ -92,9 +91,9 @@ onMounted(() => {
diff --git a/src/components/BpmnDesign/index.vue b/src/components/BpmnDesign/index.vue
index 3132e3b..89bf37c 100644
--- a/src/components/BpmnDesign/index.vue
+++ b/src/components/BpmnDesign/index.vue
@@ -3,70 +3,78 @@
-
-
-
-
保 存
-
- 预 览
-
-
- XML预览
- SVG预览
-
-
-
+
+
+
+
+
+
+
@@ -95,6 +103,8 @@ const dialog = reactive({
title: '编辑流程'
});
+const panelFlag = ref(false);
+
const xmlUploadRef = ref
();
const canvas = ref();
@@ -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 {
- 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;
+
+ .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-sizing: border-box;
+ 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;
}
}
diff --git a/src/directive/highCode/code.scss b/src/directive/highCode/code.scss
deleted file mode 100644
index f208fe7..0000000
--- a/src/directive/highCode/code.scss
+++ /dev/null
@@ -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;
-}
diff --git a/src/directive/highCode/index.ts b/src/directive/highCode/index.ts
deleted file mode 100644
index 7f559c7..0000000
--- a/src/directive/highCode/index.ts
+++ /dev/null
@@ -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;
diff --git a/src/directive/index.ts b/src/directive/index.ts
index e00fc29..ef25ee8 100644
--- a/src/directive/index.ts
+++ b/src/directive/index.ts
@@ -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);
};