实现项目列表排序

src/views/ClosedProject.vue

@@ -10,10 +10,11 @@
           ref="tableRef"
           class="projectTable"
           :height="tableHeight"
+          @sort-change="onSortChange"
           :data="tableData">
-        <el-table-column prop="projectName" label="项目名称" min-width="15%"/>
+        <el-table-column prop="projectName" label="项目名称" min-width="15%" sortable="custom"/>
-        <el-table-column prop="contractAmount" label="合同额" min-width="10%" :formatter="priceFormatter"/>
+        <el-table-column prop="contractAmount" label="合同额" min-width="10%" :formatter="priceFormatter" sortable="custom"/>
-        <el-table-column prop="projectImportance" label="重要程度" min-width="10%"/>
+        <el-table-column prop="projectImportance" label="重要程度" min-width="10%" sortable="custom"/>
         <el-table-column prop="projectClassName" label="项目分类" min-width="10%"/>
         <el-table-column prop="projectSubclassName" label="项目类型" min-width="10%"/>
         <el-table-column label="项目进度" min-width="35%" >
@@ -74,8 +75,33 @@ const getClosedProjects = () => {
     params: {
       pageCurrent: currentPage.value,
       pageSize: pageSize.value,
-      // sortBy: 'projectClosedDate',
+      sortBy: 'projectClosedDate',
-      // asc: false,
+      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 onSortChange = ( val) => {
+  console.log(val)
+  const that = this;
+  request({
+    url: 'project',
+    method: 'get',
+    params: {
+      pageCurrent: currentPage.value,
+      pageSize: pageSize.value,
+      sortBy: val.order?val.prop:'projectClosedDate',
+      asc: val.order==='ascending',
       paramMap: {
         completed: true
       }

src/views/Home.vue

@@ -5,7 +5,7 @@
       <el-menu
           router
           style="height: 100%"
-          default-active="1">
+          :default-active="menuDefaultActive">
         <div
             style="width: 100%;height: 60px;margin: 30px 0 20px 20px; display: flex; flex-direction: row; align-items: center">
           <svg-icon style="width: 52px;height: 52px;margin: 10px" icon-class="logo"></svg-icon>
@@ -55,6 +55,7 @@
 
 <script setup>
 import LogoutButton from "../components/LogoutButton";
+
 </script>
 <script>
 // @ is an alias to /src
@@ -68,10 +69,19 @@ export default {
   name: 'Home',
   components: {},
   data() {
-    return {}
+    return {
+      menuDefaultActive: 1,
+    }
   },
-  mounted() {
+  created() {
-
+    switch (this.$route.path.split('/').pop()) {
+      case 'closed':
+        this.menuDefaultActive = '2';
+        break
+      default:
+        this.menuDefaultActive = '1';
+        break
+    }
   },
   methods: {
     getStaffFullname() {

src/views/OngoingProject.vue

@@ -13,13 +13,14 @@
           ref="tableRef"
           class="projectTable"
           @row-click="onRowClick"
+          @sort-change="onSortChange"
           :height="tableHeight"
           :data="tableData">
-        <el-table-column prop="projectName" label="项目名称" min-width="15%"/>
+        <el-table-column prop="projectName" label="项目名称" min-width="15%" sortable="custom"/>
-        <el-table-column prop="contractAmount" label="合同额" min-width="10%" :formatter="priceFormatter"/>
+        <el-table-column prop="contractAmount" label="合同额" min-width="10%" :formatter="priceFormatter" sortable="custom"/>
-        <el-table-column prop="projectImportance" label="重要程度" min-width="10%"/>
+        <el-table-column prop="projectImportance" label="重要程度" min-width="10%" sortable="custom"/>
-        <el-table-column prop="projectClassName" label="项目分类" min-width="10%"/>
+        <el-table-column prop="projectClassName" label="项目分类" min-width="10%" />
-        <el-table-column prop="projectSubclassName" label="项目类型" min-width="10%"/>
+        <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"
@@ -90,8 +91,8 @@ const getProjects = () => {
     params: {
       pageCurrent: currentPage.value,
       pageSize: pageSize.value,
-      // sortBy: 'projectCreatedTime',
+      sortBy: 'projectCreatedTime',
-      // asc: false,
+      asc: false,
       paramMap: {
         completed: false
       }
@@ -107,6 +108,33 @@ const getProjects = () => {
   })
 }
 
+const onSortChange = ( val) => {
+  console.log(val)
+  const that = this;
+  request({
+    url: 'project',
+    method: 'get',
+    params: {
+      pageCurrent: currentPage.value,
+      pageSize: pageSize.value,
+      sortBy: val.order?val.prop:'projectCreatedTime',
+      asc: val.order==='ascending',
+      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()