maxcess-synergy-admin/src/views/mssPurchaseOrder/selectedData.vue

<template>
	<el-dialog :model-value="props.showes" @close="closeFun" width="80%">
		<div style="display: flex; align-items: center; margin-bottom: 16px">
			<div>{{ t('message.index.invoiceNumber') }}：</div>
			<el-input style="width: 300px" v-model="state.f_VHUB_Text" :placeholder="t('message.index.invoiceNumber')" size="default" />
		</div>
		<avue-crud ref="crudRef" :data="state.data" :option="state.option">
			<template #fSupplierLot="{ row }">
				<div style="display: flex; align-items: center; justify-content: center">
					<el-input v-model="row.fSupplierLot" :placeholder="t('message.index.supplierLot')" size="small" />
				</div>
			</template>
			<template #notSendQtyText="{ row }">
				<div>{{ row.notSendQty }}</div>
			</template>
			<template #notSendQty="{ row }">
				<div style="display: flex; align-items: center; justify-content: center">
					<el-input-number v-model="row.notSendQty" size="small" />
				</div>
			</template>
			<!--			<template #chengNuoJiaoQi="{ row }">-->
			<!--				<div style="display: flex; align-items: center; justify-content: center">-->
			<!--					<el-date-picker-->
			<!--						v-model="row.chengNuoJiaoQi"-->
			<!--						type="date"-->
			<!--						size="small"-->
			<!--						style="width: 100%"-->
			<!--						format="YYYY/MM/DD"-->
			<!--						@change="batchSetChengNuoJiaoQiFun([{ id: row.id, newTime: row.chengNuoJiaoQi }])"-->
			<!--					/>-->
			<!--				</div>-->
			<!--			</template>-->
			<!--			<template #newChengNuoJiaoQi="{ row }">-->
			<!--				<div style="display: flex; align-items: center; justify-content: center">-->
			<!--					<el-date-picker-->
			<!--						v-model="row.newChengNuoJiaoQi"-->
			<!--						type="date"-->
			<!--						size="small"-->
			<!--						style="width: 100%"-->
			<!--						format="YYYY/MM/DD"-->
			<!--						@change="batchSetNewChengNuoJiaoQiFun([{ id: row.id, newTime: row.newChengNuoJiaoQi }])"-->
			<!--					/>-->
			<!--				</div>-->
			<!--			</template>-->
			<!--			<template #menu-left>-->
			<!--				<div class="selectBoxes">-->
			<!--					<el-date-picker-->
			<!--						v-model="state.chengNuoJiaoQiP"-->
			<!--						type="date"-->
			<!--						placeholder="批量修改选中承诺日期"-->
			<!--						style="width: 190px"-->
			<!--						@change="chengNuoJiaoQiPFun('0')"-->
			<!--					/>-->
			<!--					<el-date-picker-->
			<!--						v-model="state.newChengNuoJiaoQiP"-->
			<!--						type="date"-->
			<!--						placeholder="批量修改选中承诺最新交期"-->
			<!--						style="width: 190px; margin-left: 12px"-->
			<!--						@change="chengNuoJiaoQiPFun('1')"-->
			<!--					/>-->
			<!--					<el-input v-model="state.fSupplierLot" style="width: 190px; margin-left: 12px" placeholder="批号" @input="fSupplierLotFun" />-->
			<!--				</div>-->
			<!--			</template>-->
		</avue-crud>
		<div class="btnList">
			<el-button type="primary" :loading="state.loading" @click="batchAddInvoiceOrderFun">{{ t('message.index.confirm') }}</el-button>
		</div>
	</el-dialog>
</template>
<script setup lang="ts">
import { defineProps, reactive, defineEmits, watch, computed } from 'vue';
import { listApi } from '../../api/list/index';

const emits = defineEmits(['generateDocuments', 'close']);
import { useI18n } from 'vue-i18n';
import { ElMessage } from 'element-plus';

const { t } = useI18n();
const props = defineProps({
	listData: {
		type: Array,
		default: () => [],
	},
	showes: {
		type: Boolean,
		default: false,
	},
});

