You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
426 lines
12 KiB
426 lines
12 KiB
<template>
|
|
<div class="app-container">
|
|
|
|
<button-bar ref="btnbar" view-title="设置关联人员" :btndisabled="btndisabled" @btnhandle="btnHandle" />
|
|
<div class="main-content">
|
|
<el-row class="mid">
|
|
<el-col :span="8" class="left">
|
|
<div class="listtop" style="width: 400px">
|
|
<div class="tit">项目列表</div>
|
|
</div>
|
|
<el-table :data="formobj" border ref="multipleTab" max-height="560px" style="width: 400px;font-size: 16px"
|
|
highlight-current-row @row-click="singleElection" :row-style="{height:'50px'}" :show-header="false">
|
|
<el-table-column prop="entryName" label="项目名称" />
|
|
</el-table>
|
|
</el-col>
|
|
<el-col :span="16" class="rigth">
|
|
<div class="rihthGl">
|
|
<div class="rigthJg">
|
|
<div class="listtop" style="width: 100%">
|
|
<span>关联人员</span>
|
|
<button class="Waiting" @click="getWaiting">取消关联</button>
|
|
</div>
|
|
<!-- <el-table ref="multipleTable" :data="dataListOne" border max-height="440px" style="width: 450px"
|
|
@selection-change="handlChange" tooltip-effect="dark" :row-style="{height:'50px'}" >
|
|
<el-table-column type="selection" width="55" align="center"/>
|
|
<el-table-column prop="name" label="ID" align="center" />
|
|
<el-table-column prop="orgName" label="单位" align="center" />
|
|
</el-table> -->
|
|
|
|
<div class="org-tree">
|
|
<el-tree :data="sysorganList" show-checkbox node-key="sid" :props="props" ref="tree" highlight-current
|
|
check-strictly :default-checked-keys="uploadData.users"
|
|
:default-expanded-keys="['2','fd6435f2-0005-11ec-a033-48452053aa33','3042d730-64e8-4e34-b08a-44adca4da3a5']"
|
|
@check="handleNodeClick1">
|
|
|
|
<div class="custom-tree-node" slot-scope="{ node, data }"
|
|
style=" width: 100%;display: flex;flex-direction: row; align-items: center;flex-shrink: 1;">
|
|
<div :class="{ 'title': data.psid==='0' }">{{ node.label }}</div>
|
|
|
|
</div>
|
|
|
|
</el-tree>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rigthYh">
|
|
<div class="listtop" style="width: 100%">
|
|
<span>未关联人员</span>
|
|
<button class="relevance" @click="getRelevance">关联</button>
|
|
</div>
|
|
<div class="org-tree">
|
|
<el-tree :data="sysorganList2" show-checkbox node-key="sid" :props="props" ref="tree2" highlight-current
|
|
check-strictly :default-checked-keys="uploadData.users"
|
|
:default-expanded-keys="['2','fd6435f2-0005-11ec-a033-48452053aa33','3042d730-64e8-4e34-b08a-44adca4da3a5']"
|
|
@check="handleNodeClick2">
|
|
<div class="custom-tree-node" slot-scope="{ node, data }"
|
|
style=" width: 100%;display: flex;flex-direction: row; align-items: center;flex-shrink: 1;">
|
|
<div :class="{ 'title': data.psid==='0' }">{{ node.label }}</div>
|
|
|
|
|
|
</div>
|
|
|
|
</el-tree>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="Btn">
|
|
<el-button type="primary" @click="getPurchaseList">保存</el-button>
|
|
<el-button type="primary" style="margin-left: 40px;" @click="getCancel">取消</el-button>
|
|
</div> -->
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import req from '@/api/projectStaff/index'
|
|
import ButtonBar from '@/components/ButtonBar'
|
|
import Pagination from '@/components/pagination'
|
|
import pageye from '@/components/pagination/pageye'
|
|
export default {
|
|
name: 'SupplierBankInfoIndex',
|
|
components: {
|
|
ButtonBar,
|
|
Pagination,
|
|
pageye
|
|
},
|
|
data() {
|
|
return {
|
|
btndisabled: false,
|
|
viewState: 1, // 1、列表 2、添加 3、修改 4、查看
|
|
isSearchShow: false,
|
|
searchxianshitit: '显示查询条件',
|
|
tableLoading: false,
|
|
formobj: [],
|
|
dataListOne: [],
|
|
props: {
|
|
sid: 'sid',
|
|
psid: "psid",
|
|
label: 'name',
|
|
children: 'children'
|
|
},
|
|
btnList: [{
|
|
type: 'info',
|
|
size: 'small',
|
|
icon: 'cross',
|
|
btnKey: 'doClose',
|
|
btnLabel: '关闭'
|
|
}],
|
|
queryParams: {
|
|
current: 1,
|
|
size: 10,
|
|
total: 0,
|
|
params: {
|
|
typeName: '',
|
|
}
|
|
},
|
|
sids: [],
|
|
templateSelection: "",
|
|
// 当前选择的行的数据
|
|
checkList: [],
|
|
uploadData: {
|
|
projectSid: '',
|
|
users: [],
|
|
},
|
|
ValSid: [],
|
|
ValSids: [],
|
|
sysorganList: [],
|
|
sysorganList2: [],
|
|
}
|
|
},
|
|
watch: {
|
|
formobj: function() {
|
|
this.$nextTick(function() {
|
|
this.$refs['multipleTab'].setCurrentRow(this.formobj[0])
|
|
})
|
|
},
|
|
},
|
|
mounted() {
|
|
this.$refs['btnbar'].setButtonList(this.btnList)
|
|
},
|
|
created() {
|
|
this.loadList()
|
|
},
|
|
methods: {
|
|
// 搜索条件效果
|
|
clicksearchShow() {
|
|
this.isSearchShow = !this.isSearchShow
|
|
if (this.isSearchShow) {
|
|
this.searchxianshitit = '隐藏查询条件'
|
|
} else {
|
|
this.searchxianshitit = '显示查询条件'
|
|
}
|
|
},
|
|
btnHandle(btnKey) {
|
|
switch (btnKey) {
|
|
case 'doClose':
|
|
this.doClose()
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
},
|
|
loadList() {
|
|
req.projectinformation().then(res => {
|
|
if (res.success) {
|
|
this.formobj = res.data
|
|
this.uploadData.projectSid = res.data[0].sid
|
|
console.log("aaaaaaaaaa", this.uploadData.projectSid)
|
|
req.associationUserList(this.uploadData.projectSid).then(res => {
|
|
if (res.success) {
|
|
this.sysorganList = res.data
|
|
}
|
|
})
|
|
req.sysorganization(this.uploadData.projectSid).then(res => {
|
|
if (res.success) {
|
|
this.sysorganList2 = res.data
|
|
}
|
|
})
|
|
}
|
|
})
|
|
|
|
},
|
|
singleElection(row) {
|
|
// this.clearList()
|
|
this.uploadData.projectSid = row.sid
|
|
req.associationUserList(this.uploadData.projectSid).then(res => {
|
|
if (res.success) {
|
|
this.sysorganList = res.data
|
|
}
|
|
})
|
|
req.sysorganization(this.uploadData.projectSid).then(res => {
|
|
if (res.success) {
|
|
this.sysorganList2 = res.data
|
|
}
|
|
})
|
|
},
|
|
|
|
handleNodeClick1(val, num) {
|
|
console.log("aaaaaaaaaa", val)
|
|
console.log("aaaaaaaaaa", num)
|
|
|
|
this.uploadData.users = num.checkedKeys
|
|
|
|
},
|
|
// 点击取消关联
|
|
getWaiting() {
|
|
console.log("aaaaaaaaaa", this.uploadData)
|
|
|
|
req.usercancellation(this.uploadData).then(res => {
|
|
if (res.success) {
|
|
this.$message({
|
|
message: '取消关联成功',
|
|
type: 'success'
|
|
});
|
|
|
|
req.associationUserList(this.uploadData.projectSid).then(res => {
|
|
if (res.success) {
|
|
this.sysorganList = res.data
|
|
}
|
|
})
|
|
req.sysorganization(this.uploadData.projectSid).then(res => {
|
|
if (res.success) {
|
|
this.sysorganList2 = res.data
|
|
}
|
|
})
|
|
|
|
}
|
|
})
|
|
this.$nextTick(() => {
|
|
|
|
this.$refs['tree'].setCheckedKeys([])
|
|
this.$refs['tree2'].setCheckedKeys([])
|
|
|
|
});
|
|
|
|
},
|
|
handleNodeClick2(val, num) {
|
|
console.log("aaaaaaaaaa", val)
|
|
console.log("aaaaaaaaaa", num)
|
|
|
|
console.log("aaaaaaaaaa", val)
|
|
console.log("aaaaaaaaaa", num)
|
|
|
|
this.uploadData.users = num.checkedKeys
|
|
},
|
|
// 点击关联
|
|
getRelevance() {
|
|
console.log("aaaaaaaaaa", this.uploadData)
|
|
|
|
req.userprojectSave(this.uploadData).then(res => {
|
|
if (res.success) {
|
|
this.$message({
|
|
message: '关联成功',
|
|
type: 'success'
|
|
});
|
|
|
|
|
|
req.associationUserList(this.uploadData.projectSid).then(res => {
|
|
if (res.success) {
|
|
this.sysorganList = res.data
|
|
}
|
|
})
|
|
req.sysorganization(this.uploadData.projectSid).then(res => {
|
|
if (res.success) {
|
|
console.log("aaaaaaaaaa", res.data)
|
|
this.sysorganList2 = []
|
|
this.sysorganList2 = res.data
|
|
|
|
}
|
|
})
|
|
}
|
|
})
|
|
this.$nextTick(() => {
|
|
|
|
this.$refs['tree'].setCheckedKeys([])
|
|
this.$refs['tree2'].setCheckedKeys([])
|
|
|
|
});
|
|
},
|
|
doClose() {
|
|
this.$store.dispatch('tagsView/delView', this.$route)
|
|
this.$router.go(-1)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
::v-deep .el-tree .el-tree-node .is-leaf+.el-checkbox .el-checkbox__inner {
|
|
display: inline-block;
|
|
}
|
|
|
|
::v-deep .el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
|
|
display: none;
|
|
}
|
|
|
|
// 设置节点高度
|
|
::v-deep .el-tree-node__content {
|
|
height: 35px;
|
|
}
|
|
|
|
::v-deep .title {
|
|
font-size: 18px;
|
|
color: #000;
|
|
font-weight: 600;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
// 树形结构 三角图标 设在右侧
|
|
// ::v-deep .el-tree-node__expand-icon {
|
|
// position: absolute;
|
|
// right: 2%;
|
|
// }
|
|
|
|
.main-content {
|
|
.mid {
|
|
width: 100%;
|
|
height: 540px;
|
|
margin-top: 30px;
|
|
|
|
.left {
|
|
.listtop {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding-top: 25px;
|
|
padding-bottom: 25px;
|
|
}
|
|
}
|
|
|
|
.rigth {
|
|
margin-left: -50px;
|
|
height: 600px;
|
|
border: 1px solid #dfe6ec;
|
|
position: relative;
|
|
|
|
.rihthGl {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
|
|
.rigthJg {
|
|
margin-top: 30px;
|
|
width: 450px;
|
|
|
|
.org-tree {
|
|
width: 100%;
|
|
height: 450px;
|
|
box-sizing: border-box;
|
|
/*padding-right: 10px;*/
|
|
border: 1px solid #edf1f7;
|
|
overflow: scroll;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.listtop {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding-top: 25px;
|
|
padding-bottom: 25px;
|
|
|
|
.Waiting {
|
|
padding: 5px 10px;
|
|
border: 2px solid #018ad2;
|
|
color: #018ad2;
|
|
font-size: 14px;
|
|
border-radius: 5px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.Waiting:hover {
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rigthYh {
|
|
margin-top: 30px;
|
|
width: 450px;
|
|
|
|
.org-tree {
|
|
width: 100%;
|
|
height: 450px;
|
|
box-sizing: border-box;
|
|
/*padding-right: 10px;*/
|
|
border: 1px solid #edf1f7;
|
|
overflow: scroll;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.listtop {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
padding-top: 25px;
|
|
padding-bottom: 25px;
|
|
|
|
.relevance {
|
|
padding: 5px 10px;
|
|
border: 2px solid #018ad2;
|
|
color: #018ad2;
|
|
font-size: 14px;
|
|
border-radius: 5px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.relevance:hover {
|
|
background-color: #fff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.Btn {
|
|
position: absolute;
|
|
left: 45%;
|
|
top: 92%;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|