monitor-admin-element/src/views/staff/staff-list/index.vue

<template>
  <div class="staff-list-container">
    <!--  顶部搜索  -->
    <div class="header">
      <el-input
        v-model="content"
        placeholder="搜索姓名"
        clearable
        @input="handleInputSearch"
        @clear="clearContent"
      />
      <el-button class="search" @click="searchServer(content)">搜索</el-button>
      <el-button type="primary" class="add" @click="dialogFormVisible = true"> 新增员工</el-button>
    </div>

    <!-- 表格数据展示区 -->
    <el-table
      ref="multipleTable"
      :data="list"
      tooltip-effect="dark"
      :header-cell-style="{background:'#fafafa',color:'#000', fontWeight: 700, borderTop: '1px solid #ebeef5'}"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        type="index"
        label="编号"
        width="50"
      />
      <el-table-column
        label="姓名"
        prop="username"
      />
      <el-table-column
        label="职位"
        prop="positionName"
      />
      <el-table-column
        label="联系电话"
        prop="telephone"
      />
      <el-table-column
        label="入职时间"
        prop="entryTime"
      >
        <template #default="scope">
          {{ scope.row.entryTime | timeFormat('YYYY-MM-DD') }}
        </template>
      </el-table-column>
      <el-table-column
        label="在职状态"
        prop="status"
      >
        <template #default="scope">
          <el-tag v-if="scope.row.status === 1" type="primary">在职</el-tag>
          <el-tag v-if="scope.row.status === 2" type="danger">离职</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="200"
        align="center"
      >
        <template #default="scope">
          <el-button type="text" :style="{color: '#1990FF'}" @click="showUpdate(scope.row)">编辑</el-button>
          <el-divider direction="vertical" />  <!-- 中间的小竖线 -->
          <el-button type="text" :style="{color: '#E51C23'}" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--  分页模块  -->
    <pagination
      v-show="totalpages>0"
      :total="totalrecords"
      :page.sync="currentPage"
      layout="total, prev, pager, next, jumper"
      @pagination="handlePaginate"
    />

    <!--  添加服务器信息dialog  -->
    <el-dialog
      :visible.sync="dialogFormVisible"
      width="600px"
      :close-on-click-modal="false"
      @close="close('addStaffForm')"
    >
      <el-form ref="addStaffForm" :model="userFormData" label-width="140px" :rules="rules" label-position="right">
        <el-form-item label="姓名" prop="username">
          <el-input v-model="userFormData.username" />
        </el-form-item>
        <el-form-item label="联系方式" prop="telephone">
          <el-input v-model="userFormData.telephone" />
        </el-form-item>
        <el-form-item label="登录名" prop="account">
          <el-input v-model="userFormData.account" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="userFormData.password" />
        </el-form-item>
        <el-form-item label="职位" prop="positionId">
          <el-select v-model.number="userFormData.positionId" clearable placeholder="请选择职位" style="width: 320px">
            <el-option
              v-for="item in staffList"
              :key="item.id"
              :label="item.positionName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="入职时间" prop="entryTime">
          <el-date-picker
            v-model="userFormData.entryTime"
            type="datetime"
            placeholder="选择入职时间"
          />
        </el-form-item>
        <el-form-item label="在职状态" prop="status">
          <el-select v-model.number="userFormData.status" clearable placeholder="请选择在职状态" style="width: 320px">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="userFormData.remark" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button @click="close('addStaffForm')">取 消</el-button>
          <el-button type="primary" @click="submitForm('addStaffForm')">确 认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getStaffList, addStaff, delStaff, updateStaff, getAllUserPosition } from '@/api/staff'
import Pagination from '@/components/Pagination/index'

