xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: 企业联调

Browse Source
This commit is contained in:
xuziqiang
2024-06-12 16:41:30 +08:00
parent 8e6abb5c57
commit 680855f310
12 changed files with 1831 additions and 1636 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
hx-ai-intelligent/src/api/origanizemanage.ts
View File

@@ -1,7 +1,7 @@
const BASE_URL = '/carbon-smart';
export enum permission {
add = `${BASE_URL}/admin/permission/save`,
permissionTree = `${BASE_URL}/api/dept/permissionTree`,
permissionTree = `${BASE_URL}/api/dept/QueryOrgPermission`,
}
export enum origanizemanage {

3015
hx-ai-intelligent/src/view/equipmentControl/lightingManage/indexs.vue
View File

File diff suppressed because it is too large Load Diff

3
hx-ai-intelligent/src/view/organizationManage/departmentManage/config.ts
View File

@@ -7,6 +7,7 @@ export const formConfig = (disabled: Boolean) => {
component: 'NsChildForm',
componentProps: {
schemas: [
{ label: '企业名称', field: 'orgName', show: false },
{
label: '部门名称',
field: 'deptName',
@@ -90,6 +91,8 @@ export const formConfig2 = (disabled2: Boolean) => {
component: 'NsChildForm',
componentProps: {
schemas: [
{ label: '部门名称', field: 'deptName', show: false },
{
label: '角色名称',
field: 'zhName',

59
hx-ai-intelligent/src/view/organizationManage/departmentManage/index.vue
View File

@@ -7,19 +7,12 @@
<a-row>
<a-col :span="12" class="tree">
<ns-button style="margin: 10px" type="primary" @click="addApartment">新增部门</ns-button>
<ns-button :disabled="disabled" type="primary" @click="addApartmentSon"
>新增子部门</ns-button
>
<ns-button
:disabled="disabled"
style="margin: 10px"
type="primary"
@click="deleteApartment"
>删除</ns-button
>
<ns-button type="primary" @click="addApartmentSon">新增子部门</ns-button>
<ns-button style="margin: 10px" type="primary" @click="deleteApartment">删除</ns-button>
<a-tree
v-if="apartmentTreeData?.length"
:tree-data="apartmentTreeData"
:checkedKeys="['0-0']"
defaultExpandAll
@select="SelectApartmentTree">
<template #title="data">
@@ -52,7 +45,8 @@
</a-tabs>
<div v-show="activeKey === '1'">
<ns-button style="margin: 16px" type="primary" @click="CancelApartment">取消</ns-button>
<ns-button type="primary" :disabled="disabled" @click="ApartmentSure">确定</ns-button>
<ns-button v-show="disabled" type="primary" @click="deptEdit">编辑</ns-button>
<ns-button v-show="!disabled" type="primary" @click="ApartmentSure">确定</ns-button>
</div>
<div v-show="activeKey === '2'">
<ns-button style="margin-left: 16px" type="primary" @click="apartmentPermission"
@@ -104,7 +98,12 @@
</a-tabs>
<div v-show="activeKey2 === '1'">
<ns-button style="margin: 16px" type="primary" @click="CancelUser">取消</ns-button>
<ns-button type="primary" :disabled="disabled2" @click="UserSure"> 确定</ns-button>
<ns-button v-show="disabled2" type="primary" :disabled="disabled2" @click="UserSure">
确定</ns-button
>
<ns-button v-show="!disabled2" type="primary" :disabled="disabled2" @click="UserSure">
确定</ns-button
>
</div>
<div v-show="activeKey2 === '2'">
<ns-button style="margin: 16px" type="primary" @click="rolePermission"> 确定</ns-button>
@@ -143,12 +142,10 @@
const selectRef2 = ref();
const formSchema = formConfig(disabled as any);
const formSchema2 = formConfig2(disabled2 as any);
const orgId = JSON.parse(sessionStorage.getItem('userInfo')).orgId;
const projectId = JSON.parse(sessionStorage.getItem('userInfo')).projectId;
const { orgId, orgName, projectId } = JSON.parse(sessionStorage.getItem('userInfo'));
const userAdminTreeData = ref([]);
const apartmentTreeData = ref([]);
const apartmentAdminTreeData = ref([]);
const userTreeData = ref([]);
const getPermissionTree = (params) => {
return http.post(permission.permissionTree, params).then((res) => {
@@ -157,7 +154,7 @@
});
};
getPermissionTree({ projectId });
getPermissionTree({ projectId, orgId });
watch(ApartcheckedKeys, () => {
console.log('checkedKeys', ApartcheckedKeys.value);
@@ -215,6 +212,7 @@
...params,
orgId,
projectId,
orgName,
});
};
return;
@@ -230,6 +228,7 @@
orgId,
projectId,
pdeptId: selectRef.value.deptInfo.deptId,
deptName: selectRef.value.deptInfo.deptName,
});
};
};
@@ -245,6 +244,7 @@
orgId,
projectId,
deptId: selectRef.value.deptInfo.deptId,
deptName: selectRef.value.deptInfo.deptName,
});
};
};
@@ -261,6 +261,7 @@
projectId,
proleId: selectRef2.value.roleId,
deptId: selectRef.value.deptInfo.deptId,
deptName: selectRef.value.deptInfo.deptName,
});
};
};
@@ -374,17 +375,27 @@
};
};
// 部门编辑
const deptEdit = () => {
disabled.value = false;
apartmentChoose();
};
// 部门选择
const SelectApartmentTree = (selectedKeys: any, info: any) => {
console.log(selectedKeys, info);
const { selected } = info;
disabled.value = !selected;
console.log(info, 'info');
selectKey.value = selectedKeys[0];
// disabled.value = !selected;
if (!selectedKeys?.length) return;
selectKey.value = [info.node.key];
selectRef.value = info.node.dataRef;
formData.value = cloneDeep(info.node.dataRef.deptInfo);
apartmentChoose();
ApartcheckedKeys.value.splice(0);
getDeptPermission();
formData.value = cloneDeep(info.node.dataRef.deptInfo);
// getUserTree({ deptId: selectRef.value.deptInfo.deptId });
};
@@ -434,10 +445,6 @@
};
const ApartmentSure = () => {
// formRef.value?.triggerSubmit().then(() => {});
// disabled.value = !disabled.value;
// console.log(formData.value.name, 'formData');
console.log(opMap.type, 'ApartmentSure');
const opArr = ['addDept', 'editDpet', 'addson'];
if (opArr.includes(opMap.type)) {
@@ -445,6 +452,7 @@
opMap.fuc &&
opMap.fuc(formData.value).then(() => {
getTree();
disabled.value = true;
});
} else if (opMap.type === 'deptDelete') {
opMap.fuc && opMap.fuc({ ...formData.value, selectRef: selectRef.value });
@@ -504,6 +512,7 @@
formRef,
apartmentPermission,
rolePermission,
deptEdit,
};
},
});

