<route lang="json5" type="page">
|
{
|
layout: 'default',
|
needLogin: true,
|
style: { navigationBarTitleText: '设备列表', navigationStyle: 'custom' },
|
}
|
</route>
|
<template>
|
<z-paging ref="paging" v-model="dataList" @query="queryList" show-refresher-update-time>
|
<template #top>
|
<wd-navbar
|
title="设备列表"
|
left-arrow
|
@click-left="goBack"
|
custom-style="background: #4D80F0;"
|
safeAreaInsetTop
|
></wd-navbar>
|
<wd-search v-model="searchValue" placeholder="请输入关键字" @search="handleSearch" />
|
<wd-drop-menu>
|
<wd-drop-menu-item
|
v-model="equTypeId"
|
label-key="dictLabel"
|
value-key="dictValue"
|
:options="typeList"
|
@change="handleEquType"
|
/>
|
<wd-drop-menu-item
|
v-model="status"
|
label-key="dictLabel"
|
value-key="dictValue"
|
:options="statusList"
|
@change="handleEquStatu"
|
/>
|
</wd-drop-menu>
|
</template>
|
|
<view class="bg-base">
|
<wd-card type="rectangle" v-for="(item, index) in dataList" :key="item.id">
|
<template #title>
|
<view class="flex justify-between items-baseline">
|
<view class="flex items-center menu-title-box">
|
<view class="menu-indicator"></view>
|
<text class="ml-1 text-sm">{{ item.assetNo }}</text>
|
<wd-tag v-if="item.status === '0'" class="ml-2" bg-color="cyan">试用</wd-tag>
|
<wd-tag v-else-if="item.status === '1'" class="ml-2" type="success">使用</wd-tag>
|
<wd-tag v-else-if="item.status === '2'" class="ml-2" type="danger">停用</wd-tag>
|
<wd-tag v-else-if="item.status === '3'" class="ml-2" bg-color="pink">报废</wd-tag>
|
<wd-tag v-else-if="item.status === '4'" class="ml-2" type="warning">闲置</wd-tag>
|
<wd-tag v-else-if="item.status === '5'" class="ml-2">新增</wd-tag>
|
</view>
|
|
<view @click.stop="handleInfo">
|
<text class="icon-color-base">详情</text>
|
<wd-icon name="arrow-right" custom-class="icon-color-base"></wd-icon>
|
</view>
|
</view>
|
</template>
|
<view class="flex h-[90rpx] items-center" @click.stop="itemClick(item)">
|
<image class="slot-img text-center" src="/static/images/camera.png" />
|
<view class="flex-1">
|
<view class="text-color-base">
|
{{ item.equName }}
|
<text class="text-color-gray ml-2 text-mini">{{ item.modelNo }}</text>
|
</view>
|
<view class="text-color-gray text-sm mt-1">
|
{{ item.location }} | {{ item.madeIn }}
|
</view>
|
</view>
|
<view v-if="isSelectEqu">
|
<wd-button size="small" icon="edit-outline" @click.stop="handleSelectEqu(item)">
|
选中
|
</wd-button>
|
</view>
|
</view>
|
</wd-card>
|
</view>
|
</z-paging>
|
</template>
|
|
<script setup lang="ts">
|
import { onMounted, getCurrentInstance, ref } from 'vue'
|
import { getEquList } from '@/service/equ'
|
import { DICT_SYS_EQU_STATUS, getDictInfo } from '@/service/dict'
|
|
// 设备类型
|
const equTypeId = ref<number>(-1)
|
// 设备状态
|
const status = ref<number>(-1)
|
const searchValue = ref<string>('')
|
const isSelectEqu = ref(false)
|
|
const typeList = ref<Record<string, any>[]>([{ dictLabel: '设备类型', dictValue: -1 }])
|
const statusList = ref<Record<string, any>[]>([{ dictLabel: '所有状态', dictValue: -1 }])
|
function handleEquType({ value }) {
|
reloadData()
|
console.log(value)
|
}
|
function handleEquStatu({ value }) {
|
reloadData()
|
console.log(value)
|
}
|
|
const paging = ref(null)
|
const dataList = ref([])
|
|
const queryList = (pageNum?: number, pageSize?: number) => {
|
const parmams = {
|
pageNum,
|
pageSize,
|
equTypeId: equTypeId.value,
|
status: status.value,
|
params: {
|
searchValue: searchValue.value,
|
},
|
}
|
if (equTypeId.value === -1) {
|
delete parmams.equTypeId
|
}
|
if (status.value === -1) {
|
delete parmams.status
|
}
|
getEquList(parmams)
|
.then((res: any) => {
|
// 请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
|
paging.value.completeByTotal(res.rows, res.total)
|
})
|
.catch((res) => {
|
// 如果请求失败写paging.value.complete(false)，会自动展示错误页面
|
// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
|
// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
|
paging.value.complete(false)
|
})
|
}
|
|
const goBack = () => {
|
uni.navigateBack()
|
}
|
|
/**
|
* 设备条目点击事件
|
* @param item
|
*/
|
function itemClick(item: any) {}
|
function handleInfo() {
|
uni.showToast({
|
title: '功能开发中',
|
icon: 'none',
|
})
|
}
|
/**
|
* 其它页面选择设备
|
* @param item
|
*/
|
function handleSelectEqu(item: any) {
|
if (isSelectEqu.value) {
|
emitSelectEqu(item)
|
uni.navigateBack()
|
}
|
}
|
|
function handleSearch() {
|
console.log('handleSearch')
|
paging.value.reload()
|
}
|
|
/**
|
* 选择设备回调
|
* @param equ
|
*/
|
function emitSelectEqu(equ: any) {
|
eventChannel.value.emit('selectEqu', {
|
data: equ,
|
})
|
}
|
|
const eventChannel = ref<any>()
|
onMounted(() => {
|
const instance: any = getCurrentInstance().proxy
|
const event = instance.getOpenerEventChannel()
|
eventChannel.value = event
|
event.on('OnSelectEqu', function (data) {
|
isSelectEqu.value = true
|
console.log('OnSelectEqu', data)
|
})
|
})
|
|
function reloadData() {
|
paging.value.reload()
|
}
|
|
async function initData() {
|
const sList: any = await getDictInfo(DICT_SYS_EQU_STATUS)
|
statusList.value.push(...sList)
|
}
|
|
onLoad(() => {
|
initData()
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.menu-title-box {
|
height: 30rpx;
|
line-height: 30rpx;
|
}
|
|
.slot-img {
|
width: 72rpx;
|
height: 72rpx;
|
margin-right: 24rpx;
|
}
|
.text-mini {
|
font-size: 22rpx;
|
}
|
|
.menu-indicator {
|
width: 6rpx;
|
height: 22rpx;
|
border-radius: 10rpx;
|
background-color: $uni-color-primary;
|
}
|
:deep(.wd-card__footer) {
|
padding: 10rpx !important;
|
}
|
:deep(.wd-card__title-content) {
|
padding: 16rpx !important;
|
}
|
</style>
|
