197 lines
9.3 KiB
Vue
197 lines
9.3 KiB
Vue
<template>
|
||
<view class="tree-canvas-container">
|
||
<view v-if="!product.task_tree || !product.task_tree.length" class="zero-task">
|
||
<text class="zero-icon">📋</text>
|
||
<text class="zero-text">该产品暂无流转记录</text>
|
||
</view>
|
||
|
||
<template v-else>
|
||
<view class="canvas-hint">🖐 2D 流转蓝图：支持全视角自由拖拽探索</view>
|
||
|
||
<movable-area class="tree-movable-area">
|
||
<movable-view
|
||
class="tree-movable-view"
|
||
direction="all"
|
||
:x="0" :y="0"
|
||
:scale="true" :scale-min="0.3" :scale-max="2"
|
||
:style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
|
||
>
|
||
<view class="canvas-inner">
|
||
<!-- 节点卡片层 -->
|
||
<view v-for="node in treeNodes" :key="node.id"
|
||
class="canvas-node" :class="statusColor(node.status)"
|
||
:style="{ left: node.x + 'px', top: node.y + 'px' }"
|
||
@tap="node.records && node.records.length && $emit('viewRecords', node)">
|
||
|
||
<view class="cn-header">
|
||
<text :class="node.parent_task_id ? 'badge-sub' : 'badge-main'">{{ node.parent_task_id ? branchLabelMap[node.id] || '分支' : '主分支' }}</text>
|
||
<text :class="['cn-badge', statusColor(node.status)]">{{ statusLabel(node.status) }}</text>
|
||
</view>
|
||
|
||
<text class="cn-assignee">负责人: {{ node.assignee_id || '—' }}</text>
|
||
<text v-if="node.is_rework" class="tag-rework">⚠ 返工工序</text>
|
||
|
||
<text v-if="getTaskRemark(node)" class="cn-remark">📌 {{ getTaskRemark(node) }}</text>
|
||
|
||
<view class="cn-footer">
|
||
<text v-if="node.status==='COMPLETED' && (!node.child_tasks || !node.child_tasks.length)" class="cn-end">🏁 终止分支</text>
|
||
<text v-else-if="node.status==='ARCHIVED'" class="cn-end cn-end-wh">📦 已入库</text>
|
||
<text v-if="node.records && node.records.length" class="cn-records">📋 {{ node.records.length }}条记录 ›</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</movable-view>
|
||
</movable-area>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "TreeCanvas",
|
||
props: {
|
||
product: { type: Object, required: true }
|
||
},
|
||
emits: ["viewRecords"],
|
||
computed: {
|
||
treeNodes() {
|
||
if (!this.product || !this.product.task_tree) return [];
|
||
|
||
const CARD_W = 320, CARD_H = 460, GAP_X = 80, GAP_Y = 120;
|
||
const nodes = [];
|
||
const rowMaxX = {};
|
||
let currentMaxYIdx = -1;
|
||
|
||
const flatMap = {};
|
||
const flatten = (tasks) => {
|
||
if (!tasks) return;
|
||
tasks.forEach(t => { flatMap[t.id] = t; flatten(t.child_tasks); });
|
||
};
|
||
flatten(this.product.task_tree);
|
||
|
||
const layoutNode = (t) => {
|
||
if (t._visited) return;
|
||
t._visited = true;
|
||
|
||
if (!t.parent_task_id) {
|
||
// 规则A：根节点 → 新行 X=0
|
||
currentMaxYIdx++;
|
||
t._yIdx = currentMaxYIdx;
|
||
t._xIdx = 0;
|
||
} else {
|
||
const parent = flatMap[t.parent_task_id];
|
||
if (parent && !parent._visited) layoutNode(parent);
|
||
|
||
const type = t.task_type || (parent && parent.status === 'CANCELED' ? 'RECOVERY' : 'SPAWN');
|
||
|
||
if (type === 'SPAWN') {
|
||
t._yIdx = parent._yIdx;
|
||
t._xIdx = (rowMaxX[t._yIdx] !== undefined ? rowMaxX[t._yIdx] : 0) + 1;
|
||
} else if (type === 'TRANSFER' || type === 'MAIN') {
|
||
currentMaxYIdx++;
|
||
t._yIdx = currentMaxYIdx;
|
||
t._xIdx = 0;
|
||
} else if (type === 'RECOVERY') {
|
||
currentMaxYIdx++;
|
||
t._yIdx = currentMaxYIdx;
|
||
t._xIdx = parent._xIdx;
|
||
}
|
||
}
|
||
|
||
rowMaxX[t._yIdx] = Math.max(rowMaxX[t._yIdx] || 0, t._xIdx);
|
||
t.x = 40 + t._xIdx * (CARD_W + GAP_X);
|
||
t.y = 20 + t._yIdx * (CARD_H + GAP_Y);
|
||
nodes.push(t);
|
||
|
||
if (t.child_tasks && t.child_tasks.length) {
|
||
t.child_tasks
|
||
.sort((a, b) => (a.task_type === 'TRANSFER' ? -1 : 1))
|
||
.forEach(child => layoutNode(child));
|
||
}
|
||
};
|
||
|
||
this.product.task_tree.forEach(root => layoutNode(root));
|
||
return nodes;
|
||
},
|
||
branchLabelMap() {
|
||
const map = {};
|
||
if (!this.product || !this.product.task_tree) return map;
|
||
const traverse = (tasks, prefix) => {
|
||
if (!tasks) return;
|
||
let spawnIndex = 0;
|
||
tasks.forEach((t) => {
|
||
if (t.task_type !== 'SPAWN') {
|
||
map[t.id] = '主分支';
|
||
traverse(t.child_tasks, prefix);
|
||
} else {
|
||
spawnIndex++;
|
||
const num = prefix ? `${prefix}.${spawnIndex}` : `${spawnIndex}`;
|
||
map[t.id] = `分支 ${num}`;
|
||
traverse(t.child_tasks, num);
|
||
}
|
||
});
|
||
};
|
||
this.product.task_tree.forEach((t) => {
|
||
map[t.id] = '主分支';
|
||
traverse(t.child_tasks, '');
|
||
});
|
||
return map;
|
||
},
|
||
canvasWidth() { if (!this.treeNodes.length) return 400; return Math.max(800, Math.max(...this.treeNodes.map(n => n.x)) + 300); },
|
||
canvasHeight() { if (!this.treeNodes.length) return 400; return Math.max(800, Math.max(...this.treeNodes.map(n => n.y)) + 300); }
|
||
},
|
||
methods: {
|
||
getTaskRemark(t) {
|
||
if (!t) return "";
|
||
if (t.remark) return t.remark;
|
||
if (t.records && t.records.length > 0) {
|
||
const rec = t.records.find(r => r.remark && r.remark.trim().length > 0);
|
||
if (rec) return rec.remark;
|
||
}
|
||
return "";
|
||
},
|
||
lineStyle(line) {
|
||
const dx = line.x2 - line.x1; const dy = line.y2 - line.y1;
|
||
const len = Math.sqrt(dx * dx + dy * dy);
|
||
const angle = Math.atan2(dy, dx) * 180 / Math.PI;
|
||
return { left: line.x1 + 'px', top: line.y1 + 'px', width: len + 'px', transform: `rotate(${angle}deg)`, transformOrigin: '0 0' };
|
||
},
|
||
statusLabel(s) { const map = { PENDING: "待接收", WIP: "进行中", COMPLETED: "已完成", REJECTED: "已驳回", ARCHIVED: "已入库", CANCELED: "已撤回" }; return map[s] || s; },
|
||
statusColor(s) { switch (s) { case "PENDING": return "s-yellow"; case "WIP": return "s-blue"; case "COMPLETED": return "s-green"; case "REJECTED": return "s-red"; case "CANCELED": return "s-canceled"; default: return "s-gray"; } }
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.tree-canvas-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #ebedf0; border-radius: 12px; margin-top: 10px; box-shadow: inset 0 0 10px rgba(0,0,0,0.02); }
|
||
.zero-task { display: flex; flex-direction: column; align-items: center; padding: 40px 0; }
|
||
.zero-icon { font-size: 40px; margin-bottom: 10px; }
|
||
.zero-text { font-size: 14px; color: #9ca3af; }
|
||
.canvas-hint { font-size: 11px; color: #9ca3af; text-align: center; padding: 8px 0; background: #fff; border-bottom: 1px solid #e5e7eb; flex-shrink: 0; }
|
||
.tree-movable-area { flex: 1; width: 100%; background-color: #f8fafc; background-image: linear-gradient(#e5e7eb 1px, transparent 1px), linear-gradient(90deg, #e5e7eb 1px, transparent 1px); background-size: 20px 20px; }
|
||
.canvas-inner { position: absolute; left: 0; top: 0; }
|
||
.canvas-node { position: absolute; width: 320px; min-height: 460px; background: #ffffff; border-radius: 20px; padding: 24px; box-shadow: 0 10px 30px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.06); border-left: 12px solid #3b82f6; z-index: 10; display: flex; flex-direction: column; gap: 10px; }
|
||
.canvas-node.s-yellow { border-left-color: #f59e0b; }
|
||
.canvas-node.s-blue { border-left-color: #3b82f6; }
|
||
.canvas-node.s-green { border-left-color: #22c55e; }
|
||
.canvas-node.s-red { border-left-color: #ef4444; }
|
||
.canvas-node.s-canceled { border-left-color: #9ca3af; opacity: 0.5; filter: grayscale(0.6); }
|
||
.cn-header { display: flex; align-items: center; justify-content: space-between; }
|
||
.badge-main { font-size: 10px; padding: 2px 8px; border-radius: 6px; background: #2563eb; color: #fff; font-weight: 700; }
|
||
.badge-sub { font-size: 10px; padding: 2px 8px; border-radius: 6px; background: #ede9fe; color: #7c3aed; font-weight: 700; }
|
||
.cn-name { font-size: 24px; font-weight: 800; color: #1f2937; }
|
||
.cn-badge { font-size: 14px; padding: 4px 12px; border-radius: 8px; font-weight: 700; }
|
||
.cn-badge.s-yellow { background: #fef3c7; color: #b45309; }
|
||
.cn-badge.s-blue { background: #dbeafe; color: #1d4ed8; }
|
||
.cn-badge.s-green { background: #dcfce7; color: #15803d; }
|
||
.cn-badge.s-red { background: #fce4ec; color: #be123c; }
|
||
.cn-assignee { font-size: 16px; color: #6b7280; font-weight: 500; margin-top: 10px; }
|
||
.tag-rework { font-size: 13px; color: #fff; background: #ef4444; padding: 4px 10px; border-radius: 6px; display: inline-block; width: max-content; }
|
||
.cn-remark { font-size: 16px; color: #a16207; background: #fefce8; padding: 16px; border-radius: 8px; border: 1px solid #fef08a; line-height: 1.5; word-break: break-all; min-height: 100px; white-space: normal; margin-top: 16px; }
|
||
.cn-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; border-top: 1px dashed #e5e7eb; }
|
||
.cn-end { font-size: 13px; font-weight: 700; color: #16a34a; }
|
||
.cn-end-wh { color: #7c3aed; }
|
||
.cn-records { font-size: 14px; color: #2563eb; font-weight: 700; background: #eff6ff; padding: 4px 12px; border-radius: 12px; }
|
||
.canvas-line { position: absolute; height: 3px; background: #94a3b8; z-index: 1; transform-origin: 0 0; }
|
||
</style>
|