员工管理页面的查询按钮和删除功能联动

admin/src/views/home/index.vue

@@ -958,7 +958,7 @@ export default {
 }
 .el-message-box__wrapper {
   .el-button--primary {
-    background-color: rgba(41, 109, 227, 1);
+    background-color: #296de3;
   }
 }
 </style>

admin/src/views/order/index.vue

@@ -325,6 +325,7 @@
             @current-change="handleCurrentChange"
             current-page.sync="1"
             :page-size="8"
+            :current-page="currentPage"
             layout="prev, pager, next, jumper"
             :total="tableData.length"
           >
@@ -340,7 +341,10 @@ export default {
   name: "Inform",
   data() {
     return {
+      // 显示的数据
       data: [],
+
+      // 总数据
       tableData: [
         {
           orderNum: "116161656",
@@ -355,7 +359,7 @@ export default {
         },
         {
           orderNum: "116161656",
-          state: "已入住",
+          state: "入住",
           room: "17栋1单元2层04房",
           electricity: "2.09",
           water: "0.00",
@@ -366,7 +370,7 @@ export default {
         },
         {
           orderNum: "116161656",
-          state: "已入住",
+          state: "已入",
           room: "17栋1单元2层04房",
           electricity: "2.09",
           water: "0.00",
@@ -377,7 +381,7 @@ export default {
         },
         {
           orderNum: "116161656",
-          state: "已入住",
+          state: "已住",
           room: "17栋1单元2层04房",
           electricity: "2.09",
           water: "0.00",
@@ -432,7 +436,7 @@ export default {
         },
         {
           orderNum: "116161656",
-          state: "已入住",
+          state: "入",
           room: "17栋1单元2层04房",
           electricity: "2.09",
           water: "0.00",
@@ -443,7 +447,7 @@ export default {
         },
         {
           orderNum: "116161656",
-          state: "已入住",
+          state: "住",
           room: "17栋1单元2层04房",
           electricity: "2.09",
           water: "0.00",
@@ -492,13 +496,14 @@ export default {
           production: 2,
         },
       ],
+      currentPage: 1,
     };
   },
   mounted() {
     document.getElementsByClassName(
       "el-pagination__jump"
     )[0].childNodes[0].nodeValue = "跳转到";
-    this.handleCurrentChange(1);
+    this.handleCurrentChange(this.currentPage);
   },
   methods: {
     allRead($event, index) {
@@ -512,7 +517,13 @@ export default {
     },
 
     handleCurrentChange(val) {
-      this.data = this.tableData.slice((val - 1) * 8, val * 8);
+      this.currentPage = val;
+      if (this.tableData.length >= 8) {
+        this.data = this.tableData.slice((val - 1) * 8, val * 8);
+      } else {
+        this.data = this.tableData;
+      }
+
       // console.log(`当前页: ${val}`);
     },
 
@@ -523,7 +534,21 @@ export default {
     },
 
     handleDelete(index, row) {
-      console.log(index, row);
+      // console.log(index, row);
+      this.$confirm("确认删除？")
+        .then((res) => {
+          if (res == "confirm") {
+            this.tableData.splice((this.currentPage - 1) * 8 + index, 1);
+          }
+          console.log(this.currentPage);
+          if (this.data.length <= 1) {
+            this.currentPage = this.currentPage - 1;
+          }
+          this.handleCurrentChange(this.currentPage);
+        })
+        .catch((res) => {
+          console.log(res);
+        });
     },
     handleClose(done) {
       this.dialogVisible = false;
@@ -795,4 +820,11 @@ export default {
     padding: 0;
   }
 }
-</style>>
+</style>
+<style lang="scss">
+.el-message-box__wrapper {
+  .el-button--primary {
+    background-color: #296de3;
+  }
+}
+</style>

admin/src/views/staff/index.vue

@@ -25,22 +25,22 @@
             <div class="info">
               <div class="user">
                 <div class="name">员工姓名</div>
-                <el-input value="刘老师"></el-input>
+                <el-input v-model="staffValue"></el-input>
               </div>
               <div class="user">
                 <div class="name">手机号码</div>
-                <el-input value="13234564"></el-input>
+                <el-input v-model="phoneValue"></el-input>
               </div>
             </div>
             <div class="info">
               <div class="user">
                 <div class="name">职位</div>
-                <el-select v-model="value" placeholder="请选择">
+                <el-select v-model="positionValue" placeholder="请选择">
                   <el-option
                     v-for="item in options"
                     :key="item.value"
                     :label="item.label"
-                    :value="item.value"
+                    :value="item.label"
                   >
                   </el-option>
                 </el-select>
@@ -50,13 +50,13 @@
               <el-button @click.stop="addStaffShow = false" class="cancel"
                 >取消</el-button
               >
-              <el-button @click.stop="addStaffShow = false">完成</el-button>
+              <el-button @click.stop="addSuccess">完成</el-button>
             </span>
           </el-dialog>
         </div>
         <div class="inform-table">
           <el-table
-            :data="data"
+            :data="tableData"
             max-height="576"
             height="576"
             style="width: 1550px"
@@ -264,10 +264,11 @@
           <el-pagination
             background
             @current-change="handleCurrentChange"
+            :current-page="currentPage"
             current-page.sync="1"
             :page-size="8"
             layout="prev, pager, next, jumper"
-            :total="tableData.length"
+            :total="data.length"
           >
           </el-pagination>
         </div>
@@ -281,9 +282,8 @@ export default {
   name: "Inform",
   data() {
     return {
-      data: [],
       //总数据
-      tableData: [
+      data: [
         {
           phone: 13611110232,
           staff: "刘德华",
@@ -326,21 +326,69 @@ export default {
         },
         {
           phone: 13605656232,
-          staff: "刘德华",
+          staff: "刘",
           position: "歌星",
         },
         {
           phone: 13464520232,
-          staff: "刘德华",
+          staff: "德",
           position: "歌星",
         },
         {
           phone: 1365650232,
-          staff: "刘德华",
+          staff: "华",
+          position: "歌星",
+        },
+        {
+          phone: 13605656232,
+          staff: "刘",
+          position: "歌星",
+        },
+        {
+          phone: 13464520232,
+          staff: "德",
+          position: "歌星",
+        },
+        {
+          phone: 1365650232,
+          staff: "华",
+          position: "歌星",
+        },
+        {
+          phone: 13605656232,
+          staff: "刘",
+          position: "歌星",
+        },
+        {
+          phone: 13464520232,
+          staff: "德",
+          position: "歌星",
+        },
+        {
+          phone: 1365650232,
+          staff: "华",
+          position: "歌星",
+        },
+        {
+          phone: 13605656232,
+          staff: "刘",
+          position: "歌星",
+        },
+        {
+          phone: 13464520232,
+          staff: "德",
+          position: "歌星",
+        },
+        {
+          phone: 1365650232,
+          staff: "华",
           position: "歌星",
         },
       ],
-      Tdata: [],
+      datas: [],
+
+      // 当前页显示的数据
+      tableData: [],
       options: [
         {
           value: "选项1",
@@ -363,11 +411,15 @@ export default {
           label: "已入住",
         },
       ],
-
+      currentPage: 1,
       state: "",
       value: "", //请输入手机号码或员工姓名
-      value1: "",
-      value2: "",
+
+      // 添加员工
+      staffValue: "",
+      phoneValue: "",
+      positionValue: [],
+
       dialogVisible: false,
       waterTable: [
         {
@@ -386,8 +438,8 @@ export default {
     document.getElementsByClassName(
       "el-pagination__jump"
     )[0].childNodes[0].nodeValue = "跳转到";
-    this.handleCurrentChange(1);
-    this.Tdata = this.tableData;
+    this.handleCurrentChange(this.currentPage);
+    this.datas = JSON.parse(JSON.stringify(this.data));
   },
   methods: {
     allRead($event, index) {
@@ -401,38 +453,63 @@ export default {
     },
 
     handleCurrentChange(val) {
-      this.data = this.tableData.slice((val - 1) * 8, val * 8);
+      if (this.data.length >= 8) {
+        this.tableData = this.data.slice((val - 1) * 8, val * 8);
+      } else {
+        this.tableData = this.data;
+      }
+      this.currentPage = val;
       // console.log(`当前页: ${val}`);
     },
 
     // 表格操作
     handleEdit(index, row) {
-      console.log(index, row);
       this.dialogVisible = true;
     },
 
     handleDelete(index, row) {
-      console.log(index, row);
+      this.$confirm("确认删除？")
+        .then((res) => {
+          if (res == "confirm") {
+            this.data = this.data.filter((item) => {
+              return item.phone !== row.phone && item.staff !== row.staff;
+            });
+            this.datas = this.datas.filter((item) => {
+              return item.phone !== row.phone && item.staff !== row.staff;
+            });
+          }
+          if (this.tableData.length <= 1) {
+            if (this.currentPage == 1) {
+              this.currentPage = 1;
+            } else {
+              this.currentPage = this.currentPage - 1;
+            }
+          }
+          this.handleCurrentChange(this.currentPage);
+        })
+        .catch((_) => {});
+      console.log(this.datas);
     },
     handleClose(done) {
       this.dialogVisible = false;
     },
 
+    // 查询
     inquire() {
-      this.tableData = this.Tdata;
-      let data = [];
-      this.tableData.filter((item) => {
-        if (
-          item.phone.toString().includes(this.value) ||
-          item.staff.includes(this.value)
-        ) {
-          data.push(item);
-          this.tableData = data;
-        }
-      });
-      if (this.value == "") {
-        this.tableData = this.Tdata;
+      this.data = [];
+      if (this.value === "") {
+        this.data = JSON.parse(JSON.stringify(this.datas));
+      } else {
+        this.datas.forEach((item, index) => {
+          if (
+            item.phone.toString().includes(this.value) ||
+            item.staff.includes(this.value)
+          ) {
+            this.data.push(item);
+          }
+        });
       }
+      this.handleCurrentChange(this.currentPage);
     },
 
     // 添加员工
@@ -446,6 +523,18 @@ export default {
         })
         .catch((_) => {});
     },
+    addSuccess() {
+      let arr = {
+        phone: this.phoneValue,
+        staff: this.staffValue,
+        position: this.positionValue,
+      };
+      this.datas.push(arr);
+      this.data = this.datas;
+      this.currentPage = Math.ceil(this.data.length / 8);
+      this.handleCurrentChange(this.currentPage);
+      this.addStaffShow = false;
+    },
   },
 };
 </script>
@@ -485,7 +574,7 @@ export default {
     .order-top {
       display: flex;
       align-items: center;
-      padding: 30px 29px 27px 33px;
+      padding: 33px 29px 34px 33px;
       font-size: 16px;
       justify-content: space-between;
       font-weight: 400;
@@ -762,4 +851,11 @@ export default {
     padding: 0;
   }
 }
-</style>>
+</style>
+<style lang="scss">
+.el-message-box__wrapper {
+  .el-button--primary {
+    background-color: #296de3;
+  }
+}
+</style>