账号管理页面修改

src/api/Account.js

@@ -1,3 +1,11 @@
+/*
+ * @Author: Badguy
+ * @Date: 2022-02-14 09:37:11
+ * @LastEditTime: 2022-02-14 17:50:17
+ * @LastEditors: your name
+ * @Description: 账户管理api
+ * have a nice day!
+ */
 import request from '@/utils/request'
 
 // 账号列表查询
@@ -10,8 +18,7 @@ export function GetAccountList(params) {
   })
 }
 
-//账号状态变更
-
+// 账号状态变更
 export function ChangeUserStatus(params) {
   return request({
     url: '/api/4A/ChangeUserStatus/v1',
@@ -21,7 +28,7 @@ export function ChangeUserStatus(params) {
   })
 }
 
-//账号删除
+// 账号删除
 export function delAccount(params) {
   return request({
     url: '/api/4A/DeleteUser/v1',
@@ -31,9 +38,8 @@ export function delAccount(params) {
   })
 }
 
-//账号新增保存
+// 账号新增保存
 export function addAccount(params) {
-
   return request({
     url: '/api/4A/SaveUser/v1',
     method: 'post',
@@ -42,7 +48,7 @@ export function addAccount(params) {
   })
 }
 
-//账号详情查询
+// 账号详情查询
 export function accDeaitls(params) {
   return request({
     url: '/api/4A/GetUserDetails/v1',
@@ -52,7 +58,7 @@ export function accDeaitls(params) {
   })
 }
 
-//账号编辑保存
+// 账号编辑保存
 export function deitAcc(params) {
   return request({
     url: '/api/4A/EditUser/v1',
@@ -61,3 +67,13 @@ export function deitAcc(params) {
     proxy: true
   })
 }
+
+// 根据账号组获取角色
+export function GetRoleByGroup(params) {
+  return request({
+    url: '/api/4A/GetRoleByGroup/v1',
+    method: 'post',
+    data: params,
+    proxy: true
+  })
+}

src/router/routes/routes-file-five.js

@@ -1,8 +1,8 @@
 /*
  * @Author: your name
  * @Date: 2022-01-06 10:05:44
- * @LastEditTime: 2022-01-09 10:14:43
- * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-02-14 10:16:54
+ * @LastEditors: your name
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \src\router\routes\routes-file-five.js
  */
@@ -19,61 +19,61 @@ const accountGroupRoutes = {
       title: '账号组管理'
     },
     children: [{
-        path: '/',
-        name: 'accountGroupHome',
-        component: () => import('@/views/accountGroupManagement/components/accountGroupHome'),
-        meta: {
-          title: '账号组管理'
-        }
-      },
-      {
-        path: 'Add',
-        name: 'accountGroupAdd',
-        component: () => import('@/views/accountGroupManagement/components/accountGroupAdd'),
-        meta: {
-          title: '新增账号组'
-        }
-      },
-      {
-        path: 'Edit',
-        name: 'accountGroupEdit',
-        component: () => import('@/views/accountGroupManagement/components/accountGroupEdit'),
-        meta: {
-          title: '编辑账号组'
-        }
-      }
-    ]
-  }]
-}
-
-const accountRoutes = {
-  path: '/',
-  component: Layout,
-  redirect: '/dashboard',
-  children: [{
-      path: 'account',
-      name: "account",
-      component: () => import('@/views/accountManagement/index'),
+      path: '/',
+      name: 'accountGroupHome',
+      component: () => import('@/views/accountGroupManagement/components/accountGroupHome'),
       meta: {
-        title: '账号管理'
+        title: '账号组管理'
       }
     },
     {
-      path: 'accountAdd',
-      name: 'accountAdd',
-      component: () => import('@/views/accountManagement/add'),
+      path: 'Add',
+      name: 'accountGroupAdd',
+      component: () => import('@/views/accountGroupManagement/components/accountGroupAdd'),
       meta: {
-        title: '新增账号'
+        title: '新增账号组'
       }
     },
     {
-      path: 'accountEdit',
-      name: 'accountEdit',
-      component: () => import('@/views/accountManagement/edit'),
+      path: 'Edit',
+      name: 'accountGroupEdit',
+      component: () => import('@/views/accountGroupManagement/components/accountGroupEdit'),
       meta: {
-        title: '编辑账号'
+        title: '编辑账号组'
       }
     }
+    ]
+  }]
+}
+
+const accountRoutes = {
+  path: '/',
+  component: Layout,
+  redirect: '/dashboard',
+  children: [{
+    path: 'account',
+    name: 'account',
+    component: () => import('@/views/accountManagement/index'),
+    meta: {
+      title: '账号管理'
+    }
+  },
+  {
+    path: 'accountAdd',
+    name: 'accountAdd',
+    component: () => import('@/views/accountManagement/add'),
+    meta: {
+      title: '新增账号'
+    }
+  },
+  {
+    path: 'accountEdit',
+    name: 'accountEdit',
+    component: () => import('@/views/accountManagement/edit'),
+    meta: {
+      title: '编辑账号'
+    }
+  }
 
   ]
 }

src/store/modules/app.js

@@ -1,8 +1,8 @@
 /*
  * @Author: your name
  * @Date: 2021-10-14 17:17:53
- * @LastEditTime: 2021-12-07 15:22:20
- * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2022-02-14 17:19:26
+ * @LastEditors: your name
  * @Description: In User Settings Edit
  * @FilePath: \Foshan4A\src\store\modules\app.js
  */
