ihotel-manage/admin/src/views/staff/index.vue

<template>
  <div class="inform">
    <el-card class="box-card" style="width: 1612px; height: 950px">
      <div slot="header" class="clearfix">
        <div class="inform-title">员工管理</div>
      </div>
      <div class="inform-body">
        <div class="order-top">
          <div class="username-inquire">
            <el-input
              placeholder="请输入手机号码或员工姓名"
              style="width: 261px"
              v-model="value"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-button @click="inquire">查询</el-button>
          </div>
          <div class="export" @click="addStaff">添加员工</div>
          <el-dialog
            title="添加员工"
            :visible.sync="addStaffShow"
            :before-close="addClose"
          >
            <div class="info">
              <div class="user">
                <div class="name">员工姓名</div>
                <el-input v-model="staffValue"></el-input>
              </div>
              <div class="user">
                <div class="name">手机号码</div>
                <el-input v-model="phoneValue"></el-input>
              </div>
            </div>
            <div class="info">
              <div class="user">
                <div class="name">职位</div>
                <el-select v-model="position" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click.stop="addStaffShow = false" class="cancel"
                >取消</el-button
              >
              <el-button @click.stop="addSuccess">完成</el-button>
            </span>
          </el-dialog>
        </div>
        <div class="inform-table">
          <el-table
            :data="tableData"
            max-height="576"
            height="576"
            style="width: 1550px"
            stripe
            :cell-style="rowbg"
            :header-cell-style="{
              color: ' rgba(0, 0, 0, 1)',
              background: 'rgba(240, 243, 247, 1)',
            }"
          >
            <el-table-column
              prop="phone"
              width="300"
              label="手机号码"
              align="center"
            >
            </el-table-column>

            <el-table-column prop="username" align="center" label="员工姓名">
            </el-table-column>

            <el-table-column prop="position" align="center" label="职位">
            </el-table-column>
            <el-table-column prop="address" align="center" label="操作">
              <template slot-scope="scope">
                <span
                  @click="handleEdit(scope.$index, scope.row)"
                  class="operate"
                >
                  编辑
                </span>
                <el-dialog
                  title="编辑员工"
                  :visible.sync="editShow"
                  :before-close="editClose"
                >
                  <div class="info">
                    <div class="user">
                      <div class="name">员工姓名</div>
                      <el-input v-model="staffValue"></el-input>
                    </div>
                    <div class="user">
                      <div class="name">手机号码</div>
                      <el-input v-model="phoneValue"></el-input>
                    </div>
                  </div>
                  <div class="info">
                    <div class="user">
                      <div class="name">职位</div>
                      <el-select v-model="position" placeholder="请选择">
                        <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.label"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click.stop="editCancel()" class="cancel"
                      >取消</el-button
                    >
                    <el-button @click.stop="editSuccess()">完成</el-button>
                  </span>
                </el-dialog>

                <span
                  @click="handleDelete(scope.$index, scope.row)"
                  class="operate"
                >
                  删除
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            current-page.sync="1"
            :page-size="8"
            layout="prev, pager, next, jumper"
            :total="data.length"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import * as rsa from "@/utils/rsa";
