88 lines
2.9 KiB
Vue
88 lines
2.9 KiB
Vue
<template xmlns="http://www.w3.org/1999/html">
|
|
<Mask :width="1100" :height="600" :is-show="show" title="过期商品详情" @close="close" :show-footer="true">
|
|
<template #default>
|
|
<div style="height: 100%;padding: 24px">
|
|
<el-table border :data="tableData" style="width: 100%;height: 100%" class="table" :header-cell-style="{ backgroundColor: '#F1F5FB' }">
|
|
<el-table-column label="名称" prop="name" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="剩余天数" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
<span :class="[scope.row.remaining_days <0?'danger':'warn']">
|
|
{{scope.row.remaining_days <0?'已过期':scope.row.remaining_days+"天后到期"}}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="商品数量" prop="" show-overflow-tooltip>
|
|
<template #default="scope">
|
|
{{
|
|
scope.row.whole_number
|
|
}}{{ scope.row.packaging_unit }}
|
|
<span v-if="scope.row.fragment_number>0">
|
|
{{ scope.row.fragment_number }}{{ scope.row.min_packaging_unit }}
|
|
</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="过期时间" prop="expiry_date"></el-table-column>
|
|
<el-table-column label="采购单号" prop="inventory_purchase_code" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="批次号" prop="production_batch_code" show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="生产日期" prop="production_date" show-overflow-tooltip></el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
<template #footer>
|
|
<div class="footer">
|
|
<el-pagination
|
|
background
|
|
layout="prev, pager, next"
|
|
:current-page="pageNum"
|
|
:page-size="pageSize"
|
|
:total="total"
|
|
@current-change="changePage"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</Mask>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import Mask from "@/components/common/Mask.vue";
|
|
import {ref} from "vue";
|
|
import CloseBtn from "@/components/CloseBtn.vue";
|
|
import {post} from "@/utils/request.ts";
|
|
const tableData = ref<any>([]);
|
|
const show = ref(false);
|
|
const init = () => {
|
|
show.value = true;
|
|
post("statistics/expiryDateWarning",{pageNum: pageNum.value, pageSize: pageSize.value}).then((res: any) => {
|
|
tableData.value = res.list
|
|
total.value = res.total_count
|
|
})
|
|
};
|
|
defineExpose({init})
|
|
const close = () => {
|
|
show.value = false;
|
|
tableData.value = []
|
|
};
|
|
const pageNum = ref(1);
|
|
const pageSize = ref(20);
|
|
const total = ref(0);
|
|
const changePage = (value: any) => {
|
|
pageNum.value = value
|
|
init()
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
.table{
|
|
.danger{
|
|
color: #FF282E;
|
|
}
|
|
.warn{
|
|
color: #F69C51;
|
|
}
|
|
}
|
|
.footer {
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
padding: 0 24px;
|
|
}
|
|
</style> |