CABaggageData2.0/src/views/accountManagement/components/accountHome.vue

<template>
  <div class="account-home">
    <div class="account-header">
      <div class="status flex-wrap">
        <div class="manageTitle">账号管理</div>
        <div class="status1"><span class="icon" />在线</div>
        <div class="status2"><span class="icon" />离线</div>
        <div class="status3"><span class="icon" />禁用</div>
      </div>
      <Search
        :is-slot="true"
        :is-title="false"
        @getSearchData="getSearchData"
        @clearSearchData="clearSearchData"
      >
        <el-button
          v-is="['userlist_btn_add']"
          class="btnAdd"
          @click="addAccount"
        >新增</el-button>
      </Search>
    </div>
    <div class="content-box scrollbar">
      <template v-if="accountArr.length">
        <el-row
          v-infinite-scroll="load"
          :infinite-scroll-disabled="disabled"
          :infinite-scroll-distance="20"
          :gutter="24"
        >
          <el-col
            v-for="account in accountArr"
            :key="account.UserId"
            :xs="24"
            :sm="12"
            :md="8"
            :lg="4"
            class="account-box"
          >
            <div class="account-box-wrap">
              <div :class="account.Status === 1 ? 'headOnline' : account.Status === 2 ? 'headOffline' : 'headDisabled'" />
              <div>
                <div class="nameBox flex">
                  <div class="flex-wrap">
                    <div class="name">{{ account.UserName }}</div>
                    <div
                      v-is="['userlist_btn_update']"
                      class="loger"
                      @click="toEdit(account.UserId)"
                    />
                  </div>
                  <div
                    v-is="['userlist_btn_del']"
                    class="del"
                    @click="deleteUser(account)"
                  >
                    <i class="el-icon-close" />
                  </div>
                </div>

                <el-row>
                  <el-col :span="24">{{ account.group }}</el-col>
                </el-row>

                <el-row class="content">
                  <el-col :span="12">登录次数：<span>{{ account.LoginCount }}</span></el-col>
                  <el-col
                    :span="12"
                    class="flexLeft"
                  >异常登录：<span>{{ account.ExceptionCount }}</span></el-col>
                </el-row>
                <el-row class="content">
                  <el-col :span="24">权限项数：<span>{{ account.AuthCount }}</span></el-col>
                </el-row>
                <el-row class="content">
                  <el-col :span="12">
                    状态：<span
                      v-if="account.Status == 1 || account.Status == 2"
                      class="used"
                    >启用</span>
                    <span
                      v-else-if="account.Status == 3"
                      class="unUsed"
                    >停用</span>
                  </el-col>
                  <el-col
                    v-is="['userlist_btn_status_change']"
                    :span="12"
                    class="flexLeft"
                  >
                    <el-switch
                      v-model="account.Flag"
                      :active-value="true"
                      :inactive-value="false"
                      active-color="#2D67E3"
                      inactive-color="#CFD6E2"
                      @change="userActiveToggle(account)"
                    />
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>
        <template v-if="pages > 1">
          <p
            v-if="loading"
            class="center"
          >加载中...</p>
          <p
            v-if="noMore"
            class="center"
          >没有更多数据了~</p>
        </template>
      </template>
    </div>
    <Dialog :flag="dialogVisible">
      <div class="del-dialog">
        <div class="title del-title">删除账号</div>
        <div class="content del-content"><i class="el-icon-error error r10" />你确定要删除<span class="error l10">{{ deleteUserName }}</span>？</div>
        <div class="foot Delfoot right t30">
          <el-button
            size="medium"
            type="danger"
            class="r24"
            @click="del()"
          >删除</el-button>

          <el-button
            size="medium"
            @click="dialogVisible = false"
          >取消</el-button>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
