用户设置

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,38 +1,28 @@
 <template>
-<div class="user-edit">
+    <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"
+            :rowClassName="(record: any, index: number) => (index % 2 === 1 ? 'table-striped' : undefined)"
-        size="middle"
+            :pagination="pagination">
-        :columns="columns"
-        :data-source="data"
-        :rowClassName="(record:any, index:number) => (index % 2 === 1 ? 'table-striped' : undefined)"
-        :pagination="pagination"
-    >
             <template #action="{ record }">
                 <a href="#" @click="edit_(record)">编辑</a>
                 <Popconfirm v-if="data.length" title="确定删除吗?" ok-text="确定" cancel-text="取消"
-                @confirm="del_(record.id, record.key-1)">
+                    @confirm="del_(record.id, record.key - 1)">
                     <Divider type="vertical" />
-                <a href="#" >删除</a>
+                    <a href="#">删除</a>
                 </Popconfirm>
             </template>
         </Table>
-</div>
+    </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 {
@@ -59,7 +49,7 @@ const columns = [
         },
     },
 ];
-let data =ref();
+let data = ref();
 // let data =  [
 //   {
 //     key: '1',
@@ -165,41 +155,70 @@ const pagination = ref({
 function loadTreeData() {
     cameraApi.GetList().then((res: any) => {
         let list: Array<any> = res.data.data;
-       if(list.length!=0){
+        if (list.length != 0) {
-        list=list.map((item:any,index:number)=>{
+            list = list.map((item: any, index: number) => {
-            item.key=index+1
+                item.key = index + 1
                 return item
             })
-        pagination.value.total=list.length
+            pagination.value.total = list.length
-        console.log(list);
+            // console.log(list);
 
-        data.value=list
+            data.value = list
         }
     });
 }
-loadTreeData()
-function edit_(item:any){
 
+
+onMounted(() => {
+    loadTreeData()
+})
+
+
+
+//编辑
+let editData = ref()
+function edit_(item: any) {
+    // console.log(item);
+    editData.value = item
+    visible.value = true
 }
+
 //添加
 let visible = ref();
-function handleAdd(){
+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;
-    };
        
-function del_(key:any,index:number){
+    }
-    cameraApi.Delete({id:key}).then((res:any)=>{
+    else {
-        let resData=res.data
+        visible.value = true;
-        if(resData){
+    }
+    //清空
+    editData.value = null
+};
+//删除
+function del_(key: any, index: number) {
+    cameraApi.Delete({ id: key }).then((res: any) => {
+        let resData = res.data
+        if (resData) {
             Msg.success("删除成功")
-            data.value.splice(index,1)
+            data.value.splice(index, 1)
-            data.value=data.value.map((item:any,i:number)=>{
+            data.value = data.value.map((item: any, i: number) => {
-                if(index<item.key){
+                if (index < item.key) {
                     item.key--
                 }
                 return item
@@ -207,18 +226,27 @@ function del_(key:any,index:number){
         }
     })
 }
+
+
+//监听 重新获取
+watch(visible, (nv, ov) => {
+    loadTreeData()
+})
+
 </script>
 
 <style scoped lang='less'>
-.user-edit{
+.user-edit {
     padding: 20px;
     // background-color: #001529;
     height: 100%;
 }
+
 .ant-table-striped :deep(.table-striped) td {
     background-color: #fafafa;
 }
-:deep(.ant-table-cell){
+
+:deep(.ant-table-cell) {
     color: #000 !important;
 }
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-<a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
+  <a-form :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
     <a-form-item label="相机名称">
       <a-input v-model:value="formState.name" />
     </a-form-item>
@@ -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,11 +52,11 @@ interface FormState {
   remark: string;
 }
 const props = defineProps({
-    handleOk: Function
+  editData: Object
 });
 
-let labelCol= { span: 6 }
+let labelCol = { span: 6 }
-let wrapperCol= { span: 14 }
+let wrapperCol = { span: 14 }
 const formState: UnwrapRef<FormState> = reactive({
   name: '',
   ip: '',
@@ -64,23 +66,51 @@ const formState: UnwrapRef<FormState> = reactive({
   userType: undefined,
   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) {
-:deep(.ant-input ){
   color: #000;
 }
 </style>