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