二十二、 前端按钮的权限控制v-has=”???”的用法

本文介绍了JeecgBoot中的v-has指令用法,用于按钮显示隐藏控制,通过授权标识配置权限,包括菜单权限、流程节点权限以及特殊情况处理。重点讲解了如何在系统管理中配置显示/访问权限,以及如何处理必填字段隐藏时的校验问题。

按钮的显示隐藏控制( · JeecgBoot 开发文档 · 看云

v-has="'name'"

代码示例:

按钮的显示隐藏控制( · JeecgBoot 开发文档 · 看云)

一、用法
v-has="'name'"
代码示例:

<a-form-item v-has="'name'"
  :labelCol="labelCol"
  :wrapperCol="wrapperCol"
  label="请假人">
  <a-input placeholder="请输入请假人" v-decorator="['name', {}]" />
</a-form-item>

二、权限配置:

  • v-has="'name'" 指令值“name”为授权标识,可对该授权标识进行“显示/访问”控制
  • 权限编码在【系统管理--菜单管理】中配置,添加按钮类型的菜单数据,授权标识配置值“name”,策略选择显示/访问,状态选择有效
  • 控制规则:
  • (1)使用v-has指令后,菜单权限中若没有对应指令编码的配置,则不显示控件,
  • (2)权限配置无效状态时,则不进行权限控制,有效状态时进行控制
  • (3)策略:显示/访问,未授权时不显示,授权后显示
  • (4)灵活: 一个授权标识码,可以控制多个控件,也可用于列表列字段的控制(请灵活使用)

1)说明:

  • 节点权限配置优先级高于菜单权限配置
  • 节点权限应用于使用组件方式加载的附加表单页面,并对附加表单页面进行权限控制
  • 显示控制用法见上面用法描述
  • 节点权限是通过 props: ['formData'],来传递给节点表单页面的,因此页面一定要定义这个,否则,节点配置的权限不生效
  • 权限配置无效状态时,则不进行权限控制,有效状态时进行控制

2)权限配置:
在【流程管理-流程设计】中找到需要配置的流程,进入【流程配置-流程节点】选择需要进行权限控制的节点,
点击【更多-权限设置】,新增/编辑 来配置权限。

如果给必填字段设置隐藏权限,将会导致字段隐藏了,但是校验还存在的问题。
造成该问题的原因是表单的渲染顺序导致的。
想要解决该问题,就不能仅仅使用 v-has 的形式来控制表单了,还需要通过编码的方式,动态给该表单的必填校验设置为false,将rules设置成computed计算属性可以获得更好的性能。

