<template>
|
<zt-dialog ref="dialog" :title="$t('role.dataRight')" column="2" @confirm="formSubmit" append-to-body>
|
<zt-table-wraper ref="tableObj" :lazy="true" v-bind:paging='false' v-slot="{ table }">
|
<el-form :inline="true" :model="dataForm" @keyup.enter.native="table.query()">
|
<zt-button type="update" perm="sys:role" @click="edit()"/>
|
</el-form>
|
<el-table v-loading="table.dataLoading" :data="tableDataList" default-expand-all :span-method="tableSpanMethod" row-key="id" border>
|
<el-table-column prop="name" :label="$t('interface.name')" min-width="150"/>
|
<el-table-column :label="$t('interface.field')" >
|
<template v-slot="{ row }">
|
<div v-if="row.interfaceId">
|
<el-row class="data_scope_row" type="flex" v-for="(dataScope, index) in getSelectDataScopeList(row.id)" :key="index">
|
<el-col class="data_scope_col" :span="6">
|
<label>{{dataScope.name}}</label>
|
</el-col>
|
<el-col class="data_scope_col" :span="6">
|
<label>{{dataScope.op}}</label>
|
</el-col>
|
<el-col class="data_scope_col" :span="6">
|
<zt-dict v-if="dataScope.accept =='COMPANY'" v-model="dataScope.valueType" dict="scope_company" :placeholder="$t('role.companyControlType')"></zt-dict>
|
<zt-dict v-else-if="dataScope.accept =='DEPT'" v-model="dataScope.valueType" dict="scope_dept" :placeholder="$t('role.deptControlType')"></zt-dict>
|
<zt-dict v-else-if="dataScope.accept =='USER'" v-model="dataScope.valueType" dict="scope_user" :placeholder="$t('role.userControlType')"></zt-dict>
|
<label v-else-if="dataScope.accept == 'DICT'">字典值</label>
|
<label v-else-if="dataScope.accept == 'INPUT'">输入值</label>
|
</el-col>
|
<el-col class="data_scope_col" :span="6">
|
<zt-combo-tree v-if="dataScope.accept =='COMPANY' && (dataScope.valueType == 'selectId' || dataScope.valueType == 'selectIds')"
|
v-model="dataScope.value" :datas="companyList" :placeholder="$t('role.paramsValue')"/>
|
<zt-combo-tree v-else-if="dataScope.accept =='DEPT' && (dataScope.valueType == 'selectId' || dataScope.valueType == 'selectIds')"
|
v-model="dataScope.value" :datas="deptList" :placeholder="$t('role.paramsValue')"/>
|
<zt-user-selector v-else-if="dataScope.accept == 'USER' && (dataScope.valueType == 'selectId' || dataScope.valueType == 'selectIds')"
|
v-model="dataScope.value" :multiple="false" :placeholder="$t('role.paramsValue')"/>
|
<zt-dict v-else-if="dataScope.accept == 'DICT'" v-model="dataScope.value" :dict="dataScope.dict || 'bool'" :placeholder="$t('role.paramsValue')"></zt-dict>
|
<el-input v-else-if="dataScope.accept == 'INPUT'" v-model="dataScope.value" :placeholder="$t('role.paramsValue')"></el-input>
|
</el-col>
|
</el-row>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column :label="$t('interface.op')" />
|
<el-table-column :label="$t('role.controlType')" />
|
<el-table-column :label="$t('role.paramsValue')" />
|
</el-table>
|
</zt-table-wraper>
|
<interface-select ref="interfaceSelect" :value="selectInterfaceIdList" @input="bindSelectInterface"></interface-select>
|
</zt-dialog>
|
</template>
|
|
<script>
|
import interfaceSelect from './role-interface-select'
|
export default {
|
components: {
|
interfaceSelect
|
},
|
data() {
|
return {
|
interfaceList: [],
|
companyList: [],
|
deptList: [],
|
dataForm: {
|
roleId: '',
|
dataScopeList: []
|
}
|
}
|
},
|
computed: {
|
interfaceArray() { // 接口列表数组（方便遍历）
|
return this.flattenTrees(this.interfaceList)
|
},
|
selectInterfaceIdList() {
|
var result = []
|
for (let item of this.interfaceArray) {
|
if (item.interfaceId) {
|
for (let dataScope of this.dataForm.dataScopeList) {
|
if (item.id === dataScope.pid) {
|
result.push(item.id)
|
break
|
}
|
}
|
}
|
}
|
return result
|
},
|
tableDataList() {
|
var selectTrees = []
|
this.buildSelectInterfaceTree(this.interfaceList, selectTrees)
|
return selectTrees
|
}
|
},
|
methods: {
|
init(roleId) {
|
this.dataForm.roleId = roleId
|
this.getInterface()
|
this.getCompanyList()
|
this.getDeptList()
|
},
|
async getInfo() {
|
let res = await this.$http.get(`/sys/role/dataScope?roleId=${this.dataForm.roleId}`)
|
if (res.success) {
|
this.dataForm.dataScopeList = res.data
|
}
|
},
|
// 编辑（选择接口）
|
edit() {
|
this.$refs.interfaceSelect.$refs.dialog.init()
|
},
|
// 列表单元格合并
|
tableSpanMethod({row, column, rowIndex, columnIndex}) {
|
if (columnIndex === 1) {
|
return [1, 4]
|
}
|
},
|
// 获取接口列表
|
async getInterface() {
|
let res = await this.$http.get('/sys/interface/tree')
|
if (res.success) {
|
this.interfaceList = res.data
|
}
|
},
|
// 获取公司列表
|
async getCompanyList() {
|
let res = await this.$http.get('/sys/company/tree')
|
if (res.success) {
|
this.companyList = res.data
|
}
|
},
|
// 获取部门列表
|
async getDeptList() {
|
let res = await this.$http.get('/sys/dept/tree')
|
if (res.success) {
|
this.deptList = res.data
|
}
|
},
|
// tree转array
|
flattenTrees(trees) {
|
let result = []
|
trees.forEach(item => {
|
result.push(item)
|
item.children && result.push(...this.flattenTrees(item.children))
|
})
|
return result
|
},
|
// 是否是已选择的接口父节点
|
isSelectInterfaceParent(item) {
|
var result = false
|
if (item.interfaceId) {
|
for (let dataScope of this.dataForm.dataScopeList) {
|
if (item.id === dataScope.pid) {
|
result = true
|
break
|
}
|
}
|
} else if (item.children) {
|
for (let childrenItem of item.children) {
|
if (this.isSelectInterfaceParent(childrenItem)) {
|
result = true
|
break
|
}
|
}
|
}
|
return result
|
},
|
// 构建已选择的接口树
|
buildSelectInterfaceTree(trees, selectTrees) {
|
for (let item of trees) {
|
if (this.isSelectInterfaceParent(item)) {
|
var selectItem = {...item}
|
selectTrees.push(selectItem)
|
if (item.children) {
|
selectItem.children = []
|
this.buildSelectInterfaceTree(item.children, selectItem.children)
|
}
|
}
|
}
|
},
|
// 获取已选择的dataScope
|
getSelectDataScopeList(id) {
|
var result = []
|
for (let dataScope of this.dataForm.dataScopeList) {
|
if (id === dataScope.pid) {
|
result.push(dataScope)
|
}
|
}
|
return result
|
},
|
// 选择接口
|
bindSelectInterface(value) {
|
var dataScopeList = []
|
for (let id of value) {
|
for (let item of this.interfaceArray) {
|
// 找到已选择的interface
|
if (item.interfaceId && item.id === id) {
|
for (let field of item.fields) {
|
// 优先从dataForm中取
|
var hasExist = false
|
for (let dataScope of this.dataForm.dataScopeList) {
|
if (dataScope.id === field.id) {
|
hasExist = true
|
dataScopeList.push(dataScope)
|
break
|
}
|
}
|
if (!hasExist) {
|
var dataScope = {...field}
|
if (dataScope.accept === 'COMPANY') {
|
dataScope.valueType = 'currentIds'
|
} else if (dataScope.accept === 'DEPT') {
|
dataScope.valueType = 'currentIds'
|
} else if (dataScope.accept === 'USER') {
|
dataScope.valueType = 'currentId'
|
} else if (dataScope.accept === 'DICT') {
|
dataScope.valueType = 'dict'
|
} else if (dataScope.accept === 'INPUT') {
|
dataScope.valueType = 'input'
|
} else {
|
dataScope.valueType = ''
|
}
|
dataScope.value = ''
|
dataScopeList.push(dataScope)
|
}
|
}
|
}
|
}
|
}
|
this.dataForm.dataScopeList = dataScopeList
|
},
|
// 表单提交
|
async formSubmit() {
|
for (let dataScope of this.dataForm.dataScopeList) {
|
if (!dataScope.valueType) {
|
this.$tip.error('请选择控制类型')
|
return
|
}
|
if (dataScope.valueType === 'currentId' || dataScope.valueType === 'currentIds') {
|
continue
|
}
|
if (!dataScope.value) {
|
this.$tip.error('请填写参考值')
|
return
|
}
|
}
|
let res = await this.$http['post']('/sys/role/dataScope', this.dataForm)
|
if (res.success) {
|
await this.$tip.success()
|
this.$refs.dialog.close()
|
// this.$emit('refreshDataList')
|
}
|
}
|
}
|
}
|
</script>
|
|
<style>
|
.data_scope_row {
|
padding-top: 4px;
|
padding-bottom: 4px;
|
}
|
.data_scope_col {
|
display: flex;
|
align-items: center;
|
padding-left: 8px;
|
padding-right: 8px;
|
}
|
</style>
|
