|
|
|
@ -24,20 +24,18 @@ |
|
|
|
src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" /> |
|
|
|
<div style="width: 100%; height: 370px; overflow-y: auto"> |
|
|
|
<a-tree |
|
|
|
:expanded-keys="expandedKeys" |
|
|
|
:auto-expand-parent="autoExpandParent" |
|
|
|
:tree-data="gData" |
|
|
|
v-model:selectedKeys="selectedKeys" |
|
|
|
v-model:expandedKeys="expandedKeys" |
|
|
|
:tree-data="deptTreeData" |
|
|
|
@select="onSelect" |
|
|
|
@expand="onExpand" |
|
|
|
/></div> |
|
|
|
<!-- <ns-tree-api v-bind="config" @select="treeSelect" /> --> |
|
|
|
</div> |
|
|
|
<div class="box-right"> |
|
|
|
<div style="width: 100%; display: flex; position: relative"> |
|
|
|
<div class="border-card"></div> |
|
|
|
<span style="margin-left: 24px; color: #333333">人员列表 </span> |
|
|
|
<a-input-search |
|
|
|
v-model:value="name" |
|
|
|
v-model:value="realName" |
|
|
|
style="margin-bottom: 8px; width: 280px; position: absolute; right: 20px" |
|
|
|
placeholder="请输入" |
|
|
|
allowClear="true" |
|
|
|
@ -54,11 +52,18 @@ |
|
|
|
onChange: onSelectChange, |
|
|
|
}" |
|
|
|
:columns="columns" |
|
|
|
:loading="loading" |
|
|
|
:data-source="dataSource" |
|
|
|
:rowKey="(record: any) => record.id" |
|
|
|
:rowKey="(record: any) => record.userId" |
|
|
|
:pagination="pagination" |
|
|
|
:bordered="true" |
|
|
|
:size="'middle'" /> |
|
|
|
:size="'middle'"> |
|
|
|
<template #bodyCell="{ record, column }"> |
|
|
|
<template v-if="column.dataIndex === 'address'"> |
|
|
|
{{ record.userRoleInfos?.[0].deptRoleInfoList }} |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</a-table> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -69,51 +74,23 @@ |
|
|
|
import { ref, watch, computed } from 'vue'; |
|
|
|
import { defineComponent } from 'vue'; |
|
|
|
import type { TreeProps } from 'ant-design-vue'; |
|
|
|
import { device } from '/@/api/deviceManage'; |
|
|
|
import { origanizemanage } from '/@/api/origanizemanage'; |
|
|
|
import { department } from '/@/api/origanizemanage'; |
|
|
|
|
|
|
|
import { http } from '/nerv-lib/util'; |
|
|
|
// import { editTreeConfig } from './config'; |
|
|
|
|
|
|
|
const x = 3; |
|
|
|
const y = 2; |
|
|
|
const z = 1; |
|
|
|
const genData: TreeProps['treeData'] = []; |
|
|
|
|
|
|
|
const generateData = (_level: number, _preKey?: string, _tns?: TreeProps['treeData']) => { |
|
|
|
const preKey = _preKey || '0'; |
|
|
|
const tns = _tns || genData; |
|
|
|
|
|
|
|
const children = []; |
|
|
|
for (let i = 0; i < x; i++) { |
|
|
|
const key = `${preKey}-${i}`; |
|
|
|
tns.push({ title: key, key }); |
|
|
|
if (i < y) { |
|
|
|
children.push(key); |
|
|
|
} |
|
|
|
} |
|
|
|
if (_level < 0) { |
|
|
|
return tns; |
|
|
|
} |
|
|
|
const level = _level - 1; |
|
|
|
children.forEach((key, index) => { |
|
|
|
tns[index].children = []; |
|
|
|
return generateData(level, key, tns[index].children); |
|
|
|
}); |
|
|
|
}; |
|
|
|
generateData(z); |
|
|
|
|
|
|
|
//搜索存储 |
|
|
|
const dataList: TreeProps['treeData'] = []; |
|
|
|
const generateList = (data: TreeProps['treeData']) => { |
|
|
|
for (let i = 0; i < data.length; i++) { |
|
|
|
const node = data[i]; |
|
|
|
const key = node.key; |
|
|
|
dataList.push({ key, title: key }); |
|
|
|
dataList.push({ key, title: node.title }); |
|
|
|
if (node.children) { |
|
|
|
generateList(node.children); |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
generateList(genData); |
|
|
|
|
|
|
|
const getParentKey = ( |
|
|
|
key: string | number, |
|
|
|
tree: TreeProps['treeData'], |
|
|
|
@ -133,55 +110,101 @@ |
|
|
|
}; |
|
|
|
export default defineComponent({ |
|
|
|
setup(props, { emit }) { |
|
|
|
// const config = computed(() => { |
|
|
|
// return editTreeConfig(result); |
|
|
|
// }); |
|
|
|
//组织数 |
|
|
|
const orgId = ref(''); |
|
|
|
const result = JSON.parse(sessionStorage.getItem('ORGID')!); |
|
|
|
orgId.value = result; |
|
|
|
const dataSource = ref([]); |
|
|
|
const loading = ref(false); |
|
|
|
const selectedRowKey = ref([]); |
|
|
|
const selectedRow = ref([]); |
|
|
|
const name = ref(null); |
|
|
|
const realName = ref(null); |
|
|
|
// 树方法 |
|
|
|
const expandedKeys = ref<(string | number)[]>([]); |
|
|
|
const selectedKeys = ref([]); |
|
|
|
const searchValue = ref<string>(''); |
|
|
|
const deviceName = ref<string>(''); |
|
|
|
const autoExpandParent = ref<boolean>(true); |
|
|
|
const deptTreeData = ref([]); |
|
|
|
//选择 组织 |
|
|
|
const selectOrgId = ref(''); |
|
|
|
selectOrgId.value = result; |
|
|
|
//选择部门 |
|
|
|
const selectDeptId = ref(''); |
|
|
|
|
|
|
|
const onSearch = () => { |
|
|
|
http |
|
|
|
.post(device.queryDevicePage, { |
|
|
|
pageNum: pagination.value.current, |
|
|
|
pageSize: pagination.value.pageSize, |
|
|
|
deviceName: name.value, |
|
|
|
orgId: orgId.value, |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
dataSource.value = res.data.records; |
|
|
|
pagination.value.total = res.data.total; |
|
|
|
}); |
|
|
|
pagination.value.current = 1; |
|
|
|
getList(); |
|
|
|
}; |
|
|
|
const onSelect = (selectedKeys: any, info: any) => { |
|
|
|
console.log('selected', selectedKeys, info.node.dataRef); |
|
|
|
selectedKeys.value = selectedKeys; |
|
|
|
if (info.node.dataRef.deptInfo) { |
|
|
|
selectDeptId.value = info.node.dataRef.deptInfo.deptId; |
|
|
|
selectOrgId.value = info.node.dataRef.deptInfo.orgId; |
|
|
|
} |
|
|
|
if (info.node.dataRef.orgInfo) { |
|
|
|
selectOrgId.value = info.node.dataRef.orgInfo.orgId; |
|
|
|
selectDeptId.value = ''; |
|
|
|
} |
|
|
|
pagination.value.current = 1; |
|
|
|
onSearch(); |
|
|
|
getList(); |
|
|
|
}; |
|
|
|
// 递归处理部门树数据 |
|
|
|
const processDepartmentTree = (tree) => { |
|
|
|
tree.forEach((item) => { |
|
|
|
item.deptInfo = item.deptInfo; |
|
|
|
item.key = item.deptInfo.deptId; |
|
|
|
item.title = item.deptInfo.deptName; |
|
|
|
item.children = processDepartmentTree(item.children); // 递归处理子节点 |
|
|
|
}); |
|
|
|
return tree; |
|
|
|
}; |
|
|
|
|
|
|
|
const handleChangePage = (current: number, pageSize: number) => { |
|
|
|
pagination.value.current = current; |
|
|
|
pagination.value.pageSize = pageSize; |
|
|
|
// 获取部门树 |
|
|
|
const getDepartList = (params) => { |
|
|
|
return http.post(department.queryDeptTree, params).then((res) => { |
|
|
|
const result = res.data.map((item) => ({ |
|
|
|
key: item.orgInfo.orgId, |
|
|
|
orgInfo: item.orgInfo, |
|
|
|
title: item.orgInfo.orgName, |
|
|
|
children: processDepartmentTree(item.deptTrees), |
|
|
|
})); |
|
|
|
|
|
|
|
return result; |
|
|
|
}); |
|
|
|
}; |
|
|
|
//获取树 |
|
|
|
const getTreeData = () => { |
|
|
|
getDepartList({ orgId: orgId.value }).then((res) => { |
|
|
|
deptTreeData.value = res; |
|
|
|
selectedKeys.value = [orgId.value]; |
|
|
|
generateList(deptTreeData.value); |
|
|
|
}); |
|
|
|
}; |
|
|
|
//获取列表 |
|
|
|
const getList = () => { |
|
|
|
loading.value = true; |
|
|
|
http |
|
|
|
.post(device.queryDevicePage, { |
|
|
|
.post(origanizemanage.userList, { |
|
|
|
pageNum: pagination.value.current, |
|
|
|
pageSize: pagination.value.pageSize, |
|
|
|
orgId: orgId.value, |
|
|
|
orgId: selectOrgId.value, |
|
|
|
deptId: selectDeptId.value, |
|
|
|
realName: realName.value, |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
dataSource.value = res.data.records; |
|
|
|
pagination.value.total = res.data.total; |
|
|
|
loading.value = false; |
|
|
|
}); |
|
|
|
console.log(selectedRowKey.value, selectedRow.value); |
|
|
|
}; |
|
|
|
const onSelectChange = (selectedRowKeys: any, selectedRows: any) => { |
|
|
|
console.log(selectedRowKeys, selectedRows); |
|
|
|
console.log(selectedRows, '数据'); |
|
|
|
const handleChangePage = (current: number, pageSize: number) => { |
|
|
|
pagination.value.current = current; |
|
|
|
pagination.value.pageSize = pageSize; |
|
|
|
getList(); |
|
|
|
}; |
|
|
|
|
|
|
|
const onSelectChange = (selectedRowKeys: any, selectedRows: any) => { |
|
|
|
selectedRowKey.value = selectedRowKeys; |
|
|
|
selectedRow.value = selectedRows; |
|
|
|
}; |
|
|
|
@ -200,14 +223,14 @@ |
|
|
|
const columns = [ |
|
|
|
{ |
|
|
|
title: '序号', |
|
|
|
dataIndex: 'address', |
|
|
|
dataIndex: 'index', |
|
|
|
customRender: (text: any) => { |
|
|
|
return text.index + 1; |
|
|
|
}, |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '姓名', |
|
|
|
dataIndex: 'deviceName', |
|
|
|
dataIndex: 'realName', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '性别', |
|
|
|
@ -215,7 +238,7 @@ |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '组织关系', |
|
|
|
dataIndex: 'address', |
|
|
|
dataIndex: 'orgName', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '部门 ', |
|
|
|
@ -227,48 +250,32 @@ |
|
|
|
emit('handleOk', { id: selectedRowKey.value, data: selectedRow.value }); |
|
|
|
show.value = false; |
|
|
|
pagination.value.current = 1; |
|
|
|
realName.value = null; |
|
|
|
searchValue.value = ''; |
|
|
|
}; |
|
|
|
const getData = (data: any) => { |
|
|
|
selectedRow.value = data.data; |
|
|
|
selectedRowKey.value = data.id; |
|
|
|
show.value = true; |
|
|
|
http |
|
|
|
.post(device.queryDevicePage, { |
|
|
|
pageNum: pagination.value.current, |
|
|
|
pageSize: pagination.value.pageSize, |
|
|
|
orgId: orgId.value, |
|
|
|
}) |
|
|
|
.then((res) => { |
|
|
|
dataSource.value = res.data.records; |
|
|
|
pagination.value.total = res.data.total; |
|
|
|
}); |
|
|
|
//获取列表 |
|
|
|
getList(); |
|
|
|
//获取树 |
|
|
|
getTreeData(); |
|
|
|
}; |
|
|
|
const show = ref(false); |
|
|
|
const handleCancel = () => { |
|
|
|
// 处理取消按钮的逻辑 |
|
|
|
pagination.value.current = 1; |
|
|
|
realName.value = null; |
|
|
|
emit('handleCancel', null); |
|
|
|
show.value = false; |
|
|
|
}; |
|
|
|
// 树方法 |
|
|
|
const expandedKeys = ref<(string | number)[]>([]); |
|
|
|
const searchValue = ref<string>(''); |
|
|
|
const deviceName = ref<string>(''); |
|
|
|
const autoExpandParent = ref<boolean>(true); |
|
|
|
const gData = ref<TreeProps['treeData']>(genData); |
|
|
|
|
|
|
|
const onExpand = (keys: string[]) => { |
|
|
|
expandedKeys.value = keys; |
|
|
|
autoExpandParent.value = false; |
|
|
|
console.log(keys, '数据'); |
|
|
|
}; |
|
|
|
watch(searchValue, (value) => { |
|
|
|
console.log(gData.value, '数据'); |
|
|
|
|
|
|
|
const expanded = dataList |
|
|
|
.map((item: TreeProps['treeData'][number]) => { |
|
|
|
if (item.title.indexOf(value) > -1) { |
|
|
|
return getParentKey(item.key, gData.value); |
|
|
|
console.log(item.title.indexOf(value)); |
|
|
|
return getParentKey(item.key, deptTreeData.value); |
|
|
|
} |
|
|
|
return null; |
|
|
|
}) |
|
|
|
@ -276,30 +283,35 @@ |
|
|
|
expandedKeys.value = expanded; |
|
|
|
searchValue.value = value; |
|
|
|
autoExpandParent.value = true; |
|
|
|
console.log(expandedKeys.value, '数据'); |
|
|
|
}); |
|
|
|
return { |
|
|
|
columns, |
|
|
|
name, |
|
|
|
realName, |
|
|
|
orgId, |
|
|
|
// config, |
|
|
|
processDepartmentTree, |
|
|
|
onSearch, |
|
|
|
getList, |
|
|
|
loading, |
|
|
|
dataSource, |
|
|
|
onSelect, |
|
|
|
gData, |
|
|
|
onExpand, |
|
|
|
deptTreeData, |
|
|
|
selectedRow, |
|
|
|
selectedRowKey, |
|
|
|
autoExpandParent, |
|
|
|
expandedKeys, |
|
|
|
selectedKeys, |
|
|
|
onSelectChange, |
|
|
|
pagination, |
|
|
|
handleOk, |
|
|
|
show, |
|
|
|
getData, |
|
|
|
getTreeData, |
|
|
|
getDepartList, |
|
|
|
searchValue, |
|
|
|
deviceName, |
|
|
|
handleCancel, |
|
|
|
selectDeptId, |
|
|
|
selectOrgId, |
|
|
|
}; |
|
|
|
}, |
|
|
|
}); |
|
|
|
@ -313,7 +325,7 @@ |
|
|
|
width: 5px; |
|
|
|
height: 15px; |
|
|
|
background: inherit; |
|
|
|
background-color: rgba(251, 156, 67, 1); |
|
|
|
background-color: @primary-color; |
|
|
|
border: none; |
|
|
|
border-radius: 5px; |
|
|
|
-moz-box-shadow: none; |
|
|
|
|
zhaohy
2 months ago