lingling
/
welfare-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

人员项目关联功能开发

This commit is contained in:
aoli.qu 2021-11-23 21:05:52 +08:00
parent f1097f3fc6
commit 646123cbbe
6 changed files with 308 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/api/person/personOrg.js Normal file
View File

@ -0,0 +1,21 @@
import request from '@/utils/request'
const personOrgApi = {
listByOrgId: 'person/org/listByOrgId',
addPersonOrg: 'person/org/addPersonOrg'
}
export function listPersonByOrgId(params) {
return request({
url: personOrgApi.listByOrgId,
method: 'get',
params: params
})
}
export function addPersonOrg(params) {
return request({
url: personOrgApi.addPersonOrg,
method: 'post',
data: params
})
}

4
src/views/org/OrgForm.vue
View File

@ -193,7 +193,7 @@
this.$emit('ok', values)
this.form.resetFields()
} else {
this.$message.error('编辑失败：' + res.message)
this.$message.error('编辑失败：' + res.msg)
}
}).finally((res) => {
this.confirmLoading = false
@ -208,7 +208,7 @@
this.$emit('ok', values)
this.form.resetFields()
} else {
this.$message.error('新增失败：' + res.message)
this.$message.error('新增失败：' + res.msg)
}
}).finally((res) => {
this.confirmLoading = false

4
src/views/org/OrgList.vue
View File

@ -132,10 +132,10 @@
this.getOrgTree()
this.$refs.table.clearRefreshSelected()
} else {
this.$message.error('删除失败：' + res.message)
this.$message.error('删除失败：' + res.msg)
}
}).catch((err) => {
this.$message.error('删除错误：' + err.message)
this.$message.error('删除错误：' + err.msg)
})
},
handleOk () {

2
src/views/person/PersonForm.vue
View File

@ -430,6 +430,8 @@
},
handleCancel () {
this.form.resetFields()
this.fileList = []
this.fileList2 = []
this.visible = false
}
}

33
src/views/person/PersonList.vue
View File

