hht-ximenzi-uni/pages/manage/mater-update.vue

<template>
	<view class="zd_container">
		<nav-bar :title="title"></nav-bar>
		<view class="zd_content">
			<view class="zd_wrapper">
				<view class="zd-row border-bottom">
					<view class="zd-col-7">
						<span class="filter_label">托盘</span>
					</view>
					<view class="zd-col-17">
						<search-box
						v-model="val1"
						@handleChange="handleChange"
						/>
					</view>
				</view>
			</view>
			<view class="table_container bg_blue">
				<view class="font-1">托盘编码：<text>{{initData.vehicle_code}}</text></view>
				<view class="th_content">
					<table class="table">
						<tr>
							<th width="28%" class="th_c">800号</th>
							<th width="28%">物料编码</th>
							<th width="25%">数量</th>
							<th width="19%">
								<view class="flex-center" @tap="toggleSelectAll">
									<uni-icons class="icon-check" type="checkmarkempty" size="20" :color="isAllSelected ? '#010319' : 'transparent'"></uni-icons>
								</view>
							</th>
						</tr>
					</table>
				</view>
				<view class="table_content">
					<table class="table">
						<tr v-for="(e, i) in dataList" :key="i">
							<td width="28%" class="td_c">{{e.order_code}}</td>
							<td width="28%">{{e.material_code}}</td>
							<td width="25%"><input type="number" class="td_input" v-model="e.material_qty"></td>
							<td width="19%">
								<view class="flex-center" @tap="toggleSelect(i)">
									<uni-icons class="icon-check" type="checkmarkempty" size="20" :color="e.selected ? '#3a3a3a' : 'transparent'"></uni-icons>
								</view>
							</td>
						</tr>
					</table>
				</view>
			</view>
		</view>
		<view class="zd-row submit-bar">
			<button class="zd-col-8 button-default" @tap="clearUp">清空</button>
			<button class="zd-col-15 button-primary" :class="{'button-info': !selectedItems.length}" :disabled="disabled" @tap="toConfirm">删除</button>
		</view>
	</view>
</template>

<script>
	import NavBar from '@/components/NavBar.vue'
	import SearchBox from '@/components/SearchBox.vue'
	import {getGroupByVehicleCode, materialUpdate} from '@/utils/getData2.js'
	export default {
		components: {
			NavBar,
			SearchBox
		},
		data() {
			return {
				title: '',
				val1: '',
				initData: {},
				dataList: [],
				disabled: false
			};
		},
		computed: {
			isAllSelected() {
				if (this.dataList.length === 0) return false
				return this.dataList.every(item => item.selected)
			},
			selectedItems() {
				return this.dataList.filter(item => item.selected)
			}
		},
		onLoad (options) {
			this.title = options.title
		},
		methods: {
			handleChange (e) {
				if (e) {
					this._getGroupByVehicleCode(e)
				}
			},
			async _getGroupByVehicleCode (e) {
				try {
					let res = await getGroupByVehicleCode(e)
					this.initData = res
					this.dataList = res.materials.map(item => ({
						...item,
						selected: false
					}))
				} catch (e) {
					this.initData = {}
					this.dataList = []
				}
			},
			toggleSelect(index) {
				this.$set(this.dataList, index, {
					...this.dataList[index],
					selected: !this.dataList[index].selected
				})
			},
			toggleSelectAll() {
				const allSelected = this.isAllSelected
				this.dataList = this.dataList.map(item => ({
					...item,
					selected: !allSelected
				}))
			},
			toConfirm () {
				this.disabled = true
				if (!this.selectedItems.length) {
					this.disabled = false
					return
				}
				let content = "确定删除\n"
				this.selectedItems.forEach((item, index) => {
					content += `800号="${item.order_code}"，物料编码="${item.material_code}"`
					if (index < this.selectedItems.length - 1) {
						content += "\n"
					}
				})
				content += "\n的零件吗？"
				uni.showModal({
					title: '提示',
					cancelText: '取消',
					confirmText: '确定',
					content: content,
					success: (res) => {
						if (res.confirm) {
							this._materialUpdate()
						} else if (res.cancel) {
							this.disabled = false
						}
					}
				})
			},
			async _materialUpdate () {
				try {
					let res = await materialUpdate(this.initData.vehicle_code, this.selectedItems)
					this._getGroupByVehicleCode(this.val1)
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					this.disabled = false
				} catch (e) {
					console.log(e)
					this.disabled = false
				}
			}
		}
	}
</script>

<style lang="stylus" scoped>
.table_container
	width 100%
	border-radius 24rpx
	padding 22rpx 11rpx
	margin-bottom 20rpx
	box-shadow inset 0px 0px 3px 1px rgba(255, 255, 255, 50%)
.bg_blue
	background-color #98c1ff
.font-1
	_font(32rpx, 36rpx, #000620,,)
	padding 0 22rpx
	margin-bottom 20rpx
	text
		_font(36rpx, 36rpx, #000620,700,)
.th_content
	width calc(100% - 22rpx)
	margin 0 auto
.table_content
	width calc(100% - 22rpx)
	margin 0 auto
	background-color #fff
	border-radius 24rpx
.table
	width 100%
	color #fff
	border-spacing 0
	padding 0 11rpx
	th
		_font(32rpx, 32rpx, #010319,700,center)
		padding 20rpx 10rpx
		.icon-check
			border-color #010319
		&.th_c
			color #165ad1
	td
		_font(32rpx, 32rpx, #3a3a3a,,center)
		padding 20rpx 10rpx
		white-space pre-wrap
		word-break break-all
		border-bottom 1px dashed #343434
		&.td_c
			color #0083ff
		.td_input
			width: 100%;
			font-size: 28rpx;
			color: #305fbf;
			text-align: center;
			line-height: 58rpx;
			height: 58rpx;
			padding: 0 10rpx;
			border: 1px solid #889dc7;
			box-shadow: 0 0 0 2px rgba(136, 157, 199,.2);
			border-radius: 10rpx;
			margin: 0 auto;
	tr
		&:last-child
			td
				border-bottom 0
.icon-check
	width 28px
	height 28px
	line-height: 26px
	border 1px solid #3a3a3a
.change-wrap
	width 60px
	margin 0 auto
	border 1px solid #3a3a3a
	margin-bottom 20rpx
</style>