|
|
@@ -1,7 +1,8 @@
|
|
|
<template>
|
|
|
- <div style="height: 600px;">
|
|
|
+ <div style="width: 800px; height: 70vh;display:flex;flex-direction:column;">
|
|
|
<a-form ref="searchForm" layout="inline" style="display: flex;justify-content: center;margin: 20px 20px 0 20px;height:50px;">
|
|
|
- <a-form-item class="form-item-style" style="width:600px;" label="组织名称" name="staff">
|
|
|
+ <a-form-item class="orgName-style" style="width:800px;" name="staff">
|
|
|
+ <span slot="label">组织名称</span>
|
|
|
<a-input class="set-input" v-model="serachValue" placeholder="请输入" />
|
|
|
</a-form-item>
|
|
|
<div style="display: flex;height:40px;align-items:flex-start;justify-content: center;margin-top: 4px;">
|
|
|
@@ -9,30 +10,49 @@
|
|
|
<a-button type="primary" @click="handleSearchOrgClick">查询</a-button>
|
|
|
</div>
|
|
|
</a-form>
|
|
|
+ <!-- <a-form v-if="!isOnlyOrg" ref="searchForm" layout="inline" style="display: flex;justify-content: center;margin: 0 20px;height:50px;">
|
|
|
+ <a-form-item class="form-item-style" style="width:100%;" label="已选组织" name="staff">
|
|
|
+ <a-tag v-for="(item,index) in chooseTags" :key="index">{{ item.name }}</a-tag>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form> -->
|
|
|
+ <div v-if="!isOnlyOrg" style="display: flex;align-items:center;justify-content: center;margin: 0 20px;">
|
|
|
+ <div class="chooseOrg-style" style="width:80px;color:rgba(0, 0, 0, 0.85);">已选组织</div>
|
|
|
+ <div style="flex:1;display: flex;align-items:center;flex-wrap:wrap;max-height:58px;overflow-y:scroll;">
|
|
|
+ <template v-if="chooseTags.length">
|
|
|
+ <div style="border:1px solid #e8e8e8;padding: 2px 3px;margin: 1px 2px;border-radius:2px;" v-for="(item,index) in chooseTags" :key="index">{{ item.name }}</div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div>未选择组织</div>
|
|
|
+ </template>
|
|
|
+ <!-- <a-tag v-for="(item,index) in chooseTags" :key="index">{{ item.name }}</a-tag> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 70 87 32 37.8 -->
|
|
|
<div style="display:flex;width:100%;padding: 16px;">
|
|
|
<template v-if="!isOnlyOrg">
|
|
|
- <div style="width:100%;border:1px solid #e8e8e8;">
|
|
|
- <div class="rightDetailtop">组织名称</div>
|
|
|
- <div style="height: 480px;overflow-y:auto;padding: 20px 0 0 20px;">
|
|
|
- <rx-tree
|
|
|
- :treeData="orgData"
|
|
|
- :async="true"
|
|
|
- v-model="checkedKeys"
|
|
|
- :loadByParent="onLoadGroupTree"
|
|
|
- multiSelect
|
|
|
- :showTreeIcon="true"
|
|
|
- :expandOnLoad="0"
|
|
|
- autoExpandParent="true"
|
|
|
- id-field="key"
|
|
|
- text-field="title"
|
|
|
- @check="check"
|
|
|
- parent-field="groupId"></rx-tree>
|
|
|
- </div>
|
|
|
+ <div style="width:100%;border:1px solid #e8e8e8;height:calc( 70vh - 150px );">
|
|
|
+ <div class="rightDetailtop" style="text-align: center;">组织名称</div>
|
|
|
+ <div style="height:calc( 100% - 38.8px );overflow-y:auto;padding: 20px 0 0 20px;">
|
|
|
+ <div v-for="(item,index) in orgDataTree" :key="index">
|
|
|
+ <rx-tree
|
|
|
+ :treeData="item.orgData"
|
|
|
+ :async="true"
|
|
|
+ v-model="item.checkedKeys"
|
|
|
+ :loadByParent="treeNode => onLoadGroupTree(treeNode,index)"
|
|
|
+ multiSelect
|
|
|
+ :showTreeIcon="true"
|
|
|
+ :expandOnLoad="0"
|
|
|
+ id-field="key"
|
|
|
+ text-field="title"
|
|
|
+ @check="(selKeys, e) => check(selKeys, e,index)"
|
|
|
+ parent-field="groupId"></rx-tree>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<rx-grid
|
|
|
v-if="isOnlyOrg"
|
|
|
- style="height: 500px;overflow-y:auto;"
|
|
|
+ style="height: calc( 70vh - 108px );overflow-y:auto;"
|
|
|
:style="{width: isOnlyOrg ? '70%' : '100%'}"
|
|
|
ref="orgTable"
|
|
|
class="rx-tree-title"
|
|
|
@@ -51,16 +71,19 @@
|
|
|
<div v-else @click="checklist(record)" class="telist rx-tree-title" :title="text">{{text}}-{{ record.pkId }}</div>
|
|
|
</div>
|
|
|
</rx-grid>
|
|
|
- <div v-if="isOnlyOrg" style="width:45%;height:500px;border: 1px solid #e8e8e8;border-left:none;">
|
|
|
- <div class="rightDetailtop">员工姓名</div>
|
|
|
+ <div v-if="isOnlyOrg" style="width:45%;height:calc( 70vh - 108px );border: 1px solid #e8e8e8;border-left:none;">
|
|
|
+ <div class="rightDetailtop">
|
|
|
+ <a-checkbox style="position:absolute;left:30px;" :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange"></a-checkbox>
|
|
|
+ <div style="width:100%;text-align:center;">员工姓名</div>
|
|
|
+ </div>
|
|
|
<!-- <a-checkbox-group name="checkboxgroup" :options="options1" v-model="value" @change="onChange" /> -->
|
|
|
- <a-checkbox-group v-model="personId" style="width:100%;height: 400px;overflow-y: auto;">
|
|
|
- <a-checkbox v-for="(item) in userData" :style="radioStyle" :value="item.fullName + '/' + item.userId" :key="item.userId">
|
|
|
+ <a-checkbox-group v-model="personId" style="width:100%;height:calc( 70vh - 214px );overflow-y: auto;">
|
|
|
+ <a-checkbox v-for="(item) in userData" :style="radioStyle" :value="item.fullName + '/' + item.userId" :key="item.userId" @change="handleOnChange">
|
|
|
{{ item.fullName + '(' + item.userId + ')'}}
|
|
|
</a-checkbox>
|
|
|
</a-checkbox-group>
|
|
|
<!-- <div style="height:200px;border-top: 1px solid #e8e8e8;"> -->
|
|
|
- <div v-if="userData.length" style="height:50px;display:flex;align-items:center;justify-content:center;">
|
|
|
+ <div v-if="userData.length" style="height:56px;display:flex;align-items:center;justify-content:center;border-top:1px solid #e8e8e8;">
|
|
|
<a-button icon="left" :disabled="queryParam.pageNo == 1" @click="handlePageNumChange('-')"></a-button>
|
|
|
<a-button icon="right" :disabled="(queryParam.pageNo*queryParam.pageSize) >= total" style="margin-left: 20px;" @click="handlePageNumChange('+')"></a-button>
|
|
|
</div>
|
|
|
@@ -115,8 +138,9 @@
|
|
|
// relTypeId: 1,
|
|
|
// groupId: ''
|
|
|
// },
|
|
|
+ indeterminate: false,
|
|
|
+ checkAll: false,
|
|
|
total: 0,
|
|
|
- orgData: [],
|
|
|
userId: '',
|
|
|
visible: false,
|
|
|
quitUserIds: [],
|
|
|
@@ -150,6 +174,12 @@
|
|
|
lineHeight: '40px',
|
|
|
marginLeft: '30px'
|
|
|
},
|
|
|
+ chooseTags: [],
|
|
|
+ orgData: [],
|
|
|
+ orgDataTree: [{
|
|
|
+ checkedKeys: {checked:[]},
|
|
|
+ orgData: []
|
|
|
+ }],
|
|
|
// 组织
|
|
|
checkedTarget: {},
|
|
|
// 组织架构(多选)
|
|
|
@@ -169,6 +199,51 @@
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 多选节点
|
|
|
+ check(selKeys, e, index) {
|
|
|
+ // console.log(this.orgDataTree[index].checkedKeys.checked)
|
|
|
+ if(e.checked) {
|
|
|
+ if(this.chooseTags.some(item => item.id == e.node.value)) {
|
|
|
+ // console.log(selKeys)
|
|
|
+ // console.log( this.orgDataTree[index].checkedKeys.checked)
|
|
|
+ // this.orgDataTree[index].checkedKeys.checked.map((item,index) => {
|
|
|
+ // if(item.name == e.node.title) {
|
|
|
+ // this.orgDataTree[index].checkedKeys.checked.splice(index, 1);
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // this.orgDataTree[index].checkedKeys.checked.remove(e.node.value)
|
|
|
+ this.$message.error(`${e.node.title}已被选择`)
|
|
|
+ return false
|
|
|
+ } else {
|
|
|
+ this.orgDataTree[index].checkedKeys.checked = selKeys
|
|
|
+ this.chooseTags.push({
|
|
|
+ id: e.node.value,
|
|
|
+ name: e.node.title
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ let id = e.node.value
|
|
|
+ this.orgDataTree[index].checkedKeys.checked = selKeys
|
|
|
+ this.chooseTags.map((item,index) => {
|
|
|
+ if (item.id.indexOf(id) > -1) {
|
|
|
+ this.chooseTags.splice(index, 1);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // this.chooseTags.push(e.checkedNodes.map(item => {
|
|
|
+ // return {
|
|
|
+ // id: item.key,
|
|
|
+ // name: item.componentOptions.propsData.title
|
|
|
+ // }
|
|
|
+ // }))
|
|
|
+ // this.checkedTargets = Object.assign({},this.$options.data().checkedTargets)
|
|
|
+ // this.checkedTargets.organizationId = selKeys
|
|
|
+ // for(let i of e.checkedNodes) {
|
|
|
+ // this.checkedTargets.organizationName.push(i.data.props.title)
|
|
|
+ // }
|
|
|
+ // this.$emit('transCheckedTargets',this.checkedTargets)
|
|
|
+ },
|
|
|
// 组织名称搜索
|
|
|
handleSearchOrgClick() {
|
|
|
if(this.serachValue==''){
|
|
|
@@ -203,7 +278,13 @@
|
|
|
var _isLeaf = rs.childAmount == 0 ? true : false;
|
|
|
temp.push({title: rs.name, groupId: rs.groupId, key: rs.key, isLeaf: _isLeaf})
|
|
|
}
|
|
|
- this.orgData = [...temp];
|
|
|
+
|
|
|
+ console.log(this.orgDataTree)
|
|
|
+ // this.orgData = [...temp];
|
|
|
+ this.orgDataTree.push({
|
|
|
+ checkedKeys: {checked:[]},
|
|
|
+ orgData: [...temp]
|
|
|
+ })
|
|
|
}
|
|
|
this.queryParam.params.groupId = ''
|
|
|
this.userData = []
|
|
|
@@ -215,13 +296,20 @@
|
|
|
handleResetClick() {
|
|
|
this.serachValue = ''
|
|
|
this.getTreeData()
|
|
|
- this.orgData = []
|
|
|
- this.userData = []
|
|
|
- this.queryParam.pageNo = 1
|
|
|
- this.queryParam.pageSize = 10
|
|
|
- this.personId = []
|
|
|
- this.personIdArr = []
|
|
|
- this.getOrgListByGroupId()
|
|
|
+ if(!this.isOnlyOrg) {
|
|
|
+ this.chooseTags = []
|
|
|
+ this.orgDataTree = [{
|
|
|
+ checkedKeys: {checked:[]},
|
|
|
+ orgData: []
|
|
|
+ }]
|
|
|
+ } else {
|
|
|
+ this.userData = []
|
|
|
+ this.queryParam.pageNo = 1
|
|
|
+ this.queryParam.pageSize = 10
|
|
|
+ this.personId = []
|
|
|
+ this.personIdArr = []
|
|
|
+ this.getOrgListByGroupId()
|
|
|
+ }
|
|
|
},
|
|
|
//组织结构
|
|
|
getTreeData(){
|
|
|
@@ -237,7 +325,13 @@
|
|
|
var _isLeaf = rs.childAmount == 0 ? true : false;
|
|
|
temp.push({title: rs.name, groupId: rs.groupId, key: rs.key, isLeaf: _isLeaf})
|
|
|
}
|
|
|
- this.orgData = [...temp];
|
|
|
+ // this.orgData = [...temp]
|
|
|
+ this.orgDataTree[0].orgData = [...temp]
|
|
|
+ // this.orgDataTree.push({
|
|
|
+ // checkedKeys: {checked:[]},
|
|
|
+ // orgData: [...temp]
|
|
|
+ // })
|
|
|
+ console.log( this.orgDataTree)
|
|
|
}
|
|
|
})
|
|
|
//清除下拉的数据
|
|
|
@@ -288,29 +382,28 @@
|
|
|
}
|
|
|
},
|
|
|
getOrgListByGroupId(arg = false) {
|
|
|
+ this.personId = []
|
|
|
OsUserApi.getAllUserByGroupId(this.queryParam).then(res=> {
|
|
|
if(res.code == 200) {
|
|
|
this.userData = res.result.data.map(item => {
|
|
|
return {
|
|
|
fullName: item.fullName,
|
|
|
- userId: item.userNo != 'admin' ? item.userNo : 1
|
|
|
+ userId: item.userId
|
|
|
}
|
|
|
})
|
|
|
if(arg) {
|
|
|
this.personId = this.personIdArr[this.queryParam.pageNo-1]
|
|
|
+ if(this.personId) {
|
|
|
+ this.indeterminate = !!this.userData.length && this.userData.length < this.personId.length
|
|
|
+ this.checkAll = this.userData.length === this.personId.length
|
|
|
+ } else {
|
|
|
+ this.indeterminate = false
|
|
|
+ this.checkAll = false
|
|
|
+ }
|
|
|
}
|
|
|
this.total = res.totalCount
|
|
|
}
|
|
|
})
|
|
|
- // OsRelInstApi.getUserListByGroupIdAndRelTypeId(this.queryParam).then(res => {
|
|
|
- // this.userData = res.data.map(item => {
|
|
|
- // return {
|
|
|
- // fullName: item.fullname,
|
|
|
- // userId: item.userNo != 'admin' ? item.userNo : 1
|
|
|
- // }
|
|
|
- // })
|
|
|
- // this.total = res.count
|
|
|
- // })
|
|
|
},
|
|
|
handlePageNumChange(arg) {
|
|
|
this.personIdArr[this.queryParam.pageNo-1] = this.personId
|
|
|
@@ -321,14 +414,18 @@
|
|
|
}
|
|
|
this.getOrgListByGroupId(true)
|
|
|
},
|
|
|
- // 多选节点
|
|
|
- check(selKeys, e) {
|
|
|
- this.checkedTargets = Object.assign({},this.$options.data().checkedTargets)
|
|
|
- this.checkedTargets.organizationId = selKeys
|
|
|
- for(let i of e.checkedNodes) {
|
|
|
- this.checkedTargets.organizationName.push(i.data.props.title)
|
|
|
- }
|
|
|
- // this.$emit('transCheckedTargets',this.checkedTargets)
|
|
|
+ // 员工全选
|
|
|
+ onCheckAllChange(e) {
|
|
|
+ this.personId = e.target.checked ? this.userData.map(item => `${item.fullName}/${item.userId}`) : []
|
|
|
+ this.indeterminate = false
|
|
|
+ this.checkAll = e.target.checked
|
|
|
+ },
|
|
|
+ // 单选
|
|
|
+ handleOnChange() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.indeterminate = !!this.userData.length && this.userData.length < this.personId.length
|
|
|
+ this.checkAll = this.userData.length === this.personId.length
|
|
|
+ })
|
|
|
},
|
|
|
init() {
|
|
|
this.loadAdminDeps();
|
|
|
@@ -371,7 +468,8 @@
|
|
|
})
|
|
|
},
|
|
|
//加载左树下的子节点
|
|
|
- onLoadGroupTree(treeNode) {
|
|
|
+ onLoadGroupTree(treeNode,index) {
|
|
|
+ console.log(treeNode,index)
|
|
|
if (treeNode.dataRef.children) {
|
|
|
return;
|
|
|
}
|
|
|
@@ -383,9 +481,11 @@
|
|
|
var _isLeaf = rs.childAmount == 0 ? true : false;
|
|
|
treeData.push({title: rs.name, groupId: rs.groupId, key: rs.key,isLeaf: _isLeaf})
|
|
|
}
|
|
|
- var orgData = this.getGroupTree(this.orgData, treeNode.dataRef.groupId, treeData);
|
|
|
+ // var orgData = this.getGroupTree(this.orgData, treeNode.dataRef.groupId, treeData);
|
|
|
|
|
|
- this.orgData = [...orgData];
|
|
|
+ // this.orgData = [...orgData];
|
|
|
+ var orgData = this.getGroupTree(this.orgDataTree[index].orgData, treeNode.dataRef.groupId, treeData);
|
|
|
+ this.orgDataTree[index].orgData = [...orgData];
|
|
|
// console.info("onLoadGroupTree")
|
|
|
// console.info(this.orgData)
|
|
|
})
|
|
|
@@ -435,10 +535,10 @@
|
|
|
.rightDetailtop{
|
|
|
background: #fafafa;
|
|
|
width: 100%;
|
|
|
- text-align: center;
|
|
|
height:37.8px;
|
|
|
line-height:37.8px;
|
|
|
border-bottom: 1px solid #e8e8e8;
|
|
|
+ position:relative;
|
|
|
}
|
|
|
.rx-tree-title{
|
|
|
white-space: normal;
|
|
|
@@ -447,6 +547,10 @@
|
|
|
.telist{
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
+.orgName-style /deep/ .ant-form-item-label {
|
|
|
+ width: 80px;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
/* .rightDetailtop{
|
|
|
background: #fafafa;
|
|
|
border-bottom: 1px solid #e8e8e8;
|
|
|
@@ -471,5 +575,15 @@
|
|
|
/deep/ .ant-table-row-expand-icon{
|
|
|
margin-top: 3px;
|
|
|
}
|
|
|
+/* /deep/ .ant-checkbox-wrapper {
|
|
|
+ height: 36px!important;
|
|
|
+ line-height: 36px!important;
|
|
|
+} */
|
|
|
+.chooseOrg-style::after {
|
|
|
+ content: ':';
|
|
|
+ position: relative;
|
|
|
+ top: -0.5px;
|
|
|
+ margin: 0 8px 0 2px;
|
|
|
+}
|
|
|
</style>
|
|
|
|
Zhang Li, BBF-411-2(Neusoft)