2
hx-ai-intelligent/src/view/organizationManage/usermanage/index.vue
View File

@@ -390,7 +390,7 @@
confirm: true,
handle: ({ userId }: any) => {
http
.post(origanizemanage.resetPwd, { userId })
.post(origanizemanage.resetPwd, { userId, password: 123456 })
.then(() => NsModal.success({ content: '密码重置成功,初始密码123456' }));
},
},

2
hx-op/index.html
View File

@@ -10,7 +10,7 @@
securityJsCode: '09e43004c09d39c0e61f8fd65d5e6a5a',
};
</script> -->
<title>AI智能BAS系统</title>
<title>op端</title>
</head>
<body>
<div id="app"></div>

8
hx-op/src/api/origanizemanage.ts
View File

@@ -9,6 +9,10 @@ export enum enterPrise {
getArea = `${BASE_URL}/system/queryAddressTree`,
freeze = `${BASE_URL}/admin/org/freeze`,
getCode = `${BASE_URL}/admin/org/getCode`,
queryRootAc = `${BASE_URL}/admin/org/queryRootAc`,
permissionTree = `${BASE_URL}/api/dept/permissionTree`,
queryRootAc = `${BASE_URL}/api/user/queryRootAc`,
orgPermission = `${BASE_URL}/admin/org/OrgPermission`,
permissionTree = `${BASE_URL}/admin/permission/permissionTree`,
queryOrgPermission = `${BASE_URL}/admin/org/QueryOrgPermission`,
queryOrgTree = `${BASE_URL}/admin/org/QueryLinkOrgTree`,
resetPwd = `${BASE_URL}/api/user/resetPwd`,
}

