qa-prevention-xgf-app/hiddenManageSubPackages/pages/hidden_record/index.vue

<!-- 隐患记录 -->
<template>
	<view>
		<!-- 吸顶搜索框 start -->
		<key-word-search-input
			:inputSearchValue="searchForm.HIDDENDESCR"
			@search="handleSearch"
		/>
		<!-- 吸顶搜索框 end -->

		<!-- 列表渲染 start -->
		<list :list="list" @scrollToLower="scrollToLower">
			<template #default="{ item }">
				<view class="flex-between main-title">
					<view class="u-line-1">{{ item.HIDDENDESCR || "暂无" }}</view>
					<view :class="hiddenLevelColor[item.HIDDENLEVEL]">
						{{ item.HIDDENLEVELNAME }}
					</view>
				</view>
				<view class="flex-between subtitle mt-5">
					<view>来源：{{ hiddenSource[item.SOURCE] }}</view>
				</view>
				<view class="flex-between subtitle mt-5">
					<view>隐患发现人：{{ item.findUserNames || "暂无" }}</view>
					<view>
						隐患发现时间：{{
							item.DISCOVERYTIME ? formatTime(item.DISCOVERYTIME) : "暂无"
						}}
					</view>
				</view>
				<view class="flex-between subtitle mt-5">
					<view>隐患确认人：{{ item.confirmUserName || "暂无" }}</view>
					<view>
						隐患确认时间：{{
							item.CONFIRM_TIME ? formatTime(item.CONFIRM_TIME) : "暂无"
						}}
					</view>
				</view>
				<view class="flex-between subtitle mt-5">
					<view>隐患整改人：{{ item.RECTIFICATIONORNAME || "暂无" }}</view>
					<view>
						整改完成时间：{{
							item.RECTIFICATIONTIME
								? formatTime(item.RECTIFICATIONTIME)
								: "暂无"
						}}
					</view>
				</view>
				<view class="flex-between subtitle mt-5">
					<view>隐患整改人：{{ item.CHECKNAME || "暂无" }}</view>
					<view>
						整改完成时间：{{
							item.RECTIFICATIONTIME
								? formatTime(item.RECTIFICATIONTIME)
								: "暂无"
						}}
					</view>
				</view>
				<view class="flex-between subtitle mt-5">
					<view>隐患状态：{{ statusList[item.STATE] }}</view>
					<view class="flex-between">
						<!-- v-if="item.CREATOR === store.state.userInfo.USER_ID && item.STATE === '16'" -->
						<block
							v-if="
								item.CREATOR === store.state.userInfo.USER_ID &&
								item.STATE === '16'
							"
						>
							<view>
								<u-button
									type="primary"
									size="mini"
									shape="circle"
									@click="handleEditClick(item)"
								>
									修改
								</u-button>
							</view>
							<view class="ml-10">
								<u-button
									type="primary"
									size="mini"
									shape="circle"
									@click="fnDelete(item.HIDDEN_ID)"
								>
									删除
								</u-button>
							</view>
						</block>
						<view class="ml-10">
							<u-button
								type="primary"
								size="mini"
								shape="circle"
								@click="handleClickView(item)"
							>
								查看
							</u-button>
						</view>
					</view>
				</view>
			</template>
		</list>
		<!-- 列表渲染 end -->

		<search-popup
			:form="form"
			@search="handleSearch"
			@update-time="handleUpdateTime"
		/>
	</view>
</template>

<script>
import keyWordSearchInput from "@/components/keyWordSearchInput/index.vue";
import List from "@/components/list/list.vue";
import SearchPopup from "./components/search-popup.vue";
import * as HiddenAcceptanceApi from "../../api/index";
import { setHiddenDelete } from "../../api";
import dayjs from "dayjs";
import { HIDDEN_LEVEL_COlOR, HIDDEN_SOURCE } from "@/utils/constant";
import { hidden_record_list } from "@/Mock/responseData.js";

