解决build环境项目列表分页问题

src/views/ClosedProject.vue

@@ -18,11 +18,12 @@
         <el-table-column prop="projectSubclassName" label="项目类型" min-width="10%"/>
         <el-table-column label="项目进度" min-width="35%" >
           <template #default="scope">
-            <el-progress :text-inside="true" :stroke-width="18" :status="scope.row.completeNum===scope.row.totalNum ? 'success' : ''"
+            <el-progress :text-inside="true" :stroke-width="18"
-                         :percentage="scope.row.completeNum*100/scope.row.totalNum"></el-progress>
+                         :status="(scope.row.totalNum!==0&&scope.row.completeNum===scope.row.totalNum) ? 'success' : ''"
+                         :percentage="scope.row.totalNum===0?0:Math.round(scope.row.completeNum*100/scope.row.totalNum)"></el-progress>
           </template>
         </el-table-column>
-        <el-table-column prop="projectCloseTime" label="结项日期" min-width="10%" align="right" :formatter="dateFormatter"/>
+        <el-table-column prop="projectClosedDate" label="结项日期" min-width="10%" align="right" :formatter="dateFormatter"/>
       </el-table>
 
       <!-- 分页 -->
@@ -40,25 +41,82 @@
   </div>
 </template>
 <script setup>
+
 // table元素
-import {onMounted, ref} from "vue";
+import {getCurrentInstance, onMounted, ref, watch } from "vue";
+import { useRouter } from 'vue-router'
+import request from "../utils/request";
 
 const tableRef = ref(null);
 // table高度
 const tableHeight = ref();
-
+const { proxy, ctx } = getCurrentInstance()
 onMounted(() => {
-  // 设置表格初始高度为innerHeight-offsetTop-表格底部与浏览器底部距离85
+  // 设置表格初始高度为innerHeight-offsetTop-表格底部与浏览器底部距离110
   tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 110;
-  // 监听浏览器高度变化
   window.onresize = () => {
     tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 110;
   };
 });
+const router = useRouter()
+const tableData = ref([])
+const currentPage = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+const redirect = () => {
+  router.push({path: '/project/closed', query: {currentPage: currentPage.value, pageSize: pageSize.value}})
+}
+const getClosedProjects = () => {
+  const that = this;
+  request({
+    url: 'project',
+    method: 'get',
+    params: {
+      pageCurrent: currentPage.value,
+      pageSize: pageSize.value,
+      // sortBy: 'projectClosedDate',
+      // asc: false,
+      paramMap: {
+        completed: true
+      }
+    }
+  }).then(response => {
+    if (response.data.code === 200) {
+      //console.log(response.data.data.records)
+      total.value = response.data.data.total
+      tableData.value = response.data.data.records
+    }
+  }).catch(function (error) {
+    console.log(error)
+  })
+}
+
+// 选择一页显示多少条数据
+const handleSizeChange = (val) => {
+  redirect()
+}
+// 选择当前的是第几页
+const handleCurrentChange = (val) => {
+  redirect()
+}
+
+watch(
+    () => router.currentRoute.value.query,
+    () => {
+      if (router.currentRoute.value.query.currentPage)
+        currentPage.value = parseInt(router.currentRoute.value.query.currentPage)
+      if (router.currentRoute.value.query.pageSize)
+        pageSize.value = parseInt(router.currentRoute.value.query.pageSize)
+
+      getClosedProjects()
+    },
+    // 组件创建完后获取数据，
+    // 此时 data 已经被 observed 了
+    {immediate: true}
+)
 
 </script>
 <script>
-import request from "../utils/request";
 import moment from "moment";
 import router from "../router";
 
