ソースを参照

feat: 账号设置页面构建,进度50%

lanjianrong 4 年 前
コミット
97109e571a

+ 3 - 1
src/assets/css/common.scss

@@ -325,7 +325,9 @@
     @extend .pi-absolute-lt;
     left: 100px;
   }
-
+  .pi-header-left.no-title {
+    left: 20px;
+  }
   .pi-header-center {
     @extend .pi-absolute-center;
   }

+ 3 - 0
src/components/Header/index.tsx

@@ -10,6 +10,9 @@ const Header: React.FC<PropsWithChildren<iHeaderProps>> = props => {
     switch (child?.props?.position) {
       case 'left':
         positionClass = 'pi-header-left'
+        if (!props.title) {
+          positionClass += ' no-title'
+        }
         break
       case 'center':
         positionClass = 'pi-header-center'

+ 1 - 0
src/pages/Contract/Content/Income/components/TableContent/index.module.scss

@@ -18,6 +18,7 @@
     :global(.ant-table-thead > tr > th) {
       padding: 0.3rem;
       color: #000000;
+      text-align: center;
       background: #e9ecef;
       border-bottom: 2px solid #dee2e6;
       border-bottom-width: 2px;

+ 69 - 0
src/pages/Management/Setting/api.ts

@@ -0,0 +1,69 @@
+import { iAccountChange, iAccountCreatePayload, iAccountEdit, iAccountEnable } from "@/types/setting"
+import request from "@/utils/common/request"
+
+/**
+ * 获取账号列表
+ * @param id - 当前用户id
+ * @returns {Promise<data>}
+ */
+export async function apiAccountList(id: string) {
+  const { data } = await request.get('/api/projectSetting/account', { id })
+  return data
+}
+
+
+/**
+ * 设置账号密码
+ * @param payload - 载荷
+ */
+export async function apiAccountChange(payload: iAccountChange) {
+  const { data } = await request.post('/api/projectSetting/account/change', payload)
+  return data
+}
+
+/**
+ * 创建账号
+ * @param payload - 载荷
+ */
+export async function apiAccountCreate(payload: iAccountCreatePayload) {
+  const { data } = await request.post('/api/projectSetting/account/create', payload)
+  return data
+}
+
+/**
+ * 删除账号
+ * @param id - 账号id
+ */
+export async function apiAccountDelete(id: string) {
+  const { data } = await request.post('/api/projectSetting/account/delete', { id })
+  return data
+}
+
+/**
+ * 账号启用/禁用
+ * @param id - 账号id
+ * @param enable - 启用/禁用
+ */
+export async function apiAccountEnable(payload: iAccountEnable) {
+  const { data } = await request.post('/api/projectSetting/account/enable', payload)
+  return data
+}
+
+/**
+ * 编辑账号
+ * @param payload - 载荷
+ */
+export async function apiAccountEdit(payload: iAccountEdit) {
+  const { data } = await request.post('/api/projectSetting/account/save', payload)
+  return data
+}
+
+/**
+ * 检索账号信息
+ * @param name - 检索内容
+ */
+export async function apiAccountSearch(name: string) {
+  const { data } = await request.get('/api/projectSetting/account/search', { name })
+  return data
+}
+

+ 10 - 0
src/pages/Management/Setting/index.module.scss

@@ -0,0 +1,10 @@
+.SettingContent {
+  :global(.ant-btn) {
+    color: #007bff;
+    border-color: #007bff;
+  }
+  .greenBtn {
+    color: #28a745;
+    border-color: #28a745;
+  }
+}

+ 86 - 5
src/pages/Management/Setting/index.tsx

@@ -1,17 +1,98 @@
 import Header from '@/components/Header'
 import Slot from '@/components/Header/slot'
-import { Button } from 'antd'
-import React from 'react'
-
+import { userStore } from '@/store/mobx'
+import { iUserInfo } from '@/types/setting'
+import consts from '@/utils/consts'
+import { Button, Input, Table } from 'antd'
+import { ColumnsType } from 'antd/lib/table'
+import React, { useEffect, useState } from 'react'
+import { apiAccountList } from './api'
+import styles from './index.module.scss'
 export default function Info() {
+  const { Search } = Input
+  const [ userList, setUserList ] = useState<iUserInfo[]>([ {
+    "account": "",
+    "accountGroup": 0,
+    "company": "",
+    "csrf": "",
+    "enable": 0,
+    "id": "",
+    "isAdmin": 0,
+    "mobile": "",
+    "name": "",
+    "password": "",
+    "position": "",
+    "projectId": "",
+    "role": "",
+    "telephone": ""
+  } ])
+  const initData = async () => {
+    const { code = -1, data } = await apiAccountList(userStore.userInfo.id)
+    if (code === consts.RET_CODE.SUCCESS) {
+      setUserList(data)
+    }
+  }
+  useEffect(() => {
+    initData()
+  }, [])
+  const columns: ColumnsType<iUserInfo> = [
+    {
+      title: '账号',
+      dataIndex: 'account'
+    },
+    {
+      title: '姓名',
+      dataIndex: 'name'
+    },
+    {
+      title: '单位',
+      dataIndex: 'company'
+    },
+    {
+      title: '职位',
+      dataIndex: 'postition'
+    },
+    {
+      title: '手机',
+      dataIndex: 'mobile'
+    },
+    {
+      title: '电话',
+      dataIndex: 'telephone'
+    },
+    {
+      title: '操作',
+      // eslint-disable-next-line react/display-name
+      render: (_: any, record: iUserInfo) => {
+        return (
+          <div>
+            <Button size="small" className="pi-mg-right-5">编辑</Button>
+            {
+              !record.isAdmin && record.enable ? <Button danger size="small">停用</Button> : <Button size="small" className={styles.greenBtn}>启用</Button>
+            }
+          </div>
+        )
+      }
+    }
+  ]
   return (
     <div className="content-wrap">
-      <Header title="账号设置">
+      <Header>
         <Slot position="right">
           <Button type="primary" size="small">添加账号</Button>
         </Slot>
+        <Slot position="left">
+          <Search placeholder="账号/姓名/单位/手机 搜索" loading={false} size="small"></Search>
+        </Slot>
       </Header>
-      <div className="pi-flex-column"></div>
+      <div className={styles.SettingContent}>
+        <Table<iUserInfo>
+          dataSource={userList}
+          columns={columns}
+          bordered
+          rowKey={record => record.id}
+        ></Table>
       </div>
+    </div>
   )
 }

+ 1 - 1
src/store/mobx/user/index.ts

@@ -1,11 +1,11 @@
 import { apiLogout } from '@/components/Menu/api'
 import { apiLogin } from '@/pages/Login/api'
 import { iFromValues } from '@/types/login'
+import { iUserInfo } from '@/types/setting'
 import { delUserInfo, getUserInfo, saveUserInfo } from '@/utils/common/user'
 import consts from '@/utils/consts'
 import history from '@/utils/history'
 import { action, computed, observable } from 'mobx'
-import { iUserInfo } from './types'
 
 class UserState {
   initUserState = {

+ 0 - 16
src/store/mobx/user/types.ts

@@ -1,16 +0,0 @@
-export interface iUserInfo {
-  account: string;
-  accountGroup: number;
-  company: string;
-  csrf: string;
-  enable: number;
-  id: string;
-  isAdmin: number;
-  mobile: string;
-  name: string;
-  password: string;
-  position: string;
-  projectId: string;
-  role: string;
-  telephone: string;
-}

+ 3 - 8
src/types/login.d.ts

@@ -1,21 +1,16 @@
-interface iLoginProps {
+export interface iLoginProps {
   history: any
   saveUser?: Function
 }
 
-interface iRetrieveFormProps {
+export interface iRetrieveFormProps {
   visible: boolean;
   setVisible: Function;
 }
 
-interface iFromValues {
+export interface iFromValues {
   code: string;
   account: string;
   passowrd: string;
 }
-export {
-  iLoginProps,
-  iRetrieveFormProps,
-  iFromValues
-};
 

+ 41 - 0
src/types/setting.d.ts

@@ -0,0 +1,41 @@
+export interface iAccountCreatePayload {
+  account: string
+  password: string
+  name: string
+  company: string
+  mobile: string
+  telephone: string
+  accountGroup: string
+}
+
+export interface iAccountEdit extends accountCreatePayload {
+  id: string
+}
+
+export interface iUserInfo {
+  account: string;
+  accountGroup: number;
+  company: string;
+  csrf: string;
+  enable: number;
+  id: string;
+  isAdmin: number;
+  mobile: string;
+  name: string;
+  password: string;
+  position: string;
+  projectId: string;
+  role: string;
+  telephone: string;
+}
+
+export interface iAccountChange {
+  id: string
+  account: string
+  password: string
+}
+
+export interface iAccountEnable {
+  id: string
+  enable: string
+}

+ 1 - 1
src/utils/common/user.ts

@@ -1,4 +1,4 @@
-import { iUserInfo } from '@/store/mobx/user/types'
+import { iUserInfo } from '@/types/setting'
 import { storage } from '@/utils/util'
 const USER_INFO = 'user_info' // 用户个人信息
 /**