aiot-app/pages/purchasingManage/components/produceList.vue

<template>
	<view class="mainBox">
		<view v-for="(item, index) in tableList" :key="index" style="position: relative;">
			<myCard :item="item" :btnList="btnList" :index="index+1" :columns="columns" @del="del(index)">
				<u--input slot="purchaseCount" @input="changeCount(item,index)" type="number" placeholder="请输入"
					border="surround" :disabled="!!contractId" v-model="item.purchaseCount">
				</u--input>
				<u--input :disabled="!!contractId" slot="singleWeight" @input="singleWeightChange(item,index)"
					type="number" placeholder="请输入" border="surround" v-model="item.singleWeight"></u--input>
				<u--input :disabled="!!contractId" slot="singlePrice" style="flex:none;width: 50%;"
					@input="getTotalPrice()" type="number" placeholder="请输入" border="surround"
					v-model="item.singlePrice">
					<template slot="suffix">元</template>
				</u--input>
				<uni-datetime-picker :disabled="!!contractId" type="date" slot="customerExpectDeliveryDeadline"
					v-model="item.customerExpectDeliveryDeadline">
				</uni-datetime-picker>
				<u--input :disabled="!!contractId" slot="guaranteePeriod" placeholder="请输入" border="surround"
					v-model="item.guaranteePeriod"></u--input>
				<uni-data-picker :readonly="!!contractId" slot="guaranteePeriodUnitCode"
					v-model="item.guaranteePeriodUnitCode" placeholder="请选择" :localdata="date_unit">
				</uni-data-picker>
				<u--input slot="customerMark" placeholder="请输入" border="surround" v-model="item.customerMark">

				</u--input>
				<u--input slot="productBrand" placeholder="请输入" border="surround" :disabled="item.productCode"
					v-model="item.productBrand">
				</u--input>
				<u--input slot="specification" placeholder="请输入" border="surround" :disabled="item.productCode"
					v-model="item.specification">

				</u--input>
				<u--input slot="goodsLevel" placeholder="请输入" border="surround" :disabled="item.productCode"
					v-model="item.goodsLevel">
				</u--input>
				<u--input slot="modelType" placeholder="请输入" border="surround" :disabled="item.productCode"
					v-model="item.modelType">
				</u--input>

				<u--input slot="productName" placeholder="请输入" border="surround" :disabled="item.productCode"
					v-model="item.productName">
				</u--input>

				<fileMain slot="files" type="view" v-model="item.files"></fileMain>
			</myCard>
		</view>

		<view style="height: 84rpx;" v-if="isDrawer"></view>
		<view class="footerButton" v-if="isDrawer">
			<u-button type="primary" @click="save" text="保存"></u-button>
		</view>
		<view class="add" @click="add" v-if="isDrawer">
			<u-icon name="plus" color="#fff"></u-icon>
		</view>
		<u-action-sheet :actions="addList" :show="show" :closeOnClickOverlay="true" :closeOnClickAction="true"
			@close="show=false" @select='select'> </u-action-sheet>
	</view>
</template>

<script>
	import {
		getByCode
	} from '@/api/pda/common.js'
	import myCard from './myCard.vue'
	import { mapActions, mapGetters } from 'vuex'
	import dictEnum from '@/enum/dict'
	import { levelList, lbjtList } from '@/enum/dict'
	import fileMain from "@/pages/doc/index.vue"
		
	export default {

		data() {
			return {
				tableList: [],
				addList: [{
						name: '选择物品清单',

					},
					{
						name: '新增临时产品',
					}
				],
				show: false,
				current: {},
				date_unit: [],
				allPrice: '',
				btnList: [{
					name: '删除',
					apiName: 'del',
					btnType: 'error ',
					type: '2',
					pageUrl: '',

				}],
				defaultForm: {
					key: null,
					endTime: '',
					isFirst: 0,
					name: '',
					startTime: '',
					workHour: '',
					guaranteePeriodUnitCode: '',
					technicalDrawings: [],
					arrivalWay: 1
				}

			}
		},
		props: {
			isDrawer: {
				default: false
			},
			pricingWay: {
				default: 1
			},
			isTemporary: {
				//临时
				type: Boolean,
				default: false
			},
			contractId: '',
			// columns: {
			// 	type: Array,
			// 	default: () => [
			// 		[{
			// 			label: '名称：',
			// 			prop: 'productName',
			// 			slot: 'productName',
			// 			type: 'title',
			// 			className: 'perce100',
			// 		}],
			// 		[{
			// 			label: '编码：',
			// 			prop: 'productCode'
			// 		}, {
			// 			label: '分类：',
			// 			prop: 'productCategoryName',
			// 		}],
			// 		[{
			// 			label: '数量：',
			// 			prop: 'purchaseCount',
			// 			// slot: 'purchaseCount',
			// 			formatter: (item) => {
			// 				if (item.purchaseCount) {
			// 					return item.purchaseCount + ' ' + (item.purchaseUnit || '');
			// 				}
			// 			}
			// 		}, 
			// 		{
			// 			label: '计量数量：',
			// 			prop: 'totalCount',
			// 			formatter: (item) => {
			// 				if (item.totalCount) {
			// 					return item.totalCount + ' ' + (item.measuringUnit || '');
			// 				}
			// 			}
			// 		}],
			// 		[{
			// 			label: '包装规格：',
			// 			prop: 'packingSpecification',
			// 		}, {
			// 			label: '物品级别：',
			// 			prop: 'goodsLevel',
			// 			formatter: (item) => {
			// 			return levelList.find((i) => i.value == item.goodsLevel)
			// 				?.label;
			// 			},
			// 		}],
			// 		[{
			// 			label: '库存数量：',
			// 			prop: 'availableCountBase',
			// 		}],
			// 		[{
			// 			label: '已采数量：',
			// 			prop: 'doneTotalCount',
			// 			formatter: (item) => {
			// 				if (item.doneTotalCount) {
			// 					return item.doneTotalCount + ' ' + (item.measuringUnit || '');
			// 				}
			// 			}
			// 		}, {
			// 			label: '待采数量：',
			// 			prop: 'waitTotalCount',
			// 			formatter: (item) => {
			// 				if (item.waitTotalCount) {
			// 					return item.waitTotalCount + ' ' + (item.measuringUnit || '');
			// 				}
			// 			}
			// 		}],
			// 		[{
			// 			label: '工序：',
			// 			prop: 'taskName',
			// 		}, {
			// 			label: '批次号：',
			// 			prop: 'batchNo',
			// 		}],
			// 		[{
			// 			label: '供应商：',
			// 			prop: 'supplierName',
			// 		}, {
			// 			label: '产地：',
			// 			prop: 'provenance',
			// 			formatter: (item) => {
			// 				// return item.provenance
			// 				return item.provenance && item.provenance.length
			// 					? item.provenance
			// 						.map((item) => this.getDictValue('产地', item))
			// 						.join(',')
			// 					: '';
			// 			}
			// 		}],
			// 		[{
			// 			label: '型号：',
			// 			prop: 'modelType',
			// 			className: 'perce100',
			// 		}],
			// 		[{
			// 			label: '规格：',
			// 			prop: 'specification',
			// 		}, {
			// 			label: '品牌：',
			// 			prop: 'brand',
			// 		}],
			// 		[{
			// 			label: '机型：',
			// 			prop: 'modelKey',
			// 		}, {
			// 			label: '颜色：',
			// 			prop: 'colorKey',
			// 		}],
			// 		[{
			// 			label: '到货方式：',
			// 			prop: 'arrivalWay',
			// 			formatter: (item) => {
			// 				return item.arrivalWay == 1 ? '一次性到货' : '分批到货';
			// 			},
			// 		}],
			// 		[{
			// 			label: '到货日期：',
			// 			prop: 'expectReceiveDate',
			// 			slot: 'expectReceiveDate',
			// 		}, {
			// 			label: '属性类型：',
			// 			prop: 'produceType',
			// 			formatter: (item) => {
			// 				if (item.produceType) {
			// 					return item.produceType
			// 					.map((i) => {
			// 						return lbjtList[i];
			// 					})
			// 					.toString();
			// 				}
			// 			}
			// 		}],
			// 		[{
			// 			label: '图纸附件：',
			// 			prop: 'technicalDrawings',
			// 			slot: 'technicalDrawings',
			// 		}, {
			// 			label: '附件：',
			// 			prop: 'files',
			// 			slot: 'files',
			// 		}],
			// 		[{
			// 			label: '备注：',
			// 			prop: 'remark',
			// 			className: 'perce100',
			// 		}],
			// 		[{
			// 			label: '操作：',
			// 			prop: 'action',
			// 			type: 'action',
			// 			className: 'perce100',
			// 		}],

			// 	]
			// }
		},
		components: {
			myCard
		},
		computed: {
			...mapGetters(['dict', 'getDict', 'getDictValue']),
			columns() {
				return [
					[{
						label: '名称：',
						prop: 'productName',
						// slot: 'productName',
						type: 'title',
						className: 'perce100',
					}],
					[{
						label: '编码：',
						prop: 'productCode'
					}, {
						label: '分类：',
						prop: 'productCategoryName',
					}],
					[{
						label: '数量：',
						prop: 'purchaseCount',
						// slot: 'purchaseCount',
						formatter: (item) => {
							if (item.purchaseCount) {
								return item.purchaseCount + ' ' + (item.purchaseUnit || '');
							}
						}
					}, 
					{
						label: '计量数量：',
						prop: 'totalCount',
						formatter: (item) => {
							if (item.totalCount) {
								return item.totalCount + ' ' + (item.measuringUnit || '');
							}
						}
					}],
					[{
						label: '包装规格：',
						prop: 'packingSpecification',
					}, {
						label: '物品级别：',
						prop: 'goodsLevel',
						formatter: (item) => {
						return levelList.find((i) => i.value == item.goodsLevel)
							?.label;
						},
					}],
					[{
						label: '库存数量：',
						prop: 'availableCountBase',
					}],
					[{
						label: '已采数量：',
						prop: 'doneTotalCount',
						formatter: (item) => {
							if (item.doneTotalCount) {
								return item.doneTotalCount + ' ' + (item.measuringUnit || '');
							}
						}
					}, {
						label: '待采数量：',
						prop: 'waitTotalCount',
						formatter: (item) => {
							if (item.waitTotalCount) {
								return item.waitTotalCount + ' ' + (item.measuringUnit || '');
							}
						}
					}],
					[{
						label: '工序：',
						prop: 'taskName',
					}, {
						label: '批次号：',
						prop: 'batchNo',
					}],
					[{
						label: '供应商：',
						prop: 'supplierName',
					}, {
						label: '产地：',
						prop: 'provenance',
						formatter: (item) => {
							// return item.provenance
							return item.provenance && item.provenance.length
								? item.provenance
									.map((item) => this.getDictValue('产地', item))
									.join(',')
								: '';
						}
					}],
					[{
						label: '型号：',
						prop: 'modelType',
						className: 'perce100',
					}],
					[{
						label: '规格：',
						prop: 'specification',
					}, {
						label: '品牌：',
						prop: 'brand',
					}],
					[{
						label: '机型：',
						prop: 'modelKey',
					}, {
						label: '颜色：',
						prop: 'colorKey',
					}],
					[{
						label: '到货方式：',
						prop: 'arrivalWay',
						formatter: (item) => {
							return item.arrivalWay == 1 ? '一次性到货' : '分批到货';
						},
					}],
					[{
						label: '到货日期：',
						prop: 'expectReceiveDate',
						slot: 'expectReceiveDate',
					}, {
						label: '属性类型：',
						prop: 'produceType',
						formatter: (item) => {
							if (item.produceType) {
								return item.produceType
								.map((i) => {
									return lbjtList[i];
								})
								.toString();
							}
						}
					}],
					[{
						label: '图纸附件：',
						prop: 'technicalDrawings',
						slot: 'technicalDrawings',
					}, {
						label: '附件：',
						prop: 'files',
						slot: 'files',
					}],
					[{
						label: '备注：',
						prop: 'remark',
						className: 'perce100',
					}],
					[{
						label: '操作：',
						prop: 'action',
						type: 'action',
						className: 'perce100',
					}],

				]
			}
		},
		created() {
			// this.requestDict('产地')
			uni.$off('setProduceList')
			uni.$on('setProduceList', (data) => {
				data.forEach(item => {
					item['productId'] = item.id
					item['categoryName'] = item.name
					item['productCategoryId'] = item.categoryLevelId
					item['productBrand'] = item.brandNum
					item['productCategoryName'] = item.categoryLevelPath
					item['productCode'] = item.code
					item['productName'] = item.name
					item['approvalNumber'] = item.extField.approvalNumber
					item['packingSpecification'] = item.extField.packingSpecification
					item['packageDispositionList'] = item.packageDispositionList

					if (item.packageDispositionList?.length) {
						item['saleUnitId'] = item.packageDispositionList[0].id
						item['saleUnit'] = item.packageDispositionList[0].conversionUnit

					}
				})
				this.tableList.push(...data)
			})

			this.getByCode()
		},

		watch: {
			contractId(val) {
				if (val) {
					this.btnList = []
				}

			}
		},
		methods: {
			...mapActions('dict', ['requestDict']),
			add() {
				if (this.isTemporary) {
					this.show = true
				} else {
					uni.navigateTo({
						url: '/pages/saleManage/components/selectProduce?isAll=' + 1
					})
				}


			},
			select({
				name
			}) {
				if (name == '选择物品清单') {
					uni.navigateTo({
						url: '/pages/saleManage/components/selectProduce?isAll=' + 1
					})
				} else {
					this.handlAdd()
				}



			},
			// 添加
			handlAdd() {
				let item = JSON.parse(JSON.stringify(this.defaultForm));
				item.key = this.tableList.length + 1;
				this.tableList.push(item);
			},
			init(list) {
				if (list) {
					this.tableList = JSON.parse(JSON.stringify(list))
					this.getTotalPrice(list)

				}
			},
			getValue() {
				return this.tableList
			},

			del(index) {

				this.tableList.splice(index, 1);

			},
			getByCode() {
				const codeS = ['date_unit']
				codeS.forEach(async (code) => {
					const codeValue = await getByCode(code);
					this[code] = codeValue.map(item => {
						const key = Object.keys(item)[0]
						return {
							value: key,
							text: item[key]
						}
					})
				})

			},
			save() {
				uni.$emit('setBusinessOpportunity')
			},
			//改变数量
			changeCount(row, index) {
				this.singleWeightChange(row, index);
				this.getTotalPrice();
			},
			//计算总金额
			getTotalPrice(row) {
				if (this.tableList.length) {
					let sum = 0;
					sum = this.getNumTotalPrice();
					let allsum = sum.toFixed(2);
					this.allPrice = allsum;
					if (!row) {
						uni.$emit('allsum', allsum)
					}
					return allsum;
				} else {
					this.allPrice = 0.0;
					if (!row) {
						uni.$emit('allsum', allsum)
					}
					return 0.0;
				}
				//回显总金额
			},
			//计算总金额
			getNumTotalPrice(sum = 0) {
				this.tableList.forEach((r, index) => {
					this.$set(
						r,
						'discountSinglePrice',
						r.singlePrice ? Number(r.singlePrice) : ''
					);
					if (r.singlePrice && r.totalCount) {
						r.totalPrice = this.getAllPrice(r);
						r.discountTotalPrice = this.getDiscountTotalPrice(r);
						this.$set(this.tableList[index], 'totalPrice', Number(r.totalPrice));
						this.$set(
							this.tableList[index],
							'discountTotalPrice',
							Number(r.discountTotalPrice)
						);
						sum += Number(r.totalPrice);
					} else {
						this.$set(r, 'totalPrice', '');
						this.$set(r, 'discountTotalPrice', '');
					}
				});
				return isNaN(sum) ? 0 : sum;
			},
			//计算单重
			singleWeightChange(row, index) {


				if (row.weightUnit == row.measuringUnit) {
					this.$set(this.tableList[index], 'totalWeight', row.totalCount);
				} else if (row.totalCount && row.singleWeight) {
					this.$set(this.tableList[index], 'totalWeight', (row.singleWeight * row.totalCount).toFixed(2) || 0);
				} else {
					this.$set(this.tableList[index], 'totalWeight', 0);
				}


			},
			//获取合计
			getAllPrice(row) {
				let num = Number(row.singlePrice) * Number(row.totalCount);



				return isNaN(num) ? '' : num.toFixed(2);

			},
			//设置优惠后总金额修改产品单价
			discountInputByOrder(val) {

				//获取优惠金额和总计的差价
				this.tableList.forEach((item) => {
					if (val === 0) {
						item.discountTotalPrice = 0;
						item.discountSinglePrice = 0;
						return;
					}
					if (!val) {
						item.discountTotalPrice = item.totalPrice;
						item.discountSinglePrice = item.singlePrice;
						return;
					}
					//获取折让单价
					item.discountSinglePrice = this.getDiscountSinglePrice(item, val);
					item.discountTotalPrice = this.getDiscountTotalPrice(item, val);
				});
				this.$forceUpdate()

			},
			//获取折让单价
			getDiscountSinglePrice(row, val) {
				let num =
					(Number(val) / Number(this.allPrice)) *
					Number(row.singlePrice);
				return isNaN(num) ? '' : num;
			},
			//获取折让合计
			getDiscountTotalPrice(row, val) {
				let num = Number(row.discountSinglePrice) * Number(row.totalCount);


				return isNaN(num) ? '' : num.toFixed(2);
			},
			//设置客户代号
			setCustomerMark(val) {
				this.tableList.forEach((item, index) => {
					this.$set(this.tableList[index], 'customerMark', val)
				})
			},


		}
	}
</script>

<style lang="scss" scoped>
	.add {
		width: 96rpx;
		height: 96rpx;
		border-radius: 48rpx;
		background: #3c9cff;
		position: fixed;
		bottom: 100rpx;
		right: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 99;
	}

	.footerButton {
		width: 100%;
		height: 84rpx;
		display: flex;
		position: fixed;
		bottom: 0;
		z-index: 10;

		/deep/.u-button {
			height: 100%;
		}

		>view {
			flex: 1;

		}
	}


	/deep/.u-swipe-action-item__right__button__wrapper {
		background-color: #f56c6c !important;
	}
</style>