140 lines
3.5 KiB
Vue
140 lines
3.5 KiB
Vue
<template>
|
||
<div class="DataStatistics">
|
||
<div style="width: 200px">
|
||
<el-icon class="iconStyle">
|
||
<UserFilled />
|
||
</el-icon>
|
||
<span>耗材种数</span>
|
||
<span class="font-700">{{ data.totalRow || 0 }}</span>
|
||
</div>
|
||
<div style="width: 300px">
|
||
<el-icon class="iconStyle">
|
||
<UserFilled />
|
||
</el-icon>
|
||
<div>
|
||
<div>
|
||
<span>增加数量：</span>
|
||
<span class="num" @click="refStockHistoryShow('addCountNumber')">
|
||
{{ data.inSumTotal || 0 }}
|
||
</span>
|
||
</div>
|
||
<div style="display: flex">
|
||
<div>
|
||
<span>手动增加：</span>
|
||
<span class="num" @click="refStockHistoryShow('addNumber')">
|
||
{{ data.winInNum || 0 }}
|
||
</span>
|
||
</div>
|
||
<span style="margin: 0 20px; color: #ccc">|</span>
|
||
<div>
|
||
<span>入库：</span>
|
||
<span class="num" @click="refStockHistoryShow('manualIn')">
|
||
{{ data.stockInNum || 0 }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="width: 500px">
|
||
<el-icon class="iconStyle">
|
||
<UserFilled />
|
||
</el-icon>
|
||
<div>
|
||
<div>
|
||
<span>减少数量：</span>
|
||
<span class="num" @click="refStockHistoryShow('subCountNumber')">
|
||
{{ data.outSumTotal || 0 }}
|
||
</span>
|
||
</div>
|
||
<div style="display: flex">
|
||
<div>
|
||
<span>手动减少：</span>
|
||
<span class="num" @click="refStockHistoryShow('subNumber')">
|
||
{{ data.lossOutNum || 0 }}
|
||
</span>
|
||
</div>
|
||
<span style="margin: 0 20px; color: #ccc">|</span>
|
||
<div>
|
||
<span>消耗：</span>
|
||
<span class="num" @click="refStockHistoryShow('saleNumber')">
|
||
{{ data.consumeNum || 0 }}
|
||
</span>
|
||
</div>
|
||
<span style="margin: 0 20px; color: #ccc">|</span>
|
||
<div>
|
||
<span>报损：</span>
|
||
<span class="num" @click="refStockHistoryShow('lossNumber')">
|
||
{{ data.damageNum || 0 }}
|
||
</span>
|
||
</div>
|
||
<span style="margin: 0 20px; color: #ccc">|</span>
|
||
<div>
|
||
<span>出库：</span>
|
||
<span class="num" @click="refStockHistoryShow('manualOut')">
|
||
{{ data.stockOutNum || 0 }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<stockHistory ref="refStockHistory"></stockHistory>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import stockHistory from "./stockHistory.vue";
|
||
const props = defineProps({
|
||
data: {
|
||
type: Object,
|
||
default: () => {
|
||
return {};
|
||
},
|
||
},
|
||
});
|
||
const refStockHistory = ref();
|
||
function refStockHistoryShow(key) {
|
||
refStockHistory.value.show(key);
|
||
}
|
||
</script>
|
||
|
||
|
||
<style scoped lang="scss">
|
||
.DataStatistics {
|
||
border: 1px solid #e4e7ed;
|
||
background-color: #fff;
|
||
border-radius: 4px;
|
||
margin-top: 12px;
|
||
margin-bottom: 12px;
|
||
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;
|
||
&.num {
|
||
color: #3f9eff;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |