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

<template>
	<div class="system-user-container layout-padding">
		<el-card class="layout-padding-auto" shadow="hover">
			<avue-crud ref="crudRef" :data="state.data" :option="tableOption" @selection-change="selectionChange" :table-loading="state.loading">
				<template #fBillNo="{ row }">{{ row.fBillNo }}</template>
				<template #fDate="{ row }">{{ row.fDate }}</template>
				<template #materialName="{ row }">
					<el-tooltip :content="row.materialName" placement="top">
						<div class="multi-line-omit">{{ row.materialName }}</div>
					</el-tooltip>
				</template>
				<template #chengNuoJiaoQi="{ row }">
					<el-date-picker
						v-model="row.chengNuoJiaoQi"
						type="date"
						:placeholder="t('message.index.date')"
						size="small"
						style="width: 220px"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
            :disabled="row.chengNuoJiaoQi != null"
						@change="batchSetChengNuoJiaoQiFun([{ id: row.id, newTime: row.chengNuoJiaoQi }])"
					/>
				</template>
				<template #newChengNuoJiaoQi="{ row }">
					<el-date-picker
						v-model="row.newChengNuoJiaoQi"
						type="date"
						:placeholder="t('message.index.date')"
						size="small"
						style="width: 220px"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
            :disabled="true"
						@change="batchSetNewChengNuoJiaoQiFun([{ id: row.id, newTime: row.newChengNuoJiaoQi }])"
					/>
				</template>
				<template #menu-left>
					<div class="selectBoxes">
						<div class="selectItem" style="flex: 1; margin-right: 0">
							<div class="piliang">
								<el-button type="primary" size="small" @click="state.selectedDataShow = true">
									<span
										>{{ t('message.index.selected') }} {{ state.selectedData.length }} {{ t('message.index.items') }}，{{
											t('message.index.proceed')
										}}</span
									>
								</el-button>
								<el-date-picker
									v-model="state.chengNuoJiaoQiP"
									type="date"
									:placeholder="t('message.index.batchUpdateEarliestDeliveryDate')"
									size="small"
									style="width: 45%; margin-left: 12px"
									@change="chengNuoJiaoQiPFun('0')"
								/>
								<el-date-picker
									v-model="state.newChengNuoJiaoQiP"
									type="date"
									:placeholder="t('message.index.batchUpdateLatestDeliveryDate')"
									size="small"
									style="width: 45%; margin-left: 12px"
									@change="chengNuoJiaoQiPFun('1')"
								/>
							</div>
						</div>
					</div>
				</template>
			</avue-crud>
		</el-card>
		<selectedData
			ref="selectedDataRef"
			:showes="state.selectedDataShow"
			:listData="state.selectedData"
			@generateDocuments="generateDocumentsFun"
			@close="state.selectedDataShow = false"
		/>
	</div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, computed, nextTick, ref } from 'vue';
import { useRoute } from 'vue-router';
import { listApi } from '../../api/list/index';
import { useI18n } from 'vue-i18n';
import SelectedData from '/@/views/mssPurchaseOrder/selectedData.vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const selectedDataRef = ref();
const route = useRoute();
const { t } = useI18n();
// 定义变量内容
const state = reactive({
	page: {
		total: 1000,
		currentPage: 1,
		pageSize: 25,
	},
	data: [],
	elDatePicker: '',
	formData: {
		fBillNo: '',
		fDateBegin: '',
		fDateEmd: '',
		fmrpCloseStatus: '',
	},
	selectedData: [],
	chengNuoJiaoQiP: '',
	newChengNuoJiaoQiP: '',
	selectedDataShow: false,
	loading: false,
	topId: '',
});

const tableOption = computed(() => ({
  tip: false,
  index: true,
  menuWidth: 120,
  border: true,
  delBtn: false,
  editBtn: false,
  align: 'center',
  selection: true,
  searchMenuSpan: 3,
  addBtn: false,
  menu: false,
  column: [
    { label: t('message.index.DocNumber'), prop: 'fBillNo', searchSpan: 3, width: '125' },
    {
      label: t('message.index.date'),
      prop: 'fDate',
      type: 'datetime',
      searchSpan: 6,
      searchRange: true,
    },
    {
      label: t('message.index.status'),
      prop: 'fCancelStatus',
      dicData: [
        { label: t('message.index.unclosed'), value: 'A' },
        { label: t('message.index.closed1'), value: 'B' },
      ],
      width: '90',
    },
    { label: t('message.index.partNumber'), prop: 'materialCode', width: '120' },
    { label: t('message.index.materialName'), prop: 'materialName', width: '240' },
    { label: t('message.index.specification'), prop: 'guige', width: '120' },
    { label: t('message.index.unit'), prop: 'unitName', width: '90' },
    { label: t('message.index.qty'), prop: 'qty', width: '90' },
    { label: t('message.index.cgtype'), prop: 'fbilltypeid', width: '110', filters: true },
    { label: t('message.index.requestDate'), prop: 'fDeliveryDate', width: '165' },
    {
      label: t('message.index.DocStatus'),
      prop: 'fmrpCloseStatus',
      searchSpan: 3,
      dicData: [
        { label: t('message.index.normal'), value: 'A' },
        { label: t('message.index.closed'), value: 'B' },
      ],
      width: '90',
    },
    { label: t('message.index.receivedQTY'), prop: 'mssReceiveQty', width: '180' },
    { label: t('message.index.unreceivedQTY'), prop: 'notSendQty', width: '110' },
    { label: t('message.index.earliestDeliveryDate'), prop: 'chengNuoJiaoQi', width: '160' },
    { label: t('message.index.latestDeliveryDate'), prop: 'newChengNuoJiaoQi', width: '160' },
  ],
}))

