1
This commit is contained in:
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<view class="hr-page" style="background-color:#F3F4F6">
|
||||
|
||||
<hr-statusbar bg="#FFFFFF"></hr-statusbar>
|
||||
|
||||
<view class="wk-nav">
|
||||
<text class="wk-nav-t">库存查询</text>
|
||||
<view class="wk-nav-a" @click="onExport">
|
||||
<x-icon name="arrow-up-down-line" color="#6B7280" font-size="16"></x-icon>
|
||||
<text class="wk-nav-a-t">导出</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="hr-flow">
|
||||
<scroll-view class="hr-scroll" :scroll-y="true" :show-scrollbar="false">
|
||||
<view class="hr-body">
|
||||
|
||||
<!-- 搜索(xSearch) -->
|
||||
<x-search v-model="keyword" placeholder="搜索物资名称 / 编码" round="24rpx" height="84rpx"
|
||||
:border="searchBorder" input-bg-color="#FFFFFF" icon-color="#9CA3AF" font-color="#1F2937"
|
||||
:show-cancel="false"></x-search>
|
||||
|
||||
<view class="st-bar">
|
||||
<view class="st-cell">
|
||||
<text class="st-b">128</text>
|
||||
<text class="st-s">物资品类</text>
|
||||
</view>
|
||||
<view class="st-sep"></view>
|
||||
<view class="st-cell">
|
||||
<text class="st-b" style="color:#DC2626">6</text>
|
||||
<text class="st-s">低库存预警</text>
|
||||
</view>
|
||||
<view class="st-sep"></view>
|
||||
<view class="st-cell">
|
||||
<text class="st-b" style="color:#2563EB">14</text>
|
||||
<text class="st-s">借用中</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- ============ 库存预警 ============ -->
|
||||
<hr-sec title="库存预警" :more="warnList.length + ' 项 ›'"></hr-sec>
|
||||
<hr-card variant="danger">
|
||||
<hr-lrow v-for="(w, i) in warnList" :key="i" :icon="w.icon" :theme="w.low ? 'red' : 'amb'"
|
||||
:title="w.name" :sub="w.spec" :value="w.value" :value-theme="w.low ? 'red' : 'amb'"
|
||||
:value-bold="true" :is-last="i == warnList.length - 1" @click="openGoods(w)"></hr-lrow>
|
||||
</hr-card>
|
||||
|
||||
<!-- ============ 全部物资 ============ -->
|
||||
<hr-sec title="全部物资" more="按库存排序 ›"></hr-sec>
|
||||
<hr-card variant="list">
|
||||
<hr-lrow v-for="(s, i) in shownAll" :key="i" :icon="s.icon"
|
||||
:theme="s.low ? 'amb' : 'pri'" :title="s.name" :sub="s.spec" :value="s.value"
|
||||
:value-theme="s.valueTheme" :value-bold="true" :value-size="'26rpx'"
|
||||
:is-last="i == shownAll.length - 1" @click="openGoods(s)"></hr-lrow>
|
||||
</hr-card>
|
||||
|
||||
<hr-empty v-if="shownAll.length == 0" icon="⌕" title="没有匹配的物资"
|
||||
sub="换个物资名称或编码试试"></hr-empty>
|
||||
|
||||
<view style="height:28rpx"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 加载中覆盖层(组件库 xLoading) -->
|
||||
<view v-if="loading" class="hr-loading-mask">
|
||||
<x-loading label="加载中…" :icon-size="'44rpx'" :text-size="'26rpx'" :vertical="true" color="#2563EB"
|
||||
text-color="#6B7280"></x-loading>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<hr-tabbar :active="1"></hr-tabbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="uts" setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { stockWarn, stockAll } from '@/mock/index.uts'
|
||||
import { HrStockItem } from '@/mock/types.uts'
|
||||
import { navTo } from '@/utils/nav.uts'
|
||||
import { mockRequest } from '@/utils/request.uts'
|
||||
|
||||
/**
|
||||
* s24 库存查询(仓管 Tab「仓库」)
|
||||
* 库存预警自动置顶,支持关键字过滤。
|
||||
*/
|
||||
const loading = ref(true)
|
||||
const keyword = ref('')
|
||||
|
||||
/**
|
||||
* xSearch 的 border 是「数组」prop,固定 3 项 = [宽度, 线型, 颜色],
|
||||
* 少于 3 项内部直接返回 none。设计稿搜索框为 1px solid #E5E7EB。
|
||||
*/
|
||||
const searchBorder : string[] = ['1px', 'solid', '#E5E7EB']
|
||||
|
||||
onLoad(() => {
|
||||
mockRequest(() => {
|
||||
loading.value = false
|
||||
})
|
||||
})
|
||||
|
||||
const warnList = ref<HrStockItem[]>(stockWarn)
|
||||
const allList = ref<HrStockItem[]>(stockAll)
|
||||
|
||||
const shownAll = computed(() : HrStockItem[] => {
|
||||
if (keyword.value == '') { return allList.value }
|
||||
const kw = keyword.value.toLowerCase()
|
||||
const arr : HrStockItem[] = []
|
||||
for (let i = 0; i < allList.value.length; i++) {
|
||||
if (allList.value[i].name.toLowerCase().indexOf(kw) > -1) { arr.push(allList.value[i]) }
|
||||
}
|
||||
return arr
|
||||
})
|
||||
|
||||
function openGoods(s : HrStockItem) : void {
|
||||
navTo('/pages/warehouse/goods-detail?name=' + s.name)
|
||||
}
|
||||
|
||||
function onExport() : void {
|
||||
uni.showToast({ title: '已生成库存清单 Excel', icon: 'none' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.wk-nav {
|
||||
height: 96rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding-left: 32rpx;
|
||||
padding-right: 32rpx;
|
||||
background-color: #FFFFFF;
|
||||
border-bottom: 2rpx solid #F3F4F6;
|
||||
}
|
||||
|
||||
.wk-nav-t {
|
||||
font-size: 33.6rpx;
|
||||
font-weight: bold;
|
||||
color: #1F2937;
|
||||
}
|
||||
|
||||
.wk-nav-a {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.wk-nav-a-t {
|
||||
font-size: 29.2rpx;
|
||||
color: #6B7280;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
.st-srch {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background-color: #FFFFFF;
|
||||
border: 2rpx solid #E5E7EB;
|
||||
border-radius: 22rpx;
|
||||
height: 92rpx;
|
||||
padding: 0rpx 24rpx 0rpx 24rpx;
|
||||
}
|
||||
|
||||
.st-srch-input {
|
||||
flex: 1;
|
||||
font-size: 29.2rpx;
|
||||
color: #1F2937;
|
||||
height: 88rpx;
|
||||
padding: 0rpx 18rpx 0rpx 18rpx;
|
||||
}
|
||||
|
||||
.st-bar {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: #FFFFFF;
|
||||
border: 2rpx solid #E5E7EB;
|
||||
border-radius: 26rpx;
|
||||
padding: 26rpx 8rpx 26rpx 8rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.st-cell {
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.st-b {
|
||||
font-size: 44.8rpx;
|
||||
font-weight: bold;
|
||||
color: #1F2937;
|
||||
}
|
||||
|
||||
.st-s {
|
||||
font-size: 23.6rpx;
|
||||
color: #6B7280;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.st-sep {
|
||||
width: 2rpx;
|
||||
height: 60rpx;
|
||||
background-color: #F3F4F6;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user