用户设置

src/views/page/Aside/cameraRightMenu.vue

@@ -28,9 +28,9 @@
         <a-modal 
             v-model:visible="visible" 
             title="用户设置" 
-            @ok="handleOk"
             width="90%"
             wrapClassName="full-modal"
+            :footer="null"
         >
             <userEdit></userEdit>
         </a-modal>
@@ -45,9 +45,7 @@ const visible = ref(false)
 function openUserEdit(){  
     visible.value = !visible.value
 }
-function handleOk(){
+
-    visible.value = false;
-}
 </script>
 
 <style scoped lang='less'>

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

@@ -1,14 +1,9 @@
 <template>
     <div class="user-edit">
         <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
-    <Table
+        <Table class="ant-table-striped" size="middle" :columns="columns" :data-source="data"
-        class="ant-table-striped"
-        size="middle"
-        :columns="columns"
-        :data-source="data"
             :rowClassName="(record: any, index: number) => (index % 2 === 1 ? 'table-striped' : undefined)"
-        :pagination="pagination"
+            :pagination="pagination">
-    >
             <template #action="{ record }">
                 <a href="#" @click="edit_(record)">编辑</a>
                 <Popconfirm v-if="data.length" title="确定删除吗?" ok-text="确定" cancel-text="取消"
@@ -21,18 +16,13 @@
     </div>
 
     <!-- 弹出框 -->
-    <a-modal 
+    <a-modal v-model:visible="visible" title="设置表单" width="40%" @ok="handleOk" destroyOnClose>
-        v-model:visible="visible" 
+        <userEditModal ref="childRef" :editData="editData"></userEditModal>
-        title="设置表单" 
-        width="40%"
-        @ok="handleOk"
-    >
-    <userEditModal @handleOk='handleOk'></userEditModal>
     </a-modal>
 </template>
 
 <script setup lang='ts'>
-import { ref } from"vue";
+import { onMounted, ref, watch } from "vue";
 import * as cameraApi from '@/axios/cameraBase/cameraApi';
 import userEditModal from '@/views/page/aside/rightMenuItem/userEditModal.vue'
 import {
@@ -171,27 +161,56 @@ function loadTreeData() {
                 return item
             })
             pagination.value.total = list.length
-        console.log(list);
+            // console.log(list);
 
             data.value = list
         }
     });
 }
+
+
+onMounted(() => {
     loadTreeData()
-function edit_(item:any){
+})
+
+
 
+//编辑
+let editData = ref()
+function edit_(item: any) {
+    // console.log(item);
+    editData.value = item
+    visible.value = true
 }
+
 //添加
 let visible = ref();
 function handleAdd() {
     visible.value = true;
 }
 //模态框方法
-const handleOk = (e: MouseEvent) => {
+const childRef = ref(null);
-      console.log(e);
+const handleOk = async (e: MouseEvent) => {
+    //   console.log(e);
+    let result
+    if (editData.value == null) {
+        result = await childRef.value.add();
+    }
+    else {
+        result = await childRef.value.edit();
+    }
+    //   console.log("result",result);
+    if (result) { //成功关闭弹窗
         visible.value = false;
-    };
        
+    }
+    else {
+        visible.value = true;
+    }
+    //清空
+    editData.value = null
+};
+//删除
 function del_(key: any, index: number) {
     cameraApi.Delete({ id: key }).then((res: any) => {
         let resData = res.data
@@ -207,6 +226,13 @@ function del_(key:any,index:number){
         }
     })
 }
+
+
+//监听 重新获取
+watch(visible, (nv, ov) => {
+    loadTreeData()
+})
+
 </script>
 
 <style scoped lang='less'>
@@ -215,9 +241,11 @@ function del_(key:any,index:number){
     // background-color: #001529;
     height: 100%;
 }
+
 .ant-table-striped :deep(.table-striped) td {
     background-color: #fafafa;
 }
+
 :deep(.ant-table-cell) {
     color: #000 !important;
 }

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

@@ -38,7 +38,9 @@
 </template>
 
 <script setup lang='ts'>
-import { reactive, toRaw, UnwrapRef } from 'vue';
+import { onMounted, reactive, toRaw, UnwrapRef, watch } from 'vue';
+import * as cameraApi from '@/axios/cameraBase/cameraApi';
+import Msg from '@/utils/message';
 interface FormState {
   name: string;
   ip: string;
@@ -50,7 +52,7 @@ interface FormState {
   remark: string;
 }
 const props = defineProps({
-    handleOk: Function
+  editData: Object
 });
 
 let labelCol = { span: 6 }
@@ -65,21 +67,49 @@ const formState: UnwrapRef<FormState> = reactive({
   state: false,
   remark: '',
 });
-    const onSubmit = () => {
-      console.log('submit!', toRaw(formState));
-    };
 
-//提交
+//新增
-function submit(){
+function add() {
+  console.log('新增!', toRaw(formState));
+  return cameraApi.Add(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 edit() {
+  console.log('编辑!', toRaw(formState));
+}
+
+//暴露方法
+defineExpose({
+  add,
+  edit
+})
+
+//编辑/新增
+onMounted(() => {
+  console.log("收到了", props.editData);
+  if (props.editData != null || props.editData != undefined){
     
   }
 
+})
 
 </script>
 
 <style lang="less" scoped>
-
 :deep(.ant-input) {
   color: #000;
 }