Merge remote-tracking branch 'origin/main'

baoshiwei

2025-04-24 89a5fedfe041ebacb2d81ecae1023b206cd3f353

 eims-ui-mobile/src/pages/equ/equ-list.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,150 @@
<route lang="json5" type="page">
{
  layout: 'default',
  needLogin: true,
  style: {
    navigationBarTitleText: '设备列表',
  },
}
</route>
<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList" show-refresher-update-time>
    <template #top>
      <wd-drop-menu>
        <wd-drop-menu-item v-model="equTypeId" :options="typeList" @change="handleEquType" />
        <wd-drop-menu-item v-model="status" :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-xs">{{ item.assetNo }}</text>
            </view>

            <view>
              <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-[80rpx]" @click.stop="itemClick(item)">
          <image class="slot-img text-center" src="/static/images/camera.png" />
          <view>
            <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-xs mt-1">
              {{ item.location }} | {{ item.madeIn }}
            </view>
          </view>
        </view>
      </wd-card>
    </view>
  </z-paging>
</template>

<script setup lang="ts">
import { onMounted, getCurrentInstance, ref } from 'vue'

import { getEquList } from '@/service/equ'

// è®¾å¤‡ç±»åž‹
const equTypeId = ref<number>(0)
// è®¾å¤‡çŠ¶æ€
const status = ref<number>(0)

const isSelectEqu = ref(false)

const typeList = ref<Record<string, any>[]>([{ label: '所有设备', value: 0 }])
const statusList = ref<Record<string, any>[]>([{ label: '所有状态', value: 0 }])
function handleEquType({ value }) {
  console.log(value)
}
function handleEquStatu({ value }) {
  console.log(value)
}

const paging = ref(null)
const dataList = ref([])

const queryList = (pageNum?: number, pageSize?: number) => {
  // è¿™é‡Œçš„pageNo和pageSize会自动计算好，直接传给服务器即可
  // è¿™é‡Œçš„请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过paging.value.complete(请求回来的数组)将请求结果传给z-paging
  getEquList({ pageNum, pageSize })
    .then((res: any) => {
      // è¯·å‹¿åœ¨ç½‘络请求回调中给dataList赋值！！只需要调用complete就可以了
      console.log(res)
      paging.value.complete(res.rows)
    })
    .catch((res) => {
      // å¦‚果请求失败写paging.value.complete(false)，会自动展示错误页面
      // æ³¨æ„ï¼Œæ¯æ¬¡éƒ½éœ€è¦åœ¨catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
      // åœ¨åº•å±‚的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
      paging.value.complete(false)
    })
}

/**
 * è®¾å¤‡æ¡ç›®ç‚¹å‡»äº‹ä»¶
 * @param item
 */
function itemClick(item: any) {
  if (isSelectEqu.value) {
    emitSelectEqu(item)
    uni.navigateBack()
  }
}

/**
 * é€‰æ‹©è®¾å¤‡å›žè°ƒ
 * @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('handleSelectEqu', function (data) {
    isSelectEqu.value = true
    console.log('handleSelectEqu', data)
  })
})
</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;
}
</style>