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

<template>
  <view class="mainBox">
    <uni-nav-bar
      fixed="true"
      statusBar="true"
      left-icon="back"
      :title="navTitle"
      @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="currentBtnList"
            :columns="currentColumns"
            :title="item.description"
            :status="statusMap[item.handleResult]"
            @goDetail="goDetail"
            @edit="handleEdit(item)"
            @handleDelete="handleDelete(item)"
            @handleProcess="handleProcess(item)"
          />
        </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"
      @rectify="onRectify"
      @discard="onDiscard"
    />
    <!-- 废弃弹窗（仅管理模式） -->
    <discard-dialog
      v-if="mode === 'manage'"
      ref="discardDialogRef"
      @confirm="doDiscard"
    />
    <hazard-dialog
      ref="hazardDialogRef"
      @reload="reloadList"
    />

    <!-- 新增按钮（仅我的随手拍） -->
    <view v-if="mode === 'my'" class="add" @click="handleAdd">
      <u-icon name="plus" color="#fff"></u-icon>
    </view>
  </view>
</template>

<script>
import myCard from "@/components/myCard.vue";
import snapshotDialog from "./snapshotDialog.vue";
import HazardDialog from "@/pages/ehs/hazardManagement/hazardDialog.vue";
import discardDialog from "./discardDialog.vue";
import { getList, remove, discard, handle } from "@/api/snapshot/index.js";

export default {
  components: {
    myCard,
    snapshotDialog,
    discardDialog,
    HazardDialog,
  },
  props: {
    mode: {
      type: String,
      default: "my",
      validator: (v) => ["my", "manage"].includes(v),
    },
  },
  data() {
    return {
      where: {
        handleResult: "",
      },
      resultOptions: [
        {
          value: 0,
          text: "待处理",
        },
        {
          value: 1,
          text: "下发整改",
        },
        {
          value: 2,
          text: "废弃",
        },
      ],
      statusMap: {
        0: "待处理",
        1: "已整改",
        2: "已废弃",
      },
      tableList: [],
      page: 1,
      size: 10,
      isEnd: false,
      userInfo: {},
      currentId: null,
    };
  },
  computed: {
    navTitle() {
      return this.mode === "my" ? "我的随手拍" : "随手拍管理";
    },
    currentColumns() {
      return [
        [
          {
            prop: "location",
            label: "位置",
            className: "perce100",
          },
        ],
        [
          {
            prop: "problemDeptName",
            label: "所属部门",
            className: "perce100",
          },
        ],
        [
          {
            prop: "reporterName",
            label: "上报人",
            className: "perce100",
          },
        ],
        [
          {
            prop: "createTime",
            label: "上报时间",
            className: "perce100",
          },
        ],
        [
          {
            prop: "handleResult",
            label: "处理结果",
            className: "perce100",
            formatter: (row) => this.statusMap[row.handleResult],
          },
        ],
        [
          {
            label: "操作：",
            prop: "action",
            type: "action",
            className: "perce100",
          },
        ],
      ];
    },
    currentBtnList() {
      if (this.mode === "my") {
        return [
          {
            name: "编辑",
            apiName: "edit",
            btnType: "primary",
            judge: [
              {
                fn: (item) => item.handleResult === 0,
              },
            ],
          },
          {
            name: "删除",
            apiName: "handleDelete",
            btnType: "danger",
            judge: [
              {
                fn: (item) => item.handleResult === 0,
              },
            ],
          },
        ];
      } else {
        return [
          {
            name: "处理",
            apiName: "handleProcess",
            btnType: "primary",
            judge: [
              {
                fn: (item) => item.handleResult === 0,
              },
            ],
          },
        ];
      }
    },
  },
  created() {
    this.userInfo = uni.getStorageSync("userInfo") || {};
    this.getList();
  },
  methods: {
    back() {
      uni.navigateBack();
    },

    // 列表查看详情
    goDetail(item) {
      this.$refs.snapshotDialog.open("view", item);
    },

    // 新增（仅 my 模式）
    handleAdd() {
      this.$refs.snapshotDialog.open("add");
    },

    // 编辑（my 模式按钮）
    handleEdit(row) {
      this.$refs.snapshotDialog.open("edit", row);
    },

    // 删除（my 模式按钮）
    async handleDelete(row) {
      const res = await uni.showModal({
        title: "提示",
        content: "确认删除该记录吗？",
      });
      if (res[1].confirm) {
        await remove([row.id]);
        uni.showToast({
          title: "删除成功",
          icon: "success",
        });
        this.reloadList();
      }
    },

    // 处理（manage 模式按钮）
    handleProcess(row) {
      this.$refs.snapshotDialog.open("handle", row);
    },

    // 下发整改（manage 模式）
    onRectify(data, type) {
      if (type === "view") {
        this.$refs.hazardDialogRef.open("view", data);
        return;
      }
      this.currentId = data.id;
      this.$refs.hazardDialogRef &&
        this.$refs.hazardDialogRef.open("add", "", "report", {
          sourceType: 4,
          sourceId: data.id,
          sourceName: "随手拍",
          foundUserName: data.reporterName,
          foundUserId: data.reporterId,
          foundTime: data.createTime,
          description: data.location + data.description,
          reportAttachments: data.attachment,
          title: data.location + data.description,
        });
    },


    // 废弃（manage 模式）
    onDiscard(data, type) {
      this.$refs.discardDialogRef.open(data, type);
    },
    doDiscard({ id, handleOpinion }) {
      discard({
        id,
        handleOpinion,
      }).then(() => {
        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 baseData = {
          pageNum: this.page,
          size: this.size,
          handleResult:
            this.where.handleResult !== ""
              ? this.where.handleResult
              : undefined,
        };
        // 不同模式参数不同
        if (this.mode === "my") {
          baseData.reporterId = this.userInfo.userId;
        }
        const res = await getList(baseData);
        const newList = this.mode === "my" ? res.list || [] : res.list || [];
        if (this.page === 1) this.tableList = newList;
        else this.tableList.push(...newList);
        if (this.mode === "my") {
          this.isEnd = this.tableList.length >= res.count;
        } else {
          this.isEnd = newList.length < this.size;
        }
        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>