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

<template>
  <u-popup
    :show="visible"
    mode="bottom"
    :round="10"
    :closeOnClickOverlay="false"
    @close="handleClose"
    class="snapshot-select-popup"
  >
    <view class="popup-content">
      <!-- 头部 -->
      <view class="popup-header">
        <text class="popup-title">选择随手拍</text>
        <view class="close-btn" @click="handleClose">×</view>
      </view>

      <!-- 列表 -->
      <scroll-view class="popup-body" scroll-y @scrolltolower="loadMore">
        <view
          v-for="(item, index) in listData"
          :key="item.id"
          class="card-wrapper"
        >
          <myCard
            :item="item"
            :index="index + 1"
            :columns="cardColumns"
            :title="item.description"
            :showRadio="true"
            :radioValue="selectedId"
            @radioChange="onRadioChange"
            :showDetail="false"
          />
        </view>
        <view style="height: 20rpx"></view>
        <view v-if="loading" class="load-more">加载中...</view>
        <view v-if="isEnd && listData.length > 0" class="load-more"
          >没有更多了</view
        >
        <u-empty
          class="no-data"
          v-if="!loading && listData.length === 0"
          text="暂无待处理的随手拍"
        />
      </scroll-view>

      <!-- 底部 -->
      <view class="popup-footer">
        <view class="footer-left">
          <text class="selected-info" v-if="selectedRow">
            已选：{{ selectedRow.description }}
          </text>
          <text class="selected-info" v-else>请选择一条记录</text>
        </view>
        <view class="footer-right">
          <u-button type="default" size="small" @click="handleClose"
            >取消</u-button
          >
          <u-button
            type="primary"
            size="small"
            :disabled="!selectedRow"
            @click="handleConfirm"
            >确定</u-button
          >
        </view>
      </view>
    </view>

    <u-toast ref="uToast" />
  </u-popup>
</template>

<script>
import myCard from "@/components/myCard.vue";
import { getList } from "@/api/snapshot/index.js";

export default {
  components: { myCard },
  data() {
    return {
      visible: false,
      // 列表数据
      listData: [],
      page: 1,
      size: 10,
      isEnd: false,
      loading: false,
      // 选中
      selectedRow: null,
      selectedId: null,
      // 卡片列配置
      cardColumns: [
        [{ prop: "location", label: "问题位置", className: "perce100" }],
        [{ prop: "problemDeptName", label: "所属部门", className: "perce100" }],
        [
          { prop: "reporterName", label: "上报人", className: "perce50" },
          { prop: "createTime", label: "上报时间", className: "perce50" },
        ],
      ],
    };
  },
  methods: {
    // ============ 外部调用 ============
    open() {
      this.visible = true;
      this.resetState();
      this.loadData();
    },

    resetState() {
      this.listData = [];
      this.page = 1;
      this.isEnd = false;
      this.loading = false;
      this.selectedRow = null;
      this.selectedId = null;
    },

    // ============ 数据加载 ============
    async loadData() {
      if (this.loading || this.isEnd) return;
      this.loading = true;
      try {
        const res = await getList({
          pageNum: this.page,
          size: this.size,
          handleResult: 0, // 只查待处理的
        });
        const list = res.list || [];
        if (this.page === 1) {
          this.listData = list;
        } else {
          this.listData = this.listData.concat(list);
        }
        this.isEnd =
          list.length < this.size || this.listData.length >= res.count;
        this.page += 1;
      } catch (e) {
        console.error("加载随手拍失败", e);
        this.$refs.uToast.show({ type: "error", message: "加载失败，请重试" });
      } finally {
        this.loading = false;
      }
    },

    loadMore() {
      if (!this.isEnd && !this.loading) {
        this.loadData();
      }
    },

    // ============ 单选 ============
    onRadioChange(item) {
      this.selectedRow = item;
      this.selectedId = item.id;
    },

    // ============ 确认选择 ============
    handleConfirm() {
      if (!this.selectedRow) {
        this.$refs.uToast.show({ type: "warning", message: "请选择一条记录" });
        return;
      }
      const data = this.selectedRow;
      this.$emit("confirm", {
        sourceType: 4,
        sourceId: data.id,
        sourceName: "随手拍",
        foundUserName: data.reporterName,
        foundUserId: data.reporterId,
        foundTime: data.createTime,
        description: (data.location || "") + (data.description || ""),
        reportAttachments: data.attachment || [],
      });
      this.handleClose();
    },

    // ============ 关闭弹窗 ============
    handleClose() {
      this.visible = false;
      this.resetState();
    },
  },
};
</script>

<style lang="scss" scoped>
.snapshot-select-popup {
  /deep/ .u-popup__content {
    border-radius: 32rpx 32rpx 0 0;
    overflow: hidden;
  }

  .popup-content {
    height: 75vh;
    display: flex;
    flex-direction: column;
    background: #f5f7fb;
  }

  // ===== 头部 =====
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 32rpx;
    background: #fff;
    border-bottom: 2rpx solid #eef2f6;
    flex-shrink: 0;

    .popup-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #1f2b3c;
    }
    .close-btn {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 52rpx;
      color: #8e9aae;
      line-height: 1;
    }
  }

  // ===== 列表 =====
  .popup-body {
    flex: 1;
    overflow-y: auto;
    padding: 16rpx 24rpx;
    background: #f5f7fb;

    .card-wrapper {
      margin-top: 20rpx;
      &:first-child {
        margin-top: 0;
      }
    }

    .no-data {
      margin-top: 30vh;
    }

    .load-more {
      text-align: center;
      font-size: 26rpx;
      color: #aaa;
      padding: 30rpx 0 40rpx;
    }
  }

  // ===== 底部 =====
  .popup-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 24rpx;
    background: #fff;
    border-top: 2rpx solid #eef2f6;
    flex-shrink: 0;
    min-height: 90rpx;

    .footer-left {
      flex: 1;
      .selected-info {
        font-size: 28rpx;
        color: #2979ff;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
        max-width: 340rpx;
      }
    }

    .footer-right {
      display: flex;
      gap: 16rpx;
      flex-shrink: 0;

      /deep/ .u-button {
        border-radius: 48rpx;
        padding: 0 32rpx;
        height: 64rpx;
        font-size: 26rpx;
      }
      /deep/ .u-button--primary {
        background: #2979ff;
      }
      /deep/ .u-button--primary.u-button--disabled {
        background: #ccc;
        color: #999;
      }
    }
  }
}
</style>