import Search from '@/layout/components/Search'
import Dialog from '@/layout/components/Dialog'
import { GetAccountList, ChangeUserStatus, delAccount } from '@/api/Account'
export default {
  components: { Search, Dialog },
  data() {
    return {
      dialogVisible: false,
      accountArr: [],
      deleteUserId: '',
      deleteUserName: '',
      userId: '',
      GroupId: '',
      GroupUpid: '',
      searchInfo: '', // 搜索内容
      PageIndex: 1,
      PageSize: 20,
      pages: null,
      loading: false
    }
  },
  computed: {
    noMore() {
      return this.PageIndex >= this.pages
    },
    disabled() {
      return this.loading || this.noMore
    }
  },
  watch: {
    searchInfo(val) {
      val.length === 0 && this.pageInit()
    }
  },
  created() {
    if (!this.searchInfo) {
      this.accountList()
    } else {
      console.log(this.searchInfo)
      this.accountList()
    }
  },
  methods: {
    // 滚动加载
    load() {
      this.PageIndex += 1
      this.accountList()
    },
    // 回到第一页
    pageInit() {
      this.PageIndex = 1
      this.accountArr = []
      this.accountList()
    },
    // 查询
    getSearchData(val) {
      this.searchInfo = val
      this.pageInit()
    },

    // 清除查询
    clearSearchData() {
      this.searchInfo = ''
    },
    // 修改状态
    async userActiveToggle({ Flag, Status, UserId }) {
      Status = Flag ? 2 : 3
      try {
        const result = await ChangeUserStatus({
          Flag,
          Status,
          UserId
        })
        if (result.code === 0) {
          this.accountArr.forEach(account => {
            if (account.UserId === UserId) {
              account.Status = Status
            }
          })
          this.$message.success(result.message)
        } else {
          this.$message.error(result.$message)
        }
      } catch (error) {
        console.log('出错了', error)
      }
    },
    deleteUser(user) {
      this.dialogVisible = true
      this.deleteUserId = user.UserId
      this.deleteUserName = user.UserName
    },
    toEdit(userId) {
      this.userId = userId
      this.$router.push({
        path: '/account/accountEdit',
        query: { userId: this.userId }
      })
    },
    addAccount() {
      this.$router.push({
        path: '/account/accountAdd'
      })
    },
    // 获取列表
    async accountList() {
      try {
        this.loading = true
        const result = await GetAccountList({
          QueryName: this.searchInfo,
          PageIndex: this.PageIndex,
          PageSize: this.PageSize
        })
        if (result.code === 0) {
          this.loading = false
          const newDatas = result.returnData.records
          // console.log(newDatas[0])
          this.pages = result.returnData.pages
          newDatas.forEach(element => {
            this.accountArr.push(element)
          })
        } else {
          this.$message.error(result.message)
        }
      } catch (error) {
        console.log('出错了', error)
      }
    },

    // 删除接口
    async del() {
      const result = await delAccount({
        UserId: this.deleteUserId
      })
      if (result.code === 0) {
        this.dialogVisible = false
        this.$message.success(result.message)
        this.pageInit()
      } else if (result.code === -1) {
        this.$message.error('后端错误，稍后请重试')
      } else {
        this.$message.success(result.message)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.account-home {
  padding: 16px 32px 32px 32px;
  .account-header {
    margin-bottom: 30px;
    line-height: 32px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .btn-add {
      width: 120px;
      height: 48px;
      background: #f5f7fa;
      border: 1px solid #b4b7cb;
      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
      border-radius: 6px;
      font-size: 16px;
      font-weight: bold;
      color: #6f81bc;
    }
    .status {
      align-items: center;
      .icon {
        width: 14px;
        height: 14px;
        background: #2d67e3;
        border-radius: 2px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 10px;
        position: relative;
        top: -2px;
      }
      &:last-child {
        margin-right: 0;
      }
      .status2 {
        margin: 0 28px;
        .icon {
          background: #eb2f3b;
        }
      }
      .status3 {
        .icon {
          background: #afb4bf;
        }
      }
    }
  }
  .content-box {
    height: calc(100vh - 256px);
    overflow-y: auto;
    overflow-x: hidden;
    @media only screen and (min-width: 1920px) {
      .el-col-xl-4-8 {
        width: 20%;
      }
    }
    .account-box {
      margin-bottom: 24px;
      .account-box-wrap {
        position: relative;
        padding: 24px;
        background: #ffffff;
        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        overflow: hidden;
      }
      .headOffline {
        width: 100%;
        height: 4px;
        background: #f25555;
        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
        border-radius: 4px;
        position: absolute;
        left: 0;
        top: 0;
      }
      .headOnline {
        background: #6f81bc;
        width: 100%;
        height: 4px;
        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
        border-radius: 4px;
        position: absolute;
        left: 0;
        top: 0;
      }
      .headDisabled {
        background: #cfd6e2;
        width: 100%;
        height: 4px;
        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
        border-radius: 4px;
        position: absolute;
        left: 0;
        top: 0;
      }
      .el-row {
        margin: 8px 0;
      }
      .flexLeft {
        display: flex;
        justify-content: flex-end;
        flex-direction: row;
      }

      .del {
        cursor: pointer;
        i {
          font-size: 14px;
          font-weight: 600;
          color: #606266;
        }
      }
      .nameBox {
        display: flex;
        .name {
          font-size: 16px;
          font-weight: bold;
          color: #303133;
          max-width: 120px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .loger {
          width: 14px;
          height: 14px;
          margin-left: 24px;
          background: url('../../../assets/status/ic_edit_default.png') no-repeat;
          background-size: 100% 100%;
          cursor: pointer;
        }
        .loger:hover {
          background: url('../../../assets/status/ic_edit_hovar.png') no-repeat;
          background-size: 100% 100%;
        }
      }

      .content {
        margin-top: 14px;
        font-size: 14px;
      }
      .used {
        font-size: 14px;
        font-weight: 400;
        color: #2d67e3;
      }
      span {
        font-size: 16px;
        font-weight: 400;
        color: #909399;
      }
    }
  }
  .del-dialog {
    .del-content {
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #101611;
      .el-icon-error {
        vertical-align: sub;
        font-size: 26px;
      }
    }
  }
}
</style>