工作组架构
This commit is contained in:
宋伟佳
@@ -0,0 +1,352 @@
|
|||||||
|
<template>
|
||||||
|
<div class="roleTree">
|
||||||
|
<el-drawer
|
||||||
|
:title="isTitle"
|
||||||
|
:visible.sync="isVisible2"
|
||||||
|
:wrapperClosable="false"
|
||||||
|
@close="handleTreeDrawerCancel"
|
||||||
|
size="400px">
|
||||||
|
<el-form
|
||||||
|
ref="attributeEO"
|
||||||
|
class="label-input-form"
|
||||||
|
:inline="true"
|
||||||
|
@submit.native.prevent
|
||||||
|
>
|
||||||
|
<el-form-item class="form-item-disabled" style="margin: 10px;">
|
||||||
|
<el-input
|
||||||
|
v-model="filterText"
|
||||||
|
placeholder="请输入姓名"
|
||||||
|
@input="changeInput"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-tree
|
||||||
|
v-if="open1 && isVisible2"
|
||||||
|
node-key="id"
|
||||||
|
style="height: 100%; overflow: auto;"
|
||||||
|
class="filter-tree tree-line"
|
||||||
|
icon-class="icon-tree"
|
||||||
|
@check-change="checkChange"
|
||||||
|
:data="treeData"
|
||||||
|
:props="defaultProps"
|
||||||
|
:default-checked-keys="nodeList"
|
||||||
|
highlight-current
|
||||||
|
check-strictly
|
||||||
|
@check="drawerCheck"
|
||||||
|
:expand-on-click-node="true"
|
||||||
|
show-checkbox
|
||||||
|
ref="tree"
|
||||||
|
:load="loadNode"
|
||||||
|
lazy>
|
||||||
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||||
|
<span :class="node.disabled ? 'is-show' : 'is-leaf-none'"></span>
|
||||||
|
<span> {{ node.label }} </span>
|
||||||
|
</span>
|
||||||
|
</el-tree>
|
||||||
|
<el-tree
|
||||||
|
v-if="!open1 && isVisible2"
|
||||||
|
node-key="id"
|
||||||
|
style="height: 100%; overflow: auto;"
|
||||||
|
class="filter-tree tree-line"
|
||||||
|
icon-class="icon-tree"
|
||||||
|
:data="treeData1"
|
||||||
|
:props="defaultProps"
|
||||||
|
@check-change="checkChange2"
|
||||||
|
:default-checked-keys="nodeList"
|
||||||
|
highlight-current
|
||||||
|
check-strictly
|
||||||
|
@check="drawerCheck"
|
||||||
|
:expand-on-click-node="true"
|
||||||
|
default-expand-all
|
||||||
|
show-checkbox
|
||||||
|
ref="tree">
|
||||||
|
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||||
|
<span :class="node.disabled ? 'is-show' : 'is-leaf-none'"></span>
|
||||||
|
<span> {{ node.label }} </span>
|
||||||
|
</span>
|
||||||
|
</el-tree>
|
||||||
|
<div id="roleFormButton" class="demo-drawer-footer">
|
||||||
|
<el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="saveUserInfo">确定</el-button>
|
||||||
|
|
||||||
|
<el-button class="common-button-default" size="mini" icon="el-icon-close" @click="handleTreeDrawerCancel">取消</el-button>
|
||||||
|
</div>
|
||||||
|
<loading style="z-index: 2099;" :loading="treeLoading">导入中...</loading>
|
||||||
|
</el-drawer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function debounce(func, wait = 500){
|
||||||
|
let timeout;
|
||||||
|
return function(event){
|
||||||
|
clearTimeout(timeout)
|
||||||
|
timeout = setTimeout(()=>{
|
||||||
|
func.call(this, event)
|
||||||
|
},wait)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default {
|
||||||
|
name: "workTree",
|
||||||
|
props: {
|
||||||
|
checkBox: { // 单选/多选
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
isTitle: { // 标题
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
isVisible: { // drawer开关
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
nodeList: { // 回显
|
||||||
|
type: Array,
|
||||||
|
default: () => {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
roleList: [],
|
||||||
|
isVisible2: false,
|
||||||
|
filterText: '',
|
||||||
|
defaultProps: {
|
||||||
|
children: 'children',
|
||||||
|
label: 'name',
|
||||||
|
isLeaf: (data, node) => {
|
||||||
|
if (!node.disabled) {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
treeData1: [],
|
||||||
|
treeData: [],
|
||||||
|
open1: true,
|
||||||
|
treeLoading: false,
|
||||||
|
roleRow: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
changeInput:debounce(function (val) {
|
||||||
|
if (val.length) {
|
||||||
|
this.open1 = false
|
||||||
|
this.treeLoading = true
|
||||||
|
this.$http.get('SarInstitution/institution/institutionAndUser', {
|
||||||
|
userName: val
|
||||||
|
}, {}, res => {
|
||||||
|
this.treeData1 = res.data
|
||||||
|
this.treeLoading = false
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.open1 = true
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
checkChange2 (row, type, c) {
|
||||||
|
if (this.checkBox) {
|
||||||
|
} else {
|
||||||
|
if (type) {
|
||||||
|
this.nodeList.push(row.id)
|
||||||
|
} else {
|
||||||
|
for (let a = 0; a < this.nodeList.length; a ++) {
|
||||||
|
if (row.id === this.nodeList[a]) {
|
||||||
|
this.nodeList.splice(a, 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
checkChange (row, type, c) {
|
||||||
|
if (this.checkBox) {
|
||||||
|
} else {
|
||||||
|
if (type) {
|
||||||
|
this.nodeList.push(row.id)
|
||||||
|
} else {
|
||||||
|
for (let a = 0; a < this.nodeList.length; a ++) {
|
||||||
|
if (row.id === this.nodeList[a]) {
|
||||||
|
this.nodeList.splice(a, 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
handleTreeDrawerCancel () {
|
||||||
|
this.filterText = ''
|
||||||
|
this.isVisible2 = false
|
||||||
|
this.open1 = true
|
||||||
|
},
|
||||||
|
saveUserInfo () {
|
||||||
|
if (this.checkBox) {
|
||||||
|
this.isVisible2 = false
|
||||||
|
this.$emit('checkedRole', this.roleList)
|
||||||
|
} else {
|
||||||
|
if (this.nodeList.length > 0 && this.nodeList[0].length !== 0) {
|
||||||
|
let ids = ''
|
||||||
|
this.nodeList.forEach(item => {
|
||||||
|
if (ids.length > 0) {
|
||||||
|
ids += ','
|
||||||
|
ids += item
|
||||||
|
} else {
|
||||||
|
ids = item
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.$http.get('SarInstitution/institution/getNextById', {
|
||||||
|
ids: ids
|
||||||
|
}, {
|
||||||
|
_this: this
|
||||||
|
}, res => {
|
||||||
|
this.isVisible2 = false
|
||||||
|
this.$emit('checkedRole', res)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.isVisible2 = false
|
||||||
|
this.$emit('checkedRole', this.roleList)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.open1 = true
|
||||||
|
},
|
||||||
|
drawerCheck (data) {
|
||||||
|
if (this.checkBox) { // 单选
|
||||||
|
// 单选判断
|
||||||
|
let getlist = this.$refs.tree.getCheckedNodes()
|
||||||
|
if (getlist.length > 1) {
|
||||||
|
this.$refs.tree.setCheckedKeys([])
|
||||||
|
this.$refs.tree.setCheckedKeys([data.id])
|
||||||
|
this.roleList = [data]
|
||||||
|
} else if (getlist.length === 0) {
|
||||||
|
this.roleList = [{}]
|
||||||
|
} else if (getlist.length === 1) {
|
||||||
|
this.roleList = [data]
|
||||||
|
}
|
||||||
|
// var getlist = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes());
|
||||||
|
// if(getlist.length == 1) {
|
||||||
|
// this.roleRow = getlist[0]
|
||||||
|
// } else {
|
||||||
|
// this.$refs.tree.setCheckedKeys([data.id])
|
||||||
|
// this.roleRow = this.$refs.tree.getCheckedNodes()[0]
|
||||||
|
// }
|
||||||
|
// this.roleList = [this.roleRow]
|
||||||
|
} else { // 多选
|
||||||
|
this.roleList = this.$refs.tree.getCheckedNodes().concat(this.$refs.tree.getHalfCheckedNodes())
|
||||||
|
}
|
||||||
|
},
|
||||||
|
loadNode(node, resolve) {
|
||||||
|
if (node.level === 0) {
|
||||||
|
return resolve(this.treeData);
|
||||||
|
}
|
||||||
|
this.getChildren(node, resolve)
|
||||||
|
},
|
||||||
|
getChildren (node, resolve) {
|
||||||
|
this.$http.get('SarInstitution/institution/getNext', {
|
||||||
|
institutionId: node.key,
|
||||||
|
userName: this.filterText
|
||||||
|
}, {}, res => {
|
||||||
|
resolve(res)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getTree () {
|
||||||
|
this.treeLoading = true
|
||||||
|
this.$http.get('SarInstitution/institution/getFirstInstitution', {}, {}, res=> {
|
||||||
|
this.treeData = res
|
||||||
|
this.treeLoading = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
isVisible (val) {
|
||||||
|
this.isVisible2 = val
|
||||||
|
},
|
||||||
|
isVisible2 (val) {
|
||||||
|
this.$emit('update:isVisible', val)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted () {
|
||||||
|
this.getTree()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
/deep/ .icon-tree {
|
||||||
|
margin: 0 5px 0 10px;
|
||||||
|
position: relative;
|
||||||
|
background: url('~@/assets/images/shangqi/img/tree-add.png');
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
/deep/.el-tree-node__content {
|
||||||
|
padding-left: 0px !important;
|
||||||
|
}
|
||||||
|
/deep/ .is-leaf{
|
||||||
|
background-image:none;
|
||||||
|
background-size:100% 100%;
|
||||||
|
}
|
||||||
|
/deep/ .is-leaf-none{
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
background:url('~@/assets/images/shangqi/img/personnel.png');
|
||||||
|
background-size:100% 100%;
|
||||||
|
}
|
||||||
|
/deep/ .is-show{
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
background:url('~@/assets/images/shangqi/img/mechanism.png');
|
||||||
|
background-size:100% 100%;
|
||||||
|
}
|
||||||
|
/deep/.tree-line{
|
||||||
|
.el-tree-node {
|
||||||
|
position: relative;
|
||||||
|
padding-left: 0px; // 缩进量
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
.el-tree-node__children {
|
||||||
|
padding-left: 16px; // 缩进量
|
||||||
|
}
|
||||||
|
// 竖线
|
||||||
|
.el-tree-node::before {
|
||||||
|
content: "";
|
||||||
|
height: 100%;
|
||||||
|
width: 1px;
|
||||||
|
position: absolute;
|
||||||
|
left: -3px;
|
||||||
|
top: -26px;
|
||||||
|
border-width: 1px;
|
||||||
|
border-left: 1px dashed #858990e0;
|
||||||
|
}
|
||||||
|
// 当前层最后一个节点的竖线高度固定
|
||||||
|
.el-tree-node:last-child::before {
|
||||||
|
height: 38px; // 可以自己调节到合适数值
|
||||||
|
}
|
||||||
|
// 横线
|
||||||
|
.el-tree-node::after {
|
||||||
|
content: "";
|
||||||
|
width: 11px;
|
||||||
|
height: 20px;
|
||||||
|
position: absolute;
|
||||||
|
left: -3px;
|
||||||
|
top: 12px;
|
||||||
|
border-width: 1px;
|
||||||
|
border-top: 1px dashed #858990e0;
|
||||||
|
}
|
||||||
|
// 去掉最顶层的虚线，放最下面样式才不会被上面的覆盖了
|
||||||
|
& > .el-tree-node::after {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
& > .el-tree-node::before {
|
||||||
|
border-left: none;
|
||||||
|
}
|
||||||
|
// 展开关闭的icon
|
||||||
|
.el-tree-node__expand-icon{
|
||||||
|
font-size: 16px;
|
||||||
|
// 叶子节点（无子节点）
|
||||||
|
&.is-leaf{
|
||||||
|
color: transparent;
|
||||||
|
// display: none; // 也可以去掉
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,662 +1,76 @@
|
|||||||
<!-- 配置管理 - 机构管理 -->
|
<!--未符合项整改-->
|
||||||
<template>
|
<template>
|
||||||
<div id="mechanism-manage" :class="{ 'tree-close': sideClose }" class="v-class">
|
<div id="mechanism" >
|
||||||
<div class="tree-content" :class="{ 'tree-closed': sideClose }">
|
<div class="mechanism-content">
|
||||||
<div class="tree">
|
<el-tabs v-model="activeName" @tab-click="handleClick" style="height: 100%">
|
||||||
<!-- @keyup.enter.native="searchPeople"-->
|
<el-tab-pane label="机构管理" name="mechanism">
|
||||||
<el-input
|
<mechanism></mechanism>
|
||||||
class="filter-tree-input"
|
</el-tab-pane>
|
||||||
placeholder="输入关键字进行过滤"
|
<el-tab-pane label="工作组" name="workgroup">
|
||||||
v-model="filterText">
|
<workgroup></workgroup>
|
||||||
</el-input>
|
</el-tab-pane>
|
||||||
<!-- <el-tree-->
|
</el-tabs>
|
||||||
<!-- node-key="id"-->
|
|
||||||
<!-- :data="treeData"-->
|
|
||||||
<!-- :props="defaultProps"-->
|
|
||||||
<!-- :default-checked-keys="nodeList"-->
|
|
||||||
<!-- :current-node-key="nodeKeyId"-->
|
|
||||||
<!-- highlight-current-->
|
|
||||||
<!-- check-strictly-->
|
|
||||||
<!-- :expand-on-click-node="false"-->
|
|
||||||
<!-- ref="tree"-->
|
|
||||||
<!-- :load="loadNode"-->
|
|
||||||
<!-- @node-click="handleNodeClick"-->
|
|
||||||
<!-- lazy>-->
|
|
||||||
<!-- </el-tree>-->
|
|
||||||
<el-tree
|
|
||||||
:data="treeData"
|
|
||||||
:props="defaultProps"
|
|
||||||
:current-node-key="nodeKeyId"
|
|
||||||
node-key="id"
|
|
||||||
:filter-node-method="filterNode"
|
|
||||||
highlight-current
|
|
||||||
ref="tree"
|
|
||||||
:expand-on-click-node="false"
|
|
||||||
@node-click="handleNodeClick">
|
|
||||||
</el-tree>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="tree-collapse" @click="treeCollapse" :class="{ 'tree-close': sideClose }">
|
|
||||||
<!--切换折叠样式-->
|
|
||||||
<i class="el-icon-arrow-left" v-if="sideClose === false"></i>
|
|
||||||
<i class="el-icon-arrow-right" v-if="sideClose === true"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="tree-right">
|
|
||||||
<div class="content">
|
|
||||||
<!--搜索区域-->
|
|
||||||
<div class="search-area">
|
|
||||||
<el-form inline class="label-input-form" v-model="searchForm">
|
|
||||||
<el-form-item label="姓名" class="search-item">
|
|
||||||
<el-input placeholder="根据姓名查询" clearable v-model="searchForm.uname">
|
|
||||||
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="邮箱" class="search-item">
|
|
||||||
<el-input placeholder="根据邮箱查询" clearable v-model="searchForm.email">
|
|
||||||
|
|
||||||
</el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button type="primary" size="mini"
|
|
||||||
class="common-button-primary" @click="getDatas('1')">
|
|
||||||
查询
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-button size="mini" class="common-button-default" @click="clearAllSearch">
|
|
||||||
清空
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
|
|
||||||
<el-form-item>
|
|
||||||
<el-button size="mini" type="primary" @click="selectEdit">
|
|
||||||
批量配置岗位
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
</div>
|
|
||||||
<el-table
|
|
||||||
ref="multipleTable"
|
|
||||||
:data="data"
|
|
||||||
tooltip-effect="dark"
|
|
||||||
border
|
|
||||||
style="width: 100%; flex: auto;"
|
|
||||||
class="drag-table"
|
|
||||||
height="100%"
|
|
||||||
@selection-change="selectedData"
|
|
||||||
:header-cell-style="{background: '#E8E8E8', color: '#333333', fontSize: '16px',
|
|
||||||
fontWeight: 'bold', height: '48px'}">
|
|
||||||
<el-table-column
|
|
||||||
type="selection"
|
|
||||||
width="55"
|
|
||||||
align="center"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
|
||||||
prop="account"
|
|
||||||
label="账号"
|
|
||||||
width="100px">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
prop="uname"
|
|
||||||
label="姓名"
|
|
||||||
width="100px">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
prop="sex"
|
|
||||||
label="性别"
|
|
||||||
width="50px">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<div v-if="scope.row.sex === '1'">男</div>
|
|
||||||
<div v-if="scope.row.sex === '2'">女</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
prop="phone"
|
|
||||||
label="电话"
|
|
||||||
width="170px">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
prop="email"
|
|
||||||
label="邮箱"
|
|
||||||
width="170px">
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
prop="institutionName"
|
|
||||||
label="所属部门">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-popover trigger="hover" placement="top">
|
|
||||||
{{ scope.row.institutionName }}
|
|
||||||
<div slot="reference" class="name-wrapper">
|
|
||||||
<p v-if="!scope.row.institutionName || scope.row.institutionName.length<15">
|
|
||||||
{{ scope.row.institutionName }}
|
|
||||||
</p>
|
|
||||||
<p v-else> {{ scope.row.institutionName.substring(0, 15) }}...</p>
|
|
||||||
</div>
|
|
||||||
</el-popover>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
prop="NameList"
|
|
||||||
label="所属岗位">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<el-popover trigger="hover" placement="top">
|
|
||||||
{{ scope.row.NameList }}
|
|
||||||
<div slot="reference" class="name-wrapper">
|
|
||||||
<p v-if="!scope.row.institutionName ||scope.row.NameList.length<15">
|
|
||||||
{{ scope.row.NameList }}
|
|
||||||
</p>
|
|
||||||
<p v-else> {{ scope.row.NameList.substring(0, 15) }}...</p>
|
|
||||||
</div>
|
|
||||||
</el-popover>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="状态"
|
|
||||||
width="100px">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<div v-if="scope.row.disableFlag === '1'">已禁用</div>
|
|
||||||
<div v-else>已启用</div>
|
|
||||||
</template>
|
|
||||||
</el-table-column>
|
|
||||||
<el-table-column
|
|
||||||
label="操作"
|
|
||||||
width="50px">
|
|
||||||
<template slot-scope="scope">
|
|
||||||
<div @click.stop style="display: inline-block">
|
|
||||||
<el-dropdown trigger="click" @command="handleCommand">
|
|
||||||
<i class="iconfont"></i>
|
|
||||||
<el-dropdown-menu slot="dropdown">
|
|
||||||
<el-dropdown-item v-btn-permission="'30db3b395deb5004266cd65d302c2776'" v-if="scope.row.disableFlag === '1'" :command="[scope.row, '启用']">
|
|
||||||
启用
|
|
||||||
</el-dropdown-item>
|
|
||||||
<el-dropdown-item v-btn-permission="'30db3b395deb5004266cd65d302c2776'" v-if="scope.row.disableFlag === '0'" :command="[scope.row, '禁用']">
|
|
||||||
禁用
|
|
||||||
</el-dropdown-item>
|
|
||||||
<el-dropdown-item v-btn-permission="'ce2d2b9bb8004e0d9efcabc42a9f354d'" :command="[scope.row, '配置岗位']">
|
|
||||||
配置岗位
|
|
||||||
</el-dropdown-item>
|
|
||||||
</el-dropdown-menu>
|
|
||||||
</el-dropdown>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
|
||||||
</el-table>
|
|
||||||
</div>
|
|
||||||
<loading :loading="Loading">加载中...</loading>
|
|
||||||
<pagination :page="page" :total="total" :pageSize="pageSize" @pageChange="pageChange" @pageSizeChange="pageSizeChange"></pagination>
|
|
||||||
</div>
|
|
||||||
<loading style="z-index: 2099;" :loading="treeLoading">导入中...</loading>
|
|
||||||
<el-drawer
|
|
||||||
class="postPage"
|
|
||||||
:title="drawerTitle"
|
|
||||||
:visible.sync="modalPost"
|
|
||||||
:wrapperClosable="false"
|
|
||||||
size="800px"
|
|
||||||
@close="resetFormPost"
|
|
||||||
>
|
|
||||||
<el-form ref="" :model="sarPost" inline>
|
|
||||||
<el-form-item class="search-item" style="padding-left: 25px">
|
|
||||||
<el-input v-model="sarPost.name"
|
|
||||||
size="small"
|
|
||||||
placeholder="岗位名称查找"
|
|
||||||
clearable></el-input>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="" class="search-item btn-box">
|
|
||||||
<el-button class="common-button-primary" type="primary" size="mini" @click="searchPostName"
|
|
||||||
v-btn-permission="">查询
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="" class="search-item btn-box">
|
|
||||||
<el-button class="common-button-default" @click="resetSelect" size="mini"
|
|
||||||
v-btn-permission="">清空
|
|
||||||
</el-button>
|
|
||||||
</el-form-item>
|
|
||||||
</el-form>
|
|
||||||
<el-tree
|
|
||||||
ref="tree2"
|
|
||||||
node-key="id"
|
|
||||||
class="filter-tree"
|
|
||||||
style="height: 100%; overflow: auto;"
|
|
||||||
v-if="modalPost"
|
|
||||||
:props="props"
|
|
||||||
:data="postList"
|
|
||||||
:filter-node-method="filterNode"
|
|
||||||
:default-checked-keys="nodeList"
|
|
||||||
highlight-current
|
|
||||||
check-strictly
|
|
||||||
default-expand-all
|
|
||||||
:expand-on-click-node="false"
|
|
||||||
show-checkbox>
|
|
||||||
</el-tree>
|
|
||||||
<pagination :page="page" :pageSize="pageSize" :total="total2" @pageChange="pageChange2" @pageSizeChange="pageSizeChange2"></pagination>
|
|
||||||
<div id="roleFormButton" class="demo-drawer-footer">
|
|
||||||
<el-button
|
|
||||||
size="mini"
|
|
||||||
class="common-button-primary"
|
|
||||||
icon="el-icon-check"
|
|
||||||
type="primary"
|
|
||||||
@click="PostSubmit"
|
|
||||||
>确定
|
|
||||||
</el-button>
|
|
||||||
<el-button size="mini" class="common-button-default" icon="el-icon-close" @click="resetFormPost">取消</el-button>
|
|
||||||
</div>
|
|
||||||
</el-drawer>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import workgroup from "@/pages/config/pages/mechanismManage/pages/workgroup";
|
||||||
|
import mechanism from "@/pages/config/pages/mechanismManage/pages/mechanism";
|
||||||
export default {
|
export default {
|
||||||
name: 'MechanismManage',
|
name: 'MechanismManage',
|
||||||
|
components: {
|
||||||
|
workgroup,
|
||||||
|
mechanism,
|
||||||
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
peopleType: '', //1为树结构 2 为全机构
|
activeName: 'mechanism',
|
||||||
nodeKeyId: '',
|
|
||||||
searchForm: {
|
|
||||||
uname: "",
|
|
||||||
email: ""
|
|
||||||
},
|
|
||||||
userId: '',
|
|
||||||
postList: [],
|
|
||||||
props: {
|
|
||||||
children: 'children',
|
|
||||||
label: 'name'
|
|
||||||
},
|
|
||||||
nodeList: [],
|
|
||||||
modalPost: false,
|
|
||||||
sarPost: {
|
|
||||||
name: "", // 岗位名称
|
|
||||||
},
|
|
||||||
filterText: '', // 树结构检索条件
|
|
||||||
defaultProps: {
|
|
||||||
children: 'children',
|
|
||||||
label: 'name'
|
|
||||||
},
|
|
||||||
treeData: [], // 树结构数据
|
|
||||||
page: 1,
|
|
||||||
total: 0,
|
|
||||||
total2: 0,
|
|
||||||
pageSize: this.$store.getters.userInfo.configContent,
|
|
||||||
sideClose: false,
|
|
||||||
data: [], // table数据
|
|
||||||
treeLoading: false,
|
|
||||||
Loading: false,
|
|
||||||
id: '',
|
|
||||||
// 批量配置岗位勾选暂存
|
|
||||||
manageData: [],
|
|
||||||
drawerTitle: '配置岗位'
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
clearAllSearch() {
|
handleClick(tab, event) {
|
||||||
this.searchForm = {
|
|
||||||
uname: "",
|
|
||||||
email: ""
|
|
||||||
}
|
|
||||||
this.page = 1
|
|
||||||
this.getData()
|
|
||||||
},
|
},
|
||||||
resetFormPost() {
|
getActiveName(){
|
||||||
this.modalPost = false
|
if (this.$route.query.activeName){
|
||||||
},
|
this.activeName = this.$route.query.activeName
|
||||||
PostSubmit() {
|
|
||||||
if (this.drawerTitle === '配置岗位') {
|
|
||||||
this.$http.postData('sarUser/user/position', {
|
|
||||||
positionIds: this.$refs.tree2.getCheckedKeys(),
|
|
||||||
userId: this.userId
|
|
||||||
}, {}, res => {
|
|
||||||
if (res.ok) {
|
|
||||||
this.$message.success('配置岗位成功')
|
|
||||||
this.modalPost = false
|
|
||||||
this.getData()
|
|
||||||
}
|
}
|
||||||
})
|
if (this.$route.query.keynoteActiveName){
|
||||||
} else {
|
this.keynoteActiveName = this.$route.query.keynoteActiveName
|
||||||
this.$http.postData('sarUser/user/positionBatch', {
|
|
||||||
positionIds: this.$refs.tree2.getCheckedKeys(),
|
|
||||||
userId: this.userId
|
|
||||||
}, {}, res => {
|
|
||||||
if (res.ok) {
|
|
||||||
this.$message.success('配置岗位成功')
|
|
||||||
this.modalPost = false
|
|
||||||
this.getData()
|
|
||||||
}
|
}
|
||||||
})
|
console.log('35',this.keynoteActiveName)
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
searchPostName() {
|
|
||||||
this.page = 1;
|
|
||||||
this.getTree2();
|
|
||||||
}, // 查询
|
|
||||||
resetSelect() {
|
|
||||||
this.sarPost.name = "";
|
|
||||||
this.getTree2();
|
|
||||||
}, // 外层清空条件查询
|
|
||||||
handleCommand(command) {
|
|
||||||
switch (command[1]) {
|
|
||||||
case '启用':
|
|
||||||
this.disableFlagEdit(command[0], 0)
|
|
||||||
break
|
|
||||||
case '禁用':
|
|
||||||
this.disableFlagEdit(command[0], 1)
|
|
||||||
break
|
|
||||||
case '配置岗位':
|
|
||||||
this.postsConfigure(command[0])
|
|
||||||
break
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
created() {
|
||||||
getTree2() {
|
this.getActiveName()
|
||||||
this.$http.get('sarPosition/position', {
|
|
||||||
current: this.page,
|
|
||||||
pageSize: this.pageSize,
|
|
||||||
...this.sarPost,
|
|
||||||
}, {
|
|
||||||
_this: this,
|
|
||||||
}, res => {
|
|
||||||
this.postList = res.data.records
|
|
||||||
this.total2 = res.data.total
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
postsConfigure(row) {
|
watch: {},
|
||||||
var arr = []
|
mounted () {}
|
||||||
this.userId = row.userId
|
|
||||||
row.positions.forEach((item) => {
|
|
||||||
arr.push(item.id)
|
|
||||||
})
|
|
||||||
this.nodeList = arr
|
|
||||||
this.modalPost = true
|
|
||||||
},
|
|
||||||
disableFlagEdit(row, type) {
|
|
||||||
let json = {}
|
|
||||||
json.userId = row.userId
|
|
||||||
json.disableFlag = type
|
|
||||||
this.$http.postData('sarUser/user/disable', json, {},
|
|
||||||
res => {
|
|
||||||
if (res.ok) {
|
|
||||||
if (type === 0) {
|
|
||||||
this.$message.success('已启用')
|
|
||||||
} else {
|
|
||||||
this.$message.success('已禁用')
|
|
||||||
}
|
|
||||||
this.getData()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
treeCollapse() {
|
|
||||||
this.sideClose = !this.sideClose
|
|
||||||
},
|
|
||||||
filterNode(value, data) {
|
|
||||||
if (!value) return true;
|
|
||||||
return data.name.indexOf(value) !== -1;
|
|
||||||
},
|
|
||||||
handleNodeClick(data) {
|
|
||||||
this.id = data.id
|
|
||||||
this.getData()
|
|
||||||
},
|
|
||||||
// searchPeople(){
|
|
||||||
// console.log(this.filterText);
|
|
||||||
// },
|
|
||||||
// loadNode(node, resolve) {
|
|
||||||
// if (node.level === 0) {
|
|
||||||
// return resolve(this.treeData);
|
|
||||||
// }
|
|
||||||
// this.getChildren(node, resolve)
|
|
||||||
// },
|
|
||||||
// getChildren (node, resolve) {
|
|
||||||
// this.id = node.key
|
|
||||||
// this.getData()
|
|
||||||
// this.$http.get('SarInstitution/institution/getNext', {
|
|
||||||
// institutionId: node.key
|
|
||||||
// }, {}, res => {
|
|
||||||
// let people = [];
|
|
||||||
// res.forEach(item => {
|
|
||||||
// if(item.disabled === true){
|
|
||||||
// people.push(item)
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
// resolve(people)
|
|
||||||
// })
|
|
||||||
// },
|
|
||||||
// getTree() {
|
|
||||||
// this.$http.get('SarInstitution/institution/getFirstInstitution', {}, {
|
|
||||||
// _this: this,
|
|
||||||
// loading: 'treeLoading'
|
|
||||||
// }, res => {
|
|
||||||
// this.treeData = res
|
|
||||||
// this.nodeKeyId = this.treeData[0].id
|
|
||||||
// this.treeLoading = false
|
|
||||||
// }, e => {
|
|
||||||
// })
|
|
||||||
// },
|
|
||||||
getTree() {
|
|
||||||
this.$http.get('SarInstitution/institution', {}, {
|
|
||||||
_this: this,
|
|
||||||
loading: 'treeLoading'
|
|
||||||
}, res => {
|
|
||||||
this.treeData = res.data
|
|
||||||
this.nodeKeyId = this.treeData[0].id
|
|
||||||
this.$nextTick(function () {
|
|
||||||
this.$refs.tree.setCurrentKey(this.nodeKeyId)
|
|
||||||
})
|
|
||||||
this.id = res.data[0].id
|
|
||||||
this.getData()
|
|
||||||
}, e => {
|
|
||||||
console.log(e);
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getDatas(type) {
|
|
||||||
if (type === '1') {
|
|
||||||
this.page = 1
|
|
||||||
}
|
|
||||||
this.peopleType = 2;
|
|
||||||
this.$http.post('SarInstitution/institution/user', {
|
|
||||||
current: this.page,
|
|
||||||
size: this.pageSize,
|
|
||||||
uname: this.searchForm.uname,
|
|
||||||
email: this.searchForm.email
|
|
||||||
}, {
|
|
||||||
_this: this,
|
|
||||||
loading: 'Loading'
|
|
||||||
}, res => {
|
|
||||||
res.data.records.forEach((item) => {
|
|
||||||
let NameList = ''
|
|
||||||
item.positions.forEach((items) => {
|
|
||||||
if (NameList.length > 0) {
|
|
||||||
NameList += ','
|
|
||||||
}
|
|
||||||
NameList += items.name
|
|
||||||
})
|
|
||||||
item.NameList = NameList
|
|
||||||
})
|
|
||||||
this.data = res.data.records
|
|
||||||
this.total = res.data.total
|
|
||||||
})
|
|
||||||
},
|
|
||||||
getData() {
|
|
||||||
this.peopleType = 1;
|
|
||||||
this.$http.post('SarInstitution/institution/user', {
|
|
||||||
current: this.page,
|
|
||||||
size: this.pageSize,
|
|
||||||
institutionId: this.id,
|
|
||||||
uname: this.searchForm.uname,
|
|
||||||
email: this.searchForm.email
|
|
||||||
}, {
|
|
||||||
_this: this,
|
|
||||||
loading: 'Loading'
|
|
||||||
}, res => {
|
|
||||||
res.data.records.forEach((item) => {
|
|
||||||
let NameList = ''
|
|
||||||
item.positions.forEach((items) => {
|
|
||||||
if (NameList.length > 0) {
|
|
||||||
NameList += ','
|
|
||||||
}
|
|
||||||
NameList += items.name
|
|
||||||
})
|
|
||||||
item.NameList = NameList
|
|
||||||
})
|
|
||||||
this.data = res.data.records
|
|
||||||
this.total = res.data.total
|
|
||||||
})
|
|
||||||
},
|
|
||||||
pageChange(page) {
|
|
||||||
this.page = page
|
|
||||||
if(this.peopleType === 1){
|
|
||||||
this.getData()
|
|
||||||
}else{
|
|
||||||
this.getDatas()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
pageSizeChange(pageSize) {
|
|
||||||
this.pageSize = pageSize
|
|
||||||
if(this.peopleType === 1){
|
|
||||||
this.getData()
|
|
||||||
}else{
|
|
||||||
this.getDatas()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
pageChange2(page) {
|
|
||||||
this.page = page
|
|
||||||
this.getTree2()
|
|
||||||
},
|
|
||||||
pageSizeChange2(pageSize) {
|
|
||||||
this.pageSize = pageSize
|
|
||||||
this.getTree2()
|
|
||||||
},
|
|
||||||
|
|
||||||
/** 批量编辑岗位的勾选数据 */
|
|
||||||
selectedData(val) {
|
|
||||||
this.manageData = val
|
|
||||||
},
|
|
||||||
|
|
||||||
selectEdit() {
|
|
||||||
this.userId = []
|
|
||||||
this.manageData.forEach(item=>{
|
|
||||||
this.userId.push(item.userId)
|
|
||||||
})
|
|
||||||
this.drawerTitle = '批量配置岗位'
|
|
||||||
this.modalPost = true
|
|
||||||
},
|
|
||||||
},
|
|
||||||
computed: {},
|
|
||||||
watch: {
|
|
||||||
filterText(val) {
|
|
||||||
this.$refs.tree.filter(val);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
// 获取组织结构树
|
|
||||||
this.getTree()
|
|
||||||
this.getTree2()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
@import '~@/assets/styles/mixins';
|
|
||||||
|
|
||||||
#mechanism-manage {
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.tree-close {
|
|
||||||
.tree {
|
|
||||||
left: -200px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-right {
|
|
||||||
width: calc(~'100% - 15px') !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.side-bar-collapse {
|
|
||||||
background: #5596CC !important;
|
|
||||||
color: #FFF;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-closed {
|
|
||||||
width: 15px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.postPage {
|
|
||||||
.pagination {
|
|
||||||
position: initial;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-content {
|
|
||||||
background: #fff;
|
|
||||||
width: 300px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.tree {
|
|
||||||
width: 95%;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-collapse {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tree-right {
|
|
||||||
overflow-y: hidden;
|
|
||||||
padding: 0;
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.content {
|
|
||||||
padding: 0px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
position: relative;
|
|
||||||
flex: auto;
|
|
||||||
//height: calc(~'100% - 105px - 56px');
|
|
||||||
}
|
|
||||||
|
|
||||||
.pagination {
|
|
||||||
position: static;
|
|
||||||
width: 100% !important;
|
|
||||||
left: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
#mechanism-manage {
|
#mechanism {
|
||||||
height: 100%;
|
height: inherit;
|
||||||
|
|
||||||
.content {
|
|
||||||
height: calc(~'100% - 105px - 56px')
|
|
||||||
}
|
|
||||||
|
|
||||||
/deep/ .el-select__tags {
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/deep/ .width-all {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-tree {
|
|
||||||
height: calc(~'100% - 50px')
|
|
||||||
}
|
|
||||||
|
|
||||||
.laws-tree {
|
|
||||||
/deep/ .clearable {
|
|
||||||
top: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.add-form-item {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
.mechanism-content {
|
||||||
|
padding: 0 10px;
|
||||||
|
height: 100%;
|
||||||
|
/deep/ .el-tabs {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
.el-tabs__content {
|
||||||
|
flex: 1;
|
||||||
|
overflow: hidden;
|
||||||
|
.el-tab-pane {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-tabs__nav {
|
||||||
|
margin-left:20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -0,0 +1,662 @@
|
|||||||
|
<!-- 配置管理 - 机构管理 -->
|
||||||
|
<template>
|
||||||
|
<div id="mechanism-manage" :class="{ 'tree-close': sideClose }" class="v-class">
|
||||||
|
<div class="tree-content" :class="{ 'tree-closed': sideClose }">
|
||||||
|
<div class="tree">
|
||||||
|
<!-- @keyup.enter.native="searchPeople"-->
|
||||||
|
<el-input
|
||||||
|
class="filter-tree-input"
|
||||||
|
placeholder="输入关键字进行过滤"
|
||||||
|
v-model="filterText">
|
||||||
|
</el-input>
|
||||||
|
<!-- <el-tree-->
|
||||||
|
<!-- node-key="id"-->
|
||||||
|
<!-- :data="treeData"-->
|
||||||
|
<!-- :props="defaultProps"-->
|
||||||
|
<!-- :default-checked-keys="nodeList"-->
|
||||||
|
<!-- :current-node-key="nodeKeyId"-->
|
||||||
|
<!-- highlight-current-->
|
||||||
|
<!-- check-strictly-->
|
||||||
|
<!-- :expand-on-click-node="false"-->
|
||||||
|
<!-- ref="tree"-->
|
||||||
|
<!-- :load="loadNode"-->
|
||||||
|
<!-- @node-click="handleNodeClick"-->
|
||||||
|
<!-- lazy>-->
|
||||||
|
<!-- </el-tree>-->
|
||||||
|
<el-tree
|
||||||
|
:data="treeData"
|
||||||
|
:props="defaultProps"
|
||||||
|
:current-node-key="nodeKeyId"
|
||||||
|
node-key="id"
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
highlight-current
|
||||||
|
ref="tree"
|
||||||
|
:expand-on-click-node="false"
|
||||||
|
@node-click="handleNodeClick">
|
||||||
|
</el-tree>
|
||||||
|
</div>
|
||||||
|
<div class="tree-collapse" @click="treeCollapse" :class="{ 'tree-close': sideClose }">
|
||||||
|
<!--切换折叠样式-->
|
||||||
|
<i class="el-icon-arrow-left" v-if="sideClose === false"></i>
|
||||||
|
<i class="el-icon-arrow-right" v-if="sideClose === true"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="tree-right">
|
||||||
|
<div class="content">
|
||||||
|
<!--搜索区域-->
|
||||||
|
<div class="search-area">
|
||||||
|
<el-form inline class="label-input-form" v-model="searchForm">
|
||||||
|
<el-form-item label="姓名" class="search-item">
|
||||||
|
<el-input placeholder="根据姓名查询" clearable v-model="searchForm.uname">
|
||||||
|
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="邮箱" class="search-item">
|
||||||
|
<el-input placeholder="根据邮箱查询" clearable v-model="searchForm.email">
|
||||||
|
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" size="mini"
|
||||||
|
class="common-button-primary" @click="getDatas('1')">
|
||||||
|
查询
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button size="mini" class="common-button-default" @click="clearAllSearch">
|
||||||
|
清空
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item>
|
||||||
|
<el-button size="mini" type="primary" @click="selectEdit">
|
||||||
|
批量配置岗位
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<el-table
|
||||||
|
ref="multipleTable"
|
||||||
|
:data="data"
|
||||||
|
tooltip-effect="dark"
|
||||||
|
border
|
||||||
|
style="width: 100%; flex: auto;"
|
||||||
|
class="drag-table"
|
||||||
|
height="100%"
|
||||||
|
@selection-change="selectedData"
|
||||||
|
:header-cell-style="{background: '#E8E8E8', color: '#333333', fontSize: '16px',
|
||||||
|
fontWeight: 'bold', height: '48px'}">
|
||||||
|
<el-table-column
|
||||||
|
type="selection"
|
||||||
|
width="55"
|
||||||
|
align="center"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
prop="account"
|
||||||
|
label="账号"
|
||||||
|
width="100px">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="uname"
|
||||||
|
label="姓名"
|
||||||
|
width="100px">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="sex"
|
||||||
|
label="性别"
|
||||||
|
width="50px">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<div v-if="scope.row.sex === '1'">男</div>
|
||||||
|
<div v-if="scope.row.sex === '2'">女</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="phone"
|
||||||
|
label="电话"
|
||||||
|
width="170px">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="email"
|
||||||
|
label="邮箱"
|
||||||
|
width="170px">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="institutionName"
|
||||||
|
label="所属部门">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-popover trigger="hover" placement="top">
|
||||||
|
{{ scope.row.institutionName }}
|
||||||
|
<div slot="reference" class="name-wrapper">
|
||||||
|
<p v-if="!scope.row.institutionName || scope.row.institutionName.length<15">
|
||||||
|
{{ scope.row.institutionName }}
|
||||||
|
</p>
|
||||||
|
<p v-else> {{ scope.row.institutionName.substring(0, 15) }}...</p>
|
||||||
|
</div>
|
||||||
|
</el-popover>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="NameList"
|
||||||
|
label="所属岗位">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-popover trigger="hover" placement="top">
|
||||||
|
{{ scope.row.NameList }}
|
||||||
|
<div slot="reference" class="name-wrapper">
|
||||||
|
<p v-if="!scope.row.institutionName ||scope.row.NameList.length<15">
|
||||||
|
{{ scope.row.NameList }}
|
||||||
|
</p>
|
||||||
|
<p v-else> {{ scope.row.NameList.substring(0, 15) }}...</p>
|
||||||
|
</div>
|
||||||
|
</el-popover>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="状态"
|
||||||
|
width="100px">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<div v-if="scope.row.disableFlag === '1'">已禁用</div>
|
||||||
|
<div v-else>已启用</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
label="操作"
|
||||||
|
width="50px">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<div @click.stop style="display: inline-block">
|
||||||
|
<el-dropdown trigger="click" @command="handleCommand">
|
||||||
|
<i class="iconfont"></i>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item v-btn-permission="'30db3b395deb5004266cd65d302c2776'" v-if="scope.row.disableFlag === '1'" :command="[scope.row, '启用']">
|
||||||
|
启用
|
||||||
|
</el-dropdown-item>
|
||||||
|
<el-dropdown-item v-btn-permission="'30db3b395deb5004266cd65d302c2776'" v-if="scope.row.disableFlag === '0'" :command="[scope.row, '禁用']">
|
||||||
|
禁用
|
||||||
|
</el-dropdown-item>
|
||||||
|
<el-dropdown-item v-btn-permission="'ce2d2b9bb8004e0d9efcabc42a9f354d'" :command="[scope.row, '配置岗位']">
|
||||||
|
配置岗位
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
<loading :loading="Loading">加载中...</loading>
|
||||||
|
<pagination :page="page" :total="total" :pageSize="pageSize" @pageChange="pageChange" @pageSizeChange="pageSizeChange"></pagination>
|
||||||
|
</div>
|
||||||
|
<loading style="z-index: 2099;" :loading="treeLoading">导入中...</loading>
|
||||||
|
<el-drawer
|
||||||
|
class="postPage"
|
||||||
|
:title="drawerTitle"
|
||||||
|
:visible.sync="modalPost"
|
||||||
|
:wrapperClosable="false"
|
||||||
|
size="800px"
|
||||||
|
@close="resetFormPost"
|
||||||
|
>
|
||||||
|
<el-form ref="" :model="sarPost" inline>
|
||||||
|
<el-form-item class="search-item" style="padding-left: 25px">
|
||||||
|
<el-input v-model="sarPost.name"
|
||||||
|
size="small"
|
||||||
|
placeholder="岗位名称查找"
|
||||||
|
clearable></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="" class="search-item btn-box">
|
||||||
|
<el-button class="common-button-primary" type="primary" size="mini" @click="searchPostName"
|
||||||
|
v-btn-permission="">查询
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="" class="search-item btn-box">
|
||||||
|
<el-button class="common-button-default" @click="resetSelect" size="mini"
|
||||||
|
v-btn-permission="">清空
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-tree
|
||||||
|
ref="tree2"
|
||||||
|
node-key="id"
|
||||||
|
class="filter-tree"
|
||||||
|
style="height: 100%; overflow: auto;"
|
||||||
|
v-if="modalPost"
|
||||||
|
:props="props"
|
||||||
|
:data="postList"
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
:default-checked-keys="nodeList"
|
||||||
|
highlight-current
|
||||||
|
check-strictly
|
||||||
|
default-expand-all
|
||||||
|
:expand-on-click-node="false"
|
||||||
|
show-checkbox>
|
||||||
|
</el-tree>
|
||||||
|
<pagination :page="page" :pageSize="pageSize" :total="total2" @pageChange="pageChange2" @pageSizeChange="pageSizeChange2"></pagination>
|
||||||
|
<div id="roleFormButton" class="demo-drawer-footer">
|
||||||
|
<el-button
|
||||||
|
size="mini"
|
||||||
|
class="common-button-primary"
|
||||||
|
icon="el-icon-check"
|
||||||
|
type="primary"
|
||||||
|
@click="PostSubmit"
|
||||||
|
>确定
|
||||||
|
</el-button>
|
||||||
|
<el-button size="mini" class="common-button-default" icon="el-icon-close" @click="resetFormPost">取消</el-button>
|
||||||
|
</div>
|
||||||
|
</el-drawer>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'mechanism',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
peopleType: '', //1为树结构 2 为全机构
|
||||||
|
nodeKeyId: '',
|
||||||
|
searchForm: {
|
||||||
|
uname: "",
|
||||||
|
email: ""
|
||||||
|
},
|
||||||
|
userId: '',
|
||||||
|
postList: [],
|
||||||
|
props: {
|
||||||
|
children: 'children',
|
||||||
|
label: 'name'
|
||||||
|
},
|
||||||
|
nodeList: [],
|
||||||
|
modalPost: false,
|
||||||
|
sarPost: {
|
||||||
|
name: "", // 岗位名称
|
||||||
|
},
|
||||||
|
filterText: '', // 树结构检索条件
|
||||||
|
defaultProps: {
|
||||||
|
children: 'children',
|
||||||
|
label: 'name'
|
||||||
|
},
|
||||||
|
treeData: [], // 树结构数据
|
||||||
|
page: 1,
|
||||||
|
total: 0,
|
||||||
|
total2: 0,
|
||||||
|
pageSize: this.$store.getters.userInfo.configContent,
|
||||||
|
sideClose: false,
|
||||||
|
data: [], // table数据
|
||||||
|
treeLoading: false,
|
||||||
|
Loading: false,
|
||||||
|
id: '',
|
||||||
|
// 批量配置岗位勾选暂存
|
||||||
|
manageData: [],
|
||||||
|
drawerTitle: '配置岗位'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
clearAllSearch() {
|
||||||
|
this.searchForm = {
|
||||||
|
uname: "",
|
||||||
|
email: ""
|
||||||
|
}
|
||||||
|
this.page = 1
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
resetFormPost() {
|
||||||
|
this.modalPost = false
|
||||||
|
},
|
||||||
|
PostSubmit() {
|
||||||
|
if (this.drawerTitle === '配置岗位') {
|
||||||
|
this.$http.postData('sarUser/user/position', {
|
||||||
|
positionIds: this.$refs.tree2.getCheckedKeys(),
|
||||||
|
userId: this.userId
|
||||||
|
}, {}, res => {
|
||||||
|
if (res.ok) {
|
||||||
|
this.$message.success('配置岗位成功')
|
||||||
|
this.modalPost = false
|
||||||
|
this.getData()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.$http.postData('sarUser/user/positionBatch', {
|
||||||
|
positionIds: this.$refs.tree2.getCheckedKeys(),
|
||||||
|
userId: this.userId
|
||||||
|
}, {}, res => {
|
||||||
|
if (res.ok) {
|
||||||
|
this.$message.success('配置岗位成功')
|
||||||
|
this.modalPost = false
|
||||||
|
this.getData()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
searchPostName() {
|
||||||
|
this.page = 1;
|
||||||
|
this.getTree2();
|
||||||
|
}, // 查询
|
||||||
|
resetSelect() {
|
||||||
|
this.sarPost.name = "";
|
||||||
|
this.getTree2();
|
||||||
|
}, // 外层清空条件查询
|
||||||
|
handleCommand(command) {
|
||||||
|
switch (command[1]) {
|
||||||
|
case '启用':
|
||||||
|
this.disableFlagEdit(command[0], 0)
|
||||||
|
break
|
||||||
|
case '禁用':
|
||||||
|
this.disableFlagEdit(command[0], 1)
|
||||||
|
break
|
||||||
|
case '配置岗位':
|
||||||
|
this.postsConfigure(command[0])
|
||||||
|
break
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getTree2() {
|
||||||
|
this.$http.get('sarPosition/position', {
|
||||||
|
current: this.page,
|
||||||
|
pageSize: this.pageSize,
|
||||||
|
...this.sarPost,
|
||||||
|
}, {
|
||||||
|
_this: this,
|
||||||
|
}, res => {
|
||||||
|
this.postList = res.data.records
|
||||||
|
this.total2 = res.data.total
|
||||||
|
})
|
||||||
|
},
|
||||||
|
postsConfigure(row) {
|
||||||
|
var arr = []
|
||||||
|
this.userId = row.userId
|
||||||
|
row.positions.forEach((item) => {
|
||||||
|
arr.push(item.id)
|
||||||
|
})
|
||||||
|
this.nodeList = arr
|
||||||
|
this.modalPost = true
|
||||||
|
},
|
||||||
|
disableFlagEdit(row, type) {
|
||||||
|
let json = {}
|
||||||
|
json.userId = row.userId
|
||||||
|
json.disableFlag = type
|
||||||
|
this.$http.postData('sarUser/user/disable', json, {},
|
||||||
|
res => {
|
||||||
|
if (res.ok) {
|
||||||
|
if (type === 0) {
|
||||||
|
this.$message.success('已启用')
|
||||||
|
} else {
|
||||||
|
this.$message.success('已禁用')
|
||||||
|
}
|
||||||
|
this.getData()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
treeCollapse() {
|
||||||
|
this.sideClose = !this.sideClose
|
||||||
|
},
|
||||||
|
filterNode(value, data) {
|
||||||
|
if (!value) return true;
|
||||||
|
return data.name.indexOf(value) !== -1;
|
||||||
|
},
|
||||||
|
handleNodeClick(data) {
|
||||||
|
this.id = data.id
|
||||||
|
this.getData()
|
||||||
|
},
|
||||||
|
// searchPeople(){
|
||||||
|
// console.log(this.filterText);
|
||||||
|
// },
|
||||||
|
// loadNode(node, resolve) {
|
||||||
|
// if (node.level === 0) {
|
||||||
|
// return resolve(this.treeData);
|
||||||
|
// }
|
||||||
|
// this.getChildren(node, resolve)
|
||||||
|
// },
|
||||||
|
// getChildren (node, resolve) {
|
||||||
|
// this.id = node.key
|
||||||
|
// this.getData()
|
||||||
|
// this.$http.get('SarInstitution/institution/getNext', {
|
||||||
|
// institutionId: node.key
|
||||||
|
// }, {}, res => {
|
||||||
|
// let people = [];
|
||||||
|
// res.forEach(item => {
|
||||||
|
// if(item.disabled === true){
|
||||||
|
// people.push(item)
|
||||||
|
// }
|
||||||
|
// })
|
||||||
|
// resolve(people)
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
// getTree() {
|
||||||
|
// this.$http.get('SarInstitution/institution/getFirstInstitution', {}, {
|
||||||
|
// _this: this,
|
||||||
|
// loading: 'treeLoading'
|
||||||
|
// }, res => {
|
||||||
|
// this.treeData = res
|
||||||
|
// this.nodeKeyId = this.treeData[0].id
|
||||||
|
// this.treeLoading = false
|
||||||
|
// }, e => {
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
getTree() {
|
||||||
|
this.$http.get('SarInstitution/institution', {}, {
|
||||||
|
_this: this,
|
||||||
|
loading: 'treeLoading'
|
||||||
|
}, res => {
|
||||||
|
this.treeData = res.data
|
||||||
|
this.nodeKeyId = this.treeData[0].id
|
||||||
|
this.$nextTick(function () {
|
||||||
|
this.$refs.tree.setCurrentKey(this.nodeKeyId)
|
||||||
|
})
|
||||||
|
this.id = res.data[0].id
|
||||||
|
this.getData()
|
||||||
|
}, e => {
|
||||||
|
console.log(e);
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getDatas(type) {
|
||||||
|
if (type === '1') {
|
||||||
|
this.page = 1
|
||||||
|
}
|
||||||
|
this.peopleType = 2;
|
||||||
|
this.$http.post('SarInstitution/institution/user', {
|
||||||
|
current: this.page,
|
||||||
|
size: this.pageSize,
|
||||||
|
uname: this.searchForm.uname,
|
||||||
|
email: this.searchForm.email
|
||||||
|
}, {
|
||||||
|
_this: this,
|
||||||
|
loading: 'Loading'
|
||||||
|
}, res => {
|
||||||
|
res.data.records.forEach((item) => {
|
||||||
|
let NameList = ''
|
||||||
|
item.positions.forEach((items) => {
|
||||||
|
if (NameList.length > 0) {
|
||||||
|
NameList += ','
|
||||||
|
}
|
||||||
|
NameList += items.name
|
||||||
|
})
|
||||||
|
item.NameList = NameList
|
||||||
|
})
|
||||||
|
this.data = res.data.records
|
||||||
|
this.total = res.data.total
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getData() {
|
||||||
|
this.peopleType = 1;
|
||||||
|
this.$http.post('SarInstitution/institution/user', {
|
||||||
|
current: this.page,
|
||||||
|
size: this.pageSize,
|
||||||
|
institutionId: this.id,
|
||||||
|
uname: this.searchForm.uname,
|
||||||
|
email: this.searchForm.email
|
||||||
|
}, {
|
||||||
|
_this: this,
|
||||||
|
loading: 'Loading'
|
||||||
|
}, res => {
|
||||||
|
res.data.records.forEach((item) => {
|
||||||
|
let NameList = ''
|
||||||
|
item.positions.forEach((items) => {
|
||||||
|
if (NameList.length > 0) {
|
||||||
|
NameList += ','
|
||||||
|
}
|
||||||
|
NameList += items.name
|
||||||
|
})
|
||||||
|
item.NameList = NameList
|
||||||
|
})
|
||||||
|
this.data = res.data.records
|
||||||
|
this.total = res.data.total
|
||||||
|
})
|
||||||
|
},
|
||||||
|
pageChange(page) {
|
||||||
|
this.page = page
|
||||||
|
if(this.peopleType === 1){
|
||||||
|
this.getData()
|
||||||
|
}else{
|
||||||
|
this.getDatas()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pageSizeChange(pageSize) {
|
||||||
|
this.pageSize = pageSize
|
||||||
|
if(this.peopleType === 1){
|
||||||
|
this.getData()
|
||||||
|
}else{
|
||||||
|
this.getDatas()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pageChange2(page) {
|
||||||
|
this.page = page
|
||||||
|
this.getTree2()
|
||||||
|
},
|
||||||
|
pageSizeChange2(pageSize) {
|
||||||
|
this.pageSize = pageSize
|
||||||
|
this.getTree2()
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 批量编辑岗位的勾选数据 */
|
||||||
|
selectedData(val) {
|
||||||
|
this.manageData = val
|
||||||
|
},
|
||||||
|
|
||||||
|
selectEdit() {
|
||||||
|
this.userId = []
|
||||||
|
this.manageData.forEach(item=>{
|
||||||
|
this.userId.push(item.userId)
|
||||||
|
})
|
||||||
|
this.drawerTitle = '批量配置岗位'
|
||||||
|
this.modalPost = true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
watch: {
|
||||||
|
filterText(val) {
|
||||||
|
this.$refs.tree.filter(val);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// 获取组织结构树
|
||||||
|
this.getTree()
|
||||||
|
this.getTree2()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less">
|
||||||
|
@import '~@/assets/styles/mixins';
|
||||||
|
|
||||||
|
#mechanism-manage {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.tree-close {
|
||||||
|
.tree {
|
||||||
|
left: -200px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-right {
|
||||||
|
width: calc(~'100% - 15px') !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-bar-collapse {
|
||||||
|
background: #5596CC !important;
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-closed {
|
||||||
|
width: 15px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.postPage {
|
||||||
|
.pagination {
|
||||||
|
position: initial;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-content {
|
||||||
|
background: #fff;
|
||||||
|
width: 300px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.tree {
|
||||||
|
width: 95%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-collapse {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-right {
|
||||||
|
overflow-y: hidden;
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding: 0px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
flex: auto;
|
||||||
|
//height: calc(~'100% - 105px - 56px');
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
position: static;
|
||||||
|
width: 100% !important;
|
||||||
|
left: 0 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
#mechanism-manage {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.content {
|
||||||
|
height: calc(~'100% - 105px - 56px')
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .el-select__tags {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .width-all {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filter-tree {
|
||||||
|
height: calc(~'100% - 50px')
|
||||||
|
}
|
||||||
|
|
||||||
|
.laws-tree {
|
||||||
|
/deep/ .clearable {
|
||||||
|
top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-form-item {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,546 @@
|
|||||||
|
<template>
|
||||||
|
<div id="workgroup">
|
||||||
|
<div class="workgroup-content">
|
||||||
|
<div class="search-area">
|
||||||
|
<el-form :model="workSearch" inline class="label-input-form">
|
||||||
|
<el-form-item label="工作组" class="search-item">
|
||||||
|
<el-input
|
||||||
|
v-model="workSearch.workGroupName"
|
||||||
|
clearable
|
||||||
|
placeholder="根据工作组进行查找"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="工作组组长" class="search-item">
|
||||||
|
<el-input
|
||||||
|
v-model="workSearch.leaderName"
|
||||||
|
clearable
|
||||||
|
placeholder="根据工作组组长进行查找"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="" class="search-item btn-box">
|
||||||
|
<el-button class="common-button-primary" type="primary" size="mini" @click="searchPostName"
|
||||||
|
v-btn-permission="">查询
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="" class="search-item btn-box">
|
||||||
|
<el-button class="common-button-default" @click="resetSelect" size="mini"
|
||||||
|
v-btn-permission="">清空
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<div class="table-content">
|
||||||
|
<div class="table-button">
|
||||||
|
<el-button type="primary" size="mini"
|
||||||
|
class="common-button-primary" @click="add">
|
||||||
|
新增
|
||||||
|
</el-button>
|
||||||
|
<el-button type="primary" size="mini"
|
||||||
|
class="common-button-primary" @click="edit">
|
||||||
|
编辑
|
||||||
|
</el-button>
|
||||||
|
<el-button type="primary" size="mini"
|
||||||
|
class="common-button-primary" @click="workDel">
|
||||||
|
批量删除
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
<el-table
|
||||||
|
ref="workGroup"
|
||||||
|
:data="workData"
|
||||||
|
tooltip-effect="dark"
|
||||||
|
border
|
||||||
|
style="width: 100%; flex: auto;"
|
||||||
|
class="drag-table"
|
||||||
|
height="100%"
|
||||||
|
@selection-change="workChange"
|
||||||
|
:header-cell-style="{background: '#E8E8E8', color: '#333333', fontSize: '16px',
|
||||||
|
fontWeight: 'bold', height: '48px'}">
|
||||||
|
<el-table-column
|
||||||
|
type="selection"
|
||||||
|
width="55"
|
||||||
|
align="center"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
prop="workGroup"
|
||||||
|
min-width="300"
|
||||||
|
label="工作组">
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
label="工作组组长"
|
||||||
|
min-width="400px">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.workLeaderGroup.length > 1" v-for="item in scope.row.workLeaderGroup"
|
||||||
|
:key="item.id">{{ item.name + "," }}</span>
|
||||||
|
<span v-else v-for="item in scope.row.workLeaderGroup" :key="item.id">{{ item.name }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
|
label="工作组成员"
|
||||||
|
min-width="500px">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.workPeopleGroup.length > 1" v-for="item in scope.row.workPeopleGroup"
|
||||||
|
:key="item.id">{{ item.name + "," }}</span>
|
||||||
|
<span v-else v-for="item in scope.row.workPeopleGroup" :key="item.id">{{ item.name }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<loading :loading="Loading">加载中...</loading>
|
||||||
|
<pagination :page="page" :total="total" :pageSize="pageSize" @pageChange="pageChange"
|
||||||
|
@pageSizeChange="pageSizeChange"></pagination>
|
||||||
|
</div>
|
||||||
|
<el-dialog
|
||||||
|
:title="dialogTitle"
|
||||||
|
:visible.sync="addModel"
|
||||||
|
:wrapperClosable="false"
|
||||||
|
@close="cancelModel"
|
||||||
|
size="800px">
|
||||||
|
<div class="myDialog">
|
||||||
|
<el-form
|
||||||
|
ref="addForm"
|
||||||
|
:model="addForm"
|
||||||
|
:rules="addFormRules"
|
||||||
|
class="label-input-form"
|
||||||
|
|
||||||
|
>
|
||||||
|
<el-form-item label="工作组" prop="workGroup" label-width="100px" class="add-form-item">
|
||||||
|
<el-input v-model="addForm.workGroup"
|
||||||
|
placeholder="请输入工作组"
|
||||||
|
clearable></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="工作组组长" prop="workLeader" label-width="100px" class="add-form-item">
|
||||||
|
<!-- <el-input v-model="addForm.workLeader"-->
|
||||||
|
<!-- @click.native="choiceRole('1')"-->
|
||||||
|
<!-- placeholder="请输入工作组组长"-->
|
||||||
|
<!-- clearable></el-input>-->
|
||||||
|
<div class="tag-box">
|
||||||
|
<el-tag
|
||||||
|
:key="tag.id"
|
||||||
|
v-for="tag in addForm.workLeaderGroup"
|
||||||
|
closable
|
||||||
|
@close="handleCloseTag(tag)">
|
||||||
|
{{ tag.name }}
|
||||||
|
</el-tag>
|
||||||
|
<el-button size="small" @click="choiceRole('1')" type="primary">添加</el-button>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="工作组组员" prop="workPeople" label-width="100px" class="add-form-item">
|
||||||
|
<!-- <el-input v-model="addForm.workPeople"-->
|
||||||
|
<!-- @click.native="choiceRole('2')"-->
|
||||||
|
<!-- placeholder="请输入工作组组员"-->
|
||||||
|
<!-- clearable></el-input>-->
|
||||||
|
<div class="tag-box">
|
||||||
|
<el-tag
|
||||||
|
:key="tag.id"
|
||||||
|
v-for="tag in addForm.workPeopleGroup"
|
||||||
|
closable
|
||||||
|
@close="handleCloseTags(tag)">
|
||||||
|
{{ tag.name }}
|
||||||
|
</el-tag>
|
||||||
|
<el-button size="small" @click="choiceRole('2')" type="primary">添加</el-button>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<div slot="footer">
|
||||||
|
<el-button class="common-button-default" size="mini" icon="el-icon-close" @click="cancelModel">取消</el-button>
|
||||||
|
<el-button class="common-button-primary" size="mini" icon="el-icon-check" type="primary" @click="addOk">确定
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
<!-- 多选择责任人-->
|
||||||
|
<work-tree
|
||||||
|
:is-title="roleTitle"
|
||||||
|
:is-visible.sync="roleModal"
|
||||||
|
@checkedRole="checkedRole"
|
||||||
|
:nodeList="nodeList"
|
||||||
|
></work-tree>
|
||||||
|
<!-- 多选择责任人-->
|
||||||
|
<work-tree
|
||||||
|
:is-title="roleTitle2"
|
||||||
|
:is-visible.sync="roleModal2"
|
||||||
|
@checkedRole="checkedRole2"
|
||||||
|
:nodeList="nodeList2"
|
||||||
|
></work-tree>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import WorkTree from "@/components/workTree";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "workgroup",
|
||||||
|
components: { WorkTree },
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
nodeList: [],
|
||||||
|
nodeList2: [],
|
||||||
|
roleTitle2: "",
|
||||||
|
roleModal2: false,
|
||||||
|
workChangeList: [],
|
||||||
|
defaultProps: {
|
||||||
|
children: "children",
|
||||||
|
label: "name"
|
||||||
|
},
|
||||||
|
roleType: "",
|
||||||
|
roleTitle: "",
|
||||||
|
roleModal: false,
|
||||||
|
dialogTitle: "",
|
||||||
|
addModel: false,
|
||||||
|
Loading: false,
|
||||||
|
page: 1,
|
||||||
|
pageSize: this.$store.getters.userInfo.configContent,
|
||||||
|
total: 0,
|
||||||
|
workData: [],
|
||||||
|
workSearch: {
|
||||||
|
leaderName: "",
|
||||||
|
workGroupName: "",
|
||||||
|
page: 1,
|
||||||
|
pageSize: this.$store.getters.userInfo.configContent
|
||||||
|
},
|
||||||
|
addForm: {
|
||||||
|
workGroup: "",
|
||||||
|
workLeader: "",
|
||||||
|
workLeaderId: "",
|
||||||
|
workPeople: "",
|
||||||
|
workPeopleId: "",
|
||||||
|
workPeopleGroup: [],
|
||||||
|
workLeaderGroup: []
|
||||||
|
},
|
||||||
|
addFormRules: {
|
||||||
|
workGroup: [
|
||||||
|
{ required: true, message: "请输入工作组", trigger: "blur" }
|
||||||
|
]
|
||||||
|
// workLeader: [
|
||||||
|
// { required: true, message: "请选择工作组组长", trigger: "change" }
|
||||||
|
// ],
|
||||||
|
// workPeople: [
|
||||||
|
// { required: true, message: "请选择工作组组员", trigger: "change" }
|
||||||
|
// ]
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.getWorkData();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 删除工作组组长
|
||||||
|
* @param val
|
||||||
|
*/
|
||||||
|
handleCloseTag(val) {
|
||||||
|
this.addForm.workLeaderGroup.splice(this.addForm.workLeaderGroup.indexOf(val), 1);
|
||||||
|
this.nodeList.splice(this.nodeList.findIndex(item => {
|
||||||
|
return item === val.id;
|
||||||
|
}), 1);
|
||||||
|
},
|
||||||
|
/*
|
||||||
|
* 删除工作组成员
|
||||||
|
* */
|
||||||
|
handleCloseTags(tag) {
|
||||||
|
this.addForm.workPeopleGroup.splice(this.addForm.workPeopleGroup.indexOf(tag), 1);
|
||||||
|
this.nodeList2.splice(this.nodeList2.findIndex(item => {
|
||||||
|
return item === tag.id;
|
||||||
|
}), 1);
|
||||||
|
},
|
||||||
|
getWorkData() {
|
||||||
|
this.$http.get("workGroup/work-group", {
|
||||||
|
...this.workSearch
|
||||||
|
}, {
|
||||||
|
_this: this
|
||||||
|
}, res => {
|
||||||
|
res.data.records.map(item => {
|
||||||
|
item.workLeaderGroup = [];
|
||||||
|
item.workPeopleGroup = [];
|
||||||
|
var workLeaderArray = item.workLeader.split(",");
|
||||||
|
var workPeopleArray = item.workPeople.split(",");
|
||||||
|
var workLeaderIdArray = item.workLeaderId.split(",");
|
||||||
|
var workPeopleIdArray = item.workPeopleId.split(",");
|
||||||
|
for (var i = 0; i < workLeaderArray.length; i++) {
|
||||||
|
item.workLeaderGroup.push({ name: workLeaderArray[i], id: workLeaderIdArray[i] });
|
||||||
|
}
|
||||||
|
for (var j = 0; j < workPeopleArray.length; j++) {
|
||||||
|
item.workPeopleGroup.push({ name: workPeopleArray[j], id: workPeopleIdArray[j] });
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.workData = res.data.records;
|
||||||
|
this.total = res.data.total;
|
||||||
|
}, e => {
|
||||||
|
console.log(e);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
workChange(data) {
|
||||||
|
this.workChangeList = data;
|
||||||
|
},
|
||||||
|
//查询
|
||||||
|
searchPostName() {
|
||||||
|
this.page = 1;
|
||||||
|
this.getWorkData();
|
||||||
|
},
|
||||||
|
//清空
|
||||||
|
resetSelect() {
|
||||||
|
this.workSearch = {
|
||||||
|
leaderName: "",
|
||||||
|
workGroupName: "",
|
||||||
|
page: 1,
|
||||||
|
pageSize: this.$store.getters.userInfo.configContent
|
||||||
|
};
|
||||||
|
this.getWorkData();
|
||||||
|
},
|
||||||
|
//新增
|
||||||
|
add() {
|
||||||
|
this.dialogTitle = "新增工作组";
|
||||||
|
this.addModel = true;
|
||||||
|
},
|
||||||
|
//编辑
|
||||||
|
edit() {
|
||||||
|
if (this.workChangeList.length < 1) {
|
||||||
|
this.$message.warning("请勾选一条数据进行编辑");
|
||||||
|
} else if (this.workChangeList.length > 1) {
|
||||||
|
this.$message.warning("您只能选择一条数据进行编辑");
|
||||||
|
} else {
|
||||||
|
this.nodeList = [];
|
||||||
|
this.nodeList2 = [];
|
||||||
|
this.workChangeList[0].workLeaderGroup.map(item => {
|
||||||
|
this.nodeList.push(item.id);
|
||||||
|
});
|
||||||
|
this.workChangeList[0].workPeopleGroup.map(item => {
|
||||||
|
this.nodeList2.push(item.id);
|
||||||
|
});
|
||||||
|
this.dialogTitle = "编辑工作组";
|
||||||
|
this.addForm = this.workChangeList[0];
|
||||||
|
this.addModel = true;
|
||||||
|
}
|
||||||
|
console.log(this.workChangeList);
|
||||||
|
|
||||||
|
},
|
||||||
|
//批量删除
|
||||||
|
workDel() {
|
||||||
|
if (this.workChangeList.length) {
|
||||||
|
this.$confirm("您确认删除这些数据?", "提示", {
|
||||||
|
confirmButtonText: "确认",
|
||||||
|
confirmButtonClass: "common-button-primary",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning"
|
||||||
|
}).then(() => {
|
||||||
|
this.$http.delete("workGroup/work-group", {
|
||||||
|
id: this.workChangeList[0].id
|
||||||
|
}, {
|
||||||
|
_this: this
|
||||||
|
}, res => {
|
||||||
|
if (res.ok) {
|
||||||
|
this.$message.success("删除成功");
|
||||||
|
}
|
||||||
|
this.getWorkData();
|
||||||
|
});
|
||||||
|
this.$refs.workGroup.clearSelection();
|
||||||
|
}).catch(() => {
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.$message.warning("请至少选择一条数据进行删除");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//取消新增
|
||||||
|
cancelModel() {
|
||||||
|
this.addForm = {};
|
||||||
|
this.addModel = false;
|
||||||
|
},
|
||||||
|
//确定新增
|
||||||
|
addOk() {
|
||||||
|
this.$refs["addForm"].validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
if (this.dialogTitle === "新增工作组") {
|
||||||
|
if (!this.addForm.workLeaderGroup.length) {
|
||||||
|
this.$message.warning("请选择工作组组长");
|
||||||
|
} else if (!this.addForm.workPeopleGroup.length) {
|
||||||
|
this.$message.warning("请选择工作组组员");
|
||||||
|
} else {
|
||||||
|
let workLeader = "", workLeaderId = "";
|
||||||
|
this.addForm.workLeaderGroup.map(item => {
|
||||||
|
workLeader += item.name;
|
||||||
|
workLeader += ",";
|
||||||
|
workLeaderId += item.id;
|
||||||
|
workLeaderId += ",";
|
||||||
|
});
|
||||||
|
|
||||||
|
let workPeople = "", workPeopleId = "";
|
||||||
|
this.addForm.workPeopleGroup.map(item => {
|
||||||
|
workPeople += item.name;
|
||||||
|
workPeople += ",";
|
||||||
|
workPeopleId += item.id;
|
||||||
|
workPeopleId += ",";
|
||||||
|
});
|
||||||
|
this.$http.post("workGroup/work-group", {
|
||||||
|
workGroup: this.addForm.workGroup,
|
||||||
|
workLeader: workLeader,
|
||||||
|
workLeaderId: workLeaderId,
|
||||||
|
workPeople: workPeople,
|
||||||
|
workPeopleId: workPeopleId
|
||||||
|
}, {
|
||||||
|
_this: this
|
||||||
|
}, res => {
|
||||||
|
this.$message.warning(res.message);
|
||||||
|
this.getWorkData();
|
||||||
|
}, e => {
|
||||||
|
});
|
||||||
|
this.addModel = false;
|
||||||
|
this.addForm = {};
|
||||||
|
this.nodeList = [];
|
||||||
|
this.nodeList2 = [];
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
let workLeader = "";
|
||||||
|
let workLeaderId = "";
|
||||||
|
this.addForm.workLeaderGroup.map(item => {
|
||||||
|
workLeader += item.name;
|
||||||
|
workLeader += ",";
|
||||||
|
workLeaderId += item.id;
|
||||||
|
workLeaderId += ",";
|
||||||
|
});
|
||||||
|
|
||||||
|
let workPeople = "";
|
||||||
|
let workPeopleId = "";
|
||||||
|
this.addForm.workPeopleGroup.map(item => {
|
||||||
|
workPeople += item.name;
|
||||||
|
workPeople += ",";
|
||||||
|
workPeopleId += item.id;
|
||||||
|
workPeopleId += ",";
|
||||||
|
});
|
||||||
|
this.$http.put("workGroup/work-group", {
|
||||||
|
id: this.addForm.id,
|
||||||
|
workGroup: this.addForm.workGroup,
|
||||||
|
workLeader: workLeader,
|
||||||
|
workLeaderId: workLeaderId,
|
||||||
|
workPeople: workPeople,
|
||||||
|
workPeopleId: workPeopleId
|
||||||
|
}, {
|
||||||
|
_this: this
|
||||||
|
}, res => {
|
||||||
|
if (res.ok) {
|
||||||
|
} else {
|
||||||
|
this.$message.warning(res.message);
|
||||||
|
}
|
||||||
|
this.getWorkData();
|
||||||
|
});
|
||||||
|
this.addModel = false;
|
||||||
|
this.$refs.workGroup.clearSelection();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.$message.warning("请填写整信息");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
choiceRole(type) {
|
||||||
|
switch (type) {
|
||||||
|
case "1":
|
||||||
|
this.roleType = "1";
|
||||||
|
this.roleTitle = "选择工作组组长";
|
||||||
|
this.roleModal = true;
|
||||||
|
break;
|
||||||
|
case "2":
|
||||||
|
this.roleType = "2";
|
||||||
|
this.roleTitle2 = "选择工作组组员";
|
||||||
|
this.roleModal2 = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
checkedRole(data) {
|
||||||
|
data.forEach(item => {
|
||||||
|
if (this.addForm.workLeaderGroup.findIndex(item1 => {
|
||||||
|
return item1.id === item.id;
|
||||||
|
}) < 0) {
|
||||||
|
this.addForm.workLeaderGroup.push({
|
||||||
|
id: item.id,
|
||||||
|
name: item.name
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
checkedRole2(data) {
|
||||||
|
data.forEach(item => {
|
||||||
|
if (this.addForm.workPeopleGroup.findIndex(item2 => {
|
||||||
|
return item2.id === item.id;
|
||||||
|
}) < 0) {
|
||||||
|
this.addForm.workPeopleGroup.push({
|
||||||
|
id: item.id,
|
||||||
|
name: item.name
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
pageChange(page) {
|
||||||
|
this.page = page;
|
||||||
|
this.getWorkData()
|
||||||
|
},
|
||||||
|
pageSizeChange(pageSize) {
|
||||||
|
this.pageSize = pageSize;
|
||||||
|
this.getWorkData()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.workgroup-content {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.tag-box {
|
||||||
|
.el-tag {
|
||||||
|
margin: 0 5px 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-form-item {
|
||||||
|
/deep/ .el-form-item__content {
|
||||||
|
line-height: 50px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-content {
|
||||||
|
height: 68.5vh;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-button {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.standardForComments {
|
||||||
|
height: calc(~'100% - 56px');
|
||||||
|
background: #fff;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.action-bar {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
flex: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.table-wrap {
|
||||||
|
flex: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& > .pagination {
|
||||||
|
position: static;
|
||||||
|
|
||||||
|
/deep/ .pagination-slot {
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
Reference in New Issue
Block a user