feat: row list api

.idea/workspace.xml

@@ -3,14 +3,10 @@
   <component name="ChangeListManager">
     <list default="true" id="41f85978-32cc-4348-8909-ad50d32d8ad8" name="Default Changelist" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/layout/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/layout/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/router/config.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/router/config.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/router/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/router/index.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/services/api.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/services/api.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/services/request.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/services/request.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/Examine/company.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Examine/company.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/views/Garden/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Garden/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/services/request.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/services/request.tsx" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/views/Role/list.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Role/list.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/views/User/Login.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/User/Login.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -20,6 +16,14 @@
   <component name="Git.Settings">
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
   </component>
+  <component name="GitSEFilterConfiguration">
+    <file-type-list>
+      <filtered-out-file-type name="LOCAL_BRANCH" />
+      <filtered-out-file-type name="REMOTE_BRANCH" />
+      <filtered-out-file-type name="TAG" />
+      <filtered-out-file-type name="COMMIT_BY_MESSAGE" />
+    </file-type-list>
+  </component>
   <component name="ProjectId" id="1xWf2oHN0VlRnX80TjDtQKVIwVf" />
   <component name="ProjectViewState">
     <option name="hideEmptyMiddlePackages" value="true" />
@@ -44,7 +48,9 @@
       <option name="number" value="Default" />
       <option name="presentableId" value="Default" />
       <updated>1630475566284</updated>
-      <workItem from="1630475569580" duration="7088000" />
+      <workItem from="1630475569580" duration="15145000" />
+      <workItem from="1630516260055" duration="133000" />
+      <workItem from="1630546140889" duration="9050000" />
     </task>
     <servers />
   </component>
@@ -61,5 +67,6 @@
         </entry>
       </map>
     </option>
+    <option name="oldMeFiltersMigrated" value="true" />
   </component>
 </project>

src/services/api.ts

@@ -1,13 +1,11 @@
-import request from "./request"
+import request from './request'
 
 const ListDataTransform = (AsyncMethod) => {
   return new Promise(resolve => {
     AsyncMethod.then(({ data, code }) => resolve({
       total: data.total || data.list.length,
       data: data.list.map((item, index) => {
-        if (item.childs) {
-          item.children = item.childs
-        }
+        if (item.childs) item.children = item.childs
         item.key = `${item.name}-${index}`
         return item
       }),
@@ -30,3 +28,13 @@ export const GetRoleList: any = params => ListDataTransform(request({
   params
 }))
 
+// 权限操作
+export const RoleApi: any = params => request({
+  url: '/system_permission',
+  method: params.mt,
+  data: params,
+  params: params.mt === 'delete' ? params : {}
+})
+
+
+

src/services/request.ts → src/services/request.tsx

@@ -15,10 +15,19 @@ request.interceptors.request.use(config => {
   return config
 })
 
+const errorHandler = code => {
+  switch (code) {
+    case 10009:
+        window.location.href = '/login'
+      break
+  }
+}
+
 request.interceptors.response.use(response => {
   if (response.data.code) {
     const error = response.data.message
     message.error(error)
+    errorHandler(response.data.code)
     throw error
   }
   return response.data

src/views/Role/list.tsx

@@ -1,65 +1,176 @@
-import * as React from 'react'
+import React, { useState } from 'react'
 import type { ActionType } from '@ant-design/pro-table'
 import ProTable from '@ant-design/pro-table'
-import { Button } from 'antd'
-import { PlusOutlined } from '@ant-design/icons'
-import { GetRoleList } from '../../services/api'
+import { Button, Modal, Form, Input, Switch, message } from 'antd'
+import { PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
+import { GetRoleList, RoleApi } from '../../services/api'
 
-// @ts-ignore
-const columns: any = [
-  {
-    title: '权限名称',
-    dataIndex: 'name',
-    key: 'name'
-  },
-  {
-    title: '所属上级code',
-    dataIndex: 'pcode'
-  },
-
-  {
-    title: '路由',
-    dataIndex: 'router',
-  },
-  {
-    title: '方法',
-    dataIndex: 'method',
-    search: false,
-  },
-  {
-    title: '操作',
-    dataIndex: 'option',
-    valueType: 'option',
-    render: (_, record: any) => [
-      <Button type='link'>修改</Button>,
-      <Button type='link'>删除</Button>
-    ]
-  }
-]
 const RoleList: React.FC = () => {
-  const actionRef = React.useRef<ActionType>();
-  return (
-    <ProTable
-      headerTitle="权限列表"
-      actionRef={actionRef}
-      rowKey="key"
-      search={{
-        labelWidth: 120,
-      }}
-      request={GetRoleList}
-      toolBarRender={() => [
+  const actionRef = React.useRef<ActionType>() as any;
+  const [state, setState]: any = useState({
+    visible: false,
+    pcode: '',
+    mt: 'post'
+  })
+  const columns: any = [
+    {
+      title: '权限名称',
+      dataIndex: 'name',
+      key: 'name'
+    },
+    {
+      title: '所属上级code',
+      dataIndex: 'pcode'
+    },
+    {
+      title: '是否前段控制',
+      dataIndex: 'front',
+      render: (_, record: any) => record.front ? '是' : '否',
+    },
+    {
+      title: '路由',
+      dataIndex: 'router',
+    },
+    {
+      title: '方法',
+      dataIndex: 'method',
+      search: false,
+    },
+    {
+      title: '操作',
+      dataIndex: 'option',
+      valueType: 'option',
+      width: 200,
+      render: (_, record: any) => [
         <Button
-          type="primary"
-          key="primary"
+          type='link'
           onClick={() => {
-
+            setState({
+              visible: true,
+              pcode: record.code,
+              mt: 'post'
+            })
           }}
-        >
-          <PlusOutlined /> 新建
-        </Button>,
-      ]}
-      columns={columns}
-    />
+        >添加子权限</Button>,
+        <Button
+          type='link'
+          onClick={() => {
+            setState({
+              visible: true,
+              pcode: record.pcode,
+              mt: 'put',
+              code: record.code
+            })
+            form.setFieldsValue(record)
+          }}
+        >修改</Button>,
+        <Button
+          type='link'
+          onClick={() => {
+            Modal.confirm({
+              title: '确认删除吗？',
+              icon: <ExclamationCircleOutlined />,
+              content: '点击确认后会删除该权限',
+              okText: '确认',
+              okType: 'danger',
+              cancelText: '取消',
+              onOk() {
+                RoleController({
+                  mt: 'delete',
+                  pcode: record.pcode,
+                  code: record.code
+                })
+              },
+            })
+          }}
+        >删除</Button>
+      ]
+    }
+  ]
+  const [form] = Form.useForm()
+
+  const RoleController = (params = {}) => {
+    form.validateFields()
+      .then(async values => {
+        values.method = +values.method
+        await RoleApi({
+          ...state,
+          ...values,
+          ...params,
+        })
+        message.success('操作成功！')
+        setState({ visible: false, pcode: '', mt: 'post' })
+        form.resetFields()
+        actionRef.current.reload()
+      })
+  }
+
+  const roleFormItems = [
+    {
+      label: '权限名称',
+      name: 'name'
+    },
+    {
+      label: '路由',
+      name: 'router'
+    },
+    {
+      label: '方法',
+      name: 'method'
+    }
+  ]
+
+  return (
+    <React.Fragment>
+      <ProTable
+        headerTitle="权限列表"
+        actionRef={actionRef}
+        rowKey="key"
+        search={false}
+        request={GetRoleList}
+        toolBarRender={() => [
+          <Button
+            type="primary"
+            key="primary"
+            onClick={() => {
+              setState(pre => ({ ...pre, visible: true }))
+            }}
+          >
+            <PlusOutlined /> 新建
+          </Button>,
+        ]}
+        columns={columns}
+      />
+      <Modal
+        title={ state.mt === 'post' ? '添加权限' : '修改权限' }
+        width={400}
+        visible={state.visible}
+        onOk={() => RoleController()}
+        onCancel={() => setState(pre => ({ ...pre, visible: false }))}
+      >
+        <Form form={form}>
+          <Form.Item
+            label='是否前端控制'
+            valuePropName="checked"
+            name='front'
+          >
+            <Switch/>
+          </Form.Item>
+          {
+            roleFormItems.map(item => (
+              <Form.Item
+                label={item.label}
+                name={item.name}
+                required
+                rules={[{ required: true, message: `请输入${item.label}` }]}
+              >
+                <Input placeholder='单行输入' />
+              </Form.Item>
+            ))
+          }
+        </Form>
+      </Modal>
+    </React.Fragment>
   )
 }
 

src/views/User/Login.tsx

@@ -6,7 +6,7 @@ import { message } from 'antd'
 // @ts-ignore
 import sha256 from 'sha256'
 
-const Login: React.FC = () => {
+const Login: React.FC = (props: any) => {
   // input useRef
   const inputName: any = React.useRef(null)
   const inputPassword: any = React.useRef(null)
@@ -17,6 +17,7 @@ const Login: React.FC = () => {
     const { data } = await PostLogin({ user: name, password: sha256(password) })
     message.success('登录成功！')
     localStorage.setItem('area-token', data.token)
+    props.history.push('/admin/index')
   }
 
   return (
@@ -34,10 +35,10 @@ const Login: React.FC = () => {
             <div>验证码登录</div>
           </div>
           <div className="form-item" style={{ marginBottom: '36px' }}>
-            <input ref={inputName} placeholder="手机/账号" />
+            <input autoComplete='off' ref={inputName} placeholder="手机/账号" />
           </div>
           <div className="form-item">
-            <input type="password" ref={inputPassword} placeholder="密码" />
+            <input autoComplete='off' type="password" ref={inputPassword} placeholder="密码" />
           </div>
           <div className="other-links">忘记密码</div>
           <button className="submit-btn" onClick={handleLogin}>登录</button>