首页表格分页功能

src/views/home/components/material.vue

@@ -36,10 +36,11 @@
         <!-- 呆滞库存预警 -->
         <div class="title">{{ t('home.slack_stock_warning')}}</div>
         <el-table
-          :data="materialData?.stagnantBalanceList"
+          :data="stagnantBalanceList"
           style="width: 100%"
           stripe
           height="240px"
+          row-key="id"
         >
           <el-table-column prop="itemCode" :label="t('home.material_code')" width="180px" />
           <el-table-column prop="batch" :label="t('home.batch')" width="180px" />
@@ -88,7 +89,7 @@
             </template>
           </el-table-column>
         </el-table>
-        <!-- <el-pagination style="margin-top:10px"
+        <el-pagination style="margin-top:10px"
           v-model:current-page="currentPage_stagnantBalance"
           v-model:page-size="pageSize_stagnantBalance"
           :page-sizes="[10, 20, 30, 50, 100]"
@@ -96,17 +97,19 @@
           :background="false"
           layout="total, sizes, prev, pager, next, jumper"
           :total="total_stagnantBalance"
-          @current-change="handleCurrentChange_stagnantBalance"
-        /> -->
+          @size-change="getStagnantBalance"
+          @current-change="getStagnantBalance"
+        />
       </div>
       <div class="data1 w-[47.3%]">
         <!-- 超期库存预警 -->
         <div class="title">{{ t('home.overstock_warning') }}</div>
         <el-table
-          :data="materialData?.overdueBalanceList"
+          :data="overdueBalanceList"
           style="width: 100%"
           stripe
           height="240px"
+          row-key="id"
         >
           <el-table-column prop="itemCode" :label="t('home.material_code')" width="180px" />
           <el-table-column prop="batch" :label="t('home.batch')" width="180px" />
@@ -155,7 +158,7 @@
             </template>
           </el-table-column>
         </el-table>
-        <!-- <el-pagination style="margin-top:10px"
+        <el-pagination style="margin-top:10px"
           v-model:current-page="currentPage_overdueBalance"
           v-model:page-size="pageSize_overdueBalance"
           :page-sizes="[10, 20, 30, 50, 100]"
@@ -163,8 +166,9 @@
           :background="false"
           layout="total, sizes, prev, pager, next, jumper"
           :total="total_overdueBalance"
-          @current-change="handleCurrentChange_overdueBalance"
-        /> -->
+          @size-change="getOverdueBalance"
+          @current-change="getOverdueBalance"
+        />
       </div>
     </div>
     <div class="two-row mt-14px">
@@ -172,7 +176,7 @@
         <!-- 高低储预警 -->
         <div class="title">{{ t('home.high_and_low_storage_warning') }}</div>
         <el-table
-          :data="materialData?.warningBalanceList"
+          :data="warningBalanceList"
           style="width: 100%"
           stripe
           height="240px"
@@ -224,7 +228,7 @@
             </template>
           </el-table-column>
         </el-table>
-        <!-- <el-pagination style="margin-top:10px"
+        <el-pagination style="margin-top:10px"
           v-model:current-page="currentPage_warningBalance"
           v-model:page-size="pageSize_warningBalance"
           :page-sizes="[10, 20, 30, 50, 100]"
@@ -232,8 +236,9 @@
           :background="false"
           layout="total, sizes, prev, pager, next, jumper"
           :total="total_warningBalance"
-          @current-change="handleCurrentChange_warningBalance"
-        /> -->
+          @size-change="getWarningBalance"
+          @current-change="getWarningBalance"
+        />
       </div>
       <div class="data1  w-[47.3%]">
         <!-- 待处理任务 -->
@@ -262,6 +267,7 @@ const getMaterialData =  () => {
     getJobCharts()
   })
 }
