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(item)" @handleSubmit="handleSubmit(item)" @handleDelete="handleDelete(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>

		<!-- 新增按钮 -->
		<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 {
		processInstanceCreateAPI,
		processInstancePage
	} from '@/api/wt/index.js'
	import {
		getList,
		remove
	} from "@/api/accidentReport/index.js";
	import {
		reviewStatusEnum
	} 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 reviewStatusEnum.find(item => item.value == status).label
			},

			getBtnList(item) {
				const btns = [];
				const canEdit = [0, 3].includes(item.approvalStatus);
				if (canEdit) {
					btns.push({
						name: "编辑",
						apiName: "edit",
						btnType: "primary",
						judge: [{
							// authorities: 'ehs:accidentIncidents:update'
						}],
					});
					btns.push({
						name: "提交",
						apiName: "handleSubmit",
						btnType: "success",
						judge: [{
							// authorities: 'ehs:accidentIncidents:update'
						}],
					});
					btns.push({
						name: "删除",
						apiName: "handleDelete",
						btnType: "danger",
						judge: [{
							// authorities: 'ehs:accidentIncidents:delete'
						}],
					});
				}

				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");
			},

			async handleSubmit(row) {
				//后台不提供接口
				let list = await processInstancePage({
					pageNo: 1,
					pageSize: 1,
					reset: true,
					key: 'ehs_accident_incidents'
				})
				let params = {
					businessId: row.id,
					businessKey: 'ehs_accident_incidents',
					formCreateUserId: row.createUserId,
					processDefinitionId: list.list[0].processDefinition.id,
					variables: {
						businessCode: row.acdntCode,
						businessName: row.acdntName,
						businessType: row.acdntTypeName
					},
				}

				await processInstanceCreateAPI(params)
				uni.showModal({
					title: `提交成功`,
					content: '',
					confirmText: '确认',
					showCancel: false, // 是否显示取消按钮，默认为 true
					success: () => {
						this.reloadList();
					}
				})
			},

			async handleDelete(item) {
				const res = await uni.showModal({
					title: "提示",
					content: "确认删除该事故记录吗？",
				});
				console.log(res, 'dsds')
				if (res[1].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>