feat: 企业联调

hx-op/src/view/organizationManage/enterpriseManage/index.vue

@@ -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>