前端跨域配置、项目列表、登录、登出等功能对接、项目列表样式修改

husq

2023-08-29 9cf06d77201f75b518133203614c989b7c9f39b2

前端跨域配置、项目列表、登录、登出等功能对接、项目列表样式修改

 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)
  },
)

 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
}

 src/api/project-page/index.ts

New file
@@ -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
}

 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)
  }

 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;
    }

 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>

 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
}

 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'
}

 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>

 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',

 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: {