<template>
|
<div class="material-details">
|
<BaseModal v-model="modelData" :wider="true" @close="closeModal">
|
<template #title>物料详情 </template>
|
<div class="details-box">
|
<div class="details-t">
|
<div class="details-t-t">{{ materialObj.form.materialId }}</div>
|
<div class="details-t-b">
|
<div class="details-t-b-l">
|
<div class="item">物料名称：{{ materialObj.form.materialName }}</div>
|
<div class="item">数量：{{ materialObj.form.amount }}</div>
|
<div class="item">物料规格：{{ materialObj.form.amount }}</div>
|
<div class="item">物料类型：{{ materialObj.form.amount }}</div>
|
</div>
|
<BigButton class="btn" bg-color="#03d203f0">已送达</BigButton>
|
</div>
|
</div>
|
<div class="details-b">
|
<el-scrollbar always class="scroller">
|
<div class="details-b-t">运输详情</div>
|
<div class="details-b-b">
|
<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>
|
{{ item.date }}
|
{{ item.name }}
|
{{ item.deviceName }}
|
</template>
|
</el-step>
|
</el-steps>
|
</div>
|
</el-scrollbar>
|
</div>
|
</div>
|
</BaseModal>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { useVModel } from '@vueuse/core'
|
import BigButton from '@/views/dashboard/components/BigButton.vue'
|
import { ref } from 'vue'
|
export interface MaterialDetailsProps {
|
modelValue: boolean
|
}
|
const props = withDefaults(defineProps<MaterialDetailsProps>(), {
|
modelValue: false
|
})
|
const emit = defineEmits<{
|
'update:modelValue': [show: boolean]
|
}>()
|
const modelData = useVModel(props, 'modelValue', emit)
|
|
function closeModal() {
|
modelData.value = false
|
}
|
const materialObj = {
|
form: {
|
materialId: '1111',
|
materialName: '输入名称',
|
amount: 10,
|
unit: '个',
|
date: 10
|
},
|
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: #f76c0f;
|
$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%;
|
}
|
.details-b-b {
|
width: 100%;
|
height: calc(100% - 30px);
|
overflow-x: auto;
|
margin-top: -5px;
|
padding: 0 20px;
|
.steps {
|
height: 100%;
|
.el-step__icon {
|
width: 16px;
|
height: 16px;
|
}
|
.el-step__title {
|
line-height: 25px;
|
font-size: 14px;
|
}
|
.el-step__title.is-process {
|
color: #a8abb2;
|
}
|
}
|
}
|
}
|
}
|
|
.scroller {
|
padding: 4px 16px;
|
}
|
</style>
|
