oms接入3.0产品库

project/oms/apps/AppRoleRightsManager/rightsAdd.vue

@@ -0,0 +1,190 @@
+<template>
+  <ai-detail class="rightsAdd">
+    <ai-title :title="addTitle" slot="title" isShowBottomBorder isShowBack @onBackClick="back"/>
+    <template #content>
+      <el-form size="small" ref="rightsForm" :model="form" label-width="120px" :rules="rules">
+        <ai-card title="基本信息">
+          <template #content>
+            <el-form-item label="应用角色名称" prop="roleName">
+              <el-input v-model="form.roleName" placeholder="请输入应用角色名称" clearable/>
+            </el-form-item>
+          </template>
+        </ai-card>
+        <ai-card title="权限信息">
+          <template #content>
+            <el-form-item label="权限列表" prop="menus">
+              <div class="roleList">
+                <el-input v-model="filterText" placeholder="请输入..." clearable suffix-icon="iconfont iconSearch"
+                          @change="$refs.tree.filter(filterText)" :validate-event="false"/>
+                <div class="tree_list">
+                  <el-tree class="filter-tree" ref="roleTree"
+                           :data="roleList"
+                           show-checkbox
+                           :props="defaultProps"
+                           default-expand-all
+                           :check-strictly="false"
+                           node-key="id"
+                           :default-checked-keys="form.menus"
+                           :filter-node-method="filterNode"
+                           @check="handleMenusSelect"/>
+                </div>
+              </div>
+            </el-form-item>
+          </template>
+        </ai-card>
+      </el-form>
+    </template>
+    <template #footer>
+      <el-button @click="back()">取消</el-button>
+      <el-button type="primary" @click="confirm">保存</el-button>
+    </template>
+  </ai-detail>
+</template>
+<script>
+
+export default {
+  name: "rightsAdd",
+  inject: ['top'],
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+  data() {
+    return {
+      form: {},
+      roleName: '',
+      id: '',
+      appList: [],
+      roleList: [],
+      defaultProps: {
+        children: 'list',
+        label: 'name'
+      },
+      treeList: [],
+      filterText: '',
+      msgTitle: '添加'
+    }
+  },
+  created() {
+    if (this.isEdit) {
+      let {id, name: roleName} = this.$route.query
+      this.form = {menus: [], id, roleName}
+      this.msgTitle = '编辑'
+    }
+    this.getPermissions()
+  },
+  computed: {
+    isEdit() {
+      return this.$route.query.id
+    },
+    addTitle() {
+      return this.isEdit ? '编辑应用角色' : '新增应用角色'
+    },
+    rules() {
+      return {
+        roleName: {required: true, message: '请输入应用角色名称'},
+        menus: {required: true, message: '请选择权限列表内容'},
+      }
+    }
+  },
+  methods: {
+    filterNode(value, data) {
+      if (!value) return true;
+      return data.name.indexOf(value) !== -1;
+    },
+    //应用名称选择 获取权限列表
+    getId(data) {
+      if (data.list.length) {
+        data.list.forEach(item => {
+          this.getId(item)
+        })
+      } else {
+        if (data.checked) {
+          this.form.menus?.push(data.id)
+        }
+      }
+    },
+    getPermissions() {
+      this.filterText = ''
+      let {id: roleId} = this.form
+      this.instance.post(this.top.actions.detail, null, {
+        params: {roleId}
+      }).then(res => {
+        if (res?.data) {
+          this.roleList = res.data;
+          if (this.isEdit) {
+            this.roleList.forEach(e => this.getId(e))
+          }
+          this.roleList = this.roleList.filter(item => !(item.component && item.isApp == 0 && item.isMenu == 0))
+        }
+      })
+    },
+    handleMenusSelect(node, selected) {
+      this.$set(this.form, 'menus', [...selected?.checkedKeys])
+      this.$refs.rightsForm.validateField('menus')
+    },
+    //保存提交
+    confirm() {
+      this.$refs.rightsForm.validate(v => {
+        if (v) {
+          let menus = [this.$refs.roleTree?.getHalfCheckedKeys(), this.$refs.roleTree?.getCheckedKeys()]?.flat()?.toString()
+          this.instance.post(this.top.actions.modify, null, {
+            params: {...this.form, menus}
+          }).then(res => {
+            if (res?.msg == "success") {
+              this.$message.success(`${this.msgTitle}应用角色成功`)
+              this.back()
+              this.top.searchList()
+            }
+          })
+        }
+      })
+    },
+    //取消 返回
+    back() {
+      this.$router.push({})
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.rightsAdd {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .el-form-item {
+    .el-select {
+      width: 100%;
+    }
+
+    &.is-error {
+      .roleList {
+        border-color: #f46;
+      }
+    }
+  }
+
+  .roleList {
+    background-color: #fcfcfc;
+    border-radius: 2px;
+    border: solid 1px #d0d4dc;
+    padding: 8px;
+
+    .input {
+      display: flex;
+      justify-content: space-between;
+      padding: 5px;
+      margin: 0;
+    }
+
+    .tree_list {
+      padding: 5px;
+      height: 370px;
+      overflow: auto;
+    }
+  }
+
+}
+</style>