初次对接

src/views/materialReceiptNotice/index.vue

@@ -1,10 +1,19 @@
 <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">
+			<avue-crud
+          ref="crudRef"
+          :data="state.data"
+          :option="state.option"
+          v-model:page="state.page"
+          v-model:search="state.formData"
+          @on-load="onLoadFun"
+          @search-change="searchChange"
+          @search-reset="resetChange"
+      >
 				<template #menu>
           <div class="btnList">
-            <el-button type="text" icon="el-icon-pie-chart" @click="toPurchaseDetails">查看详情</el-button>
+<!--            <el-button type="text" icon="el-icon-pie-chart" @click="toPurchaseDetails">查看详情</el-button>-->
             <el-button type="text" icon="el-icon-pie-chart" @click="state.selectedDataShow = true">查看单据</el-button>
           </div>
 				</template>
@@ -19,9 +28,9 @@ import { reactive, onMounted,computed } from 'vue';
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n';
 import selectedData from './selectedData.vue'
+import {listApi} from "/@/api/list";
 const router = useRouter()
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const { locale, t } = useI18n();
+const { t } = useI18n();
 
 // 定义变量内容
 const state = reactive({
@@ -41,56 +50,59 @@ const state = reactive({
     searchMenuSpan:6,
     addBtn:false,
 		column: [
-			{ label: computed(() => t('message.list.PONumber2')), prop: 'FBillNo', width: 200,search: true },
-			{ label: computed(() => t('message.list.SupplierCode2')), prop: 'FSupplierId', width: 200,search: true },
-			{ label: computed(() => t('message.list.SupplierName2')), prop: 'FSupplyName', width: 200,search: true },
+			{ label: '采购订单号', prop: 'purchaseOrderFBillNo', width: 200,search: true },
+			{ label: '发货单号', prop: 'sheet', width: 200,search: true },
+			{ label: computed(() => t('message.list.PONumber2')), prop: 'fBillNo', width: 200,search: true },
+			{ label: computed(() => t('message.list.SupplierCode2')), prop: 'supplierId', width: 200,search: true },
+			{ label: computed(() => t('message.list.SupplierName2')), prop: 'supplierName', width: 200,search: true },
 			{ label: computed(() => t('message.list.Buyer2')), prop: 'FPurchaserId', width: 200,search: true },
-      { label: computed(() => t('message.list.ReceiveOrg')), prop: 'FStockOrgId', width: 200,search: true },
-      { label: computed(() => t('message.list.BusinessType')), prop: 'FBillTypeID', width: 200,search: true },
-      { label: computed(() => t('message.list.OrderCreator')), prop: 'FCreatorId', width: 200,search: true },
+      // { label: computed(() => t('message.list.ReceiveOrg')), prop: 'FStockOrgId', width: 200,search: true },
+      // { label: computed(() => t('message.list.BusinessType')), prop: 'FBillTypeID', width: 200,search: true },
+      // { label: computed(() => t('message.list.OrderCreator')), prop: 'FCreatorId', width: 200,search: true },
       { label: computed(() => t('message.list.DocStatus2')), prop: 'FDocumentStatus', width: 200,search: true },
-      { label: computed(() => t('message.list.ReceivingDate')), prop: 'FDate', width: 200,search: true,type: 'datetime', searchSpan: 12,searchRange: true,},
-			{ label: computed(() => t('message.list.Comments3')), prop: 'FRemarks', width: 200 },
+      { label: computed(() => t('message.list.ReceivingDate')), prop: 'fDate', width: 200,search: true,type: 'datetime', searchSpan: 12,searchRange: true,},
+			// { label: computed(() => t('message.list.Comments3')), prop: 'FRemarks', width: 200 },
 		],
 	},
-	data: [
-		{
-			FBillNo: '005828',
-			FSupplierId: '005828',
-			FSupplyName: '美塞斯',
-			FPurchaserId: '采购甲',
-      FStockOrgId: '不知道',
-      FBillTypeID:'111',
-      FCreatorId: '制单人甲',
-      FDate: '2050/10/31',
-      FDocumentStatus: '已验收',
-			FRemarks: '数据是假的',
-		},
-
-	],
-  selectedDataShow:false
+	data: [],
+  selectedDataShow:false,
+  formData:{}
 });
 const toPurchaseDetails = () => {
   router.push({
     path: '/materialReceiptNoticePurchaseDetails',
   })
 }
+const onLoadFun = (e:any) => {
+  state.page.currentPage = e.currentPage
+  state.page.pageSize = e.pageSize
+  getList()
+}
+const searchChange = (params:any, done:any) => {
+  console.log(params)
+  done()
+  if(params.fDate?.length){
+    console.log(11111)
+  }
+}
+const resetChange = () => {
+
+}
+const getList = () => {
+  listApi().invoiceOrderGetPageList({
+    ...state.formData,
+    pageSize:state.page.pageSize,
+    page:state.page.currentPage,
+  }).then((res:any) => {
+    if(res.resultCode === 0){
+      state.data = res.data.dataList
+      state.page.total = res.data.total
+    }
+  })
+}
 // 页面加载时
 onMounted(() => {
-  for (let i = 0; i < 9; i++){
-    state.data.push({
-      FBillNo: '005828',
-      FSupplierId: '005828',
-      FSupplyName: '美塞斯',
-      FPurchaserId: '采购甲',
-      FStockOrgId: '不知道',
-      FBillTypeID:'111',
-      FCreatorId: '制单人甲',
-      FDate: '2050/10/31',
-      FDocumentStatus: '已验收',
-      FRemarks: '数据是假的',
-    },)
-  }
+  getList()
 });
 </script>