账号管理还原

src/views/accountManagement/components/accountHome.vue

@@ -1,16 +1,555 @@
 <template>
-  <div>
-    <DataTable data-id="14" :rows="12" labelWidth="100px" />
+  <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 @click="authAccount(account)" class="loger cap-auth"></div>
+                  </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>
+    <!--新增/编辑-->
+    <Dialog :flag="editDialogVisible" width="508px" :show-flag="true">
+      <div class="airportInfoDialog dialog-public-background">
+        <div class="title">{{ editDialogTitle }}</div>
+        <div class="content">
+          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="130px" class="demo-ruleForm">
+            <el-form-item label="账号名称" prop="UserName">
+              <el-input v-model="ruleForm.UserName" size="medium" placeholder="请输入账号名称" />
+            </el-form-item>
+            <el-form-item label="账号密码" prop="UserPwd">
+              <div class="flex-wrap">
+                <el-input v-model="ruleForm.UserPwd" class="r25" disabled 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="UserDesc">
+              <el-input v-model="ruleForm.UserDesc" size="medium" type="textarea" :rows="3" placeholder="请输入角色描述" />
+            </el-form-item>
+            <el-form-item label="是否启用" prop="Status">
+              <el-radio v-model="ruleForm.Status" :label="1">是</el-radio>
+              <el-radio v-model="ruleForm.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 DataTable from '@/components/Table'
+import Search from '@/layout/components/Search'
+import Dialog from '@/layout/components/Dialog'
+import { GetAccountList, ChangeUserStatus, delAccount, getAccountDetails, editAccount, addAccount } from '@/api/Account'
+import { pwdProduce } from '@/utils/validate'
+import { mapGetters } from 'vuex'
 export default {
-  name: 'Account',
-  components: { DataTable },
+  components: { Search, Dialog },
+  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: {
+        // 协议信息表单
+        UserName: "",
+        Status: "",
+        UserDesc: "",
+        UserPwd: "",
+        AuthList: [],
+        GroupList: [],
+        RoleList: [],
+        TacList: [],
+      },
+      rules: {
+        // 协议信息表单验证
+        UserName: [
+          { required: true, message: "请输入账号名称", trigger: "blur" },
+        ],
+      },
+      ruleFormObj: {},
+      roleId: ''
+    }
+  },
+  computed: {
+    ...mapGetters(['systemSet']),
+    noMore () {
+      return this.PageIndex >= this.pages
+    },
+    disabled () {
+      return this.loading || this.noMore
+    }
+  },
+  watch: {
+    searchInfo (val) {
+      val.length === 0 && this.pageInit()
+    }
+  },
+  created () {
+    // 获取系统配置
+    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 {
+      console.log(this.searchInfo)
+      this.accountList()
+    }
+  },
+  mounted () {
+    this.resetPwd()
+  },
+  methods: {
+    // 随机生成密码
+    resetPwd () {
+      this.ruleForm.UserPwd = pwdProduce(this.pwdLengthBegin, this.pwdLengthEnd, this.pwdStruc)
+    },
+    // 编辑账号
+    async saveEditAccount () {
+      try {
+        const res = await editAccount(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)
+      }
+    },
+    // 新增账号
+    async saveAddAccount () {
+      try {
+        const res = await addAccount(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)
+      }
+    },
+    // 获取当前账号信息
+    async getAccountInfo () {
+      const res = await getAccountDetails({
+        UserId: this.roleId
+      })
+      if (res.code == 0) {
+        const { Status, UserDesc, UserName, UserPwd } = res.returnData
+        this.ruleForm.Status = Status
+        this.ruleForm.UserDesc = UserDesc
+        this.ruleForm.UserName = UserName
+        this.ruleForm.UserPwd = UserPwd
+      } else {
+        this.$message.error(res.message)
+      }
+    },
+    // 新增/编辑-确认
+    submitClickHandler () {
+      this.$refs["ruleForm"].validate((valid) => {
+        if (valid) {
+          if (this.editType == 'add') {
+            this.saveAddAccount()
+          } else {
+            this.saveEditAccount()
+          }
+        } 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 = ''
+    },
+    // 修改状态
+    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.editDialogVisible = true
+      this.editType = 'edit'
+      this.editDialogTitle = '编辑账号'
+      this.roleId = userId
+      this.getAccountInfo()
+    },
+    addAccount () {
+      this.editDialogTitle = '新增账号'
+      this.editDialogVisible = true
+      this.editType = 'add'
+      // this.$router.push({
+      //   path: '/account/accountAdd'
+      // })
+    },
+    // 重置
+    resetForm (formName) {
+      this.$refs[formName].resetFields()
+      this.editDialogVisible = false
+    },
+    // 获取列表
+    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)
+      }
+    },
+
+    // 账号权限
+    authAccount (item) {
+      this.roleId = item.userId
+      this.$router.push({
+        path: '/account/accountAuth',
+        query: { userId: this.roleId }
+      })
+    }
+  }
 }
 </script>
 