export default {
	components: { keyWordSearchInput, List, SearchPopup },

	onLoad() {},

	data() {
		return {
			store: this.$store, // 存储全局 store 到数据当前组件
			searchForm: {
				HIDDENDESCR: "", // 吸顶搜索框的搜索值
			},
			form: {
				HIDDENLEVEL: "", // 隐患级别
				STARTTIME: "", // 开始时间
				ENDTIME: "", // 结束时间
				STATE: "", // 隐患状态
			},
			isRequestEnd: false, // 请求是否已结束
			pagination: {
				showCount: 10,
				currentPage: 1,
				stateConfirm: "0",
				total: 0,
			},
			statusList: {
				"-2": "待确认",
				"-1": "已过期",
				1: "未整改",
				2: "已整改",
				3: "已复查",
				4: "已验收",
				5: "已忽略",
				6: "重大隐患",
				7: "待处理特殊隐患",
				8: "特殊处理隐患",
			},
			list: [],
		};
	},

	// 页面展示后立刻触发
	onShow() {
		this.getList();
	},

	created() {},

	computed: {
		hiddenLevelColor() {
			return HIDDEN_LEVEL_COlOR;
		},
		hiddenSource() {
			return HIDDEN_SOURCE;
		},
	},

	mounted() {},

	methods: {
		/** 处理搜索事件 */
		async handleSearch(filterVal) {
			console.log('filterVal :>> ', filterVal);
			this.pagination = {
				...this.pagination,
				currentPage: 1,
				showCount: 10,
				total: 0,
			};
			await this.getList(filterVal);
		},
		/** 获取列表数据 */
		getList(params) {
			console.log('params :>> ', params);
			if (this.isRequestEnd) return null;
			uni.showLoading({
				title: "加载中",
			});
			let { USER_ID, CORPINFO_ID, DEPARTMENT_ID } = this.store.state.userInfo;
			// HiddenAcceptanceApi.getHiddenList({
			// 	USER_ID: USER_ID,
			// 	CORPINFO_ID,
			// 	currentPage: this.pagination.currentPage,
			// 	showCount: this.pagination.showCount,
			// 	DISPOSESTATE: 2,
			// 	stateConfirm: this.pagination.stateConfirm,
			// 	USERDEPT: DEPARTMENT_ID,
			// 	SELFUSERID: USER_ID,
			// 	corpinfoId: CORPINFO_ID,
			// 	loginUserId: USER_ID,
			// });

			// 虚拟 mock 数据渲染
			setTimeout(() => {
				this.list = hidden_record_list;
				this.pagination.total = hidden_record_list.length;
				uni.hideLoading();
			}, 400);
		},
		/** 格式化日期时间 */
		formatTime(val) {
			return dayjs(val).format("YYYY-MM-DD");
		},
		/** 向下滚动加载数据 */
		async scrollToLower() {
			this.pagination.currentPage = this.pagination.currentPage++;
			if (this.total >= this.pagination.currentPage) await this.getList();
		},
		/** 验收按钮点击事件 */
		handleEditClick(ext) {
			uni.$u.route("/hiddenManageSubPackages/pages/hidden_report/index", {
				HIDDEN_ID: ext.HIDDEN_ID,
			});
		},
		/** 删除按钮点击事件 */
		async fnDelete() {
			await setHiddenDelete({ HIDDEN_ID, loginUserName: userInfo.NAME });
			uni.showToast({
				icon: "none",
				title: "删除成功",
			});
			handleSearch();
		},
		/** 查看按钮点击事件 */
		handleClickView(ext) {
			uni.$u.route("/hiddenManageSubPackages/pages/hidden_record/view", {
				HIDDEN_ID: ext.HIDDEN_ID,
			});
		},
		/** 更新 form 表单中开始时间和结束时间两个字段 */
		handleUpdateTime({ field, value }) {
			this.form = {
				...this.form,
				[field]: value,
			};
		},
	},
};
</script>

<style scoped lang="scss">
.u-line-1 {
	width: 500rpx;
}
</style>