aiot-app/pages/pcs/list.vue

<template>
	<view class="mainBox">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" :title="getTitle" @clickLeft="back">
		</uni-nav-bar>

		<view class="top-wrapper">
			<view class="tab-bar">
				<view class="tab-item" :class="{ active: activeTab === 'mine' }" @click="switchTab('mine')">我的记录</view>
				<view class="tab-item" :class="{ active: activeTab === 'all' }" @click="switchTab('all')">全部记录</view>
			</view>
			<uni-section>
				<uni-easyinput prefixIcon="search" style="width: 460rpx" v-model="keyWord"
					placeholder="工单单号，计划单号，记录规则名称">
				</uni-easyinput>
			</uni-section>
			<button class="search_btn" @click="doSearch">搜索</button>
		</view>
		<div style="height: 180rpx; width: 475rpx"></div>
		<view class="wrapper">
			<u-list @scrolltolower="scrolltolower" class="listContent">
				<view v-for="(item, index) in tableList" :key="index" style="position: relative">
					<myCard :item="item" :index="index + 1" :btnList="activeTab === 'all' ? [] : btnList"
						:columns="columns" :title="item.code" :status="statusMap[item.status]"
						@goDetail="goDetail(item, 'view')" @openRedeployOther="openRedeployOther(item)"
						@edit="goDetail(item, 'edit')">
					</myCard>
				</view>
				<view style="width: 100%; height: 40rpx"></view>
				<view style="margin-top: 20vh" v-if="tableList.length == 0">
					<u-empty iconSize="150" textSize="32" text="暂无数据"> </u-empty>
				</view>
			</u-list>
		</view>

		<u-toast ref="uToast"></u-toast>
		<workOrderReport ref="workOrderReportRef" :pageName="pageName" @refresh="successInit"></workOrderReport>
		<Assign ref="Assign" @refresh="successInit"></Assign>
	</view>
</template>

