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

<template>
	<view class="process-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="processColumns"
					:title="item.acdntName" :status="getStatusLabel(item.approvalStatus)" @goDetail="goDetail"
					@handleProcess="handleProcess(item)" />
			</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";
	import {
		reviewStatusEnum
	} from "@/enum/dict";
	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: "perce50",
							formatter: (row) =>
								row.ascertainedStatus == 1 ? "已查清" : "未查清",
						},
						{
							prop: "responsibilityStatus",
							label: "责任人员",
							className: "perce50",
							formatter: (row) =>
								row.responsibilityStatus == 1 ? "已处理" : "未处理",
						},

					],
					[{
							prop: "correctiveMeasuresStatus",
							label: "整改措施",
							className: "perce33",
							formatter: (row) =>
								row.correctiveMeasuresStatus == 1 ? "已落实" : "未落实",
						},
						{
							prop: "personnelEducationStatus",
							label: "人员教育",
							className: "perce50",
							formatter: (row) =>
								row.personnelEducationStatus == 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 reviewStatusEnum.find(item => item.value == status).label
			},
			getBtnList(item) {
				return [

					{
						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>