1
This commit is contained in:
@@ -0,0 +1,277 @@
|
||||
<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="onLedger">
|
||||
<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">
|
||||
|
||||
<!-- 状态筛选（xTabs） -->
|
||||
<x-tabs :list="tabList" :model-value="activeId" item-width="33.33%" height="84rpx" font-size="28rpx"
|
||||
active-font-size="28rpx" title-color="#6B7280" active-title-color="#2563EB" line-color="#2563EB"
|
||||
title-padding="0" :is-item-center="true" @change="onTabChange"></x-tabs>
|
||||
|
||||
<view style="margin-top:20rpx">
|
||||
<view v-for="(d, i) in shown" :key="d.id" class="dv-card" @click="openDetail(d)">
|
||||
<view class="dv-ic" :style="{ backgroundColor: d.iconBg }">
|
||||
<x-icon :name="d.icon" :color="d.iconColor" font-size="44rpx"></x-icon>
|
||||
</view>
|
||||
<view class="hr-flex1">
|
||||
<text class="dv-name">{{ d.name }}</text>
|
||||
<text class="dv-meta">{{ d.meta }}</text>
|
||||
</view>
|
||||
<view class="dv-st" :style="stStyle(d.theme)">
|
||||
<text class="dv-st-t" :style="stTextStyle(d.theme)">{{ d.status }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<hr-empty v-if="shown.length == 0" icon="⚙" title="该状态下暂无设备"
|
||||
sub="切换上方分段查看其它状态的设备"></hr-empty>
|
||||
|
||||
<hr-empty v-if="shown.length == 0" icon="⚙" title="该状态下暂无设备"
|
||||
sub="切换上方分段查看其它状态的设备"></hr-empty>
|
||||
|
||||
<hr-sec title="设备台账" more="全部 24 台 ›"></hr-sec>
|
||||
<hr-card variant="list">
|
||||
<hr-lrow icon="check-line" theme="grn" title="状态正常" sub="可随时借用">
|
||||
<template v-slot:right>
|
||||
<text class="dv-v dv-v-grn">18 台</text>
|
||||
</template>
|
||||
</hr-lrow>
|
||||
<hr-lrow icon="file-list-3-line" theme="amb" title="借用中" sub="预计陆续归还">
|
||||
<template v-slot:right>
|
||||
<text class="dv-v dv-v-amb">4 台</text>
|
||||
</template>
|
||||
</hr-lrow>
|
||||
<hr-lrow icon="monitor-line" theme="red" title="维修 / 保养中" sub="暂不可借" :is-last="true">
|
||||
<template v-slot:right>
|
||||
<text class="dv-v dv-v-red">2 台</text>
|
||||
</template>
|
||||
</hr-lrow>
|
||||
</hr-card>
|
||||
|
||||
<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>
|
||||
|
||||
<view class="hr-fixedbar">
|
||||
<view class="hr-btn hr-btn-primary" style="flex:1" @click="onScanBorrow">
|
||||
<x-icon name="scan-line" color="#FFFFFF" font-size="17"></x-icon>
|
||||
<text class="dv-bt">扫码借用设备</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<hr-tabbar :active="2"></hr-tabbar>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="uts" setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import { deviceList } from '@/mock/index.uts'
|
||||
import { HrDevice } from '@/mock/types.uts'
|
||||
import { navTo } from '@/utils/nav.uts'
|
||||
import { mockRequest } from '@/utils/request.uts'
|
||||
import { TABS_ITEM_INFO, TABS_ITEM } from '@/uni_modules/tmx-ui/interface.uts'
|
||||
|
||||
/**
|
||||
* s31 设备借用（仓管 Tab「设备」）
|
||||
* 按「可借用 / 借用中 / 全部」分段筛选，维修中设备不可借。
|
||||
*/
|
||||
const loading = ref(true)
|
||||
const segIds : string[] = ['0', '1', '2']
|
||||
const activeId = ref('0')
|
||||
|
||||
/** xTabs 数据 */
|
||||
const tabList : TABS_ITEM_INFO[] = [
|
||||
{ title: '可借用', id: '0' } as TABS_ITEM_INFO,
|
||||
{ title: '借用中', id: '1' } as TABS_ITEM_INFO,
|
||||
{ title: '全部', id: '2' } as TABS_ITEM_INFO
|
||||
]
|
||||
|
||||
const seg = computed(() : number => {
|
||||
const i = parseInt(activeId.value)
|
||||
return isNaN(i) ? 0 : i
|
||||
})
|
||||
|
||||
// ⚠ x-tabs 的 change 下发的是 TABS_ITEM（不是 TABS_ITEM_INFO），形参类型必须一致
|
||||
function onTabChange(item : TABS_ITEM, index : number) : void {
|
||||
activeId.value = item.id == '' ? index.toString() : item.id
|
||||
}
|
||||
|
||||
onLoad(() => {
|
||||
mockRequest(() => {
|
||||
loading.value = false
|
||||
})
|
||||
})
|
||||
|
||||
const list = ref<HrDevice[]>(deviceList)
|
||||
|
||||
const shown = computed(() : HrDevice[] => {
|
||||
const arr : HrDevice[] = []
|
||||
for (let i = 0; i < list.value.length; i++) {
|
||||
const d = list.value[i]
|
||||
if (seg.value == 0 && d.status != '可借') { continue }
|
||||
if (seg.value == 1 && d.status != '借用中') { continue }
|
||||
arr.push(d)
|
||||
}
|
||||
return arr
|
||||
})
|
||||
|
||||
function stStyle(theme : string) : string {
|
||||
if (theme == 'grn') { return 'background-color:#ECFDF5' }
|
||||
if (theme == 'amb') { return 'background-color:#FEF3C7' }
|
||||
return 'background-color:#FEF2F2'
|
||||
}
|
||||
|
||||
function stTextStyle(theme : string) : string {
|
||||
if (theme == 'grn') { return 'color:#059669' }
|
||||
if (theme == 'amb') { return 'color:#92400E' }
|
||||
return 'color:#DC2626'
|
||||
}
|
||||
|
||||
function openDetail(d : HrDevice) : void {
|
||||
navTo('/pages/warehouse/device-detail?id=' + d.id)
|
||||
}
|
||||
|
||||
function onScanBorrow() : void {
|
||||
uni.showToast({ title: '对准设备二维码开始借用', icon: 'none' })
|
||||
}
|
||||
|
||||
function onLedger() : void {
|
||||
uni.showToast({ title: '设备台账（24 台）', 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;
|
||||
}
|
||||
|
||||
.dv-seg-t {
|
||||
font-size: 29.2rpx;
|
||||
color: #6B7280;
|
||||
}
|
||||
|
||||
.dv-seg-t-on {
|
||||
color: #2563EB;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dv-card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background-color: #FFFFFF;
|
||||
border: 2rpx solid #E5E7EB;
|
||||
border-radius: 26rpx;
|
||||
padding: 24rpx 24rpx 24rpx 24rpx;
|
||||
margin-bottom: 18rpx;
|
||||
}
|
||||
|
||||
.dv-ic {
|
||||
width: 104rpx;
|
||||
height: 104rpx;
|
||||
border-radius: 26rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 22rpx;
|
||||
}
|
||||
|
||||
.dv-ic-t {
|
||||
font-size: 49.2rpx;
|
||||
}
|
||||
|
||||
.dv-name {
|
||||
font-size: 30.2rpx;
|
||||
font-weight: bold;
|
||||
color: #1F2937;
|
||||
lines: 1;
|
||||
}
|
||||
|
||||
.dv-meta {
|
||||
font-size: 23.6rpx;
|
||||
color: #9CA3AF;
|
||||
margin-top: 6rpx;
|
||||
}
|
||||
|
||||
.dv-st {
|
||||
border-radius: 12rpx;
|
||||
padding: 6rpx 16rpx 6rpx 16rpx;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.dv-st-t {
|
||||
font-size: 23.6rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.dv-v {
|
||||
font-size: 31.4rpx;
|
||||
font-weight: bold;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
|
||||
.dv-v-grn {
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.dv-v-amb {
|
||||
color: #D97706;
|
||||
}
|
||||
|
||||
.dv-v-red {
|
||||
color: #DC2626;
|
||||
}
|
||||
|
||||
.dv-bt {
|
||||
font-size: 32.4rpx;
|
||||
font-weight: bold;
|
||||
color: #FFFFFF;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user