alhj-admin/src/views/management/index.vue

<template>
  <div class="app-container">
    <el-row type="flex" justify="space-between" style="margin-bottom: 20px">
      <div class="grid-content bg-purple">
        <el-input
          v-model="formData.name"
          @change="Search"
          placeholder="请输入业务管理员名称"
          style="width: 100%"
        >
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </div>
      <div class="grid-content bg-purple">
        <el-dropdown @command="handleCommand">
          <div class="pulldown">
            <span v-if="!status" class="el-dropdown-link">
              业务管理员状态
            </span>
            <span v-if="status" class="el-dropdown-link">
              {{ status }}
            </span>
            <i class="el-icon-arrow-down el-icon--right" />
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="全部">全部</el-dropdown-item>
            <el-dropdown-item command="正常">正常</el-dropdown-item>
            <el-dropdown-item command="删除">删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="grid-content bg-purple">
        <el-dropdown @command="handlehpCommand">
          <div class="pulldown">
            <span v-if="!Auditstatus" class="el-dropdown-link"> 审核状态 </span>
            <span v-if="Auditstatus" class="el-dropdown-link">
              {{ Auditstatus }}
            </span>
            <i class="el-icon-arrow-down el-icon--right" />
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="全部">全部</el-dropdown-item>
            <el-dropdown-item command="待审核">待审核</el-dropdown-item>
            <el-dropdown-item command="通过">通过</el-dropdown-item>
            <el-dropdown-item command="未通过">未通过</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div
        class="grid-content bg-purple"
        style="display: flex; justify-content: flex-end; margin-left: 10px"
      >
        <el-button type="success" @click="success">审核成功</el-button>
        <el-button type="danger" @click="failed">审核失败</el-button>
        <el-button type="primary" @click="recover">恢复</el-button>
        <el-button type="warning" @click="deleted">删除</el-button>
        <el-button type="primary" @click="batchExports">导出</el-button>
      </div>
    </el-row>
    <el-table
    :row-key="getRowKey"
      v-loading="listLoading"
      :data="temporaryList"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
      @select-all="handleAll"
    >
      <el-table-column align="center" label="" width="55" type="selection"  :reserve-selection="true" />

      <el-table-column
        label="业务管理员名称"
        align="center"
        width="180"
        prop="realName"
      />
      <el-table-column label="账号" align="center" prop="account" />
      <el-table-column
        label="联系电话"
        width="180"
        align="center"
        prop="mobile"
      />
      <el-table-column
        label="审核状态"
        align="center"
        prop="approveStatusText"
      />
      <el-table-column
        label="业务管理员状态"
        align="center"
        prop="statusText"
        width="180"
      />

      <el-table-column
        label="时间"
        width="180"
        align="center"
        prop="createdAt"
      />
      <el-table-column
        align="center"
        prop="created_at"
        label="操作"
        width="300"
      >
        <template slot-scope="scope">
          <el-tag
            type="success"
            style="cursor: pointer; margin: 0 5px"
            @click="Srecover(scope.row.id)"
            v-if="scope.row.status == 1"
            >恢复</el-tag
          >
          <el-tag
            type="danger"
            style="cursor: pointer; margin: 0 5px"
            @click="Sdeleted(scope.row.id)"
            v-if="scope.row.status == 0"
            >删除</el-tag
          >
          <el-tag
            type="primary"
            v-permission="['admin']"
            style="cursor: pointer; margin: 0 5px"
            @click="reset(scope.row.id)"
            >重置密码
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
    <!-- 重置密码弹窗 -->
    <el-dialog title="重置密码" :visible.sync="dialogVisible" width="30%">
      <el-form ref="form" :model="password" label-width="80px">
        <el-form-item label="登录密码" prop="password.newpassword">
          <el-input
            v-model="password.newpassword"
            style="width: 300px"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password.ConfirmnewPassword">
          <el-input
            v-model="password.ConfirmnewPassword"
            style="width: 300px"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit">提交修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <div class="pagesip">
      <el-button
        type="primary"
        size="small"
        style="background-color: #d8ab5a; border-color: #d8ab5a; margin: 0 20px"
        @click="jumpFirstPage"
        >首页
      </el-button>
      <el-pagination
        ref="pagination"
        background
        layout="total,prev, pager, next"
        :total="total"
        :page-size="pagesize"
        :current-page="currentPage"
        prev-text="上一页"
        next-text="下一页"
        @current-change="handleCurrentChange"
      />
      <el-button
        type="primary"
        size="small"
        style="background-color: #d8ab5a; border-color: #d8ab5a; margin: 0 20px"
        @click="jumpLastPage"
        >尾页
      </el-button>
    </div>
  </div>
