|
|
@@ -49,15 +49,18 @@
|
|
|
<div class="d-flex flex1 ov-hd">
|
|
|
<div class="left-step-box over-auto" style="width: 230px">
|
|
|
<div class="steps-box">
|
|
|
- <template v-for="(item, index) in info?.logList" :key="index">
|
|
|
- <div class="steps-item d-flex">
|
|
|
+ <template v-for="(item, index) in test_order_process" :key="index">
|
|
|
+ <div class="steps-item d-flex" :class="{ 'checked': mapStatus(item.value)?.checked, 'active': mapStatus(item.value)?.active }">
|
|
|
<div class="pr-16 steps-icon-box p-rtv">
|
|
|
<div class="steps-line"></div>
|
|
|
- <el-icon class="steps-icon"><CircleCheckFilled /></el-icon>
|
|
|
+ <div v-if="mapStatus(item.value)?.active" class="steps-ball-active">
|
|
|
+ <el-icon><MoreFilled /></el-icon>
|
|
|
+ </div>
|
|
|
+ <el-icon v-else class="steps-icon"><CircleCheckFilled /></el-icon>
|
|
|
</div>
|
|
|
<div class="steps-content d-flex flex-cln flex1 ov-hd">
|
|
|
- <view class="f-s-16 c-666 mb-5">{{ item.operationDescription }}</view>
|
|
|
- <view class="steps-desc">{{ item?.operationTime }}</view>
|
|
|
+ <view class="f-s-16 mb-5">{{ mapStatus(item.value)?.operationDescription || item.label }}</view>
|
|
|
+ <view class="steps-desc">{{ mapStatus(item.value)?.operationTime }}</view>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -174,12 +177,28 @@ import { VxeTablePropTypes } from 'vxe-table';
|
|
|
import { colNoData } from '@/utils/noData';
|
|
|
import { FileLook } from '@/views/models';
|
|
|
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
|
|
|
-const { test_order_status_bg, sf_router_code } = toRefs<any>(proxy?.useDict('test_order_status_bg', 'sf_router_code'));
|
|
|
+const { test_order_status_bg, sf_router_code, test_order_process } = toRefs<any>(proxy?.useDict('test_order_status_bg', 'sf_router_code', 'test_order_process'));
|
|
|
const vxeTableRef = ref<any>(null);
|
|
|
const list = ref<any[]>([]);
|
|
|
const props = defineProps({
|
|
|
info: propTypes.any.def(null)
|
|
|
});
|
|
|
+const mapStatus = (value) => {
|
|
|
+ const logoIndex = props?.info?.logList.findIndex(({ operationType }) => operationType === value)
|
|
|
+ if (logoIndex !== -1) {
|
|
|
+ return {
|
|
|
+ ...props?.info?.logList[logoIndex],
|
|
|
+ checked: logoIndex < props?.info?.logList.length - 1,
|
|
|
+ active: logoIndex === props?.info?.logList.length - 1
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ return {
|
|
|
+ checked: false,
|
|
|
+ active: false
|
|
|
+ }
|
|
|
+ }
|
|
|
+// return
|
|
|
+}
|
|
|
// 合并表格
|
|
|
const mergeCells = ref<VxeTablePropTypes.MergeCells>([
|
|
|
{ row: 0, col: 0, rowspan: 2, colspan: 0 },
|
|
|
@@ -233,6 +252,28 @@ const steps = ref([
|
|
|
border-color: transparent;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ &.checked {
|
|
|
+ .steps-icon {
|
|
|
+ color: var(--el-color-primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .steps-content {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.active {
|
|
|
+ .steps-icon {
|
|
|
+ color: var(--el-color-primary);
|
|
|
+ }
|
|
|
+
|
|
|
+ .steps-content {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .steps-content {
|
|
|
+ color: #ebebeb;
|
|
|
}
|
|
|
.steps-desc {
|
|
|
margin-bottom: 20px;
|
|
|
@@ -241,7 +282,7 @@ const steps = ref([
|
|
|
}
|
|
|
.steps-icon {
|
|
|
font-size: 22px;
|
|
|
- color: #2c9049;
|
|
|
+ color: #cbcbcb;
|
|
|
}
|
|
|
|
|
|
.steps-line {
|
|
|
@@ -252,5 +293,16 @@ const steps = ref([
|
|
|
width: 1px;
|
|
|
border: 1px dashed #f4f4f4;
|
|
|
}
|
|
|
+ .steps-ball-active {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ border-radius: 50%;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #edb72f;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
