aiot-app/pages/ehs/snapshot/components/snapshotSelectDialog.vue

<!-- components/snapshotSelectDialog.vue - 选择随手拍弹窗 -->
<template>
  <uni-popup ref="popup" type="center">
    <view class="select-dialog">
      <view class="header">选择随手拍</view>
      <view class="search">
        <uni-forms :modelValue="where" label-width="70px">
          <uni-forms-item label="上报人">
            <uni-easyinput v-model="where.reporterName" placeholder="请输入" clearable />
          </uni-forms-item>
          <uni-forms-item label="上报时间">
            <uni-datetime-picker v-model="where.createTime" type="datetime" return-type="string" />
          </uni-forms-item>
          <view class="search-buttons">
            <button type="primary" size="mini" @click="handleSearch">查询</button>
            <button size="mini" @click="handleReset">重置</button>
          </view>
        </uni-forms>
      </view>
      <scroll-view scroll-y class="list">
        <view v-for="item in list" :key="item.id" class="list-item" :class="{ active: selectedId === item.id }" @click="selectItem(item)">
          <text class="desc">{{ item.description }}</text>
          <text class="info">{{ item.location }} | {{ item.reporterName }} | {{ item.createTime }}</text>
        </view>
        <view v-if="list.length === 0 && !loading" class="empty">暂无数据</view>
      </scroll-view>
      <uni-pagination :current="page" :total="total" :page-size="limit" @change="onPageChange" show-icon />
      <view class="footer">
        <button @click="close">取消</button>
        <button type="primary" :disabled="!selectedItem" @click="handleConfirm">确定</button>
      </view>
    </view>
  </uni-popup>
</template>

<script>
import { getList } from '@/api/snapshot/index.js';

export default {
  emits: ['confirm'],
  data() {
    return {
      list: [],
      total: 0,
      page: 1,
      limit: 10,
      loading: false,
      where: { reporterName: '', createTime: '' },
      selectedItem: null,
      selectedId: null
    };
  },
  methods: {
    open() {
      this.selectedItem = null;
      this.selectedId = null;
      this.page = 1;
      this.where = { reporterName: '', createTime: '' };
      this.loadData();
      this.$refs.popup.open();
    },
    close() {
      this.$refs.popup.close();
    },
    async loadData() {
      this.loading = true;
      try {
        const res = await getList({ ...this.where, handleResult: 0, pageNum: this.page, size: this.limit });
        this.list = res.rows || [];
        this.total = res.total || 0;
      } finally {
        this.loading = false;
      }
    },
    selectItem(item) {
      this.selectedId = item.id;
      this.selectedItem = item;
    },
    handleConfirm() {
      if (!this.selectedItem) return;
      this.$emit('confirm', {
        sourceType: 4,
        sourceId: this.selectedItem.id,
        sourceName: '随手拍',
        foundUserName: this.selectedItem.reporterName,
        foundUserId: this.selectedItem.reporterId,
        foundTime: this.selectedItem.createTime,
        description: this.selectedItem.location + this.selectedItem.description,
        reportAttachments: this.selectedItem.attachment
      });
      this.close();
    },
    handleSearch() {
      this.page = 1;
      this.loadData();
    },
    handleReset() {
      this.where = { reporterName: '', createTime: '' };
      this.handleSearch();
    },
    onPageChange(e) {
      this.page = e.current;
      this.loadData();
    }
  }
};
</script>

<style lang="scss" scoped>
.select-dialog {
  width: 600rpx;
  max-width: 90vw;
  background: #fff;
  border-radius: 16rpx;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  .header {
    padding: 30rpx;
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #eee;
  }
  .search {
    padding: 20rpx;
    border-bottom: 1px solid #eee;
    .search-buttons {
      display: flex;
      gap: 20rpx;
      margin-top: 20rpx;
    }
  }
  .list {
    flex: 1;
    padding: 20rpx;
    .list-item {
      padding: 20rpx;
      border-bottom: 1px solid #f0f0f0;
      &.active { background: #e6f7ff; }
      .desc { font-weight: bold; display: block; }
      .info { font-size: 24rpx; color: #666; margin-top: 10rpx; display: block; }
    }
    .empty { text-align: center; padding: 40rpx; color: #999; }
  }
  .footer {
    padding: 20rpx;
    display: flex;
    gap: 20rpx;
    border-top: 1px solid #eee;
    button { flex: 1; margin: 0; }
  }
}
</style>