yiliangyiyun-pcfront/src/views/account/accountList.vue

<template>
  <div>
    <div class="head">
      <span class="headicon">账号管理</span>
    </div>

    <div class="top-buttons">
      <el-button size="small" type="primary" @click="goAddAccount">新增</el-button>
      <div class="search">
        <el-input v-model="page.keyword" size="small" placeholder="请输入搜索内容" class="page-search" clearable @clear="getAccountList" @keyup.enter.native="getAccountList"></el-input>
        <svg-icon icon-class="gen" class="genIcon" @click="getAccountList" />
      </div>
    </div>

    <div class="table">
      <el-table style="width: 100%" :data="tableData" @row-click="handleRowClick" @cell-click="mouseEnter">
        <el-table-column prop="roleId" label="序号" width="50" align="center">
          <template slot-scope="scope">{{ scope.$index+1 }}</template>
        </el-table-column>
        <el-table-column prop="operatorName" label="姓名" />
        <el-table-column prop="operatorMobilePhone" label="手机号" maxlength="11" />
        <el-table-column prop="departmentName" label="部门" />
        <el-table-column prop="positionName" label="职位" />
        <el-table-column prop="createDate" label="添加时间" width="250" />
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <template> {{ scope.row.enabled===1?'启用':'禁用' }} </template>
          </template>
        </el-table-column>
        <el-table-column prop="action" label="操作" align="center">
          <yh-operaction :lable="lable" @skip="skip" />
        </el-table-column>
      </el-table>
    </div>

    <pagination v-show="total>0" :total="total" :page.sync="page.currentPage" :limit.sync="page.pageSize" @pagination="pageChanged" />
  </div>
</template>

<script>
import yhOperaction from "../../layout/components/common/operaction.vue";
import Pagination from "../../components/Pagination";
import { operators, disable, remove, enable } from "../../api/account";

export default {
  components: {
    yhOperaction,
    Pagination
  },
  data() {
    return {
      rowMsg: "",
      // status:'',
      page: { currentPage: 1, pageSize: 10, keyword: "" },
      total: 10,
      lable: [
        { lab: "编辑", click: "edit" },
        { lab: "禁用", click: "forbidden" },
        { lab: "删除", click: "del" }
      ],

      tableData: []
    };
  },
  mounted() {
    this.getAccountList();
  },
  methods: {
    pageChanged(event, value) {
      if (event === "update:page") {
        this.page.currentPage = value;
      } else if (event === "update:limit") {
        this.page.pageSize = value;
      }
      this.getAccountList();
    },
    goAddAccount() {
      this.$router.push({ name: "accountNewly" });
    },
    handleDelete() {},

    skip(msg) {
      if (msg === "edit") {
        localStorage.setItem("row", JSON.stringify(this.rowMsg));
        this.$router.push({ name: "accountEdit" });
      } else if (msg === "forbidden") {
        disable({ operatorId: this.rowMsg.operatorId }).then(() => {
          this.getAccountList();
          this.$message({
            type: "success",
            message: "禁用成功!",
            showClose: true
          });
          // this.basicForm.status='禁用成功'
        });
      } else if (msg === "del") {
        remove({ operatorId: this.rowMsg.operatorId })
          .then(() => {
            this.getAccountList();
            this.$message({
              message: "删除成功",
              type: "success",
              showClose: true
            });
          })
          .catch(() => {
            this.$message({
              message: "删除失败",
              type: "error",
              showClose: true
            });
          });
      } else if (msg === "enable") {
        enable({ operatorId: this.rowMsg.operatorId })
          .then(() => {
            this.getAccountList();
            this.$message({
              type: "success",
              message: "启用成功!",
              showClose: true
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
              showClose: true
            });
          });
      }
    },
    mouseEnter(row) {
      this.state(row);
      this.rowMsg = row;
    },

    handleRowClick(row, column) {
      if (column.property !== "action") {
        localStorage.setItem("row", JSON.stringify(row));
        this.$router.push({ name: "accountDetail" });
      }
    },

    add() {
      this.$router.push({ name: "accountNewly", params: { id: "123" } });
    },

    getAccountList() {
      operators(this.page).then(response => {
        this.tableData = response.data.records;
        this.page.currentPage = response.data.current;
        this.total = response.data.total;
      });
    },
    state(response) {
      if (response.enabled === 1) {
        this.lable.splice(1, 1, { lab: "禁用", click: "forbidden" });
      } else {
        this.lable.splice(1, 1, { lab: "启用", click: "enable" });
      }
    }
  }
};
</script>

<style scoped lang="scss">
.search {
  float: right;
  position: relative;
  width: 232px;
}

.genIcon {
  font-size: 32px;
  position: absolute;
  top: 9px;
  right: 3px;
}
</style>