|
|
|
@ -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> |
|
|
|
|
xuziqiang
3 months ago