增加账号角色管理

core/apps/AppAccountRole/addAccountRole.vue

@@ -0,0 +1,173 @@
+<template>
+  <section class="addAccountRole">
+    <ai-detail>
+      <ai-title slot="title" :title="pageTitle" isShowBottomBorder isShowBack @onBackClick="$router.push({})"/>
+      <template #content>
+        <ai-card title="基本信息">
+          <template #content>
+            <el-form size="small" label-width="120px">
+              <el-form-item required label="账号角色名称">
+                <el-input clearable v-model="roleName" placeholder="请输入..."/>
+              </el-form-item>
+            </el-form>
+          </template>
+        </ai-card>
+        <ai-card title="角色信息(必选)">
+          <template #content>
+            <el-form size="small" label-width="120px">
+              <el-form-item required label="角色列表">
+                <div class="roleList">
+                  <p class="input">
+                    <el-input placeholder="请输入..." size="small" v-model="filterText" suffix-icon="iconfont iconSearch">
+                    </el-input>
+                    <el-button icon="iconfont iconDelete" size="small" @click="filterText=''">清空</el-button>
+                  </p>
+                  <div class="tree_list">
+                    <el-tree
+                        class="filter-tree"
+                        :data="roleList"
+                        show-checkbox
+                        :props="defaultProps"
+                        default-expand-all
+                        :check-strictly="true"
+                        node-key="id"
+                        :default-checked-keys="defaultId"
+                        :filter-node-method="filterNode"
+                        ref="tree">
+                    </el-tree>
+                  </div>
+                </div>
+              </el-form-item>
+            </el-form>
+          </template>
+        </ai-card>
+      </template>
+      <template #footer>
+        <el-button @click="toAppRole">取消</el-button>
+        <el-button type="primary" @click="confirm">保存</el-button>
+      </template>
+    </ai-detail>
+  </section>
+</template>
+<script>
+
+export default {
+  name: "addAccountRole",
+  inject: {instance: {}},
+  data() {
+    return {
+      roleName: '',
+      id: '',
+      roleList: [],
+      searchVal: '',
+      defaultProps: {
+        children: 'roles',
+        label: 'name'
+      },
+      treeList: [],
+      defaultId: [],
+      filterText: ''
+    }
+  },
+  computed: {
+    isAdd() {
+      return !this.$route.query?.info?.id
+    },
+    pageTitle() {
+      return this.isAdd ? "新增账号角色" : "编辑账号角色"
+    }
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.tree.filter(val);
+    }
+  },
+  created() {
+    this.getAppList();
+    if (JSON.stringify(this.$route.query) != '{}') {
+      this.roleName = this.$route.query.info.name;
+      this.id = this.$route.query.info.id;
+      this.$route.query.info.appRoleList.forEach(e => {
+        this.defaultId.push(e.id)
+      })
+    }
+  },
+  methods: {
+    //查询下拉列表
+    getAppList() {
+      this.instance.post(`/admin/role-app/list-all`).then(res => {
+        if (res.code == 0) {
+          this.roleList = res.data;
+          this.roleList.forEach(e => {
+            e.disabled = true;
+          })
+        }
+      })
+    },
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.name.indexOf(value) !== -1;
+    },
+    confirm() {
+      let crr = [];
+      let arrCheckList = [];
+      arrCheckList = this.$refs.tree.getCheckedKeys();
+      for (let i = 0; i < arrCheckList.length; i++) {
+        crr.push(arrCheckList[i]);
+      }
+      if (!this.roleName) {
+        this.$message.error('请输入账号角色名称')
+        return;
+      }
+      if (crr.length == 0) {
+        this.$message.error('请选择角色列表')
+        return;
+      }
+      this.instance.post(`/admin/role-acc/modify?appRoles=${crr}`, null, {
+        params: {
+          roleName: this.roleName,
+          id: this.id
+        }
+      }).then(res => {
+        if (res?.code == 0) {
+          this.$message({message: '保存成功', type: 'success'});
+          this.toAppRole()
+        }
+      })
+    },
+    //取消 返回
+    toAppRole() {
+      this.$router.push({})
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.addAccountRole {
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  position: relative;
+
+  .roleList {
+    display: inline-block;
+    width: 340px;
+    height: 420px;
+    background-color: #fcfcfc;
+    border-radius: 2px;
+    border: solid 1px #d0d4dc;
+
+    .input {
+      display: flex;
+      justify-content: space-between;
+      padding: 5px;
+      margin: 0;
+    }
+
+    .tree_list {
+      height: 370px;
+      overflow: auto;
+    }
+  }
+}
+</style>