正在开发的一个系统,需要根据权限进行可编辑字段的控制。备忘一下!
自定义指令:
const fieldHas = function (app) {
app.directive('fieldHas', {
mounted: function (el, binding) {
const { value } = binding
// 自定义指令的执行函数,,取到vuex保存的字段权限,格式类似于 {formName:{fieldName:fieldRule}}
//如果没有权限数据,视为该字段为完全控制
const fieldPermissions = store.state.webRoot.fields[value]
if (!fieldPermissions) { return }
const elNames = Object.keys(fieldPermissions)
elNames.forEach(item => {
const els = el.querySelector('.' + item)
if (!els) { return }
switch (fieldPermissions[ item ])
{
case 'r'://只读权限
let inputDivs = els.querySelectorAll('.el-textarea')//单独处理el-textarea的上层div,其余的输入控制好像都有el-input,具体还未深入研究
inputDivs = inputDivs.length > 0 ? inputDivs : els.querySelectorAll('.el-input')
if (inputDivs && inputDivs.length > 0)
{
inputDivs.forEach(div => {
div.classList.add('is-disabled')
div.classList.remove('el-input--suffix')
})
}
let inputs = els.querySelectorAll('textarea')//单独处理textarea,其余的输入控制好像都是input,具体还未深入研究
inputs = inputs.length > 0 ? inputs : els.querySelectorAll('input')
if (inputs && inputs.length > 0)
{
inputs.forEach(ele => {
ele.disabled = true
})
}
els.querySelector('.el-input__suffix') && els.querySelector('.el-input__suffix').remove()
el.addEventListener('click', (e) => { // 禁用单击事件,屏蔽clearable和列表框的下拉动作
e.preventDefault()
e.stopPropagation()
}, true)
break
case 'h'://无权限
els.style.display = 'none'
break
}
})
}
})
使用:
<el-form v-fieldHas="'formName'">
<el-form-item class="fieldName"/>
</el-form>