修改文件名字、增加创建项目页面、项目列表筛选完善

husq

2023-08-30 0ea6ac4348196458aa5f2ded68aec2ec308d4432

修改文件名字、增加创建项目页面、项目列表筛选完善

 src/api/project-page/index.ts

@@ -1,6 +1,6 @@
import request, { CommonListResponse, IListWorkspaceResponse, IPage, IWorkspaceResponse } from '/@/api/http/request'

const HTTP_PREFIX = 'drone/dj'
const HTTP_PREFIX = 'drone/iot'

type projectPage= {
    status:string

 src/pages/page-web/projects/project_list/add_page/add.vue

New file
@@ -0,0 +1,99 @@
<template>
    <div class="project_add">
        <div class="side-header">
            <div class="side-option flex-display flex-align-center">
                <left-outlined :style="{ fontSize: '18px', marginRight: '8px' }" />
                <h2 class="title">创建项目</h2>
            </div>
            <div class="border-bottom"></div>
        </div>
        <div class="side-form-content">
            <a-form layout="vertical" :model="formState">
                <a-form-item label="项目名称">
                    <a-input v-model:value="formState[FormProject.PROJECT_NAME]" placeholder="项目名称" />
                </a-form-item>
                <a-form-item label="项目简介">
                    <a-textarea :auto-size="{ minRows: 4, maxRows: 8 }" type="textarea" v-model:value="formState[FormProject.PROJCECT_INTRO]" placeholder="项目简介" />
                </a-form-item>
                <a-form-item>
                    <div class="application">
                        <p>申请码加入项目</p>
                        <div class="button">
                            <a-button type="text">
                                未开启
                                <template #icon><right-outlined /></template>
                            </a-button>
                        </div>
                    </div>
                    <a-textarea :auto-size="{ minRows: 4, maxRows: 8 }" type="textarea" v-model:value="formState[FormProject.PROJCECT_INTRO]" placeholder="项目简介" />
                </a-form-item>
                <a-form-item>
                    <a-button type="primary">Submit</a-button>
                </a-form-item>
            </a-form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue'
import { FormState, FormProject } from './type'

const formState = ref<FormState>({
  [FormProject.PROJECT_NAME]: '',
  [FormProject.PROJECT_STATUS]: '',
  [FormProject.PROJCECT_INTRO]: '',
  [FormProject.LONGITUDE]: 0,
  [FormProject.LATITUDE]: 0,
  [FormProject.USERLIST]: []
})
</script>

<style scoped lang="scss">
.project_add {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #232323;

    .side-header {
        height: 60px;
        font-size: 16px;
        line-height: 60px;
        box-sizing: border-box;
        background-color: #232323;
        border-bottom: 1px solid #4f4f4f;

        .side-option {
            padding: 0 16px;

            .title {
                color: $text-white-basic;
                font-size: 18px;
                margin: 0;
                font-weight: 700;
            }
        }
    }

    .side-form-content {
        padding: 16px;
        flex: 1;
        overflow-y: auto;
    }

    :deep(.ant-form-item-label > label) {
        color: #fff;
    }

    :deep(.ant-input) {
        background: #101010;
        border: 1px solid #444;
        color: #fff;
    }

    :deep(.ant-input-affix-wrapper) {
        background: #101010;
    }
}
</style>

 src/pages/page-web/projects/project_list/add_page/type.ts

New file
@@ -0,0 +1,35 @@
export enum FormProject{
    PROJECT_NAME = 'projectName',
    PROJECT_STATUS = 'projectStatus',
    PROJCECT_INTRO = 'projectIntro',
    LONGITUDE = 'longitude',
    LATITUDE = 'latitude',
    DEVICELIST = 'deviceList',
    USERLIST = 'userList',
    PROJECT_BLOCKING = 'projectBlocking',
}
enum weather{
    '开启'=1,
    '关闭'=2
}
interface deviceList {
    nickName:string
    deviceSource:number
    deviceType:number
    [key:string]:any
}
interface projectBlocking {
    weatherBlockingConfigEnable:weather
    cloudBlockingConfigEnable:weather

}
export interface FormState {
    [FormProject.PROJECT_NAME]: string
    [FormProject.PROJECT_STATUS]:string
    [FormProject.PROJCECT_INTRO]:string
    [FormProject.LONGITUDE]:number
    [FormProject.LATITUDE]:number
    [FormProject.DEVICELIST]?:deviceList[]
    [FormProject.USERLIST]:number[]
    [FormProject.PROJECT_BLOCKING]?:{}
}

 src/pages/page-web/projects/project_list/list_page/components/ProjectList.vue

File was renamed from src/pages/page-web/projects/project_list/list_page.vue/components/ProjectList.vue
@@ -2,8 +2,8 @@
 * @Author: 胡思旗 931347610@qq.com
 * @Date: 2023-08-28 15:23:47
 * @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
 * @LastEditTime: 2023-08-30 15:30:19
 * @FilePath: \Cloud-API-Demo-Web\src\pages\page-web\projects\project_list\list_page\components\ProjectList.vue
 * @Description:项目列表组件
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
@@ -14,7 +14,7 @@
            <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">{{status[item.projectStatus]}}</a-tag>
                        <a-tag color="#87d068">{{ status[item.projectStatus] }}</a-tag>
                        <span class="head-text">{{ item.projectName }}</span>
                    </div>
                    <div class="head-right">
@@ -37,7 +37,7 @@
                    </div>
                </div>
                <div class="wrapper">
                    <div class="introduction mb10">{{ item.projectIntro }}</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 />

 src/pages/page-web/projects/project_list/list_page/components/data.ts

 src/pages/page-web/projects/project_list/list_page/data.ts

 src/pages/page-web/projects/project_list/list_page/list.vue

File was renamed from src/pages/page-web/projects/project_list/list_page.vue/list.vue
@@ -3,7 +3,7 @@
    <div class="side-header">
      <div class="side-option flex-display flex-align-center flex-justify-between">
        <h2 class="title">项目列表</h2>
        <PlusCircleOutlined :style="{ fontSize: '20px' }" />
        <PlusCircleOutlined @click="goAdd" :style="{ fontSize: '20px' }" />
      </div>
      <div class="border-bottom"></div>
    </div>
@@ -12,12 +12,13 @@
        <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' }" />
        <MonitorOutlined @click="() => searchInput = !searchInput"
          :style="{ color: searchInput ? '#1180ff' : '', fontSize: '24px', display: 'flex', alignItems: 'center', marginRight: '12px' }" />
      </div>
      <div class="side-filter-input">
      <div class="side-filter-input" v-if="searchInput">
        <a-input v-model:value="params.projectName" placeholder="按项目名称搜索">
          <template #suffix>
            <MonitorOutlined :style="{color: '#fff',fontSize: '18px'}" />
            <MonitorOutlined :style="{ color: '#fff', fontSize: '18px' }" />
          </template>
        </a-input>
      </div>
@@ -38,10 +39,8 @@
import Select from '/@/components/Search/Select.vue'
import List from './components/ProjectList.vue'
const router = useRouter()
const goDetail = () => {
  console.log(router, '==========')
  router.push({ name: ERouterName.WORKSPACE })
}
const sort = ref('createTime')
const searchInput = ref(false)
const params = ref({
  projectStatus: '',
  project: '',
@@ -53,11 +52,17 @@
  ],
  projectName: '',
})
const sort = ref('createTime')
const goDetail = () => {
  router.push({ name: ERouterName.WORKSPACE })
}
const goAdd = () => {
  router.push({ name: ERouterName.ADD_PROJECT })
}
const cardList = ref<projectCard[]>([])
// 全部状态、全部项目筛选方法
const handleChange = (e: any) => {
  console.log(e, params.value, '=============')
  init()
}
// 排序方法
const sortHandleChange = (e: string) => {
@@ -67,7 +72,9 @@
      asc: map.get(e)
    }
  ]
  init()
}
// 页面初始化
const init = async () => {
  const res = await getProjectPage(params.value)
  cardList.value = res.data.records
@@ -99,6 +106,7 @@
        color: $text-white-basic;
        font-size: 18px;
        margin: 0;
        font-weight: 700;
      }
    }
  }
