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"
          @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';
import {listApi} from "/@/api/list";
import { useRoute } from 'vue-router'
const route = useRoute()
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: 'materialCode', width: 200, search: true },
			{ label: computed(() => t('message.list.MaterialName')), prop: 'materialName', width: 200, search: true },
			{ label: computed(() => t('message.list.Specification')), prop: 'specificationModel', width: 200, search: true },
			{ label: computed(() => t('message.list.PurchaseUnit')), prop: 'FUnitId', width: 200, search: true },
			{ label: '采购数量', prop: 'qty', width: 200 },
			{ label: '处理中数量', prop: 'processingQty', width: 200 },
			{ label: '已发货数量', prop: 'sendedQty', width: 200 },
			{ label: '未发货数量', prop: 'notSendQty', width: 200 },
			{ label: '本次发货数量', prop: 'nowSendQty', width: 200 },
			{ label: computed(() => t('message.list.UP')), prop: 'unitPrice', width: 200 },
			{ label:'价税合计(含税金额', prop: 'amount1', width: 200 },
			{ label: computed(() => t('message.list.TotalAmount')), prop: 'amount2', width: 200 },
			{ label: computed(() => t('message.list.AccumulatedReceiptQTY')), prop: 'FReceiveQty', width: 200 },
			{ label: computed(() => t('message.list.TaxAmount')), prop: 'taxAmount', width: 200 },
			{
				label: computed(() => t('message.list.CommittedDeliveryDate')),
				prop: 'chengNuoJiaoQi',
				width: 200,
				search: true,
				type: 'datetime',
				searchSpan: 12,
				searchRange: true,
				searchLabelWidth: 150,
			},
			{
				label: computed(() => t('message.list.LatestCommittedDeliveryDate')),
				prop: 'newChengNuoJiaoQi',
				width: 200,
				search: true,
				type: 'datetime',
				searchSpan: 12,
				searchRange: true,
				searchLabelWidth: 150,
			},
			{ label: computed(() => t('message.list.Comments2')), prop: 'remark', width: 200 },
		],
	},
	data: [],
  selectedData:[],
  selectedDataShow:false,
  receiptShow:false,
  topId:''
});
const selectionChange = (list:any) => {
  nextTick( () => {
    state.selectedData = JSON.parse(JSON.stringify(list))
  })

}
const generateDocumentsFun = () => {
  state.receiptShow = !state.receiptShow
}
const selectedDataShowFun = () => {
  state.selectedDataShow = !state.selectedDataShow
}
// 页面加载时
onMounted(() => {
  state.topId = route.query.topId as string
  getList()
})
const getList = () => {
  listApi().getPurchaseOrderItemList({
    fid:state.topId
  }).then((res:any) => {
    if(res.resultCode === 0){
      state.data = res.data
    }
  })
}

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