dataease/frontend/src/views/panel/GrantAuth/user/index.vue

145 lines
3.7 KiB
Vue
Raw Normal View History

2021-03-17 18:50:29 +08:00
<template>
<div class="my_table">
<el-table
ref="table"
2021-03-18 16:55:31 +08:00
:data="data.filter(node => !keyWord || node[fieldName].toLowerCase().includes(keyWord.toLowerCase()))"
2021-03-17 18:50:29 +08:00
:show-header="true"
style="width: 100%"
:row-style="{height: '35px'}"
@filter-change="filterChange"
>
<el-table-column :column-key="fieldName" :label="columnLabel" :prop="fieldName" filter-placement="right-start" :filters="filter_options" :filter-multiple="false" :filter-method="filterHandler" />
<el-table-column type="selection" fixd />
</el-table>
</div>
</template>
<script>
import { userLists } from '@/api/system/user'
import { formatCondition } from '@/utils/index'
2021-03-18 16:55:31 +08:00
import { saveShare, loadShares } from '@/api/panel/share'
2021-03-17 18:50:29 +08:00
export default {
name: 'GrantUser',
props: {
resourceId: {
type: String,
default: null
2021-03-18 16:55:31 +08:00
},
keyWord: {
type: String,
default: ''
2021-03-17 18:50:29 +08:00
}
},
data() {
return {
data: [],
defaultHeadName: '全部',
columnLabel: null,
filter_options: [{ text: '未分享人员', value: 0 }, { text: '已分享人员', value: 1 }],
2021-03-18 16:55:31 +08:00
fieldName: 'nickName',
type: 0, // 类型0代表用户
shares: []
2021-03-17 18:50:29 +08:00
}
},
created() {
this.initColumnLabel()
this.search()
},
methods: {
initColumnLabel() {
this.columnLabel = this.defaultHeadName
},
search(condition) {
const temp = formatCondition(condition)
const param = temp || {}
userLists(1, 0, param).then(response => {
const data = response.data
// this.total = data.itemCount
this.data = data.listObject
2021-03-18 16:55:31 +08:00
this.queryShareNodeIds()
2021-03-17 18:50:29 +08:00
})
},
filterHandler(value, row, column) {
// const property = column['property']
// return row[property] === value
2021-03-18 16:55:31 +08:00
const userId = row['userId']
return !(value ^ this.shares.includes(userId))
2021-03-17 18:50:29 +08:00
},
filterChange(obj) {
const arr = obj[this.fieldName]
if (arr.length === 0) {
this.initColumnLabel()
return
}
this.columnLabel = this.filter_options[arr[0]].text
2021-03-18 16:55:31 +08:00
},
save() {
const rows = this.$refs.table.store.states.selection
const request = this.buildRequest(rows)
saveShare(request).then(res => {
this.$success('保存成功')
return true
}).catch(err => {
this.$error(err.message)
return false
})
},
cancel() {
console.log('user cancel')
},
buildRequest(rows) {
const targetIds = rows.map(row => row.userId)
const panelIds = [this.resourceId]
return {
targetIds: targetIds,
panelIds: panelIds,
type: this.type
}
},
queryShareNodeIds(callBack) {
const conditionResourceId = { field: 'panel_group_id', operator: 'eq', value: this.resourceId }
const conditionType = { field: 'type', operator: 'eq', value: this.type }
const param = { conditions: [conditionResourceId, conditionType] }
loadShares(param).then(res => {
const shares = res.data
const nodeIds = shares.map(share => share.targetId)
this.shares = nodeIds
this.$nextTick(() => {
this.setCheckNodes()
})
callBack && callBack()
})
},
setCheckNodes() {
this.data.forEach(node => {
const nodeId = node.userId
this.shares.includes(nodeId) && this.$refs.table.toggleRowSelection(node, true)
})
2021-03-17 18:50:29 +08:00
}
}
}
</script>
<style scoped>
.my_table >>> .el-table__row>td{
/* 去除表格线 */
border: none;
padding: 0 0;
}
.my_table >>> .el-table th.is-leaf {
/* 去除上边框 */
border: none;
}
.my_table >>> .el-table::before{
/* 去除下边框 */
height: 0;
}
</style>