@@ -128,9 +136,11 @@
    border: none;
    color: #fff;
  }
  :deep(.ant-input-affix-wrapper){

  :deep(.ant-input-affix-wrapper) {
    background: #101010;
  }

  :deep(.ant-select-item-option-selected) {
    color: #1180ff !important;
    background-color: #333333 !important;
@@ -148,5 +158,4 @@
    flex: 1;
    overflow-y: auto;
  }
}
</style>
}</style>

 src/router/index.ts

@@ -42,7 +42,13 @@
        children: [
          {
            path: '/' + ERouterName.PROJECT_LIST,
            component: () => import('/@/pages/page-web/projects/project_list/list_page.vue/list.vue')
            name: ERouterName.PROJECT_LIST,
            component: () => import('/@/pages/page-web/projects/project_list/list_page/list.vue')
          },
          {
            path: '/' + ERouterName.ADD_PROJECT,
            name: ERouterName.ADD_PROJECT,
            component: () => import('/@/pages/page-web/projects/project_list/add_page/add.vue')
          },
          // workspace
          {

 src/types/enums.ts

@@ -2,6 +2,7 @@
    ELEMENT = 'element',
    LOGIN = 'login',
    PROJECT = 'project',
    ADD_PROJECT = 'add_project',
    PROJECT_LIST='project_list',
    HOME = 'home',
    TSA = 'tsa',