export default {
  name: 'StaffList',
  components: {
    Pagination
  },
  data() {
    return {
      // 搜索关键词
      content: '',
      // 服务器列表数据
      list: [],
      // 总条数
      totalrecords: 0,
      // 是否是新增
      isAdd: true,
      // 当前页
      currentPage: 1,
      // 总页数
      totalpages: 0,
      // 控制dialog显示和隐藏
      dialogFormVisible: false,
      // 用户和职位信息
      staffList: [],
      // 在职状态列表
      statusList: [
        {
          label: '在职',
          value: 1
        },
        {
          label: '离职',
          value: 2
        }
      ],
      // 用户信息
      userFormData: {
        account: '',
        entryTime: '',
        id: 0,
        password: '',
        positionId: '',
        remark: '',
        status: 1,
        telephone: '',
        username: ''
      },
      // 服务器信息表单校验规则
      rules: {
        username: [
          {
            required: true,
            message: '姓名不能为空'
          }
        ],
        account: [
          {
            required: true,
            message: '登录名不能为空'
          }
        ],
        password: [
          {
            required: true,
            message: '密码不能为空'
          }
        ],
        positionId: [
          {
            required: true,
            message: '职位不能为空'
          }
        ]
      }
    }
  },
  created() {
    this.fetchList({ content: this.content })
    this.fetchAllUserPosition()
  },
  methods: {
    handleSelectionChange() {
      console.log('handleSelectionChange')
    },
    // 获取服务器列表数据
    async fetchList(params) {
      const res = await getStaffList(params)
      const { list, totalrecords, totalpages } = res
      // console.log(list)
      // console.log(res)
      this.list = list
      this.totalrecords = totalrecords
      this.totalpages = totalpages
    },
    // 获取所有用户和职位信息
    async fetchAllUserPosition() {
      const { list } = await getAllUserPosition()
      this.staffList = list
    },
    // 处理分页模块
    handlePaginate(params) {
      // console.log(params)
      params = Object.assign(params, { content: this.content })
      this.fetchList(params)
    },
    // 显示更新服务器dialog
    showUpdate(item) {
      // console.log(item)
      this.userFormData = item
      this.dialogFormVisible = true
      // 修改为更新状态
      this.isAdd = false
    },
    // 根据id删除服务器数据
    del(id) {
      // 弹出提示框，询问是否确认删除
      this.$confirm('你将要删除一条数据, 是否继续?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      }).then(async() => {
        // 发送删除服务器信息请求
        await delStaff(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        await this.fetchList({ page: this.currentPage, content: this.content })
        // 删除完后，如果当前页没有数据并且当前页不是第一页，那么就重新请求上一页的数据
        if (this.list.length === 0 && this.currentPage > 1) {
          this.currentPage -= 1
        }
        await this.fetchList({ page: this.currentPage, content: this.content })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 搜索服务器数据
    searchServer(content) {
      // console.log(content)
      this.fetchList({ content })
    },
    async handleInputSearch() {
      // 当用户清除了搜索框中的文字时或者搜索框内容为空时，重新发送请求获取服务器列表数据
      if (!this.content) {
        await this.fetchList()
      }
    },
    // dialog关闭时要做的事
    close(formName) {
      // 隐藏dialog
      this.dialogFormVisible = false
      this.isAdd = true
      // 清空userFormData
      this.userFormData = {}
      // 清除校验的效果
      this.$refs[formName].resetFields()
    },
    // 当搜索框点击清除按钮时
    clearContent() {
      // console.log(this.content)
      // 让当前的页码为1
      this.currentPage = 1
      this.fetchList({ content: this.content })
    },
    submitForm(formName) {
      // 校验表单
      this.$refs[formName].validate(async(valid) => {
        // 通过就发送请求
        if (valid) {
          let res
          if (this.isAdd) {
            res = await addStaff(this.userFormData)
          } else {
            res = await updateStaff(this.userFormData)
          }
          // console.log(res)

          // 提示添加成功
          this.$message.success(res.msg)
          // 重新获取服务器列表的数据
          await this.fetchList({ page: this.currentPage, content: this.content })
          // 隐藏dialog
          this.dialogFormVisible = false
        } else {
          // 不通过就停止发送请求
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.staff-list-container {
  padding-left: 30px;

  .header {
    padding-top: 30px;
    margin-bottom: 15px;

    ::v-deep .el-input {
      width: 300px;
    }

    .search {
      margin-left: 15px;
    }

    .add {
      float: right;
      margin-right: 30px;
    }
  }

  ::v-deep .el-pagination {
    display: flex;
    justify-content: flex-end;
  }
}
</style>