const state = reactive({
	loading: false,
	f_VHUB_Text: '',
	fSupplierLot: '',
	dialogVisible: true,
	data: [],
	show: true,
	formData: {},
	option: {
		tip: false,
		selection: false,
		index: true,
		menu: false,
		menuWidth: 150,
		border: true,
		delBtn: false,
		editBtn: false,
		align: 'center',
		searchLabelWidth: 140,
		searchMenuSpan: 6,
		addBtn: false,
		column: [
			{ label: computed(() => t('message.index.DocNumber')), prop: 'fBillNo' },
			{ label: computed(() => t('message.index.partNumber')), prop: 'materialCode' },
			{ label: computed(() => t('message.index.materialName')), prop: 'materialName', width: '180' },
			{ label: computed(() => t('message.index.unit')), prop: 'unitName' },
			{ label: computed(() => t('message.index.qty')), prop: 'qty' },
			{ label: computed(() => t('message.index.receivedQTY')), prop: 'sendedQty' },
			{ label: computed(() => t('message.index.unreceivedQTY')), prop: 'notSendQtyText' },
			{ label: computed(() => t('message.index.supplierLot')), prop: 'fSupplierLot' },
			{ label: computed(() => t('message.index.shipmentQTY')), prop: 'notSendQty', width: '180' },
			{ label: computed(() => t('message.index.earliestDeliveryDate')), prop: 'chengNuoJiaoQi', width: '180' },
			{ label: computed(() => t('message.index.latestDeliveryDate')), prop: 'newChengNuoJiaoQi', width: '180' },
		],
	},
	topId: '',
	chengNuoJiaoQiP: '',
	newChengNuoJiaoQiP: '',
});
watch(
	() => props.listData,
	() => {
		state.data = props.listData;
	}
);
const fSupplierLotFun = () => {
	state.data.forEach((item: any) => {
		item.fSupplierLot = state.fSupplierLot;
	});
	console.log(state.data);
	// state.fSupplierLot = '';
};
const chengNuoJiaoQiPFun = (e: string) => {
	let arr: any = [];
	if (e === '0') {
		state.data.forEach((item: any) => {
			arr.push({ id: item.id, newTime: state.chengNuoJiaoQiP });
		});
		batchSetChengNuoJiaoQiFun(arr);
	}
	if (e === '1') {
		state.data.forEach((item: any) => {
			arr.push({ id: item.id, newTime: state.newChengNuoJiaoQiP });
		});
		batchSetNewChengNuoJiaoQiFun(arr);
	}
};
const batchSetChengNuoJiaoQiFun = (arr: any) => {
	listApi()
		.batchSetChengNuoJiaoQi(arr)
		.then((res: any) => {
			if (res.resultCode === 0) {
				ElMessage.success('操作成功');
				state.data.forEach((item: any) => {
					item.chengNuoJiaoQi = state.chengNuoJiaoQiP;
				});
				// state.chengNuoJiaoQiP = '';
			}
			if (res.resultCode === -1) {
				ElMessage.success(res.errorMessage);
				// state.newChengNuoJiaoQiP = '';
			}
		});
};
const batchSetNewChengNuoJiaoQiFun = (arr: any) => {
	listApi()
		.batchSetNewChengNuoJiaoQi(arr)
		.then((res: any) => {
			if (res.resultCode === 0) {
				ElMessage.success('操作成功');

				state.data.forEach((item: any) => {
					item.newChengNuoJiaoQi = state.newChengNuoJiaoQiP;
				});
				// state.chengNuoJiaoQiP = '';
			}
			if (res.resultCode === -1) {
				ElMessage.success(res.errorMessage);
				// state.newChengNuoJiaoQiP = '';
			}
		});
};
const batchAddInvoiceOrderFun = () => {
	if (props.listData.length != 0) {
		state.loading = true;
		console.log(props.listData);
		let arr: any = [];
		props.listData.forEach((item: any) => {
			arr.push({
				id: item.id,
				qty: item.notSendQty,
				fSupplierLot: item.fSupplierLot,
			});
		});
		listApi()
			.batchAddInvoiceOrder({ f_VHUB_Text: state.f_VHUB_Text, upDateList: arr })
			.then((res: any) => {
				state.loading = false;
				if (res.resultCode === 0) {
					ElMessage.success('操作成功');
					emits('generateDocuments');
				}
				if (res.resultCode === -1) {
					ElMessage.error(res.errorMessage);
				}
			});
	} else {
		ElMessage.error('没有数据');
	}
};
const closeFun = () => {
	emits('close');
};
</script>
<style scoped lang="scss">
:deep(.el-card) {
	padding: 0 !important;
	//height: 56px !important;
}

.btnList {
	margin-top: 26px;
	display: flex;
	justify-content: center;
}

:deep(.avue-crud__left) {
	flex: 1;
}

:deep(.avue-crud__refreshBtn) {
	display: none;
}

:deep(.avue-crud__gridBtn) {
	display: none;
}

.piliang {
	margin-left: 12px;
	border: 1px solid #d5d5d5;
	border-radius: 8px;
	flex: 1;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 4px;
}

.system-user-container {
	//padding: 0 !important;
}

.multi-line-omit {
	word-break: break-all; // 允许单词内自动换行，如果一个单词很长的话
	text-overflow: ellipsis; // 溢出用省略号显示
	overflow: hidden; // 超出的文本隐藏
	display: -webkit-box; // 作为弹性伸缩盒子模型显示
	-webkit-line-clamp: 1; // 显示的行
	-webkit-box-orient: vertical; // 设置伸缩盒子的子元素排列方式--从上到下垂直排列
}

.selectBoxes {
	display: flex;
	flex: 1;

	.selectItem {
		margin-right: 16px;
		display: flex;
	}
}

:deep(.avue-crud) {
	height: 100%;
	width: 100%;
}

:deep(.avue-crud--card) {
	display: flex;
	flex-direction: column;
	flex: 1;
}

:deep(.avue-crud__body) {
	flex: 1;
}

:deep(.el-table__header) {
	height: 40px;
}

:deep(.el-card__body) {
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
	padding: 0 !important;
}

:deep(.el-table__cell) {
	//padding: 0 !important;
	//height: 56px !important;
}

:deep(.el-card) {
	padding: 12px;
}

:deep(.el-form) {
	flex: 1;
}

.system-user-container {
	:deep(.el-card__body) {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: auto;

		.el-table {
			flex: 1;
		}
	}
}

:deep(.el-col) {
	margin-bottom: 16px;
}
</style>