开发: 修改页面

src/pages/DepartmentsList/components/DepartmentMemberDetail.tsx

@@ -0,0 +1,137 @@
+import { IStaffsItem } from '@/pages/ChatLogs/ChatLogsType';
+import { Gender } from '@/pages/ChatLogs/components/Gender';
+import { Image } from 'antd';
+import styles from '../index.module.scss';
+
+type IProps = {
+  record: IStaffsItem;
+};
+
+/**
+ * 部门成员信息 Drawer ReactNode
+ * @param props
+ * @returns
+ */
+export const DepartmentMembersDetail: React.FC<IProps> = (props) => {
+  const { record } = props;
+
+  const fomatStr = (val: any) => {
+    return val || '未设置';
+  };
+  return (
+    <div>
+      <div style={{ display: 'flex' }}>
+        <div style={{ marginRight: 12 }}>
+          {record?.avatar ? (
+            <Image width={80} height={80} style={{ borderRadius: 4 }} src={record.avatar}></Image>
+          ) : (
+            <div
+              style={{
+                width: 80,
+                height: 80,
+                background: '#eee',
+                borderRadius: 4,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                flexShrink: 0,
+              }}
+            >
+              {record?.name[0]}
+            </div>
+          )}
+        </div>
+        <div style={{ marginRight: 32 }}>
+          <div>
+            <span style={{ marginRight: 8, fontSize: 18 }}>{record?.name}</span>
+            <Gender gender={record?.gender}></Gender>
+          </div>
+          <div>别名：{fomatStr(record?.alias)}</div>
+        </div>
+        {record?.qr_code ? (
+          <Image width={80} height={80} style={{ borderRadius: 4 }} src={record.qr_code}></Image>
+        ) : null}
+      </div>
+      <div style={{ marginTop: 24, borderTop: '1px solid #ddd', paddingTop: 24 }}>
+        <div className={styles.detailItem}>
+          <span style={{ textIndent: '1em' }}>企业邮箱：</span>
+          {fomatStr(record?.biz_mail)}
+        </div>
+        <div className={styles.detailItem}>
+          <span style={{ textIndent: '3em' }}>手机：</span>
+          {fomatStr(record?.mobile)}
+        </div>
+        <div className={styles.detailItem}>
+          <span style={{ textIndent: '3em' }}>座机：</span>
+          {fomatStr(record?.telephone)}
+        </div>
+        <div className={styles.detailItem}>
+          <span style={{ textIndent: '3em' }}>邮箱：</span>
+          {fomatStr(record?.email)}
+        </div>
+        <div className={styles.detailItem}>
+          <span style={{ textIndent: '3em' }}>微信：</span>
+          {record?.name}
+        </div>
+        <div className={styles.detailItem}>
+          <span style={{ textIndent: '3em' }}>地址：</span>
+          {fomatStr(record?.address)}
+        </div>
+        <div className={styles.detailItem}>
+          <span style={{ textIndent: '2em' }}>英文名：</span>
+          {fomatStr(record?.english_name)}
+        </div>
+      </div>
+      <div style={{ marginTop: 24, borderTop: '1px solid #ddd', paddingTop: 24 }}>
+        <div className={styles.detailItem}>
+          <span style={{ textIndent: '3em' }}>部门：</span>
+          {record?.dep_name?.join('，')}
+        </div>
+        <div className={styles.detailItem}>
+          <span style={{ textIndent: '3em' }}>职务：</span>
+          {record?.position}
+        </div>
+        <div className={styles.detailItem}>
+          <span>部门负责人：</span>
+          {record?.isleader == 1 ? '是' : '否'}
+        </div>
+        <div className={styles.detailItem}>
+          <span style={{ textIndent: '1em' }}>负责部门：</span>
+          {record?.main_dep?.name}
+        </div>
+        <div className={styles.detailItem}>
+          <span style={{ textIndent: '1em' }}>直接上级：</span>
+          {/* {record?.telephone} */}
+        </div>
+        <div className={styles.detailItem}>
+          <span style={{ textIndent: '1em' }}>微信插件：</span>
+          {/* {record?.telephone} */}
+        </div>
+      </div>
+      {/* <div
+    style={{
+      marginTop: 24,
+      borderBottom: '1px solid #ddd',
+      paddingBottom: 12,
+      marginBottom: 24,
+    }}
+  >
+    对外信息
+  </div>
+  <div>
+    <div className={styles.detailItem}>
+      <span style={{ textIndent: '1em' }}>企业简称：</span>
+    </div>
+    <div className={styles.detailItem}>
+      <span style={{ textIndent: '2em' }}>视频号：</span>
+    </div>
+  </div>
+  <div>
+    <div className={styles.detailItem}>
+      <span style={{ textIndent: '3em' }}>职务：</span>
+      {record?.position}
+    </div>
+  </div> */}
+    </div>
+  );
+};

