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="state.option" v-model:page="state.page" @selection-change="selectionChange">
				<template #menu-left>
					<div class="menu-left" @click="selectedDataShowFun">
						<span >已选中 <span style="color: #3edc95; font-size: 18px">{{ state.selectedData.length }}</span> 条数据</span >
						<el-icon>
							<ArrowRight />
						</el-icon>
					</div>
				</template>
			</avue-crud>
		</el-card>
    <selectedData :showes="state.selectedDataShow" :listData="state.selectedData" @generateDocuments="generateDocumentsFun"/>
    <receipt :showes="state.receiptShow"/>
	</div>
</template>

<script lang="ts" setup>
import {reactive, onMounted, nextTick, computed} from 'vue';
import { ArrowRight } from '@element-plus/icons-vue';
import selectedData from './selectedData.vue'
import receipt from './receipt.vue'
import { useI18n } from 'vue-i18n';
const { locale, t } = useI18n();
// 定义变量内容
const state = reactive({
	page: {
		total: 1000,
		currentPage: 1,
		pageSize: 10,
	},
	option: {
		tip: false,
		selection: true,
		index: true,
		menu: false,
		menuWidth: 150,
		border: true,
		delBtn: false,
		editBtn: false,
		align: 'center',
		searchLabelWidth: 130,
		searchMenuSpan: 6,
		addBtn: false,
		column: [
			{ label: computed(() => t('message.list.MaterialCode')), prop: 'FMaterialId', width: 200, search: true },
			{ label: computed(() => t('message.list.MaterialName')), prop: 'FMaterialName', width: 200, search: true },
			{ label: computed(() => t('message.list.Specification')), prop: 'FModel', width: 200, search: true },
			{ label: computed(() => t('message.list.PurchaseUnit')), prop: 'FUnitId', width: 200, search: true },
			{ label: computed(() => t('message.list.QTY')), prop: 'FPrice', width: 200 },
			{ label: computed(() => t('message.list.UP')), prop: 'FTaxPrice', width: 200 },
			{ label: computed(() => t('message.list.TotalAmount')), prop: 'FEntryAmount', width: 200 },
			{ label: computed(() => t('message.list.TotalAmountTaxInclusive')), prop: 'FAllAmount', width: 200 },
			{ label: computed(() => t('message.list.AccumulatedReceiptQTY')), prop: 'FReceiveQty', width: 200 },
			{
				label: computed(() => t('message.list.DemondDate')),
				prop: 'FDeliveryDate',
				width: 200,
				search: true,
				type: 'datetime',
				searchSpan: 12,
				searchRange: true,
				searchLabelWidth: 150,
			},
			{ label: computed(() => t('message.list.TaxAmount')), prop: 'TaxAmount', width: 200 },
			{
				label: computed(() => t('message.list.CommittedDeliveryDate')),
				prop: 'FSupDueDate',
				width: 200,
				search: true,
				type: 'datetime',
				searchSpan: 12,
				searchRange: true,
				searchLabelWidth: 150,
			},
			{
				label: computed(() => t('message.list.LatestCommittedDeliveryDate')),
				prop: 'FSupDueNewDate',
				width: 200,
				search: true,
				type: 'datetime',
				searchSpan: 12,
				searchRange: true,
				searchLabelWidth: 150,
			},
			{ label: computed(() => t('message.list.Comments2')), prop: 'FNote', width: 200 },
		],
	},
	data: [
		{
			FMaterialId: '004785',
			FMaterialName: '我也不知道是什么东西',
			FModel: '这是什么型号',
			FUnitId: '美塞斯',
			FPrice: '10000000$',
			FTaxPrice: '10000000$',
			FEntryAmount: '10000000$',
			FAllAmount: '10000000$',
      FReceiveQty: '10',
      FDeliveryDate: '2025/10/31',
      FSupDueNewDate: '2025/10/31',
      FSupDueDate: '2025/10/31',
      TaxAmount: '10000000$',
		},
	],
  selectedData:[],
  selectedDataShow:false,
  receiptShow:false
});
const selectionChange = (list:any) => {
  nextTick( () => {
    state.selectedData = JSON.parse(JSON.stringify(list))
  })

}
const generateDocumentsFun = () => {
  state.receiptShow = !state.receiptShow
}
const selectedDataShowFun = () => {
   // = state.selectionList
  state.selectedDataShow = !state.selectedDataShow
}
// 页面加载时
onMounted(() => {
  for (let i = 0; i < 9; i++){
    state.data.push({
      FMaterialId: '004785' + i,
      FMaterialName: '我也不知道是什么东西',
      FModel: '这是什么型号',
      FUnitId: '美塞斯',
      FPrice: '10000000$',
      FTaxPrice: '10000000$',
      FEntryAmount: '10000000$',
      FAllAmount: '10000000$',
      FReceiveQty: '10',
      FDeliveryDate: '2025/10/31',
      FSupDueNewDate: '2025/10/31',
      FSupDueDate: '2025/10/31',
      TaxAmount: '10000000$',
    })
  }
});
</script>

<style lang="scss" scoped>
.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;
}

:deep(.avue-crud__header) {
	display: flex;
	flex-wrap: wrap;
}

.menu-left {
	width: 340px;
	height: 40px;
	background-color: rgba(64, 159, 255, 0.18);
	border-radius: 8px;
	border: 2px solid #d9ecff;
	display: flex;
	align-items: center;
	padding: 0 16px;
	justify-content: space-between;
	cursor: pointer;
}
</style>