@@ -18,7 +18,7 @@ const state = {
   pwdflag: false,
   outflag: false,
   outcheck: false,
-  systemSet:Cookies.get('systemSet') != null ? Cookies.get('systemSet') : null,
+  systemSet: Cookies.get('systemSet') != null ? Cookies.get('systemSet') : null,
 }
 const mutations = {
   TOGGLE_SIDEBAR: state => {
@@ -51,7 +51,7 @@ const mutations = {
   TOGGLE_OUTCHECK: (state, outcheck) => {
     state.outcheck = outcheck
   },
-  SYSTEM_SET:(state, systemSet) => {
+  SYSTEM_SET: (state, systemSet) => {
     state.systemSet = systemSet
     Cookies.set('systemSet', systemSet)
   }
@@ -79,7 +79,7 @@ const actions = {
   toggleOutcheck ({ commit }, outcheck) {
     commit('TOGGLE_OUTCHECK', outcheck)
   },
-  getSystemSet({ commit }, systemSet){
+  getSystemSet({ commit }, systemSet) {
     commit('SYSTEM_SET', systemSet)
   }
 }

src/views/accountManagement/add.vue

@@ -4,39 +4,56 @@
       <div class="title">
         <div class="tltleLeft">新增账号</div>
         <div>
-          <button type="submmit" class="saveBtn" @click="addAcc">保存</button>
+          <button
+            type="submmit"
+            class="saveBtn"
+            @click="addAcc"
+          >保存</button>
         </div>
       </div>
       <div class="titleContent">
-        <el-form ref="form" :model="form" label-width="80px">
+        <el-form
+          ref="form"
+          :model="form"
+          label-width="80px"
+        >
           <el-row :gutter="40">
             <el-col :span="5">
-              <el-form-item label="账号名称" prop="name">
+              <el-form-item
+                label="账号名称"
+                prop="name"
+              >
                 <el-input
-                  maxlength="32"
                   v-model="form.UserName"
+                  maxlength="32"
                   placeholder="请输入名称"
                   size="small"
-                ></el-input>
+                />
               </el-form-item>
             </el-col>
             <el-col :span="5">
-              <el-form-item label="登录密码" prop="UserPwd">
+              <el-form-item
+                label="登录密码"
+                prop="UserPwd"
+              >
                 <el-input
                   v-model="form.UserPwd"
                   placeholder="fLqec84dU3"
                   size="small"
-                ></el-input>
+                />
               </el-form-item>
             </el-col>
             <el-col :span="8">
-              <el-form-item label="描述" prop="UserDesc">
+              <el-form-item
+                label="描述"
+                prop="UserDesc"
+              >
                 <el-input
-                  maxlength="128"
                   v-model="form.UserDesc"
+                  maxlength="128"
                   placeholder="描述内容描述内容描述内容描述内容描述内容描述内容"
                   size="small"
-                ></el-input>
+                />
               </el-form-item>
             </el-col>
           </el-row>
@@ -46,89 +63,97 @@
     <div class="content">
       <!-- 用户组和角色未开启 -->
       <el-row
-        :gutter="24"
         v-if="
-          this.systemSetuser.OpenRole === 0 &&
-          this.systemSetuser.OpenGroup === 0
+          systemSetuser.OpenRole === 0 &&
+            systemSetuser.OpenGroup === 0
         "
+        :gutter="24"
       >
         <el-col :span="8">
           <div class="part">
             <Permissiontree
-              @getTreeData="getTreeDatas"
-              :checkedKeys="checkedKeys"
-              :queryType="group"
-              :queryId="objID"
+              :checked-keys="checkedKeys"
+              :query-type="group"
+              :query-id="objID"
               title="权限树"
+              @get-tree-data="getTreeDatas"
             />
           </div>
         </el-col>
         <el-col :span="8">
           <div class="part">
-            <Rulesofcompetency @getData="getData" title="权限规则" />
+            <Rulesofcompetency
+              title="权限规则"
+              @get-data="getData"
+            />
           </div>
         </el-col>
         <el-col :span="8">
           <div class="part">
-            <loginpolicy @getCheckedList="getCheckedList"></loginpolicy>
+            <loginpolicy @get-checked-list="getCheckedList" />
           </div>
         </el-col>
       </el-row>
       <!-- 只开启用户组 -->
       <el-row
-        :gutter="24"
         v-if="
-          this.systemSetuser.OpenRole === 0 && this.systemSetuser.OpenGroup != 0
+          systemSetuser.OpenRole === 0
+            && systemSetuser.OpenGroup !== 0
         "
+        :gutter="24"
       >
         <el-col :span="8">
           <div class="part">
             <Organization
               title="所属账号组"
               :data="data"
-              :defaultProps="defaultProps"
+              :default-props="defaultProps"
               :nodekey="'GroupId'"
-              :checkedIdList="checkedIdList"
-              @getCheckedData="getTreeData"
+              :checked-id-list="checkedIdList"
+              @get-checked-data="getTreeData"
             />
           </div>
         </el-col>
         <el-col :span="8">
           <div class="part">
             <Permissiontree
-              @getTreeData="getTreeDatas"
-              :checkedKeys="checkedKeys"
-              :queryType="group"
-              :queryId="objID"
+              :checked-keys="checkedKeys"
+              :query-type="group"
+              :query-id="objID"
               title="权限树"
+              @get-tree-data="getTreeDatas"
             />
           </div>
         </el-col>
         <el-col :span="8">
           <div class="part2">
-            <Rulesofcompetency @getData="getData" title="权限规则" />
+            <Rulesofcompetency
+              title="权限规则"
+              @get-data="getData"
+            />
           </div>
 
           <div class="part3">
-            <loginpolicy @getCheckedList="getCheckedList"></loginpolicy>
+            <loginpolicy @get-checked-list="getCheckedList" />
           </div>
         </el-col>
       </el-row>
       <!-- 只开启角色 -->
       <el-row
-        :gutter="24"
         v-if="
-          this.systemSetuser.OpenRole != 0 && this.systemSetuser.OpenGroup === 0
+          systemSetuser.OpenRole !== 0
+            && systemSetuser.OpenGroup === 0
         "
+        :gutter="24"
       >
         <el-col :span="8">
           <div class="part">
             <Rolelists
               title="角色列表"
-              @checkChange="checkChange"
-              :dataList="roleList"
-              @checkClick="roleClick"
+              :data-list="roleList"
               :number="8"
+              @check-click="roleClick"
+              @check-change="checkChange"
             />
           </div>
         </el-col>
@@ -136,7 +161,7 @@
           <div class="part">
             <permissionlist
               title="权限列表"
-              :RoleList="powerList"
+              :role-list="powerList"
               :check="true"
               class="hucPower"
               @Competen="Competen"
@@ -145,27 +170,28 @@
         </el-col>
         <el-col :span="8">
           <div class="part">
-            <loginpolicy @getCheckedList="getCheckedList"></loginpolicy>
+            <loginpolicy @getCheckedList="getCheckedList" />
           </div>
         </el-col>
       </el-row>
 
       <!-- 角色和用户组都开启 -->
       <el-row
-        :gutter="24"
         v-if="
-          this.systemSetuser.OpenRole != 0 && this.systemSetuser.OpenGroup != 0
+          systemSetuser.OpenRole !== 0
+            && systemSetuser.OpenGroup !== 0
         "
+        :gutter="24"
       >
         <el-col :span="8">
           <div class="part">
             <Organization
               title="所属账号组"
               :data="data"
-              :defaultProps="defaultProps"
+              :default-props="defaultProps"
               :nodekey="'GroupId'"
-              @getCheckedData="getTreeData"
-              :checkedIdList="checkedIdList"
+              :checked-id-list="checkedIdList"
+              @get-checked-data="getTreeData"
             />
           </div>
         </el-col>
@@ -173,10 +199,10 @@
           <div class="part">
             <Rolelists
               title="角色列表"
-              @checkChange="checkChange"
-              :dataList="roleList"
-              @checkClick="roleClick"
+              :data-list="roleList"
               :number="8"
+              @checkClick="roleClick"
+              @check-change="checkChange"
             />
           </div>
         </el-col>
@@ -184,14 +210,14 @@
           <div class="part2">
             <permissionlist
               title="权限列表"
-              :RoleList="powerList"
-              :check="true"
               class="hucPower"
+              :role-list="powerList"
+              :check="true"
               @Competen="Competen"
             />
           </div>
           <div class="part3">
-            <loginpolicy @getCheckedList="getCheckedList"></loginpolicy>
+            <loginpolicy @getCheckedList="getCheckedList" />
           </div>
         </el-col>
       </el-row>
@@ -200,42 +226,50 @@
 </template>
 
 <script>
-import Organization from "@/components/usergrouptree/index.vue";
-import Permissiontree from "@/components/permissiontree/index.vue";
-import Rulesofcompetency from "@/components/rulesofcompetency/index.vue";
-import loginpolicy from "@/components/loginpolicy/index.vue";
-import Rolelists from "@/components/rolelist/index.vue";
-import permissionlist from "@/components/permissionlist/index.vue";
-import { addAccount, GetRoleByGroup } from "@/api/Account";
-import { RoleAuths } from "@/api/apiAuthority";
-import { getUserOne } from "@/api/AccountGroup.js";
-import treeData from "./minixs/treeData";
-import { mapGetters } from "vuex";
+import Organization from '@/components/usergrouptree/index.vue'
+import Permissiontree from '@/components/permissiontree/index.vue'
+import Rulesofcompetency from '@/components/rulesofcompetency/index.vue'
+import loginpolicy from '@/components/loginpolicy/index.vue'
+import Rolelists from '@/components/rolelist/index.vue'
+import permissionlist from '@/components/permissionlist/index.vue'
+import { addAccount, GetRoleByGroup } from '@/api/Account'
+import { RoleAuths } from '@/api/apiAuthority'
+import treeData from './minixs/treeData'
+// import { getUserOne } from '@/api/AccountGroup.js'
+// import { mapGetters } from 'vuex'
 export default {
+  components: {
+    Organization,
+    Permissiontree,
+    Rulesofcompetency,
+    Rolelists,
+    permissionlist,
+    loginpolicy
+  },
   mixins: [treeData],
   data() {
     return {
       checkedAuthList: [],
       GroupId: this.$route.query.GroupId,
       dialogVisible: false,
-      marginB: "20px",
-      GroupId: null,
+      marginB: '20px',
+      // GroupId: null,
       OpenRole: 1,
       OpenGroup: 0,
-      data: [], //账号组
-      TacList: [], //登录策略
-      AuthList: [], //授权信息
-      roleList: [], //角色
+      data: [], // 账号组
+      TacList: [], // 登录策略
+      AuthList: [], // 授权信息
+      roleList: [], // 角色
       PageIndex: 1,
       PageSize: 100,
-      checkRoles: [], //选中的角色
-      treeData: [], //权限树数据
-      treeData1: [], //权限树数据
-      powerList: [], //权限列表
-      loginList: [], //选中展示登录策略
-      objID: "1",
-      group: "group",
-      orgId: "", //账号组点击id
+      checkRoles: [], // 选中的角色
+      treeData: [], // 权限树数据
+      treeData1: [], // 权限树数据
+      powerList: [], // 权限列表
+      loginList: [], // 选中展示登录策略
+      objID: '1',
+      group: 'group',
+      orgId: '', // 账号组点击id
       checkedIdList: [],
       CheckedList: [],
       checkedKeys: [],
@@ -245,54 +279,88 @@ export default {
       PwdStruc: null,
       pwd: null,
       form: {
-        UserName: null, //账号名字
-        UserPwd: null, //密码
-        UserDesc: null, //描述
-        GroupId: "", //账号组Id
+        UserName: null, // 账号名字
+        UserPwd: null, // 密码
+        UserDesc: null, // 描述
+        GroupId: '' // 账号组Id
       },
       rules: {
         UserName: [
-          { required: true, message: "请输入账号名称", trigger: "blur" },
-          { min: 1, max: 32, message: "长度在 1到 32 个字符", trigger: "blur" },
+          { required: true, message: '请输入账号名称', trigger: 'blur' },
+          { min: 1, max: 32, message: '长度在 1到 32 个字符', trigger: 'blur' }
         ],
         UserPwd: [
-          { required: true, message: "请输入账号密码", trigger: "blur" },
-          { min: 8, message: "长度最少8个字符", trigger: "blur" },
-        ],
-        UserDesc: [
-          { min: 1, max: 128, message: "长度最多128个字符", trigger: "blur" },
+          { required: true, message: '请输入账号密码', trigger: 'blur' },
+          { min: 8, message: '长度最少8个字符', trigger: 'blur' }
         ],
+        UserDesc: [{ min: 1, max: 128, message: '长度最多128个字符', trigger: 'blur' }]
       },
       defaultProps: {
-        children: "children",
-        label: "GroupName",
+        children: 'children',
+        label: 'GroupName'
       },
       systemSetuser: null,
-      AppId: "",
-    };
+      AppId: ''
+    }
   },
-
-  components: {
-    Organization,
-    Permissiontree,
-    Rulesofcompetency,
-    Rolelists,
-    permissionlist,
-    loginpolicy,
+  watch: {
+    dataList: {
+      handler(val) {
+        const arr = val.children
+        this.decompose(arr, this.AppId)
+        if (Array.isArray(this.dataObj)) {
+          this.data = this.dataObj
+        } else {
+          this.data = [this.dataObj]
+        }
+        this.RoleList.forEach(item => {
+          this.groupRoleList.forEach((value, index) => {
+            if (item.RoleId === value.RoleId) {
+              this.checkedRoleKeys.push(index)
+            }
+          })
+        })
+      },
+      deep: true
+    }
+  },
+  mounted() {
+    this.form.UserPwd = this.generatePassword(this.PwdStruc, this.PwdLengthBegin, this.PwdLengthEnd)
+  },
+  created() {
+    const { GroupId } = this.$route.query
+    this.AppId = GroupId
+    this.objID = GroupId
+    let obj
+    if (typeof this.$store.state.app.systemSet === 'string') {
+      obj = JSON.parse(this.$store.state.app.systemSet)
+    } else {
+      obj = this.$store.state.app.systemSet
+    }
+    this.systemSetuser = obj
+    const { OpenRole, OpenGroup, PwdStruc, PwdLengthBegin, PwdLengthEnd } = obj
+    this.openRole = OpenRole
+    this.OpenGroup = OpenGroup
+    this.PwdStruc = PwdStruc
+    this.PwdLengthBegin = PwdLengthBegin
+    this.PwdLengthEnd = PwdLengthEnd
+    if (OpenRole) {
+      this.title = '角色'
+    }
   },
   methods: {
-    //账号新增
+    // 账号新增
     async addAcc() {
-      this.checkedAuthList.forEach((item) => {
-        this.treeData1.push(item.AuthList);
-      });
+      this.checkedAuthList.forEach(item => {
+        this.treeData1.push(item.AuthList)
+      })
       this.treeData1.forEach((item, index) => {
-        this.$store.getters.authArrs.forEach((item2) => {
-          if (item.AuthId == item2.AuthId) {
-            this.treeData1[index] = item2.AuthList;
+        this.$store.getters.authArrs.forEach(item2 => {
+          if (item.AuthId === item2.AuthId) {
+            this.treeData1[index] = item2.AuthList
           }
-        });
-      });
+        })
+      })
       try {
         const res = await addAccount({
           UserName: this.form.UserName,
@@ -303,40 +371,39 @@ export default {
           UserId: this.userId,
           AuthTo: this.treeData1,
           TacList: this.CheckedList ? this.CheckedList : [],
-          AuthList: this.treeData1,
-        });
+          AuthList: this.treeData1
+        })
         if (res.code === 0) {
-          this.$message.success(res.message);
+          this.$message.success(res.message)
           setTimeout(() => {
-            this.$router.push("/account");
-          }, 2000);
+            this.$router.push('/account')
+          }, 2000)
         } else {
-          this.$message.error(res.message);
+          this.$message.error(res.message)
         }
       } catch (error) {
-        console.log("出错了", error);
+        console.log('出错了', error)
       }
     },
-
-    delate: function (index) {
-      this.dialogVisible = true;
+    delete(index) {
+      this.dialogVisible = true
     },
 
-    //获取权限树回调
+    // 获取权限树回调
     getTreeDatas(arr) {
-      // this.treeData = arr;
-      this.checkedAuthList = arr;
+      //  this.treeData = arr;
+      this.checkedAuthList = arr
     },
     getCheckedList(data) {
-      this.CheckedList = data;
+      this.CheckedList = data
     },
-    //获取选中的树数据
+    // 获取选中的树数据
     getTreeData(arr) {
-      this.checkTrees = arr;
+      this.checkTrees = arr
 
-      this.checkTrees.forEach((item) => {
-        this.orgId = item.GroupId;
-      });
+      this.checkTrees.forEach(item => {
+        this.orgId = item.GroupId
+      })
       // let objArr = arr[arr.length - 1];
       // if (objArr) {
       //   this.objID = objArr.GroupId + "";
@@ -344,176 +411,124 @@ export default {
       // } else {
       //   this.queryRole();
       // }
-      if (this.checkTrees != "") {
-        this.queryRole();
+      if (this.checkTrees !== '') {
+        this.queryRole()
       } else {
-        this.roleList = [];
+        this.roleList = []
       }
     },
 
-    //获取权限规则
+    // 获取权限规则
     getData(obj) {
-      this.rulesObj = obj;
+      this.rulesObj = obj
     },
-    //获取指定数据
+    // 获取指定数据
     decompose(data, id) {
       for (let i = 0; i < data.length; i++) {
-        if (data[i].GroupId == id) {
-          this.dataObj = data[i];
+        if (data[i].GroupId === id) {
+          this.dataObj = data[i]
         } else if (data[i].children && data[i].children.length > 0) {
-          this.decompose(data[i].children, id);
+          this.decompose(data[i].children, id)
         }
       }
     },
 
-    //点击角色后
+    // 点击角色后
     roleClick(data) {
       try {
-        let params = {
-          RoleId: data.RoleId,
-        };
-        RoleAuths(params).then((result) => {
-          this.powerList = result.returnData;
-        });
+        const params = {
+          RoleId: data.RoleId
+        }
+        RoleAuths(params).then(result => {
+          this.powerList = result.returnData
+        })
       } catch (error) {
-        console.log("RoleAuths");
-        console.log(error);
+        console.log('RoleAuths')
+        console.log(error)
       }
     },
     Competen(data) {
-      this.$emit("Competen", data);
+      this.$emit('Competen', data)
     },
-    //角色列表
+    // 角色列表
     async queryRole() {
       try {
         const res = await GetRoleByGroup({
-          GroupId: this.orgId,
-        });
+          GroupId: this.orgId
+        })
         if (res.code === 0) {
-          const arr = res.returnData;
-          const userArr = [];
-          arr.forEach((item) => {
-            item.name = item.RoleName;
+          const arr = res.returnData
+          const userArr = []
+          arr.forEach(item => {
+            item.name = item.RoleName
             if (item.IsSelected) {
-              userArr.push(item);
+              userArr.push(item)
             }
-          });
-          this.roleList = userArr;
+          })
+          this.roleList = userArr
         } else {
-          this.$message.error(res.message);
+          this.$message.error(res.message)
         }
       } catch (error) {
-        console.log("出错了", error);
+        console.log('出错了', error)
       }
     },
     generatePassword(rules, minNum, maxNum) {
-      var rulesArr = rules.split("");
-      var rulesArrLnArr = [];
-      var pwd = "";
-      var numbers = "0123456789";
-      var lower = "abcdefghijklmnopqrstuvwxyz";
-      var upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
-      var others = "~!@#$%^&*()_";
+      var rulesArr = rules.split('')
+      var rulesArrLnArr = []
+      var pwd = ''
+      var numbers = '0123456789'
+      var lower = 'abcdefghijklmnopqrstuvwxyz'
+      var upper = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
+      var others = '~!@#$%^&*()_'
 
       function rand(min, max) {
-        return Math.random() * (max - min) + min;
+        return Math.random() * (max - min) + min
       }
-      var pwdLen = parseInt(rand(minNum, maxNum)); //随机生成密码长度10-12位。 // alert("密码长度：" + pwdLen);
-      var item = new Array(pwdLen); //存放密码的类型 数字（1），小写（2），大写（3），特殊字符（4）
+      var pwdLen = parseInt(rand(minNum, maxNum)) // 随机生成密码长度10-12位。 //  alert("密码长度：" + pwdLen);
+      var item = new Array(pwdLen) // 存放密码的类型 数字（1），小写（2），大写（3），特殊字符（4）
       for (let i = 0; i < rulesArr.length; i++) {
-        if (rulesArr[i] == "1") {
-          rulesArrLnArr.push(i + 1 + "");
+        if (rulesArr[i] === '1') {
+          rulesArrLnArr.push(i + 1 + '')
         }
       }
       for (let i = 0; i < rulesArrLnArr.length; i++) {
-        item[rulesArrLnArr[i]] = rulesArrLnArr[i] + "";
+        item[rulesArrLnArr[i]] = rulesArrLnArr[i] + ''
       }
       for (let i = 0; i < pwdLen; i++) {
-        if (rulesArrLnArr.indexOf(i + "") == -1) {
-          item[i] = "";
-          item[i] +=
-            rulesArrLnArr[
-              parseInt(Math.random() * (rulesArrLnArr.length - 0) + 0)
-            ]; //其余部分随机生成1-4的数字。
+        if (rulesArrLnArr.indexOf(i + '') === -1) {
+          item[i] = ''
+          item[i] += rulesArrLnArr[parseInt(Math.random() * (rulesArrLnArr.length - 0) + 0)] // 其余部分随机生成1-4的数字。
         }
-      } //打乱次序，重新排序，否则密码第四位永远是特殊符号。
-      item.sort(function () {
-        return 0.5 - Math.random();
-      }); //返回0 两个数位置不变；小于0 就交换位置；大于0就不交换位置
+      } // 打乱次序，重新排序，否则密码第四位永远是特殊符号。
+      item.sort(function() {
+        return 0.5 - Math.random()
+      }) // 返回0 两个数位置不变；小于0 就交换位置；大于0就不交换位置
 
       for (let j = 0; j < pwdLen; j++) {
-        if (item[j] == "4") {
-          pwd += numbers.charAt(Math.random() * (numbers.length - 1) + 1);
-        } else if (item[j] == "2") {
-          pwd += lower.charAt(Math.random() * (lower.length - 1) + 1);
-        } else if (item[j] == "1") {
-          pwd += upper.charAt(Math.random() * (upper.length - 1) + 1);
-        } else if (item[j] == "3") {
-          pwd += others.charAt(Math.random() * (others.length - 1) + 1);
+        if (item[j] === '4') {
+          pwd += numbers.charAt(Math.random() * (numbers.length - 1) + 1)
+        } else if (item[j] === '2') {
+          pwd += lower.charAt(Math.random() * (lower.length - 1) + 1)
+        } else if (item[j] === '1') {
+          pwd += upper.charAt(Math.random() * (upper.length - 1) + 1)
+        } else if (item[j] === '3') {
+          pwd += others.charAt(Math.random() * (others.length - 1) + 1)
         }
       }
-      return pwd;
+      return pwd
     },
 
-    //角色选取
+    // 角色选取
     checkChange(arr) {
-      const datas = [];
+      const datas = []
       for (let i = 0; i < arr.length; i++) {
-        datas.push(this.roleList[arr[i]]);
+        datas.push(this.roleList[arr[i]])
       }
-      this.checkRoles = datas;
-    },
-  },
-  mounted() {
-    this.form.UserPwd = this.generatePassword(
-      this.PwdStruc,
-      this.PwdLengthBegin,
-      this.PwdLengthEnd
-    );
-  },
-  created() {
-    const { GroupId } = this.$route.query;
-    this.AppId = GroupId;
-    this.objID = GroupId;
-    let obj;
-    if (typeof this.$store.state.app.systemSet == "string") {
-      obj = JSON.parse(this.$store.state.app.systemSet);
-    } else {
-      obj = this.$store.state.app.systemSet;
-    }
-    this.systemSetuser = obj;
-    const { OpenRole, OpenGroup, PwdStruc, PwdLengthBegin, PwdLengthEnd } = obj;
-    this.openRole = OpenRole;
-    this.OpenGroup = OpenGroup;
-    this.PwdStruc = PwdStruc;
-    this.PwdLengthBegin = PwdLengthBegin;
-    this.PwdLengthEnd = PwdLengthEnd;
-    if (OpenRole) {
-      this.title = "角色";
+      this.checkRoles = datas
     }
-  },
-  watch: {
-    dataList: {
-      handler(val) {
-        const arr = val.children;
-        this.decompose(arr, this.AppId);
-        if (Array.isArray(this.dataObj)) {
-          this.data = this.dataObj;
-        } else {
-          this.data = [this.dataObj];
-        }
-        this.RoleList.forEach((item) => {
-          this.groupRoleList.forEach((value, index) => {
-            if (item.RoleId == value.RoleId) {
-              this.checkedRoleKeys.push(index);
-            }
-          });
-        });
-      },
-      deep: true,
-    },
-  },
-};
+  }
+}
 </script>
 
 <style lang="scss" scoped>

src/views/accountManagement/edit.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="pageBody">
-    <div class="topPart">
+  <div class="account-edit">
+    <div class="account-edit-header">
       <div class="title">
         <div class="tltleLeft">编辑账号</div>
         <!-- <div class="isUsed">
@@ -18,44 +18,63 @@
         </div> -->
         <div>
           <!-- <button type="submmit" class="delBtn" @click="delate">删除</button> -->
-          <button type="submmit" class="saveBtn" @click="editAcc">保存</button>
+          <button
+            type="submmit"
+            class="saveBtn"
+            @click="editAcc"
+          >保存</button>
         </div>
       </div>
       <div class="titleContent">
-        <el-form ref="form" :model="form" label-width="80px">
+        <el-form
+          ref="form"
+          :model="form"
+          label-width="80px"
+        >
           <el-row :gutter="40">
             <el-col :span="5">
-              <el-form-item label="账号名称" prop="name">
+              <el-form-item
+                label="账号名称"
+                prop="name"
+              >
                 <el-input
                   v-model="form.name"
                   maxlength="32"
                   placeholder="请输入名称"
                   size="small"
-                ></el-input>
+                />
               </el-form-item>
             </el-col>
             <el-col :span="5">
-              <el-form-item label="登录密码" prop="passward">
+              <el-form-item
+                label="登录密码"
+                prop="passward"
+              >
                 <el-input
                   v-model="form.passward"
                   placeholder="*******"
                   size="small"
-                ></el-input>
+                />
               </el-form-item>
             </el-col>
             <el-col :span="2">
-              <el-button class="resetPass" size="small" @click="rest"
-                >重置密码</el-button
-              >
+              <el-button
+                class="resetPass"
+                size="small"
+                @click="rest"
+              >重置密码</el-button>
             </el-col>
             <el-col :span="8">
-              <el-form-item label="描述" prop="diesc">
+              <el-form-item
+                label="描述"
+                prop="diesc"
+              >
                 <el-input
                   v-model="form.diesc"
                   maxlength="128"
                   placeholder="描述内容描述内容描述内容描述内容描述内容描述内容"
                   size="small"
-                ></el-input>
+                />
               </el-form-item>
             </el-col>
           </el-row>
@@ -66,155 +85,164 @@
     <div class="content">
       <!-- 用户组和角色未开启 -->
       <el-row
-        :gutter="24"
         v-if="
-          this.systemSetuser.OpenRole === 0 &&
-          this.systemSetuser.OpenGroup === 0
+          systemSetuser.OpenRole === 0
+            && systemSetuser.OpenGroup === 0
         "
+        :gutter="24"
       >
         <el-col :span="8">
           <div class="part">
-            <Permissiontree
-              @getTreeData="getTreeDatas"
-              :checkedKeys="powerT"
-              :queryType="group"
-              :queryId="objID"
+            <PermissionTree
               title="权限树"
+              :checked-keys="powerT"
+              :query-type="group"
+              :query-id="objID"
+              @get-tree-data="getTreeDatas"
             />
           </div>
         </el-col>
         <el-col :span="8">
           <div class="part">
-            <Rulesofcompetency @getData="getData" title="权限规则" />
+            <RulesOfCompetency
+              title="权限规则"
+              @get-data="getData"
+            />
           </div>
         </el-col>
         <el-col :span="8">
           <div class="part">
-            <loginpolicy
-              @getCheckedList="getCheckedList"
-              :checkedList="loginList"
-            ></loginpolicy>
+            <LoginPolicy
+              :checked-list="loginList"
+              @get-checked-list="getCheckedList"
+            />
           </div>
         </el-col>
       </el-row>
       <!-- 角色和用户组都开启 -->
       <el-row
-        :gutter="24"
         v-if="
-          this.systemSetuser.OpenRole != 0 && this.systemSetuser.OpenGroup != 0
+          systemSetuser.OpenRole !== 0
+            && systemSetuser.OpenGroup !== 0
         "
+        :gutter="24"
       >
         <el-col :span="8">
           <div class="part">
             <Organization
               title="所属账号组"
               :data="data"
-              :defaultProps="defaultProps"
+              :default-props="defaultProps"
               :nodekey="'GroupId'"
-              @getCheckedData="getTreeData"
-              :checkedIdList="checkedIdList"
+              :checked-id-list="checkedIdList"
+              @get-checked-data="getTreeData"
               @click="getId(arrs)"
             />
           </div>
         </el-col>
         <el-col :span="8">
           <div class="part">
-            <rolelists
+            <RoleLists
               title="角色列表"
-              @checkClick="roleClick"
-              @checkChange="checkChange"
-              :dataList="roleList"
-              :checkBoxList="checkRole"
+              :data-list="roleList"
+              :check-box-list="checkRole"
               :number="8"
+              @check-click="roleClick"
+              @check-change="checkChange"
             />
           </div>
         </el-col>
         <el-col :span="8">
           <div class="part2">
-            <permissionlist
+            <PermissioLlist
               title="权限列表"
-              :RoleList="powerList"
-              :check="true"
               class="hucPower"
+              :role-list="powerList"
+              :check="true"
               @Competen="Competen"
             />
           </div>
           <div class="part3">
-            <loginpolicy
-              @getCheckedList="getCheckedList"
-              :checkedList="loginList"
-            ></loginpolicy>
+            <LoginPolicy
+              :checked-list="loginList"
+              @get-checked-list="getCheckedList"
+            />
           </div>
         </el-col>
       </el-row>
       <!-- 只开启用户组 -->
       <el-row
-        :gutter="24"
         v-if="
-          this.systemSetuser.OpenGroup != 0 && this.systemSetuser.OpenRole === 0
+          systemSetuser.OpenGroup !== 0
+            && systemSetuser.OpenRole === 0
         "
+        :gutter="24"
       >
         <el-col :span="8">
           <div class="part">
             <Organization
               title="所属账号组"
               :data="data"
-              :defaultProps="defaultProps"
+              :default-props="defaultProps"
               :nodekey="'GroupId'"
-              @getCheckedData="getTreeData"
-              :checkedIdList="checkedIdList"
+              :checked-id-list="checkedIdList"
+              @get-checked-data="getTreeData"
               @click="getId(arrs)"
             />
           </div>
         </el-col>
         <el-col :span="8">
           <div class="part">
-            <Permissiontree
-              @getTreeData="getTreeDatas"
-              :checkedKeys="powerT"
-              :queryType="group"
-              :queryId="objID"
+            <PermissionTree
+              :checked-keys="powerT"
+              :query-type="group"
+              :query-id="objID"
               title="权限树"
+              @get-tree-data="getTreeDatas"
             />
           </div>
         </el-col>
         <el-col :span="8">
           <div class="part2">
-            <Rulesofcompetency @getData="getData" title="权限规则" />
+            <RulesOfCompetency
+              title="权限规则"
+              @get-data="getData"
+            />
           </div>
 
           <div class="part3">
-            <loginpolicy
-              @getCheckedList="getCheckedList"
-              :checkedList="loginList"
-            ></loginpolicy>
+            <LoginPolicy
+              :checked-list="loginList"
+              @get-checked-list="getCheckedList"
+            />
           </div>
         </el-col>
       </el-row>
       <!-- 只开启角色 -->
       <el-row
-        :gutter="24"
         v-if="
-          this.systemSetuser.OpenGroup === 0 && this.systemSetuser.OpenRole != 0
+          systemSetuser.OpenGroup === 0
+            && systemSetuser.OpenRole != 0
         "
+        :gutter="24"
       >
         <el-col :span="8">
           <div class="part">
-            <rolelists
+            <RoleLists
               title="角色列表"
-              @checkChange="checkChange"
-              @checkClick="roleClick"
-              :dataList="roleList"
-              :checkBoxList="checkRole"
+              :data-list="roleList"
+              :check-box-list="checkRole"
               :number="8"
+              @check-change="checkChange"
+              @check-click="roleClick"
             />
           </div>
         </el-col>
         <el-col :span="8">
           <div class="part">
-            <permissionlist
+            <PermissioLlist
               title="权限列表"
-              :RoleList="powerList"
+              :role-list="powerList"
               :check="true"
               class="hucPower"
               @Competen="Competen"
@@ -223,10 +251,10 @@
         </el-col>
         <el-col :span="8">
           <div class="part">
-            <loginpolicy
-              @getCheckedList="getCheckedList"
-              :checkedList="loginList"
-            ></loginpolicy>
+            <LoginPolicy
+              :checked-list="loginList"
+              @get-checked-list="getCheckedList"
+            />
           </div>
         </el-col>
       </el-row>
@@ -236,7 +264,11 @@
         <div class="title">删除账号</div>
         <div class="content">是否确定要删除该账号？</div>
         <div class="foot right t30">
-          <el-button size="medium" type="danger" class="r24">删除</el-button>
+          <el-button
+            size="medium"
+            type="danger"
+            class="r24"
+          >删除</el-button>
           <el-button size="medium">取消</el-button>
         </div>
       </div>
@@ -245,282 +277,271 @@
 </template>
 
 <script>
-import Organization from "@/components/usergrouptree/index.vue";
-import Permissiontree from "@/components/permissiontree/index.vue";
-import Rulesofcompetency from "@/components/rulesofcompetency/index.vue";
-import loginpolicy from "@/components/loginpolicy/index.vue";
-import rolelists from "@/components/rolelist/index.vue";
-import permissionlist from "@/components/permissionlist/index.vue";
-import Dialog from "@/layout/components/Dialog";
-import { QueryRole, RoleAuths } from "@/api/apiAuthority";
-import { getUserOne } from "@/api/AccountGroup.js";
-import { mapGetters } from "vuex";
+import Organization from '@/components/usergrouptree/index.vue'
+import PermissionTree from '@/components/permissiontree/index.vue'
+import RulesOfCompetency from '@/components/rulesofcompetency/index.vue'
+import LoginPolicy from '@/components/loginpolicy/index.vue'
+import RoleLists from '@/components/rolelist/index.vue'
+import PermissioLlist from '@/components/permissionlist/index.vue'
+import Dialog from '@/layout/components/Dialog'
+import {
+  // QueryRole,
+  RoleAuths
+} from '@/api/apiAuthority'
+// import { getUserOne } from '@/api/AccountGroup.js'
+// import { mapGetters } from 'vuex'
 // import Cookies from "js-cookie";
-import { accDeaitls, deitAcc, GetRoleByGroup } from "@/api/Account.js";
+import { accDeaitls, deitAcc, GetRoleByGroup } from '@/api/Account.js'
 export default {
+  components: {
+    Organization,
+    PermissionTree,
+    RulesOfCompetency,
+    LoginPolicy,
+    RoleLists,
+    PermissioLlist,
+    Dialog
+  },
   data() {
     return {
-      group: "group",
+      group: 'group',
       userId: this.$route.query.userid,
       GroupId: this.$route.query.GroupId,
       dialogVisible: false,
       OpenRole: this.OpenRole,
       OpenGroup: this.OpenGroup,
-      marginB: "20px",
+      marginB: '20px',
       PageIndex: 1,
       PageSize: 12,
       PwdLengthBegin: null,
       PwdLengthEnd: null,
       PwdStruc: null,
       pwd: null,
-      data: [], //账号组
-      orgId: "",
+      data: [], // 账号组
+      orgId: '',
       arrs: [],
-      TacList: [], //登录策略
-      AuthList: [], //授权信息
-      roleList: [], //角色
-      checkRoles: [], //选中的角色
-      treeData: [], //权限树数据
-      powerList: [], //权限列表
+      TacList: [], // 登录策略
+      AuthList: [], // 授权信息
+      roleList: [], // 角色
+      checkRoles: [], // 选中的角色
+      treeData: [], // 权限树数据
+      powerList: [], // 权限列表
       checkedIdList: [],
-      loginList: [], //选中展示登录策略
+      loginList: [], // 选中展示登录策略
       checkRole: [],
       CheckedList: [],
       rulesObj: [],
       powerT: [],
-      objID: "1",
+      objID: '1',
       rules: {
         UserName: [
-          { required: true, message: "请输入账号名称", trigger: "blur" },
-          { min: 1, max: 32, message: "长度在 1到 32 个字符", trigger: "blur" },
+          { required: true, message: '请输入账号名称', trigger: 'blur' },
+          { min: 1, max: 32, message: '长度在 1到 32 个字符', trigger: 'blur' }
         ],
         UserPwd: [
-          { required: true, message: "请输入账号密码", trigger: "blur" },
-          { min: 8, message: "长度最少8个字符", trigger: "blur" },
-        ],
-        UserDesc: [
-          { min: 1, max: 128, message: "长度最多12个字符", trigger: "blur" },
+          { required: true, message: '请输入账号密码', trigger: 'blur' },
+          { min: 8, message: '长度最少8个字符', trigger: 'blur' }
         ],
+        UserDesc: [{ min: 1, max: 128, message: '长度最多12个字符', trigger: 'blur' }]
       },
       form: {
         name: null,
         passward: null,
-        diesc: null,
+        diesc: null
         // isUsed: true,
       },
       defaultProps: {
-        children: "children",
-        label: "GroupName",
+        children: 'children',
+        label: 'GroupName'
       },
       systemSetuser: null,
       treeData1: [],
-      checkedAuthList: [],
-    };
-  },
-  components: {
-    Organization,
-    Permissiontree,
-    Rulesofcompetency,
-    loginpolicy,
-    rolelists,
-    permissionlist,
-    Dialog,
+      checkedAuthList: []
+    }
   },
-
   created() {
-    let obj;
-    if (typeof this.$store.state.app.systemSet == "string") {
-      obj = JSON.parse(this.$store.state.app.systemSet);
+    let obj
+    if (typeof this.$store.state.app.systemSet === 'string') {
+      obj = JSON.parse(this.$store.state.app.systemSet)
     } else {
-      obj = this.$store.state.app.systemSet;
+      obj = this.$store.state.app.systemSet
     }
-    const { OpenRole, OpenGroup, PwdStruc, PwdLengthBegin, PwdLengthEnd } = obj;
-    this.openRole = OpenRole;
-    this.OpenGroup = OpenGroup;
-    this.PwdStruc = PwdStruc;
-    this.PwdLengthBegin = PwdLengthBegin;
-    this.PwdLengthEnd = PwdLengthEnd;
-    this.editAccInfo();
-    const { GroupId } = this.$route.query;
-    this.AppId = GroupId;
-    this.systemSetuser = obj;
+    const { OpenRole, OpenGroup, PwdStruc, PwdLengthBegin, PwdLengthEnd } = obj
+    this.openRole = OpenRole
+    this.OpenGroup = OpenGroup
+    this.PwdStruc = PwdStruc
+    this.PwdLengthBegin = PwdLengthBegin
+    this.PwdLengthEnd = PwdLengthEnd
+    this.editAccInfo()
+    const { GroupId } = this.$route.query
+    this.AppId = GroupId
+    this.systemSetuser = obj
     if (OpenRole) {
-      this.title = "角色";
+      this.title = '角色'
     }
   },
   mounted() {
-    this.form.UserPwd = this.generatePassword(
-      this.PwdStruc,
-      this.PwdLengthBegin,
-      this.PwdLengthEnd
-    );
+    this.form.UserPwd = this.generatePassword(this.PwdStruc, this.PwdLengthBegin, this.PwdLengthEnd)
   },
   methods: {
     // delate: function (index) {
     //   this.dialogVisible = true;
     // },
     getCheckedList(data) {
-      this.CheckedList = data;
+      this.CheckedList = data
     },
 
-    //获取权限树回调
+    // 获取权限树回调
     getTreeDatas(arr) {
-      this.checkedAuthList = arr;
+      this.checkedAuthList = arr
     },
     rest() {
-      this.form.passward = this.generatePassword(
-        this.PwdStruc,
-        this.PwdLengthBegin,
-        this.PwdLengthEnd
-      );
+      this.form.passward = this.generatePassword(this.PwdStruc, this.PwdLengthBegin, this.PwdLengthEnd)
     },
-    //获取权限规则
+    // 获取权限规则
     getData(obj) {
-      this.rulesObj = obj;
+      this.rulesObj = obj
     },
     generatePassword(rules, minNum, maxNum) {
-      var rulesArr = rules.split("");
-      var rulesArrLnArr = [];
-      var pwd = "";
-      var numbers = "0123456789";
-      var lower = "abcdefghijklmnopqrstuvwxyz";
-      var upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
-      var others = "~!@#$%^&*()_";
+      var rulesArr = rules.split('')
+      var rulesArrLnArr = []
+      var pwd = ''
+      var numbers = '0123456789'
+      var lower = 'abcdefghijklmnopqrstuvwxyz'
+      var upper = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
+      var others = '~!@#$%^&*()_'
 
       function rand(min, max) {
-        return Math.random() * (max - min) + min;
+        return Math.random() * (max - min) + min
       }
-      var pwdLen = parseInt(rand(minNum, maxNum)); //随机生成密码长度10-12位。 // alert("密码长度：" + pwdLen);
-      var item = new Array(pwdLen); //存放密码的类型 数字（1），小写（2），大写（3），特殊字符（4）
+      var pwdLen = parseInt(rand(minNum, maxNum)) // 随机生成密码长度10-12位。 // alert("密码长度：" + pwdLen);
+      var item = new Array(pwdLen) // 存放密码的类型 数字（1），小写（2），大写（3），特殊字符（4）
       for (let i = 0; i < rulesArr.length; i++) {
-        if (rulesArr[i] == "1") {
-          rulesArrLnArr.push(i + 1 + "");
+        if (rulesArr[i] === '1') {
+          rulesArrLnArr.push(i + 1 + '')
         }
       }
       for (let i = 0; i < rulesArrLnArr.length; i++) {
-        item[rulesArrLnArr[i]] = rulesArrLnArr[i] + "";
+        item[rulesArrLnArr[i]] = rulesArrLnArr[i] + ''
       }
       for (let i = 0; i < pwdLen; i++) {
-        if (rulesArrLnArr.indexOf(i + "") == -1) {
-          item[i] = "";
-          item[i] +=
-            rulesArrLnArr[
-              parseInt(Math.random() * (rulesArrLnArr.length - 0) + 0)
-            ]; //其余部分随机生成1-4的数字。
+        if (rulesArrLnArr.indexOf(i + '') === -1) {
+          item[i] = ''
+          item[i] += rulesArrLnArr[parseInt(Math.random() * (rulesArrLnArr.length - 0) + 0)] // 其余部分随机生成1-4的数字。
         }
-      } //打乱次序，重新排序，否则密码第四位永远是特殊符号。
-      item.sort(function () {
-        return 0.5 - Math.random();
-      }); //返回0 两个数位置不变；小于0 就交换位置；大于0就不交换位置
+      } // 打乱次序，重新排序，否则密码第四位永远是特殊符号。
+      item.sort(function() {
+        return 0.5 - Math.random()
+      }) // 返回0 两个数位置不变；小于0 就交换位置；大于0就不交换位置
 
       for (let j = 0; j < pwdLen; j++) {
-        if (item[j] == "4") {
-          pwd += numbers.charAt(Math.random() * (numbers.length - 1) + 1);
-        } else if (item[j] == "2") {
-          pwd += lower.charAt(Math.random() * (lower.length - 1) + 1);
-        } else if (item[j] == "1") {
-          pwd += upper.charAt(Math.random() * (upper.length - 1) + 1);
-        } else if (item[j] == "3") {
-          pwd += others.charAt(Math.random() * (others.length - 1) + 1);
+        if (item[j] === '4') {
+          pwd += numbers.charAt(Math.random() * (numbers.length - 1) + 1)
+        } else if (item[j] === '2') {
+          pwd += lower.charAt(Math.random() * (lower.length - 1) + 1)
+        } else if (item[j] === '1') {
+          pwd += upper.charAt(Math.random() * (upper.length - 1) + 1)
+        } else if (item[j] === '3') {
+          pwd += others.charAt(Math.random() * (others.length - 1) + 1)
         }
       }
-      return pwd;
+      return pwd
     },
 
-    //账号组树
+    // 账号组树
     getTreeData(arr) {
-      this.checkTrees = arr;
-      this.checkTrees.forEach((item) => {
-        this.orgId = item.GroupId;
+      this.checkTrees = arr
+      this.checkTrees.forEach(item => {
+        this.orgId = item.GroupId
         if (item[0]) {
-          item.disabled = true;
+          item.disabled = true
         }
-      });
-      this.checkedIdList = arr;
+      })
+      this.checkedIdList = arr
       // let objArr = arr[arr.length - 1];
       // if (objArr) {
       //   this.objID = objArr.GroupId + "";
       //   this.queryRole();
       // }
-      if (this.checkTrees != "") {
-        this.queryRole();
+      if (this.checkTrees !== '') {
+        this.queryRole()
       } else {
-        this.roleList = [];
+        this.roleList = []
       }
     },
 
-    //点击角色后
+    // 点击角色后
     roleClick(data) {
       try {
-        let params = {
-          RoleId: data.RoleId,
-        };
-        RoleAuths(params).then((result) => {
-          this.powerList = result.returnData;
-        });
+        const params = {
+          RoleId: data.RoleId
+        }
+        RoleAuths(params).then(result => {
+          this.powerList = result.returnData
+        })
       } catch (error) {
-        console.log("RoleAuths");
-        console.log(error);
+        console.log('RoleAuths')
+        console.log(error)
       }
     },
     Competen(data) {
-      this.$emit("Competen", data);
+      this.$emit('Competen', data)
     },
 
-    //详情查询
+    // 详情查询
     async editAccInfo() {
       try {
         const res = await accDeaitls({
-          UserId: this.userId,
-        });
+          UserId: this.userId
+        })
         if (res.code === 0) {
-          const { UserDesc, UserName, UserPwd } = res.returnData;
-          this.form.name = UserName;
-          this.form.diesc = UserDesc;
-          this.checkedIdList = res.returnData.GroupList;
-          this.loginList = res.returnData.TacList;
-
-          console.log(this.checkedIdList);
-          this.loginList.forEach((item) => {
-            if (item.IsSelected == 1) {
-              this.CheckedList.push(item);
+          const { UserDesc, UserName, GroupList, UserPwd, TacList, AuthList, RoleList } = res.returnData
+          this.form.name = UserName
+          this.form.diesc = UserDesc
+          this.checkedIdList = GroupList
+          this.loginList = TacList
+          console.log(UserPwd)
+          // console.log(this.checkedIdList)
+          this.loginList.forEach(item => {
+            if (item.IsSelected === 1) {
+              this.CheckedList.push(item)
             }
-          });
+          })
 
-          this.$store.state.auth.authList = res.returnData.AuthList;
+          this.$store.state.auth.authList = AuthList
 
-          res.returnData.AuthList.forEach((item) => {
-            this.powerT.push(item.AuthId);
-          });
-          this.roleList = res.returnData.RoleList;
+          AuthList.forEach(item => {
+            this.powerT.push(item.AuthId)
+          })
+          this.roleList = RoleList
           this.roleList.forEach((item, index) => {
-            if (item.IsSelected == 1) {
-              this.checkRole.push(index);
-              this.checkRoles.push(item);
+            if (item.IsSelected === 1) {
+              this.checkRole.push(index)
+              this.checkRoles.push(item)
             }
-          });
-          this.queryRole();
+          })
+          this.queryRole()
         } else {
-          this.$message.error(res.message);
+          this.$message.error(res.message)
         }
       } catch (error) {
-        console.log("出错了", error);
+        console.log('出错了', error)
       }
     },
 
-    //账号编辑修改
+    // 账号编辑修改
     async editAcc() {
-      this.treeData1 = [];
-      this.checkedAuthList.forEach((item) => {
-        this.treeData1.push(item.AuthList);
-      });
+      this.treeData1 = []
+      this.checkedAuthList.forEach(item => {
+        this.treeData1.push(item.AuthList)
+      })
       this.treeData1.forEach((item, index) => {
-        this.$store.getters.authArrs.forEach((item2) => {
-          if (item.AuthId == item2.AuthId) {
-            this.treeData1[index] = item2.AuthList;
+        this.$store.getters.authArrs.forEach(item2 => {
+          if (item.AuthId === item2.AuthId) {
+            this.treeData1[index] = item2.AuthList
           }
-        });
-      });
+        })
+      })
 
       try {
         const res = await deitAcc({
@@ -533,75 +554,76 @@ export default {
           UserId: this.userId,
           AuthTo: this.treeData1,
           GroupList: this.checkedIdList,
-          TacList: this.CheckedList ? this.CheckedList : [],
-        });
+          TacList: this.CheckedList ? this.CheckedList : []
+        })
         if (res.code === 0) {
-          this.$message.success(res.message);
+          this.$message.success(res.message)
           setTimeout(() => {
-            this.$router.push("/account");
-          });
+            this.$router.push('/account')
+          })
         } else {
-          this.$message.error(res.message);
+          this.$message.error(res.message)
         }
       } catch (error) {
-        console.log("出错了", error);
+        console.log('出错了', error)
       }
     },
 
-    //角色选取
+    // 角色选取
     checkChange(arr) {
-      const datas = [];
-      const arrs = [];
+      const datas = []
+      const arrs = []
       for (let i = 0; i < arr.length; i++) {
-        datas.push(this.roleList[arr[i]]);
+        datas.push(this.roleList[arr[i]])
       }
-      datas.forEach((item) => {
+      datas.forEach(item => {
         const RoleC = {
           IsSelected: 1,
           RoleId: item.RoleId,
-          RoleName: item.RoleName,
-        };
-        arrs.push(RoleC);
-      });
-      this.checkRoles = arrs;
+          RoleName: item.RoleName
+        }
+        arrs.push(RoleC)
+      })
+      this.checkRoles = arrs
     },
-    //角色列表
+    // 角色列表
     async queryRole() {
       try {
         const res = await GetRoleByGroup({
-          GroupId: this.orgId,
-        });
+          GroupId: this.orgId
+        })
         if (res.code === 0) {
-          const arr = res.returnData;
-          const userArr = [];
-          arr.forEach((item) => {
-            item.name = item.RoleName;
+          const arr = res.returnData
+          const userArr = []
+          arr.forEach(item => {
+            item.name = item.RoleName
             if (item.IsSelected) {
-              userArr.push(item);
+              userArr.push(item)
             }
-          });
+          })
 
-          this.roleList = userArr;
+          this.roleList = userArr
         } else {
-          this.$message.error(res.message);
+          this.$message.error(res.message)
         }
       } catch (error) {
-        console.log("出错了", error);
+        console.log('出错了', error)
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-.pageBody {
+.account-edit {
   width: 100%;
   height: calc(100vh - 178px);
   padding: 0 146px;
-  .topPart {
+  .account-edit-header {
     box-sizing: border-box;
     width: 100%;
     height: 184px;
+    margin: 32px 0 24px;
     padding: 32px;
     background: #ffffff;
     box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
@@ -653,8 +675,7 @@ export default {
   }
   .content {
     width: 100%;
-    height: calc(100% - 184px);
-    padding-top: 24px;
+    height: calc(100% - 274px);
     box-sizing: border-box;
     // .el-row {
     //   height: 100%;
@@ -662,9 +683,12 @@ export default {
     //     height: 100%;
     //   }
     // }
+    ::v-deep .el-empty {
+      padding: 0;
+    }
     .part {
       width: 100%;
-      height: 856px;
+      height: 720px;
       background: #ffffff;
       box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
       border-radius: 16px;
@@ -679,7 +703,7 @@ export default {
     }
     .part2 {
       width: 100%;
-      height: 512px;
+      height: 376px;
       background: #ffffff;
       box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
       border-radius: 16px;

src/views/accountManagement/index.vue

@@ -1,269 +1,281 @@
 <template>
-  <div class="pageBody">
-    <div class="titleBox">
+  <div class="account-home">
+    <div class="account-header">
       <div class="status flex-wrap">
-        <div class="status1"><span class="icon"></span>在线</div>
-        <div class="status2"><span class="icon"></span>离线</div>
-        <div class="status3"><span class="icon"></span>禁用</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"
         @getSearchData="getSearchData"
         @clearSearchData="clearSearchData"
-        :isSlot="true"
       >
-        <el-button class="addBtn" @click="addAccount">新增账号</el-button>
+        <el-button
+          class="addBtn"
+          @click="addAccount"
+        >新增账号</el-button>
       </Search>
     </div>
-    <div class="contantBox">
-      <div class="itemBox" v-for="(item, index) in newData" :key="index">
-        <div
-          :class="
-            item.Status === 1
-              ? 'onlneHead'
-              : item.Status === 2
-              ? 'headLine'
-              : 'onlneHead2'
-          "
-        ></div>
-
-        <div class="del" @click="delate(item.UserId)">
-          <i class="el-icon-close"></i>
-        </div>
-        <div>
-          <el-row>
-            <el-col :span="24" class="nameBox"
-              ><div class="name">{{ item.UserName }}</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="6"
+            :xl="{ span: '4-8' }"
+            class="account-box"
+          >
+            <div class="account-box-wrap">
+              <div :class="account.Status === 1 ? 'headOnline' : account.Status === 2 ? 'headOffline' : 'headDisabled'" />
               <div
-                class="loger"
-                @click="toEdit(item.UserId, item.GroupId)"
-              ></div
-            ></el-col>
-          </el-row>
+                class="del"
+                @click="deleteUser(account)"
+              >
+                <i class="el-icon-close" />
+              </div>
+              <div>
+                <el-row>
+                  <el-col
+                    :span="24"
+                    class="nameBox"
+                  >
+                    <div class="name">{{ account.UserName }}</div>
+                    <div
+                      class="loger"
+                      @click="toEdit(account.UserId, account.GroupId)"
+                    />
+                  </el-col>
+                </el-row>
 
-          <el-row>
-            <el-col :span="24">{{ item.group }}</el-col>
-          </el-row>
+                <el-row>
+                  <el-col :span="24">{{ account.group }}</el-col>
+                </el-row>
 
-          <el-row class="conntent">
-            <el-col :span="12"
-              >登录次数：<span>{{ item.LoginCount }}</span></el-col
-            >
-            <el-col :span="12" class="flexLeft"
-              >异常登录：<span>{{ item.ExceptionCount }}</span></el-col
-            >
-          </el-row>
-          <el-row class="conntent">
-            <el-col :span="24"
-              >权限项数：<span>{{ item.AuthCount }}</span></el-col
-            >
-          </el-row>
-          <el-row class="conntent">
-            <el-col :span="12">
-              状态：<span
-                class="used"
-                v-if="item.Status == 1 || item.Status == 2"
-                >启用</span
-              >
-              <span class="unUsed" v-else-if="item.Status == 3">停用</span>
-            </el-col>
-            <el-col :span="12" class="flexLeft">
-              <el-switch
-                @change="isUsedChange(item.Flag, item.UserId)"
-                v-model="item.Flag"
-                :active-value="true"
-                :inactive-value="false"
-                active-color="#6F81BC"
-                inactive-color="#CFD6E2"
-              >
-              </el-switch>
-            </el-col>
-          </el-row>
-        </div>
-      </div>
-      <Dialog :flag="dialogVisible">
-        <div class="closeDialog">
-          <div class="title">删除账号</div>
-          <div class="content">是否确定要删除该账号？</div>
-          <div class="foot right t30">
-            <el-button size="medium" type="danger" class="r24" @click="del()"
-              >删除</el-button
-            >
+                <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
+                    :span="12"
+                    class="flexLeft"
+                  >
+                    <el-switch
+                      v-model="account.Flag"
+                      :active-value="true"
+                      :inactive-value="false"
+                      active-color="#6F81BC"
+                      inactive-color="#CFD6E2"
+                      @change="isUsedChange(account.Flag, account.UserId)"
+                    />
+                  </el-col>
+                </el-row>
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+        <p
+          v-if="loading"
+          class="center"
+        >加载中...</p>
+        <p
+          v-if="noMore"
+          class="center"
+        >没有更多数据了~</p>
+      </template>
+    </div>
+    <Dialog :flag="dialogVisible">
+      <div class="closeDialog">
+        <div class="title">删除账号</div>
+        <div class="content">是否确定要删除{{ deleteUserName }}？</div>
+        <div class="foot right t30">
+          <el-button
+            size="medium"
+            type="danger"
+            class="r24"
+            @click="del()"
+          >删除</el-button>
 
-            <el-button size="medium" @click="dialogVisible = false"
-              >取消</el-button
-            >
-          </div>
+          <el-button
+            size="medium"
+            @click="dialogVisible = false"
+          >取消</el-button>
         </div>
-      </Dialog>
-    </div>
-    <template v-if="isAchiveBottom">
-      <div class="nouplist">无可加载数据</div>
-    </template>
+      </div>
+    </Dialog>
   </div>
 </template>
 
 <script>
-import Search from "@/layout/components/Search";
-import Dialog from "@/layout/components/Dialog";
-import { GetAccountList, ChangeUserStatus, delAccount } from "@/api/Account";
+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,
-      newData: [],
-      newDatas: [],
-      deluserId: "",
-      val: "",
-      UserId: "",
-      GroupId: "",
-      GroupUpid: "",
-      serachinfo: "", //搜索内容
-      value: "",
+      accountArr: [],
+      deleteUserId: '',
+      deleteUserName: '',
+      UserId: '',
+      GroupId: '',
+      GroupUpid: '',
+      serachinfo: '', // 搜索内容
       PageIndex: 1,
-      PageSize: 100,
-      isAchiveBottom: false,
-      isAchiveBottoms: false,
-    };
+      PageSize: 20,
+      pages: null,
+      loading: false
+    }
+  },
+  computed: {
+    noMore() {
+      return this.PageIndex >= this.pages
+    },
+    disabled() {
+      return this.loading || this.noMore
+    }
   },
-  components: { Search, Dialog },
   created() {
-    if (this.serachinfo == "") {
-      this.AccountList();
+    if (this.serachinfo === '') {
+      this.AccountList()
     } else {
+      console.log(this.serachinfo)
     }
-    window.onscroll = () => {
-      //变量scrollTop是滚动条滚动时，距离顶部的距离
-      var scrollTop =
-        document.documentElement.scrollTop || document.body.scrollTop;
-      //变量windowHeight是可视区的高度
-      var windowHeight =
-        document.documentElement.clientHeight || document.body.clientHeight;
-      //变量scrollHeight是滚动条的总高度
-      var scrollHeight =
-        document.documentElement.scrollHeight || document.body.scrollHeight;
-      //滚动条到底部的条件(距底部20px时触发加载)
-      if (
-        scrollTop + windowHeight >= scrollHeight - 20 &&
-        !this.isAchiveBottoms
-      ) {
-        this.isAchiveBottoms = true;
-        this.pageNum += 1;
-        this.AccountList();
-        //延时触发数据加载
-        setTimeout(() => {
-          this.newData.forEach((element) => {
-            this.newDatas.push(element);
-          });
-          if (this.newData.length == 0) {
-            this.isAchiveBottom = true;
-          }
-          //后端需要进行分页，然后前端从后端拿来实现滚动加载
-          //这里利用数组push来模拟从后端拿到的数据
-          // this.arrs.push("test");
-          this.isAchiveBottoms = false;
-        }, 500);
-      }
-    };
   },
   methods: {
-    //查询
+    // 滚动加载
+    load() {
+      this.PageIndex += 1
+      this.AccountList()
+    },
+    // 回到第一页
+    pageInit() {
+      this.PageIndex = 1
+      this.AccountList()
+    },
+    // 查询
     getSearchData(val) {
-      this.serachinfo = val;
-      this.AccountList(val);
+      this.serachinfo = val
+      this.pageInit()
     },
 
-    //清除查询
+    // 清除查询
     clearSearchData() {
-      this.AccountList();
+      this.pageInit()
     },
-    //修改状态
+    // 修改状态
     async isUsedChange(Flag, UserId) {
       const result = await ChangeUserStatus({
         Flag: Flag,
-        UserId,
-      });
+        UserId
+      })
       if (result.code === 0) {
-        this.AccountList();
-        this.$message.success(result.message);
+        this.pageInit()
+        this.$message.success(result.message)
       } else {
-        this.$message.error(result.$message);
+        this.$message.error(result.$message)
       }
     },
-
-    delate: function (UserId) {
-      this.dialogVisible = true;
-      this.deluserId = UserId;
+    deleteUser(user) {
+      this.dialogVisible = true
+      this.deleteUserId = user.UserId
+      this.deleteUserName = user.UserName
     },
-
     toEdit(userid, GroupIds) {
-      this.UserId = userid;
+      this.UserId = userid
       this.$router.push({
-        path: "accountEdit",
-        query: { userid: this.UserId },
-      });
+        path: 'accountEdit',
+        query: { userid: this.UserId }
+      })
     },
-    addAccount: function () {
+    addAccount() {
       this.$router.push({
-        path: "accountAdd",
-        query: { GroupId: -1 },
-      });
+        path: 'accountAdd',
+        query: { GroupId: -1 }
+      })
     },
-    //获取列表
+    // 获取列表
     async AccountList() {
       try {
+        this.loading = true
         const result = await GetAccountList({
           QueryName: this.serachinfo,
           PageIndex: this.PageIndex,
-          PageSize: this.PageSize,
-        });
+          PageSize: this.PageSize
+        })
         if (result.code === 0) {
-          this.newData = result.returnData.records;
-          this.newData.forEach((element, index) => {
-            if (element.Status == 1) {
-              element["Flag"] = true;
+          this.loading = false
+          const newDatas = result.returnData.records
+          this.pages = result.returnData.pages
+          newDatas.forEach(element => {
+            if (element.Status === 1) {
+              element['Flag'] = true
             } else {
-              element["Flag"] = false;
+              element['Flag'] = false
             }
-            this.newData[index] = element;
-          });
-          result.returnData.records.forEach((element) => {
-            this.newDatas.push(element);
-          });
+            this.accountArr.push(element)
+          })
         } else {
-          this.$message.error(result.message);
+          this.$message.error(result.message)
         }
       } catch (error) {
-        console.log("出错了", error);
+        console.log('出错了', error)
       }
     },
 
-    //删除接口
+    // 删除接口
     async del() {
       const result = await delAccount({
-        UserId: this.deluserId,
-      });
+        UserId: this.deleteUserId
+      })
       if (result.code === 0) {
-        this.dialogVisible = false;
-        this.$message.success(result.message);
-        this.AccountList();
+        this.dialogVisible = false
+        this.$message.success(result.message)
+        this.pageInit()
       } else if (result.code === -1) {
-        this.$message.error("后端错误，稍后请重试");
+        this.$message.error('后端错误，稍后请重试')
       } else {
-        this.$message.success(result.message);
+        this.$message.success(result.message)
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style lang="scss" scoped>
-.pageBody {
-  width: 100%;
-  padding: 30px 64px;
-  .titleBox {
+.account-home {
+  padding: 0 64px;
+  .account-header {
+    margin: 32px 0;
     width: 100%;
     display: flex;
-    flex-direction: row;
     justify-content: space-between;
     .addBtn {
       width: 120px;
@@ -278,7 +290,6 @@ export default {
     }
     .status {
       align-items: center;
-
       & > div {
         margin-right: 28px;
         .icon {
@@ -308,23 +319,26 @@ export default {
       }
     }
   }
-  .contantBox {
-    margin-top: 30px;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-    width: calc(100% + 10px);
-    .itemBox {
-      width: calc(20% - 20px);
-      margin: 10px;
-      position: relative;
-      padding: 23px 32px;
-      background: #ffffff;
-      box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
-      border-radius: 16px;
-      overflow: hidden;
-      .headLine {
+  .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: 23px 32px;
+        background: #ffffff;
+        box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
+        border-radius: 16px;
+        overflow: hidden;
+      }
+      .headOffline {
         width: 100%;
         height: 4px;
         background: #f25555;
@@ -334,7 +348,7 @@ export default {
         left: 0;
         top: 0;
       }
-      .onlneHead {
+      .headOnline {
         background: #6f81bc;
         width: 100%;
         height: 4px;
@@ -344,7 +358,7 @@ export default {
         left: 0;
         top: 0;
       }
-      .onlneHead2 {
+      .headDisabled {
         background: #cfd6e2;
         width: 100%;
         height: 4px;
@@ -383,7 +397,7 @@ export default {
         .loger {
           width: 24px;
           height: 24px;
-          background: url("../../assets/status/ic_edit.png") no-repeat;
+          background: url('../../assets/status/ic_edit.png') no-repeat;
           background-size: 100% 100%;
           border: 1px solid #e4e7ec;
           border-radius: 50%;
@@ -392,12 +406,12 @@ export default {
           cursor: pointer;
         }
         .loger:hover {
-          background: url("../../assets/status/ic_edit_hovar.png") no-repeat;
+          background: url('../../assets/status/ic_edit_hovar.png') no-repeat;
           background-size: 100% 100%;
         }
       }
 
-      .conntent {
+      .content {
         margin-top: 14px;
       }
       .used {