<script>
	import dictMixns from "@/mixins/dictMixins";
	import myCard from "./components/myCard.vue";
	import Assign from "./components/Assign.vue";
	import workOrderReport from "./components/workOrderReport.vue";
	import {
		producetaskrulerecordQueryRecordWorkOrderPage
	} from "@/api/recordRules/index";
	export default {
		components: {
			myCard,
			workOrderReport,
			Assign,
		},
		mixins: [dictMixns],
		props: {
			pageName: {
				default: "",
			},
		},
		data() {
			return {
				statusMap: {
					0: "未报工",
					1: "执行中",
					2: "已执行",
				},
				planTypeList: {
					productionRecords: 2,
					steamInjectionInspectionRecord: 3,
					solidWasteRecord: 4,
					qualityTestRecords: 5,
					boilerOperationRecord: 6,
					QualityInspection: 7,
					HaulSlag: 8,
					TransportAsh: 9
				},
				btnList: [{
					name: "报工",
					apiName: "edit",
					btnType: "primary",

					judge: [{
						key: "status",
						value: [1],
					}, ],
				}, {
					name: "转派",
					apiName: "openRedeployOther",
					btnType: "primary",

					judge: [{
						key: "status",
						value: [1],
					}, ],
				}],
				columns: [
					[{
						label: "计划单号：",
						prop: "planCode",
						className: "perce100",
					}, ],
					[{
						label: "记录规则名称：",
						prop: "ruleName",
						className: "perce100",
					}, ],
					[{
						label: "场站名称：",
						className: "perce100",
						prop: "productLineName",
					}, ],
					[{
						className: "perce100",
						label: "班组：",
						prop: "teamName",
					}, ],
					[{
						label: "工单生成时间：",
						className: "perce100",
						prop: "createTime",
					}, ],
					[{
						label: "检查时间：",
						className: "perce100",
						prop: "checkStartTime",
					}, ],
					[{
						label: "报工时间：",
						className: "perce100",
						prop: "checkFinishTime",
					}, ],
					[{
						label: "执行人：",
						className: "perce100",
						prop: "executeUsers",
						formatter: (row) => {
							if ((row.type == 1 && row.status == 2) || row.type != 1) {
								return row.executeUsers && row.executeUsers.map((i) => i.userName).join(',');
							}
						},
					}, ],
					[{
							label: "客户：",
							prop: "contactName",
							className: "perce100",
							isNone: !['productionRecords', 'qualityTestRecords'].includes(
								this.pageName
							) || this.pageName == 'boilerOperationRecord'
						},
						{
							label: "供应商：",
							prop: "supplierName",
							className: "perce100",
							isNone: [
								'productionRecords',
								'qualityTestRecords',
								'boilerOperationRecord'
							].includes(this.pageName)
						},

					],
					[{
						label: "操作：",
						prop: "action",
						type: "action",
						className: "perce100",
					}, ],
				].filter((item) => !item.isNone),

				tableList: [],
				page: 1,
				size: 10,
				isEnd: false,
				keyWord: "",
				userInfo: {},
				activeTab: 'mine',
			};
		},
		computed: {
			getTitle() {
				return this.pageName == "productionRecords" ?
					"生产记录" :
					this.pageName == "steamInjectionInspectionRecord" ?
					"注汽检查记录" :
					this.pageName == "solidWasteRecord" ?
					"固废记录" :
					this.pageName == "qualityTestRecords" ?
					"质量检查检测记录" : this.pageName == "HaulSlag" ?
					"拉渣记录表" : this.pageName == "TransportAsh" ?
					"拉灰记录表" : this.pageName == "QualityInspection" ?
					"来煤质检记录" :
					"锅炉运行记录";
			},
		},
		created() {
			this.requestDict("记录规则类型");
		},
		onLoad() {},

		methods: {
			goDetail(item, type) {
				console.log(item, "item");
				this.$refs.workOrderReportRef.open(item, type);
			},
			openRedeployOther(row) {
				this.$refs.Assign.open(row)
			},
			switchTab(tab) {
				if (this.activeTab === tab) return;
				this.activeTab = tab;
				this.isEnd = false;
				this.page = 1;
				this.tableList = [];
				this.getList();
			},
			successInit() {
				uni.showLoading({
					title: "加载中",
				});

				let data = {
					pageNum: 1,
					size: this.tableList.length,
					keyword: this.keyWord,
					planType: this.planTypeList[this.pageName],
				};
				if (this.activeTab === 'mine') {
					data.currentLoginUserId = this.userInfo.userId;
				}

				producetaskrulerecordQueryRecordWorkOrderPage(data)
					.then((res) => {
						this.tableList = res.list;
					})
					.then(() => {
						uni.hideLoading();
					});
			},
			doSearch() {
				this.isEnd = false;
				this.page = 1;
				this.getList();
			},
			//获取列表信息
			getList() {
				this.userInfo = uni.getStorageSync("userInfo");
				if (this.isEnd || !this.userInfo.userId) {
					return;
				}
				uni.showLoading({
					title: "加载中",
				});

				let data = {
					pageNum: this.page,
					size: this.size,
					keyword: this.keyWord,
					planType: this.planTypeList[this.pageName],
				};
				if (this.activeTab === 'mine') {
					data.currentLoginUserId = this.userInfo.userId;
				}

				producetaskrulerecordQueryRecordWorkOrderPage(data)
					.then((res) => {
						if (this.page === 1) {
							this.tableList = res.list;
						} else {
							this.tableList.push(...res.list);
						}
						this.page += 1;
						this.isEnd = this.tableList.length >= res.count;
					})
					.then(() => {
						uni.hideLoading();
					});
			},
			scrolltolower() {
				if (this.isEnd) {
					return;
				}
				this.getList();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.mainBox {
		background-color: #f3f8fb;
	}

	// .wrapper{

	// }
	.top-wrapper {
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		width: 750rpx;
		padding: 16rpx 32rpx;
		align-items: center;
		position: absolute;
		z-index: 999;

		.tab-bar {
			display: flex;
			width: 100%;
			margin-bottom: 16rpx;
			border-bottom: 2rpx solid #eee;
		}

		.tab-item {
			flex: 1;
			text-align: center;
			padding: 16rpx 0;
			font-size: 30rpx;
			color: #666;
			position: relative;

			&.active {
				color: $theme-color;
				font-weight: bold;

				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 60rpx;
					height: 4rpx;
					background: $theme-color;
					border-radius: 4rpx;
				}
			}
		}

		/deep/.uni-section {
			margin-top: 0px;
		}

		/deep/.uni-section-header {
			padding: 0px;
		}

		.search_btn {
			width: 120rpx;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 24rpx;
			background: $theme-color;
			font-size: 32rpx;
			color: #fff;
			margin: 0;
			margin-left: 26rpx;
		}

		.menu_icon {
			width: 44rpx;
			height: 44rpx;
			margin-left: 14rpx;
		}
	}
</style>