dvcp_v2_webapp/project/xumu/AppRoleRightsManager/rightsAdd.vue

<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>
            <div class="grid">
              <el-form-item label="应用角色名称" prop="roleName">
                <el-input v-model="form.roleName" placeholder="请输入应用角色名称" clearable/>
              </el-form-item>
              <el-form-item label="角色标记" prop="type" :rules="{required:true,message:'请选择角色标记'}">
                <ai-select v-model="form.type" dict="roleType" placeholder="请选择角色标记" clearable/>
              </el-form-item>
            </div>
          </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: {},
      id: '',
      appList: [],
      roleList: [],
      defaultProps: {
        children: 'list',
        label: 'name'
      },
      treeList: [],
      filterText: '',
      msgTitle: '添加'
    }
  },
  created() {
    if (this.isEdit) {
      let {id, name: roleName, type} = this.$route.query
      this.form = {menus: [], id, roleName, type}
      this.msgTitle = '编辑'
    }
    this.getPermissions()
  },
  computed: {
    isEdit() {
      return this.$route.query.id
    },
    addTitle() {
      return this.isEdit ? '编辑应用角色' : '新增应用角色'
    },
    rules() {
      return {
        roleName: {required: true, message: '请输入应用角色名称'},
        roleType: {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().then(() => {
        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(params = {}) {
      this.$router.push(params)
    }
  },
}
</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>