feat(eims-ui-mobile): 为多个页面添加搜索功能 - 在 equ-list、insp-st、maint-st、req-list 和 ...

baoshiwei

2025-06-20 60384e8241fa855b5780260633ee9b9f8904847a

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

@@ -2,17 +2,35 @@
{
  layout: 'default',
  needLogin: true,
  style: {
    navigationBarTitleText: '设备列表',
  },
  style: { navigationBarTitleText: '设备列表', navigationStyle: 'custom' },
}
</route>
<template>
  <z-paging ref="paging" v-model="dataList" @query="queryList" show-refresher-update-time>
 <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" :options="typeList" @change="handleEquType" />
        <wd-drop-menu-item v-model="status" :options="statusList" @change="handleEquStatu" />
        <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>

@@ -22,25 +40,36 @@
          <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>
              <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>
            <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-[80rpx]" @click.stop="itemClick(item)">
        <view class="flex h-[90rpx] items-center" @click.stop="itemClick(item)">
          <image class="slot-img text-center" src="/static/images/camera.png" />
          <view>
          <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-xs mt-1">
            <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>
@@ -50,22 +79,24 @@

<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>(0)
const equTypeId = ref<number>(-1)
// 设备状态
const status = ref<number>(0)

const status = ref<number>(-1)
const searchValue = ref<string>('')
const isSelectEqu = ref(false)

const typeList = ref<Record<string, any>[]>([{ label: '所有设备', value: 0 }])
const statusList = ref<Record<string, any>[]>([{ label: '所有状态', value: 0 }])
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)
}

@@ -73,13 +104,25 @@
const dataList = ref([])

const queryList = (pageNum?: number, pageSize?: number) => {
  // 这里的pageNo和pageSize会自动计算好，直接传给服务器即可
  // 这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过paging.value.complete(请求回来的数组)将请求结果传给z-paging
  getEquList({ pageNum, pageSize })
  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就可以了
      console.log(res)
      paging.value.complete(res.rows)
      paging.value.completeByTotal(res.rows, res.total)
    })
    .catch((res) => {
      // 如果请求失败写paging.value.complete(false)，会自动展示错误页面
@@ -89,15 +132,35 @@
    })
}

const goBack = () => {
  uni.navigateBack()
}

/**
 * 设备条目点击事件
 * @param item
 */
function itemClick(item: any) {
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()
}

/**
@@ -110,16 +173,28 @@
  })
}


const eventChannel = ref<any>()
onMounted(() => {
  const instance: any = getCurrentInstance().proxy
  const event = instance.getOpenerEventChannel()
  eventChannel.value = event
  event.on('handleSelectEqu', function (data) {
  event.on('OnSelectEqu', function (data) {
    isSelectEqu.value = true
    console.log('handleSelectEqu', data)
    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>

@@ -147,4 +222,7 @@
:deep(.wd-card__footer) {
  padding: 10rpx !important;
}
:deep(.wd-card__title-content) {
  padding: 16rpx !important;
}
</style>