@ -5,10 +5,12 @@
<div v-if="this.orgTree != ''">
<a-tree
:treeData="orgTree"
:onLoadData="orgTree"
v-if="orgTree.length"
@select="handleClick"
:defaultExpandAll="true"
:defaultExpandedKeys="defaultExpandedKeys"
:defaultSelectedKeys="defaultSelectedKeys"
:replaceFields="replaceFields" />
</div>
<div v-else>
@ -37,7 +39,7 @@
</a-col>
<a-col :md="8" :sm="24">
<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
<a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
<a-button style="margin-left: 8px" @click="() => {queryParam = {}, this.loadData()}">重置</a-button>
</a-col>
</a-row>
</a-form>
@ -171,6 +173,7 @@
selectedRowKeys: [],
selectedRows: [],
defaultExpandedKeys: [],
defaultSelectedKeys: [],
treeLoading: true,
simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
replaceFields: {
@ -206,13 +209,16 @@
return
}
this.defaultExpandedKeys = []
this.defaultSelectedKeys = []
this.orgTree = listToTree(res.data, [], rootParentId)
this.orgId = this.orgTree[0].id
this.defaultSelectedKeys.push(this.orgId)
for (var item of this.orgTree) {
if (item.pid === 0) {
this.defaultExpandedKeys.push(item.id)
}
}
console.log(this.defaultExpandedKeys)
})
},
async changeOrgType () {
@ -230,7 +236,7 @@
this.$message.success('重置成功')
// this.$refs.table.refresh()
} else {
this.$message.error('重置失败：' + res.message)
this.$message.error('重置失败：' + res.msg)
}
})
},
@ -243,10 +249,10 @@
this.$message.success('删除成功')
this.$refs.table.refresh()
} else {
this.$message.error('删除失败：' + res.message)
this.$message.error('删除失败：' + res.msg)
}
}).catch((err) => {
this.$message.error('删除错误：' + err.message)
this.$message.error('删除错误：' + err.msg)
})
},
quit () {
@ -265,10 +271,10 @@
this.$message.success('操作成功')
this.$refs.table.refresh()
} else {
this.$message.error('操作失败：' + res.message)
this.$message.error('操作失败：' + res.msg)
}
}).catch((err) => {
this.$message.error('操作错误：' + err.message)
this.$message.error('操作错误：' + err.msg)
})
},
onCancel () {
@ -294,10 +300,10 @@
this.$message.success('操作成功')
this.$refs.table.refresh()
} else {
this.$message.error('操作失败：' + res.message)
this.$message.error('操作失败：' + res.msg)
}
}).catch((err) => {
this.$message.error('操作错误：' + err.message)
this.$message.error('操作错误：' + err.msg)
})
},
onCancel () {
@ -320,10 +326,10 @@
this.$message.success('操作成功')
this.$refs.table.refresh()
} else {
this.$message.error('操作失败：' + res.message)
this.$message.error('操作失败：' + res.msg)
}
}).catch((err) => {
this.$message.error('操作错误：' + err.message)
this.$message.error('操作错误：' + err.msg)
})
},
onCancel () {
@ -331,10 +337,17 @@
})
},
personRegister () {
if (this.orgType === 1) {
this.$router.push({
path: '/person/personRegister',
query: { orgId: this.orgId }
})
} else {
this.$router.push({
path: '/person/personOrg',
query: { orgId: this.orgId }
})
}
},
/**
* 点击左侧机构树查询列表

254
src/views/person/PersonOrgForm.vue Normal file
View File

@ -0,0 +1,254 @@
<template>
<div>
<a-card :bordered="false">
<a-row type="flex" justify="center" align="top">
<a-col :span="4" id="tree">
<a-page-header title="项目列表" sub-title="" />
<div v-if="this.orgTree != ''">
<a-tree
:treeData="orgTree"
v-if="orgTree.length"
@select="onSelect"
:defaultExpandAll="true"
:defaultExpandedKeys="defaultExpandedKeys"
:defaultSelectedKeys="defaultSelectedKeys"
:replaceFields="replaceFields"
>
<a-icon slot="switcherIcon" type="down" />
</a-tree>
</div>
</a-col>
<a-col :span="20" id="content">
<a-page-header title="人员选择" sub-title="" />
<a-transfer
class="org-transfer"
:titles="['未选中', '已选择']"
:operations="['添加', '移除']"
:data-source="mockData"
:target-keys="targetKeys"
:show-search="true"
:filter-option="(inputValue, item) => item.title.indexOf(inputValue) !== -1"
:show-select-all="false"
@change="onChange"
>
<template
slot="children"
slot-scope="{
props: { direction, filteredItems, selectedKeys, disabled: listDisabled },
on: { itemSelectAll, itemSelect },
}"
>
<a-table
:row-selection="
getRowSelection({ disabled: listDisabled, selectedKeys, itemSelectAll, itemSelect })
"
:columns="direction === 'left' ? leftColumns : rightColumns"
:data-source="filteredItems"
size="small"
:style="{ pointerEvents: listDisabled ? 'none' : null }"
:custom-row="
({ key, disabled: itemDisabled }) => ({
on: {
click: () => {
if (itemDisabled || listDisabled) return;
itemSelect(key, !selectedKeys.includes(key));
},
},
})
"
/>
</template>
</a-transfer>
<div class="draw-button-container align-right">
<a-button type="primary" @click="onSubmit">保存</a-button>
</div>
</a-col>
</a-row>
</a-card>
</div>
</template>
<script>
import difference from 'lodash/difference'
import { orgList } from '@/api/org/org'
import { listToTree } from '@/utils/util'
import { personPage } from '@/api/person/person'
import { listPersonByOrgId, addPersonOrg } from '@/api/person/personOrg'
import { STable } from '@/components'
const mockData = []
const leftTableColumns = [
{ title: '姓名', dataIndex: 'title' },
{ title: '用户名', dataIndex: 'description' }
]
const rightTableColumns = [
{ title: '姓名', dataIndex: 'title' },
{ title: '用户名', dataIndex: 'description' }
]
export default {
components: {
orgList,
STable
},
data () {
// 这里存放数据
return {
form: this.projectForm,
// 查询参数
queryParam: { orgType: 2 },
replaceFields: { children: 'children', title: 'name', key: 'id', value: 'id' },
expandedKeys: [],
autoExpandParent: true,
defaultExpandedKeys: [],
defaultSelectedKeys: [],
orgTree: [],
orgId: this.$route.query.orgId,
orgType: 2,
mockData: mockData,
targetKeys: [],
leftColumns: leftTableColumns,
rightColumns: rightTableColumns,
isLoading: false
}
},
mounted () {
this.getPerson()
this.listPerson()
},
// 方法集合
methods: {
async getPerson () {
await personPage({ pageSize: 9999, pageNum: 1 }).then((res) => {
if (res.code === 200 && res.rows.length > 0) {
this.mockData = res.rows.map(item => {
return {
key: item.id.toString(),
title: item.name,
description: item.userName,
disabled: false
}
})
}
})
},
async listPerson () {
await listPersonByOrgId({ orgId: this.orgId }).then((response) => {
if (response.code === 200 && response.data.length > 0) {
mockData.filter(item => response.data.indexOf(item.key) > 0).map(item => item.key)
const newArray = response.data.map(item => { return item.toString() })
this.targetKeys = newArray
}
})
},
onSubmit () {
if (this.isLoading) {
return false
}
this.isLoading = true
addPersonOrg({ personIds: this.targetKeys, orgId: this.orgId }).then(res => {
if (res.code === 200) {
this.$message.success('保存成功')
} else {
this.$message.error('保存失败：' + res.msg)
}
})
this.isLoading = false
},
onChange (nextTargetKeys) {
this.targetKeys = nextTargetKeys
},
triggerShowSearch (showSearch) {
this.showSearch = showSearch
},
getRowSelection ({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
return {
getCheckboxProps: item => ({ props: { disabled: disabled || item.disabled } }),
onSelectAll (selected, selectedRows) {
const treeSelectedKeys = selectedRows
.filter(item => !item.disabled)
.map(({ key }) => key)
const diffKeys = selected
? difference(treeSelectedKeys, selectedKeys)
: difference(selectedKeys, treeSelectedKeys)
itemSelectAll(diffKeys, selected)
},
onSelect ({ key }, selected) {
itemSelect(key, selected)
},
selectedRowKeys: selectedKeys
}
},
// 选中后触发
onSelect (selectedKey, info) {
this.queryParam.orgId = selectedKey.toString()
this.orgId = selectedKey.toString()
this.mockData = []
this.targetKeys = []
this.getPerson()
this.listPerson()
},
// 树使用的方法
onExpand (expandedKeys) {
this.expandedKeys = expandedKeys
this.autoExpandParent = false
},
// 编辑时初始化人员列表初始化
initPersonList () {
if (this.form.personIds) {
}
},
/**
* 获取到机构树，展开顶级下树节点，考虑到后期数据量变大，不建议全部展开
*/
async getOrgTree () {
await orgList({ orgType: this.orgType, pid: this.$route.query.orgId }).then((res) => {
this.treeLoading = false
if (!res.code === 200 || !res.data.length) {
return
}
var rootParentId = res.data[0].pid
this.defaultExpandedKeys = []
this.defaultSelectedKeys = []
this.orgTree = listToTree(res.data, [], rootParentId)
this.orgId = this.orgTree[0].id
this.defaultSelectedKeys.push(this.orgId)
for (var item of this.orgTree) {
if (item.pid === 0) {
this.defaultExpandedKeys.push(item.id)
}
}
})
}
},
// 生命周期 - 创建完成（可以访问当前this实例）
created () {
this.getOrgTree()
}
}
</script>
<style lang="less" scoped>
.org-transfer {
display: flex;
align-items: center;
height: 100%;
padding: 24px 24px 75px;
/deep/ .ant-transfer-list {
flex: 1;
height: 100%;
}
/deep/ .ant-transfer-list-body{
overflow-y: auto;
}
/deep/ .ant-transfer-operation .ant-btn {
margin-left: 0;
}
}
</style>