feat: 新增盘库和维修计划初版
This commit is contained in:
@@ -0,0 +1,149 @@
|
||||
<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-document" />
|
||||
<el-step title="快照与对比" icon="el-icon-camera" />
|
||||
<el-step title="提交审批" icon="el-icon-s-promotion" />
|
||||
<el-step title="处理差异" icon="el-icon-warning" />
|
||||
<el-step title="完成归档" icon="el-icon-circle-check" />
|
||||
</el-steps>
|
||||
<div class="current-status">
|
||||
<span class="status-label">Current / 当前阶段:</span>
|
||||
<el-tag :type="tagType" size="small">{{ flowStatusText }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'CountFlowSection',
|
||||
props: {
|
||||
enabled: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
planStatus: {
|
||||
type: [Number, String],
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
/**
|
||||
* el-steps active 从 0 开始。
|
||||
* 步骤:0=创建计划, 1=快照与对比, 2=提交审批, 3=处理差异, 4=完成归档
|
||||
* status 0=草稿 -> active=0 (创建计划)
|
||||
* status 1=待审批 -> active=2 (提交审批)
|
||||
* status 2=执行中 -> active=3 (处理差异)
|
||||
* status 3=差异处理 -> active=3 (处理差异)
|
||||
* status 4=已归档 -> active=5 (全部finish)
|
||||
*/
|
||||
activeStep() {
|
||||
if (this.planStatus == null) return -1;
|
||||
const v = Number(this.planStatus);
|
||||
if (v >= 4) return 5;
|
||||
if (v === 1) return 2;
|
||||
if (v === 2 || v === 3) return 3;
|
||||
return v;
|
||||
},
|
||||
flowStatusText() {
|
||||
const map = {
|
||||
0: '草稿',
|
||||
1: '待审批',
|
||||
2: '执行中',
|
||||
3: '差异处理中',
|
||||
4: '已归档'
|
||||
};
|
||||
return map[this.planStatus] || '未知';
|
||||
},
|
||||
tagType() {
|
||||
const map = {
|
||||
0: 'info',
|
||||
1: '',
|
||||
2: 'warning',
|
||||
3: 'danger',
|
||||
4: 'success'
|
||||
};
|
||||
return map[this.planStatus] || '';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.section-container {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-family: 'Georgia', 'Times New Roman', 'Noto Serif SC', 'SimSun', serif;
|
||||
width: 100%;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
margin: 0 0 12px 0;
|
||||
padding: 0 0 10px 0;
|
||||
border-bottom: 1px solid #d4d0c8;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.section-title .en-sub {
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: #8c8c8c;
|
||||
letter-spacing: 0.5px;
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.section-title i {
|
||||
font-size: 16px;
|
||||
color: #1a3c6e;
|
||||
}
|
||||
|
||||
.flow-steps {
|
||||
padding: 8px 0 4px;
|
||||
}
|
||||
|
||||
.flow-steps >>> .el-step.is-wait .el-step__icon-inner,
|
||||
.flow-steps >>> .el-step.is-wait .el-step__title {
|
||||
color: #c0c4cc;
|
||||
}
|
||||
|
||||
.flow-steps >>> .el-step.is-process .el-step__icon-inner,
|
||||
.flow-steps >>> .el-step.is-process .el-step__title {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.flow-steps >>> .el-step.is-finish .el-step__icon-inner,
|
||||
.flow-steps >>> .el-step.is-finish .el-step__title {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.flow-steps >>> .el-step__description {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.current-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 6px;
|
||||
margin-top: 6px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px dashed #e0dcd6;
|
||||
}
|
||||
|
||||
.status-label {
|
||||
font-family: 'Georgia', 'Times New Roman', serif;
|
||||
font-size: 11px;
|
||||
color: #8c8c8c;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user