From 0ea6ac4348196458aa5f2ded68aec2ec308d4432 Mon Sep 17 00:00:00 2001
From: husq <931347610@qq.com>
Date: Wed, 30 Aug 2023 16:44:45 +0800
Subject: [PATCH] 修改文件名字、增加创建项目页面、项目列表筛选完善
---
src/pages/page-web/projects/project_list/add_page/type.ts | 35 ++++++++
src/types/enums.ts | 1
src/pages/page-web/projects/project_list/list_page/list.vue | 33 +++++---
src/pages/page-web/projects/project_list/list_page/components/data.ts | 0
src/router/index.ts | 8 +
src/pages/page-web/projects/project_list/add_page/add.vue | 99 ++++++++++++++++++++++++
src/pages/page-web/projects/project_list/list_page/components/ProjectList.vue | 8 +-
src/api/project-page/index.ts | 2
src/pages/page-web/projects/project_list/list_page/data.ts | 0
9 files changed, 168 insertions(+), 18 deletions(-)
diff --git a/src/api/project-page/index.ts b/src/api/project-page/index.ts
index ecb63db..a7e0540 100644
--- a/src/api/project-page/index.ts
+++ b/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
diff --git a/src/pages/page-web/projects/project_list/add_page/add.vue b/src/pages/page-web/projects/project_list/add_page/add.vue
new file mode 100644
index 0000000..d1d89b0
--- /dev/null
+++ b/src/pages/page-web/projects/project_list/add_page/add.vue
@@ -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>
diff --git a/src/pages/page-web/projects/project_list/add_page/type.ts b/src/pages/page-web/projects/project_list/add_page/type.ts
new file mode 100644
index 0000000..6c69d6b
--- /dev/null
+++ b/src/pages/page-web/projects/project_list/add_page/type.ts
@@ -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]?:{}
+}
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/components/ProjectList.vue
similarity index 93%
rename from src/pages/page-web/projects/project_list/list_page.vue/components/ProjectList.vue
rename to src/pages/page-web/projects/project_list/list_page/components/ProjectList.vue
index 1b22144..4860190 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/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 />
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/components/data.ts
similarity index 100%
rename from src/pages/page-web/projects/project_list/list_page.vue/components/data.ts
rename to src/pages/page-web/projects/project_list/list_page/components/data.ts
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/data.ts
similarity index 100%
rename from src/pages/page-web/projects/project_list/list_page.vue/data.ts
rename to src/pages/page-web/projects/project_list/list_page/data.ts
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/list.vue
similarity index 84%
rename from src/pages/page-web/projects/project_list/list_page.vue/list.vue
rename to src/pages/page-web/projects/project_list/list_page/list.vue
index 80d1f3c..2f3e688 100644
--- a/src/pages/page-web/projects/project_list/list_page.vue/list.vue
+++ b/src/pages/page-web/projects/project_list/list_page/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>
diff --git a/src/router/index.ts b/src/router/index.ts
index b4acefb..914ccfc 100644
--- a/src/router/index.ts
+++ b/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
{
diff --git a/src/types/enums.ts b/src/types/enums.ts
index 4419855..03d4759 100644
--- a/src/types/enums.ts
+++ b/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',
--
Gitblit v1.9.3