列表项的删除编辑

<template>
  <div>
    <div>列表</div>
    <!-- <span>  {{ dateStr | formatDate |  test }}   </span> -->
    <el-table :data="list" ref="table" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="姓名" prop="username"></el-table-column>
      <el-table-column></el-table-column>
      <el-table-column label="手机号" prop="tel"></el-table-column>
      <!-- 组件 -->
      <el-table-column label="入职时间" prop="joindate"></el-table-column>
      <el-table-column label="所属部门" prop="department"></el-table-column>

      <!-- 操作列 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="clickEdit(scope.row)">编辑</el-button>
          <el-popconfirm title="这是一段内容确定删除吗？" @confirm="clickDel(scope.row.id)">
            <el-button type="danger" size="mini" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="clickboth">批量删除</el-button>
    <el-button @click="resetSelect" type="primary">取消选择</el-button>
    <!-- <el-button @click="nextPage">下一页</el-button> -->
    <el-pagination
      :total="total"
      :current-page.sync="pageInfo.page"
      :page-size.sync="pageInfo.pageSize"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>

    <el-dialog title="修改账号" :visible.sync="isShow" width="30%">
      <el-form label-width="100px" :model="formModel" ref="ruleForm" @cancel="isShow = false">
        <el-form-item label="用户名" prop="name">
          <el-input v-model="formModel.username"></el-input>
        </el-form-item>
      </el-form>
      <el-button @click="isShow = false">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { usersList, usersDel, userSedit, usersDelall } from "@/api/account.api";
import AccountFrom from "./components/AccountForm.vue";
import dayjs from "dayjs";
export default {
  components: {
    AccountFrom
  },
  data() {
    return {
      pageInfo: {
        page: 1,
        pageSize: 5
      },
      // 总数
      total: 0,
      list: [],
      dateStr: "2023-06-02T01:41:11.000Z",
      // 选中的表格项
      ids: "",
      isShow: false,
      formModel: {
        username: "",
        tel: "",
        joindate: "",
        id: "",
        department: ""
      }
    };
  },
  methods: {
  //  这个就是取消选择的
    resetSelect() {
      // el-table去取消选择
      // 1. 获取el-table   2. 调用它的一个方法
      this.$refs.table.clearSelection();
    },
    // 修改 // 编辑确定提交请求
    // 请求前先把时间格式化一下
    async submit() {
      this.formModel.joindate = dayjs(this.formModel.joindate).format(
        "YYYY-MM-DD"
      );
      // // 发送给后端
      const res = await userSedit(this.formModel);
      if (res.data.code === 0) {
        this.$message.success("修改成功！！");
        this.isShow = false;
        this.getUserList();
      }
    },
    // 编辑
  // 点击编辑的时候把这行的值赋值给这个数组，这个数组和表单双向绑定好回显
    clickEdit(row) {
      this.formModel = { ...row };
      delete this.formModel.ctime;
      this.formModel.joindate = dayjs(this.formModel.joindate).format(
        "YYYY-MM-DD"
      );
      this.isShow = true;
    },
    // 获取列表
    // 封装的函数可以获取新的员工列表
    async getUserList() {
      const res = await usersList(this.pageInfo);
      console.log(res);
      this.total = res.data.total;
      if (res.data.data.length) {
        this.list = res.data.data;
      }
    },
    // 删除列表
    async clickDel(id) {
      const res = await usersDel(id);
      console.log(res);
      if (res.data.code === 0) {
        this.$message.success("删除成功！");
        // 重新查询
        this.getUserList();
      }
    },
    handleSelectionChange(val) {
      this.ids = JSON.stringify(val.map(item => item.id));
      console.log(this.ids);
    },
    // 批量删除
    async clickboth() {
      const res = await usersDelall(this.ids);
      console.log(this.ids);
      if (res.data.code === 0) {
        this.$message.success("删除成功！");
        // 重新查询
        this.getUserList();
      }
    }
  },

  // 监听事件
  watch: {
    // 监听pageInfo
    pageInfo: {
      handler() {
        this.getUserList();
      },
      deep: true,
      immediate: true
    }
  },
  // 格式化
  filters: {
    formatDate(val) {
      return dayjs(val).format("YYYY-MM-DD HH:mm:ss");
    }
  }
};
</script>

<style lang="scss" scoped>
div{
  color: #f15959;
}
</style>