feat: 1

src/pages/Hr/Contacts/components/Organization/index.tsx

@@ -47,13 +47,8 @@ const Organization = props => {
     }
   }
   return (
-    <div
-      className="w-12rem rounded-4px flex flex-col"
-      style={{
-        height: `calc(100vh - 96px)`,
-        overflowY: 'auto'
-      }}>
-      <div className="p-4 border-b-1 border-solid border-black border-opacity-10 bg-[#f7f9fa]">
+    <div className="min-w-12rem rounded-4px flex flex-col">
+      <div className="p-4 border-b-1 border-solid border-black border-opacity-10 bg-hex-f7f9fa flex justify-around items-center flex-row">
         <span className="text-[0.9375rem]">组织架构</span>
       </div>
       <div className="py-4 bg-white flex-1">

src/pages/Hr/Contacts/index.tsx

@@ -86,14 +86,12 @@ const Contacts: React.FC<ContactsProps> = props => {
   ]
   return (
     <PageContainer title={false} breadcrumb={false}>
-      <div className="h-full w-full flex flex-row">
+      <div className="flex flex-row">
         <Organization onSelect={onSelect} />
-        <div style={{ width: 'calc(100% - 12rem)' }}>
-          <div className="ml-6 shadow-hex-3e2c5a">
-            {allStaffList.length ? (
-              <BasicTable rowKey="id" columns={columns} dataSource={dataSource} search={false} />
-            ) : null}
-          </div>
+        <div className="ml-6 shadow-hex-3e2c5a">
+          {allStaffList.length ? (
+            <BasicTable rowKey="id" columns={columns} dataSource={dataSource} search={false} />
+          ) : null}
         </div>
       </div>
     </PageContainer>

src/pages/Hr/Employee/components/DepartmentMenu/index.jsx

@@ -82,41 +82,35 @@ const DepartmentMenu = props => {
   }
 
   return (
-    <div
-      className="w-12rem rounded-4px flex flex-col"
-      style={{
-        height: `calc(100vh - 96px)`
-      }}>
-      <div className="p-4 border-b-1 border-solid border-black border-opacity-10 bg-[#f7f9fa] flex justify-around items-center">
-        <span className="text-[0.9375rem]">组织架构</span>
-        {hasPerm && (
-          <ModalForm
-            title="创建部门"
-            width="500px"
-            trigger={
-              <Button size="small" type="primary" ghost>
-                <PlusOutlined />
-                创建部门
-              </Button>
-            }
-            onFinish={async values => {
-              await handleAddDepartment(values)
-              message.success('添加成功')
-              return true
-            }}>
-            <ProFormText name="backstageMenuId" hidden />
-            <ProFormText name="name" label="新增部门" rules={[{ message: '请输入部门名称' }]} />
-            <Form.Item label="上级部门" name="parentId">
-              <TreeSelect
-                style={{ width: '100%' }}
-                placeholder="请选择上司"
-                treeDefaultExpandAll
-                treeData={departments}
-                allowClear
-              />
-            </Form.Item>
-          </ModalForm>
-        )}
+    <div className="min-w-12rem rounded-4px flex flex-col">
+      <div className="w-full p-4 border-b-1 border-solid border-black border-opacity-10 bg-hex-f7f9fa flex justify-around items-center flex-row">
+        <div className="text-[0.9375rem]">组织架构</div>
+        <ModalForm
+          title="创建部门"
+          width="500px"
+          trigger={
+            <Button size="small" type="primary" ghost disabled={!hasPerm}>
+              <PlusOutlined />
+              创建部门
+            </Button>
+          }
+          onFinish={async values => {
+            await handleAddDepartment(values)
+            message.success('添加成功')
+            return true
+          }}>
+          <ProFormText name="backstageMenuId" hidden />
+          <ProFormText name="name" label="新增部门" rules={[{ message: '请输入部门名称' }]} />
+          <Form.Item label="上级部门" name="parentId">
+            <TreeSelect
+              style={{ width: '100%' }}
+              placeholder="请选择上司"
+              treeDefaultExpandAll
+              treeData={departments}
+              allowClear
+            />
+          </Form.Item>
+        </ModalForm>
       </div>
       <div className="py-4 bg-white flex-1">
         {departments.length ? (

src/pages/Hr/Employee/index.jsx

@@ -82,28 +82,26 @@ const Employee = props => {
 
   return (
     <PageContainer title={false} breadcrumb={false}>
-      <div className="h-full w-full flex flex-row">
+      <div className="flex flex-row">
         <DepartmentMenu onSelect={onSelect} />
-        <div style={{ width: 'calc(100% - 12rem)' }}>
-          <div className="ml-6 shadow-hex-3e2c5a">
-            {state.params.id && (
-              <BasicTable
-                params={{ departmentId: state.params.id }}
-                rowKey="id"
-                columns={columns}
-                request={async params => {
-                  const { code = -1, data: { list = [], total = 0 } = { list: [], total: 0 } } =
-                    await queryStaff({ ...params })
-                  return {
-                    data: list,
-                    success: code === consts.RET_CODE.SUCCESS,
-                    total
-                  }
-                }}
-                search={false}
-              />
-            )}
-          </div>
+        <div className="ml-6 shadow-hex-3e2c5a">
+          {state.params.id && (
+            <BasicTable
+              params={{ departmentId: state.params.id }}
+              rowKey="id"
+              columns={columns}
+              request={async params => {
+                const { code = -1, data: { list = [], total = 0 } = { list: [], total: 0 } } =
+                  await queryStaff({ ...params })
+                return {
+                  data: list,
+                  success: code === consts.RET_CODE.SUCCESS,
+                  total
+                }
+              }}
+              search={false}
+            />
+          )}
         </div>
       </div>
     </PageContainer>