tjy-uniapp/src/pages/deviceExam/deviceExam.vue

<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '设备查询',
    navigationStyle: 'custom',
    disableScroll: true,
    'app-plus': {
      bounce: 'none',
    },
  },
}
</route>

<template>
  <view class="device-container">
    <!-- 导航栏 -->
    <NavBar title="设备查询" />

    <!-- 查询表单 -->
    <view class="query-form-header" @click="controlQueryVisible = !controlQueryVisible">
      <text class="query-title">查询条件</text>
      <text class="query-arrow">{{ controlQueryVisible ? '▲' : '▼' }}</text>
    </view>
    <transition name="query-form">
      <view v-if="controlQueryVisible" class="query-form">
        <view class="form-item">
          <text class="form-label">设备类别</text>
          <wd-picker
            v-model="selectedTypeValue"
            :columns="equipmentTypesColumn"
            @change="onTypeChange"
          />
        </view>
        <view class="form-item">
          <text class="form-label">设备名称</text>
          <input class="form-input" v-model="formData.equipName" placeholder="请输入设备名称" />
        </view>
        <view class="form-item">
          <text class="form-label">设备注册代码</text>
          <input class="form-input" v-model="formData.equipCode" placeholder="请输入设备注册代码" />
        </view>
        <view class="form-item">
          <text class="form-label">出厂编号</text>
          <input class="form-input" v-model="formData.productNo" placeholder="请输入出厂编号" />
        </view>
        <view class="form-item">
          <text class="form-label">使用单位</text>
          <input class="form-input" v-model="formData.unitName" placeholder="请输入使用单位" />
        </view>
        <view class="form-item">
          <text class="form-label">单位内编号</text>
          <input class="form-input" v-model="formData.unitInnerNo" placeholder="请输入单位内编号" />
        </view>
        <view class="form-item">
          <text class="form-label">使用证编号</text>
          <input class="form-input" v-model="formData.useRegisterNo" placeholder="请输入使用证编号" />
        </view>
        <view class="form-actions">
          <button class="action-btn reset-btn" @click="handleReset">重置</button>
          <button class="action-btn query-btn" @click="handleQuery">查询</button>
        </view>
      </view>
    </transition>

    <!-- 列表 -->
    <scroll-view class="list-scroll" scroll-y @scrolltolower="loadMore">
      <view v-for="item in listData" :key="item.id" class="item-box" @click="handleItemClick(item)">
        <view class="item-header">
          <text class="item-title">设备注册代码：{{ item.equipCode }}</text>
        </view>
        <view class="item-content">
          <view class="info-item">
            <text class="info-label">设备名称：</text>
            <text class="info-value">{{ item.equipName }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">出厂编号：</text>
            <text class="info-value">{{ item.productNo || '--' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">使用单位：</text>
            <text class="info-value">{{ item.unitName }}</text>
          </view>
        </view>
      </view>

      <view v-if="loading" class="loading-text">加载中...</view>
      <view v-if="!hasMore && listData.length > 0" class="no-more-text">没有更多了</view>
      <view v-if="!loading && listData.length === 0" class="empty-view">
        <text class="empty-text">暂无数据</text>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue'
import { useConfigStore } from '@/store/config'
import { EquipFuncName, requestFunc } from '@/api/ApiRouter/equipment'
import NavBar from '@/components/NavBar/NavBar.vue'
import { onShow } from '@dcloudio/uni-app'

defineOptions({
  name: 'deviceExam',
})

const equipType = useConfigStore().getEquipType()

const listData = ref<any[]>([])
const loading = ref(false)
const hasMore = ref(true)
const controlQueryVisible = ref(true)
const params = reactive({
  pageNo: 1,
  pageSize: 10,
})

const formData = reactive({
  type: '',
  equipName: '',
  equipCode: '',
  productNo: '',
  unitName: '',
  unitInnerNo: '',
  useRegisterNo: '',
})

const selectedType = ref<any>(null)
const selectedTypeValue = ref('')
const equipmentTypes = ref([
  { label: '全部', value: '' },
  { label: '压力容器', value: '1' },
  { label: '锅炉', value: '2' },
  { label: '管道', value: '3' },
])
const equipmentTypesColumn = computed(() => [
  equipmentTypes.value.map((item) => ({ label: item.label, value: item.value })),
])

// 获取列表数据
const fetchList = async (refresh = false) => {
  if (loading.value) return

  params.pageNo = refresh ? 1 : params.pageNo + 1

  loading.value = true
  try {
    const queryData = {
      ...params,
      ...formData,
    }
    const result: any = await requestFunc(EquipFuncName.EquipPage, equipType, queryData)
    const newList = result?.data?.list || []

    if (refresh) {
      listData.value = newList
    } else {
      listData.value = [...listData.value, ...newList]
    }

    hasMore.value = newList.length >= params.pageSize
  } catch (error) {
    console.error('获取设备列表失败:', error)
  } finally {
    loading.value = false
  }
}

// 加载更多
const loadMore = () => {
  if (!loading.value && hasMore.value) {
    fetchList(false)
  }
}

// 刷新列表
const refreshList = () => {
  params.pageNo = 1
  fetchList(true)
}

// 选择设备类别
const onTypeChange = ({ selected }) => {
  const index = selected[0]
  selectedType.value = equipmentTypes.value[index]
  formData.type = selectedType.value?.value || ''
  selectedTypeValue.value = selectedType.value?.value || ''
}

// 重置
const handleReset = () => {
  formData.type = ''
  formData.equipName = ''
  formData.equipCode = ''
  formData.productNo = ''
  formData.unitName = ''
  formData.unitInnerNo = ''
  formData.useRegisterNo = ''
  selectedType.value = null
  refreshList()
}

// 查询
const handleQuery = () => {
  refreshList()
}

// 点击 item
const handleItemClick = (item: any) => {
  uni.navigateTo({
    url: `/pages/deviceExam/deviceExamDetail?id=${item.id}`,
  })
}

onShow(() => {
  refreshList()
})
</script>

<style lang="scss" scoped>
.device-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.navigate-view {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.navigate-title {
  font-size: 17px;
  font-weight: 500;
  color: #333;
}

.query-form-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.query-title {
  font-size: 14px;
  color: #333;
}

.query-arrow {
  font-size: 12px;
  color: #999;
}

.query-form {
  padding: 15px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.form-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 12px;
}

.form-label {
  width: 100px;
  font-size: 14px;
  color: #666;
}

.form-input {
  flex: 1;
  height: 36px;
  padding: 0 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form-picker {
  flex: 1;
  height: 36px;
  padding: 0;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.picker-value {
  display: flex;
  flex: 1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  padding: 0 10px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.picker-arrow {
  font-size: 12px;
  color: #999;
}

.form-actions {
  display: flex;
  flex-direction: row;
  gap: 10%;
  justify-content: flex-end;
  padding: 0 10%;
  margin-top: 10px;
}

.action-btn {
  flex: 1;
  padding: 0 20px;
  font-size: 14px;
  border: none;
  border-radius: 4px;
}

.reset-btn {
  color: #2f8eff;
  background-color: #fff;
  border: 1px solid #2f8eff;
}

.query-btn {
  color: #fff;
  background-color: #2f8eff;
}

.list-scroll {
  flex: 1;
  overflow: hidden;
}

.loading-text,
.no-more-text {
  padding: 15px;
  font-size: 14px;
  color: #999;
  text-align: center;
}

.empty-view {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}

.item-box {
  padding: 10px;
  margin: 10px;
  background-color: #fff;
  border-radius: 5px;
}

.item-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.item-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.item-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  margin-top: 10px;
  background-color: #f2f2f2;
  border-radius: 5px;
}

.info-item {
  display: flex;
  flex-direction: row;
}

.info-label {
  font-size: 14px;
  color: #666;
}

.info-value {
  flex: 1;
  font-size: 14px;
  color: #333;
}
</style>