zhuangpeimespda/pages/produceManagement/workorder/workorder.vue

<template>
	<view>
		<!-- 工单列表 -->
		<view class="query-card">
			<uni-forms style="width: 100%" ref="form">
				<uni-forms-item label="日期">
					<uni-datetime-picker type="date" :clear-icon="false" v-model="query.dateTime" />
				</uni-forms-item>
				<!-- <uni-forms-item label="线别">
					<uni-data-select v-model="query.lineCode" :localdata="lineOptions" :clear="false"></uni-data-select>
				</uni-forms-item> -->
				<uni-forms-item label="组别">
					<uni-data-select v-model="query.groupCode" :localdata="groupOptions" :clear="false"></uni-data-select>
				</uni-forms-item>
				<button type="primary" plain @click="getList()">
					<uni-icons color="#2979ff" type="search" size="18"></uni-icons>
					查询
				</button>
			</uni-forms>
		</view>
		<scroll-view class="scroll-view" scroll-y="true">
			<uni-list style="width: 100%">
				<uni-list-item
					:class="getWorkOrderClass(item)"
					v-for="(item, index) in dataList"
					:key="index"
					:title="item.title"
					:note="item.note"
					:rightText="item.rightText"
					link
					@click="onListItemClick(item)"
				></uni-list-item>
			</uni-list>
		</scroll-view>
		<view class="bottom-box">
			<button type="primary" @click="scanToReport">
				<uni-icons color="#fff" type="scan" size="18"></uni-icons>
				扫码报工
			</button>
		</view>
	</view>
</template>

<script>
// 基础数据
import { GetAllRoute, GetAllGroup } from '@/api/workorder/proworkorder.js';
// 工单信息
import { getReportWorkOrderList } from '@/api/workorder/proreportwork.js';
import { tansParams } from '@/utils/common';
export default {
	data() {
		return {
			// 查询条件
			query: {
				lineCode: '',
				groupCode: '1',
				dateTime: this.$dayjs().format('YYYY-MM-DD')
			},
			value: '',
			// 线别
			lineOptions: [],
			// 组别
			groupOptions: [],
			// 工单
			dataList: [],
			workOrderSelect: '',
			sessionKey: '_WorkorderSearch'
		};
	},
	created() {
		this.init();
	},
	onShow: function () {
		this.getSessionStorage();
		this.getList();
	},
	methods: {
		init() {
			// 初始化数据
			this.getSelectOptions();
		},
		getWorkOrderClass(item) {
			if (item.status === 1) {
				return '';
			}
			if (item.status === 2) {
				return 'bg-blue';
			}
			if (item.status === 3) {
				return 'bg-green';
			}
		},
		async getSelectOptions() {
			uni.showLoading();
			const res1 = await GetAllRoute();
			if (res1.code === 200) {
				this.lineOptions = res1.data.map((item) => {
					return {
						id: item.id,
						text: `${item.name}`,
						value: `${item.code}`
					};
				});
			}

			const res2 = await GetAllGroup();
			if (res2.code === 200) {
				this.groupOptions = res2.data.map((item) => {
					return {
						id: item.id,
						text: `${item.groupName}`,
						value: `${item.groupCode}`
					};
				});
			}

			uni.hideLoading();
		},
		setSessionStorage(query) {
			try {
				const _query = JSON.stringify(query);
				return uni.setStorageSync(this.sessionKey, _query);
			} catch (e) {
				return;
			}
		},
		getSessionStorage() {
			try {
				const _query = JSON.parse(uni.getStorageSync(this.sessionKey));
				if (_query != '' && _query != null) {
					this.query = _query;
				}
			} catch (e) {
				return;
			}
		},
		// 获取数据
		getList() {
			this.dataList = [];
			const params = {
				pageIndex: 1,
				pageSize: 1000,
				groupCode: this.query.groupCode,
				lineCode: null,
				timeRange: [this.query.dateTime, this.query.dateTime]
			};
			getReportWorkOrderList(params).then((res) => {
				let that = this
				if (res.code === 200) {
					this.setSessionStorage(this.query);
					this.dataList = res.data.result.map((item) => {
						let statusStr = that.getWorkOrderStatus(item.status)
						return {
							id: item.id,
							workOrderInfo: item,
							status: item.status,
							title: `${item.fkWorkorder} -- ${statusStr}`,
							note: `${item.productionName} ${item.productionCode}`,
							rightText: `${item.finishedNum ?? 0} 修改报工`
						};
					});
				}
			});
		},
		getWorkOrderStatus(status = 0){
			try{
				const list = ['', '未开始', '进行中', '已完成'];
				return list[status * 1]
			}catch(e){
				return ''
			}
		},
		WorkOrderStatusColor(status) {
			const list = ['', '未开始', '已开始', '已完成'];
			const colorList = ['#fff', '#8f939c', '#2979ff', '#18bc37'];
			return colorList[status * 1];
		},
		// 工单点击
		onListItemClick(item) {
			const params = item.workOrderInfo;
			uni.navigateTo({
				url: '/pages/produceManagement/reportWorkOrder/reportWorkOrder?' + tansParams(params)
			});
		},
		// 扫码报工
		scanToReport() {
			const params = this.query;
			uni.navigateTo({
				url: '/pages/produceManagement/scanWorkOrder/scanWorkOrder?' + tansParams(params)
			});
		}
	}
};
</script>

<style scoped>
.content {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.query-card {
	background-color: #fff;
	padding: 10px;
}
.row {
	background-color: #fff;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.card-box {
	width: 100%;
}
.scroll-view {
	height: 800rpx;
	padding-bottom: 40rpx;
}
.bg-blue {
	background-color: rgb(197.7, 225.9, 255) !important;
}
.bg-green {
	background-color: rgb(209.4, 236.7, 195.9) !important;
}
</style>