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"
          @search-change="searchChange"
          @search-reset="resetChange"
      >
				<template #menu-left>
          <div style="display: flex;">
            <div class="menu-left">
              <span >已选中 <span style="color: #3edc95; font-size: 18px">{{ state.selectedData.length }}</span> 条数据</span >
            </div>
            <el-button  style="margin-left: 16px" type="primary"  @click="selectedDataShowFun" >生成送货单</el-button>
          </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: 'PO号', prop: 'fBillNo', width: 150},
      { label: computed(() => t('message.list.PurchaseDate')), prop: 'fDate', width: 150,type: 'datetime', searchSpan: 6,searchRange: true,},
      { label: '关闭状态', prop: 'hangzhuangtai', width: 150 },
      { label: '物料编码', prop: 'wuliaobinama', width: 150 },
      { label: '物料名称', prop: 'wuliaomingcheng', width: 150 },
      { label: '采购单位', prop: 'caigoudanwei', width: 150 },
      { label: '采购数量', prop: 'caigoushuliang', width: 150 },
      { label: '交货日期', prop: 'jioahuiriqi', width: 150 },
      { label: '业务状态', prop: 'yewuzhuangtai', width: 150},
      { label: '累计收料数量', prop: 'ljslsl', width: 150 },
      { label: '剩余收料数量', prop: 'syslsl', width: 150 },
      { label: '供应商承诺交期', prop: 'gyscnjq', width: 150 },
      { label: '供应商承诺最新交期', prop: 'gyscnzxjq', width: 150 },
			// { label: computed(() => t('message.list.MaterialCode')), prop: 'materialCode', width: 200 },
			// { label: computed(() => t('message.list.MaterialName')), prop: 'materialName', width: 200 },
			// { label: computed(() => t('message.list.Specification')), prop: 'specificationModel', width: 200 },
			// { label: computed(() => t('message.list.PurchaseUnit')), prop: 'FUnitId', width: 200 },
			// { 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,
			// 	type: 'datetime',
			// 	searchSpan: 12,
			// 	searchRange: true,
			// 	searchLabelWidth: 150,
			// },
			// {
			// 	label: computed(() => t('message.list.LatestCommittedDeliveryDate')),
			// 	prop: 'newChengNuoJiaoQi',
			// 	width: 200,
			// 	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 searchChange = (params:any, done:any) => {
  done()
  getList()
}
const resetChange = () => {

}
const generateDocumentsFun = () => {
  state.selectedDataShow = false
  getList()
}
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>