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

<template>
  <div>
    <div class="label-box rig-margin">
      <span class="label-title right">基本信息</span>
    </div>

    <div class="top-buttons">
      <el-button size="small" @click="goBack">返回</el-button>
      <el-button size="small" type="primary" @click="editAccount">编辑</el-button>
      <el-button size="small" v-if="basicForm.enabled !== 1" @click="enableAccount">启用</el-button>
      <el-button size="small" v-if="basicForm.enabled === 1" @click="disableAccount">禁用</el-button>
      <el-button size="small" @click="removeAccount">删除</el-button>
    </div>

    <div class="detail-item">
      <span class="name">姓名</span>
      <span class="content">{{ basicForm.operatorName | empty }}</span>
    </div>

    <div class="detail-item">
      <span class="name">手机</span>
      <span class="content">{{ basicForm.operatorMobilePhone | empty }}</span>
    </div>

    <div class="detail-item">
      <span class="name">密码</span>
      <span class="content">{{ basicForm.loginPassword | empty }}</span>
    </div>

    <div class="detail-item">
      <span class="name">部门</span>
      <span class="content">{{ basicForm.departmentName | empty }}</span>
    </div>

    <div class="detail-item">
      <span class="name">职位</span>
      <span class="content">{{ basicForm.positionName | empty }}</span>
    </div>
  </div>
</template>
<script>
import { staffInfo, enable, disable, remove } from '../../api/account'

export default {
  filters: {
    empty(value) {
      let empt = '';
      if (!value) {
        empt = '--';
      } else {
        empt = value
      }
      return empt
    }
  },

  data() {
    return {
      stateName: '',
      operatorId: '',
      basicForm: {
        operatorName: '',
        operatorMobilePhone: '',
        loginPassword: '',
        departmentName: '',
        positionName: '',
        enabled: '0', // 当前的启用禁用状态
      }
    }
  },
  mounted() {
    this.operatorId = JSON.parse(localStorage.getItem('row')).operatorId
    this.getAccountDetail()
  },
  methods: {
    getAccountDetail() {
      staffInfo({ operatorId: this.operatorId })
        .then(res => {
          this.basicForm = res.data
        })
    },
    goBack() {
      this.$router.go(-1)
    },
    editAccount() {
      this.$router.push('accountEdit')
    },
    // 启用账户方法
    enableAccount() {
      enable({ operatorId: this.operatorId })
        .then(() => {
          this.$message({
            type: 'success',
            message: '启用成功!',
            showClose: true
          });
          this.getAccountDetail()
        })
    },
    // 禁用账户方法
    disableAccount() {
      this.$confirm(`禁用后，${this.basicForm.operatorName}将无法登录后台`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        disable({ operatorId: this.operatorId })
          .then(() => {
            this.$message({
              type: 'success',
              message: '禁用成功!',
              showClose: true
            });

            this.getAccountDetail()
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          showClose: true
        });
      });
    },
    removeAccount() {
      this.$confirm('删除后，账号数据将被清空', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        remove({ operatorId: this.operatorId })
          .then(() => {
            this.$router.go(-1)
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          showClose: true
        });
      });
    }
  },
}
</script>
<style scoped lang="scss">
  .rig-margin {
    padding: 15px 0 0 20px;
  }

  .inp {
    width: 275px;
  }

  .form {
    margin: 30px 0 0 0;
  }

  .table {
    margin-top: 40px;
  }

  .detail-item {
    margin-bottom: 20px;
  }

  .name {
    width: 120px;
    text-align: right;
    display: inline-block;
    color: #666666;
  }

  .content {
    margin-left: 20px;
    display: inline-block;
    color: #333333;
  }

  .head2 {
    margin-top: 40px;
  }

</style>