.common-container

src/components/common/commonTable.vue

@@ -522,7 +522,7 @@ const handleNextClick = (val) => {
 
 :deep(.el-table) {
   thead {
-    color: var(--el-table-header-text-color);
+    color: #000;
   }
   .el-table__cell {
     padding: 0;

src/data/https.js

@@ -50,7 +50,6 @@ export function $post ({ url, data = {}, callback }) {
         console.log(err);
         ElMessage.error(err.msg || "操作失败");
         if (err && err.response && err.response.status === 401) {
-            store.commit("clearUserInfo");
             router.replace("/login");
         }
     });

src/views/managePage/projectManage.vue

@@ -6,10 +6,30 @@
                 <el-button type="primary" @click="addProject">新增</el-button>
             </div>
         </div>
-        <div class="project-manage-content">
-            <div class="table-wrap">
+        <div class="project-manage-content" v-loading="loading">
+            <common-table
+                :tableHeight="tableHeight"
+                :data="tableData"
+                :columns="tableColumns"
+                :total="total"
+                :current-page="currentPage"
+                :page-size="pageSize"
+                :index="true"
+                :indexLabel="'序号'"
+                title=""
+                :border="true"
+                @size-change="handleSizeChange"
+                @current-page-change="handleCurrentPageChange"
+            >
+                <template #operations="{ row, index }">
+                    <el-button link type="primary" size="small" @click="previewProject(row)">查看</el-button>
+                    <el-button link type="primary" size="small" @click="editProject(row)">编辑</el-button>
+                    <el-button link type="danger" size="small" @click="deleteProject(row)">删除</el-button>
+                </template>
+            </common-table>
+            <!-- <div class="table-wrap">
                 <el-table :data="tableData" style="width: 100%"
-                    empty-text="暂无数据" height="100%"
+                    empty-text="暂无数据" height="100%" border
                 >
                     <el-table-column type="index" width="50" />
                     <el-table-column prop="projectName" label="项目名称" />
@@ -25,52 +45,100 @@
             </div>
             <div class="page-wrap">
                 <el-pagination background layout="prev, pager, next" :total="1000" />
-            </div>
+            </div> -->
         </div>
     </div>
 </template>
 
 <script setup>
-    import { reactive, ref, onMounted, getCurrentInstance } from "vue";
+    import { reactive, ref, onMounted, computed, getCurrentInstance } from "vue";
     import { useRouter } from "vue-router";
     import { useProjectStore } from "@/stores/project.js";
     import { ElMessage, ElMessageBox } from "element-plus";
+    import CommonTable from "@/components/common/commonTable.vue";
     const projectStore = useProjectStore();
     
     const router = useRouter();
     const { proxy } = getCurrentInstance();
 
-    const tableData = ref([]);
+    
+    // 计算表格高度
+    let tableData = ref([]);
+    const tableColumns = reactive([
+        {
+            prop: "projectName",
+            label: "项目名称",
+            showOverflowTooltip: true
+        },
+        {
+            prop: "projectCode",
+            label: "项目编号",
+            showOverflowTooltip: true
+        },
+        {
+            prop: "operations",
+            label: "操作",
+            width: 160,
+            slot: "operations",
+            fixed: "right",
+            align: "center",
+        }
+    ]);
+    const tableHeight = computed(() => {
+        const headerHeight = 50;
+        const rowHeight = 45;        
+        // 1.如果数据超过10条，固定显示10行的高度 + 滚动条；2.如果数据不超过10条，按实际行数计算高度
+        const maxRows = Math.min(tableData.value.length, 10);
+        const contentHeight = maxRows * rowHeight;
+        return `${headerHeight + contentHeight}px`;
+    });
+    let loading = ref(false);
+    let total = ref(0);
+    let currentPage = ref(1);
+    let pageSize = ref(10);
     const getProjectData = () => {
+        loading.value = true;
         proxy.$post({
-            url: "/api/project/listProject",
+            url: "/api/project/getOwnProjects",
             data: {
-                page: 1,
-                pagesize: 10,
+                page: currentPage.value,
+                pagesize: pageSize.value,
                 attributes: []
             },
             callback: (data) => {
                 tableData.value = data.rows;
+                total.value = data.count;
+                loading.value = false;
             }
         })
     };
+    // 分页
+    const handleSizeChange = (size) => {
+        pageSize.value = size;
+        currentPage.value = 1;
+        getProjectData();
+    }
+    const handleCurrentPageChange = (page) => {
+        currentPage.value = page;
+        getProjectData();
+    }
     const addProject = () => {
         router.push("/addProject");
     };
     const editProject = (item) => {
-        projectStore.setParams({
-            projectInfo: { ...item }
+        router.push({
+            name: "addProject",
+            query: {
+                projectId: item.id
+            }
         });
-        router.push("/addProject");
     };
     const previewProject = (item) => {
-        projectStore.setParams({
-            projectInfo: { ...item }
-        });
         router.push({
             name: "addProject",
             query: {
-                isPreview: true
+                isPreview: true,
+                projectId: item.id
             }
         })
     }
@@ -89,14 +157,11 @@
                     ElMessage.success("删除成功");
                     getProjectData();
                 }
-            }).catch(() => {})
             })
+        }).catch(() => {})
     }
     onMounted(() => {
         getProjectData();
-        projectStore.setParams({
-            projectInfo: undefined
-        });
     })
 </script>