const selectionChange = (list: any) => {
  nextTick(() => {
    state.selectedData = JSON.parse(JSON.stringify(list));
  });
};

const chengNuoJiaoQiPFun = (e: string) => {
	if (state.selectedData.length != 0) {
		let arr: any = [];
		if (e === '0') {
			state.selectedData.forEach((item: any) => {
				arr.push({ id: item.id, newTime: state.chengNuoJiaoQiP });
			});
			ElMessageBox({
				closeOnClickModal: false,
				closeOnPressEscape: false,
				title: t('message.index.prompt'),
				message: t('message.index.pleaseConfirmTheDateChange'),
				confirmButtonText: t('message.user.logOutConfirm'),
				cancelButtonText: t('message.user.logOutCancel'),
				showCancelButton: true,
				buttonSize: 'default',
				beforeClose: (action, instance, done) => {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						listApi()
							.batchSetChengNuoJiaoQi(arr)
							.then((res: any) => {
								done();
								if (res.resultCode === 0) {
									getList();
									ElMessage.success(t('message.index.changedSuccessfully'));
								}
								if (res.resultCode === -1) {
									getList();
									ElMessage.success(res.errorMessage);
								}
							});
					} else {
						getList();
						done();
					}
				},
			});
		}
		if (e === '1') {
			state.selectedData.forEach((item: any) => {
				arr.push({ id: item.id, newTime: state.newChengNuoJiaoQiP });
			});
			ElMessageBox({
				closeOnClickModal: false,
				closeOnPressEscape: false,
				title: t('message.index.prompt'),
				message: t('message.index.pleaseConfirmTheDateChange'),
				confirmButtonText: t('message.user.logOutConfirm'),
				cancelButtonText: t('message.user.logOutCancel'),
				showCancelButton: true,
				buttonSize: 'default',
				beforeClose: (action, instance, done) => {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						instance.confirmButtonText = '1';
						listApi()
							.batchSetNewChengNuoJiaoQi(arr)
							.then((res: any) => {
								done();
								if (res.resultCode === 0) {
									getList();
									ElMessage.success(t('message.index.changedSuccessfully'));
								}
								if (res.resultCode === -1) {
									getList();
									ElMessage.success(res.errorMessage);
								}
							});
					} else {
						getList();
						done();
					}
				},
			});
		}
	} else {
		ElMessage.warning(t('message.index.PleaseSelectItemsFirstly'));
	}
};
const batchSetChengNuoJiaoQiFun = (arr: any) => {
	ElMessageBox({
		closeOnClickModal: false,
		closeOnPressEscape: false,
		title: t('message.index.prompt'),
		message: t('message.index.pleaseConfirmTheDateChange'),
		confirmButtonText: t('message.user.logOutConfirm'),
		cancelButtonText: t('message.user.logOutCancel'),
		showCancelButton: true,
		buttonSize: 'default',
		beforeClose: (action, instance, done) => {
			if (action === 'confirm') {
				instance.confirmButtonLoading = true;
				instance.confirmButtonText = '1';
				listApi()
					.batchSetChengNuoJiaoQi(arr)
					.then((res: any) => {
						done();
						if (res.resultCode === 0) {
							getList();
							ElMessage.success(t('message.index.changedSuccessfully'));
						}
						if (res.resultCode === -1) {
							getList();
							ElMessage.success(res.errorMessage);
						}
					});
			} else {
				done();
			}
		},
	});
};
const batchSetNewChengNuoJiaoQiFun = (arr: any) => {
	ElMessageBox({
		closeOnClickModal: false,
		closeOnPressEscape: false,
		title: t('message.index.prompt'),
		message: t('message.index.pleaseConfirmTheDateChange'),
		confirmButtonText: t('message.user.logOutConfirm'),
		cancelButtonText: t('message.user.logOutCancel'),
		showCancelButton: true,
		buttonSize: 'default',
		beforeClose: (action, instance, done) => {
			if (action === 'confirm') {
				instance.confirmButtonLoading = true;
				instance.confirmButtonText = '1';
				listApi()
					.batchSetNewChengNuoJiaoQi(arr)
					.then((res: any) => {
						done();
						if (res.resultCode === 0) {
							getList();
							ElMessage.success(t('message.index.changedSuccessfully'));
						}
						if (res.resultCode === -1) {
							getList();
							ElMessage.success(res.errorMessage);
						}
					});
			} else {
				done();
			}
		},
	});
};
const generateDocumentsFun = () => {
	state.selectedDataShow = false;
	getList();
};

const getList = () => {
	state.loading = true;
	listApi()
		.getPageList({
			condition: {
				fBillNo: state.formData.fBillNo,
			},
			pageSize: state.page.pageSize,
			page: state.page.currentPage,
		})
		.then((res: any) => {
			state.loading = false;
			if (res.resultCode === 0) {
				state.data = res.data.dataList;
				state.page.total = res.data.total;
			}
		});
};
// 页面加载时
onMounted(() => {
	state.formData.fBillNo = route.query.fBillNo as string;
	getList();
});
</script>

<style lang="scss" scoped>
:deep(.avue-crud__header) {
	//display: none;
}

:deep(.el-button--text) {
	padding: 0 !important;
	height: auto !important;
}

:deep(.avue-crud__pagination) {
	padding: 0 12px !important;
}

:deep(.cell) {
	padding: 0 !important;
}

: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-wrap: wrap;
	width: 650px;

	.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;
  overflow: hidden;
}
:deep(.el-table--default){
  height: 100%;
}

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