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.
353 lines
11 KiB
353 lines
11 KiB
<template>
|
|
<a-modal
|
|
v-model:visible="show"
|
|
width="1100px"
|
|
style="top: 50%; transform: translateY(-50%); overflow-y: hidden"
|
|
title="添加联系人"
|
|
@ok="handleOk"
|
|
@cancel="handleCancel">
|
|
<div class="box">
|
|
<div class="box-left">
|
|
<div style="width: 100%; display: flex; position: relative">
|
|
<div class="border-card"></div>
|
|
<span style="margin-left: 24px; color: #333333">联系人名单</span>
|
|
</div>
|
|
<img
|
|
style="width: 100%; height: 2px"
|
|
src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" />
|
|
<a-input-search
|
|
v-model:value="searchValue"
|
|
style="margin-bottom: 8px"
|
|
placeholder="请输入关键字" />
|
|
<img
|
|
style="width: 100%; height: 2px"
|
|
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
|
|
v-model:selectedKeys="selectedKeys"
|
|
v-model:expandedKeys="expandedKeys"
|
|
:tree-data="deptTreeData"
|
|
@select="onSelect"
|
|
/></div>
|
|
</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="realName"
|
|
style="margin-bottom: 8px; width: 280px; position: absolute; right: 20px"
|
|
placeholder="请输入"
|
|
allowClear="true"
|
|
@search="onSearch" />
|
|
</div>
|
|
<img
|
|
style="width: 100%; height: 2px"
|
|
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: 450px; overflow-y: auto; padding: 12px 0">
|
|
<a-table
|
|
:row-selection="{
|
|
selectedRowKeys: selectedRowKey,
|
|
preserveSelectedRowKeys: true,
|
|
onChange: onSelectChange,
|
|
}"
|
|
:columns="columns"
|
|
:loading="loading"
|
|
:data-source="dataSource"
|
|
:rowKey="(record: any) => record.userId"
|
|
:pagination="pagination"
|
|
:bordered="true"
|
|
:size="'middle'">
|
|
<template #bodyCell="{ record, column }">
|
|
<template v-if="column.dataIndex === 'address'">
|
|
{{ record.userRoleInfos?.[0].deptRoleInfoList }}
|
|
</template>
|
|
</template>
|
|
</a-table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { ref, watch, computed } from 'vue';
|
|
import { defineComponent } from 'vue';
|
|
import type { TreeProps } from 'ant-design-vue';
|
|
import { origanizemanage } from '/@/api/origanizemanage';
|
|
import { department } from '/@/api/origanizemanage';
|
|
|
|
import { http } from '/nerv-lib/util';
|
|
// import { editTreeConfig } from './config';
|
|
//搜索存储
|
|
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: node.title });
|
|
if (node.children) {
|
|
generateList(node.children);
|
|
}
|
|
}
|
|
};
|
|
const getParentKey = (
|
|
key: string | number,
|
|
tree: TreeProps['treeData'],
|
|
): string | number | undefined => {
|
|
let parentKey;
|
|
for (let i = 0; i < tree.length; i++) {
|
|
const node = tree[i];
|
|
if (node.children) {
|
|
if (node.children.some((item) => item.key === key)) {
|
|
parentKey = node.key;
|
|
} else if (getParentKey(key, node.children)) {
|
|
parentKey = getParentKey(key, node.children);
|
|
}
|
|
}
|
|
}
|
|
return parentKey;
|
|
};
|
|
export default defineComponent({
|
|
setup(props, { emit }) {
|
|
//组织数
|
|
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 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 = () => {
|
|
pagination.value.current = 1;
|
|
getList();
|
|
};
|
|
const onSelect = (selectedKeys: any, info: any) => {
|
|
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;
|
|
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 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(origanizemanage.userList, {
|
|
pageNum: pagination.value.current,
|
|
pageSize: pagination.value.pageSize,
|
|
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;
|
|
});
|
|
};
|
|
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;
|
|
};
|
|
const pagination = ref({
|
|
total: 0,
|
|
size: 'small',
|
|
current: 1,
|
|
pageSize: 10,
|
|
showQuickJumper: true,
|
|
showLessItems: true,
|
|
// showSizeChanger: true,
|
|
showTotal: (total: number, range: any) =>
|
|
total && range ? `显示第${range[0]}到${range[1]}条记录,共 ${total} 条记录` : '',
|
|
onChange: handleChangePage,
|
|
});
|
|
const columns = [
|
|
{
|
|
title: '序号',
|
|
dataIndex: 'index',
|
|
customRender: (text: any) => {
|
|
return text.index + 1;
|
|
},
|
|
},
|
|
{
|
|
title: '姓名',
|
|
dataIndex: 'realName',
|
|
},
|
|
{
|
|
title: '性别',
|
|
dataIndex: 'sex',
|
|
},
|
|
{
|
|
title: '组织关系',
|
|
dataIndex: 'orgName',
|
|
},
|
|
{
|
|
title: '部门 ',
|
|
dataIndex: 'address',
|
|
},
|
|
];
|
|
const handleOk = () => {
|
|
// 处理确定按钮的逻辑
|
|
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;
|
|
//获取列表
|
|
getList();
|
|
//获取树
|
|
getTreeData();
|
|
};
|
|
const show = ref(false);
|
|
const handleCancel = () => {
|
|
// 处理取消按钮的逻辑
|
|
pagination.value.current = 1;
|
|
realName.value = null;
|
|
emit('handleCancel', null);
|
|
show.value = false;
|
|
};
|
|
watch(searchValue, (value) => {
|
|
const expanded = dataList
|
|
.map((item: TreeProps['treeData'][number]) => {
|
|
if (item.title.indexOf(value) > -1) {
|
|
console.log(item.title.indexOf(value));
|
|
return getParentKey(item.key, deptTreeData.value);
|
|
}
|
|
return null;
|
|
})
|
|
.filter((item, i, self) => item && self.indexOf(item) === i);
|
|
expandedKeys.value = expanded;
|
|
searchValue.value = value;
|
|
autoExpandParent.value = true;
|
|
});
|
|
return {
|
|
columns,
|
|
realName,
|
|
orgId,
|
|
processDepartmentTree,
|
|
onSearch,
|
|
getList,
|
|
loading,
|
|
dataSource,
|
|
onSelect,
|
|
deptTreeData,
|
|
selectedRow,
|
|
selectedRowKey,
|
|
autoExpandParent,
|
|
expandedKeys,
|
|
selectedKeys,
|
|
onSelectChange,
|
|
pagination,
|
|
handleOk,
|
|
show,
|
|
getData,
|
|
getTreeData,
|
|
getDepartList,
|
|
searchValue,
|
|
deviceName,
|
|
handleCancel,
|
|
selectDeptId,
|
|
selectOrgId,
|
|
};
|
|
},
|
|
});
|
|
</script>
|
|
<style scoped lang="less">
|
|
.border-card {
|
|
border-width: 0px;
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 5px;
|
|
width: 5px;
|
|
height: 15px;
|
|
background: inherit;
|
|
background-color: @primary-color;
|
|
border: none;
|
|
border-radius: 5px;
|
|
-moz-box-shadow: none;
|
|
-webkit-box-shadow: none;
|
|
box-shadow: none;
|
|
}
|
|
.box {
|
|
width: 100%;
|
|
height: 500px;
|
|
display: flex;
|
|
.box-left {
|
|
width: 300px;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
padding: 0, 12px;
|
|
gap: 5px;
|
|
}
|
|
.box-right {
|
|
width: calc(100% - 200px);
|
|
height: 100%;
|
|
padding: 0 12px;
|
|
overflow-y: auto;
|
|
}
|
|
}
|
|
</style>
|
|
|