控制权限按钮的显示隐藏

权限按钮的显示隐藏

 <template slot="top-right">
            <el-button
                v-if="fn('organizationManage-new')"
                type="primary"
                icon="el-icon-plus"
                :disabled="!hasCurrentNodeData"
                @click="showAddOrg"
            >新增组织</el-button>
            <!-- v-if="$checkBtnAuth('delete', authData, true)" -->
            <el-button
                v-if="fn('organizationManage-delete')"
                :disabled="!selected_rows||selected_rows.length<=0"
                @click="handleClickDelete"
            >删除</el-button>
        </template>

//修改权限显示
  fn(btn) {
    let arr = JSON.parse(sessionStorage.getItem('vuex')).all_has_permission_code
    let flag = arr.indexOf(btn)
    if (flag == -1) {
      return false
    } else {
      return true
    }
  }

控制按钮权限操作

<template>
    <div class="app-container">
        <el-button
            type="primary"
            icon="el-icon-plus"
            @click="addOneRow"
        >新增一行</el-button>
        <el-table
            v-loading="item_menu_permission_loading"
            :data="itemMenuPermissionTable"
            max-height="400px"
            height="400px"
            border
            fit
            highlight-current-row
            style="width: 100%;"
        >
            <el-table-column
                type="index"
                align="center"
                label="ID"
                width="40"
            ></el-table-column>

            <el-table-column
                min-width="140px"
                align="center"
                label="权限名称"
            >
                <template slot-scope="{row}">
                    <template v-if="row.edit">
                        <div class="edit">
                            <el-input
                                v-model="row.actionName"
                                class="edit-input"
                            />
                            <el-button
                                class="cancel-btn"
                                type="text"
                                icon="el-icon-refresh"
                                @click="cancelEdit(row)"
                            >取消</el-button>
                        </div>
                    </template>
                    <span v-else>{{ row.actionName }}</span>
                </template>
            </el-table-column>

            <el-table-column
                min-width="260px"
                label="权限编码"
            >
                <template slot-scope="{row}">
                    <template v-if="row.edit">
                        <div class="edit">
                            <el-input
                                v-model.trim="row.actionCode"
                                class="edit-input"
                            />
                            <el-button
                                class="cancel-btn"
                                icon="el-icon-refresh"
                                type="text"
                                @click="cancelEdit(row)"
                            >取消</el-button>
                        </div>
                    </template>
                    <span v-else>{{ row.actionCode }}</span>
                </template>
            </el-table-column>

            <el-table-column
                width="110px"
                label="权限类型"
            >
                <template slot-scope="{row}">
                    <el-select
                        v-model="row.actionOperation"
                        placeholder
                    >
                        <el-option
                            v-for="item in action_operation_options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </template>
            </el-table-column>

            <el-table-column
                width="110px"
                label="请求类型"
            >
                <template slot-scope="{row}">
                    <el-select
                        v-model="row.actionType"
                        placeholder
                    >
                        <el-option
                            v-for="item in actionTypeOptions"
                            :key="item.value"
                            :label="item.value"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column
                min-width="100px"
                label="请求地址"
            >
                <template slot-scope="{row}">
                    <template v-if="row.edit">
                        <div class="edit">
                            <el-input
                                v-model.trim="row.actionURL"
                                class="edit-input"
                            />
                            <el-button
                                class="cancel-btn"
                                icon="el-icon-refresh"
                                type="text"
                                @click="cancelEdit(row)"
                            >取消</el-button>
                        </div>
                    </template>
                    <span v-else>{{ row.actionURL }}</span>
                </template>
            </el-table-column>
            <el-table-column
                width="80px"
                label="启用"
            >
                <template slot-scope="{row}">
                    <el-switch
                        v-model="row.ifUse"
                        :active-value="1"
                        :inactive-value="0"
                        @change="singleControlSwitch(row)"
                    ></el-switch>
                </template>
            </el-table-column>

            <el-table-column
                align="center"
                label="操作"
                width="140"
            >
                <template slot-scope="{row,$index}">
                    <el-button
                        v-if="row.edit"
                        type="success"
                        plain
                        @click="confirmEdit(row)"
                    >完成</el-button>
                    <el-button
                        v-else
                        type="primary"
                        plain
                        @click="handleEdit(row)"
                    >编辑</el-button>
                    <el-button
                        type="text"
                        @click="handleDelete(row,$index)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

export default class ItemPermissionTable extends Vue {
  filters = {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  }

  listLoading = true
  // 权限类型
  //请求类型
  actionTypeOptions = [
    {
      value: 'GET'
    },
    {
      value: 'POST'
    },
    {
      value: 'PUT'
    },
    {
      value: 'DELETE'
    }
  ]

  @vuexSystemMenu.State current_menu!: IMenuDetail
  @vuexSystemMenu.State item_menu_permission_loading
  @vuexSystemMenu.State action_operation_options
  // 权限列表
  @vuexSystemMenu.State item_menu_permission

  get itemMenuPermissionTable(): IItemMenuPermissionForm[] {
    return this.item_menu_permission
  }

  set itemMenuPermissionTable(val: IItemMenuPermissionForm[]) {
    this.itemMenuPermissionTable = val
  }

  singleControlSwitch({ ifUse, id }) {
    // console.log(ifUse, id, 2)

    getRestart(id, ifUse)
      .then(res => {
        //console.log(res)
        this.$notify.success(`${['禁用', '启用'][ifUse]}成功!`)
      })
      .catch(e => {
        // this.$notify.error(`${['禁用', '启用'][ifUse]}失败: ${e.message}`)
      })
  }

  handleEdit(row) {
    this.$set(row, 'edit', true)
  }

  handleDelete(row, $index) {
    this.$confirm(`确定删除选择的权限？`, { type: 'warning' }).then(() => {
      if (!row.id) {
        this.itemMenuPermissionTable.splice($index, 1)
        return
      }
      deleteMenuPermission([row.id])
        .then(res => {
          this.itemMenuPermissionTable.splice($index, 1)
        })
        .catch(e => {
          this.$notify.error(`删除失败: ${e.message}`)
        })
    })
  }

  addOneRow() {
    this.itemMenuPermissionTable.push({
      menuId: this.current_menu.id,
      actionOperation: 'check',
      actionCode: '',
      actionName: '',
      actionType: 'GET',
      actionURL: '',
      ifUse: 1,
      edit: true
    })
  }

  cancelEdit(row) {
    row.edit = false
    this.$message({
      message: '已取消编辑,将不保存修改!',
      type: 'warning'
    })
  }

  confirmEdit(row) {
    this.$set(row, 'edit', false)
    postMenuPermission(row)
      .then(res => {
        this.$notify.success(`保存成功!`)
      })
      .catch(e => {
        this.$notify.error(`保存失败: ${e.message}`)
      })
  }
}