<template>
|
<div class="input-materials-list">
|
<div class="materials-t">
|
<div class="materials-t-l">输入资源</div>
|
<BigButton class="btn" bg-color="rgba(255, 11, 142, 1)">物料呼叫</BigButton>
|
</div>
|
<el-scrollbar always class="scroller">
|
<div class="materials-b">
|
<div v-for="item in props.materialList" :key="item.materialId">
|
<InputOutMaterialInfo :material="item" @detail-click="onDetailClick"></InputOutMaterialInfo>
|
</div>
|
</div>
|
</el-scrollbar>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import InputOutMaterialInfo from '@/views/dashboard/components/InputOutMaterialInfo.vue'
|
import BigButton from '@/views/dashboard/components/BigButton.vue'
|
import type { Material } from '@/api/task'
|
|
const props = defineProps<{
|
materialList?: Material[]
|
}>()
|
const emits = defineEmits<{
|
detailClick: [material: Material]
|
}>()
|
|
function onDetailClick(material: Material) {
|
emits('detailClick', material)
|
}
|
</script>
|
|
<style scoped lang="scss">
|
// #ff0000
|
$status-default: rgba(255, 11, 142, 1);
|
$status-running: #f76c0f;
|
$status-ready: #13235a;
|
$status-done: #0059ffd0;
|
$status-star: yellow;
|
|
.input-materials-list {
|
width: 50%;
|
height: 100%;
|
padding: 0px 0 5px;
|
color: #fff;
|
overflow: hidden;
|
float: left;
|
border-right: 1px solid #efefef;
|
box-sizing: border-box;
|
.materials-t {
|
width: 100%;
|
height: 35px;
|
line-height: 35px;
|
margin-bottom: 15px;
|
.materials-t-l {
|
float: left;
|
font-weight: bold;
|
font-size: 16px;
|
}
|
.btn {
|
padding: 0;
|
width: 90px;
|
float: right;
|
font-size: 14px;
|
height: 35px;
|
line-height: 35px;
|
margin-right: 10px;
|
}
|
}
|
|
.materials-b {
|
width: 100%;
|
height: auto;
|
overflow-y: auto;
|
padding-right: 5px;
|
}
|
}
|
</style>
|