9
hx-op/src/util/generateRandomString.ts Normal file
View File

@@ -0,0 +1,9 @@
export function generateRandomString(length: number) {
let result = '';
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
const charactersLength = characters.length;
for (let i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}

38
hx-op/src/view/organizationManage/enterpriseManage/TreeAdd.vue
View File

@@ -1,14 +1,16 @@
<template>
<a-modal title="企业信息" :width="600" v-model:visible="visible" @ok="handleOk">
<a-modal title="企业信息" :width="500" v-model:visible="visible" @ok="handleOk">
<ns-form ref="formRef" :schemas="formSchema" :model="formData" formLayout="vertical" />
</a-modal>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { enterPrise } from '/@/api/origanizemanage';
export default defineComponent({
name: 'AddBorderVisible',
setup() {
emits: ['ok'],
setup(props, { emit }) {
let formData = ref({});
const formRef = ref();
const visible = ref(false);
@@ -17,30 +19,40 @@
};
const formSchema = reactive([
{
field: 'name',
label: '企业名称',
component: 'NsInput',
field: 'orgId',
label: '组织名称',
component: 'NsSelectApi',
componentProps: {
placeholder: '请输入企业名称',
maxLength: 20,
api: enterPrise.list,
params: {
pageNum: 0,
pageSize: 999,
},
getPopupContainer: (triggerNode: any) =>
triggerNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode
.parentNode,
resultField: 'data.records',
labelField: 'orgName',
valueField: 'orgId',
immediate: true,
placeholder: '请选择',
},
rules: [
{
required: true,
message: '请输入企业名称',
trigger: 'blur',
},
],
},
{
field: 'Isshare',
field: 'point',
label: '点位数据',
component: 'NsRadioGroup',
componentProps: {
radioType: 'radio',
options: [
{ label: '分享', value: 1 },
{ label: '不分享', value: 2 },
{ label: '分享', value: 0 },
{ label: '不分享', value: 1 },
],
},
rules: [
@@ -54,8 +66,8 @@
},
]);
const handleOk = () => {
formRef.value?.triggerSubmit().then(() => {
toggle();
formRef.value?.triggerSubmit().then((res) => {
emit('ok', res);
});
};
return { handleOk, formData, formSchema, visible, toggle, formRef };

114
hx-op/src/view/organizationManage/enterpriseManage/config.ts
View File

@@ -1,16 +1,18 @@
import { mockData } from './mock';
import { cloneDeep } from 'lodash-es';
import { Modal, message } from 'ant-design-vue';
import { createVNode, ref } from 'vue';
import { NsMessage } from '/nerv-lib/component';
import { createVNode, nextTick, ref } from 'vue';
import { NsMessage, NsModal } from '/nerv-lib/component';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { enterPrise } from '/@/api/origanizemanage';
import { http } from '/nerv-lib/util/http';
import { generateRandomString } from '/@/util/generateRandomString';
type status = 'NORMAL' | 'FREEZE';
export const formConfig = [
{
field: 'orgId',
label: '企业ID',
label: '组织ID',
component: 'NsInput',
show: false,
},
@@ -29,7 +31,7 @@ export const formConfig = [
},
{
field: 'orgName',
label: '企业名称',
label: '组织名称',
component: 'NsInput',
componentProps: {
placeholder: '请输入',
@@ -112,6 +114,55 @@ export const formConfig = [
},
];
const handle = async (record: any) => {
const { orgName, orgId } = record;
const res = await http.post(enterPrise.queryRootAc, {
orgId,
});
const { accountNo, userId } = res.data[0];
NsModal.confirm({
title: '重置密码',
icon: createVNode(ExclamationCircleOutlined),
okText: '重置',
content: createVNode('div', {}, [
createVNode('p', {}, `组织名称: ${orgName}`),
createVNode('p', {}, `管理员账号: ${accountNo}`),
]),
onOk() {
NsModal.confirm({
title: '重置密码',
icon: createVNode(ExclamationCircleOutlined),
content: '是否确认重置该组织管理员密码',
onOk() {
const password = generateRandomString(6);
http.post(enterPrise.resetPwd, { userId, password }).then(() => {
NsModal.success({
okText: '确认',
content: createVNode('div', {}, [
createVNode('p', {}, '重置成功'),
createVNode('p', {}, '点击【确认】后自动复制密码并离开'),
]),
onOk: () => {
try {
navigator.clipboard.writeText(password);
NsMessage.success('复制成功');
} catch (err) {
console.error('复制失败', err);
}
},
});
});
},
});
},
onCancel() {
console.log('Cancel');
},
});
};
export const tableConfig = ({
visible,
formData,
@@ -119,10 +170,11 @@ export const tableConfig = ({
getOrgRandomCode,
borderVisible,
serviceVisible,
server: { getTree },
server: { getTree, currentServerRecord, getPermissionData },
boundary: { getBoundaryTree, currentBoundaryRecord },
}: any) => {
return {
// title: '企业管理',
// title: '组织管理',
api: enterPrise.list,
headerActions: [
{
@@ -216,16 +268,23 @@ export const tableConfig = ({
label: '组织边界',
handle: (record: any) => {
console.log(record, 'record');
borderVisible.value = true;
const { orgId, orgName } = (currentBoundaryRecord.value = record);
getBoundaryTree({ orgId, orgName });
nextTick(() => {
borderVisible.value = true;
});
},
},
{
label: '服务',
handle: (record: any) => {
console.log(record, 'record');
const { projectId } = record;
getTree({ projectId: 'beijingDQ' });
serviceVisible.value = true;
const { orgId } = (currentServerRecord.value = record);
opType.value = 'serverAdd';
// getTree({});
getPermissionData({ orgId });
nextTick(() => {
serviceVisible.value = true;
});
},
},
{
@@ -255,38 +314,7 @@ export const tableConfig = ({
{
label: '重置密码',
name: 'RoleTypeEdit',
handle: (record: any) => {
console.log(record, 'record');
Modal.confirm({
title: '重置密码',
icon: createVNode(ExclamationCircleOutlined),
okText: '重置',
content: h('div', {}, [
h('p', `企业名称: ${record.jituanname}`),
h('p', '管理员账号: hxdtadmin'),
]),
onOk() {
Modal.confirm({
icon: createVNode(ExclamationCircleOutlined),
content: '是否确认重置该企业管理员密码',
onOk() {
Modal.success({
okText: '确认',
content: h('div', {}, [
h('p', '重置成功'),
h('p', '点击【确认】后自动复制密码并离开'),
]),
});
},
});
},
onCancel() {
console.log('Cancel');
},
class: 'test',
});
},
handle,
},
{
label: '删除',

214
hx-op/src/view/organizationManage/enterpriseManage/index.vue
View File

@@ -9,36 +9,33 @@
<ns-button type="primary" @click="operateForm" :disabled="!formDisabled">确定</ns-button>
</template>
</ns-drawer>
<ns-drawer
:width="600"
:visible="borderVisible"
:body-style="{ paddingBottom: '80px' }"
:footer-style="{ textAlign: 'right' }"
destroyOnClose
@close="onClose">
<ns-drawer v-bind="boundaryDrawer">
<ns-button type="primary" @click="borderAdd">新增</ns-button>
<ns-button type="primary" style="margin-left: 10px; margin-bottom: 10px" @click="borderAddSon"
<ns-button type="primary" style="margin-left: 10px; margin-bottom: 10px" @click="borderAdd"
>新增子集</ns-button
>
<a-directory-tree @select="handleSelect" multiple :tree-data="treeData">
<template #title="{ title, key }">
{{ title }}
<ns-button type="link" @click="editTree(title, key)">编辑</ns-button>
<ns-button type="link" danger @click="deleteTree(title, key)">删除</ns-button>
<a-tree v-if="linkTree?.length" v-bind="boundaryTree" class="boundaryTree">
<template #title="data">
<span>{{ data.orgInfo.orgName }}</span>
<!-- <ns-button type="link" danger >删除</ns-button> -->
<span v-if="data.orgInfo.orgId !== currentBoundaryRecord.orgId" class="nodeDelete">
<DeleteOutlined @click="deleteTree(data)"
/></span>
</template>
</a-directory-tree>
</a-tree>
</ns-drawer>
<ns-drawer v-bind="serverDrawer">
<ns-input-search
<!-- <ns-input-search
placeholder="请选择开通模块"
v-model:value="searchValue"
style="margin-bottom: 8px"
@search="onSearch" />
@search="onSearch" /> -->
<a-tree v-if="treeData?.length" v-model:checkedKeys="checkedKeys" v-bind="serverTree" />
</ns-drawer>
<TreeAdd ref="treeAdd" />
<TreeAdd ref="treeAdd" @ok="handleOk" />
</template>
<script lang="ts" setup>
import { Modal } from 'ant-design-vue';
@@ -46,10 +43,10 @@
import { http } from '/nerv-lib/util/http';
import { cloneDeep } from 'lodash-es';
import TreeAdd from './TreeAdd.vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { DeleteOutlined } from '@ant-design/icons-vue';
import { h } from 'vue';
import { formConfig } from './config';
import { NsMessage } from '/nerv-lib/component';
import { NsMessage, NsModal } from '/nerv-lib/component';
import { mockData, treeData } from './mock';
import { enterPrise } from '/@/api/origanizemanage';
import { tableConfig as insertConfig } from './config';
@@ -69,14 +66,31 @@
const serviceVisible = ref(false);
const treeAddVisible = ref(false);
const formSchema = formConfig;
const currentServerRecord = ref({});
const currentBoundaryRecord = ref({});
const currentSelectBoundaryNode = ref({});
const linkTree = ref([]);
const totalCheckedKeys = ref([]);
const opType = ref<string>('add');
const calMap = {
add: enterPrise.save,
edit: enterPrise.edit,
serverAdd: enterPrise.orgPermission,
};
const comApi = computed(() => {
return calMap[opType.value as keyof typeof calMap];
});
// 公共请求方法，包含tablereload，drawerclose
const fetch = (params, isReload = true) => {
http.post(comApi.value, params).then(() => {
NsMessage.success('操作成功');
onClose();
isReload && mainRef.value?.nsTableRef.reload();
});
};
// 表格配置
const tableConfig = computed(() => {
return insertConfig({
visible,
@@ -87,21 +101,31 @@
serviceVisible,
server: {
getTree,
currentServerRecord,
getPermissionData,
},
boundary: {
getBoundaryTree,
currentBoundaryRecord,
},
});
});
// 随机组织id
const getOrgRandomCode = () => {
http.post(enterPrise.getCode).then((res) => {
formData.value.orgCode = res.data;
});
};
getOrgRandomCode();
// getOrgRandomCode();
// 公共关闭及后续处理逻辑
const onClose = () => {
visible.value = false;
borderVisible.value = false;
serviceVisible.value = false;
checkedKeys.value = [];
linkTree.value = [];
};
// 企业表单drawer
@@ -113,6 +137,7 @@
onClose: onClose,
});
// 表单form配置
const formDisabled = computed(() => {
return formRef.value?.validateResult;
});
@@ -121,62 +146,138 @@
const operateForm = () => {
formRef.value?.triggerSubmit().then((res) => {
console.log(formData.value, 'formData.value');
http.post(comApi.value, res).then(() => {
NsMessage.success('操作成功');
visible.value = false;
mainRef.value?.nsTableRef.reload();
});
fetch(res);
});
};
// 服务操作逻辑区域
const serverOK = () => {
serviceVisible.value = false;
const params = {
orgId: currentServerRecord.value?.orgId,
orgName: currentServerRecord.value?.orgName,
permissionVoList: totalCheckedKeys.value,
};
fetch(params, false);
};
const ServiceSelect = (selectedKeys: any, info: any) => {
console.log(selectedKeys, 'selectedKeys');
console.log(info, 'info');
};
// 服务树配置
const serverTree = ref({
checkable: true,
selectable: false,
onSelect: ServiceSelect,
defaultExpandAll: true,
treeData: treeData,
fieldNames: { children: 'menus', title: 'label', key: 'code' },
onCheck: (checked, { halfCheckedKeys }) => {
const result = checked.map((item) => {
return {
halfCheck: false,
permissionId: item,
};
});
const finalResult = halfCheckedKeys
.map((item) => {
return {
halfCheck: true,
permissionId: item,
};
})
.concat(result);
totalCheckedKeys.value = finalResult;
},
});
// 获取服务权限树
const getTree = (params) => {
http.post(enterPrise.permissionTree, params).then((res) => {
treeData.value = res.data.data;
return http.post(enterPrise.permissionTree, params).then((res) => {
treeData.value = res.data?.data;
});
};
getTree({});
// 获取当前企业拥有的权限数据
const getPermissionData = (params) => {
http.post(enterPrise.queryOrgPermission, params).then((res) => {
checkedKeys.value = res.data
?.filter((item) => !item.halfCheck)
.map((item) => {
return item.permissionId;
});
});
};
// 开通服务模块drawer
const serverDrawer = ref({
width: '450',
width: 520,
visible: serviceVisible,
footerStyle: { textAlign: 'right' },
destroyOnClose: true,
ok: serverOK,
onClose: onClose,
cancel: onClose,
});
// drawer form
const opMap: any = {
type: 'add',
fuc: () => {},
record: {},
};
watch(checkedKeys, () => {
console.log('checkedKeys', checkedKeys.value);
// 边界drawer配置
const boundaryDrawer = ref({
width: 520,
visible: borderVisible,
footerStyle: { textAlign: 'right' },
destroyOnClose: true,
ok: onClose,
onClose,
cancel: onClose,
});
const handleSelect = (selectedKeys: any, info: any) => {
console.log(selectedKeys, 'selectedKeys');
console.log(info, 'info');
currentSelectBoundaryNode.value = info;
};
// 获取边界树
const getBoundaryTree = (params) => {
http.post(enterPrise.queryOrgTree, params).then((res) => {
const otherOrg = res.data[0].listOrg;
linkTree.value = res.data;
otherOrg?.map((item) => {
linkTree.value.push({ orgInfo: item } as never);
});
});
};
// 边界树配置
const boundaryTree = ref({
defaultExpandAll: true,
onSelect: handleSelect,
treeData: linkTree,
// blockNode: true,
});
// 新增边界
const handleOk = (res) => {
const params = {
...res,
linkOrgVoList: [
{
linkOrgId: res.orgId,
point: res.point,
type: 1, //1子集 2 关联
},
],
orgId: currentBoundaryRecord.value.orgId || '',
};
http.post(enterPrise.link, params).then(() => {
treeAdd.value?.toggle();
NsMessage.success('操作成功');
getBoundaryTree({
orgId: currentBoundaryRecord.value.orgId,
orgName: currentBoundaryRecord.value.orgName,
});
});
};
const borderAdd = () => {
treeAddVisible.value = true;
treeAdd.value?.toggle();
@@ -191,14 +292,19 @@
console.log(key, 'key');
};
const deleteTree = (title: any, key: any) => {
console.log(title, 'title');
console.log(key, 'key');
Modal.confirm({
const deleteTree = (node: any) => {
console.log(node, 'node');
NsModal.confirm({
title: '是否确定删除',
icon: createVNode(ExclamationCircleOutlined),
content: createVNode('div', { style: 'color:red;' }, ''),
onOk() {
const flag = !!node?.children?.length;
if (flag) {
NsMessage.error('请先删除子集');
return;
}
// http
// .post('/api/parking_merchant/objs/gateInfo/delete', {
// uuid: record.uuid,
@@ -218,3 +324,21 @@
console.log(searchValue.value);
};
</script>
<style lang="less" scoped>
.nodeDelete {
// display: none;
margin-left: 40px;
}
.boundaryTree {
background-color: red !important;
}
:deep(.ant-tree) {
background-color: red !important;
// &:hover {
.nodeDelete {
display: block;
}
// }
}
</style>

1
lib/component/drawer/drawer.vue
View File

@@ -29,6 +29,7 @@
console.log(props, getCurrentInstance());
const getBindValue = computed(() => ({
getContainer: (triggerNode: any) => triggerNode.parentNode,
...attrs,
...props,
}));