-<style>
-</style>
+<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%;
+        }
+        .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;
+      }
+    }
+  }
+  .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>

src/views/accountManagement/components/accountHome_TABLE.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <DataTable data-id="14" :rows="12" labelWidth="100px" />
+  </div>
+</template>
+
+<script>
+import DataTable from '@/components/Table'
+export default {
+  name: 'Account',
+  components: { DataTable },
+}
+</script>
+
+<style>
+</style>

src/views/accountManagement/components/accountHome_copy.vue

@@ -1,555 +0,0 @@
-<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 @click="authAccount(account)" class="loger cap-auth"></div>
-                  </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>
-    <!--新增/编辑-->
-    <Dialog :flag="editDialogVisible" width="508px" :show-flag="true">
-      <div class="airportInfoDialog dialog-public-background">
-        <div class="title">{{ editDialogTitle }}</div>
-        <div class="content">
-          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="130px" class="demo-ruleForm">
-            <el-form-item label="账号名称" prop="UserName">
-              <el-input v-model="ruleForm.UserName" size="medium" placeholder="请输入账号名称" />
-            </el-form-item>
-            <el-form-item label="账号密码" prop="UserPwd">
-              <div class="flex-wrap">
-                <el-input v-model="ruleForm.UserPwd" class="r25" disabled 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="UserDesc">
-              <el-input v-model="ruleForm.UserDesc" size="medium" type="textarea" :rows="3" placeholder="请输入角色描述" />
-            </el-form-item>
-            <el-form-item label="是否启用" prop="Status">
-              <el-radio v-model="ruleForm.Status" :label="1">是</el-radio>
-              <el-radio v-model="ruleForm.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 { GetAccountList, ChangeUserStatus, delAccount, getAccountDetails, editAccount, addAccount } from '@/api/Account'
-import { pwdProduce } from '@/utils/validate'
-import { mapGetters } from 'vuex'
-export default {
-  components: { Search, Dialog },
-  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: {
-        // 协议信息表单
-        UserName: "",
-        Status: "",
-        UserDesc: "",
-        UserPwd: "",
-        AuthList: [],
-        GroupList: [],
-        RoleList: [],
-        TacList: [],
-      },
-      rules: {
-        // 协议信息表单验证
-        UserName: [
-          { required: true, message: "请输入账号名称", trigger: "blur" },
-        ],
-      },
-      ruleFormObj: {},
-      roleId: ''
-    }
-  },
-  computed: {
-    ...mapGetters(['systemSet']),
-    noMore () {
-      return this.PageIndex >= this.pages
-    },
-    disabled () {
-      return this.loading || this.noMore
-    }
-  },
-  watch: {
-    searchInfo (val) {
-      val.length === 0 && this.pageInit()
-    }
-  },
-  created () {
-    // 获取系统配置
-    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 {
-      console.log(this.searchInfo)
-      this.accountList()
-    }
-  },
-  mounted () {
-    this.resetPwd()
-  },
-  methods: {
-    // 随机生成密码
-    resetPwd () {
-      this.ruleForm.UserPwd = pwdProduce(this.pwdLengthBegin, this.pwdLengthEnd, this.pwdStruc)
-    },
-    // 编辑账号
-    async saveEditAccount () {
-      try {
-        const res = await editAccount(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)
-      }
-    },
-    // 新增账号
-    async saveAddAccount () {
-      try {
-        const res = await addAccount(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)
-      }
-    },
-    // 获取当前账号信息
-    async getAccountInfo () {
-      const res = await getAccountDetails({
-        UserId: this.roleId
-      })
-      if (res.code == 0) {
-        const { Status, UserDesc, UserName, UserPwd } = res.returnData
-        this.ruleForm.Status = Status
-        this.ruleForm.UserDesc = UserDesc
-        this.ruleForm.UserName = UserName
-        this.ruleForm.UserPwd = UserPwd
-      } else {
-        this.$message.error(res.message)
-      }
-    },
-    // 新增/编辑-确认
-    submitClickHandler () {
-      this.$refs["ruleForm"].validate((valid) => {
-        if (valid) {
-          if (this.editType == 'add') {
-            this.saveAddAccount()
-          } else {
-            this.saveEditAccount()
-          }
-        } 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 = ''
-    },
-    // 修改状态
-    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.editDialogVisible = true
-      this.editType = 'edit'
-      this.editDialogTitle = '编辑账号'
-      this.roleId = userId
-      this.getAccountInfo()
-    },
-    addAccount () {
-      this.editDialogTitle = '新增账号'
-      this.editDialogVisible = true
-      this.editType = 'add'
-      // this.$router.push({
-      //   path: '/account/accountAdd'
-      // })
-    },
-    // 重置
-    resetForm (formName) {
-      this.$refs[formName].resetFields()
-      this.editDialogVisible = false
-    },
-    // 获取列表
-    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)
-      }
-    },
-
-    // 账号权限
-    authAccount (item) {
-      this.roleId = item.userId
-      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 {
-    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%;
-        }
-        .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;
-      }
-    }
-  }
-  .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>