|
@@ -38,18 +38,18 @@
|
|
<i class="el-icon-refresh"></i>
|
|
<i class="el-icon-refresh"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
|
|
+
|
|
<div class="zoom-tip" v-if="scale !== 1">
|
|
<div class="zoom-tip" v-if="scale !== 1">
|
|
<i class="el-icon-info-circle"></i>
|
|
<i class="el-icon-info-circle"></i>
|
|
<span>当前缩放: {{ Math.round(scale * 100) }}%</span>
|
|
<span>当前缩放: {{ Math.round(scale * 100) }}%</span>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
|
|
+
|
|
<div class="wheel-tip" v-if="showWheelTip">
|
|
<div class="wheel-tip" v-if="showWheelTip">
|
|
<i class="el-icon-mouse"></i>
|
|
<i class="el-icon-mouse"></i>
|
|
<span>使用鼠标滚轮缩放</span>
|
|
<span>使用鼠标滚轮缩放</span>
|
|
</div>
|
|
</div>
|
|
-
|
|
|
|
- <div class="process-flow employee-process"
|
|
|
|
|
|
+
|
|
|
|
+ <div class="process-flow employee-process"
|
|
ref="processFlow"
|
|
ref="processFlow"
|
|
:style="{ transform: `scale(${scale})` }"
|
|
:style="{ transform: `scale(${scale})` }"
|
|
@mousedown="startPanning"
|
|
@mousedown="startPanning"
|
|
@@ -58,8 +58,8 @@
|
|
@mouseleave="stopPanning"
|
|
@mouseleave="stopPanning"
|
|
@wheel.prevent="handleWheel">
|
|
@wheel.prevent="handleWheel">
|
|
<!-- 流程图节点 -->
|
|
<!-- 流程图节点 -->
|
|
- <div
|
|
|
|
- v-for="node in nodes"
|
|
|
|
|
|
+ <div
|
|
|
|
+ v-for="node in nodes"
|
|
:key="node.id"
|
|
:key="node.id"
|
|
class="flow-node"
|
|
class="flow-node"
|
|
:class="[node.type]"
|
|
:class="[node.type]"
|
|
@@ -88,59 +88,59 @@
|
|
</defs>
|
|
</defs>
|
|
|
|
|
|
<!-- 主流程路径 -->
|
|
<!-- 主流程路径 -->
|
|
- <path
|
|
|
|
- d="M 400,80 L 400,120"
|
|
|
|
- class="process-line main"
|
|
|
|
|
|
+ <path
|
|
|
|
+ d="M 400,80 L 400,120"
|
|
|
|
+ class="process-line main"
|
|
marker-end="url(#arrow)" />
|
|
marker-end="url(#arrow)" />
|
|
-
|
|
|
|
|
|
+
|
|
<!-- 面试到分支 -->
|
|
<!-- 面试到分支 -->
|
|
- <path
|
|
|
|
- d="M 430,150 L 570,150"
|
|
|
|
- class="process-line"
|
|
|
|
|
|
+ <path
|
|
|
|
+ d="M 430,150 L 570,150"
|
|
|
|
+ class="process-line"
|
|
marker-end="url(#arrow)" />
|
|
marker-end="url(#arrow)" />
|
|
- <path
|
|
|
|
- d="M 370,150 L 230,220"
|
|
|
|
- class="process-line"
|
|
|
|
|
|
+ <path
|
|
|
|
+ d="M 370,150 L 230,220"
|
|
|
|
+ class="process-line"
|
|
marker-end="url(#arrow)" />
|
|
marker-end="url(#arrow)" />
|
|
-
|
|
|
|
|
|
+
|
|
<!-- 发录用通知书到准备入职材料 -->
|
|
<!-- 发录用通知书到准备入职材料 -->
|
|
- <path
|
|
|
|
- d="M 600,180 L 600,220"
|
|
|
|
- class="process-line main"
|
|
|
|
|
|
+ <path
|
|
|
|
+ d="M 600,180 L 600,220"
|
|
|
|
+ class="process-line main"
|
|
marker-end="url(#arrow)" />
|
|
marker-end="url(#arrow)" />
|
|
-
|
|
|
|
|
|
+
|
|
<!-- 准备入职材料到材料核实 -->
|
|
<!-- 准备入职材料到材料核实 -->
|
|
- <path
|
|
|
|
- d="M 600,280 L 600,320"
|
|
|
|
- class="process-line main"
|
|
|
|
|
|
+ <path
|
|
|
|
+ d="M 600,280 L 600,320"
|
|
|
|
+ class="process-line main"
|
|
marker-end="url(#arrow)" />
|
|
marker-end="url(#arrow)" />
|
|
|
|
|
|
<!-- 从材料核实到办理入职 -->
|
|
<!-- 从材料核实到办理入职 -->
|
|
- <path
|
|
|
|
- d="M 600,380 L 600,420"
|
|
|
|
- class="process-line main"
|
|
|
|
|
|
+ <path
|
|
|
|
+ d="M 600,380 L 600,420"
|
|
|
|
+ class="process-line main"
|
|
marker-end="url(#arrow)" />
|
|
marker-end="url(#arrow)" />
|
|
-
|
|
|
|
|
|
+
|
|
<!-- 从面试不通过到发送拒绝通知 -->
|
|
<!-- 从面试不通过到发送拒绝通知 -->
|
|
- <path
|
|
|
|
- d="M 200,250 L 200,220"
|
|
|
|
- class="process-line"
|
|
|
|
|
|
+ <path
|
|
|
|
+ d="M 200,250 L 200,220"
|
|
|
|
+ class="process-line"
|
|
marker-end="url(#arrow)" />
|
|
marker-end="url(#arrow)" />
|
|
-
|
|
|
|
|
|
+
|
|
<!-- 从拒绝通知到归档简历 -->
|
|
<!-- 从拒绝通知到归档简历 -->
|
|
- <path
|
|
|
|
- d="M 200,280 L 200,320"
|
|
|
|
- class="process-line"
|
|
|
|
|
|
+ <path
|
|
|
|
+ d="M 200,280 L 200,320"
|
|
|
|
+ class="process-line"
|
|
marker-end="url(#arrow)" />
|
|
marker-end="url(#arrow)" />
|
|
-
|
|
|
|
|
|
+
|
|
<!-- 从办理入职和归档简历到结束 -->
|
|
<!-- 从办理入职和归档简历到结束 -->
|
|
- <path
|
|
|
|
- d="M 600,480 L 600,525 Q 600,550 560,550 L 430,550"
|
|
|
|
- class="process-line"
|
|
|
|
|
|
+ <path
|
|
|
|
+ d="M 600,480 L 600,525 Q 600,550 560,550 L 430,550"
|
|
|
|
+ class="process-line"
|
|
marker-end="url(#arrow)" />
|
|
marker-end="url(#arrow)" />
|
|
- <path
|
|
|
|
- d="M 200,380 L 200,525 Q 200,550 235,550 L 370,550"
|
|
|
|
- class="process-line"
|
|
|
|
|
|
+ <path
|
|
|
|
+ d="M 200,380 L 200,525 Q 200,550 235,550 L 370,550"
|
|
|
|
+ class="process-line"
|
|
marker-end="url(#arrow)" />
|
|
marker-end="url(#arrow)" />
|
|
|
|
|
|
<!-- 添加文本标签 -->
|
|
<!-- 添加文本标签 -->
|
|
@@ -187,75 +187,75 @@ export default {
|
|
showWheelTip: true,
|
|
showWheelTip: true,
|
|
userName: '',
|
|
userName: '',
|
|
nodes: [
|
|
nodes: [
|
|
- {
|
|
|
|
- id: 'start',
|
|
|
|
- type: 'start',
|
|
|
|
- label: '开始',
|
|
|
|
- x: 400,
|
|
|
|
|
|
+ {
|
|
|
|
+ id: 'start',
|
|
|
|
+ type: 'start',
|
|
|
|
+ label: '开始',
|
|
|
|
+ x: 400,
|
|
y: 50,
|
|
y: 50,
|
|
url: '/process/start'
|
|
url: '/process/start'
|
|
},
|
|
},
|
|
- {
|
|
|
|
- id: 'interview',
|
|
|
|
- type: 'condition',
|
|
|
|
- label: '面试',
|
|
|
|
- x: 400,
|
|
|
|
|
|
+ {
|
|
|
|
+ id: 'interview',
|
|
|
|
+ type: 'condition',
|
|
|
|
+ label: '面试',
|
|
|
|
+ x: 400,
|
|
y: 150,
|
|
y: 150,
|
|
url: '/interview'
|
|
url: '/interview'
|
|
},
|
|
},
|
|
- {
|
|
|
|
- id: 'pass',
|
|
|
|
- type: 'process',
|
|
|
|
- label: '发录用通知书',
|
|
|
|
- x: 600,
|
|
|
|
|
|
+ {
|
|
|
|
+ id: 'pass',
|
|
|
|
+ type: 'process',
|
|
|
|
+ label: '发录用通知书',
|
|
|
|
+ x: 600,
|
|
y: 150,
|
|
y: 150,
|
|
url: '/offer'
|
|
url: '/offer'
|
|
},
|
|
},
|
|
- {
|
|
|
|
- id: 'prepare',
|
|
|
|
- type: 'process',
|
|
|
|
- label: '准备入职材料',
|
|
|
|
- x: 600,
|
|
|
|
|
|
+ {
|
|
|
|
+ id: 'prepare',
|
|
|
|
+ type: 'process',
|
|
|
|
+ label: '准备入职材料',
|
|
|
|
+ x: 600,
|
|
y: 250,
|
|
y: 250,
|
|
url: '/prepare'
|
|
url: '/prepare'
|
|
},
|
|
},
|
|
- {
|
|
|
|
- id: 'verify',
|
|
|
|
- type: 'condition',
|
|
|
|
- label: '材料核实',
|
|
|
|
- x: 600,
|
|
|
|
|
|
+ {
|
|
|
|
+ id: 'verify',
|
|
|
|
+ type: 'condition',
|
|
|
|
+ label: '材料核实',
|
|
|
|
+ x: 600,
|
|
y: 350,
|
|
y: 350,
|
|
url: '/verify'
|
|
url: '/verify'
|
|
},
|
|
},
|
|
- {
|
|
|
|
- id: 'onboard',
|
|
|
|
- type: 'process',
|
|
|
|
- label: '办理入职',
|
|
|
|
- x: 600,
|
|
|
|
|
|
+ {
|
|
|
|
+ id: 'onboard',
|
|
|
|
+ type: 'process',
|
|
|
|
+ label: '办理入职',
|
|
|
|
+ x: 600,
|
|
y: 450,
|
|
y: 450,
|
|
url: '/onboard'
|
|
url: '/onboard'
|
|
},
|
|
},
|
|
- {
|
|
|
|
- id: 'reject',
|
|
|
|
- type: 'process',
|
|
|
|
- label: '发送拒绝通知',
|
|
|
|
- x: 200,
|
|
|
|
|
|
+ {
|
|
|
|
+ id: 'reject',
|
|
|
|
+ type: 'process',
|
|
|
|
+ label: '发送拒绝通知',
|
|
|
|
+ x: 200,
|
|
y: 250,
|
|
y: 250,
|
|
url: '/reject'
|
|
url: '/reject'
|
|
},
|
|
},
|
|
- {
|
|
|
|
- id: 'archive',
|
|
|
|
- type: 'process',
|
|
|
|
- label: '归档简历',
|
|
|
|
- x: 200,
|
|
|
|
|
|
+ {
|
|
|
|
+ id: 'archive',
|
|
|
|
+ type: 'process',
|
|
|
|
+ label: '归档简历',
|
|
|
|
+ x: 200,
|
|
y: 350,
|
|
y: 350,
|
|
url: '/archive'
|
|
url: '/archive'
|
|
},
|
|
},
|
|
- {
|
|
|
|
- id: 'end',
|
|
|
|
- type: 'end',
|
|
|
|
- label: '结束',
|
|
|
|
- x: 400,
|
|
|
|
|
|
+ {
|
|
|
|
+ id: 'end',
|
|
|
|
+ type: 'end',
|
|
|
|
+ label: '结束',
|
|
|
|
+ x: 400,
|
|
y: 550,
|
|
y: 550,
|
|
url: '/process/end'
|
|
url: '/process/end'
|
|
}
|
|
}
|
|
@@ -304,32 +304,32 @@ export default {
|
|
handleWheel(e) {
|
|
handleWheel(e) {
|
|
// 阻止默认滚动行为
|
|
// 阻止默认滚动行为
|
|
e.preventDefault();
|
|
e.preventDefault();
|
|
-
|
|
|
|
|
|
+
|
|
// 确定滚动方向(向上滚动为放大,向下滚动为缩小)
|
|
// 确定滚动方向(向上滚动为放大,向下滚动为缩小)
|
|
const delta = Math.sign(e.deltaY) * -0.1;
|
|
const delta = Math.sign(e.deltaY) * -0.1;
|
|
-
|
|
|
|
|
|
+
|
|
// 计算新的缩放值
|
|
// 计算新的缩放值
|
|
const newScale = Math.max(0.5, Math.min(2, this.scale + delta));
|
|
const newScale = Math.max(0.5, Math.min(2, this.scale + delta));
|
|
-
|
|
|
|
|
|
+
|
|
// 如果缩放值在允许范围内,就应用它
|
|
// 如果缩放值在允许范围内,就应用它
|
|
if (newScale !== this.scale) {
|
|
if (newScale !== this.scale) {
|
|
// 计算鼠标位置相对于流程图容器的位置
|
|
// 计算鼠标位置相对于流程图容器的位置
|
|
const flowEl = this.$refs.processFlow;
|
|
const flowEl = this.$refs.processFlow;
|
|
const rect = flowEl.getBoundingClientRect();
|
|
const rect = flowEl.getBoundingClientRect();
|
|
-
|
|
|
|
|
|
+
|
|
// 计算鼠标在流程图上的坐标(考虑当前偏移和缩放)
|
|
// 计算鼠标在流程图上的坐标(考虑当前偏移和缩放)
|
|
const mouseX = (e.clientX - rect.left) / this.scale;
|
|
const mouseX = (e.clientX - rect.left) / this.scale;
|
|
const mouseY = (e.clientY - rect.top) / this.scale;
|
|
const mouseY = (e.clientY - rect.top) / this.scale;
|
|
-
|
|
|
|
|
|
+
|
|
// 获取当前偏移
|
|
// 获取当前偏移
|
|
const currentLeft = parseInt(flowEl.style.left || '0');
|
|
const currentLeft = parseInt(flowEl.style.left || '0');
|
|
const currentTop = parseInt(flowEl.style.top || '0');
|
|
const currentTop = parseInt(flowEl.style.top || '0');
|
|
-
|
|
|
|
|
|
+
|
|
// 计算新的偏移,保持鼠标所指位置不变
|
|
// 计算新的偏移,保持鼠标所指位置不变
|
|
const scaleChange = newScale - this.scale;
|
|
const scaleChange = newScale - this.scale;
|
|
const newLeft = currentLeft - mouseX * scaleChange;
|
|
const newLeft = currentLeft - mouseX * scaleChange;
|
|
const newTop = currentTop - mouseY * scaleChange;
|
|
const newTop = currentTop - mouseY * scaleChange;
|
|
-
|
|
|
|
|
|
+
|
|
// 应用新的缩放和偏移
|
|
// 应用新的缩放和偏移
|
|
this.scale = newScale;
|
|
this.scale = newScale;
|
|
flowEl.style.left = `${newLeft}px`;
|
|
flowEl.style.left = `${newLeft}px`;
|
|
@@ -341,7 +341,7 @@ export default {
|
|
if (e.target.closest('.flow-node')) {
|
|
if (e.target.closest('.flow-node')) {
|
|
return;
|
|
return;
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
this.panEnabled = true;
|
|
this.panEnabled = true;
|
|
this.lastPosX = e.clientX;
|
|
this.lastPosX = e.clientX;
|
|
this.lastPosY = e.clientY;
|
|
this.lastPosY = e.clientY;
|
|
@@ -349,19 +349,19 @@ export default {
|
|
},
|
|
},
|
|
pan(e) {
|
|
pan(e) {
|
|
if (!this.panEnabled) return;
|
|
if (!this.panEnabled) return;
|
|
-
|
|
|
|
|
|
+
|
|
const flowEl = this.$refs.processFlow;
|
|
const flowEl = this.$refs.processFlow;
|
|
if (!flowEl) return;
|
|
if (!flowEl) return;
|
|
-
|
|
|
|
|
|
+
|
|
const dx = e.clientX - this.lastPosX;
|
|
const dx = e.clientX - this.lastPosX;
|
|
const dy = e.clientY - this.lastPosY;
|
|
const dy = e.clientY - this.lastPosY;
|
|
-
|
|
|
|
|
|
+
|
|
const currentTop = parseInt(flowEl.style.top || '0');
|
|
const currentTop = parseInt(flowEl.style.top || '0');
|
|
const currentLeft = parseInt(flowEl.style.left || '0');
|
|
const currentLeft = parseInt(flowEl.style.left || '0');
|
|
-
|
|
|
|
|
|
+
|
|
flowEl.style.top = (currentTop + dy) + 'px';
|
|
flowEl.style.top = (currentTop + dy) + 'px';
|
|
flowEl.style.left = (currentLeft + dx) + 'px';
|
|
flowEl.style.left = (currentLeft + dx) + 'px';
|
|
-
|
|
|
|
|
|
+
|
|
this.lastPosX = e.clientX;
|
|
this.lastPosX = e.clientX;
|
|
this.lastPosY = e.clientY;
|
|
this.lastPosY = e.clientY;
|
|
},
|
|
},
|
|
@@ -392,6 +392,7 @@ export default {
|
|
const userInfo = await fetchUserInfo(userId);
|
|
const userInfo = await fetchUserInfo(userId);
|
|
debugger;
|
|
debugger;
|
|
// 使用返回的数据
|
|
// 使用返回的数据
|
|
|
|
+ console.log("userName:" + userInfo.username)
|
|
this.userName = userInfo.username;
|
|
this.userName = userInfo.username;
|
|
this.loading = false;
|
|
this.loading = false;
|
|
} catch (error) {
|
|
} catch (error) {
|
|
@@ -673,51 +674,51 @@ export default {
|
|
.process-flow {
|
|
.process-flow {
|
|
height: 700px;
|
|
height: 700px;
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
.intro-content {
|
|
.intro-content {
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
.intro-description {
|
|
.intro-description {
|
|
padding-right: 0;
|
|
padding-right: 0;
|
|
margin-bottom: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
.flow-node {
|
|
.flow-node {
|
|
width: 100px;
|
|
width: 100px;
|
|
height: 50px;
|
|
height: 50px;
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
.flow-node.condition {
|
|
.flow-node.condition {
|
|
width: 70px;
|
|
width: 70px;
|
|
height: 70px;
|
|
height: 70px;
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
.node-label {
|
|
.node-label {
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
.zoom-controls {
|
|
.zoom-controls {
|
|
bottom: 20px;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
right: 20px;
|
|
top: auto;
|
|
top: auto;
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
.zoom-btn {
|
|
.zoom-btn {
|
|
width: 32px;
|
|
width: 32px;
|
|
height: 32px;
|
|
height: 32px;
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
.zoom-btn i {
|
|
.zoom-btn i {
|
|
font-size: 16px;
|
|
font-size: 16px;
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
.zoom-tip {
|
|
.zoom-tip {
|
|
bottom: 20px;
|
|
bottom: 20px;
|
|
top: auto;
|
|
top: auto;
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
-
|
|
|
|
|
|
+
|
|
.wheel-tip {
|
|
.wheel-tip {
|
|
bottom: 20px;
|
|
bottom: 20px;
|
|
left: 20px;
|
|
left: 20px;
|
|
@@ -725,4 +726,4 @@ export default {
|
|
font-size: 12px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-</style>
|
|
|
|
|
|
+</style>
|