export default {
  name: "Inform",
  data() {
    return {
      //总数据
      data: [],
      datas: [],

      // 当前页显示的数据
      tableData: [],
      options: [
        {
          value: "选项1",
          label: "歌星1",
        },
        {
          value: "选项2",
          label: "歌星2",
        },
        {
          value: "选项3",
          label: "歌星3",
        },
        {
          value: "选项4",
          label: "歌星4",
        },
        {
          value: "选项5",
          label: "歌星5",
        },
      ],
      currentPage: 1,
      state: "",
      value: "", //请输入手机号码或员工姓名

      // 添加员工
      staffValue: "",
      phoneValue: "", // 当前的号码
      position: "",
      phoneVal: "", // 修改前的号码
      dialogVisible: false,
      waterTable: [
        {
          start: 36,
          end: 36,
          flow: 20,
          pirce: 2.0,
          subsidy: 5,
          production: 2,
        },
      ],
      addStaffShow: false,
      editShow: false,
    };
  },
  mounted() {
    document.getElementsByClassName(
      "el-pagination__jump"
    )[0].childNodes[0].nodeValue = "跳转到";
    let cook = Cookies.get("cook");
    this.API.hotelStaff.hotelStaffList(cook).then((res) => {
      this.data = res.data.list;
      this.datas = JSON.parse(JSON.stringify(this.data));
      this.handleCurrentChange(this.currentPage);
    });
  },
  methods: {
    allRead($event, index) {
      this.className = this.className.map((item) => (item = ""));
      this.className[index] = "active";
    },
    rowbg(row) {
      if (row.rowIndex % 2 != 0) {
        return { background: "rgba(240, 243, 247, 1)", "border-radius": "5px" };
      }
    },

    handleCurrentChange(val) {
      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}`);
    },

    // 表格操作

    handleDelete(index, row) {
      this.$confirm("确认删除？")
        .then((res) => {
          if (res == "confirm") {
            this.data = this.data.filter((item) => {
              return item.phone !== row.phone && item.username !== row.username;
            });
            this.datas = this.datas.filter((item) => {
              return item.phone !== row.phone && item.username !== row.username;
            });
          }
          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.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.username.includes(this.value)
          ) {
            this.data.push(item);
          }
        });
      }
      this.currentPage = 1;
      this.handleCurrentChange(this.currentPage);
    },

    // 添加员工
    addStaff() {
      this.addStaffShow = true;
    },
    addClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    addSuccess() {
      let reg_tel =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (reg_tel.test(this.phoneValue)) {
        // console.log("电话号码符合要求");
        let RepeatNumber = this.datas.some((item) => {
          return item.phone == this.phoneValue;
        });
        if (RepeatNumber) {
          this.$message({
            message: "当前电话号码已存在,请换个号码输入",
            type: "error",
          });
        } else if (this.staffValue.trim() == "") {
          this.$message({ message: "输入的姓名不能为空", type: "error" });
        } else if (this.position == "") {
          this.$message({ message: "职位不能为空", type: "error" });
        } else {
          let arr = {
            phone: this.phoneValue,
            username: this.staffValue,
            position: this.position,
            cardNumber: "1nqc87",
            password: rsa.RSAencrypt("abc1234"),
            statu: "1",
          };
          // console.log(this.position);
          this.API.hotelStaff.hotelStaffAdd(arr);
          this.data = this.datas;
          this.currentPage = Math.ceil(this.data.length / 8);
          this.handleCurrentChange(this.currentPage);
          this.addStaffShow = false;
          this.phoneValue = "";
          this.staffValue = "";
          this.position = "";
        }
      } else {
        this.$message({ message: "请输入正确的电话号码", type: "error" });
      }
    },

    // 编辑员工
    editClose() {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.editShow = false;
          this.phoneValue = "";
          this.staffValue = "";
          this.position = "";
        })
        .catch((_) => {});
    },
    editCancel() {
      this.editShow = false;
      this.phoneValue = "";
      this.staffValue = "";
      this.position = "";
    },
    handleEdit(index, row) {
      // console.log(row);
      this.editShow = true;
      this.phoneValue = row.phone;
      this.phoneVal = row.phone;
      this.staffValue = row.username;
      this.position = row.position;
    },
    editSuccess() {
      let reg_tel =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

      let arrEdit = this.datas.filter((item) => {
        return item.phone != this.phoneVal;
      });
      let editIndex = this.datas.findIndex((item) => {
        return item.phone == this.phoneVal;
      });
      let RepeatNumber = arrEdit.some((item) => {
        return item.phone == this.phoneValue;
      });

      if (RepeatNumber) {
        this.$message({
          message: "当前电话号码已存在,请换个号码输入",
          type: "error",
        });
      } else if (this.staffValue.trim() == "") {
        this.$message({ message: "输入的姓名不能为空", type: "error" });
      } else if (this.position == "") {
        this.$message({ message: "职位不能为空", type: "error" });
      } else {
        if (reg_tel.test(this.phoneValue)) {
          // console.log("电话号码符合要求");
          let arr = {
            phone: this.phoneValue,
            username: this.staffValue,
            position: this.position,
          };
          this.datas[editIndex] = arr;
          this.data = this.datas;
          this.handleCurrentChange(this.currentPage);
          this.editShow = false;
          this.phoneValue = "";
          this.staffValue = "";
          this.position = "";
        } else {
          this.$message({ message: "请输入正确的电话号码", type: "error" });
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.inform /deep/ .el-card {
  width: 1612px;
  height: 950px;
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
  border-radius: 8px;
  .clearfix {
    height: 96px;
    width: 100%;
    border-bottom: 1px solid rgba(204, 204, 204, 1);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .inform-title {
      width: 96px;
      height: 36px;
      color: rgba(0, 0, 0, 1);
      font-size: 24px;
      font-weight: 500;
      margin-left: 33px;
    }
    .inform-header {
      display: flex;
      margin-right: 29px;
      .el-button {
        margin-left: 9px;
        background-color: rgba(41, 109, 227, 1);
      }
    }
  }
  .inform-body {
    .order-top {
      display: flex;
      align-items: center;
      padding: 33px 29px 34px 33px;
      font-size: 16px;
      justify-content: space-between;
      font-weight: 400;
      color: #000;

      .el-button {
        background-color: rgba(41, 109, 227, 1);
        color: #fff;
        margin-left: 9px;
      }

      .state {
        margin-left: 30px;
      }
      .export {
        width: 94px;
        height: 32px;
        opacity: 1;
        color: #fff;
        text-align: center;
        line-height: 32px;
        background: rgba(41, 109, 227, 1);
        cursor: pointer;
        border-radius: 3px;
      }
      .el-dialog__wrapper {
        .el-dialog {
          width: 555px !important;
          height: 377px !important;
          margin-top: 352px !important;
          .el-dialog__header {
            height: 80px;
            padding: 0;
            display: flex;
            align-items: center;
            border-bottom: 1px solid rgba(230, 230, 230, 1);
            .el-dialog__title {
              font-size: 20px;
              font-weight: 500;
              padding-left: 30px;
              color: rgba(0, 0, 0, 1);
            }
            .el-dialog__headerbtn {
              width: 35px;
              height: 35px;
              .el-dialog__close {
                font-size: 28px;
                font-weight: 500;
                color: #000;
              }
            }
          }
          .el-dialog__body {
            padding: 0 30px;
            .info {
              display: flex;
              .user {
                .name {
                  text-align: left;
                  padding: 12px 0;
                }
                .el-input {
                  width: 205px;
                  height: 38px;
                  opacity: 1;
                  margin-right: 81px;
                  .el-input__inner {
                    color: #000;
                  }
                }
              }
            }
          }
          .el-dialog__footer {
            padding: 52px 30px 0 0;
            .el-button {
              width: 67px;
              height: 37px;
              padding: 0;
            }
            .cancel {
              background-color: #fff;
              color: rgba(56, 56, 56, 1);
            }
          }
        }
      }
    }
    .inform-table {
      .el-table {
        font-weight: 400;
        font-size: 16px;
        color: rgba(0, 0, 0, 1);
        margin: 0 auto;
        .el-table__header-wrapper {
          border-radius: 5px;
        }
        tr {
          height: 64px;
          td {
            .cell {
              .operate {
                color: rgba(41, 109, 227, 1);
                cursor: pointer;
                font-size: 16px;
                font-weight: 400;
                padding: 0 5px;
              }
              .el-dialog__wrapper {
                overflow: hidden;
                .el-dialog {
                  width: 555px !important;
                  height: 377px !important;
                  margin-top: 352px !important;
                  opacity: 1;
                  background: rgba(255, 255, 255, 1);
                  box-shadow: none;
                  .el-dialog__header {
                    height: 83px;
                    border-bottom: 1px solid rgba(230, 230, 230, 1);
                    .el-dialog__headerbtn {
                      top: 29px;
                    }
                    span {
                      float: left;
                      font-size: 20px;
                      font-weight: 500;
                      color: #000;
                    }

                    .el-dialog__close {
                      width: 35px;
                      height: 35px;
                      &::before {
                        font-size: 24px;
                        color: #000;
                      }
                    }
                  }
                  .el-dialog__body {
                    padding: 0 38px;
                    .userinfo {
                      font-size: 20px;
                      font-weight: 500;
                      color: rgba(0, 0, 0, 1);
                      text-align: left;
                      margin-top: 15px;
                    }
                    .info {
                      display: flex;
                      .user {
                        .name {
                          text-align: left;
                          padding: 12px 0;
                        }
                        .el-input {
                          width: 205px;
                          height: 38px;
                          opacity: 1;
                          margin-right: 81px;
                          .el-input__inner {
                            color: #000;
                          }
                        }
                      }
                    }
                    .rate {
                      font-size: 20px;
                      font-weight: 500;
                      color: rgba(0, 0, 0, 1);
                      text-align: left;
                      margin: 15px 0;
                    }
                    .water {
                      text-align: left;
                      font-size: 16px;
                      font-weight: 400;
                      color: rgba(0, 0, 0, 1);
                    }
                    .el-table {
                      margin: 10px 0;
                      tr {
                        height: 48px;
                      }
                      .el-table__body-wrapper {
                        overflow: visible;
                      }
                    }
                  }
                  .el-dialog__footer {
                    padding: 52px 30px 0 0;
                    .el-button {
                      width: 67px;
                      height: 37px;
                      padding: 0;
                      color: #fff;
                      background-color: rgba(41, 109, 227, 1);
                    }
                    .cancel {
                      background-color: #fff;
                      color: rgba(56, 56, 56, 1);
                    }
                  }
                }
              }

              .el-dialog__title {
                color: rgba(41, 109, 227, 1);
                cursor: pointer;
                padding: 10px 18px 0 18px;
              }
            }
          }
          .el-checkbox__inner {
            width: 18px;
            height: 18px;
            &::after {
              transform: rotate(45deg) scaleY(1.5);
              top: 3px;
              left: 5px;
            }
          }
        }
        th {
          font-weight: 400;
        }
      }
    }
    .block {
      height: 36px;
      margin: 66px 29px 0 0;
      float: right;
      .el-pagination {
        padding: 0;
        button {
          width: 36px;
          background: #fff;
          color: rgba(0, 0, 0, 1);
          height: 36px;
          font-size: 14px;
          border: 1px solid rgba(112, 112, 112, 1);
          border-radius: 8px;
        }
        ul {
          .active {
            background: #fff;
            color: rgba(0, 97, 255, 1);
            border: 1px solid rgba(0, 97, 255, 1);
            box-sizing: border-box;
          }
          .el-icon {
            border: none;
          }
          li {
            background: #fff;
            color: rgba(0, 0, 0, 1);
            width: 36px;
            height: 36px;
            font-size: 14px;
            border: 1px solid rgba(112, 112, 112, 1);
            border-radius: 8px;
            line-height: 36px;
          }
        }
        .el-pagination__jump {
          color: rgba(0, 0, 0, 1);
          font-size: 16px;
          margin-left: 10px;
          font-weight: 400;
          height: 36px;
          .el-input {
            width: 65px;
            height: 36px;
            margin: 0 10px;
            input {
              width: 65px;
              height: 36px;
              border: 1px solid rgba(0, 0, 0, 1);
              border-radius: 8px;
            }
          }
        }
      }
    }
  }
}
.box-card {
  /deep/ .el-card__header {
    padding: 0;
  }
  /deep/ .el-card__body {
    padding: 0;
  }
}
</style>
<style lang="scss">
.el-message-box__wrapper {
  .el-button--primary {
    background-color: #296de3 !important;
  }
}
</style>