aiot-app/pages/ehs/accidentReport/accident.vue

<template>
  <view class="accident-list">
    <!-- 搜索 -->
    <view class="search-row">
      <input
        class="search-input"
        v-model="searchName"
        placeholder="事故事件名称"
      />

      <button class="search-btn" @click="handleSearch">搜索</button>
    </view>

    <u-list @scrolltolower="loadMore" class="list-content">
      <view v-for="(item, idx) in listData" :key="item.id" class="card-wrapper">
        <myCard
          :item="item"
          :index="idx + 1"
          :btnList="getBtnList(item)"
          :columns="cardColumns"
          :title="item.acdntName"
          :status="getStatusLabel(item.approvalStatus)"
          @goDetail="goDetail"
          @edit="handleEdit"
          @handleSubmit="handleSubmit"
          @handleDelete="handleDelete"
        />
      </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 v-if="!loading && listData.length === 0" text="暂无数据" />
    </u-list>

    <!-- 新增按钮 -->
    <view class="add-btn" @click="handleAdd">
      <u-icon name="plus" color="#fff" size="40"></u-icon>
    </view>

    <!-- 弹窗 -->
    <accidentDialog ref="dialogRef" @reload="reloadList" />
    <!-- <processSubmitDialog ref="processSubmitRef" @reload="reloadList" /> -->

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

<script>
import myCard from "@/components/myCard.vue";
import accidentDialog from "./accidentDialog.vue";

import { getList, remove } from "@/api/accidentReport/index.js";
import { reviewStatus } from "@/enum/dict";

export default {
  components: { myCard, accidentDialog },
  data() {
    return {
      searchName: "",
      deptId: null,
      listData: [],
      page: 1,
      size: 10,
      isEnd: false,
      loading: false,
      cardColumns: [
        [{ prop: "acdntCode", label: "编码", className: "perce100" }],
        [{ prop: "acdntPlace", label: "发生地点", className: "perce100" }],
        [
          { prop: "dutyUnitName", label: "责任单位", className: "perce50" },
          { prop: "acdntLevelName", label: "事故级别", className: "perce50" },
        ],
        [{ prop: "occurrenceTime", label: "发生时间", className: "perce100" }],
        [
          {
            label: "操作",
            prop: "action",
            type: "action",
            className: "perce100",
          },
        ],
      ],
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    onDeptConfirm(data) {
      const id = data[0];
      this.deptId = id;
      const findDept = (list) => {
        for (const item of list) {
          if (item.id === id) return item.name;
          if (item.children) {
            const found = findDept(item.children);
            if (found) return found;
          }
        }
        return null;
      };
      this.deptName = findDept(this.deptList) || "责任单位";
      this.page = 1;
      this.isEnd = false;
      this.getList();
    },

    getStatusLabel(status) {
      return;
      return reviewStatus[status] || status;
    },

    getBtnList(item) {
      const btns = [];
      const canEdit = [0, 3].includes(item.approvalStatus);
      if (canEdit) {
        btns.push({
          name: "编辑",
          apiName: "edit",
          btnType: "primary",
          judge: [{ fn: () => true }],
        });
        btns.push({
          name: "提交",
          apiName: "handleSubmit",
          btnType: "success",
          judge: [{ fn: () => true }],
        });
        btns.push({
          name: "删除",
          apiName: "handleDelete",
          btnType: "danger",
          judge: [{ fn: () => true }],
        });
      }
      // 查看始终有
      btns.push({
        name: "详情",
        apiName: "goDetail",
        btnType: "info",
        judge: [{ fn: () => true }],
      });
      return btns;
    },

    goDetail(item) {
      this.$refs.dialogRef.open(item, "view");
    },
    handleAdd() {
      this.$refs.dialogRef.open(null, "add");
    },
    handleEdit(item) {
      this.$refs.dialogRef.open(item, "edit");
    },

    handleSubmit(item) {
      this.$refs.processSubmitRef.open({
        businessId: item.id,
        businessKey: "ehs_accident_incidents",
        formCreateUserId: item.createUserId,
        variables: {
          businessCode: item.acdntCode,
          businessName: item.acdntName,
          businessType: item.acdntTypeName,
        },
      });
    },

    async handleDelete(item) {
      const res = await uni.showModal({
        title: "提示",
        content: "确认删除该事故记录吗？",
      });
      if (res.confirm) {
        try {
          await remove([item.id]);
          uni.showToast({ title: "删除成功", icon: "success" });
          this.reloadList();
        } catch (e) {
          this.$refs.uToast.show({ type: "error", message: e.message });
        }
      }
    },

    handleSearch() {
      this.page = 1;
      this.isEnd = false;
      this.getList();
    },

    reloadList() {
      this.page = 1;
      this.isEnd = false;
      this.getList();
    },

    async getList() {
      if (this.loading || this.isEnd) return;
      this.loading = true;
      try {
        const params = {
          pageNum: this.page,
          size: this.size,
          acdntName: this.searchName || undefined,
          dutyUnitId: this.deptId || undefined,
        };
        const res = await getList(params);
        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) {
        this.$refs.uToast.show({
          type: "error",
          message: e.message || "加载失败",
        });
      } finally {
        this.loading = false;
      }
    },

    loadMore() {
      if (!this.isEnd && !this.loading) this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.accident-list {
  .search-row {
    display: flex;
    align-items: center;
    gap: 12rpx;
    padding: 16rpx 0;
    background: #fff;
    border-radius: 24rpx;
    padding: 16rpx 20rpx;
    margin-bottom: 16rpx;
    .search-input {
      flex: 1;
      height: 60rpx;
      background: #f5f7fb;
      border-radius: 48rpx;
      padding: 0 20rpx;
      font-size: 26rpx;
    }
    .dept-btn {
      display: flex;
      align-items: center;
      height: 60rpx;
      padding: 0 20rpx;
      background: #e8edf4;
      border-radius: 48rpx;
      color: #2979ff;
      font-size: 24rpx;
      gap: 4rpx;
      .arrow {
        font-size: 18rpx;
      }
    }
    .search-btn {
      height: 60rpx;
      padding: 0 28rpx;
      background: $theme-color;
      border-radius: 48rpx;
      color: #fff;
      font-size: 26rpx;
      line-height: 60rpx;
    }
  }
  .list-content {
    height: calc(100vh - 300rpx);
  }
  .card-wrapper {
    margin-top: 16rpx;
  }
  .add-btn {
    position: fixed;
    bottom: 120rpx;
    right: 40rpx;
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    background: $theme-color;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
    z-index: 999;
  }
  .load-more {
    text-align: center;
    font-size: 26rpx;
    color: #aaa;
    padding: 20rpx 0;
  }
}
</style>