Jackwang
3 years ago
5 changed files with 665 additions and 194 deletions
@ -0,0 +1,75 @@ |
|||
<template> |
|||
<el-table-column :prop="prop" v-bind="$attrs"> |
|||
<template slot-scope="scope"> |
|||
<span @click.prevent="toggleHandle(scope.$index, scope.row)" :style="{ 'padding-left': ((scope.row._level || 0) * 10) + 'px' }"> |
|||
<i :class="[ scope.row._expanded ? 'el-icon-caret-bottom' : 'el-icon-caret-right' ]" :style="{ 'visibility': hasChild(scope.row) ? 'visible' : 'hidden' }"></i> |
|||
{{ scope.row[prop] }} |
|||
</span> |
|||
</template> |
|||
</el-table-column> |
|||
</template> |
|||
|
|||
<script> |
|||
import isArray from 'lodash/isArray' |
|||
export default { |
|||
name: 'table-tree-column', |
|||
props: { |
|||
prop: { |
|||
type: String |
|||
}, |
|||
treeKey: { |
|||
type: String, |
|||
default: 'id' |
|||
}, |
|||
parentKey: { |
|||
type: String, |
|||
default: 'pid' |
|||
}, |
|||
childKey: { |
|||
type: String, |
|||
default: 'children' |
|||
} |
|||
}, |
|||
methods: { |
|||
hasChild (row) { |
|||
return (isArray(row[this.childKey]) && row[this.childKey].length >= 1) || false |
|||
}, |
|||
// 切换处理 |
|||
toggleHandle (index, row) { |
|||
if (!this.hasChild(row)) { |
|||
return false |
|||
} |
|||
var data = this.$parent.store.states.data.slice(0) |
|||
data[index]._expanded = !data[index]._expanded |
|||
if (data[index]._expanded) { |
|||
row[this.childKey].forEach(item => { |
|||
item._level = (row._level || 0) + 1 |
|||
item._expanded = false |
|||
}) |
|||
data = data.splice(0, index + 1).concat(row[this.childKey]).concat(data) |
|||
} else { |
|||
data = this.removeChildNode(data, row[this.treeKey]) |
|||
} |
|||
this.$parent.store.commit('setData', data) |
|||
this.$nextTick(() => { |
|||
this.$parent.doLayout() |
|||
}) |
|||
}, |
|||
// 移除子节点 |
|||
removeChildNode (data, pid) { |
|||
var pids = isArray(pid) ? pid : [pid] |
|||
if (pid.length <= 0) { |
|||
return data |
|||
} |
|||
var ids = [] |
|||
for (var i = 0; i < data.length; i++) { |
|||
if (pids.indexOf(data[i][this.parentKey]) !== -1 && pids.indexOf(data[i][this.treeKey]) === -1) { |
|||
ids.push(data.splice(i, 1)[0][this.treeKey]) |
|||
i-- |
|||
} |
|||
} |
|||
return this.removeChildNode(data, ids) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
@ -0,0 +1,186 @@ |
|||
<template> |
|||
<div class="resi-container"> |
|||
<el-card class="resi-card-table"> |
|||
<div class="resi-row-btn"> |
|||
<el-button class="diy-button--add" |
|||
size="small" |
|||
@click="addOrUpdateHandle()">新增</el-button> |
|||
</div> |
|||
|
|||
<el-table :data="tableData" |
|||
v-loading="tableLoading" |
|||
border |
|||
style="width: 100%" |
|||
class="resi-table"> |
|||
<table-tree-column prop="partyOrgName" label="党组织名称" header-align="center"></table-tree-column> |
|||
<el-table-column label="操作" |
|||
align="center" |
|||
width="300"> |
|||
<template slot-scope="scope"> |
|||
<el-button v-if="scope.row.agencyId == agencyId || scope.row.agencyPids.includes(agencyId)" |
|||
@click="handleLook(scope.row)" |
|||
type="text" |
|||
size="small" |
|||
class="div-table-button--detail">{{'查看党员'}}</el-button> |
|||
<el-button v-if="scope.row.agencyId == agencyId || scope.row.agencyPids.includes(agencyId)" |
|||
@click="handleAdd('2', 'add', scope.row)" |
|||
type="text" |
|||
size="small" |
|||
class="div-table-button--add">新增下级</el-button> |
|||
<el-button v-if="scope.row.agencyId == agencyId || scope.row.agencyPids.includes(agencyId)" |
|||
@click="addOrUpdateHandle(scope.row.id)" |
|||
type="text" |
|||
size="small" |
|||
class="div-table-button--edit">修改</el-button> |
|||
<el-button v-if="scope.row.agencyId == agencyId || scope.row.agencyPids.includes(agencyId)" |
|||
@click="handleEdit(scope.row, 'edit')" |
|||
type="text" |
|||
size="small" |
|||
class="div-table-button--edit">删除</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update> |
|||
</el-card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import mixinViewModule from '@/mixins/view-module' |
|||
import AddOrUpdate from './icpartyorg-add-or-update' |
|||
import TableTreeColumn from '@/components/table-tree-column' |
|||
|
|||
export default { |
|||
mixins: [mixinViewModule], |
|||
data () { |
|||
return { |
|||
mixinViewModuleOptions: { |
|||
getDataListURL: '/resi/partymember/icPartyOrg/getTreelist', |
|||
getDataListIsPage: true, |
|||
deleteURL: '/resi/partymember/icPartyOrg', |
|||
deleteIsBatch: true |
|||
}, |
|||
dataForm: { |
|||
id: '', |
|||
customerId: '' |
|||
}, |
|||
tableLoading: false, |
|||
tableData: [], |
|||
agencyId: '' |
|||
} |
|||
}, |
|||
components: { |
|||
AddOrUpdate, |
|||
TableTreeColumn |
|||
}, |
|||
async created () { |
|||
this.agencyId = localStorage.getItem('agencyId') |
|||
this.dataForm.customerId = localStorage.getItem('customerId') |
|||
this.getTableData() |
|||
// this.pageLoading = true |
|||
}, |
|||
methods:{ |
|||
// 新增 / 修改 |
|||
addOrUpdateHandle (id) { |
|||
this.addOrUpdateVisible = true |
|||
this.$nextTick(() => { |
|||
this.$refs.addOrUpdate.dataForm.id = id |
|||
this.$refs.addOrUpdate.init() |
|||
}) |
|||
}, |
|||
async getTableData () { |
|||
this.tableLoading = true |
|||
let params = { |
|||
customerId: localStorage.getItem('customerId') |
|||
} |
|||
await this.$http |
|||
.get('/resi/partymember/icPartyOrg/getTreelist', {params: this.dataForm}) |
|||
.then(({ data: res }) => { |
|||
if (res.code !== 0) { |
|||
return this.$message.error(res.msg) |
|||
} else { |
|||
this.tableData = res.data |
|||
} |
|||
}) |
|||
.catch(() => {}) |
|||
this.tableLoading = false |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.resi-container .resi-card-table { |
|||
::v-deep .el-table { |
|||
th { |
|||
color: #fff; |
|||
background-color: rgba(33, 149, 254, 1); |
|||
} |
|||
|
|||
.cell { |
|||
span:nth-of-type(3) { |
|||
display: inline-block; |
|||
width: 90%; |
|||
word-break: break-all; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.resi-table { |
|||
::v-deep .el-button--text { |
|||
text-decoration: underline; |
|||
} |
|||
::v-deep .btn-color-del { |
|||
margin-left: 10px; |
|||
color: rgba(213, 16, 16, 1); |
|||
} |
|||
::v-deep .btn-color-edit { |
|||
color: rgba(0, 167, 169, 1); |
|||
} |
|||
} |
|||
</style> |
|||
<style lang="scss" scoped> |
|||
.resi-row-btn { |
|||
display: flex; |
|||
margin-bottom: 13px; |
|||
::v-deep .el-button { |
|||
// margin-left: 10px; |
|||
border: 0; |
|||
} |
|||
::v-deep .el-select { |
|||
margin-right: 10px; |
|||
} |
|||
.el-button--success { |
|||
background: rgba(34, 193, 195, 1); |
|||
} |
|||
} |
|||
.avatar-uploader { |
|||
::v-deep .el-upload { |
|||
cursor: pointer; |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
.el-upload:hover { |
|||
border-color: #409eff; |
|||
} |
|||
.avatar { |
|||
width: 70px; |
|||
height: 70px; |
|||
display: block; |
|||
} |
|||
.avatar-uploader-icon { |
|||
border: 1px dashed #d9d9d9; |
|||
border-radius: 6px; |
|||
font-size: 28px; |
|||
color: #8c939d; |
|||
width: 70px; |
|||
height: 70px; |
|||
line-height: 70px; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
|||
.resi-btns { |
|||
margin-top: 20px; |
|||
text-align: center; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue