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)">
				<view class="slot-box" slot="productName">
					<u-row>
						<u-col span="10">
							<u--input placeholder="请输入" border="surround" disabled v-model="item.productName"></u--input>
						</u-col>
						<u-col span="2">
							<u-button type="primary" size="mini" @click="selectProduct(item, index)" text="选择"></u-button>
						</u-col>
					</u-row>
				</view>

				<view slot="purchaseCount">
					<view v-if="isDrawer">
						{{ item.purchaseCount + ' ' + (item.purchaseUnit || '') }}
					</view>
					<view v-else>
						<u-row>
							<u-col span="6">
								<u--input placeholder="请输入" type="number" border="surround" v-model="item.purchaseCount"></u--input @input="changeCount(item, index)">
							</u-col>
							<u-col span="6">
								<uni-data-picker v-model="item.purchaseUnit" placeholder="请选择" :localdata="item.packageDispositionList" @change="changeCount(item, index)"></uni-data-picker>
							</u-col>
						</u-row>
					</view>
				</view>

				<view slot="goodsLevel">
					<view v-if="isDrawer">
						{{ item.goodsLevel }}
					</view>
					<view v-else>
						<uni-data-picker v-model="item.goodsLevel" placeholder="请选择" :localdata="levelList"></uni-data-picker>
					</view>
				</view>

				<view slot="arrivalWay">
					<view v-if="isDrawer">{{ item.arrivalWay }}</view>
					<view v-else>
						<uni-data-picker v-model="item.arrivalWay" placeholder="请选择" :localdata="arrivalWayList"></uni-data-picker>
					</view>
				</view>

				<view slot="expectReceiveDate">
					<view v-if="isDrawer">{{ item.expectReceiveDate }}</view>
					<view v-else>
						<view v-if="item.arrivalWay == 1">
							<uni-datetime-picker type="date" v-model="item.expectReceiveDate"></uni-datetime-picker>
						</view>
						<view v-else>
							<span @click="settingDate(item, index)" style="color: #409eff;">设置分批时间</span>
						</view>
						
					</view>
				</view>

				<view slot="taskName">
					<view v-if="isDrawer">{{ item.taskName }}</view>
					<view v-else>
						<u-row>
							<u-col span="10">
								<u--input placeholder="" disabled border="surround" v-model="item.taskName"></u--input @input="changeCount(item, index)">
							</u-col>
							<u-col span="2">
								<u-button type="primary" size="mini" @click="selectTaskName(item, index)" text="选择"></u-button>
							</u-col>
						</u-row>
					</view>
				</view>

				<view slot="supplierName">
					<view v-if="isDrawer">{{ item.supplierName }}</view>
					<view v-else>
						<uni-data-picker v-model="item.supplierName" placeholder="请选择" :localdata="arrivalWayList"></uni-data-picker>
					</view>
				</view>

				<view slot="provenance">
					<view v-if="isDrawer">{{ item.provenance }}</view>
					<view v-else>
						<uni-data-picker v-model="item.provenance" placeholder="请选择" :localdata="purchase_origin"></uni-data-picker>
					</view>
				</view>

				<view slot="brand">
					<view v-if="isDrawer">{{ item.brand }}</view>
					<view v-else>
						<u--input placeholder="请输入" border="surround" disabled v-model="item.productName"></u--input>
					</view>
				</view>

				<view slot="modelKey">
					<view v-if="isDrawer">{{ item.modelKey }}</view>
					<view v-else>
						<!-- <u--input placeholder="请输入" border="surround" disabled v-model="item.modelKey"></u--input> -->
						<uni-data-select
							multiple
							:localdata="product_model_key"
							v-model="item.modelKey"
						></uni-data-select>
					</view>
				</view>

				<view slot="colorKey">
					<view v-if="isDrawer">{{ item.colorKey }}</view>
					<view v-else>
						<!-- <u--input placeholder="请输入" border="surround" disabled v-model="item.colorKey"></u--input> -->
						<uni-data-select
							multiple
							:localdata="product_color_key"
							v-model="item.colorKey"
						></uni-data-select>
					</view>
				</view>

				<view slot="remark">
					<view v-if="isDrawer">{{ item.colorKey }}</view>
					<view v-else>
						<u--input placeholder="请输入" border="surround" v-model="item.remark"></u--input>
					</view>
				</view>

				<fileMain slot="technicalDrawings" :type="isDrawer ? 'view' : ''" v-model="item.technicalDrawings"></fileMain>
				<fileMain slot="files" :type="isDrawer ? 'view' : ''" v-model="item.files"></fileMain>

				
				<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> -->
				
			</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>
		<timePopup ref="timePopupRef" @confirm="handleTimeConfirm"></timePopup>
	</view>
