From 9cf06d77201f75b518133203614c989b7c9f39b2 Mon Sep 17 00:00:00 2001
From: husq <931347610@qq.com>
Date: Tue, 29 Aug 2023 18:12:36 +0800
Subject: [PATCH] 前端跨域配置、项目列表、登录、登出等功能对接、项目列表样式修改
---
src/api/http/request.ts | 74 +++++++-------
src/pages/page-web/index.vue | 2
src/pages/page-web/projects/project_list/list_page.vue/components/data.ts | 9 +
src/types/enums.ts | 2
vite.config.ts | 11 ++
src/pages/page-web/projects/project_list/index.vue | 2
src/api/manage.ts | 6
src/pages/page-web/projects/project_list/list_page.vue/list.vue | 90 ++++++++++++++---
src/pages/page-web/projects/project_list/list_page.vue/components/ProjectList.vue | 17 +-
src/pages/page-web/projects/project_list/list_page.vue/data.ts | 15 ++
src/api/project-page/index.ts | 14 ++
11 files changed, 164 insertions(+), 78 deletions(-)
diff --git a/src/api/http/request.ts b/src/api/http/request.ts
index d03d57e..5505fd6 100644
--- a/src/api/http/request.ts
+++ b/src/api/http/request.ts
@@ -23,7 +23,7 @@
config => {
config.headers[ELocalStorageKey.Token] = getAuthToken()
// config.headers[REQUEST_ID] = uuidv4()
- config.baseURL = CURRENT_CONFIG.baseURL
+ // config.baseURL = CURRENT_CONFIG.baseURL
return config
},
error => {
@@ -33,50 +33,50 @@
instance.interceptors.response.use(
response => {
- console.info('URL: ' + response.config.baseURL + response.config.url, '\nData: ', response.data, '\nResponse:', response)
+ // console.info('URL: ' + response.config.baseURL + response.config.url, '\nData: ', response.data, '\nResponse:', response)
if (response.data.code && !response.data.success) {
message.error(response.data.message)
}
return response
},
err => {
- const requestId = err?.config?.headers && err?.config?.headers[REQUEST_ID]
- if (requestId) {
- console.info(REQUEST_ID, '：', requestId)
- }
- console.info('url: ', err?.config?.url, `【${err?.config?.method}】 \n>>>> err: `, err)
-
- let description = '-'
- if (err.response?.data && err.response.data.message) {
- description = err.response.data.message
- }
- if (err.response?.data && err.response.data.result) {
- description = err.response.data.result.message
- }
- // @See: https://github.com/axios/axios/issues/383
- if (!err.response || !err.response.status) {
- message.error('The network is abnormal, please check the backend service and try again')
- return
- }
- if (err.response?.status !== 200) {
- message.error(`ERROR_CODE: ${err.response?.status}`)
- }
- // if (err.response?.status === 403) {
- // // window.location.href = '/'
+ message.error(`ERROR_INFO: ${err}`)
+ // const requestId = err?.config?.headers && err?.config?.headers[REQUEST_ID]
+ // if (requestId) {
+ // console.info(REQUEST_ID, '：', requestId)
// }
- if (err.response?.status === 401) {
- console.error(err.response)
- const flag: number = Number(localStorage.getItem(ELocalStorageKey.Flag))
- switch (flag) {
- case EUserType.Web:
- router.push(ERouterName.LOGIN)
- break
- case EUserType.Pilot:
- router.push(ERouterName.PILOT)
- break
- }
- }
+ // console.info('url: ', err?.config?.url, `【${err?.config?.method}】 \n>>>> err: `, err)
+ // let description = '-'
+ // if (err.response?.data && err.response.data.message) {
+ // description = err.response.data.message
+ // }
+ // if (err.response?.data && err.response.data.result) {
+ // description = err.response.data.result.message
+ // }
+ // // @See: https://github.com/axios/axios/issues/383
+ // if (!err.response || !err.response.status) {
+ // message.error('The network is abnormal, please check the backend service and try again')
+ // return
+ // }
+ // if (err.response?.status !== 200) {
+ // message.error(`ERROR_CODE: ${err.response?.status}`)
+ // }
+ // // if (err.response?.status === 403) {
+ // // // window.location.href = '/'
+ // // }
+ // if (err.response?.status === 401) {
+ // console.error(err.response)
+ // const flag: number = Number(localStorage.getItem(ELocalStorageKey.Flag))
+ // switch (flag) {
+ // case EUserType.Web:
+ // router.push(ERouterName.LOGIN)
+ // break
+ // case EUserType.Pilot:
+ // router.push(ERouterName.PILOT)
+ // break
+ // }
+ // }
return Promise.reject(err)
},
)
diff --git a/src/api/manage.ts b/src/api/manage.ts
index 8df6a52..34afc15 100644
--- a/src/api/manage.ts
+++ b/src/api/manage.ts
@@ -2,7 +2,7 @@
import request, { CommonListResponse, IListWorkspaceResponse, IPage, IWorkspaceResponse } from '/@/api/http/request'
import { Device } from '/@/types/device'
-const HTTP_PREFIX = '/system/auth'
+const HTTP_PREFIX = 'system/auth'
// login
export interface LoginBody {
@@ -28,13 +28,13 @@
}
export const login = async function (body: LoginBody): Promise<IWorkspaceResponse<any>> {
- const url = `${HTTP_PREFIX}/login/password`
+ const url = 'api/system/auth/login/password'
const result = await request.post(url, body)
return result.data
}
export const loginOut = async function (): Promise<IWorkspaceResponse<any>> {
- const url = `${HTTP_PREFIX}/logout`
+ const url = `api/${HTTP_PREFIX}/logout`
const result = await request.delete(url)
return result.data
}
diff --git a/src/api/project-page/index.ts b/src/api/project-page/index.ts
new file mode 100644
index 0000000..ecb63db
--- /dev/null
+++ b/src/api/project-page/index.ts
@@ -0,0 +1,14 @@
+import request, { CommonListResponse, IListWorkspaceResponse, IPage, IWorkspaceResponse } from '/@/api/http/request'
+
+const HTTP_PREFIX = 'drone/dj'
+
+type projectPage= {
+ status:string
+
+}
+
+export const getPage = async function (query:any): Promise<IWorkspaceResponse<any>> {
+ const url = `api/${HTTP_PREFIX}/project/getPage`
+ const result = await request.get(url, query)
+ return result.data
+}
diff --git a/src/pages/page-web/index.vue b/src/pages/page-web/index.vue
index 3dc169f..52d91b4 100644
--- a/src/pages/page-web/index.vue
+++ b/src/pages/page-web/index.vue
@@ -74,7 +74,7 @@
if (result.success) {
localStorage.setItem(ELocalStorageKey.Token, result.data.token)
localStorage.setItem(ELocalStorageKey.Username, result.data.user.username)
- localStorage.setItem(ELocalStorageKey.UserInfo, result.data.user)
+ localStorage.setItem(ELocalStorageKey.UserInfo, JSON.stringify(result.data.user))
console.log(root)
root.$router.push(ERouterName.PROJECT_LIST)
}
diff --git a/src/pages/page-web/projects/project_list/index.vue b/src/pages/page-web/projects/project_list/index.vue
index 6be3319..43c5940 100644
--- a/src/pages/page-web/projects/project_list/index.vue
+++ b/src/pages/page-web/projects/project_list/index.vue
@@ -35,7 +35,7 @@
.left_content {
width: 370px;
- min-height: 100vh;
+ max-height: 100vh;
background-color: black;
color: $text-white-basic;
}
diff --git a/src/pages/page-web/projects/project_list/list_page.vue/components/ProjectList.vue b/src/pages/page-web/projects/project_list/list_page.vue/components/ProjectList.vue
index 320035d..1b22144 100644
--- a/src/pages/page-web/projects/project_list/list_page.vue/components/ProjectList.vue
+++ b/src/pages/page-web/projects/project_list/list_page.vue/components/ProjectList.vue
@@ -1,21 +1,21 @@
<!--
* @Author: 胡思旗 931347610@qq.com
* @Date: 2023-08-28 15:23:47
- * @LastEditors: 胡思旗 931347610@qq.com
- * @LastEditTime: 2023-08-28 16:19:49
+ * @LastEditors: husq 931347610@qq.com
+ * @LastEditTime: 2023-08-29 16:54:18
* @FilePath: \Cloud-API-Demo-Web\src\pages\page-web\projects\project_list\list_page.vue\components\ProjectList.vue
* @Description:项目列表组件
*
* Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<template>
- <div class="project-box flex-display flex-align-center">
+ <div class="project-box">
<div class="project-card" v-for="item in cardList" :key="item.id">
<div class="project-left">
<div class="head mb10 flex-display flex-align-center flex-justify-between">
<div class="head-left flex-display flex-align-center">
- <a-tag color="#87d068">进行中</a-tag>
- <span class="head-text">5</span>
+ <a-tag color="#87d068">{{status[item.projectStatus]}}</a-tag>
+ <span class="head-text">{{ item.projectName }}</span>
</div>
<div class="head-right">
<a-dropdown>
@@ -37,11 +37,12 @@
</div>
</div>
<div class="wrapper">
- <div class="introduction mb10">5</div>
- <div class="time mb5">创建时间: 2023/08/28</div>
+ <div class="introduction mb10">{{ item.projectIntro }}</div>
+ <div class="time mb5">创建时间: {{ item.createTime }}</div>
<div class="manager mb5 flex-display flex-align-center">
<user-outlined />
- <div class="user_name ml10">接口活</div>
+ <!-- {{item.memberList[0].userId}} -->
+ <div class="user_name ml10">测试角色</div>
</div>
</div>
</div>
diff --git a/src/pages/page-web/projects/project_list/list_page.vue/components/data.ts b/src/pages/page-web/projects/project_list/list_page.vue/components/data.ts
index a88b38d..e087f88 100644
--- a/src/pages/page-web/projects/project_list/list_page.vue/components/data.ts
+++ b/src/pages/page-web/projects/project_list/list_page.vue/components/data.ts
@@ -11,9 +11,10 @@
}
export type projectCard={
id:string
- status:number
- name:string
- introduction:string
- create_time:string
+ projectStatus:number
+ projectName:string
+ projectIntro:string
+ createTime:string
memberList: Array<Menber>
+ [key:string]:any
}
diff --git a/src/pages/page-web/projects/project_list/list_page.vue/data.ts b/src/pages/page-web/projects/project_list/list_page.vue/data.ts
index 0ea626a..2640720 100644
--- a/src/pages/page-web/projects/project_list/list_page.vue/data.ts
+++ b/src/pages/page-web/projects/project_list/list_page.vue/data.ts
@@ -1,3 +1,4 @@
+export const map = new Map([['createTime', false], ['createTimeAsc', true], ['projectName', false], ['projectNameAsc', true]])
export const statusOption = [
{ label: '全部状态', value: '' },
{ label: '进行中', value: '0' },
@@ -9,8 +10,14 @@
{ label: '未加入', value: '1' },
]
export const sortOption = [
- { label: '创建时间倒叙', value: '' },
- { label: '创建时间正序', value: '0' },
- { label: '项目名称倒叙', value: '1' },
- { label: '项目名称正序', value: '1' },
+ { label: '创建时间倒叙', value: 'createTime' },
+ { label: '创建时间正序', value: 'createTimeAsc' },
+ { label: '项目名称倒叙', value: 'projectName' },
+ { label: '项目名称正序', value: 'projectNameAsc' },
]
+export enum sortEnum{
+ 'createTime' = 'createTime',
+ 'projectName' = 'projectName',
+ 'createTimeAsc' = 'createTime',
+ 'projectNameAsc' = 'projectName'
+}
diff --git a/src/pages/page-web/projects/project_list/list_page.vue/list.vue b/src/pages/page-web/projects/project_list/list_page.vue/list.vue
index cd54364..80d1f3c 100644
--- a/src/pages/page-web/projects/project_list/list_page.vue/list.vue
+++ b/src/pages/page-web/projects/project_list/list_page.vue/list.vue
@@ -9,21 +9,32 @@
</div>
<div class="side-filter-warp">
<div class="side-filter flex-display flex-align-center flex-justify-between">
- <Select :bordered="false" :options="statusOption" v-model="params.status" @handleChange="statusHandleChange" />
- <Select :bordered="false" :options="projectOption" v-model="params.project" @handleChange="projectHandleChange" />
- <Select :bordered="false" :options="sortOption" v-model="params.sort" @handleChange="sortHandleChange" />
+ <Select :bordered="false" :options="statusOption" v-model="params.projectStatus" @handleChange="handleChange" />
+ <Select :bordered="false" :options="projectOption" v-model="params.project" @handleChange="handleChange" />
+ <Select :bordered="false" :options="sortOption" v-model="sort" @handleChange="sortHandleChange" />
<MonitorOutlined :style="{ fontSize: '24px', display: 'flex', alignItems: 'center', marginRight: '12px' }" />
</div>
+ <div class="side-filter-input">
+ <a-input v-model:value="params.projectName" placeholder="按项目名称搜索">
+ <template #suffix>
+ <MonitorOutlined :style="{color: '#fff',fontSize: '18px'}" />
+ </template>
+ </a-input>
+ </div>
</div>
- <List />
+ <div class="wrap_card">
+ <List :cardList="cardList" />
+ </div>
<!-- <button @click="goDetail">列表详情</button> -->
</div>
</template>
<script setup lang="ts">
import { ERouterName } from '/@/types/enums'
-import { statusOption, sortOption, projectOption } from './data'
+import { statusOption, sortOption, projectOption, map, sortEnum } from './data'
+import { getPage as getProjectPage } from '/@/api/project-page'
import { PlusCircleOutlined, MonitorOutlined } from '@ant-design/icons-vue'
+import { projectCard } from './components/data'
import Select from '/@/components/Search/Select.vue'
import List from './components/ProjectList.vue'
const router = useRouter()
@@ -31,25 +42,47 @@
console.log(router, '==========')
router.push({ name: ERouterName.WORKSPACE })
}
-const params = reactive({
- status: '',
+const params = ref({
+ projectStatus: '',
project: '',
- sort: '',
+ orders: [
+ {
+ column: 'createTime',
+ asc: map.get('createTime')
+ }
+ ],
+ projectName: '',
})
-
-const statusHandleChange = (e: any) => {
- console.log(e, params, '=============')
+const sort = ref('createTime')
+const cardList = ref<projectCard[]>([])
+// 全部状态、全部项目筛选方法
+const handleChange = (e: any) => {
+ console.log(e, params.value, '=============')
}
-const projectHandleChange = (e: any) => {
- console.log(e, params, '=============')
+// 排序方法
+const sortHandleChange = (e: string) => {
+ params.value.orders = [
+ {
+ column: sortEnum[e],
+ asc: map.get(e)
+ }
+ ]
}
-const sortHandleChange = (e: any) => {
- console.log(e, params, '=============')
+const init = async () => {
+ const res = await getProjectPage(params.value)
+ cardList.value = res.data.records
}
+onMounted(() => {
+ init()
+})
</script>
<style scoped lang="scss">
.project {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+
.side-header {
height: 60px;
font-size: 16px;
@@ -76,23 +109,44 @@
border-bottom: 1px solid #4f4f4f;
}
+ .side-filter-input {
+ padding: 8px 12px 4px 12px;
+ }
+
:deep(.ant-select-borderless .ant-select-selector) {
background-color: #232323 !important;
color: #fff !important;
padding: 0 12px;
}
- :deep(.ant-select-dropdown){
+
+ :deep(.ant-select-dropdown) {
background-color: #232323 !important;
}
- :deep(.ant-select-item-option-selected){
+
+ :deep(.ant-input) {
+ background: #101010;
+ border: none;
+ color: #fff;
+ }
+ :deep(.ant-input-affix-wrapper){
+ background: #101010;
+ }
+ :deep(.ant-select-item-option-selected) {
color: #1180ff !important;
background-color: #333333 !important;
}
- :deep(.ant-select-item.ant-select-item-option){
+
+ :deep(.ant-select-item.ant-select-item-option) {
color: #fff !important;
}
+
:deep(.ant-select-arrow) {
color: #fff !important;
}
+
+ .wrap_card {
+ flex: 1;
+ overflow-y: auto;
+ }
}
</style>
diff --git a/src/types/enums.ts b/src/types/enums.ts
index 52ebf08..4419855 100644
--- a/src/types/enums.ts
+++ b/src/types/enums.ts
@@ -56,7 +56,7 @@
export enum ELocalStorageKey {
Username = 'username',
WorkspaceId = 'workspace_id',
- Token = 'x-auth-token',
+ Token = 'Authorization',
PlatformName = 'platform_name',
WorkspaceName = 'workspace_name',
WorkspaceDesc = 'workspace_desc',
diff --git a/vite.config.ts b/vite.config.ts
index 27baa26..68fef87 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -56,7 +56,16 @@
server: {
open: true,
host: '0.0.0.0',
- port: 8080
+ port: 8080,
+ proxy: {
+ '/api': {
+ // 代理请求之后的请求地址（你的真实接口地址)
+ target: 'http://172.16.13.129:8100',
+ rewrite: path => path.replace(/^\/api/, ''),
+ // 跨域
+ changeOrigin: true
+ }
+ }
},
envDir: './env',
resolve: {
--
Gitblit v1.9.3