feat: 图库功能

This commit is contained in:
duan
2025-02-27 10:20:13 +08:00
parent 5f41da34fb
commit 9a16e09fa1
13 changed files with 541 additions and 202 deletions

View File

@@ -0,0 +1,103 @@
<template>
<div class="DataStatistics">
<div style="width: 200px;">
<el-icon class="iconStyle">
<UserFilled />
</el-icon>
<span>耗材种数</span>
<span>{{ datas.totalRow }}</span>
</div>
<div style="width: 300px;">
<el-icon class="iconStyle">
<UserFilled />
</el-icon>
<div>
<div><span>增加数量</span><span>0</span></div>
<div style="display: flex;">
<div>
<span>手动增加</span><span>0</span>
</div>
<span style="margin: 0 20px;color: #ccc;">|</span>
<div>
<span>入库</span><span>0</span>
</div>
</div>
</div>
</div>
<div style="width: 500px;">
<el-icon class="iconStyle">
<UserFilled />
</el-icon>
<div>
<div><span>减少数量</span><span>0</span></div>
<div style="display: flex;">
<div>
<span>手动减少</span><span>0</span>
</div>
<span style="margin: 0 20px;color: #ccc;">|</span>
<div>
<span>消耗</span><span>0</span>
</div>
<span style="margin: 0 20px;color: #ccc;">|</span>
<div>
<span>报损</span><span>0</span>
</div><span style="margin: 0 20px;color: #ccc;">|</span>
<div>
<span>出库</span><span>0</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import API from "@/api/product/index";
import { onMounted, reactive } from "vue";
onMounted(() => {
getPage();
})
let datas = reactive({
totalRow: 0
})
async function getPage() {
let res = await API.getPage();
datas.totalRow = res.totalRow
}
</script>
<style scoped lang="scss">
.DataStatistics {
border: 1px solid #e4e7ed;
background-color: #fff;
border-radius: 4px;
margin: 20px 0;
padding: 20px;
display: flex;
align-items: center;
justify-content: space-around;
>div {
height: 80px;
background-color: #f4f9ff;
display: flex;
align-items: center;
justify-content: space-around;
padding: 20px;
.iconStyle {
background-color: #d4e9fe;
border-radius: 50%;
padding: 6px;
font-size: 36px;
color: #3f9eff;
}
span {
color: #666;
font-size: 14px;
}
}
}
</style>