feat: 部门样式调整

hx-ai-intelligent/src/view/equipmentManage/group/config.ts

@@ -48,6 +48,10 @@ export const tableConfig = (el, elGroup, elFormula) => {
     value: mockData.value,
     treeConfig: {
       defaultExpandAll: true,
+      header: {
+        icon: 'orgLink',
+        title: '分组管理',
+      },
       api: () => {
         return new Promise((resolve) => {
           setTimeout(() => {

hx-ai-intelligent/src/view/equipmentManage/ledger/config.ts

@@ -5,6 +5,10 @@ export const tableConfig = {
   // api: '/carbon_emission/device/getDeviceList',
   value: data.dataSource,
   treeConfig: {
+    header: {
+      icon: 'orgLink',
+      title: '设备类别',
+    },
     defaultExpandAll: true,
     api: () => {
       return new Promise((resolve) => {

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

@@ -3,110 +3,151 @@
 <template>
   <div class="main">
     <div class="left">
-      <div class="ns-table-title">部门管理</div>
+      <div class="ns-table-title ns-title-extra-box">部门管理</div>
       <a-row>
-        <a-col :span="12" class="tree">
-          <ns-button style="margin: 10px" type="primary" @click="pipe(addApartment)">
-            新增部门
-          </ns-button>
-          <ns-button type="primary" @click="pipe(addApartmentSon, true)">新增子部门</ns-button>
-          <ns-button style="margin: 10px" type="primary" @click="pipe(deleteDept, true)">
-            删除
-          </ns-button>
+        <a-col :span="8" class="tree">
           <a-tree
+            ref="treeRef"
             v-if="deptTreeData?.length"
             :tree-data="deptTreeData"
             :selectedKeys="deptTreeSelectedKeys"
+            blockNode
             defaultExpandAll
             @select="SelectApartmentTree">
             <template #title="data">
-              {{ data.deptInfo?.deptName }}
+              <div style="display: flex; justify-content: space-between; align-items: center">
+                <span>{{ data.deptInfo?.deptName }}</span>
+                <a-dropdown>
+                  <ns-icon name="actionMore" size="14" class="actionMore" />
+                  <template #overlay>
+                    <a-menu>
+                      <a-menu-item
+                        v-for="(action, index) in filterAction(data, dropActions)"
+                        :key="index"
+                        @click="action.func(data)">
+                        <span>{{ action.title }}</span>
+                      </a-menu-item>
+                    </a-menu>
+                  </template>
+                </a-dropdown>
+              </div>
             </template>
           </a-tree>
+          <a-empty style="margin-top: 120px" v-else />
         </a-col>
-        <a-col :span="12" class="list">
-          <a-tabs v-model:activeKey="activeKey">
-            <a-tab-pane :key="1" tab="部门信息">
-              <ns-form
-                ref="formRef"
-                :schemas="formSchema"
-                :wrapperCol="{ span: 18 }"
-                :model="formData"
-                formLayout="vertical"
-                class="form" />
-            </a-tab-pane>
-            <a-tab-pane :key="2" :disabled="selectRef?.hasOwnProperty('orgInfo')" tab="部门权限">
-              <a-tree
-                v-if="deptPermissionTreeData?.length"
-                :tree-data="deptPermissionTreeData"
-                :fieldNames="{ children: 'menus', title: 'label', key: 'permissionId' }"
-                v-model:checkedKeys="deptcheckedKeys"
-                checkable
-                :selectable="false"
-                defaultExpandAll
-                @check="deptCheck">
-                <template #title="data"> {{ data.label }}</template>
-              </a-tree>
-            </a-tab-pane>
-          </a-tabs>
-          <ns-button style="margin: 16px" type="primary" @click="CancelApartment">取消 </ns-button>
-          <ns-button v-show="disabled" type="primary" @click="pipe(deptEdit, true, false)"
-            >编辑</ns-button
-          >
-          <ns-button v-show="!disabled" type="primary" @click="deptSure">确定</ns-button>
+        <a-col :span="16" class="list">
+          <div class="pane">
+            <a-tabs v-model:activeKey="activeKey">
+              <a-tab-pane :key="1" tab="部门信息">
+                <ns-form
+                  ref="formRef"
+                  :schemas="formSchema"
+                  :wrapperCol="{ span: 19 }"
+                  :labelCol="{ span: 5 }"
+                  :model="formData"
+                  formLayout="vertical"
+                  class="form" />
+              </a-tab-pane>
+              <a-tab-pane :key="2" :disabled="selectRef?.hasOwnProperty('orgInfo')" tab="部门权限">
+                <a-tree
+                  v-if="deptPermissionTreeData?.length"
+                  :tree-data="deptPermissionTreeData"
+                  :fieldNames="{ children: 'menus', title: 'label', key: 'permissionId' }"
+                  v-model:checkedKeys="deptcheckedKeys"
+                  checkable
+                  :selectable="false"
+                  defaultExpandAll
+                  @check="deptCheck">
+                  <template #title="data"> {{ data.label }}</template>
+                </a-tree>
+                <a-empty style="margin-top: 120px" v-else />
+              </a-tab-pane>
+            </a-tabs>
+            <a-space v-if="activeKey === 1 || deptPermissionTreeData?.length">
+              <ns-button type="primary" @click="CancelApartment">取消 </ns-button>
+              <ns-button v-show="disabled" type="primary" @click="pipe(deptEdit, true, false)">
+                编辑
+              </ns-button>
+              <ns-button v-show="!disabled" type="primary" @click="deptSure">确定</ns-button>
+            </a-space>
+          </div>
         </a-col>
       </a-row>
     </div>
     <div class="right">
-      <div class="ns-table-title">角色管理</div>
+      <div class="ns-table-title ns-title-extra-box">角色管理</div>
       <a-row>
-        <a-col :span="12" class="tree">
-          <ns-button style="margin: 10px" type="primary" @click="rolePipe(addUser, true)">
-            新增角色
-          </ns-button>
-          <ns-button type="primary" @click="rolePipe(addUserSon)">新增子角色</ns-button>
-          <ns-button style="margin: 10px" type="primary" @click="rolePipe(deleteUser)">
-            删除
-          </ns-button>
+        <a-col :span="8" class="tree">
+          <a-space wrap style="margin-bottom: 16px">
+            <ns-button type="primary" @click="rolePipe(addUser, true)"> 新增角色 </ns-button>
+            <ns-button type="primary" @click="rolePipe(addUserSon)">新增子角色</ns-button>
+            <ns-button type="primary" @click="rolePipe(deleteUser)"> 删除 </ns-button>
+          </a-space>
           <a-tree
             v-if="roleTreeData.length"
             :tree-data="roleTreeData"
             :selectedKeys="roleTreeSelectedKeys"
+            blockNode
             defaultExpandAll
             @select="SelectUserTree">
             <template #title="data">
-              {{ data.zhName }}
+              <div style="display: flex; justify-content: space-between; align-items: center">
+                <span> {{ data.zhName }}</span>
+                <!-- <a-dropdown>
+                  <ns-icon name="actionMore" size="14" class="actionMore" />
+                  <template #overlay>
+                    <a-menu>
+                      <a-menu-item
+                        v-for="(action, index) in dropRoleActions"
+                        :key="index"
+                        @click="action.func(data)">
+                        <span>{{ action.title }}</span>
+                      </a-menu-item>
+                    </a-menu>
+                  </template>
+                </a-dropdown> -->
+              </div>
             </template>
           </a-tree>
+          <a-empty style="margin-top: 120px" v-else />
         </a-col>
-        <a-col :span="12" class="list">
-          <a-tabs v-model:activeKey="roleActiveKey">
-            <a-tab-pane :key="1" tab="角色信息">
-              <ns-form
-                ref="formRoleRef"
-                :schemas="formSchema2"
-                :model="roleFormData"
-                :wrapperCol="{ span: 18 }"
-                formLayout="vertical"
-                class="form" />
-            </a-tab-pane>
-            <a-tab-pane :key="2" tab="角色权限">
-              <a-tree
-                v-if="rolePermissionTreeData?.length"
-                :tree-data="rolePermissionTreeData"
-                v-model:checkedKeys="roleCheckedKeys"
-                defaultExpandAll
-                :fieldNames="{ children: 'menus', title: 'label', key: 'permissionId' }"
-                :selectable="false"
-                checkable
-                @check="roleCheck" />
-            </a-tab-pane>
-          </a-tabs>
-          <ns-button style="margin: 16px" type="primary" @click="CancelUser">取消</ns-button>
-          <ns-button v-show="roleDisabled" type="primary" @click="rolePipe(roleEdit, false, false)">
-            编辑
-          </ns-button>
-          <ns-button v-show="!roleDisabled" type="primary" @click="roleSure"> 确定 </ns-button>
+        <a-col :span="16" class="list">
+          <div class="pane">
+            <a-tabs v-model:activeKey="roleActiveKey">
+              <a-tab-pane :key="1" tab="角色信息">
+                <ns-form
+                  ref="formRoleRef"
+                  :schemas="formSchema2"
+                  :model="roleFormData"
+                  :labelCol="{ span: 5 }"
+                  :wrapperCol="{ span: 19 }"
+                  formLayout="vertical"
+                  class="form" />
+              </a-tab-pane>
+              <a-tab-pane :key="2" tab="角色权限">
+                <a-tree
+                  v-if="rolePermissionTreeData?.length"
+                  :tree-data="rolePermissionTreeData"
+                  v-model:checkedKeys="roleCheckedKeys"
+                  defaultExpandAll
+                  :fieldNames="{ children: 'menus', title: 'label', key: 'permissionId' }"
+                  :selectable="false"
+                  checkable
+                  @check="roleCheck" />
+                <a-empty style="margin-top: 120px" v-else />
+              </a-tab-pane>
+            </a-tabs>
+            <a-space v-if="activeKey === 1 || rolePermissionTreeData?.length">
+              <ns-button type="primary" @click="CancelUser">取消</ns-button>
+              <ns-button
+                v-show="roleDisabled"
+                type="primary"
+                @click="rolePipe(roleEdit, false, false)">
+                编辑
+              </ns-button>
+              <ns-button v-show="!roleDisabled" type="primary" @click="roleSure"> 确定 </ns-button>
+            </a-space>
+          </div>
         </a-col>
       </a-row>
     </div>
@@ -174,8 +215,6 @@
 
   /**操作拦截 */
   const pipe = (func: Function, flag = false, toggle = true) => {
-    console.log(selectRef.value);
-
     if (toggle) activeKey.value = 1;
     if (flag) {
       // 只有部门的操作
@@ -237,6 +276,14 @@
   };
 
   getPermissionTree({ projectId, orgId });
+  // 选中自己的第一个部门
+  const initDept = () => {
+    if (!deptTreeData.value?.length || !deptTreeData.value[0]?.children?.length) return;
+    const info = {
+      node: { key: '0-0-0', dataRef: { deptInfo: deptTreeData.value[0]?.children[0].deptInfo } },
+    };
+    SelectApartmentTree(['0-0-0'], info);
+  };
 
   // 部门树
   const getDepartList = (params) => {
@@ -255,6 +302,7 @@
   };
   getDepartList({ orgId }).then((res) => {
     deptTreeData.value = res;
+    initDept();
   });
 
   // 获取部门树
@@ -267,14 +315,24 @@
 
   // 获取角色树
   const getUserTree = (params = { deptId: selectRef.value?.deptInfo?.deptId }) => {
-    http.post(department.queryRoleTree, params).then((res) => {
+    return http.post(department.queryRoleTree, params).then((res) => {
       roleTreeData.value = res.data;
     });
   };
   // 根据依赖刷新角色树
   watchEffect(() => {
     if (selectRef.value) {
-      getUserTree();
+      getUserTree().then(() => {
+        return;
+        if (!roleTreeData.value?.length) {
+          selectRoleRef.value = {};
+          roleFormData.value = {};
+        }
+        const info = {
+          node: { key: '0-0', dataRef: { ...roleTreeData.value[0] } },
+        };
+        SelectUserTree(['0-0'], info);
+      });
     }
   });
 
@@ -285,26 +343,28 @@
     callback: null,
   };
 
-  const addApartment = () => {
+  const addApartment = (data) => {
+    const { deptInfo } = data;
+
     disabled.value = false;
     opMap.type = 'addDept';
     formData.value = {};
     let sourceOrgId = '';
-    if (!currentOrgRef.value.own) {
+    if (deptInfo.orgId !== orgId) {
+      // 此处为给关联企业加部门
       sourceOrgId = orgId;
     }
     opMap.fuc = (params) => {
       return formRef.value.triggerSubmit().then(() => {
         return http.post(department.deptSave, {
           ...params,
-          orgId: selectRef.value.deptInfo?.orgId,
+          orgId: deptInfo?.orgId,
           sourceOrgId,
           projectId,
           orgName,
         });
       });
     };
-    return;
   };
 
   const addApartmentSon = () => {
@@ -365,17 +425,22 @@
       });
     };
   };
-  const deleteDept = () => {
+  const deleteDept = (data) => {
+    console.log(data);
+
     // 删除逻辑
     Modal.confirm({
       title: '是否确认删除',
       onOk() {
-        http.post(department.deptDel, { deptId: selectRef.value.deptInfo.deptId }).then(() => {
+        http.post(department.deptDel, { deptId: data.deptInfo.deptId }).then(() => {
           getTree();
           clearDeptData();
           // 清空select树
-          deptTreeSelectedKeys.value = [];
-          selectRef.value = '';
+          if (data.selected) {
+            // 删除选中的数据需要清空
+            deptTreeSelectedKeys.value = [];
+            selectRef.value = '';
+          }
         });
       },
       onCancel() {
@@ -647,55 +712,116 @@
       rolePermission();
     }
   };
+
+  // 部门区域的dropdown
+  const dropActions = ref([
+    { title: '新增部门', func: addApartment, key: 'addDept' },
+    { title: '新增子部门', func: addApartmentSon, key: 'addDeptSon' },
+    { title: '删除', func: deleteDept, key: 'deleteDept' },
+    // { title: '新增角色', func: addUser, key: 'addUser' },
+  ]);
+
+  const filterAction = (data, actions) => {
+    if (data.hasOwnProperty('orgInfo')) {
+      // 企业节点
+      return actions.filter(({ key }) => key === 'addDept');
+    }
+    return actions;
+  };
+
+  // 角色区域的dropdown
+  const dropRoleActions = ref([
+    { title: '新增角色', func: addUser, key: 'addUser' },
+    { title: '新增子角色', func: addUserSon, key: 'addUserSon' },
+    { title: '删除', func: deleteUser, key: 'deleteUser' },
+  ]);
+  const treeRef = ref();
+  console.log(treeRef);
 </script>
 <style lang="less" scoped>
+  :deep(.ns-form::after) {
+    display: none;
+  }
+  .actionMore {
+    display: none;
+  }
+  :deep(.ant-row) {
+    height: calc(100% - 44px);
+  }
+  :deep(.ant-tree-node-content-wrapper) {
+    &:hover {
+      .actionMore {
+        display: block;
+      }
+    }
+  }
+  :deep(.ant-tabs-nav-wrap) {
+    padding: 0;
+  }
   :deep(.ant-tabs-tabpane) {
-    padding: 20px;
+    padding-top: @ns-gap;
     .form {
       margin: 0 !important;
     }
   }
+  :deep(.ant-space) {
+    justify-content: flex-end;
+  }
 
   .main {
     display: flex;
-    flex: 1;
+    height: 100%;
+    background-color: @ns-content-bg;
+    > div:first-child {
+      margin-right: @ns-gap;
+    }
   }
 
-  .left {
+  .left,
+  .right {
     width: 50%;
-    height: calc(100vh-50px);
-    border-right: 5px solid rgb(229, 235, 240);
+    height: 100%;
+    padding: @ns-gap;
+    background-color: @white;
+    border-radius: @ns-border-radius;
+    box-shadow: @ns-content-box-shadow;
   }
 
   .tree {
-    width: 400px;
-    height: 89vh;
-    border-right: 2px solid rgb(229, 235, 240);
+    height: 100%;
+    overflow: hidden;
+    overflow-y: auto;
+    border-radius: @ns-border-radius;
+    border: 1px solid #ebeef5;
+    padding: 16px;
   }
-
-  .right {
-    width: 50%;
-  }
-
-  .top {
-    height: 50vh;
-    border-bottom: 5px solid rgb(229, 235, 240);
+  .list {
+    padding-left: @ns-gap;
+    height: 100%;
+    .pane {
+      padding-left: @ns-gap;
+      border-left: 1px solid #ebeef5;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      :deep(.ant-tabs-content) {
+        height: 100%;
+        .ant-tree {
+          height: 100%;
+          overflow-y: scroll;
+        }
+      }
+    }
   }
 
   .ns-table-title {
     text-align: left;
-    height: 46px;
-    line-height: 46px;
-    font-size: 18px;
+    font-size: 16px;
     font-weight: bold;
     user-select: text;
-    padding-left: 16px;
     width: 100%;
-    border-bottom: 2px solid rgb(229, 235, 240);
-  }
-
-  .table {
-    width: 2000px;
+    margin-bottom: @ns-gap;
   }
 
   .admin {