添加相机节点功能，修改表单样式

src/axios/cameraBase/cameraApi.ts

@@ -4,11 +4,13 @@ import qs from "qs";
 
 enum Api {
     Add = '/cbCamera/add',
+    AddNode = '/cbCameraNode/add',
     Update = '/cbCamera/update',
     Delete = '/cbCamera/delete',
     DeleteNode = '/cbCameraNode/delete',
     Get = '/cbCamera/get',
     GetList = '/cbCamera/getList',
+    GetNodeList = '/cbCameraNode/getList',
     GetPageList = '/cbCamera/getPageList',
     GetTreeList = '/cbCameraNode/getTree',
 }
@@ -27,6 +29,7 @@ enum paramsApi{
 const CisApiUrl = apiUrl.CisApiUrl;
 
 export const Add = (params?: any) => axios.post(CisApiUrl + Api.Add, qs.stringify(params))
+export const AddNode = (params?: any) => axios.post(CisApiUrl + Api.AddNode, qs.stringify(params))
 
 export const Update = (params?: any) => axios.post(CisApiUrl + Api.Update, qs.stringify(params))
 
@@ -38,6 +41,8 @@ export const Get = (params?: any) => axios.get(CisApiUrl + Api.Get, { params: pa
 
 export const GetList = (params?: any) => axios.get(CisApiUrl + Api.GetList, { params: params })
 
+export const GetNodeList = (params?: any) => axios.get(CisApiUrl + Api.GetNodeList, { params: params })
+
 export const GetPageList = (params?: any) => axios.get(CisApiUrl + Api.GetPageList, { params: params })
 
 export const GetTreeList = (params?: any) => axios.get(CisApiUrl + Api.GetTreeList, { params: params })

src/views/page/Aside/leftMenuItem/cameraNodeModal.vue

@@ -0,0 +1,147 @@
+<!--   
+  *@描述: 相机节点设置model框
+  *@作者： 
+  *@日期： 
+  *@版本：1.0
+  */
+  -->
+<template>
+    <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
+        <a-form-item label="节点名称">
+            <a-input v-model:value="formState.name" />
+        </a-form-item>
+        <a-form-item label="高位相机">
+            <a-select v-model:value="formState.parentId" placeholder="请选中一个高位相机" style="width: 420px;"
+                :dropdownMenuStyle="{ color: '#000' }" :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
+                allowClear :options="nodeList" @change="nodeChange">
+            </a-select>
+        </a-form-item>
+        <a-form-item label="相机参数">
+            <!-- <a-input v-model:value="formState.CbCameraParamsId" /> -->
+            <a-select placeholder="请选中一个相机" v-model:value="formState.cbCameraId" style="width: 420px;"
+                :dropdownMenuStyle="{ color: '#000' }" :getPopupContainer="(triggerNode: any) => triggerNode.parentNode"
+                allowClear :options="parmasList" @change="cameraChange">
+            </a-select>
+        </a-form-item>
+        <!-- <a-form-item label="用户类型">
+      <a-select v-model:value="formState.userType" placeholder="请选择用户类型">
+        <a-select-option value="shanghai">Zone one</a-select-option>
+        <a-select-option value="beijing">Zone two</a-select-option>
+      </a-select>
+    </a-form-item>
+    <a-form-item label="是否启用">
+      <a-switch v-model:checked="formState.state" />
+    </a-form-item>
+    <a-form-item label="备注">
+      <a-input v-model:value="formState.remark" type="textarea" />
+    </a-form-item> -->
+        <!-- <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
+      <a-button type="primary" @click="onSubmit">Create</a-button>
+      <a-button style="margin-left: 10px">Cancel</a-button>
+    </a-form-item> -->
+    </a-form>
+
+
+
+</template>
+
+<script setup lang='ts'>
+import { onMounted, reactive, ref, toRaw, UnwrapRef, watch } from 'vue';
+import * as cameraApi from '@/axios/cameraBase/cameraApi';
+import Msg from '@/utils/message';
+interface FormState {
+    id?: number
+    name: string;
+    isGroup: boolean;
+    cbCameraId: number | null
+    parentId: number | null
+    isDelete: boolean
+}
+const props = defineProps({
+    editData: Object
+});
+let labelCol = { span: 6 }
+let wrapperCol = { span: 14 }
+const formState: UnwrapRef<FormState> = reactive({
+    id: 0,
+    name: '',
+    isGroup: true,
+    cbCameraId: null,
+    parentId: null,
+    isDelete: false
+});
+
+//新增
+function add() {
+    formState.id = Number(String(new Date().getTime()) + parseInt(Math.random() * 10000 + ""))
+    console.log(toRaw(formState));
+    return cameraApi.AddNode(toRaw(formState)).then(res => {
+        console.log(res);
+        if (res.data.code == 200) {
+            Msg.success('添加成功')
+            return true
+        }
+        else {
+            Msg.error('添加失败,' + res.data.message)
+            return false
+        }
+    }).catch((err: any) => {
+        Msg.error('添加失败,' + err)
+        return false
+    })
+}
+
+
+
+function cameraChange(value: any) {
+    formState.cbCameraId = value
+}
+function nodeChange(value: any) {
+    formState.parentId = value
+}
+
+//获取 CbCameraParamsId
+const parmasList = ref([])
+const nodeList = ref([])
+function getCbCameraList() {
+    cameraApi.GetList().then(res => {
+        // console.log("CbCameraParamsId",res);
+        if (res.data.data.length != 0) {
+            parmasList.value = res.data.data.map((item: any, i: number) => ({ label: item.name, value: item.id }))
+        }
+    })
+    cameraApi.GetNodeList().then(res => {
+        // console.log("CbCameraParamsId",res);
+        if (res.data.data.length != 0) {
+            nodeList.value = res.data.data.map((item: any, i: number) => ({ label: item.name, value: item.id }))
+        }
+    })
+
+}
+
+//暴露方法
+defineExpose({
+    add,
+})
+
+//编辑/新增
+onMounted(() => {
+
+    console.log("收到了", props.editData);
+    if (props.editData) {
+        formState.parentId = props.editData.id
+    }
+    //获取 CbCameraParamsId
+    getCbCameraList()
+
+})
+
+</script>
+
+<style lang="less" scoped>
+:deep(.ant-input),
+:deep(.ant-select-item-option-content),
+:deep(.ant-select-selection-item) {
+    color: #000;
+}
+</style>

src/views/page/aside/cameraLeftMenu.vue

@@ -18,7 +18,8 @@
                         <span>{{ title }}</span>
                         <template #overlay>
                             <a-menu @click="({ key: menuKey }) => onContextMenuClick(treeKey, menuKey)">
-                                <a-menu-item key="open">打开</a-menu-item>
+                                <!-- <a-menu-item key="open">打开</a-menu-item> -->
+                                <a-menu-item key="add" v-if="NodeTreeItem?.isGroup">新增</a-menu-item>
                                 <a-menu-item key="close">关闭</a-menu-item>
                                 <a-menu-item key="delete">删除</a-menu-item>
                             </a-menu>
@@ -28,6 +29,10 @@
             </a-tree>
         </div>
     </div>
+    <a-modal v-model:visible="visible" title="设置表单" width="40%" @ok="handleOk" @cancel="handelCancel"
+        :maskClosable="false" destroyOnClose>
+        <cameraNodeModal ref="childRef" :editData="NodeTreeItem"></cameraNodeModal>
+    </a-modal>
 </template>
 
 <script setup lang='ts'>
@@ -35,10 +40,12 @@ import { ref, onMounted, onUnmounted, watch } from "vue";
 import { useStore } from '@/store/index';
 import * as cameraApi from '@/axios/cameraBase/cameraApi';
 import Msg from "@/utils/message";
+import cameraNodeModal from '@/views/page/aside/leftMenuItem/cameraNodeModal.vue'
 let piniaStore = useStore();
 const NodeTreeItem = ref()
 let searchStr = ref('');
 const expandedKeys = ref<any[]>([]);
+const visible = ref(false)
 const treeData = ref<any>([
     // {
     //     title: '视频监控',
@@ -56,7 +63,8 @@ const treeData = ref<any>([
     //     ],
     // }
 ]);
-
+//模态框方法
+const childRef = ref();
 
 
 onMounted(() => {
@@ -77,11 +85,23 @@ watch(searchStr, (newVal, oldVal) => {
     });
     expandedKeys.value = expandedKeyArr
 })
+function handleOk() {
+    childRef.value.add().then((res: any) => {
+        if (res) {
+            loadTreeData()
+            visible.value = false
+        }
+    })
+
+}
+function handelCancel() { visible.value = false }
 //右键点击事件    
 function onRightClick({ node }: any) {
+
     NodeTreeItem.value = {
         cbCameraId: node.cbCameraId,
         isGroup: node.isGroup,
+        children: node.children,
         id: node.key,
         title: node.title,
         key: node.key,
@@ -89,27 +109,34 @@ function onRightClick({ node }: any) {
 }
 const onContextMenuClick = (treeKey: string, menuKey: string) => {
     // console.log(`treeKey: ${treeKey}, menuKey: ${menuKey},NodeTreeItem.value:`,NodeTreeItem.value);
-    if (menuKey.includes("open")) {
+    // if (menuKey.includes("open")) {
-        //防止添加多个key值，再次点击不能关闭。数组去重
+    //     //防止添加多个key值，再次点击不能关闭。数组去重
-        let arr = [...expandedKeys.value]
+    //     let arr = [...expandedKeys.value]
-        arr.push(treeKey)
+    //     arr.push(treeKey)
-        arr = [...new Set(arr)]
+    //     arr = [...new Set(arr)]
-        expandedKeys.value = arr
+    //     expandedKeys.value = arr
-        piniaStore.updateCurSelectKey(NodeTreeItem.value.cbCameraId.toString())
+    //     piniaStore.updateCurSelectKey(NodeTreeItem.value.cbCameraId.toString())
-    } else if (menuKey.includes("close")) {
+    // } else 
+    if (menuKey.includes("close")) {
         piniaStore.updateCloseVideoKey(NodeTreeItem.value.cbCameraId.toString())
         expandedKeys.value = expandedKeys.value.filter((item: any) => {
             return item != treeKey
         })
     } else if (menuKey.includes("delete")) {
-        console.log(`treeKey: ${treeKey}, menuKey: ${menuKey}`);
+        if (NodeTreeItem.value.isGroup && NodeTreeItem.value.children.length != 0) {
+            Msg.info("请先删除子节点")
+            return
+        }
         cameraApi.DeleteNode({ id: treeKey }).then((res: any) => {
             if (res.data.data) {
-                console.log(res);
                 Msg.success("删除成功")
+                piniaStore.updateCloseVideoKey(NodeTreeItem.value.cbCameraId.toString())
                 loadTreeData()
+
             }
         })
+    } else if (menuKey.includes("add")) {
+        visible.value = true
     }
 
 

src/views/page/aside/rightMenuItem/cameraEditModal.vue

@@ -215,4 +215,7 @@ onMounted(() => {
 :deep(.ant-input) {
   color: #000;
 }
+:deep(.ant-select-item-option-content),:deep(.ant-select-selection-item){
+    color: #000;
+}
 </style>

src/views/page/aside/rightMenuItem/userEditModal.vue

@@ -175,4 +175,7 @@ onMounted(() => {
 :deep(.ant-input) {
   color: #000;
 }
+:deep(.ant-select-item-option-content),:deep(.ant-select-selection-item){
+    color: #000;
+}
 </style>