谁懂啊,一个按钮写了两天!!!

我想通过按钮来删除数据,可是操作能成功执行,就是执行之后页面不加载,各位道友,请指点我一下。

按钮:

#请加扣扣
print("3282880696")
<el-button type="danger" icon="warning"  link @click="deleteMonitor(scope.row)">
  删除
</el-button>
<script setup lang="ts">
import { log } from 'console';
import { MonitorForm } from "@/api/monitor/types";
import { getmonitorList, updateMonitorForm } from '@/api/monitor';

import router from "@/router";
import { formatDate } from "@/utils/date";

import { getUserList, getUserRoleList, updateUser, updateUserStatus } from '@/api/user';
import { User, UserForm, UserQuery, UserRole } from '@/api/user/types';
import { messageConfirm, notifySuccess } from '@/utils/modal';
import { FormInstance, FormRules } from 'element-plus';
import { onMounted, reactive, ref, toRefs } from 'vue';

//删除----------------------------------------------------------------------------
import axios from 'axios';

const deleteMonitor = (monitor, update) => { // 添加 update 作为参数传递进来
  console.log('Deleting monitor:', monitor); // 记录要删除的监视器对象

  // 在发送请求之前,设置 update.value 为 true
  if (typeof update !== 'undefined') {
    update.value = false;
    console.log('Update value set to false'); // 记录更新值被设置为 false
  }

  // 发送 DELETE 请求到后端路由,使用 monitor.id 作为参数
  axios.delete(`http://127.0.0.1:5500/api/monitors/${monitor.id}/delete`)
    .then((response) => {
      console.log('Monitor deleted successfully', response.data); // 记录成功响应
      getList(); // 刷新列表

      // 假设需要通知用户删除成功
      notifySuccess('删除成功');

      // 重置 update.value,确保它是在当前作用域可访问的
      if (typeof update !== 'undefined') {
         // 刷新列表
        update.value = true;
        console.log('重置失败'); // 记录更新值的重置

      } else {
        console.log('没找到值'); // 记录更新值的状态
      }

      // 假设需要刷新监控对象列表
      getList();
      console.log('刷新列表');
      update.value = true;

    })
    .catch((error) => {
      console.error('Error deleting monitor:', error); // 记录错误详情

      // 假设删除失败时需要重置 update.value
      if (typeof update !== 'undefined') {
        update.value = false; // 如果删除失败,重置 update.value
      }

      // 假设需要通知用户删除失败
      // notifyError('Error deleting monitor');
    });
     update.value = true;
     console.log('页面更i性能成功');
};
//删除----------------------------------------------------------------------------

const FormRef = ref<FormInstance>();
const rules = reactive<FormRules>({
  username: [{ required: true, message: "请输入昵称", trigger: "blur" }],
  roleIdList: [{ required: true, message: "角色不能为空", trigger: "click" }]
});


const data = reactive({
  count: 0,
  update: false,
  loading: false,
  queryParams: {
    current: 1,
    size: 10,
  } as UserQuery,
  typeList: [
    {
      value: 1,
      label: "邮箱",
    },
    {
      value: 2,
      label: "QQ",
    },
    {
      value: 3,
      label: "Gitee",
    },
    {
      value: 4,
      label: "Github",
    },
  ],
  userList: [] as User[],
  userForm: {} as UserForm,
  userRoleList: [] as UserRole[],
  roleIdList: [] as string[],
  MonitorList: [] as MonitorForm[],
  monitorForm: {} as MonitorForm,
});
const {
  count,
  update,
  loading,
  queryParams,
  typeList,
  userList,
  userForm,
  userRoleList,
  roleIdList,
  MonitorList,
  monitorForm,
} = toRefs(data);

// 跳转
const go = (monitor: MonitorForm) => {
  const params = {
    id: monitor.id,
    video: monitor.video,
    person: monitor.person,
    mode: monitor.mode,
    location: monitor.location,
    is_alarm: monitor.is_alarm,
    remark: monitor.remark,
    threshold: monitor.threshold,
    url: monitor.url,
  };

  router.push({ path: "/monitor", query: params });
};

const openModel = (monitor: MonitorForm) => {

  monitorForm.value.id = monitor.id;
  monitorForm.value.threshold = monitor.threshold;
  monitorForm.value.location = monitor.location;
  monitorForm.value.mode = monitor.mode;
  monitorForm.value.person = monitor.person;
  monitorForm.value.video = monitor.video;
  monitorForm.value.url = monitor.url;
  monitorForm.value.remark = monitor.remark;
  monitorForm.value.is_alarm = false;

  update.value = true; //更新数据
};


const submitForm = () => {
  FormRef.value?.validate((valid) => {
    if (valid) {
      updateMonitorForm(monitorForm.value).then(({ data }) => {
        console.log(data)
        if (data.code == 200) {
          notifySuccess(data.msg);
          getList();
        }
        update.value = false;
      })
    }
  })
};
//修改后getlist--------------------------------------
const getList = () => {
  loading.value = true;
  getmonitorList(queryParams.value.current).then(({ data }) => {
    console.log(data)
    MonitorList.value = data.data;
    console.log(MonitorList.value)
    //update.value = true; //更新数据
    loading.value = false;
  })
};
//修改后getlist--------------------------------------


// 搜索方法
const handleQuery = () => {
  queryParams.value.current = 1;
  // getList();
};

onMounted(() => {
  getList();
});

</script>

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值