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

<template>
  <view class="process-list">
    <view class="search-row">
      <input
        class="search-input"
        v-model="searchName"
        placeholder="事故事件名称"
      />
      <view class="dept-btn" @click="showDeptPicker"
        ><text>{{ deptName || "责任单位" }}</text
        ><text class="arrow">▾</text></view
      >
      <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="processColumns"
          :title="item.acdntName"
          :status="getStatusLabel(item.approvalStatus)"
          @goDetail="goDetail"
          @handleProcess="handleProcess"
        />
      </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>

    <!-- 弹窗 -->
    <processDialog ref="processDialogRef" @reload="reloadList" />
    <accidentDialog ref="dialogRef" @reload="reloadList" />
    <ba-tree-picker
      ref="treePicker"
      key="dept"
      :multiple="false"
      @select-change="onDeptConfirm"
      title="选择部门"
      :localdata="deptList"
      valueKey="id"
      textKey="name"
    />
    <u-toast ref="uToast" />
  </view>
</template>

<script>
import myCard from "@/components/myCard.vue";
import processDialog from "./processDialog.vue";
import accidentDialog from "./accidentDialog.vue";
import baTreePicker from "@/components/ba-tree-picker/ba-tree-picker.vue";
import { pageApproved } from "@/api/accidentReport/index.js";
import { listOrganizations } from "@/api/common.js";

export default {
  components: { myCard, processDialog, accidentDialog, baTreePicker },
  data() {
    return {
      searchName: "",
      deptId: null,
      deptName: "责任单位",
      deptList: [],
      listData: [],
      page: 1,
      size: 10,
      isEnd: false,
      loading: false,
      processColumns: [
        [{ prop: "acdntCode", label: "编码", className: "perce100" }],
        [
          { prop: "dutyUnitName", label: "责任单位", className: "perce50" },
          { prop: "acdntPlace", label: "地点", className: "perce50" },
        ],
        [{ prop: "occurrenceTime", label: "发生时间", className: "perce100" }],
        [
          {
            prop: "ascertainedStatus",
            label: "事故原因",
            className: "perce33",
            formatter: (row) =>
              row.ascertainedStatus == 1 ? "已查清" : "未查清",
          },
          {
            prop: "responsibilityStatus",
            label: "责任人员",
            className: "perce33",
            formatter: (row) =>
              row.responsibilityStatus == 1 ? "已处理" : "未处理",
          },
          {
            prop: "correctiveMeasuresStatus",
            label: "整改措施",
            className: "perce33",
            formatter: (row) =>
              row.correctiveMeasuresStatus == 1 ? "已落实" : "未落实",
          },
        ],
        [
          {
            label: "操作",
            prop: "action",
            type: "action",
            className: "perce100",
          },
        ],
      ],
    };
  },
  mounted() {
    this.loadDeptList();
    this.getList();
  },
  methods: {
    async loadDeptList() {
      try {
        const res = await listOrganizations({});
        this.deptList = res || [];
      } catch (e) {}
    },
    showDeptPicker() {
      this.$refs.treePicker._show();
    },
    onDeptConfirm(data) {
      const id = data[0];
      this.deptId = id;
      const find = (list) => {
        for (const item of list) {
          if (item.id === id) return item.name;
          if (item.children) {
            const f = find(item.children);
            if (f) return f;
          }
        }
        return null;
      };
      this.deptName = find(this.deptList) || "责任单位";
      this.page = 1;
      this.isEnd = false;
      this.getList();
    },
    getStatusLabel(status) {
      return (
        { 0: "待提交", 1: "审批中", 2: "已通过", 3: "已驳回" }[status] || status
      );
    },
    getBtnList(item) {
      return [
        {
          name: "查看",
          apiName: "goDetail",
          btnType: "info",
          judge: [{ fn: () => true }],
        },
        {
          name: "处理",
          apiName: "handleProcess",
          btnType: "primary",
          judge: [{ fn: () => true }],
        },
      ];
    },
    goDetail(item) {
      this.$refs.dialogRef.open(item, "view");
    },
    handleProcess(item) {
      this.$refs.processDialogRef.open(item);
    },
    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 pageApproved(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>
.process-list {
  .search-row {
    display: flex;
    align-items: center;
    gap: 12rpx;
    padding: 16rpx 20rpx;
    background: #fff;
    border-radius: 24rpx;
    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;
  }
  .load-more {
    text-align: center;
    font-size: 26rpx;
    color: #aaa;
    padding: 20rpx 0;
  }
}
</style>