aiot-app/pages/ehs/snapshot/mySnapshot.vue

<!-- pages/snapshot/mySnapshot.vue -->
<template>
  <view class="mainBox">
    <uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="我的随手拍" @clickLeft="back" />

    <!-- 搜索区域 -->
    <view class="top-wrapper">
      <uni-forms :modelValue="where" label-width="100px" class="search-form">
        <uni-forms-item label="处理结果">
          <uni-data-select v-model="where.handleResult" :localdata="resultOptions" placeholder="全部" clearable />
        </uni-forms-item>
 
      </uni-forms>
      <button class="search_btn" @click="handleSearch">搜索</button>
    </view>

    <view class="wrapper">
      <u-list @scrolltolower="scrolltolower" class="listContent">
        <view v-for="(item, idx) in tableList" :key="item.id" style="position: relative">
          <myCard
            :item="item"
            :index="idx + 1"
            :btnList="myBtnList" 
            :columns="columns"
            :title="item.description"
            :status="statusMap[item.handleResult]"
            @goDetail="goDetail"
            @handleDelete="handleDelete"
          />
        </view>
        <view style="width: 100%; height: 40rpx"></view>
        <view style="margin-top: 20vh" v-if="tableList.length == 0">
          <u-empty iconSize="150" textSize="32" text="暂无数据" />
        </view>
      </u-list>
    </view>

    <!-- 新增/编辑/查看弹窗 -->
    <snapshot-dialog ref="snapshotDialog" @reload="reloadList" />

    <view class="add" @click="goDetail({}, 'add')">
      <u-icon name="plus" color="#fff"></u-icon>
    </view>
  </view>
</template>
 
<script>
	import myCard from "@/components/myCard.vue";
import snapshotDialog from './components/snapshotDialog.vue';
import { getList, remove } from '@/api/snapshot/index.js';

export default {
  components: { myCard, snapshotDialog },
  data() {
    return {
      where: { handleResult: '', createTime: '' },
      resultOptions: [
        { value: 0, text: '待处理' },
        { value: 1, text: '下发整改' },
        { value: 2, text: '废弃' }
      ],
      statusMap: { 0: '待处理', 1: '已整改', 2: '已废弃' },
      columns: [
        [{ prop: 'location', label: '位置', className: 'perce100' }],
        [{ prop: 'problemDeptName', label: '所属部门', className: 'perce100' }],
        [{ prop: 'createTime', label: '上报时间', className: 'perce100' }],
        [{ prop: 'handleResult', label: '处理结果', className: 'perce100', formatter: (row) => this.statusMap[row.handleResult] }]
      ],
      tableList: [],
      page: 1,
      size: 10,
      isEnd: false,
      userInfo: {}
    };
  },
  computed: {
    myBtnList() {
      return [
        {
          name: '编辑',
          apiName: 'edit',
          btnType: 'primary',
          judge: [{ fn: (item) => item.handleResult === 0 }]
        },
        {
          name: '删除',
          apiName: 'delete',
          btnType: 'danger',
          judge: [{ fn: (item) => item.handleResult === 0 }]
        }
      ];
    }
  },
  onLoad() {
    this.userInfo = uni.getStorageSync('userInfo') || {};
    this.getList();
  },
  methods: {
    back() { uni.navigateBack(); },
    goDetail(item, type) {
      this.$refs.snapshotDialog.open(type, item);
    },
    async handleDelete(row) {
      const res = await uni.showModal({ title: '提示', content: '确认删除该记录吗？' });
      if (res.confirm) {
        await remove([row.id]);
        uni.showToast({ title: '删除成功', icon: 'success' });
        this.reloadList();
      }
    },
    reloadList() {
      this.page = 1;
      this.isEnd = false;
      this.getList();
    },
    handleSearch() {
      this.page = 1;
      this.isEnd = false;
      this.getList();
    },
    async getList() {
      if (this.isEnd) return;
      uni.showLoading({ title: '加载中' });
      try {
        const data = {
          pageNum: this.page,
          size: this.size,
          reporterId: this.userInfo.userId,
          handleResult: this.where.handleResult !== '' ? this.where.handleResult : undefined,
          createTime: this.where.createTime || undefined
        };
        const res = await getList(data);
        const newList = res.list || [];
        if (this.page === 1) this.tableList = newList;
        else this.tableList.push(...newList);
        this.isEnd = this.tableList.length >= res.count;
        this.page += 1;
      } catch (e) { console.error(e); }
      finally { uni.hideLoading(); }
    },
    scrolltolower() {
      if (!this.isEnd) this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
@import './common-style.scss'; // 共用样式见下方
</style>