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 class="btnAdd" @click="addAccount">新增</el-button>
      </Search>
    </div>
    <div class="flex-wrap">
      <div class="content-group">
        <el-tree ref="tree" class="groupTree" highlight-current default-expand-all node-key="user_group_id" :data="groupData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </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, index) in accountArr" :key="index" :xs="24" :sm="12" :md="8" :lg="6" class="account-box">
              <div class="account-box-wrap">
                <div :class="account.user_status == 1 ? 'headOnline' : account.user_status == 2 ? 'headOffline' : 'headDisabled'" />
                <div>
                  <div class="nameBox flex">
                    <div class="flex-wrap">
                      <div class="name">{{ account.user_name }}</div>
                      <div class="loger" @click="toEdit(account.user_id)" />
                      <div @click="authAccount(account)" class="loger cap-auth"></div>
                    </div>
                    <div 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.user_status == 1 || account.user_status == 2" class="used">启用</span>
                      <span v-else class="unUsed">停用</span>
                    </el-col>
                    <el-col v-is="['userlist_btn_status_change', 'admin']" :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>
        <template v-else>
          <NoData />
        </template>
      </div>
    </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>
    <!--新增/编辑-->
    <Dialog :flag="editDialogVisible" width="508px" :show-flag="true">
      <div class="airportInfoDialog dialog-public-background">
        <div class="title">{{ editDialogTitle }}</div>
        <div class="content">
          <!-- <div class="ruleZf">特殊字符：`、!、@、#、$、%、^、&、*、(、)、_、+、{、}、"、:、?、>、&lt;、`、,、.、/、'、;、[、]、=、-、\、|</div> -->
          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="130px" class="demo-ruleForm">
            <el-form-item label="账号名称" prop="user_name">
              <el-input v-model="ruleForm.user_name" size="medium" placeholder="请输入账号名称" />
            </el-form-item>
            <el-form-item label="账号密码" prop="user_pwd">
              <el-input v-model="ruleForm.user_pwd" show-password class="r25" size="medium" placeholder="请输入密码" />
              <!-- <div class="flex-wrap">
                <el-input v-model="ruleForm.PassWord" class="r25" size="medium" placeholder="请输入密码" />
                <el-button size="medium" @click="resetPwd" style="position: relative;top: 4px;" class="r26" type="primary">重置密码</el-button>
              </div> -->
            </el-form-item>
            <el-form-item label="账号描述" prop="user_comment">
              <el-input v-model="ruleForm.user_comment" size="medium" type="textarea" :rows="3" placeholder="请输入角色描述" />
            </el-form-item>
            <el-form-item label="是否启用" prop="user_status">
              <el-radio v-model="ruleForm.user_status" :label="1">是</el-radio>
              <el-radio v-model="ruleForm.user_status" :label="2">否</el-radio>
            </el-form-item>
          </el-form>
        </div>
        <div class="foot center t30">
          <el-button size="medium" type="primary" class="r25 r26" @click="submitClickHandler()">提交</el-button>
          <el-button size="medium" class="r26" @click="resetForm('ruleForm')">取消</el-button>
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script>
import Search from "@/layout/components/Search";
import Dialog from "@/layout/components/Dialog";
import NoData from "@/components/nodata";
import { GetAccountList, ChangeUserStatus, delAccount, getAccountDetails, editAccount, addAccount } from "@/api/Account";
import { pwdProduce, translateDataToTreeAll } from "@/utils/validate";
import { mapGetters } from "vuex";
import { GeneralDataReception, Query } from "@/api/dataIntegration";
import MD5 from "blueimp-md5";
export default {
  components: { Search, Dialog, NoData },
  data() {
    return {
      pwdStruc: "",
      pwdLengthBegin: 0,
      pwdLengthEnd: 0,
      dialogVisible: false,
      accountArr: [],
      deleteUserId: "",
      deleteUserName: "",
      userId: "",
      GroupId: "",
      GroupUpid: "",
      searchInfo: "", // 搜索内容
      PageIndex: 1,
      PageSize: 20,
      pages: null,
      loading: false,
      editDialogVisible: false,
      editDialogTitle: "新增账号",
      editType: "add",
      ruleForm: {
        // 协议信息表单
        user_name: "",
        user_status: "",
        user_comment: "",
        user_pwd: "",
      },
      rules: {
        // 协议信息表单验证
        user_name: [{ required: true, message: "请输入账号名称", trigger: "blur" }],
      },
      ruleFormObj: {},
      roleId: "",
      msgIndex: null,
      oldPwd: "",
      groupData: [],
      defaultProps: {
        children: "children",
        label: "user_group_name",
      },
    };
  },
  computed: {
    ...mapGetters(["systemSet"]),
    noMore() {
      return this.PageIndex >= this.pages;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  watch: {
    searchInfo(val) {
      val.length === 0 && this.pageInit();
    },
  },
  created() {
    // 获取系统配置
    // if (this.systemSet) {
    //   let obj
    //   if (typeof this.systemSet === 'string') {
    //     obj = JSON.parse(this.systemSet)
    //   } else {
    //     obj = this.systemSet
    //   }
    //   // console.log(obj)
    //   const { PwdStruc, PwdLengthBegin, PwdLengthEnd } = obj
    //   this.pwdStruc = PwdStruc
    //   this.pwdLengthBegin = PwdLengthBegin
    //   this.pwdLengthEnd = PwdLengthEnd
    // }
    if (!this.searchInfo) {
      this.accountList();
    } else {
      this.accountList();
    }
    this.getGroup();
  },
  methods: {
    // 随机生成密码
    resetPwd() {
      this.ruleForm.PassWord = pwdProduce(this.pwdLengthBegin, this.pwdLengthEnd, this.pwdStruc);
    },
    //获取用户组
    async getGroup() {
      const res = await Query({
        id: DATACONTENT_ID.accountGroupTableId,
        dataContent: [""],
      });
      if (res.code == 0) {
        const { listValues } = res.returnData;
        if (listValues && listValues.length) {
          const dataObj = {
            user_group_id: -1,
            up_user_group_id: -2,
            user_group_name: "全部用户组",
            children: translateDataToTreeAll(listValues, "up_user_group_id", "user_group_id"),
          };
          this.groupData.push(dataObj);
        } else {
        }
      } else {
        this.$message.error(res.message);
      }
    },
    //用户组点击
    handleNodeClick(data) {
      if (data.user_group_id != -1 && data.up_user_group_id != -2) {
        this.getAccountData(data.user_group_id);
      } else {
        this.clearSearchData();
      }
    },
    async getAccountData(id) {
      const res = await Query({
        id: DATACONTENT_ID.accountGroupDetailsId,
        dataContent: [id],
      });
      if (res.code == 0) {
        const { listValues } = res.returnData;
        listValues.forEach((element) => {
          element.Flag = element.user_status == 1 || element.user_status == 2 ? true : false;
        });
        this.accountArr = _.unionBy(listValues, "user_id");
      } else {
        this.$message.error(res.message);
      }
    },
    // 编辑账号
    async saveEditAccount() {
      try {
        if (this.oldPwd !== this.ruleForm.user_pwd) {
          this.ruleForm.user_pwd = MD5(this.ruleForm.user_pwd);
        }
        const res = await GeneralDataReception({
          serviceId: SERVICE_ID.accountScId,
          dataContent: JSON.stringify(this.ruleForm),
        });
        if (res.code == 0) {
          this.$message.success(res.message);
          this.resetForm("ruleForm");
          this.pageInit();
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
        console.log("出错了", error.message || error);
      }
    },
    // 新增账号
    async saveAddAccount() {
      try {
        this.ruleForm.user_pwd = MD5(this.ruleForm.user_pwd);
        const res = await GeneralDataReception({
          serviceId: SERVICE_ID.accountScId,
          dataContent: JSON.stringify(this.ruleForm),
        });
        if (res.code == 0) {
          this.$message.success(res.message);
          this.resetForm("ruleForm");
          this.pageInit();
        } else {
          this.$message.error(res.message);
        }
      } catch (error) {
        console.log("出错了", error.message || error);
      }
    },
    // 获取当前账号信息
    async getAccountInfo() {
      const res = await Query({
        id: DATACONTENT_ID.accountDetailsId,
        dataContent: [this.roleId],
      });
      if (res.code == 0) {
        const { listValues } = res.returnData;
        const obj = listValues[0];
        this.ruleForm = obj;
        this.oldPwd = obj.user_pwd;
        this.ruleForm.event = 2;
      } else {
        this.$message.error(res.message);
      }
    },
    // 新增/编辑-确认
    submitClickHandler() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (this.editType == "add") {
            this.saveAddAccount();
          } else {
            this.saveEditAccount();
          }
          this.editDialogVisible = false;
        } else {
          return false;
        }
      });
    },
    // 滚动加载
    load() {
      this.PageIndex += 1;
      this.accountList();
    },
    // 回到第一页
    pageInit() {
      this.PageIndex = 1;
      this.accountArr = [];
      this.accountList();
    },
    // 查询
    getSearchData(val) {
      this.searchInfo = val;
      this.pageInit();
    },

    // 清除查询
    clearSearchData() {
      this.searchInfo = "";
      this.pageInit();
    },
    // 修改状态
    async userActiveToggle(item) {
      item.event = 2;
      item.user_status = item.Flag ? 2 : 0;
      try {
        const result = await GeneralDataReception({
          serviceId: SERVICE_ID.accountScId,
          dataContent: JSON.stringify(item),
        });
        if (result.code == 0) {
          this.pageInit();
          this.$message.success(result.message);
        } else {
          this.$message.error(result.$message);
        }
      } catch (error) {
        console.log("出错了", error.message || error);
      }
    },
    deleteUser(user) {
      this.dialogVisible = true;
      this.deleteUserName = user.UName;
      this.ruleFormObj = user;
    },
    toEdit(userId) {
      this.editDialogVisible = true;
      this.editType = "edit";
      this.editDialogTitle = "编辑账号";
      this.roleId = userId;
      this.getAccountInfo();
    },
    addAccount() {
      this.editDialogTitle = "新增账号";
      this.editDialogVisible = true;
      this.editType = "add";
      this.ruleForm = {};
      this.ruleForm.event = 1;
      // this.$router.push({
      //   path: '/account/accountAdd'
      // })
    },
    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.editDialogVisible = false;
    },
    // 获取列表
    async accountList() {
      try {
        this.loading = true;
        const result = await Query({
          id: DATACONTENT_ID.accountTableId,
          needPage: this.PageIndex,
          dataContent: [this.searchInfo],
        });
        if (result.code == 0) {
          this.loading = false;
          const newDatas = result.returnData.listValues;
          if (newDatas && newDatas.length) {
            this.pages = result.returnData.pages;
            newDatas.forEach((element) => {
              element.Flag = element.user_status == 1 || element.user_status == 2 ? true : false;
              this.accountArr.push(element);
            });
            this.accountArr = _.unionBy(this.accountArr, "user_id");
            this.msgIndex = this.PageIndex;
          } else {
            this.pages = this.msgIndex;
            this.PageIndex = this.msgIndex;
          }
        } else {
          this.$message.error(result.message);
        }
      } catch (error) {
        console.log("出错了", error.message || error);
      }
    },

    // 删除接口
    async del() {
      this.ruleFormObj.event = 3;
      const result = await GeneralDataReception({
        serviceId: SERVICE_ID.accountScId,
        dataContent: JSON.stringify(this.ruleFormObj),
      });
      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);
      }
    },

    // 账号权限
    authAccount(item) {
      this.roleId = item.user_id;
      this.$router.push({
        path: "/account/accountAuth",
        query: { userId: this.roleId },
      });
    },
  },
};
</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 {
    flex: 1;
    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 {
      min-height: 140px;
      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: #2d67e3;
        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%;
        }
        .cap-auth {
          margin-left: 12px;
          background-image: url("../../../assets/status/ic_edit_authorization.png");
          &:hover {
            background-image: url("../../../assets/status/ic_edit_authorization_hover.png");
          }
        }
      }

      .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;
      }
    }
  }
  .content-group {
    width: 488px;
    background: #ffffff;
    box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-right: 24px;
    padding: 24px;
    ::v-deep .groupTree {
      .el-tree-node__children {
        display: block;
      }
    }
  }
  .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;
      }
    }
  }
  .ruleZf {
    padding-left: 60px;
    line-height: 2;
    margin-bottom: 22px;
    color: #101611;
  }
}
</style>