shgx_tz_WMS_PDA/pages/materialManagement/MaterialProductionInput/MaterialProductionInput.vue

<!-- 仓库配料 -->
<template>
	<view>
		<u-line></u-line>
		<view class="area">
			<u--form labelPosition="left" labelWidth="240" :labelStyle="labelstyle">
				<u-form-item label="输入站点" borderBottom>
					<u--input
						v-model="select_position"
						border="surround"
						placeholder="后置图标"
						suffixIcon="map-fill"
						suffixIconStyle="{color: #00aaff;font-size: 30px;}"
					></u--input>
				</u-form-item>
			</u--form>

			<u-scroll-list>
				<view v-for="(item, index) in start_point_positions" :key="index">
					<view style="margin-right: 10px">
						<u-button type="primary" icon="map" :text="item" v-if="index % 3 == 0" @click="check_position(item)"></u-button>
						<u-button type="success" icon="map" :text="item" v-if="index % 3 == 1" @click="check_position(item)"></u-button>
						<u-button
							color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"
							icon="map"
							:text="item"
							v-if="index % 3 == 2"
							@click="check_position(item)"
						></u-button>
					</view>
				</view>
			</u-scroll-list>
		</view>
		<u-line></u-line>
		<view class="area">
			<view style="margin-top: 5px; margin-bottom: 20px; font-size: 1.2rem">选择日期： {{ workerorder_time | formatDate }}</view>
			<u-button @click="timeshow = true">选择日期</u-button>
			<u-datetime-picker :show="timeshow" v-model="workerorder_time" mode="date" @confirm="confirm()" @cancel="timeshow = false"></u-datetime-picker>
		</view>
		<u-line></u-line>
		<u-row gutter="30">
			<u-col span="4">
				<view>工单号</view>
			</u-col>
			<u-col span="3">
				<span>计划上件数</span>
			</u-col>
			<u-col span="3">
				<span>已经上件数</span>
			</u-col>
			<u-col span="2">
				<span>选中</span>
			</u-col>
		</u-row>
		<view class="area scrollable-container">
			<u-list>
				<u-list-item v-for="(item, index) in workerorder_list" :key="index">
					<u-row gutter="30">
						<u-col span="4">
							<u-tag :text="item.clientWorkorder" plain></u-tag>
						</u-col>
						<u-col span="3">
							<u-tag :text="item.previousNumber" plain></u-tag>
						</u-col>
						<u-col span="3">
							<u-tag type="success" :text="item.previousNumbered" plain></u-tag>
						</u-col>
						<u-col span="2">
							<u-switch v-model="item.selected" @change="change_selected(index)" size="38"></u-switch>
						</u-col>
					</u-row>
					<u-line></u-line>
				</u-list-item>
			</u-list>
		</view>
	</view>
</template>

<script>
import { achievestartpoints, getworkorderlist } from '@/api/materialManagement/MaterialProductionInput.js';

export default {
	data() {
		return {
			start_point_positions: [],
			select_position: '', //选中的 站点
			timeshow: false,
			workerorder_time: Number(new Date()),
			labelstyle: { 'font-size': '1.2rem' },
			workerorder_list: []
		};
	},
	filters: {
		formatDate: function (value) {
			// 创建一个 Date 对象，并使用时间戳初始化
			const date = new Date(value);

			// 提取年、月、日信息
			const year = date.getFullYear();
			const month = date.getMonth() + 1; // 月份从 0 开始，所以要加 1
			const day = date.getDate();

			return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
		}
	},
	watch: {
		workerorder_time(newvalue, oldvalue) {
			this.get_workorder_list();
		}
	},
	mounted() {
		this.get_startpoints();
	},
	methods: {
		// todo 获取上料起点

		get_startpoints() {
			achievestartpoints().then((res) => {
				if (res.code == 200) {
					this.start_point_positions = res.data;
				}
			});
		},
		check_position(item) {
			this.select_position = item;
		},

		//todo  选择时间
		confirm() {
			this.timeshow = false;
		},
		//todo  根据日期获取工单
		get_workorder_list() {
			let date = new Date(this.workerorder_time);
			const query = {
				datetimespan: date
			};
			getworkorderlist(query).then((res) => {
				if (res.code == 200) {
					this.workerorder_list = res.data;
					this.workerorder_list.forEach((item) => {
						item['selected'] = false;
						item['previousNumbered'] = 0;
					});
				}
			});
		},
		//todo  选中事件
		change_selected(index) {
			console.log(index);
			//this.workerorder_list[index].selected = true;
			this.$set(this.workerorder_list[index], 'selected', true);
			console.log(this.workerorder_list[index])
		}
	}
};
</script>

<style scoped>
.area {
	background-color: white;
}
.scrollable-container {
	height: 300px;
	overflow: auto;
	border: 3px solid #ccc;
}
</style>