+
 const formatter = (type, dict) => {
   let str = getStrDictOptions(dict).filter((item) => type == item.value)[0]?.label
   return str
@@ -285,32 +291,58 @@ const getJobCharts = async () => {
   lineIndex.value++
 }
 onMounted(() => {
-  // getMaterialData()
+  getMaterialData()
+  //呆滞库存预警 超期库存预警
+  Promise.all([ getStagnantBalance(),getOverdueBalance(),getWarningBalance()])
 })
 
 // 呆滞库存预警
 const currentPage_stagnantBalance = ref(1)
 const pageSize_stagnantBalance = ref(10)
 const total_stagnantBalance= ref(100)
-const handleCurrentChange_stagnantBalance = (val)=>{
-  console.log('呆滞库存预警',val)
+const stagnantBalanceList = ref([])
+const getStagnantBalance = ()=>{
+    IndexApi.getStagnantBalance({
+      pageNo: currentPage_stagnantBalance.value,
+      pageSize: pageSize_stagnantBalance.value
+    }).then((res) => {
+      console.log('getStagnantBalance',res)
+      stagnantBalanceList.value = res.list
+      total_stagnantBalance.value = res.total
+    })
 }
-
 // 超期库存预警
 const currentPage_overdueBalance = ref(1)
 const pageSize_overdueBalance = ref(10)
 const total_overdueBalance= ref(100)
-const handleCurrentChange_overdueBalance = (val)=>{
-  console.log('超期库存预警',val)
+const overdueBalanceList = ref([])
+const getOverdueBalance = ()=>{
+    IndexApi.getOverdueBalance({
+      pageNo: currentPage_overdueBalance.value,
+      pageSize: pageSize_overdueBalance.value
+    }).then((res) => {
+      console.log('getOverdueBalance',res)
+      overdueBalanceList.value = res.list
+      total_overdueBalance.value = res.total
+    })
 }
 
 // 高低储预警
 const currentPage_warningBalance = ref(1)
 const pageSize_warningBalance = ref(10)
 const total_warningBalance= ref(100)
-const handleCurrentChange_warningBalance = (val)=>{
-  console.log('高低储预警',val)
+const warningBalanceList = ref([])
+const getWarningBalance = ()=>{
+    IndexApi.getWarningBalance({
+      pageNo: currentPage_warningBalance.value,
+      pageSize: pageSize_warningBalance.value
+    }).then((res) => {
+      console.log('getWarningBalance',res)
+      warningBalanceList.value = res.list
+      total_warningBalance.value = res.total
+    })
 }
+
 </script>
 <style scoped lang="scss">
 .title {

src/views/home/components/produce.vue

@@ -3,9 +3,10 @@
   <div class="row">
     <div class="two-row">
       <div class="data1 w-[47.3%]">
+        <!-- 今日生产计划 -->
         <div class="title">{{ t('home.today_production_plan')}}</div>
         <el-table
-          :data="produceData?.productionTodayList"
+          :data="productionTodayList"
           style="width: 100%"
           stripe
           height="240px"
@@ -33,10 +34,22 @@
           </el-table-column>
           <el-table-column prop="businessType" :label="t('home.business_type')" />
         </el-table>
+        <el-pagination style="margin-top:10px"
+          v-model:current-page="currentPage_productionToday"
+          v-model:page-size="pageSize_productionToday"
+          :page-sizes="[10, 20, 30, 50, 100]"
+          :small="true"
+          :background="false"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total_productionToday"
+          @size-change="getProductionToday"
+          @current-change="getProductionToday"
+        />
       </div>
       <div class="data1 w-[47.3%]">
+        <!-- 线边安全库存 -->
         <div class="title">{{ t('home.line_side_safety_stock') }}</div>
-        <el-table :data="produceData?.safeLocationList" style="width: 100%" stripe height="240px">
+        <el-table :data="safeLocationList" style="width: 100%" stripe height="240px">
           <el-table-column prop="code" :label="t('home.code')" width="180" />
           <el-table-column prop="name" :label="t('home.name')" width="180" />
           <el-table-column prop="warehouseCode" :label="t('home.warehouse_code')" width="180" />
@@ -64,13 +77,25 @@
             </template>
           </el-table-column>
         </el-table>
+        <el-pagination style="margin-top:10px"
+          v-model:current-page="currentPage_safeLocation"
+          v-model:page-size="pageSize_safeLocation"
+          :page-sizes="[10, 20, 30, 50, 100]"
+          :small="true"
+          :background="false"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total_safeLocation"
+          @size-change="getSafeLocation"
+          @current-change="getSafeLocation"
+        />
       </div>
     </div>
     <div class="two-row mt-14px">
       <div class="data1 w-[47.3%]">
+        <!-- 待上架成品库存 -->
         <div class="title">{{t('home.inventory_of_finished_products_waiting_to_be_putway')}}</div>
         <el-table
-          :data="produceData?.productputawayJobDetailList"
+          :data="productputawayJobDetailList"
           style="width: 100%"
           stripe
           height="240px"
@@ -153,6 +178,17 @@
             </template>
           </el-table-column>
         </el-table>
+        <el-pagination style="margin-top:10px"
+          v-model:current-page="currentPage_productputawayJobDetail"
+          v-model:page-size="pageSize_productputawayJobDetail"
+          :page-sizes="[10, 20, 30, 50, 100]"
+          :small="true"
+          :background="false"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total_productputawayJobDetail"
+          @size-change="getProductputawayJobDetail"
+          @current-change="getProductputawayJobDetail"
+        />
       </div>
       <div class="data1 w-[47.3%]">
         <div class="title">{{t('home.waiting_tasks')}}</div>
@@ -201,8 +237,57 @@ const getJobCharts = async () => {
   ])
   lineIndex.value++
 }
+// 今日生产计划
+const currentPage_productionToday = ref(1)
+const pageSize_productionToday = ref(10)
+const total_productionToday= ref(100)
+const productionTodayList = ref([])
+const getProductionToday = ()=>{
+    IndexApi.getProductionToday({
+      pageNo: currentPage_productionToday.value,
+      pageSize: pageSize_productionToday.value
+    }).then((res) => {
+      console.log('getPurchasereturnRecordMonth',res)
+      productionTodayList.value = res.list
+      total_productionToday.value = res.total
+    })
+}
+// 线边安全库存
+const currentPage_safeLocation = ref(1)
+const pageSize_safeLocation = ref(10)
+const total_safeLocation= ref(100)
+const safeLocationList = ref([])
+const getSafeLocation = ()=>{
+    IndexApi.getSafeLocation({
+      pageNo: currentPage_safeLocation.value,
+      pageSize: pageSize_safeLocation.value
+    }).then((res) => {
+      console.log('getPurchasereturnRecordMonth',res)
+      safeLocationList.value = res.list
+      total_safeLocation.value = res.total
+    })
+}
+
+// 待上架成品库存
+const currentPage_productputawayJobDetail = ref(1)
+const pageSize_productputawayJobDetail = ref(10)
+const total_productputawayJobDetail= ref(100)
+const productputawayJobDetailList = ref([])
+const getProductputawayJobDetail = ()=>{
+    IndexApi.getProductputawayJobDetail({
+      pageNo: currentPage_productputawayJobDetail.value,
+      pageSize: pageSize_productputawayJobDetail.value
+    }).then((res) => {
+      console.log('待上架成品库存',res)
+      productputawayJobDetailList.value = res.list
+      total_productputawayJobDetail.value = res.total
+    })
+}
+
+
 onMounted( () => {
   // getProduceData()
+  Promise.all([getProductionToday(),getSafeLocation(),getProductputawayJobDetail()])
 })
 </script>
 <style scoped lang="scss">

src/views/home/components/supplierIndex.vue

@@ -147,9 +147,10 @@
     </div>
     <div class="two-row mt-14px">
       <div class="data1 w-[47.3%]">
+        <!-- 本月退货明细 -->
         <div class="title">{{t('home.month_return_detials')}}</div>
         <el-table
-          :data="supplierData?.purchasereturnRecordMonth"
+          :data="purchasereturnRecordMonth"
           style="width: 100%"
           stripe
           height="240px"
@@ -199,11 +200,23 @@
           </el-table-column>
           <el-table-column prop="creator" :label="t('home.creater')" width="120" />
         </el-table>
+        <el-pagination style="margin-top:10px"
+          v-model:current-page="currentPage_purchasereturn"
+          v-model:page-size="pageSize_purchasereturn"
+          :page-sizes="[10, 20, 30, 50, 100]"
+          :small="true"
+          :background="false"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total_purchasereturn"
+          @size-change="getPurchasereturnRecordMonth"
+          @current-change="getPurchasereturnRecordMonth"
+        />
       </div>
       <div class="data1 w-[47.3%]">
+        <!-- 本月索赔明细 -->
         <div class="title">{{t('home.claim_details_month')}}</div>
         <el-table
-          :data="supplierData?.purchasereturnRecordMonth"
+          :data="purchaseclaimRecordMonth"
           style="width: 100%"
           stripe
           height="240px"
@@ -223,6 +236,17 @@
           </el-table-column>
           <el-table-column prop="creator" :label="t('home.creater')" width="120" />
         </el-table>
+        <el-pagination style="margin-top:10px"
+          v-model:current-page="currentPage_purchaseclaim"
+          v-model:page-size="pageSize_purchaseclaim"
+          :page-sizes="[10, 20, 30, 50, 100]"
+          :small="true"
+          :background="false"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="total_purchaseclaim"
+          @size-change="getPurchaseclaimRecordMonth"
+          @current-change="getPurchaseclaimRecordMonth"
+        />
       </div>
     </div>
   </div>
@@ -354,9 +378,42 @@ const formatter = (type,dict) => {
   let str = getStrDictOptions(dict).filter((item) => type == item.value)[0]?.label
   return str
 }
+
+// 本月退货明细
+const currentPage_purchasereturn = ref(1)
+const pageSize_purchasereturn = ref(10)
+const total_purchasereturn= ref(100)
+const purchasereturnRecordMonth = ref([])
+const getPurchasereturnRecordMonth = ()=>{
+    IndexApi.getPurchasereturnRecordMonth({
+      pageNo: currentPage_purchasereturn.value,
+      pageSize: pageSize_purchasereturn.value
+    }).then((res) => {
+      console.log('getPurchasereturnRecordMonth',res)
+      purchasereturnRecordMonth.value = res.list
+      total_purchasereturn.value = res.total
+    })
+}
+// 本月索赔明细
+const currentPage_purchaseclaim = ref(1)
+const pageSize_purchaseclaim = ref(10)
+const total_purchaseclaim= ref(100)
+const purchaseclaimRecordMonth = ref([])
+const getPurchaseclaimRecordMonth = ()=>{
+    IndexApi.getPurchaseclaimRecordMonth({
+      pageNo: currentPage_purchaseclaim.value,
+      pageSize: pageSize_purchaseclaim.value
+    }).then((res) => {
+      console.log('getPurchaseclaimRecordMonth',res)
+      purchaseclaimRecordMonth.value = res.list
+      total_purchaseclaim.value = res.total
+    })
+}
 onMounted( () => {
-  // getSupplierData()
+  getSupplierData()
   getList()
+  // 本月索赔明细
+  Promise.all([getPurchaseclaimRecordMonth(),getPurchasereturnRecordMonth()])
 })
 </script>
 <style scoped lang="scss">