578 lines
25 KiB
HTML
578 lines
25 KiB
HTML
<!--#
|
|
layout("/layouts/platform.html"){
|
|
#-->
|
|
<style>
|
|
.el-transfer {
|
|
text-align: center;
|
|
}
|
|
|
|
.el-transfer-panel {
|
|
text-align: left;
|
|
width: 35%;
|
|
height: 400px;
|
|
}
|
|
|
|
.el-transfer-panel__body {
|
|
height: calc(100% - 40px);
|
|
}
|
|
|
|
.el-transfer-panel__list {
|
|
height: 100%;
|
|
}
|
|
|
|
.v-tree-layout-left {
|
|
overflow: unset !important;
|
|
}
|
|
|
|
.v-tree-layout-left .v-tree {
|
|
width: 100%;
|
|
height: calc(100vh - 170px);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.v-tree:hover::-webkit-scrollbar {
|
|
width: 3px;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.v-tree-layout-left .custom-tree-node {
|
|
width: 90%;
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.v-tree-layout-left .v-tree .v-node {
|
|
width: 100%;
|
|
display: inline-block;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
/*width: 3px;*/
|
|
/*background-color: transparent;*/
|
|
display: none;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
border-radius: 10px;
|
|
}
|
|
</style>
|
|
<div id="app" v-cloak>
|
|
<guava>
|
|
<el-card shadow="never" style="height: calc(100vh - 70px)">
|
|
<tree-layout>
|
|
<template #tree>
|
|
<div style="padding:0 20px 20px;">
|
|
<el-input
|
|
@input="(val)=>{$refs.tree.filter(val)}"
|
|
placeholder="输入关键字进行查找" clearable
|
|
v-model="filterText">
|
|
</el-input>
|
|
</div>
|
|
<el-tree ref="tree" :data="treeData" v-loading="treeLoading" node-key="id"
|
|
:props="{label:'partyBranchName'}"
|
|
:expand-on-click-node="false"
|
|
:default-expanded-keys="['1']"
|
|
@node-click="handleNodeClick" accordion
|
|
highlight-current :filter-node-method="filterNode">
|
|
<div class="custom-tree-node" slot-scope="{ node, data }">
|
|
|
|
<div v-if="node.level==1" style="font-size: 16px;" class="v-node">
|
|
<i class="el-icon-office-building"></i>
|
|
{{ data.label }}
|
|
</div>
|
|
|
|
<div v-if="node.level==2" style="font-size: 15px" :title="data.name" class="v-node">
|
|
<i class="el-icon-school"></i>
|
|
{{ data.label }}
|
|
</div>
|
|
</div>
|
|
</el-tree>
|
|
|
|
</template>
|
|
<template>
|
|
<div style="padding: 0 10px">
|
|
<el-tabs v-model="tabActive" @tab-click="doSearch" type="card" style="box-shadow: none">
|
|
<el-tab-pane v-if="currentNode.level===1" label="党支部信息" name="groupInfo"></el-tab-pane>
|
|
<el-tab-pane v-if="currentNode.level===2" label="党支部人员" name="userInfo"></el-tab-pane>
|
|
<el-tab-pane v-if="currentNode.level===2" label="党支部委员会"
|
|
name="committee"></el-tab-pane>
|
|
</el-tabs>
|
|
|
|
<el-card shadow="never">
|
|
<div class="btn-group tool-button">
|
|
<el-input placeholder="请输入内容" clearable v-model="pageForm.searchKeyword"
|
|
@keyup.enter.native="doSearch">
|
|
</el-input>
|
|
</div>
|
|
<div class="btn-group tool-button">
|
|
<el-button type="primary" icon="el-icon-search"
|
|
@click="doSearch"></el-button>
|
|
</div>
|
|
|
|
<div class="pull-right offscreen-right">
|
|
<el-button v-if="tabActive==='groupInfo'" type="primary" icon="el-icon-plus"
|
|
@click="openAddPartyBranch">新增党支部
|
|
</el-button>
|
|
<el-button v-if="tabActive==='userInfo'" type="primary" icon="el-icon-plus"
|
|
@click="openAddUser">新增党支部人员
|
|
</el-button>
|
|
<el-button v-if="tabActive==='committee'" type="primary" icon="el-icon-plus"
|
|
@click="openAddCommittee">新增支部委员会人员
|
|
</el-button>
|
|
</div>
|
|
</el-card>
|
|
|
|
<el-card shadow="never" class="mt10">
|
|
<div id="secondaryTableWrap" data-bottom="80">
|
|
<el-table :data="partyBranchTableData" height="100%" v-if="tabActive==='groupInfo'"
|
|
key="partyBranchTable">
|
|
<el-table-column type="index" label="序号"></el-table-column>
|
|
<el-table-column prop="partyBranchName" label="党支部名称"></el-table-column>
|
|
<el-table-column prop="partyBranchCode" label="党支部代码"></el-table-column>
|
|
<el-table-column label="操作" width="200px">
|
|
<template scope="{row}">
|
|
<el-button size="mini"
|
|
@click="partyBranchDialogVisible=true;partyBranchFormData={...row}">
|
|
编辑
|
|
</el-button>
|
|
<el-button size="mini" type="danger" @click="deleteGroup(row.id)">删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-table :data="userTableData" height="100%" v-else-if="tabActive==='userInfo'"
|
|
key="userTable">
|
|
<el-table-column type="index" label="序号"></el-table-column>
|
|
<el-table-column prop="loginname" label="工号"></el-table-column>
|
|
<el-table-column prop="username" label="姓名"></el-table-column>
|
|
<el-table-column prop="sex" label="性别"></el-table-column>
|
|
<el-table-column prop="birthday" label="出生年月"></el-table-column>
|
|
<el-table-column prop="mobile" label="联系电话"></el-table-column>
|
|
<el-table-column prop="unitname" label="所属单位"
|
|
show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="unionname" label="所属工会"
|
|
show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="操作" width="100px">
|
|
<template scope="{row}">
|
|
<el-button size="mini" type="danger" @click="deleteUser(row.id)">删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-table :data="committeeTableData" height="100%" v-else-if="tabActive==='committee'"
|
|
key="committeeTable">
|
|
<el-table-column type="index" label="序号"></el-table-column>
|
|
<el-table-column prop="loginname" label="工号"></el-table-column>
|
|
<el-table-column prop="username" label="姓名"></el-table-column>
|
|
<el-table-column prop="sex" label="性别"></el-table-column>
|
|
<el-table-column prop="birthday" label="出生年月"></el-table-column>
|
|
<el-table-column prop="mobile" label="联系电话"></el-table-column>
|
|
<el-table-column prop="roleName" label="身份"></el-table-column>
|
|
<el-table-column label="操作" width="100px">
|
|
<template scope="{row}">
|
|
<el-button size="mini" type="danger" @click="deleteCommittee(row.id)">删除
|
|
</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<el-row class="el-pagination-container" style="margin-bottom: 0px">
|
|
<el-pagination
|
|
@size-change="(val)=>{pageForm.pageSize=val;pageData()}"
|
|
@current-change="(val)=>{pageForm.pageNumber=val;pageData()}"
|
|
:current-page="pageForm.pageNumber"
|
|
:page-sizes="[5,10, 20, 30, 50]"
|
|
:page-size="pageForm.pageSize"
|
|
layout="total, sizes, prev, pager, next"
|
|
:total="pageForm.totalCount">
|
|
</el-pagination>
|
|
</el-row>
|
|
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
</tree-layout>
|
|
</el-card>
|
|
</guava>
|
|
|
|
<el-dialog :visible.sync="partyBranchDialogVisible" title="党支部">
|
|
<el-form :model="partyBranchFormData" label-width="120px" ref="form">
|
|
<el-form-item label="党支部名称" prop="partyBranchName"
|
|
:rules="[{required:true,message:'必填',trigger:['change','blur']}]">
|
|
<el-input v-model="partyBranchFormData.partyBranchName" maxlength="20"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="党支部代码" prop="partyBranchCode"
|
|
:rules="[{required:true,message:'必填',trigger:['change','blur']}]">
|
|
<el-input-number v-model="partyBranchFormData.partyBranchCode"></el-input-number>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="partyBranchDialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="doSetPartyBranch">确定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<el-dialog :visible.sync="userDialogVisible" title="人员">
|
|
<el-form :model="partyBranchUserFormData" label-width="120px" ref="partyBranchUserForm">
|
|
<el-form-item label="人员" prop="userIds"
|
|
:rules="[{required:true,message:'必填',trigger:['change','blur']}]">
|
|
<el-select v-model="partyBranchUserFormData.userIds"
|
|
style="width: 100%"
|
|
multiple
|
|
filterable
|
|
remote
|
|
reserve-keyword
|
|
placeholder="请输入姓名或者工号查询"
|
|
:remote-method="queryNonSetUser">
|
|
<el-option
|
|
v-for="item in nonSetUserOptions"
|
|
:key="item.id"
|
|
:label="item.username"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="userDialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="doAddBranchPartyUser">确定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<el-dialog :visible.sync="committeeDialogVisible" title="支部委员会">
|
|
<el-form :model="partyBranchCommitteeFormData" label-width="120px" ref="partyBranchCommitteeForm">
|
|
<el-form-item label="人员" prop="userId"
|
|
:rules="[{required:true,message:'必填',trigger:['change','blur']}]">
|
|
<el-select v-model="partyBranchCommitteeFormData.userId"
|
|
style="width: 100%"
|
|
filterable
|
|
remote
|
|
placeholder="请输入姓名或者工号查询"
|
|
:remote-method="queryUserByPartyBranchId">
|
|
<el-option
|
|
v-for="item in committeeUserOptions"
|
|
:key="item.id"
|
|
:label="item.username"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="身份" prop="roleCode"
|
|
:rules="[{required:true,message:'必填',trigger:['change','blur']}]">
|
|
<el-select v-model="partyBranchCommitteeFormData.roleCode">
|
|
<el-option v-for="item in retiredPartyBranchCommitteeRoleOptions"
|
|
:label="item.name"
|
|
:value="item.code"
|
|
:key="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-form>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="committeeDialogVisible = false">取消</el-button>
|
|
<el-button type="primary" @click="doAddCommitteeUser">确定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
|
|
<script>
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
mixins: [initTableMixins],
|
|
components: {
|
|
'tree-layout': httpVueLoader('/components/plugins/TreeLayout.vue'),
|
|
},
|
|
data() {
|
|
return {
|
|
treeLoading: false,
|
|
treeData: [],
|
|
filterText: null,
|
|
|
|
currentData: null,
|
|
currentNode: {level: 1},
|
|
|
|
tabActive: 'groupInfo',
|
|
|
|
//党支部table
|
|
partyBranchTableData: [],
|
|
partyBranchDialogVisible: false,
|
|
partyBranchFormData: {
|
|
partyBranchName: null,
|
|
partyBranchCode: null,
|
|
id: null
|
|
},
|
|
|
|
partyBranchUserFormData: {
|
|
userIds: []
|
|
},
|
|
userTableData: [],
|
|
|
|
userDialogVisible: false,
|
|
nonSetUserOptions: [],
|
|
|
|
|
|
//支部委员会信息
|
|
retiredPartyBranchCommitteeRoleOptions: [],
|
|
committeeDialogVisible: false,
|
|
committeeUserOptions: [],
|
|
partyBranchCommitteeFormData: {
|
|
userId: null,
|
|
roleCode: null
|
|
},
|
|
committeeTableData: []
|
|
}
|
|
},
|
|
methods: {
|
|
doSearch() {
|
|
this.pageForm.pageNumber = 1
|
|
this.pageData()
|
|
},
|
|
pageData() {
|
|
if (this.tabActive === 'groupInfo') {
|
|
this.partyBranchPageData()
|
|
} else if (this.tabActive === 'userInfo') {
|
|
this.partyBranchUserPageData()
|
|
} else if (this.tabActive === 'committee') {
|
|
this.partyBranchCommitteePageData()
|
|
}
|
|
},
|
|
handleNodeClick(data, node) {
|
|
this.currentData = data
|
|
this.currentNode = node
|
|
if (node.level === 1) {
|
|
this.tabActive = 'groupInfo'
|
|
this.partyBranchPageData()
|
|
} else if (node.level === 2) {
|
|
this.tabActive = 'userInfo'
|
|
this.partyBranchUserPageData()
|
|
}
|
|
},
|
|
filterNode(value, data, node) {
|
|
if (!value) return true
|
|
return data.label.includes(value)
|
|
},
|
|
//左侧树数据
|
|
async getTree() {
|
|
const resp = await $.post(loc() + '/getTree')
|
|
if (resp.code === 0) {
|
|
this.treeData = resp.data
|
|
if (this.$refs.tree && this.$refs.tree.root.childNodes) {
|
|
this.currentNode = this.$refs.tree.root.childNodes[0]
|
|
}
|
|
|
|
} else {
|
|
this.notifyWarning(resp.msg)
|
|
}
|
|
},
|
|
|
|
//打开新增党支部模态框
|
|
openAddPartyBranch() {
|
|
this.partyBranchDialogVisible = true
|
|
this.$nextTick(() => {
|
|
this.partyBranchFormData = {
|
|
partyBranchName: null,
|
|
partyBranchCode: null,
|
|
id: null
|
|
}
|
|
this.$refs.form.resetFields()
|
|
})
|
|
},
|
|
//新增、编辑党支部
|
|
async doSetPartyBranch() {
|
|
const resp = await $.post(loc() + '/doSetPartyBranch', this.partyBranchFormData)
|
|
if (resp.code === 0) {
|
|
this.notifySuccess(resp.msg)
|
|
this.partyBranchDialogVisible = false
|
|
this.getTree()
|
|
this.partyBranchPageData()
|
|
} else {
|
|
this.notifyWarning(resp.msg)
|
|
}
|
|
},
|
|
//党支部分页数据
|
|
async partyBranchPageData() {
|
|
const resp = await $.post(loc() + '/partyBranchPageData', this.pageForm)
|
|
if (resp.code === 0) {
|
|
this.partyBranchTableData = resp.data.list
|
|
this.pageForm.totalCount = resp.data.totalCount
|
|
}
|
|
},
|
|
//删除党支部
|
|
deletePartyBranch(id) {
|
|
this.$confirm('您确定要删除吗?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(async res => {
|
|
const resp = await $.post(loc() + '/deletePartyBranch', {id})
|
|
if (resp.code === 0) {
|
|
this.notifySuccess(resp.msg)
|
|
this.getTree()
|
|
this.doSearch()
|
|
} else {
|
|
this.notifyWarning(resp.msg)
|
|
}
|
|
})
|
|
},
|
|
async partyBranchUserPageData() {
|
|
const resp = await $.post(loc() + '/partyBranchUserPageData', {
|
|
...this.pageForm,
|
|
partyBranchId: this.currentData.id
|
|
})
|
|
if (resp.code === 0) {
|
|
this.userTableData = resp.data.list
|
|
this.pageForm.totalCount = resp.data.totalCount
|
|
} else {
|
|
this.notifyWarning(resp.msg)
|
|
}
|
|
},
|
|
openAddUser() {
|
|
this.userDialogVisible = true
|
|
this.partyBranchUserFormData.userIds = []
|
|
this.queryNonSetUser(null)
|
|
},
|
|
async queryNonSetUser(val) {
|
|
if (val !== '') {
|
|
const resp = await $.post(loc() + '/queryNonSetUser', {val})
|
|
if (resp.code === 0) {
|
|
this.nonSetUserOptions = resp.data
|
|
}
|
|
} else {
|
|
this.nonSetUserOptions = []
|
|
}
|
|
},
|
|
async doAddBranchPartyUser() {
|
|
this.$refs['partyBranchUserForm'].validate(async valid => {
|
|
if (valid) {
|
|
const userIds = JSON.stringify(this.partyBranchUserFormData.userIds)
|
|
const partyBranchId = this.currentData.id
|
|
|
|
const resp = await $.post(loc() + '/doAddBranchPartyUser', {
|
|
partyBranchId,
|
|
userIds
|
|
})
|
|
if (resp.code === 0) {
|
|
this.userDialogVisible = false
|
|
this.notifySuccess(resp.msg)
|
|
this.partyBranchUserPageData()
|
|
} else {
|
|
this.notifyWarning(resp.msg)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
async deleteUser(userId) {
|
|
this.$confirm('您确定要删除吗?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(async res => {
|
|
const resp = await $.post(loc() + '/deleteUser', {userId, partyBranchId: this.currentData.id})
|
|
if (resp.code === 0) {
|
|
this.notifySuccess(resp.msg)
|
|
this.doSearch()
|
|
} else {
|
|
this.notifyWarning(resp.msg)
|
|
}
|
|
})
|
|
},
|
|
|
|
//打开新增支部委员会
|
|
openAddCommittee() {
|
|
this.committeeDialogVisible = true
|
|
this.partyBranchCommitteeFormData = {
|
|
userId: null,
|
|
roleCode: null
|
|
}
|
|
this.queryUserByPartyBranchId(null)
|
|
},
|
|
//查询党支部下的人员
|
|
async queryUserByPartyBranchId(val) {
|
|
if (val) {
|
|
const resp = await $.post(loc() + '/queryUserByPartyBranchId', {
|
|
val,
|
|
partyBranchId: this.currentData.id
|
|
})
|
|
if (resp.code === 0) {
|
|
this.committeeUserOptions = resp.data
|
|
}
|
|
} else {
|
|
this.committeeUserOptions = []
|
|
}
|
|
},
|
|
//添加党支部委员会人员
|
|
doAddCommitteeUser() {
|
|
this.$refs['partyBranchCommitteeForm'].validate(async valid => {
|
|
if (valid) {
|
|
const resp = await $.post(loc() + '/doAddCommitteeUser', {partyBranchId: this.currentData.id, ...this.partyBranchCommitteeFormData})
|
|
if (resp.code === 0) {
|
|
this.committeeDialogVisible = false
|
|
this.partyBranchCommitteePageData()
|
|
this.notifySuccess(resp.msg)
|
|
} else {
|
|
this.notifyWarning(resp.msg)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
async partyBranchCommitteePageData() {
|
|
const resp = await $.post(loc() + '/partyBranchCommitteePageData', {
|
|
...this.pageForm,
|
|
partyBranchId: this.currentData.id
|
|
})
|
|
if (resp.code === 0) {
|
|
this.committeeTableData = resp.data.list
|
|
this.pageForm.totalCount = resp.data.totalCount
|
|
} else {
|
|
this.notifyWarning(resp.msg)
|
|
}
|
|
},
|
|
|
|
deleteCommittee(userId) {
|
|
this.$confirm('您确定要删除吗?', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(async () => {
|
|
const resp = await $.post(loc() + '/deleteCommittee', {userId, partyBranchId: this.currentData.id})
|
|
if (resp.code === 0) {
|
|
this.notifySuccess(resp.msg)
|
|
this.doSearch()
|
|
} else {
|
|
this.notifyWarning(resp.msg)
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
},
|
|
async mounted() {
|
|
//动态改变table高度
|
|
await httpVueLoader('/components/plugins/Guava.vue', 'Guava')()
|
|
await httpVueLoader('/components/plugins/TreeLayout.vue', 'tree-layout')()
|
|
calcTableHeight(['secondaryTableWrap'])
|
|
window.onresize = () => {
|
|
calcTableHeight(['secondaryTableWrap'])
|
|
}
|
|
},
|
|
created() {
|
|
this.getTree()
|
|
this.partyBranchPageData()
|
|
getDictByCode('retiredPartyBranchCommitteeRole').then(res => {
|
|
this.retiredPartyBranchCommitteeRoleOptions = res
|
|
})
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<!--#
|
|
}
|
|
#-->
|