</template>

<script>
import { dataConversionUtil } from "../../utils/Excel.js";
import { getAccountSearch } from "@/api/account";
export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      dialogVisible: false,
      // 表单数据
      formData: {
        startTime: "",
        endTime: "",
        name: "",
        status: "", //审核状态
        isDeleted: "", //删除状态
      },
      // 重置密码
      password: {
        newpassword: "",
        ConfirmnewPassword: "",
        userId: "",
      },
      /* 当前页数 */
      currentPage: 1,
      /* 每页显示个数 */
      pagesize: 10,
      /* 总条数 */
      total: 20,
      temporaryList: [],
      srcList: [],
      list: [],
      listLoading: false,
      status: "",
      Auditstatus: "",
      checked: false,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      exportExcelData1: [], //导出列表缓存数据整页
      exportExcelData2: [], //导出列表缓存数据单选
    };
  },

  mounted() {
    this.getAllList();
  },
  methods: {
    /* 获取列表数据 */
    getAllList(searchForm = {}) {
      const params = {
        pageIndex: this.currentPage,
        pageSize: this.pagesize,
      };
      getAccountSearch({
        ...params,
        ...searchForm,
      }).then((res) => {
        const { data } = res;
        this.temporaryList = data.result;
        this.srcList = data.result;
        this.total = res.data.total;
      });
    },

    success() {
      const ids = Array.from(this.multipleSelection, ({ id }) => id);
      this.$request({
        url: "/api/Account/manager",
        method: "post",
        data: {
          ids: ids,
          operateType: 3,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.getAllList();
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
          this.getAllList();
        }
      });
    },
    failed() {
      const ids = Array.from(this.multipleSelection, ({ id }) => id);
      this.$request({
        url: "/api/Account/manager",
        method: "post",
        data: {
          ids: ids,
          operateType: 4,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.getAllList();
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
          this.getAllList();
        }
      });
    },
    recover() {
      const ids = Array.from(this.multipleSelection, ({ id }) => id);
      this.$request({
        url: "/api/Account/manager",
        method: "post",
        data: {
          ids: ids,
          operateType: 2,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "恢复成功",
          });
          this.getAllList();
        } else {
          this.$message({
            type: "error",
            message: "恢复失败",
          });
          this.getAllList();
        }
      });
    },
    deleted() {
      const ids = Array.from(this.multipleSelection, ({ id }) => id);
      this.$request({
        url: "/api/Account/manager",
        method: "post",
        data: {
          ids: ids,
          operateType: 1,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功",
          });
          this.getAllList();
        } else {
          this.$message({
            type: "error",
            message: "删除失败",
          });
          this.getAllList();
        }
      });
    },
    Srecover(id) {
      this.$request({
        url: "/api/Account/manager",
        method: "post",
        data: {
          ids: [id],
          operateType: 2,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "恢复成功",
          });
          this.getAllList();
        } else {
          this.$message({
            type: "error",
            message: "恢复失败",
          });
          this.getAllList();
        }
      });
    },
    Sdeleted(id) {
      this.$request({
        url: "/api/Account/manager",
        method: "post",
        data: {
          ids: [id],
          operateType: 1,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "删除成功",
          });
          this.getAllList();
        } else {
          this.$message({
            type: "error",
            message: "删除失败",
          });
          this.getAllList();
        }
      });
    },

    /* 输入出票人名称查询 */
    Search() {
      this.currentPage = 1;
      this.searchForm = {
        ...this.formData,
      };
      this.getAllList(this.searchForm);
    },
    /* 业务员状态筛选 */
    handleCommand(command) {
      this.status = command;
      if (command === "全部") {
        this.formData.isDeleted = "";
      }
      if (command === "正常") {
        this.formData.isDeleted = 0;
      }
      if (command === "删除") {
        this.formData.isDeleted = 1;
      }
      this.currentPage = 1;
      this.searchForm = {
        ...this.formData,
      };
      this.getAllList(this.searchForm);
    },

    /* 审核状态筛选 */
    handlehpCommand(command) {
      this.Auditstatus = command;
      if (command === "全部") {
        this.formData.status = "";
      }
      if (command === "待审核") {
        this.formData.status = 1;
      }
      if (command === "通过") {
        this.formData.status = 2;
      }
      if (command === "未通过") {
        this.formData.status = 3;
      }
      this.currentPage = 1;
      this.searchForm = {
        ...this.formData,
      };
      this.getAllList(this.searchForm);
    },

    /* 分页功能，改变当前页 */
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getAllList(this.searchForm);
    },

    /* 分页功能去首页 */
    jumpFirstPage() {
      this.$refs.pagination.handleCurrentChange(1);
      this.$emit("handleCurrentChange", 1);
    },
    /* 分页功能：去尾页 */
    jumpLastPage() {
      let font = this.$refs.pagination;
      let cpage = Math.ceil(font.total / font.pageSize);
      font.handleCurrentChange(cpage);
    },

    getRowKey(row) {
      return row.id;
    },
    /* 批量导出数据 */
    handleSelectionChange(data) {
      this.multipleSelection = data;
    },
    handleAll(data) {
      this.multipleSelection = data;
    },

    /* 批量导出 */
    batchExports() {
      if (this.multipleSelection == "") {
        this.Exports()
      } else {
        var tableHeader = [
          [
            "序号",
            "业务管理员姓名",
            "账号",
            "联系电话",
            "业务管理员状态",
            "审核状态",
            "时间",
          ],
        ];
        var dataList = [];
        this.multipleSelection.forEach((item, index) => {
          dataList.push([
            index + 1,
            item.realName,
            item.account,
            item.mobile,
            item.statusText,
            item.approveStatusText,
            item.createdAt,
          ]);
        });
        dataConversionUtil.dataToExcel("业务管理员列表", tableHeader, dataList);
        this.$message.success("导出成功!");
      }
    },
    /* 全部导出合同列表数据 */
    getContacts() {
      const data = {
        pageIndex: "",
        pageSize: -1,
        startTime: "",
        endTime: "",
        isDeleted: "",
        status: "",
      };
      getAccountSearch({ ...data }).then((res) => {
        const { result } = res.data;
        this.multipleSelection = result;
      });
    },

    /* 全部导出 */
    Exports() {
      this.getContacts();
      setTimeout(() => {
        var tableHeader = [
          [
            "序号",
            "业务管理员姓名",
            "账号",
            "联系电话",
            "业务管理员状态",
            "审核状态",
            "时间",
          ],
        ];
        var dataList = [];
        this.multipleSelection.forEach((item, index) => {
          dataList.push([
            index + 1,
            item.realName,
            item.account,
            item.mobile,
            item.statusText,
            item.approveStatusText,
            item.createdAt,
          ]);
        });
        dataConversionUtil.dataToExcel("业务管理员列表", tableHeader, dataList);
        this.$message.success("导出成功!");
      }, 1000);
    },

    // 重置业务员密码
    reset(id) {
      this.dialogVisible = true;
      this.password.userId = id;
    },
    // 提交修改密码
    onSubmit() {
      if (this.password.newpassword !== this.password.ConfirmnewPassword) {
        this.$message({
          type: "error",
          message: "密码与确认密码不一致",
        });
      } else if (
        this.password.newpassword.length < 6 ||
        this.password.ConfirmnewPassword < 6
      ) {
        this.$message({
          type: "error",
          message: "密码与确认密码至少6位",
        });
      } else {
        this.$request({
          url: "/api/Account/password/resetUser",
          method: "post",
          data: {
            password: this.password.newpassword,
            userId: this.password.userId,
          },
        }).then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.$message({
              type: "success",
              message: "重置成功",
            });
            this.dialogVisible = false;
          }
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.pulldown {
  width: 185px;
  height: 40px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  color: #999999;
}

.pagesip {
  width: 100%;
  margin: 20px auto;
  display: flex;
  // align-items: center;
  justify-content: flex-end;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #d8ab5a;
}

.el-col {
  margin-bottom: 20px;
}
</style>