src/pages/DepartmentsList/index.module.scss

@@ -40,3 +40,12 @@
     display: inline-flex;
   }
 }
+
+
+.detailItem{
+  margin-bottom: 12px;
+  &> span{
+    color: #999;
+    display: inline-block;
+  }
+}

src/pages/DepartmentsList/index.tsx

@@ -1,9 +1,24 @@
 import { SearchBarPlugin, SearchBottonsCardPlugin } from '@/components/SearchBarPlugin';
 import { post } from '@/services/ajax';
 import { PageContainer } from '@ant-design/pro-components';
-import { Button, Col, Form, Input, Pagination, Row, Spin, Table, Tree } from 'antd';
+import {
+  App,
+  Button,
+  Col,
+  Drawer,
+  Form,
+  Input,
+  Modal,
+  Pagination,
+  Row,
+  Spin,
+  Table,
+  Tree,
+} from 'antd';
 import { stringify } from 'qs';
 import React, { useEffect, useState } from 'react';
+import { IStaffsItem } from '../ChatLogs/ChatLogsType';
+import { DepartmentMembersDetail } from './components/DepartmentMemberDetail';
 import styles from './index.module.scss';
 
 interface IDepartment {
@@ -15,14 +30,6 @@ interface IDepartment {
   sort: number;
 }
 
-interface IStaffsItem {
-  user_id: string | number;
-  name: string;
-  telephone: string;
-  dep_name: string[];
-  position: string;
-}
-
 interface IStaffsData {
   count: number;
   data?: IStaffsItem[];
@@ -35,6 +42,7 @@ type Param = {
   name?: string;
   position?: string;
   telephone?: string;
+  mobile?: string;
 };
 
 const DepartmentsList: React.FC = () => {
@@ -43,19 +51,21 @@ const DepartmentsList: React.FC = () => {
     page_count: 20,
     dep_id: 0,
   });
-
+  const { notification, modal } = App.useApp();
   const [departmentID, setDepartmentsID] = useState<number>(0);
   const [departmentsList, setDepartmentsList] = useState<IDepartment[]>([]);
   const [staffsData, setStaffsData] = useState<IStaffsData>({ count: 0, data: [] });
   const [loadingL, setLoadingL] = useState(false);
   const [loading, setLoading] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [record, setRecord] = useState<IStaffsItem>();
 
   const getDepartmentsList = () => {
     setLoadingL(true);
     post({ url: '/Departments/List' }).then((res) => {
       setLoadingL(false);
       if (res.err_code == 0) {
-        if (Array.isArray(res.data)) {
+        if (Array.isArray(res.data) && res.data.length) {
           param.dep_id = res.data[0].id;
           setDepartmentsID(param.dep_id);
           setDepartmentsList(res.data);
@@ -89,12 +99,51 @@ const DepartmentsList: React.FC = () => {
   // const [open, setOpen] = useState(false);
   // const [popOpen, setPopOpen] = useState(-1);
 
+  const [syncLoading, setSyncLoading] = useState(false);
+  const [syncOpen, setSyncOpen] = useState('');
+
+  const syncDepartments = () => {
+    setSyncLoading(false);
+    setSyncOpen('dep');
+  };
+
+  const syncStaffs = () => {
+    setSyncLoading(false);
+    setSyncOpen('staff');
+  };
+
+  const syncDepOrStaff = () => {
+    if (syncLoading) return;
+    setSyncLoading(true);
+    if (syncOpen == 'dep') {
+      post({ url: '/Sync/Departments' }).then((res) => {
+        setSyncLoading(false);
+        if (res.err_code == 0) {
+          notification.success({
+            message: res.err_msg,
+          });
+          getDepartmentsList();
+        }
+      });
+    } else {
+      post({ url: '/Sync/Staffs' }).then((res) => {
+        setSyncLoading(false);
+        if (res.err_code == 0) {
+          notification.success({
+            message: res.err_msg,
+          });
+          getStaffsList();
+        }
+      });
+    }
+  };
+
   return (
     <PageContainer>
       <div style={{ display: 'flex' }}>
         <div
           style={{
-            width: 260,
+            width: 240,
             flexShrink: 0,
             minHeight: 'calc(100vh - 55px - 60px - 96px)',
             maxHeight: 'calc(100vh - 55px - 60px)',
@@ -167,6 +216,18 @@ const DepartmentsList: React.FC = () => {
             ) : null}
           </Spin>
         </div>
+        <Modal
+          title="系统提示"
+          open={!!syncOpen}
+          onOk={syncDepOrStaff}
+          onCancel={() => setSyncOpen('')}
+          centered
+          width={300}
+        >
+          <Spin spinning={syncLoading}>
+            <div>{syncOpen == 'dep' ? '确定同步部门?' : '确定同步员工?'}</div>
+          </Spin>
+        </Modal>
         {/* <Modal
           open={open}
           title="修改部门"
@@ -197,7 +258,7 @@ const DepartmentsList: React.FC = () => {
                   </Form.Item>
                 </Col>
                 <Col xs={24} sm={12} md={8}>
-                  <Form.Item label="职位">
+                  <Form.Item label="职务">
                     <Input
                       autoComplete="off"
                       onChange={(e) => {
@@ -213,7 +274,7 @@ const DepartmentsList: React.FC = () => {
                     <Input
                       autoComplete="off"
                       onChange={(e) => {
-                        param.telephone = e.target.value.trim();
+                        param.mobile = e.target.value.trim();
                       }}
                       allowClear
                       onPressEnter={() => page(1)}
@@ -244,9 +305,27 @@ const DepartmentsList: React.FC = () => {
                 onClick={() => {
                   page(1);
                 }}
+                style={{ marginRight: 12 }}
               >
                 搜索
               </Button>
+              <Button
+                type="primary"
+                onClick={() => {
+                  syncDepartments();
+                }}
+                style={{ marginRight: 12 }}
+              >
+                同步部门
+              </Button>
+              <Button
+                type="primary"
+                onClick={() => {
+                  syncStaffs();
+                }}
+              >
+                同步员工
+              </Button>
             </Row>
           </SearchBottonsCardPlugin>
           <Table
@@ -259,12 +338,57 @@ const DepartmentsList: React.FC = () => {
             rowKey={'user_id'}
             loading={loading}
           >
-            <Table.Column title="姓名" dataIndex={'name'}></Table.Column>
-            <Table.Column title="职位" dataIndex={'position'}></Table.Column>
-            <Table.Column title="部门" dataIndex={'dep_name'}></Table.Column>
-            <Table.Column title="手机号" dataIndex={'telephone'}></Table.Column>
+            <Table.Column
+              title="姓名"
+              dataIndex={'name'}
+              render={(value, record: IStaffsItem) => {
+                return (
+                  <div
+                    onClick={() => {
+                      setRecord(record);
+                      setOpen(true);
+                    }}
+                    style={{ color: '#1890ff', cursor: 'pointer' }}
+                  >
+                    <span
+                      style={{
+                        display: 'inline-block',
+                        marginRight: record.isleader == 1 ? 4 : 0,
+                      }}
+                    >
+                      {value}
+                    </span>
+                    {record?.isleader == 1 ? (
+                      <span
+                        style={{
+                          color: '#999',
+                          fontSize: 12,
+                          border: '1px solid #ddd',
+                          borderRadius: 4,
+                          padding: '2px 4px',
+                        }}
+                      >
+                        负责人
+                      </span>
+                    ) : null}
+                  </div>
+                );
+              }}
+            ></Table.Column>
+            <Table.Column title="职务" width={160} dataIndex={'position'}></Table.Column>
+            <Table.Column
+              title="部门"
+              dataIndex={'dep_name'}
+              render={(val) => {
+                return <>{val.join('，')}</>;
+              }}
+            ></Table.Column>
+            <Table.Column title="手机号" width={160} dataIndex={'mobile'}></Table.Column>
+            <Table.Column title="企业邮箱" dataIndex={'biz_mail'}></Table.Column>
           </Table>
-
+          <Drawer title="成员详情" open={open} onClose={() => setOpen(false)} width={800}>
+            <DepartmentMembersDetail record={record as IStaffsItem}></DepartmentMembersDetail>
+          </Drawer>
           <Pagination
             style={{
               background: '#fff',