@@ -66,66 +124,12 @@ export default {
   name: "ClosedProject",
   data() {
     return {
-
-      total: 0,
-      currentPage: 1,
-      pageSize: 10,
-
-      tableData: []
     }
   },
-  created() {
-    // watch 路由的参数，以便再次获取数据
-    this.$watch(
-        () => this.$route.query,
-        () => {
-          if(this.$route.query.currentPage)
-            this.currentPage = parseInt(this.$route.query.currentPage)
-          if(this.$route.query.pageSize)
-            this.pageSize = parseInt(this.$route.query.pageSize)
-
-          this.getClosedProjects()
-        },
-        // 组件创建完后获取数据，
-        // 此时 data 已经被 observed 了
-        { immediate: true }
-    )
-  },
 
   methods: {
-    // 选择一页显示多少条数据
+
-    handleSizeChange(val) {
+
-      this.redirect()
-    },
-    // 选择当前的是第几页
-    handleCurrentChange(val) {
-      this.redirect()
-    },
-    redirect() {
-      router.push({path: '/ClosedProject', query: { currentPage: this.currentPage, pageSize: this.pageSize }})
-    },
-    getClosedProjects() {
-      const that = this;
-      request({
-        url: 'project',
-        method: 'get',
-        params: {
-          pageCurrent: this.currentPage,
-          pageSize: this.pageSize,
-          paramMap: {
-            completed: true
-          }
-        }
-      }).then(response => {
-        if(response.data.code===200) {
-          //console.log(response.data.data.records)
-          that.total =  response.data.data.total
-          that.tableData = response.data.data.records
-        }
-      }).catch(function (error) {
-        console.log(error)
-      })
-    },
     priceFormatter(row, column) {
       return row[column.property]/10000 + '万';
     },

src/views/OngoingProject.vue

@@ -58,12 +58,14 @@
 <script setup>
 
 // table元素
-import {onMounted, ref} from "vue";
+import {getCurrentInstance, onMounted, ref, watch } from "vue";
+import { useRouter } from 'vue-router'
+import request from "../utils/request";
 
 const tableRef = ref(null);
 // table高度
 const tableHeight = ref();
-
+const { proxy, ctx } = getCurrentInstance()
 onMounted(() => {
   // 设置表格初始高度为innerHeight-offsetTop-表格底部与浏览器底部距离110
   tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 110;
@@ -71,13 +73,69 @@ onMounted(() => {
     tableHeight.value = window.innerHeight - tableRef.value.$el.offsetTop - 110;
   };
 });
+const router = useRouter()
+const tableData = ref([])
+const currentPage = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+const redirect = () => {
+  router.push({path: '/', query: {currentPage: currentPage.value, pageSize: pageSize.value}})
+}
+const getProjects = () => {
+  proxy.dialogFormVisible = false
+  const that = this;
+  request({
+    url: 'project',
+    method: 'get',
+    params: {
+      pageCurrent: currentPage.value,
+      pageSize: pageSize.value,
+      // sortBy: 'projectCreatedTime',
+      // asc: false,
+      paramMap: {
+        completed: false
+      }
+    }
+  }).then(response => {
+    if (response.data.code === 200) {
+      //console.log(response.data.data.records)
+      total.value = response.data.data.total
+      tableData.value = response.data.data.records
+    }
+  }).catch(function (error) {
+    console.log(error)
+  })
+}
+
+// 选择一页显示多少条数据
+const handleSizeChange = (val) => {
+  redirect()
+}
+// 选择当前的是第几页
+const handleCurrentChange = (val) => {
+  redirect()
+}
+
+watch(
+    () => router.currentRoute.value.query,
+    () => {
+      if (router.currentRoute.value.query.currentPage)
+        currentPage.value = parseInt(router.currentRoute.value.query.currentPage)
+      if (router.currentRoute.value.query.pageSize)
+        pageSize.value = parseInt(router.currentRoute.value.query.pageSize)
+
+      getProjects()
+    },
+    // 组件创建完后获取数据，
+    // 此时 data 已经被 observed 了
+    {immediate: true}
+)
 
 </script>
 <script>
-import router from "../router";
-import request from "../utils/request";
 import {ElMessage} from "element-plus";
 import CreateProjectDialog from "../components/CreateProjectDialog"
+import router from "../router";
 
 export default {
   name: "OngoingProject",
@@ -88,14 +146,8 @@ export default {
     return {
       dialogFormVisible: false,
 
-
-      total: 0,
-      currentPage: 1,
-      pageSize: 10,
-
       projectClasses: [],
       projectSubClasses: [],
-      tableData: [],
 
       staffId: Number
     }
@@ -103,24 +155,7 @@ export default {
   computed: {
 
   },
-  created() {
-    const that = this
-    // watch 路由的参数，以便再次获取数据
-    this.$watch(
-        () => that.$route.query,
-        () => {
-          if (that.$route.query.currentPage)
-            that.currentPage = parseInt(that.$route.query.currentPage)
-          if (that.$route.query.pageSize)
-            that.pageSize = parseInt(that.$route.query.pageSize)
 
-          that.getProjects()
-        },
-        // 组件创建完后获取数据，
-        // 此时 data 已经被 observed 了
-        {immediate: true}
-    )
-  },
   mounted() {
   },
   methods: {
@@ -134,14 +169,7 @@ export default {
       this.getProjectClass()
       this.dialogFormVisible = true
     },
-    // 选择一页显示多少条数据
+
-    handleSizeChange(val) {
-      this.redirect()
-    },
-    // 选择当前的是第几页
-    handleCurrentChange(val) {
-      this.redirect()
-    },
     onCloseProject(row) {
       request({
         url: 'project/complete',
@@ -162,32 +190,8 @@ export default {
         console.log(error)
       })
     },
-    redirect() {
+
-      router.push({path: '/', query: {currentPage: this.currentPage, pageSize: this.pageSize}})
+
-    },
-    getProjects() {
-      this.dialogFormVisible = false
-      const that = this;
-      request({
-        url: 'project',
-        method: 'get',
-        params: {
-          pageCurrent: this.currentPage,
-          pageSize: this.pageSize,
-          paramMap: {
-            completed: false
-          }
-        }
-      }).then(response => {
-        if (response.data.code === 200) {
-          //console.log(response.data.data.records)
-          that.total = response.data.data.total
-          that.tableData = response.data.data.records
-        }
-      }).catch(function (error) {
-        console.log(error)
-      })
-    },
     getProjectClass() {
       const that = this;
       request({