manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/team/index.vue

<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item style="float:right;">
          <el-link type="primary" :underline="false" @click="openInsertDialog">添加人员</el-link>
        </el-form-item>
        <el-form-item style="float:right;">
          <el-upload
            ref="upload"
            action="#"
            :limit="1"
            :http-request="importUser"
            :show-file-list="false"
          >
            <el-link type="primary" :underline="false">批量导入</el-link>
          </el-upload>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table
      :data="list"
      highlight-current-row
      v-loading="listLoading"
      :height="tableHeight"
      style="width: 100%;"
    >
      <el-table-column type="index" width="60"></el-table-column>
      <el-table-column prop="name" label="姓名" sortable></el-table-column>
      <el-table-column prop="phone" label="手机"></el-table-column>
      <el-table-column label="角色">
        <template slot-scope="scope">
          {{scope.row.role == 0 ? "普通员工" :
          scope.row.role == 1 ? "负责人" : "管理员"}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="small"
            v-if="scope.row.role == 0 && user.role == 1"
            @click="switchRole(scope.$index)"
          >切换为管理员</el-button>
          <el-button
            size="small"
            v-if="scope.row.role == 2 && user.role == 1"
            @click="switchRole(scope.$index)"
          >切换为员工</el-button>
          <el-button size="small" type="danger" @click="deleteUser(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <!-- <el-col :span="24" class="toolbar">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[20 , 50 , 80 , 100]"
        :page-size="20"
        layout="total, sizes, prev, pager, next"
        :total="total"
        style="float:right;"
      ></el-pagination>
    </el-col>-->

    <!-- 新增单个人员的Dialog -->
    <el-dialog title="新增人员" :visible.sync="dialogVisible" width="400px">
      <el-form ref="form1" :model="insertForm" :rules="rules" label-width="60px">
        <el-form-item label="名字" prop="name">
          <el-input v-model="insertForm.name" placeholder="请输入姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model="insertForm.phone" placeholder="请输入电话" clearable></el-input>
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select v-model="insertForm.role" placeholder="请选择角色" style="width: 100%">
            <el-option label="普通员工" :value="0"></el-option>
            <el-option label="管理员" :value="2"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="submitInsert">提交</el-button>
      </span>
    </el-dialog>
  </section>
</template>

<script>
export default {
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem("user")),

      tableHeight: 0,
      listLoading: false,
      total: 0,
      page: 1,
      size: 20,
      list: [],
      dialogVisible: false,
      insertForm: {
        name: null,
        phone: null,
        role: null
      },
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phone: [{ required: true, message: "请输入电话", trigger: "blur" }],
        role: [{ required: true, message: "请选择角色", trigger: "blur" }]
      }
    };
  },
  methods: {
    //分页
    handleCurrentChange(val) {
      this.page = val;
      this.getUser();
    },

    handleSizeChange(val) {
      this.size = val;
      this.getUser();
    },

    //获取所有员工的列表
    getUser() {
      this.listLoading = true;
      this.http.post(
        this.port.manage.list,
        {},
        res => {
          this.listLoading = false;
          if (res.code == "ok") {
            this.list = res.data;
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.listLoading = false;
          this.$message({
            message: error,
            type: "error"
          });
        }
      );
    },

    //新增员工
    submitInsert() {
      this.$refs.form1.validate(valid => {
        if (valid) {
          this.listLoading = true;
          this.http.post(
            this.port.manage.insert,
            {
              name: this.insertForm.name,
              phone: this.insertForm.phone,
              role: this.insertForm.role
            },
            res => {
              this.listLoading = false;
              if (res.code == "ok") {
                this.dialogVisible = false;
                //重新读取列表
                this.getUser();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error"
                });
              }
            },
            error => {
              this.listLoading = false;
              this.$message({
                message: error,
                type: "error"
              });
            }
          );
        }
      });
    },

    //获取所有员工的列表
    importUser(item) {
      //首先判断文件类型
      let str = item.file.name.split(".");
      let format = str[str.length - 1];
      if (format != "xls" && format != "xlsx") {
        this.$message({
          message: "请选择.xls或.xlsx文件",
          type: "error"
        });
      } else {
        this.listLoading = true;
        let formData = new FormData();
        formData.append("file", item.file);
        this.http.uploadFile(
          this.port.manage.import,
          formData,
          res => {
            this.$refs.upload.clearFiles();
            this.listLoading = false;
            if (res.code == "ok") {
              //重新读取列表
              this.getUser();
            } else {
              this.$message({
                message: res.msg,
                type: "error"
              });
            }
          },
          error => {
            this.$refs.upload.clearFiles();
            this.listLoading = false;
            this.$message({
              message: error,
              type: "error"
            });
          }
        );
      }
    },

    //切换角色 0/2
    switchRole(index) {
      this.listLoading = true;
      this.http.post(
        this.port.manage.permission,
        { id: this.list[index].id },
        res => {
          this.listLoading = false;
          if (res.code == "ok") {
            this.$message({
              message: "切换角色成功",
              type: "success"
            });
            //重新读取列表
            this.getUser();
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.listLoading = false;
          this.$message({
            message: error,
            type: "error"
          });
        }
      );
    },

    //三天之内删了你 数据库都给你清了
    deleteUser(index) {
      this.$confirm(
        "确定要删除用户" + this.list[index].name + "吗?",
        "删除用户",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          this.listLoading = true;
          this.http.post(
            this.port.manage.delete,
            { userId: this.list[index].id },
            res => {
              this.listLoading = false;
              if (res.code == "ok") {
                this.$message({
                  message: "删除成功",
                  type: "success"
                });
                //重新读取列表
                this.getUser();
              } else {
                this.$message({
                  message: res.msg,
                  type: "error"
                });
              }
            },
            error => {
              this.listLoading = false;
              this.$message({
                message: error,
                type: "error"
              });
            }
          );
        })
        .catch(() => {});
    },

    //打开单独新增的Dialog
    openInsertDialog() {
      this.insertForm.name = null;
      this.insertForm.phone = null;
      this.insertForm.role = null;
      this.dialogVisible = true;
    }
  },

  created() {
    let height = window.innerHeight;
    this.tableHeight = height - 195;
    const that = this;
    window.onresize = function temp() {
      that.tableHeight = window.innerHeight - 195;
    };
  },
  mounted() {
    this.getUser();
  }
};
</script>

<style lang="scss" scoped>
.nowTime {
  height: 35px;
  line-height: 28px;
  font-size: 18px;
  color: #333;
  margin-left: 10px;
  i {
    margin-right: 10px;
  }
}
</style>