保存进度！

企业级管理系统/web/admin_system/src/views/info/StaffInfo.vue

@@ -3,7 +3,7 @@
  * @Author: Kane
  * @Date: 2023-01-12 14:43:46
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-26 01:25:42
+ * @LastEditTime: 2023-01-26 23:18:49
  * @FilePath: \admin_system\src\views\info\StaffInfo.vue
  * @Description: 
  * 
@@ -41,14 +41,12 @@
             </el-table-column>
         </el-table>
         <el-row :gutter="10" width="100%">
-            <el-col :span="18"></el-col>
+            <el-col :span="18">
-            <el-pagination class="pull_left" @current-change="onCurrentPageIndexChange"
+                <el-pagination class="pull_left" @current-change="onCurrentPageIndexChange"
-                @size-change="onTablePageSizeChange" size="small" background :current-page="this.table_current_page"
+                    @size-change="onTablePageSizeChange" size="small" background :current-page="this.table_current_page"
-                :page-size="10" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, nex, jumper"
+                    :page-size="10" :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, nex, jumper"
-                :total="table_data.length"></el-pagination>
+                    :total="table_data.length">
-            <el-col :span="6" class="pull_right">
+                </el-pagination>
-                <el-button type="primary">重置</el-button>
-                <el-button type="danger">批量删除</el-button>
             </el-col>
         </el-row>
     </div>

企业级管理系统/web/admin_system/src/views/requirement/RequirementManager.vue

@@ -2,7 +2,7 @@
  * @Author: Kane
  * @Date: 2023-01-25 23:13:47
  * @LastEditors: Kane
- * @LastEditTime: 2023-01-26 17:05:54
+ * @LastEditTime: 2023-01-27 00:26:34
  * @FilePath: \admin_system\src\views\requirement\RequirementManager.vue
  * @Description: 
  * 
@@ -57,44 +57,57 @@
 
         <div class="tool-button-wrapper">
             <el-row>
-                <el-col>
+                <el-col :span="4">
                     <el-button type="success" icon="DocumentAdd" plain>新增</el-button>
-                    <el-button type="warning" icon="edit" plain>修改</el-button>
+                    <el-button type="warning" icon="document" plain>导出</el-button>
-                    <el-button type="danger" icon="delete" plain>删除</el-button>
+                </el-col>
+                <el-col :span="20">
+                    <span>是否显示已完成需求:</span>
                 </el-col>
             </el-row>
         </div>
-        <el-table border stripe width="100%">
+        <el-table :data="tableData" border stripe style="width:100%;" :height="tableHeight">
             <el-table-column type="selection" align="center"></el-table-column>
-            <el-table-column label="需求编号" align="center">
+            <el-table-column label="需求编号" align="center" width="160">
                 <template #default="requirement">
-                    <span class="requirement-serial">{{ requirement.row.requirement_serial }}</span>
+                    <span class="requirement-serial">{{ requirement.row.serial_no }}</span>
                 </template>
             </el-table-column>
-            <el-table-column label="标题" align="center">
+            <el-table-column label="标题" prop="title" min-width="200" align="center">
                 <template #default="requirement">
                     <span class="requirement-title">{{ requirement.row.title }}</span>
                 </template>
             </el-table-column>
-            <el-table-column label="申请人" align="center"></el-table-column>
+            <el-table-column label="申请人" prop="request_people" align="center" width="100"></el-table-column>
-            <el-table-column label="状态" align="center"></el-table-column>
+            <el-table-column label="状态" prop="status" align="center" width="100"></el-table-column>
-            <el-table-column label="提交日期" align="center"></el-table-column>
+            <el-table-column label="提交日期" prop="submit_date" align="center" width="130"></el-table-column>
-            <el-table-column label="操作" align="center">
+            <el-table-column label="操作" align="center" fixed="right" width="200">
                 <template #default>
                     <el-button type="warning" icon="edit">编辑</el-button>
                     <el-button type="danger" icon="delete">删除</el-button>
                 </template>
             </el-table-column>
         </el-table>
+        <div class="pagination_wrapper">
+            <el-pagination class="pull_left" @current-change="onCurrentPageIndexChange"
+                @size-change="onTablePageSizeChange" size="small" background v-model="this.table_current_page"
+                :page-size="this.table_page_size" :page-sizes="[10, 20, 50, 100]"
+                layout="total, sizes, prev, pager, next, jumper" :total="requirement_data.length">
+            </el-pagination>
+        </div>
     </div>
 </template>
 
 <script>
+import { requirementTestData } from '@/test/data/TestData';
 export default {
     name: "requirement-manager",
     data()
     {
         return {
+            table_current_page: 1,
+            table_page_size: 10,
+            requirement_data: requirementTestData,
             query_param: {
                 requirement_serial: "",
                 request_people: "",
@@ -102,13 +115,35 @@ export default {
                 submit_end_date: "",
                 status: "",
             },
-            test_data: {
+
-                requirement_data: [
-                    {}
-                ]
-            }
         };
     },
+    computed: {
+        //计算表格的高度
+        tableHeight()
+        {
+            return 10 * 50 + 40;
+        },
+        tableData()
+        {
+            const startIndex = this.table_page_size * (this.table_current_page - 1);
+            const endIndex = (this.table_page_size * this.table_current_page);// < this.requirement_data.length ? (this.table_page_size * this.table_current_page) : this.requirement_data.length;
+
+            return this.requirement_data.slice(startIndex, endIndex);
+        },
+    },
+    methods: {
+        onTablePageSizeChange(pageSize)
+        {
+            console.log("选择的pageSize", pageSize);
+            this.table_page_size = pageSize;
+        },
+        //用户变更当前页时消息处理函数
+        onCurrentPageIndexChange(pageIndex)
+        {
+            this.table_current_page = pageIndex;
+        },
+    }
 };
 </script>
 
@@ -122,7 +157,7 @@ export default {
 
 
 
-span {
+.search-box span {
     font-weight: bold;
     display: block;
     text-align: right;
@@ -166,16 +201,27 @@ span {
 
 .tool-button-wrapper {
     padding-left: 15px;
+    width: 100%;
+    align-items: center;
 }
 
 /* 需求列表 */
 .requirement-title {
+    display: block;
     text-align: left;
     width: 100%;
+    font-size: 14px;
 }
 
 .requirement-serial {
     width: 100%;
+    text-align: center;
+    cursor: pointer;
+}
 
+.pagination_wrapper {
+    padding-right: 15px;
+    display: flex;
+    justify-content: right;
 }
 </style>