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.
285 lines
10 KiB
285 lines
10 KiB
1 year ago
|
<!-- 成品管理员首页 -->
|
||
|
|
<template>
|
||
|
|
<div class="row">
|
||
|
|
<div class="data">
|
||
|
|
<div class="small-data-item small-data-item1">
|
||
|
|
<div class="small-data-item-txt">
|
||
|
|
<div>今日到货计划(已发货)</div>
|
||
|
|
<div>{{ productData?.deliverPlanTodayCount || 0 }}<span>单</span></div>
|
||
|
|
</div>
|
||
|
|
<img src="../../../assets/imgs/icon1.png" alt="" class="img" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="two-row mt-14px">
|
||
|
|
<div class="data1 w-[47.3%]">
|
||
|
|
<div class="title">呆滞库存预警</div>
|
||
|
|
<el-table
|
||
|
|
:data="productData?.stagnantBalanceList"
|
||
|
|
style="width: 100%"
|
||
|
|
stripe
|
||
|
|
height="240px"
|
||
|
|
>
|
||
|
|
<el-table-column prop="itemCode" label="物料代码" width="180px" />
|
||
|
|
<el-table-column prop="batch" label="批次" width="180px" />
|
||
|
|
<el-table-column prop="packingNumber" label="包装号" width="180px" />
|
||
|
|
<el-table-column prop="containerNumber" label="器具代码" width="180px" />
|
||
|
|
<el-table-column prop="qty" label="数量" width="180px" />
|
||
|
|
<el-table-column prop="uom" label="计量单位" width="180px">
|
||
|
|
<template #default="scope">
|
||
|
|
{{ formatter(scope.row.uom, DICT_TYPE.UOM) }}
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="locationCode" label="库位代码" width="180px" />
|
||
|
|
<el-table-column prop="warehouseCode" label="仓库代码" width="180px" />
|
||
|
|
<el-table-column prop="inventoryStatus" label="库存状态" width="180px">
|
||
|
|
<template #default="scope">
|
||
|
|
{{ formatter(scope.row.inventoryStatus, DICT_TYPE.INVENTORY_STATUS) }}
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="locationGroupCode" label="库位组代码" width="180px" />
|
||
|
|
<el-table-column prop="areaCode" label="库区代码" width="180px" />
|
||
|
|
<el-table-column prop="erpLocationCode" label="ERP库位代码" width="180px" />
|
||
|
|
<el-table-column prop="altBatch" label="替代批次" width="180px" />
|
||
|
|
<el-table-column prop="arriveDate" label="到货日期" width="180px">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{ formatDate(scope.row.planDate) }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="produceDate" label="生产日期" width="180px">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{ formatDate(scope.row.planDate) }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="expireDate" label="失效日期" width="180px">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{ formatDate(scope.row.planDate) }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="ownerCode" label="货主代码" width="180px" />
|
||
|
|
<el-table-column prop="lockedQty" label="锁定数量" width="180px" />
|
||
|
|
<el-table-column prop="usableQty" label="可用数量" width="180px" />
|
||
|
|
<el-table-column prop="singlePrice" label="单价" width="180px" />
|
||
|
|
<el-table-column prop="amount" label="金额" width="180px" />
|
||
|
|
<el-table-column prop="putInTime" label="入库时间" width="180px">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{ formatDate(scope.row.planDate) }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
<div class="data1 w-[47.3%]">
|
||
|
|
<div class="title">超期库存预警</div>
|
||
|
|
<el-table
|
||
|
|
:data="productData?.overdueBalanceList"
|
||
|
|
style="width: 100%"
|
||
|
|
stripe
|
||
|
|
height="240px"
|
||
|
|
>
|
||
|
|
<el-table-column prop="itemCode" label="物料代码" width="180px" />
|
||
|
|
<el-table-column prop="batch" label="批次" width="180px" />
|
||
|
|
<el-table-column prop="packingNumber" label="包装号" width="180px" />
|
||
|
|
<el-table-column prop="containerNumber" label="器具代码" width="180px" />
|
||
|
|
<el-table-column prop="qty" label="数量" width="180px" />
|
||
|
|
<el-table-column prop="uom" label="计量单位" width="180px">
|
||
|
|
<template #default="scope">
|
||
|
|
{{ formatter(scope.row.uom, DICT_TYPE.UOM) }}
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="locationCode" label="库位代码" width="180px" />
|
||
|
|
<el-table-column prop="warehouseCode" label="仓库代码" width="180px" />
|
||
|
|
<el-table-column prop="inventoryStatus" label="库存状态" width="180px">
|
||
|
|
<template #default="scope">
|
||
|
|
{{ formatter(scope.row.inventoryStatus, DICT_TYPE.INVENTORY_STATUS) }}
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="locationGroupCode" label="库位组代码" width="180px" />
|
||
|
|
<el-table-column prop="areaCode" label="库区代码" width="180px" />
|
||
|
|
<el-table-column prop="erpLocationCode" label="ERP库位代码" width="180px" />
|
||
|
|
<el-table-column prop="altBatch" label="替代批次" width="180px" />
|
||
|
|
<el-table-column prop="arriveDate" label="到货日期" width="180px">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{ formatDate(scope.row.planDate) }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="produceDate" label="生产日期" width="180px">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{ formatDate(scope.row.planDate) }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="expireDate" label="失效日期" width="180px">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{ formatDate(scope.row.planDate) }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column prop="ownerCode" label="货主代码" width="180px" />
|
||
|
|
<el-table-column prop="lockedQty" label="锁定数量" width="180px" />
|
||
|
|
<el-table-column prop="usableQty" label="可用数量" width="180px" />
|
||
|
|
<el-table-column prop="singlePrice" label="单价" width="180px" />
|
||
|
|
<el-table-column prop="amount" label="金额" width="180px" />
|
||
|
|
<el-table-column prop="putInTime" label="入库时间" width="180px">
|
||
|
|
<template #default="scope">
|
||
|
|
<span>{{ formatDate(scope.row.planDate) }}</span>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="two-row mt-14px">
|
||
|
|
<div class="data1 w-[47.3%]">
|
||
|
|
<div class="title">高低储预警</div>
|
||
|
|
<el-table :data="tableData" style="width: 100%" stripe height="240px">
|
||
|
|
<el-table-column prop="title" label="标题" />
|
||
|
|
<el-table-column prop="name" label="发布人" />
|
||
|
|
<el-table-column prop="date" label="发布日期" />
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
<div class="data1 w-[47.3%]">
|
||
|
|
<div class="title">待处理任务</div>
|
||
|
|
<el-table :data="tableData" style="width: 100%" stripe height="240px">
|
||
|
|
<el-table-column prop="title" label="标题" />
|
||
|
|
<el-table-column prop="name" label="发布人" />
|
||
|
|
<el-table-column prop="date" label="发布日期" />
|
||
|
|
</el-table>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script lang="ts" setup>
|
||
|
|
import * as IndexApi from '@/api/home'
|
||
|
|
import { formatDate } from '@/utils/formatTime'
|
||
|
|
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
|
||
|
|
const tableData = [
|
||
|
|
{
|
||
|
|
date: '2016-05-03',
|
||
|
|
name: 'Tom',
|
||
|
|
title: 'Tom',
|
||
|
|
text: 'No. 189, Grove St, Los Angeles'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
date: '2016-05-02',
|
||
|
|
title: 'Tom',
|
||
|
|
name: 'Tom',
|
||
|
|
text: 'No. 189, Grove St, Los Angeles'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
date: '2016-05-04',
|
||
|
|
title: 'Tom',
|
||
|
|
name: 'Tom',
|
||
|
|
text: 'No. 189, Grove St, Los Angeles'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
date: '2016-05-01',
|
||
|
|
title: 'Tom',
|
||
|
|
name: 'Tom',
|
||
|
|
text: 'No. 189, Grove St, Los Angeles'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
date: '2016-05-01',
|
||
|
|
title: 'Tom',
|
||
|
|
name: 'Tom',
|
||
|
|
text: 'No. 189, Grove St, Los Angeles'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
date: '2016-05-01',
|
||
|
|
title: 'Tom',
|
||
|
|
name: 'Tom',
|
||
|
|
text: 'No. 189, Grove St, Los Angeles'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
// 获取成品管理员首页首页数据
|
||
|
|
const productData = ref()
|
||
|
|
const getProductData = async () => {
|
||
|
|
IndexApi.getProductData().then((res) => {
|
||
|
|
productData.value = res
|
||
|
|
})
|
||
|
|
}
|
||
|
|
const formatter = (type, dict) => {
|
||
|
|
let str = getStrDictOptions(dict).filter((item) => type == item.value)[0].label
|
||
|
|
return str
|
||
|
|
}
|
||
|
|
onMounted(async () => {
|
||
|
|
await getProductData()
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.title {
|
||
|
|
padding-bottom: 10px;
|
||
|
|
border-bottom: 1px solid #dedede;
|
||
|
|
position: relative;
|
||
|
|
padding-left: 10px;
|
||
|
|
&::after {
|
||
|
|
content: '';
|
||
|
|
position: absolute;
|
||
|
|
width: 4px;
|
||
|
|
height: 16px;
|
||
|
|
background: #3c7adf;
|
||
|
|
left: 0px;
|
||
|
|
top: 3px;
|
||
|
|
border-radius: 8px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.data {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
.small-data-item {
|
||
|
|
width: 25%;
|
||
|
|
height: 90px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
border-radius: 6px;
|
||
|
|
color: white;
|
||
|
|
padding: 0px 20px;
|
||
|
|
.small-data-item-txt {
|
||
|
|
flex: 1;
|
||
|
|
div {
|
||
|
|
&:nth-child(1) {
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
&:nth-child(2) {
|
||
|
|
font-size: 26px;
|
||
|
|
margin-top: 4px;
|
||
|
|
font-weight: bold;
|
||
|
|
span {
|
||
|
|
font-size: 14px;
|
||
|
|
padding-left: 6px;
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.img {
|
||
|
|
width: 40px;
|
||
|
|
opacity: 0.5;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.small-data-item1 {
|
||
|
|
background: linear-gradient(to left, #fd817d, #fcad80);
|
||
|
|
}
|
||
|
|
.small-data-item2 {
|
||
|
|
background: linear-gradient(to left, #46c6fa, #336bfe);
|
||
|
|
}
|
||
|
|
.small-data-item3 {
|
||
|
|
background: linear-gradient(to left, #96a6cc, #595f82);
|
||
|
|
}
|
||
|
|
.small-data-item4 {
|
||
|
|
background: linear-gradient(to left, #08dcd5, #46e2bb);
|
||
|
|
}
|
||
|
|
.small-data-item5 {
|
||
|
|
background: linear-gradient(to left, #f4c46b, #ffb313);
|
||
|
|
}
|
||
|
|
.small-data-item6 {
|
||
|
|
background: linear-gradient(to left, #6eccf8, #02acfd);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.two-row {
|
||
|
|
display: flex;
|
||
|
|
align-content: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
.data1 {
|
||
|
|
background: white;
|
||
|
|
padding: 14px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|