From a1fc00dbb4926cda11db43cf081f4bc06bcf3f98 Mon Sep 17 00:00:00 2001
From: husq <931347610@qq.com>
Date: Mon, 04 Sep 2023 09:43:19 +0800
Subject: [PATCH] 项目编辑、新增接口功能对接
---
src/pages/page-web/projects/project_list/add_page/add.vue | 92 +++++++++++++++++++++++++++++++++++++--------
1 files changed, 75 insertions(+), 17 deletions(-)
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
index c79df66..9e8f646 100644
--- a/src/pages/page-web/projects/project_list/add_page/add.vue
+++ b/src/pages/page-web/projects/project_list/add_page/add.vue
@@ -1,9 +1,19 @@
+<!--
+ * @Author: husq 931347610@qq.com
+ * @Date: 2023-08-30 14:43:37
+ * @LastEditors: husq 931347610@qq.com
+ * @LastEditTime: 2023-09-04 09:35:15
+ * @FilePath: \Cloud-API-Demo-Web\src\pages\page-web\projects\project_list\add_page\add.vue
+ * @Description:
+ *
+ * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
+-->
<template>
<div class="project_add">
<div class="side-header">
<div class="side-option flex-display flex-align-center">
<left-outlined class="point" @click="goBack" :style="{ fontSize: '18px', marginRight: '8px' }" />
- <h2 class="title point" @click="goBack">创建项目</h2>
+ <h2 class="title point" @click="goBack">{{route.query.id ? '编辑项目' : '创建项目'}}</h2>
</div>
<div class="border-bottom"></div>
</div>
@@ -32,8 +42,10 @@
<div class="application flex-display flex-align-center flex-justify-between">
<p>天气阻飞设置</p>
<div class="btn">
- <a-button type="text" @click="openWeatherDrawer">
- <span class="button_name">{{formState.projectBlocking.cloudBlockingConfigEnable == 1 ? '已开启' : '未开启' }}</span>
+ <a-button type="text" @click="openDrawer('weatherDrawer')">
+ <span class="button_name">{{ formState.projectBlocking.cloudBlockingConfigEnable == 1 ?
+ '已开启'
+ : '未开启' }}</span>
<template #icon><right-outlined
:style="{ fontSize: '14px', color: '#fff', marginLeft: '8px' }" /></template>
</a-button>
@@ -44,7 +56,7 @@
<div class="application flex-display flex-align-center flex-justify-between">
<p>项目成员</p>
<div>
- <a-button type="text">
+ <a-button type="text" @click="openDrawer('userDrawer')">
<span class="button_add">添加成员</span>
<template #icon><plus-outlined :style="{ fontSize: '14px', color: '#2d8cf0' }" /></template>
</a-button>
@@ -145,13 +157,16 @@
<div class="latitude">经纬度：35.6761919°N 139.65031.6°E</div>
</a-form-item>
</a-form>
- <WeatherDrawer v-model:show="weatherDrawer" title="以下设置仅在当前项目中生效" >
+ <WeatherDrawer v-model:show="drawerConfig.weatherDrawer" title="以下设置仅在当前项目中生效">
<ComWeather v-model="formState" />
+ </WeatherDrawer>
+ <WeatherDrawer v-model:show="drawerConfig.userDrawer" title="添加成员">
+ <ComUser v-model="formState" />
</WeatherDrawer>
</div>
<div class="fix-button">
- <a-button @click="submit" style="width: 100%;height: 36px;justify-content: center;" class="flex-display flex-align-center"
- type="primary">创建项目</a-button>
+ <a-button @click="submit" style="width: 100%;height: 36px;justify-content: center;"
+ class="flex-display flex-align-center" type="primary">{{route.query.id ? '编辑项目' : '创建项目'}}</a-button>
</div>
</div>
</template>
@@ -162,28 +177,35 @@
import { UnwrapRef } from 'vue'
import WeatherDrawer from '/@/components/Drawer/Drawer.vue'
import ComWeather from './components/WeatherDrawer.vue'
+import ComUser from './components/UserDrawer.vue'
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface'
+import { message } from 'ant-design-vue'
import { cloneDeep } from 'lodash'
-import router from '/@/router'
+import { add, detail, edit as projectEdit } from '/@/api/project-page/index'
+const router = useRouter()
+const route = useRoute()
const dataSource = ref([])
const deviceSource = ref([])
-const weatherDrawer = ref(false)
const editableData: UnwrapRef<Record<string, ProjectUser>> = reactive({})
const editDeviceData: UnwrapRef<Record<string, ProjectDevice>> = reactive({})
const formState = ref<FormState>({
- [FormProject.PROJECT_NAME]: 'projectName',
+ [FormProject.PROJECT_NAME]: '',
[FormProject.PROJECT_STATUS]: '',
[FormProject.PROJCECT_INTRO]: '',
[FormProject.LONGITUDE]: 0,
[FormProject.LATITUDE]: 0,
[FormProject.USERLIST]: [],
[FormProject.PROJECT_BLOCKING]: {
- [blocking.CLOUDBLOCKINGCONFIGENABLE]: 1,
- [blocking.WEATHERREPORTENABLE]: 1,
+ [blocking.CLOUDBLOCKINGCONFIGENABLE]: '1',
+ [blocking.WEATHERREPORTENABLE]: '1',
[blocking.WINDSPEED]: 12,
[blocking.WINDSPEEDREPORT]: 15,
[blocking.RAIN]: 3
}
+})
+const drawerConfig = ref({
+ userDrawer: false,
+ weatherDrawer: false,
})
const projectForm = ref()
// 表格操作方法
@@ -213,21 +235,57 @@
const del = (key: string, type: string) => {
console.log(key)
}
+// 获取项目详情
+const getDetail = async () => {
+ if (!route.query.id) return
+ const id = route.query.id
+ const res = await detail(id)
+ if (res.code !== 5000) return
+ formState.value = res.data
+}
+// 编辑项目
+const editProject = async () => {
+ const res = await projectEdit(formState.value)
+ if (res.code !== 5000) return
+ message.success('修改成功')
+ router.go(-1)
+}
+// 新增项目
+const addProject = async () => {
+ const res = await add(formState.value)
+ if (res.code !== 5000) return
+ message.success('保存成功')
+ router.go(-1)
+}
const goBack = () => {
router.go(-1)
}
// 天气组飞侧边栏
-const openWeatherDrawer = () => {
- weatherDrawer.value = true
+const openDrawer = (name: string) => {
+ for (const key in drawerConfig.value) {
+ console.log(key)
+ if (key === name) {
+ drawerConfig.value[key] = true
+ } else {
+ drawerConfig.value[key] = false
+ }
+ }
}
// 表单验证提交
const submit = () => {
- projectForm.value.validate().then(() => {
- console.log('验证通过', formState)
- }).catch((error:ValidateErrorEntity<FormState>) => {
+ projectForm.value.validate().then(async () => {
+ if (route.query.id) {
+ editProject()
+ } else {
+ addProject()
+ }
+ }).catch((error: ValidateErrorEntity<FormState>) => {
console.log(error)
})
}
+onMounted(() => {
+ getDetail()
+})
</script>
<style scoped lang="scss">
--
Gitblit v1.9.3