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

baoshiwei

2025-06-20 60384e8241fa855b5780260633ee9b9f8904847a

 eims-ui-mobile/src/pages/inspect/insp-st.vue

@@ -11,15 +11,14 @@
<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="viewMode" :options="viewModeList" @change="handleViewMode" />
        <wd-drop-menu-item
          v-model="filterDate"
          :options="filterDateList"
          @change="handleFilterDate"
        />
        <wd-drop-menu-item v-model="equName" :options="equList" @change="handleEquName" />
      </wd-drop-menu>
      <!-- 增加一个搜索栏 -->
      <wd-search v-model="searchValue" @search="handleSearch">
      </wd-search>
      <wd-tabs v-model="activeTab" @change="handleTabChange">
        <wd-tab title="待点检"></wd-tab>
        <wd-tab title="待确认"></wd-tab>
        <wd-tab title="已完成"></wd-tab>
      </wd-tabs>
    </template>
    <view class="bg-base">
      <wd-card type="rectangle" v-for="(item, index) in dataList" :key="item.id">
@@ -40,33 +39,37 @@
            </view>
          </view>
        </template>
        <view class="flex h-[140rpx]" items-center>
        <view class="flex h-[200rpx]" items-center>
          <image class="slot-img text-center" src="/static/images/camera.png" />
          <view class="flex-1">
            <view class="text-color-gray text-xs mt-1 flex">
              <text class="mr-3">点检总数: {{ item.recordCount }}</text>
            <view class="text-color-gray text-sm mt-1 flex">
              <text class="mr-3">总数: {{ item.recordCount }}</text>
              |
              <text class="mx-3">已点检: {{ item.checkCount }}</text>
              |
              <text class="ml-3">未点检: {{ item.unCheckCount }}</text>
            </view>
            <view class="text-color-gray text-xs mt-2 flex">
            <view class="text-color-gray text-sm mt-2 flex">
              <text class="mr-3">正常: {{ item.normalNum }}</text>
              |
              <text class="mx-3">异常: {{ item.abNormalNum }}</text>
            </view>
            <view class="text-color-gray text-xs mt-2 flex">
            <view class="text-color-gray text-sm mt-2 flex">
              <text>状态：</text>
              <template v-if="item.recordCount === item.checkCount">
              <template v-if="item.status === '1'">
                <wd-icon class="icon-color-success" name="check-outline" size="34rpx"></wd-icon>
                <text class="ml-1">已完成</text>
              </template>
              <template v-else-if="item.status === '2'">
                <wd-icon class="icon-color-warning" name="check-outline" size="34rpx"></wd-icon>
                <text class="ml-1">已确认</text>
              </template>
              <template v-else>
                <wd-icon class="icon-color-base" name="detection" size="40rpx"></wd-icon>
                <text class="ml-1">进行中</text>
              </template>
            </view>
            <view class="text-color-gray text-xs mt-2 flex">创建时间: {{ item.createTime }}</view>
            <view class="text-color-gray text-sm mt-2 flex">创建时间: {{ item.createTime }}</view>
          </view>
          <wd-button size="small" icon="edit-outline" @click.stop="itemClick(item)">明细</wd-button>
        </view>
@@ -76,13 +79,19 @@
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { getInspStList } from '@/service/inspect'
import dayjs from 'dayjs'
import { useUserStore, useAccessStore, useSystemConfigStore } from '@/store'
import { isLeader, isLineOrRepair, isOperator } from "@/utils/RoleUtils";
// 标签页相关
const activeTab = ref(0) // 默认选中第一个标签页（待点检）

// 原有变量
const viewMode = ref<string>('Day')
const equName = ref<string>('所有设备')
const filterDate = ref<string>('1')
const status = ref<string>('0') // 默认为待点检状态
const searchValue = ref<string>('')

const viewModeList = ref<Record<string, any>[]>([
  { label: '日视图', value: 'Day' },
@@ -94,6 +103,25 @@
])

const equList = ref<Record<string, any>[]>([{ label: '所有设备', value: '所有设备' }])
const userStore = useUserStore()
// 标签页切换处理函数
function handleTabChange({ index }) {
  // 根据标签页索引设置对应的状态值
  if (index === 0) {
    // 待点检
    status.value = '0'
  } else if (index === 1) {
    // 待确认
    status.value = '1'
  } else if (index === 2) {
    // 已完成
    status.value = '2'
  }
  // 重新加载数据
  reloadData()
}

// 原有函数
function handleViewMode({ value }) {
  reloadData()
}
@@ -112,12 +140,24 @@
    pageNum,
    pageSize,
    viewMode: viewMode.value,
    status: status.value, // 添加状态筛选
    params: {
      searchValue: searchValue.value,
    },
  }
  if (filterDate.value === '1') {
    params.planTime = dayjs().format('YYYY-MM-DD')
  } else {
    delete params.planTime
  }

  console.log('queryList::', isLineOrRepair(), isOperator(), userStore.userInfo)
  if (isLineOrRepair() || isOperator()) {
    params.updateBy = userStore.userInfo.userId
  } else if (isLeader()) {
    delete params.updateBy
  }
  console.log('params::', params)
  getInspStList(params)
    .then((res: any) => {
      // 请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
@@ -137,6 +177,11 @@
    // url: `/pages/inspect/insp-record?id=${item.id}&createTime=${item.createTime}&inspCode=${inspCode}&specialNote=${item.specialNote ?? ''}&equName=${item.equName ?? ''}&assetNo=${item.assetNo ?? ''}&planTimeStr=${item.planTimeStr ?? ''}`,
    url: `/pages/inspect/insp-record?id=${item.id}&viewMode=${viewMode.value}`,
  })
}

function handleSearch() {
  console.log('handleSearch')
  paging.value.reload()
}

function reloadData() {
@@ -164,7 +209,7 @@
  height: 40rpx;
}
.text-mini {
  font-size: 22rpx;
  font-size: 24rpx;
}

.menu-indicator {