qa-prevention-xgf-app/safetyEnvirSubPackages/pages/initiate/list.vue

<template>
	<view>
		<!-- 吸顶搜索框 start -->
		<key-word-search-input
			:inputSearchValue="searchForm.HIDDENDESCR"
			@search="resetList"
			is-has-filter
			@showPicker="showPicker"
		/>
		<!-- 吸顶搜索框 end -->

		<!-- 筛选器 start -->
		<u-picker
			:show="show"
			:columns="columns"
			keyName="name"
			@cancel="show = false"
			@confirm="confirmPicker"
		/>
		<!-- 筛选器 end -->

		<!-- 列表渲染 start -->
		<list :list="list" @scrollToLower="scrollToLower">
			<template #default="{ item }">
				<view class="flex-between main-title">
					<text>被检查单位：{{ item.INSPECTED_DEPARTMENT_NAME }}</text>
				</view>
				<view class="flex-between mt-10 subtitle">
					<text>检查发起人：{{ item.INSPECTION_ORIGINATOR_NAME }}</text>
					<text>检查类型：{{ item.INSPECTION_TYPE_NAME }}</text>
				</view>
				<view class="flex-between mt-10 subtitle">
					<text
						>检查时间：自 {{ item.INSPECTION_TIME_START }} 至
						{{ item.INSPECTION_TIME_END }} 止</text
					>
				</view>
				<view class="flex-between mt-10 subtitle">
					<text>
						状态：
						<template v-if="item.INSPECTION_STATUS == '0'"
							>待检查人核实</template
						>
						<template v-else-if="item.INSPECTION_STATUS == '1'"
							>检查人核实中</template
						>
						<template v-else-if="item.INSPECTION_STATUS == '2'"
							>待被检查人确认</template
						>
						<template v-else-if="item.INSPECTION_STATUS == '3'"
							>待指派</template
						>
						<template v-else-if="item.INSPECTION_STATUS == '4'"
							>指派中</template
						>
						<template v-else-if="item.INSPECTION_STATUS == '5'"
							>指派完成</template
						>
						<template v-else-if="item.INSPECTION_STATUS == '6'"
							>检查待验收</template
						>
						<template v-else-if="item.INSPECTION_STATUS == '7'"
							>检查已验收</template
						>
						<template v-else-if="item.INSPECTION_STATUS == '8'"
							>已归档</template
						>
						<template v-else-if="item.INSPECTION_STATUS == '-1'"
							>检查人核实打回</template
						>
						<template v-else-if="item.INSPECTION_STATUS == '-2'"
							>被检查人申辩</template
						>
					</text>
				</view>
				<view class="flex-end">
					<view>
						<u-button
							type="primary"
							text="查看"
							size="mini"
							shape="circle"
							@click="fnNavigatorDetail(item.INSPECTION_ID, 'view')"
						/>
					</view>
					<view class="ml-10">
						<u-button
							type="primary"
							text="流程图"
							size="mini"
							shape="circle"
							@click="showFlowChart(item.INSPECTION_ID)"
						/>
					</view>
					<view class="ml-10" v-if="item.INSPECTION_STATUS === '-1'">
						<u-button
							type="primary"
							text="编辑"
							size="mini"
							shape="circle"
							@click="fnNavigatorDetail(item.INSPECTION_ID, 'edit')"
						/>
					</view>
					<view class="ml-10" v-if="item.INSPECTION_STATUS === '-2'">
						<u-button
							type="primary"
							text="申辩处理"
							size="mini"
							shape="circle"
							@click="fnNavigatorPlead(item.INSPECTION_ID)"
						/>
					</view>
				</view>
			</template>
		</list>
		<!-- 列表渲染 end -->
	</view>
</template>

<script>
import { getSafetyenvironmentalList } from "../../api";
import keyWordSearchInput from "@/components/keyWordSearchInput/index.vue";
import List from "@/components/list/list.vue";
// import { initiateList } from "../../../Mock/safetyEnvirData";

export default {
	components: { keyWordSearchInput, List },

	data() {
		return {
			show: false,
			columns: [
				[
					{ id: "", name: "请选择" },
					{ id: "0", name: "待检查人核实" },
					{ id: "1", name: "检查人核实中" },
					{ id: "2", name: "待被检查人确认" },
					{ id: "3", name: "已归档" },
					{ id: "4", name: "指派中" },
					{ id: "5", name: "指派完成" },
					{ id: "6", name: "待验收" },
					{ id: "7", name: "已验收" },
					{ id: "-1", name: "检查人核实打回" },
					{ id: "-2", name: "被检查人申辩" },
				],
			],
			searchForm: {
				HIDDENDESCR: "",
			},
			INSPECTION_STATUS: "",
			pageSize: 10,
			currentPage: 1,
			totalPage: 0,
			list: [],
		};
	},
	onNavigationBarButtonTap(e) {
		if (e.index === 0) {
			this.fnNavigatorDetail("", "add");
		}
	},
	computed: {
		userInfo() {
			return this.$store.getters.getUserInfo;
		},
	},
	onShow() {
		this.resetList();
	},
	methods: {
		async getData() {
			// uni.showLoading({
			// 	title: "加载中",
			// });
			// TODO: 目前因后端资源接口未完成,故注释接口数据接入逻辑
			let resData = await getSafetyenvironmentalList({
			  loginUserId: this.userInfo.USER_ID,
			  supDeparIds: this.userInfo.supDeparIds,
			  roleLevel: this.userInfo.roleLevel,
			  // KEYWORDS: this.keyword,
			  INSPECTION_STATUS: this.INSPECTION_STATUS,
			  showCount: this.pageSize,
			  currentPage: this.currentPage,
			});
			this.list = [...this.list, ...resData.varList];
			this.totalPage = resData.page.totalPage;

			// 虚拟 mock 数据渲染
			// setTimeout(() => {
			// 	this.list = initiateList;
			// 	this.totalPage = initiateList.length;
			// 	uni.hideLoading();
			// }, 400);
		},
		resetList() {
			this.pageSize = 10;
			this.currentPage = 1;
			this.list = [];
			this.getData();
		},
		showPicker() {
			this.show = true;
		},
		confirmPicker(e) {
			this.INSPECTION_STATUS = e.value[0].id;
			this.show = false;
			this.resetList();
		},
		fnNavigatorDetail(INSPECTION_ID, type) {
			uni.$u.route({
				url: "/safetyEnvirSubPackages/pages/initiate/detail",
				params: {
					INSPECTION_ID,
					type,
				},
			});
		},
		/**
		 * 申辩处理按钮事件
		 */
		fnNavigatorPlead(INSPECTION_ID) {
			uni.$u.route({
				url: "/safetyEnvirSubPackages/pages/initiate/plead",
				params: {
					INSPECTION_ID,
				},
			});
		},
		/**
		 * 滚动加载数据
		 */
		 scrollToLower() {
			this.currentPage++;
			if (this.totalPage >= this.currentPage) this.getData();
		},
		/**
		 * 查看流程图
		 */
		showFlowChart(id) {
			uni.navigateTo({
				url: "/safetyEnvirSubPackages/pages/initiate/steps?ID=" + id,
			});
		},
	},
};
</script>

<style scoped lang="scss">
.self-time {
	font-size: 14px;
}
</style>