aiot-app/pages/salesServiceManagement/workOrder/components/accessoryList.vue

<template>
	<view class="scheme">
		<u-list class="listContent">
			<view v-for="(item, index) in tableList" :key="index" style="position: relative;">
				<myCard :item="item" @del="del(index)" @edit="add('edit',item,index)" :index="index+1"
					:columns="columns" :btnList="btnData">
					<u--input :disabled="isDisable" placeholder="请输入" type="number"
						@input="(val) =>inputChange(val,'totalCount',index)" slot="totalCount"
						v-model="item.totalCount">
					</u--input>
					<u--input :disabled="isDisable" placeholder="请输入" type="number"
						@input="(val) =>inputChange(val,'singlePrice',index)" slot="singlePrice"
						v-model="item.singlePrice">
					</u--input>

					<uni-data-picker style="width:100%" v-if="title == '配件回收清单'&&!isDisable"
						@change="handleLastChange(index)" :map="{text:'name',value:'id'}" v-model="item.warehouseId"
						slot="warehouseId" placeholder="请选择" :localdata="warehouseList">
					</uni-data-picker>
					<span v-else slot="warehouseId">
						{{item.warehouseName}}
					</span>
				</myCard>
			</view>
		</u-list>
		<view class="add" @click="add('add')" v-if="type != 'view'">
			<u-icon name="plus" color="#fff"></u-icon>
		</view>
	</view>
</template>

<script>
	import myCard from '@/pages/saleManage/components/myCard.vue';

	import {
		getWarehouseList,
	} from "@/api/pda/workOrder.js";
	export default {
		components: {
			myCard
		},
		props: {
			type: {
				type: String,
				default: 'edit'
			},
			itemList: {
				type: Array,
				default: () => []
			},
			title: {
				type: String,
				default: ''
			}
		},
		watch: {
			itemList: {
				handler(newVal) {
					let list = JSON.parse(JSON.stringify(newVal));
					this.tableList = list;
				},
				deep: true,
				immediate: true
			}
		},
		data() {
			return {
				columns: [
					[{
						label: '物品名称：',
						prop: 'categoryName',
						type: 'title',
						className: 'perce100',
					}],
					[{
						label: '物品编码：',
						prop: 'categoryCode'
					}],
					[{
						label: '型号：',
						prop: 'categoryModel'
					}, {
						label: '规格：',
						prop: 'specification',
					}],
					[{
						label: '级别：',
						prop: 'level',
					}],
					[{
						label: '数量：',
						prop: 'totalCount',
						slot: 'totalCount',
					}],
					[{
						label: '单价：',
						prop: 'singlePrice',
						slot: 'singlePrice',
					}],
					[{
						label: '总价：',
						prop: 'totalPrice'
					}],
					[{
						label: '计量单位：',
						prop: 'measureUnit'
					}],
					[{
						label: '仓库：',
						prop: 'warehouseName',
						slot: 'warehouseId'
					}],
					[{
						label: '操作：',
						prop: 'action',
						type: 'action',
						className: 'perce100',
					}],
				],
				btnList: [{
					name: '删除',
					apiName: 'del',
					btnType: 'primary',
					type: '2',
					pageUrl: '',
				}],
				tableList: [],
				warehouseList: []
			}
		},
		computed: {
			// 按钮
			btnData() {
				if (this.type == 'view') {
					return []
				}
				return this.btnList;
			},
			isDisable() {
				return this.type === 'view'
			}
		},
		created() {
			uni.$off('updateAddessory');
			uni.$on('updateAddessory', (data) => {
				let obj = {}
				this.tableList.map((el) => {
					obj[el.categoryCode] = true
				});
				data.map((el) => {
					if (!obj[el.categoryCode]) {
						this.tableList.push(el);
					}
				})
			})
			this.getWarehouseFn()
		},
		onShow() {

		},
		methods: {
			handleLastChange(index) {
				let data = this.warehouseList.find(item => item.id == this.tableList[index].warehouseId)
				this.$set(this.tableList[index], 'warehouseName', data?.name)
			},
			// 仓库
			getWarehouseFn() {
				getWarehouseList().then((res) => {
					this.warehouseList = res
				});
			},
			add() {
				let dataSources = this.title == '配件回收清单' ? '1' : '0';
				uni.navigateTo({
					url: `/pages/salesServiceManagement/workOrder/components/accessoryAdd?dataSources=${dataSources}`
				})
			},
			del(index) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除所选配件数据吗?',
					confirmText: '删除',
					confirmColor: '#FF4D4F',
					success: (res) => {
						if (res.confirm) {
							this.tableList.splice(index, 1)
						} else if (res.cancel) {
							// 用户点击了取消按钮
							console.log('用户取消删除');
						}
					}
				});
			},
			inputChange(e, field, index) {
				let value = '';
				if (field == 'singlePrice') {
					value = e.replace(/[^\d.]/g, '');
					const parts = value.split('.');
					if (parts.length > 2) {
						value = parts[0] + '.' + parts.slice(1).join('');
					}
					if (value.startsWith('0') && value.length > 1 && value[1] !== '.') {
						value = value.replace(/^0+/, '');
					}
				} else {
					value = e.replace(/[^\d]/g, '')
					if (value.startsWith('0') && value.length > 1) {
						value = value.replace(/^0+/, '');
					}
				}
				let obj = this.tableList[index];
				obj[field] = value;
				let num1 = obj.totalCount ? obj.totalCount - 0 : 0;
				let num2 = obj.singlePrice ? obj.singlePrice - 0 : 0;
				let total = (num1 * num2).toFixed(1);
				obj.totalPrice = total;
			},
			getTabData() {
				let is = true;
				if (this.title == '配件回收清单') {
					let warehouseIdS = this.tableList.filter((item) => item.warehouseId);
					if (warehouseIdS.length != this.tableList.length) {
						this.$refs.uToast.show({
							type: "warning",
							message: "请选择仓库",
						})
						return
					}
				}
				this.tableList.forEach((item) => {
					if (!item.totalCount) {
						is = false;
					}
				});
				if (!is) {
					this.$refs.uToast.show({
						type: "warning",
						message: "请填写数量",
					})
					return
				}
				return this.tableList || [];
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url('@/pages/salesServiceManagement/demandList/components/invoice.scss');

	.scheme {
		padding: 10rpx 20rpx 88rpx;
	}

	.add {
		width: 96rpx;
		height: 96rpx;
		border-radius: 48rpx;
		background: #3c9cff;
		position: fixed;
		bottom: 100rpx;
		right: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>