代码提交-3-13

pages/work/inspection/abnormalList/index.vue

@@ -0,0 +1,188 @@
+<template>
+  <view class="container">
+    <uni-section title="巡检异常列表" type="line" class="mb-10">
+      <template v-slot:right>
+        <button size="mini" type="primary" @click.stop="goAdd">新增</button>
+      </template>
+    </uni-section>
+
+    <view class="filters">
+      <uni-data-select v-model="queryParams.inspectionType" :localdata="selectList" placeholder="巡检类型" />
+      <uni-datetime-picker type="daterange" v-model="dateRange" :clear-icon="true" start="1990-01-01" end="2099-12-31" />
+      <button class="ml-6" size="mini" type="primary" @click="handleQuery">搜索</button>
+      <button class="ml-6" size="mini" @click="resetQuery">重置</button>
+    </view>
+
+    <uni-card v-for="item in list" :key="item.id" :title="item.inspectionPoint" @click="onCardClick($event, item)">
+      <uni-row class="row" :width="730">
+        <uni-col :span="16">
+          <view>
+            <text class="uni-body">巡检人：{{ item.inspectorId }}</text>
+          </view>
+          <view>
+            <text class="uni-body">巡检时间：{{ formatDate(item.inspectionTime) }}</text>
+          </view>
+          <view>
+            <text class="uni-body">备注：{{ item.remark || '-' }}</text>
+          </view>
+        </uni-col>
+        <uni-col :span="8">
+          <view class="thumbs">
+            <image v-for="(img,idx) in firstThreeImages(item.inspectionImg)" :key="idx" :src="imageUrl(img)" mode="aspectFill" class="thumb" />
+          </view>
+        </uni-col>
+      </uni-row>
+    </uni-card>
+    <uni-load-more :status="loadStatus" />
+  </view>
+</template>
+
+<script>
+import { listAbnormal } from '@/api/inspection/abnormal.js';
+import { listData } from '@/api/system/dict/data.js';
+import config from '@/config';
+
+export default {
+  data() {
+    return {
+      loadStatus: 'more',
+      loading: false,
+      total: 0,
+      list: [],
+      selectList: [],
+      dateRange: [],
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        inspectionPoint: '',
+        inspectorId: '',
+        inspectionType: null,
+        params: {}
+      }
+    }
+  },
+  created() {
+    this.initDict()
+    this.getList()
+  },
+  // 触底加载更多（页面滚动到底部）
+  onReachBottom() {
+    if (this.loadStatus !== 'more' || this.loading) return
+    this.loadStatus = 'loading'
+    this.queryParams.pageNum += 1
+    this.fetchList({ append: true })
+  },
+  // 页面重新显示时自动刷新列表（新增返回后生效）
+  onShow() {
+    this.getList()
+  },
+  methods: {
+    async initDict() {
+      const typeData = await listData({ dictType: 'inspection_type' })
+      this.selectList = typeData.rows.map(i => ({ value: i.dictValue, text: i.dictLabel }))
+    },
+    imageUrl(path) {
+      if (!path) return ''
+      return config.baseUrl + path
+    },
+    firstThreeImages(inspectionImg) {
+      if (!inspectionImg) return []
+      return inspectionImg.split(',').slice(0,3)
+    },
+    formatDate(val) {
+      if (!val) return ''
+      try {
+        const d = new Date(val)
+        const y = d.getFullYear()
+        const m = String(d.getMonth()+1).padStart(2,'0')
+        const dd = String(d.getDate()).padStart(2,'0')
+        const hh = String(d.getHours()).padStart(2,'0')
+        const mm = String(d.getMinutes()).padStart(2,'0')
+        const ss = String(d.getSeconds()).padStart(2,'0')
+        return `${y}-${m}-${dd} ${hh}:${mm}:${ss}`
+      } catch(e) { return val }
+    },
+    buildParams() {
+      if (this.dateRange && this.dateRange.length === 2) {
+        this.queryParams.params = {
+          beginTime: this.dateRange[0],
+          endTime: this.dateRange[1]
+        }
+      } else {
+        this.queryParams.params = {}
+      }
+    },
+    async fetchList({ append = false } = {}) {
+      try {
+        this.loading = true
+        this.buildParams()
+        const res = await listAbnormal(this.queryParams)
+        const rows = res?.rows || []
+        // 若接口提供 total 字段则使用，否则根据 pageSize 判断是否还有更多
+        this.total = typeof res?.total === 'number' ? res.total : (append ? this.list.length + rows.length : rows.length)
+        if (append) {
+          this.list = this.list.concat(rows)
+        } else {
+          this.list = rows
+        }
+        // 根据是否还有更多数据设置加载状态
+        if (typeof res?.total === 'number') {
+          this.loadStatus = this.list.length < this.total ? 'more' : 'noMore'
+        } else {
+          // 当本次返回数量等于 pageSize，默认还有下一页
+          const hasMore = rows.length === this.queryParams.pageSize
+          this.loadStatus = hasMore ? 'more' : 'noMore'
+        }
+      } catch (e) {
+        this.loadStatus = 'noMore'
+      } finally {
+        this.loading = false
+      }
+    },
+    async getList() {
+      // 初始化查询第一页
+      this.queryParams.pageNum = 1
+      this.loadStatus = 'loading'
+      await this.fetchList({ append: false })
+    },
+    onCardClick(type, item) {
+      // 仅在内容区域点击时跳转（title/extra也可按需）
+      if (!item) return
+      this.goDetail(item)
+    },
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    resetQuery() {
+      this.queryParams = {
+        pageNum: 1,
+        pageSize: 10,
+        inspectionPoint: '',
+        inspectorId: '',
+        inspectionType: null,
+        params: {}
+      }
+      this.dateRange = []
+      this.getList()
+    },
+    goAdd() {
+      this.$tab.navigateTo('/pages/work/inspection/inspectionEx/index')
+    },
+    goDetail(item) {
+      const id = item?.id
+      if (!id) return
+      this.$tab.navigateTo(`/pages/work/inspection/abnormalDetail/index?id=${id}`)
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.container { padding: 10px; }
+.filters { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
+.thumbs { display: flex; gap: 6px; justify-content: flex-end; }
+.thumb { width: 60px; height: 60px; border-radius: 6px; background: #f5f5f5; }
+.mb-10 { margin-bottom: 10px; }
+.ml-6 { margin-left: 6px; }
+</style>