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

<template>
	<el-dialog :model-value="props.showes" @close="closeFun" width="90%">

		<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.notSendQtyText" size="small" />
				</div>
			</template>
      <template #menu-left>
        <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>
      </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';
// import { useClipboard } from 'vue-clipboard3';
// const { copy } = useClipboard();
import useClipboard from 'vue-clipboard3';
const { toClipboard } = useClipboard();
const emits = defineEmits(['generateDocuments', 'close']);
import { useI18n } from 'vue-i18n';
import { ElMessage, ElMessageBox } 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;
		state.data.forEach((item: any) => {
			item.notSendQtyText = item.notSendQty;
		});
	}
);
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.notSendQtyText,
				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(t('message.index.success'));
					emits('generateDocuments');
					ElMessageBox({
						closeOnClickModal: false,
						closeOnPressEscape: false,
						title: t('message.index.prompt'),
						message: t('message.index.deliveryNoteNumber2') + ':' + res.data,
						confirmButtonText: t('message.index.copy'),
						showCancelButton: false,
						buttonSize: 'default',
						beforeClose: (action, instance, done) => {
							if (action === 'confirm') {
                toClipboard(res.data)
                ElMessage.success(t('message.index.success'))
							} else {
								done();
							}
						},
					});
				}
				if (res.resultCode === -1) {
					ElMessage.error(res.errorMessage);
				}
			});
	} else {
		ElMessage.error(t('message.index.noData'));
	}
};
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>