账号修改

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

@@ -172,6 +172,14 @@ const accountRoutes = {
                 title: '编辑账号',
                 doesAccountExist: true
               }
+            },
+            {
+              path: 'accountAuth',
+              name: 'accountAuth',
+              component: () => import('@/views/accountManagement/components/accountAuth'),
+              meta: {
+                title: '账号权限'
+              }
             }
           ]
         }

src/views/accountManagement/components/accountAuth.vue

@@ -0,0 +1,239 @@
+<!--
+ * @Author: your name
+ * @Date: 2021-11-29 16:31:31
+ * @LastEditTime: 2022-03-02 13:51:29
+ * @LastEditors: Please set LastEditors
+ * @Description: 新增/编辑角色
+ * @FilePath: \Foshan4A2.0\src\views\authorityManagement\components\authorityRoleStatus.vue
+-->
+<template>
+  <div class="authorityPower">
+    <!--新增权限项-->
+    <div class="power-content flex-wrap">
+      <div class="r24 flex1 part">
+        <div style="padding: 27px 24px;height: 100%;" class="addApp-form">
+          <div class="addApp-form-title flex">
+            <div class="manageTitle">账号信息</div>
+            <!-- <div class="title">
+              编辑角色
+              <span class="isqy">
+                <span>是否启用</span>
+                <el-radio v-model="radio" :label="1">是</el-radio>
+                <el-radio v-model="radio" :label="0">否</el-radio>
+              </span>
+            </div> -->
+            <!-- <div v-is="['role_edit save']" class="btn">
+              <el-button class="r24" @click="removeRole" type="danger">删除</el-button>
+              <el-button @click="saveBtn('form')" size="small" type="primary">保存</el-button>
+            </div> -->
+          </div>
+          <div class="addApp-form-content dialog-public-background">
+            <el-form :inline="true" label-width="80px" ref="form" :rules="rules" class="form" :model="form">
+              <el-form-item prop="name" label="账号名称">
+                <el-input disabled placeholder="请输入角色名称" maxlength="32" v-model="form.name"></el-input>
+              </el-form-item>
+              <el-form-item label="账号描述">
+                <el-input style="width: 340px" disabled type="textarea" :rows="3" maxlength="200" placeholder="请输入描述" v-model="form.app"></el-input>
+              </el-form-item>
+              <el-form-item label="是否启用">
+                <el-radio disabled v-model="radio" :label="1">是</el-radio>
+                <el-radio disabled v-model="radio" :label="0">否</el-radio>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+      </div>
+      <div class="flex1 r24 part">
+        <Rolelist v-loading="loading" element-loading-text="数据加载中" @checkChange="checkChange" @checkClick="checkClick" :roleType="roleType" :checkBoxList="radioCheck" :active="true" class="hucRole" :imageSize="80" :number="8" title="角色" />
+      </div>
+      <div class="flex1 part">
+        <Permissionlist v-loading="permission" element-loading-text="数据加载中" :check="true" :imageSize="80" :RoleList="RoleList" class="hucPower" title="权限名称" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Permissionlist from "@/components/permissionlist";
+import Rulesofcompetency from "@/components/rulesofcompetency";
+import Permissiontree from "@/components/permissiontree";
+import Rolelist from "@/components/rolelist";
+import { RoleDetails, EditRole, RoleAuths } from "@/api/apiAuthority";
+export default {
+  name: "AuthorityRoleEdit",
+  components: { Permissionlist, Rulesofcompetency, Permissiontree, Rolelist },
+  data () {
+    return {
+      radio: 1,
+      form: {
+        //应用表单
+        name: "",
+        id: "",
+        app: "",
+      },
+      rules: {
+        //表单验证
+        name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
+      },
+      loading: false,
+      permission: false,
+      treeData: [],
+      arrs: [],
+      checkedKeys: [],
+      RoleList: [],
+      radioCheck: [],
+      checkedBoxs: [],
+      defRoleId: [],
+      roleId: null,
+      Status: null,
+      authTo: {},
+      authList: [],
+      authId: [],
+      type: null, //参数类型
+      roleType: "",
+    };
+  },
+  created () {
+    //this.getAuthTree();
+    const { RoleId, Status } = this.$route.query;
+    this.roleId = RoleId;
+    this.Status = Status;
+  },
+  mounted () {
+    this.roleType = "onlyRole";
+  },
+  methods: {
+    //角色明细
+    async roleDetails (id) {
+      try {
+        this.loading = true;
+        const res = await RoleDetails({
+          RoleId: id,
+        });
+        if (res.code === 0) {
+          const { RoleName, RoleDesc, AuthList, RoleStatus, DefRoleList } =
+            res.returnData;
+          this.form.name = RoleName;
+          this.form.app = RoleDesc;
+          this.radio = RoleStatus;
+          if (AuthList && AuthList.length) {
+            AuthList.forEach((item) => {
+              this.authId.push(item.AuthId);
+            });
+            this.checkedKeys = this.authId;
+            this.authList = _.cloneDeep(AuthList);
+            this.authTo = AuthList[0];
+          }
+          if (DefRoleList && DefRoleList.length) {
+            this.checkedBoxs = DefRoleList;
+            DefRoleList.forEach((item) => {
+              item.RoleId = item.DefRoleId;
+            });
+            this.radioCheck = DefRoleList;
+            this.roleAuths(DefRoleList[0].DefRoleId);
+          }
+          this.loading = false;
+        } else {
+          this.$message.error(res.message);
+          this.loading = false;
+        }
+      } catch (error) {
+        console.log("出错了", error);
+        this.loading = false;
+      }
+    },
+    //删除
+    removeRole () {
+      this.deleteRole(this.roleId);
+    },
+    //获取权限树回调
+    getTreeData (arr) {
+      this.treeData = arr;
+    },
+    //获取权限规则回调
+    getData (obj) {
+      this.authTo = obj;
+    },
+    //互斥角色选中回调
+    checkChange (arr) {
+      const arrs = [];
+      arr.forEach((item) => {
+        const obj = {
+          DefRoleId: item.RoleId,
+          IsSelected: 1,
+          DefRoleName: item.RoleName,
+        };
+        arrs.push(obj);
+      });
+      this.checkedBoxs = arrs;
+    },
+    //互斥角色点击回调
+    checkClick (item) {
+      this.roleAuths(item.RoleId);
+    },
+    async roleAuths (id) {
+      try {
+        let params = {
+          RoleId: id,
+        };
+        this.permission = true;
+        const res = await RoleAuths(params);
+        if (res.code === 0) {
+          this.RoleList = res.returnData;
+          this.permission = false;
+        } else {
+          this.$message.error(res.message);
+          this.permission = false;
+        }
+      } catch (error) {
+        console.log("出错了", error);
+        this.permission = false;
+      }
+    },
+    //保存
+    saveBtn (formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.editRole();
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+    //确认保存
+    async editRole () {
+      try {
+        const datas = [];
+        this.treeData.forEach((item) => {
+          datas.push(item.AuthList);
+        });
+        const res = await EditRole({
+          RoleName: this.form.name,
+          RoleDesc: this.form.app,
+          DefRoleList: this.checkedBoxs,
+          AuthList: datas,
+          RoleStatus: this.radio,
+          RoleId: this.roleId,
+        });
+        if (res.code === 0) {
+          this.$message.success(res.message);
+          this.$store.dispatch("tagsView/delView", this.$route);
+          this.$router.push("/role");
+        } else {
+          this.$message.error(res.message);
+        }
+      } catch (error) {
+        console.log("出错了", error);
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../authorityManagement/css/role.scss";
+.part {
+  background-color: #fff;
+}
+</style>

src/views/accountManagement/components/accountHome.vue

@@ -7,53 +7,24 @@
         <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 :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"
-          >
+        <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 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)"
-                  >
+                  <div v-is="['userlist_btn_del']" class="del" @click="deleteUser(account)">
                     <i class="el-icon-close" />
                   </div>
                 </div>
@@ -64,38 +35,18 @@
 
                 <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-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>
+                    状态：<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 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>
@@ -103,14 +54,8 @@
           </el-col>
         </el-row>
         <template v-if="pages > 1">
-          <p
-            v-if="loading"
-            class="center"
-          >加载中...</p>
-          <p
-            v-if="noMore"
-            class="center"
-          >没有更多数据了~</p>
+          <p v-if="loading" class="center">加载中...</p>
+          <p v-if="noMore" class="center">没有更多数据了~</p>
         </template>
       </template>
     </div>
@@ -119,17 +64,39 @@
         <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" type="danger" class="r24" @click="del()">删除</el-button>
 
-          <el-button
-            size="medium"
-            @click="dialogVisible = false"
-          >取消</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>
@@ -139,11 +106,16 @@
 <script>
 import Search from '@/layout/components/Search'
 import Dialog from '@/layout/components/Dialog'
-import { GetAccountList, ChangeUserStatus, delAccount } from '@/api/Account'
+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() {
+  data () {
     return {
+      pwdStruc: '',
+      pwdLengthBegin: 0,
+      pwdLengthEnd: 0,
       dialogVisible: false,
       accountArr: [],
       deleteUserId: '',
@@ -155,23 +127,58 @@ export default {
       PageIndex: 1,
       PageSize: 20,
       pages: null,
-      loading: false
+      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: {
-    noMore() {
+    ...mapGetters(['systemSet']),
+    noMore () {
       return this.PageIndex >= this.pages
     },
-    disabled() {
+    disabled () {
       return this.loading || this.noMore
     }
   },
   watch: {
-    searchInfo(val) {
+    searchInfo (val) {
       val.length === 0 && this.pageInit()
     }
   },
-  created() {
+  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 {
@@ -179,30 +186,96 @@ export default {
       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() {
+    load () {
       this.PageIndex += 1
       this.accountList()
     },
     // 回到第一页
-    pageInit() {
+    pageInit () {
       this.PageIndex = 1
       this.accountArr = []
       this.accountList()
     },
     // 查询
-    getSearchData(val) {
+    getSearchData (val) {
       this.searchInfo = val
       this.pageInit()
     },
 
     // 清除查询
-    clearSearchData() {
+    clearSearchData () {
       this.searchInfo = ''
     },
     // 修改状态
-    async userActiveToggle({ Flag, Status, UserId }) {
+    async userActiveToggle ({ Flag, Status, UserId }) {
       Status = Flag ? 2 : 3
       try {
         const result = await ChangeUserStatus({
@@ -224,25 +297,33 @@ export default {
         console.log('出错了', error)
       }
     },
-    deleteUser(user) {
+    deleteUser (user) {
       this.dialogVisible = true
       this.deleteUserId = user.UserId
       this.deleteUserName = user.UserName
     },
-    toEdit(userId) {
-      this.userId = userId
-      this.$router.push({
-        path: '/account/accountEdit',
-        query: { userId: this.userId }
-      })
+    toEdit (userId) {
+      this.editDialogVisible = true
+      this.editType = 'edit'
+      this.editDialogTitle = '编辑账号'
+      this.roleId = userId
+      this.getAccountInfo()
     },
-    addAccount() {
-      this.$router.push({
-        path: '/account/accountAdd'
-      })
+    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() {
+    async accountList () {
       try {
         this.loading = true
         const result = await GetAccountList({
@@ -267,7 +348,7 @@ export default {
     },
 
     // 删除接口
-    async del() {
+    async del () {
       const result = await delAccount({
         UserId: this.deleteUserId
       })
@@ -280,6 +361,15 @@ export default {
       } else {
         this.$message.success(result.message)
       }
+    },
+
+    // 账号权限
+    authAccount (item) {
+      this.roleId = item.userId
+      this.$router.push({
+        path: '/account/accountAuth',
+        query: { userId: this.roleId }
+      })
     }
   }
 }
@@ -415,14 +505,22 @@ export default {
           width: 14px;
           height: 14px;
           margin-left: 24px;
-          background: url('../../../assets/status/ic_edit_default.png') no-repeat;
+          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: 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 {

src/views/authorityManagement/css/role.scss

@@ -46,7 +46,7 @@
   }
 }
 .power-content {
-  margin-top: 24px;
+  // margin-top: 24px;
   height: 704px;
   .part{
     height: 704px;