<template>
|
<div class="material-details">
|
<BaseModal v-model="modelData" :wider="true" @close="closeModal">
|
<template #title>物料详情 </template>
|
<div class="details-box">
|
<div v-if="material" class="details-t">
|
<div class="details-t-t">{{ material.materialId }}</div>
|
<div class="details-t-b">
|
<div class="details-t-b-l">
|
<div class="item">物料名称：{{ material.materialName }}</div>
|
<div class="item">数量：{{ material.amount }}</div>
|
<div class="item">物料规格：{{ material.amount }}</div>
|
<div class="item">物料类型：{{ material.amount }}</div>
|
</div>
|
<!-- TODO: 物料送达缺接口-->
|
<BigButton v-if="false" class="btn" bg-color="#03d203f0">已送达</BigButton>
|
</div>
|
</div>
|
|
<!-- TODO: 物料送达缺接口-->
|
<div v-if="false" class="details-b">
|
<div class="details-b-t">运输详情</div>
|
|
<div class="details-b-b">
|
<el-scrollbar always class="scroller">
|
<el-steps finish-status="success" class="steps" direction="vertical">
|
<el-step v-for="(item, index) in materialObj.materialFlow" :key="index" icon="">
|
<template #title>
|
{{ item.label }}
|
</template>
|
<template #description>
|
<div class="details-date">{{ item.date }}</div>
|
<div class="details-name">
|
{{ item.name }}
|
<span>{{ item.deviceName }}</span>
|
</div>
|
</template>
|
</el-step>
|
</el-steps>
|
</el-scrollbar>
|
</div>
|
</div>
|
</div>
|
</BaseModal>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { useVModel } from '@vueuse/core'
|
import BigButton from '@/views/dashboard/components/BigButton.vue'
|
import type { Material } from '@/api/task'
|
export interface MaterialDetailsProps {
|
material?: Material
|
modelValue: boolean
|
}
|
const props = withDefaults(defineProps<MaterialDetailsProps>(), {
|
material: undefined,
|
modelValue: false
|
})
|
const emit = defineEmits<{
|
'update:modelValue': [show: boolean]
|
}>()
|
const modelData = useVModel(props, 'modelValue', emit)
|
|
function closeModal() {
|
modelData.value = false
|
}
|
// 假数据
|
const materialObj = {
|
materialFlow: [
|
{
|
label: '已送达',
|
date: '2023-07-11',
|
name: '张三',
|
deviceName: '设备名称'
|
},
|
{
|
label: '已送达',
|
date: '2023-07-11',
|
name: '张三',
|
deviceName: '设备名称'
|
},
|
{
|
label: '已送达',
|
date: '2023-07-11',
|
name: '张三',
|
deviceName: '设备名称'
|
},
|
{
|
label: '已送达',
|
date: '2023-07-11',
|
name: '张三',
|
deviceName: '设备名称'
|
}
|
]
|
}
|
</script>
|
<style scoped lang="scss">
|
$status-default: #03d203f0;
|
$status-running: #33ccff;
|
$status-ready: #13235a;
|
$status-done: #0dfde6;
|
.details-box {
|
height: 600px;
|
.details-t {
|
width: 100%;
|
padding: 10px 30px;
|
height: 100px;
|
color: $status-done;
|
font-size: 16px;
|
.details-t-t {
|
font-size: 23px;
|
line-height: 30px;
|
font-weight: bold;
|
margin-bottom: 10px;
|
}
|
.details-t-b {
|
width: 100%;
|
height: 90px;
|
padding: 0 30px 10px;
|
.details-t-b-l {
|
float: left;
|
width: calc(100% - 110px);
|
.item {
|
width: 50%;
|
float: left;
|
}
|
}
|
.btn {
|
width: 110px;
|
float: right;
|
font-size: 14px;
|
height: 35px;
|
line-height: 35px;
|
}
|
}
|
}
|
.details-b {
|
width: calc(100% - 60px);
|
padding: 10px 20px;
|
background: $status-ready;
|
border-radius: 4px;
|
margin: 20px 30px 10px;
|
height: calc(100% - 140px);
|
color: #fff;
|
.details-b-t {
|
font-size: 17px;
|
line-height: 30px;
|
height: 30px;
|
width: 100%;
|
margin-bottom: 20px;
|
}
|
.details-b-b {
|
width: 100%;
|
height: calc(100% - 60px);
|
overflow-y: auto;
|
padding: 0 20px;
|
.steps {
|
height: 100%;
|
.el-step__icon {
|
width: 16px;
|
height: 16px;
|
}
|
:deep(.el-step__icon.is-text) {
|
border-color: $status-running !important;
|
}
|
:deep(.el-step__icon-inner) {
|
display: none !important;
|
}
|
.el-step__title {
|
line-height: 25px;
|
font-size: 18px;
|
}
|
// .el-step__title.is-process {
|
// color: #a8abb2;
|
// }
|
}
|
.details-date {
|
color: #fff;
|
font-size: 14px;
|
line-height: 20px;
|
margin-top: 5px;
|
}
|
.details-name {
|
color: #fff;
|
font-size: 14px;
|
line-height: 20px;
|
margin: 10px 0 20px;
|
span {
|
margin-left: 15px;
|
}
|
}
|
}
|
}
|
}
|
|
.scroller {
|
padding: 4px 16px;
|
}
|
</style>
|
