You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
2.8 KiB
108 lines
2.8 KiB
4 months ago
|
<template>
|
||
|
|
<a-steps direction="vertical" :current="size">
|
||
|
|
<template v-for="(item, index) in dataSource" :key="index">
|
||
|
|
<a-step>
|
||
|
|
<template #icon>
|
||
|
|
<img :style="{ width: item.status === '2' ? '19px' : '20px' }" :src="getSrc(item)" />
|
||
|
|
</template>
|
||
|
|
<template #description>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
width: 400px;
|
||
|
|
min-height: 0px;
|
||
|
|
background-color: #f8fafc;
|
||
|
|
margin-left: 20px;
|
||
|
|
border-radius: 4px; /* 设置圆角半径 */
|
||
|
|
padding: 12px;
|
||
|
|
">
|
||
|
|
<div style="width: 100%; height: 30px; display: flex; position: relative">
|
||
|
|
<a-tag
|
||
|
|
style="width: 60px; height: 20px; text-align: center"
|
||
|
|
:color="getColor(item)"
|
||
|
|
>{{ getStatus(item) }}</a-tag
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
style="
|
||
|
|
position: absolute;
|
||
|
|
left: 35%;
|
||
|
|
top: -2px;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
color: #3a3a3a;
|
||
|
|
"
|
||
|
|
>{{ item.name }}</div
|
||
|
|
>
|
||
|
|
<div style="position: absolute; right: 10px; top: -2px; color: #ff7602"
|
||
|
|
>2024-03-11 11:30:06</div
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
<div style="width: 100%; color: #3a3a3a; height: 25px; overflow: auto">
|
||
|
|
工单已完成并通过验收</div
|
||
|
|
>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</a-step>
|
||
|
|
</template>
|
||
|
|
</a-steps>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import { toRefs } from 'vue';
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
dataSource: any;
|
||
|
|
size: any;
|
||
|
|
};
|
||
|
|
const props = withDefaults(defineProps<Props>(), {});
|
||
|
|
const getColor = (item: any) => {
|
||
|
|
switch (item.status) {
|
||
|
|
case '0':
|
||
|
|
return '#ff7602';
|
||
|
|
case '1':
|
||
|
|
return '#00a1e6';
|
||
|
|
case '2':
|
||
|
|
return '#04d919';
|
||
|
|
case '3':
|
||
|
|
return '#d9001b';
|
||
|
|
case '4':
|
||
|
|
return '#a6a6a6';
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const getSrc = (item: any) => {
|
||
|
|
return '../../../../src/icon/status-' + item.status + '.svg';
|
||
|
|
};
|
||
|
|
const getStatus = (item: any) => {
|
||
|
|
switch (item.status) {
|
||
|
|
case '0':
|
||
|
|
return '待处理';
|
||
|
|
case '1':
|
||
|
|
return '处理中';
|
||
|
|
case '2':
|
||
|
|
return '已完成';
|
||
|
|
case '3':
|
||
|
|
return '超时';
|
||
|
|
case '4':
|
||
|
|
return '已关闭';
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const { dataSource } = toRefs(props);
|
||
|
|
const { size } = toRefs(props);
|
||
|
|
|
||
|
|
defineExpose({});
|
||
|
|
</script>
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.ant-steps-vertical {
|
||
|
|
margin-left: 20px;
|
||
|
|
margin-top: 10px;
|
||
|
|
}
|
||
|
|
:deep(.ant-steps-item-tail) {
|
||
|
|
position: absolute !important;
|
||
|
|
top: -10px !important;
|
||
|
|
left: 16px !important;
|
||
|
|
width: 1px !important;
|
||
|
|
height: 150% !important;
|
||
|
|
}
|
||
|
|
:deep(.ant-steps-item) {
|
||
|
|
margin-top: 20px !important;
|
||
|
|
}
|
||
|
|
</style>
|