From 19868081a4c89d2a755b50cc7a2e9753a93bd4c6 Mon Sep 17 00:00:00 2001
From: “dzb” <2632970487@qq.com>
Date: 星期二, 20 九月 2022 15:16:02 +0800
Subject: [PATCH] 新增新建部门管理界面

---
 src/views/systemSetting/baseSetting/user/index.vue |   89 +++++++++++++++++++++++++++++++++++++++++---
 1 files changed, 82 insertions(+), 7 deletions(-)

diff --git a/src/views/systemSetting/baseSetting/user/index.vue b/src/views/systemSetting/baseSetting/user/index.vue
index bca2c09..86099fd 100644
--- a/src/views/systemSetting/baseSetting/user/index.vue
+++ b/src/views/systemSetting/baseSetting/user/index.vue
@@ -4,14 +4,14 @@
             <div class="headerContent">
                 <div class="search">
                     <span>绛涢�夋潯浠�:</span>
-                    <el-input placeholder="璇疯緭鍏ュ唴瀹�"></el-input>
+                    <el-input placeholder="璇疯緭鍏ュ唴瀹�" v-model="search"></el-input>
                     <div class="findBtn">
-                        <el-button type="primary">鏌ヨ</el-button>
+                        <el-button type="primary" @click="getUserList">鏌ヨ</el-button>
                     </div>
                 </div>
                 <div class="addUser">
                     <el-button class="addBtn" type="primary" @click="dialogCreate = true">娣诲姞鐢ㄦ埛</el-button>
-                    <el-dialog :visible.sync="dialogCreate" width="45%">
+                    <el-dialog :visible.sync="dialogCreate" width="45%" destroy-on-close>
                         <createUser :refresh="getUserList" />
                     </el-dialog>
                 </div>
@@ -19,6 +19,7 @@
         </header>
         <main>
             <div class="mainContent">
+                <!-- 鏁版嵁灞曠ず -->
                 <el-table ref="multipleTable"
                     :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}"
                     :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
@@ -61,9 +62,17 @@
                         </template>
                     </el-table-column>
                 </el-table>
-                <el-dialog :visible.sync="dialogUpdate" width="45%">
+                <!-- 鏌ョ湅淇敼椤甸潰 -->
+                <el-dialog :visible.sync="dialogUpdate" width="45%" destroy-on-close>
                     <updateUser :updateFlag="updateFlag" :userInfo=userInfo />
                 </el-dialog>
+                <!-- 鍒嗛〉 -->
+                <div class="pagination">
+                    <el-pagination background :current-page="currentPage" layout="prev, pager, next" :total="totalNum"
+                        :page-size="pageSize" @current-change="changeCurrentPage" @prev-click="handlePrev"
+                        @next-click="handleNext">
+                    </el-pagination>
+                </div>
             </div>
         </main>
     </div>
@@ -79,10 +88,14 @@
     data() {
         return {
             tableData: [],
+            search: "",
             dialogCreate: false,
             dialogUpdate: false,
             updateFlag: false,
             userInfo: '',
+            totalNum: 200,
+            pageSize: 10,
+            currentPage: 1,
         }
     },
     created() {
@@ -107,14 +120,16 @@
         // 鑾峰彇鐢ㄦ埛鍒楄〃
         getUserList() {
             const that = this;
+            const {currentPage,pageSize,search} = this;
             this.dialogCreate = false;
-            // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�
-            this.$axios.get('sccg/admin/list').then(res => {
+            // 鑾峰彇鎵�鏈夌敤鎴蜂俊鎭�佺敤鎴锋煡璇�(鏆傛椂鏀寔鐢佃瘽鍙风爜)
+            this.$axios.get(`sccg/admin/list?mobile=${search}&current=${currentPage}&pageSize=${pageSize}`).then(res => {
                 if (res.code === 200) {
                     res.data.records.forEach(item => {
                         item.createTime = helper(item.createTime);
                         item.status == 1 ? item.status = true : item.status = false;
                     })
+                    that.totalNum = res.data.pages*pageSize;
                     that.tableData = res.data.records;
                 }
             })
@@ -139,7 +154,46 @@
             this.dialogUpdate = true;
             this.updateFlag = true;
             this.userInfo = rowData
-        }
+        },
+        // 褰撳墠椤垫敼鍙樿Е鍙戜簨浠�
+        changeCurrentPage(page) {
+            this.currentPage = page;
+            this.getUserList();
+        },
+        // 涓婁竴椤电偣鍑讳簨浠�
+        handlePrev(page) {
+            this.currentPage = page;
+            this.getUserList();
+        },
+        // 涓嬩竴椤电偣鍑讳簨浠�
+        handleNext(page) {
+            this.currentPage = page;
+            this.getUserList();
+        },
+        // 鐢ㄦ埛鏌ヨ(鏆傛椂鏀寔鐢佃瘽鍙风爜)
+        // handlePhone() {
+        //     const { search, getUserList } = this;
+        //     if (search == '') {
+        //         getUserList();
+        //         return;
+        //     }
+        //     this.handlePhoneSearch(search);
+        // },
+        // handlePhoneSearch(search){
+        //     this.dialogCreate = false;
+        //     const that = this;
+        //     // 鑾峰彇鎵嬫満鍙风敤鎴蜂俊鎭�
+        //     this.$axios.get(`sccg/admin/list?mobile=${search}`).then(res => {
+        //         if (res.code === 200) {
+        //             res.data.records.forEach(item => {
+        //                 item.createTime = helper(item.createTime);
+        //                 item.status == 1 ? item.status = true : item.status = false;
+        //             })
+        //             that.totalNum = res.data.records.length;
+        //             that.tableData = res.data.records.slice((that.currentPage - 1) * that.pageSize, that.currentPage * that.pageSize)
+        //         }
+        //     })
+        // }
     }
 }
 </script>
@@ -212,10 +266,31 @@
             line-height: 60px;
         }
 
+        .pagination {
+            margin-top: 50px;
+            display: flex;
+            line-height: 50px;
+            justify-content: center;
+
+            &::v-deep li,
+            &::v-deep .btn-prev,
+            &::v-deep .btn-next {
+                background-color: #071f39;
+                color: #4b9bb7;
+            }
+        }
         .el-table {
             color: #4b9bb7;
             font-size: 10px;
 
+            &::v-deep .el-table__empty-block {
+                background-color: #09152f;
+            }
+
+            &::v-deep .el-table__empty-block {
+                color: #4b9bb7;
+            }
+
             .operation {
                 display: flex;
 

--
Gitblit v1.8.0