<!-- 案例库前端列表页vue源代码文件 --> <template> <a-row :gutter="24"> <!-- 列表部分 --> <a-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24" style="padding-left: 0;"> <a-card :bordered="false"> <!-- 查询 --> <div class="table-page-search-wrapper"> <a-form> <a-row :gutter="12"> <a-col :lg="6" :md="8" :sm="24" > <a-form-item :label="$t('caseBase.文件名称')" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-input :placeholder="$t('cm.plzEnter') + '文件名称'" v-model="queryParam.fileName__eq" > </a-input> </a-form-item> </a-col> <a-col :lg="6" :md="8" :sm="24" > <a-form-item :label="$t('caseBase.上传人')" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-input :placeholder="$t('cm.plzEnter') + '上传人'" v-model="queryParam.uploader__eq" > </a-input> </a-form-item> </a-col> <a-col :lg="6" :md="8" :sm="24" > <a-form-item :label="$t('caseBase.上传日期')" :labelCol="labelCol" :wrapperCol="wrapperCol"> <a-date-picker :placeholder="$t('cm.plzChoose') + '上传日期'" v-model="queryParam.uploadDate__eq" style="min-width: 100%;width: 100%;" :show-time="false" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" /> </a-form-item> </a-col> <a-col :lg="6" :md="8" :sm="24" style="float: right;text-align: right;"> <span class="table-page-search-custom-button table-page-search-submitButtons"> <a-button type="primary" @click="searchQuery" icon="search">{{ $t('systemAction.search') }}</a-button> <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">{{ $t('systemAction.reset') }}</a-button> </span> </a-col> </a-row> </a-form> <!-- 操作按钮 --> <div class="table-operator" style="border-top: 5px"> <span class="table-operator-buttons"> <a-button v-if="handleButtonShowExpandFunction('handleAdd', undefined)" v-has="'klny:jdjh:caseBase:insert'" ref="handleAdd" @click="handleAdd" type="primary" icon="plus">{{ $t('systemAction.add') }}</a-button> <a-button v-if="handleButtonShowExpandFunction('batchDelete', undefined)" v-has="'klny:jdjh:caseBase:delete'" ref="batchDelete" @click="batchDel(mainDataObj.hasAnnex)" type="primary" icon="delete">{{ $t('systemAction.BatchDelete') }}</a-button> <a-button ref="handleAdd" @click="'fe50eaf4989bfcae087642545b53b2a7'===ZH_GLOBAL.BUTTON_COMMON ? handleAdd() : jsEnhance['handleAdd'](that)" v-show="handleButtonShowExpandFunction('handleAdd', undefined)" v-has="'klny:jdjh:caseBase:handleAdd'" type="primary" icon=""> 新增 </a-button> <a-button ref="batchDelete" @click="'fe50eaf4989bfcae087642545b53b2a7'===ZH_GLOBAL.BUTTON_COMMON ? batchDelete() : jsEnhance['batchDelete'](that)" v-show="handleButtonShowExpandFunction('batchDelete', undefined)" v-has="'klny:jdjh:caseBase:batchDelete'" type="primary" icon=""> 批量删除 </a-button> </span> </div> <!-- 数据列表 --> <a-table ref="table" rowKey="id" size="middle" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" :expandedRowKeys="expandedRowKeys" @change="handleTableChange" > <!-- 操作列 --> <span slot="action" slot-scope="text, record"> <!-- 编辑事件 --> <a v-if="handleButtonShowExpandFunction('handleEdit', record)" v-has="'klny:jdjh:caseBase:update'" @click="handleEdit(record)"> <a-icon type="edit"/> {{ $t('systemAction.edit') }} <a-divider type="vertical"/> </a> <!-- 业务查看按钮 --> <a v-if="handleButtonShowExpandFunction('handleRead', record)" v-has="'klny:jdjh:caseBase:view'" @click="handleRead(record)"> <a-icon type="eye"/> {{ $t('systemAction.view') }} <a-divider type="vertical"/> </a> <!-- 删除 --> <a-popconfirm v-if="handleButtonShowExpandFunction('handleDelete', record)" v-has="'klny:jdjh:caseBase:delete'" :title="$t('systemAction.sureDelete')" @confirm="() =>handleDelete(record.id, true)"> <a> <a-icon type="delete"/> {{ $t('systemAction.delete') }} <a-divider type="vertical"/></a> </a-popconfirm> <a-dropdown> <a class="ant-dropdown-link">{{ $t('systemAction.more') }} <a-icon type="down"/> </a> <a-menu slot="overlay"> <a-menu-item> <a @click="handleRead(record)" v-has="'klny:jdjh:caseBase:handleRead'" v-show="handleButtonShowExpandFunction('handleRead', record)"> <a-icon type=""/> 查看 </a> </a-menu-item> <a-menu-item> <a @click="handleEdit(record)" v-has="'klny:jdjh:caseBase:handleEdit'" v-show="handleButtonShowExpandFunction('handleEdit', record)"> <a-icon type=""/> 编辑 </a> </a-menu-item> <a-menu-item> <a @click="handleDelete(record)" v-has="'klny:jdjh:caseBase:handleDelete'" v-show="handleButtonShowExpandFunction('handleDelete', record)"> <a-icon type=""/> 删除 </a> </a-menu-item> </a-menu> </a-dropdown> </span> </a-table> </div> <!-- form表单 --> <CaseBaseForm ref="modalForm" @ok="modalFormOk" /> </a-card> </a-col> </a-row> </template> <script> import CaseBaseForm from './modules/CaseBaseForm' import { ZVueListMixin } from '@/mixins/ZVueListMixin' import { caseBaseListUrl, caseBaseExportUrl, caseBaseImportExcelUrl, caseBaseImportTemplate, caseBaseDeleteUrl } from '@/api/api' export default { name: 'CaseBaseList', mixins: [ZVueListMixin], components: { CaseBaseForm }, data () { return { description: this.$t('caseBase.description'), dataTable: 'CASE_BASE', columns: [ { title: '序号', dataIndex: '', key: 'rowIndex', width: 120, align: 'center', customRender: this.rowIndex }, { title: '文件名称', dataIndex: 'fileName', align: 'center' }, { title: '上传人', dataIndex: 'uploader', align: 'center' }, { title: '上传日期', dataIndex: 'uploadDate', align: 'center' }, { title: '操作', dataIndex: 'action', align: 'center', scopedSlots: { customRender: 'action' } } ], labelCol: { span: 6 }, wrapperCol: { span: 18 }, queryParam: {}, expandedRowKeys: [], selectedRowKeys: [], form: this.$form.createForm(this), url: { list: caseBaseListUrl, export: caseBaseExportUrl, import: caseBaseImportExcelUrl, importTemplate: caseBaseImportTemplate, delete: caseBaseDeleteUrl, deleteBatch: caseBaseDeleteUrl } } }, created () { // Do someting when created this.initSelectOption() }, computed: { importExcelUrl: function () { return process.env.VUE_APP_API_BASE_URL + `${this.url.import}` } }, methods: { initSelectOption () { }, // 重置搜索框内容 searchReset () { this.queryParam = {} this.loadData() }, handleButtonShowExpandFunction (buttonCode, record) { record = record || {} switch (buttonCode) { default: return true } }, // select过滤 filterSelectOption (input, option) { return option.data.attrs.text.toLowerCase().indexOf(input.toLowerCase()) >= 0 } } } </script> <style lang="less"> /*列表上方操作按钮区域*/ .ant-card-body .table-operator { margin-bottom: 18px; } /** Button按钮间距 */ .table-operator .ant-btn { margin-right: 6px } </style> 讲解一下,并提出那里不合理如何修改
05-14
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值