<template>
|
<div class="input-out-material-info" @click="materialInfoClick">
|
<div class="card-t">
|
<div class="card-t-t card_drop">
|
<el-popover :width="200" placement="top-start" trigger="click">
|
<template #reference>
|
{{ material.materialId }}
|
</template>
|
{{ material.materialId }}
|
</el-popover>
|
</div>
|
<div class="card-t-b">
|
<!-- TODO: 接口缺失数据, 待添加-->
|
<!-- 设备12-->
|
<!-- <el-icon class="right-arrow">-->
|
<!-- <Right />-->
|
<!-- </el-icon>-->
|
<!-- 设备13-->
|
</div>
|
</div>
|
<div class="card-b">
|
<div class="card_drop card-b-l">
|
<el-popover :width="200" placement="top-start" trigger="click">
|
<template #reference>
|
{{ material.materialName }}
|
</template>
|
{{ material.materialName }}
|
</el-popover>
|
</div>
|
<div class="card-b-r">
|
<el-popover v-if="material.date" popper-class="card-info" :width="110" placement="top" trigger="click">
|
<template #reference> {{ material.amount }} {{ material.unit }} </template>
|
预计{{ material.date }}分钟送达
|
</el-popover>
|
<div v-else>{{ material.amount }} {{ material.unit }}</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import type { Material } from '@/api/task'
|
import { toRefs } from 'vue'
|
export interface InputOutMaterialInfoProps {
|
material: Material
|
// TODO: 接口还不支持, 预留
|
type?: '已送达' | '运输中'
|
}
|
|
const props = defineProps<InputOutMaterialInfoProps>()
|
const { material } = toRefs(props)
|
const emits = defineEmits<{
|
detailClick: [material: Material]
|
}>()
|
function materialInfoClick() {
|
emits('detailClick', material.value)
|
}
|
</script>
|
|
<style scoped lang="scss">
|
$status-default: #13235a;
|
$status-running: #f76c0f;
|
$status-ready: #13235a;
|
$status-done: #ffcc00;
|
|
.input-out-material-info {
|
width: calc(50% - 10px);
|
height: auto;
|
border-radius: 4px;
|
color: #333;
|
overflow: hidden;
|
float: left;
|
font-size: 15px;
|
background: #fff;
|
margin-right: 10px;
|
margin-bottom: 10px;
|
position: relative;
|
cursor: pointer;
|
|
.card_drop {
|
width: 100%;
|
-webkit-box-orient: vertical;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
cursor: pointer;
|
}
|
.card-t {
|
width: 100%;
|
height: auto;
|
line-height: 18px;
|
font-size: 12px;
|
color: #333;
|
padding: 3px 5px;
|
background: $status-done;
|
text-align: left;
|
.card-t-t {
|
width: 100%;
|
font-size: 16px;
|
}
|
}
|
.card-b {
|
width: 100%;
|
height: 36px;
|
line-height: 20px;
|
font-size: 14px;
|
padding: 8px 5px;
|
.card-b-l {
|
width: calc(100% - 70px);
|
float: left;
|
font-size: 13px;
|
}
|
.card-b-r {
|
width: 70px;
|
float: right;
|
text-align: right;
|
}
|
}
|
}
|
</style>
|
<style lang="scss">
|
.el-popover.el-popper.card-info {
|
min-width: 110px;
|
background: red !important;
|
font-size: 12px;
|
color: #fff;
|
border: 0;
|
border-radius: 10px;
|
// height:20px!important;
|
line-height: 8px !important;
|
.el-popper__arrow::before {
|
background: red !important;
|
border-color: red;
|
}
|
}
|
</style>
|
