3fd207a42c
1. 将原并行的质量部+生产部流程改为技术部→生产部→陈总→吴部长的串行流程 2. 替换所有质量部相关描述为技术部，更新部门映射配置 3. 重构流程状态推进逻辑，新增getNextDept方法简化流程推进 4. 新增表单本地暂存功能，优化列表项UI布局 5. 更新流程步骤展示、状态文案和标签颜色配置
139 lines
3.0 KiB
Vue
139 lines
3.0 KiB
Vue
<template>
|
||
<div v-if="enabled" class="section-container">
|
||
<div class="section-title">
|
||
<i class="el-icon-s-order"></i>
|
||
<span>流程总览 <span class="en-sub">· Process Overview</span></span>
|
||
</div>
|
||
<el-steps :active="activeStep" align-center class="flow-steps">
|
||
<el-step title="技术部处理" icon="el-icon-s-operation" />
|
||
<el-step title="生产部处理" icon="el-icon-s-operation" />
|
||
<el-step title="陈总审批" icon="el-icon-s-check" />
|
||
<el-step title="吴部长处理" icon="el-icon-s-custom" />
|
||
<el-step title="已办结" icon="el-icon-circle-check" />
|
||
</el-steps>
|
||
<div class="current-status">
|
||
<span class="status-label">当前阶段：</span>
|
||
<el-tag :type="tagType" size="small">{{ flowStatusText }}</el-tag>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'FlowOverviewSection',
|
||
props: {
|
||
enabled: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
flowStatus: {
|
||
type: [Number, String],
|
||
default: undefined
|
||
}
|
||
},
|
||
computed: {
|
||
/**
|
||
* el-steps active 从 0 开始。
|
||
* 1=技术部处理→0, 2=生产部处理→1, 3=陈总审批→2, 4=吴部长处理→3, 5=已办结→4
|
||
*/
|
||
activeStep() {
|
||
if (this.flowStatus == null) return -1;
|
||
const v = Number(this.flowStatus);
|
||
if (v >= 5) return 4;
|
||
return v - 1;
|
||
},
|
||
flowStatusText() {
|
||
const map = {
|
||
1: '技术部处理中',
|
||
2: '生产部处理中',
|
||
3: '待陈总审批',
|
||
4: '待吴部长处理',
|
||
5: '已办结'
|
||
};
|
||
return map[this.flowStatus] || '未知';
|
||
},
|
||
tagType() {
|
||
const map = {
|
||
1: 'warning',
|
||
2: 'warning',
|
||
3: 'primary',
|
||
4: 'warning',
|
||
5: 'success'
|
||
};
|
||
return map[this.flowStatus] || '';
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.section-container {
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.section-title {
|
||
width: 100%;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: #1e293b;
|
||
margin: 20px 0 10px 0;
|
||
padding: 0 0 8px 0;
|
||
border-bottom: 1px solid #cbd5e1;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
letter-spacing: 0.2px;
|
||
}
|
||
|
||
.section-title .en-sub {
|
||
font-size: 11px;
|
||
font-weight: 400;
|
||
color: #94a3b8;
|
||
letter-spacing: 0.2px;
|
||
}
|
||
|
||
.section-title i {
|
||
font-size: 14px;
|
||
color: #475569;
|
||
}
|
||
|
||
.flow-steps {
|
||
padding: 6px 0 4px;
|
||
}
|
||
|
||
.flow-steps >>> .el-step.is-wait .el-step__icon-inner,
|
||
.flow-steps >>> .el-step.is-wait .el-step__title {
|
||
color: #94a3b8;
|
||
}
|
||
|
||
.flow-steps >>> .el-step.is-process .el-step__icon-inner,
|
||
.flow-steps >>> .el-step.is-process .el-step__title {
|
||
color: #2563eb;
|
||
}
|
||
|
||
.flow-steps >>> .el-step.is-finish .el-step__icon-inner,
|
||
.flow-steps >>> .el-step.is-finish .el-step__title {
|
||
color: #52c41a;
|
||
}
|
||
|
||
.flow-steps >>> .el-step__description {
|
||
display: none;
|
||
}
|
||
|
||
.current-status {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
gap: 6px;
|
||
margin-top: 4px;
|
||
padding-top: 6px;
|
||
border-top: 1px solid #e2e8f0;
|
||
}
|
||
|
||
.status-label {
|
||
font-size: 11px;
|
||
color: #64748b;
|
||
letter-spacing: 0.2px;
|
||
}
|
||
</style>
|