</template>
<!-- 名称，数量，单位，到货方式，到货日期 -->
<script>
	import {
		getByCode
	} from '@/api/pda/common.js'
	import myCard from './myCard.vue'
	import { mapActions, mapGetters } from 'vuex'
	import { levelList, lbjtList } from '@/enum/dict'
	import fileMain from "@/pages/doc/index.vue"
	import { changeCount } from '@/utils/setProduct.js';
	import timePopup from './timePopup.vue'
		
	export default {

		data() {
			return {
				tableList: [],
				addList: [
					{ name: '选择物品清单', },
					{ name: '新增临时产品', }
				],
				arrivalWayList: [
					{ text: '一次性到货', value: 1 },
					{ text: '分批到货', value: 2 }
				],
				show: false,
				purchaseUnitShow: false,
				current: {},
				currentIndex: -1,
				date_unit: [],
				product_color_key: [],
				product_model_key: [],
				purchase_origin: [],
				allPrice: '',
				btnList: [{
					name: '删除',
					apiName: 'del',
					btnType: 'error ',
					type: '2',
					pageUrl: '',

				}],
				defaultForm: {
					key: null,
					endTime: '',
					isFirst: 0,
					name: '',
					startTime: '',
					workHour: '',
					guaranteePeriodUnitCode: '',
					technicalDrawings: [],
					arrivalWay: 1
				},
				levelList
			}
		},
		props: {
			isDrawer: {
				default: false
			},
			pricingWay: {
				default: 1
			},
			isTemporary: {
				//临时
				type: Boolean,
				default: false
			},
			contractId: '',
		},
		components: {
			myCard,
			fileMain,
			timePopup
		},
		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',
						className: 'perce100',
						// 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',
						slot: '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',
						slot: 'taskName',
						className: 'perce100',
					}], 
					[{
						label: '批次号：',
						prop: 'batchNo',
					}],
					[{
						label: '供应商：',
						prop: 'supplierName',
						slot: 'supplierName'
					}, {
						label: '产地：',
						prop: 'provenance',
						slot: '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',
						slot: 'brand'
					}],
					[{
						label: '机型：',
						prop: 'modelKey',
						slot: 'modelKey'
					}, {
						label: '颜色：',
						prop: 'colorKey',
						slot: 'colorKey'
					}],
					[{
						label: '到货方式：',
						prop: 'arrivalWay',
						slot: '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.getByCode()
			// this.requestDict('产地')
			uni.$off('setProduceList')
			uni.$on('setProduceList', (data) => {
				console.log('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.map(i => {
						return {
							...i,
							text: i.conversionUnit,
							value: i.id
						}
					})

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

					}

				})
				console.log(this.currentIndex, this.current)
				if(this.currentIndex > -1) {
						console.log(111)
						// 使用this.$set更新数组项
						if (data && data.length > 0) {
							this.$set(this.tableList, this.currentIndex, data[0]);
						}
						this.currentIndex = -1;
						this.current = {};
				} else {
					console.log(222)
					this.tableList.push(...data)
				}
				
			})

			uni.$off('setTaskName')
			uni.$on('setTaskName', (data) => {
				console.log('setTaskName~~', data)
				
				console.log(this.currentIndex, this.current)
				if(this.currentIndex > -1) {
						console.log(111)
						// 使用this.$set更新数组项
						if (data && data.length > 0) {
							this.$set(this.tableList[this.currentIndex], 'taskId', data[0].id);
							this.$set(this.tableList[this.currentIndex], 'taskName', data[0].name);
							this.$set(
								this.tableList[this.currentIndex],
								'routingId',
								data[0].produceRoutingId
							);
						}
						
						this.currentIndex = -1;
						this.current = {};
				}
			})
		},
		watch: {
			contractId(val) {
				if (val) {
					this.btnList = []
				}

			}
		},
		methods: {
			...mapActions('dict', ['requestDict']),
			settingDate(item, index) {
				console.log(item, index)
				this.current = item;
				this.currentIndex = index;
				this.$refs.timePopupRef.open(item, index)
			},
			handleTimeConfirm(data) {
				this.$set(this.tableList[this.currentIndex], 'arrivalBatch', data)
			},
			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()
				}
			},
			selectProduct(item, index) {
				this.current = item;
				this.currentIndex = index;
				uni.navigateTo({
					url: '/pages/saleManage/components/selectProduce?isAll=' + 2
				})
			},
			selectTaskName(item, index) {
				console.log(item, index)
				this.current = item;
				this.currentIndex = index;
				uni.navigateTo({
					url: '/pages/purchasingManage/components/selectTaskName?isAll=' + 2
				})
			},
			// 添加
			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 = ['product_model_key', 'product_color_key', 'purchase_origin']
				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]
						}
					})
					console.log(code, this[code])
				})
				console.log('1111~~~~~~~~~', this.purchase_origin)
			},
			save() {
				uni.$emit('setBusinessOpportunity')
			},
			//改变数量
			changeCount(row, index) {
				// this.singleWeightChange(row, index);
				// this.getTotalPrice();
				this.$set(
					this.tableList,
					index,
					changeCount(row, {
						countKey: 'purchaseCount',
						unitKey: 'purchaseUnit',
						unitIdKey: 'purchaseUnitId'
					})
				);
				this.$forceUpdate();
			},
			//计算总金额
			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;
	}

	.slot-box {
		display: flex;
	}

	.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>