feat: 添加弹窗，锁定删除

src/router/index.js

@@ -234,7 +234,7 @@ export const dynamicRoutes = [{
       }
     }]
   },
-  // 设备升级ß
+  // 设备升级
   {
     path: '/device',
     component: Layout,

src/utils/dilog/ComfirmDialog.js

@@ -0,0 +1,44 @@
+{
+  /* <template>  
+    <div>  
+      <button @click="showDialog">删除项目</button>  
+      <ConfirmDialog  
+        :visible.sync="dialogVisible"  
+        title="确认删除"  
+        message="您确定要删除这个项目吗？"  
+        confirmText="删除"  
+        :onConfirm="handleDelete"  
+        :onCancel="handleCancel"  
+      />  
+    </div>  
+  </template>  
+    
+  <script>  
+  import ConfirmDialog from './ConfirmDialog.vue';  
+    
+  export default {  
+    components: {  
+      ConfirmDialog  
+    },  
+    data() {  
+      return {  
+        dialogVisible: false  
+      };  
+    },  
+    methods: {  
+      showDialog() {  
+        this.dialogVisible = true;  
+      },  
+      handleDelete() {  
+        // 执行删除操作  
+        console.log('项目已删除');  
+        // 可以在这里调用 API 或其他逻辑  
+      },  
+      handleCancel() {  
+        // 取消操作  
+        console.log('删除已取消');  
+      }  
+    }  
+  };  
+  </script> */
+}

src/utils/dilog/ComfirmDialog.vue

@@ -0,0 +1,98 @@
+<template>
+  <div v-if="visible" class="confirm-dialog-overlay">
+    <div class="confirm-dialog">
+      <h3>{{ title }}</h3>
+      <p>{{ message }}</p>
+      <div class="confirm-dialog-buttons">
+        <button @click="handleCancel">取消</button>
+        <button @click="handleConfirm" class="confirm-button">
+          {{ confirmText }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>  
+    
+  <script>
+export default {
+  name: "ConfirmDialog",
+  props: {
+    visible: {
+      type: Boolean,
+      required: true,
+    },
+    title: {
+      type: String,
+      default: "确认",
+    },
+    message: {
+      type: String,
+      default: "您确定要继续吗？",
+    },
+    confirmText: {
+      type: String,
+      default: "确定",
+    },
+    onConfirm: {
+      type: Function,
+      required: true,
+    },
+    onCancel: {
+      type: Function,
+      required: true,
+    },
+  },
+  methods: {
+    handleConfirm() {
+      this.onConfirm();
+      this.$emit("update:visible", false);
+    },
+    handleCancel() {
+      this.onCancel();
+      this.$emit("update:visible", false);
+    },
+  },
+};
+</script>  
+    
+  <style scoped>
+.confirm-dialog-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.confirm-dialog {
+  background: white;
+  padding: 20px;
+  border-radius: 5px;
+  text-align: center;
+  max-width: 400px;
+  width: 100%;
+}
+
+.confirm-dialog-buttons {
+  margin-top: 20px;
+}
+
+.confirm-button {
+  background-color: #f44336;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  cursor: pointer;
+  margin-left: 10px;
+}
+
+.confirm-button:hover {
+  background-color: #da190b;
+}
+</style>
+
+

src/views/device/version/index.vue

@@ -1,3 +1,6 @@
+
+
+   <!-- 设备升级 -->
 <template>
   <div class="app-container">
     <!-- 搜索 -->
@@ -6,54 +9,109 @@
         <el-input v-model="form.title" placeholder="请输入升级标题" clearable />
       </el-form-item>
       <el-form-item label="设备型号：">
-        <el-select v-model="form.clientTypeId" placeholder="请选择设备型号" filterable clearable>
-          <el-option v-for="item in devOptions" :key="item.value" :label="item.label"
-            :value="item.value" />
+        <el-select
+          v-model="form.clientTypeId"
+          placeholder="请选择设备型号"
+          filterable
+          clearable
+        >
+          <el-option
+            v-for="item in devOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
         </el-select>
       </el-form-item>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-search" @click="getSearch">搜索</el-button>
+        <el-button type="primary" icon="el-icon-search" @click="getSearch"
+          >搜索</el-button
+        >
         <el-button icon="el-icon-refresh" @click="getRefresh">重置</el-button>
-        <el-button type="primary" icon="el-icon-plus" plain @click="getChange()"
-          v-hasPermi="['device:version:add']">新增</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          plain
+          @click="getChange()"
+          v-hasPermi="['device:version:add']"
+          >新增</el-button
+        >
       </el-form-item>
     </el-form>
     <!-- 列表 -->
     <el-table :data="tableData" v-loading="loading">
       <el-table-column prop="id" label="型号ID" align="center" />
-      <el-table-column prop="title" label="升级标题" align="center" show-overflow-tooltip />
-      <el-table-column prop="deviceTypeName" label="设备名称" align="center" show-overflow-tooltip />
-      <el-table-column prop="type" label="设备模式" align="center" :formatter="typeFormatter" />
+      <el-table-column
+        prop="title"
+        label="升级标题"
+        align="center"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        prop="deviceTypeName"
+        label="设备名称"
+        align="center"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        prop="type"
+        label="设备模式"
+        align="center"
+        :formatter="typeFormatter"
+      />
       <el-table-column prop="version" label="版本号" align="center" />
       <el-table-column label="下载路径" align="center" show-overflow-tooltip>
         <template slot-scope="scope">
-          <el-link :href="scope.row.url" :underline="false">{{ scope.row.url }}</el-link>
+          <el-link :href="scope.row.url" :underline="false">{{
+            scope.row.url
+          }}</el-link>
         </template>
       </el-table-column>
       <el-table-column prop="userTypeValue" label="升级对象" align="center" />
-      <el-table-column prop="enforcementValue" label="APP强制升级" align="center" />
-      <el-table-column prop="deviceIsEnforcement" label="设备强制升级" align="center" />
+      <el-table-column
+        prop="enforcementValue"
+        label="APP强制升级"
+        align="center"
+      />
+      <el-table-column
+        prop="deviceIsEnforcement"
+        label="设备强制升级"
+        align="center"
+      />
       <el-table-column prop="updateTimeStr" label="更新时间" align="center" />
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button type="text" @click="getChange(scope.row.id)" v-hasPermi="['device:version:edit']">
+          <el-button
+            type="text"
+            @click="getChange(scope.row.id)"
+            v-hasPermi="['device:version:edit']"
+          >
             编辑
           </el-button>
-          <el-button type="delete" @click="getDelete(scope.row.id)" v-hasPermi="['device:version:delete']">
+          <el-button
+            type="delete"
+            @click="getDelete(scope.row.id)"
+            v-hasPermi="['device:version:delete']"
+          >
             删除
           </el-button>
         </template>
       </el-table-column>
     </el-table>
     <!-- 分页 -->
-    <pagination v-show="total>0" :total="total" :page.sync="form.pageIndex" :limit.sync="form.pageSize"
-      @pagination="getList" />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="form.pageIndex"
+      :limit.sync="form.pageSize"
+      @pagination="getList"
+    />
   </div>
 </template>
 
 <script>
-import { getPageList, getVersionDelete } from '@/api/device/version'
-import { devMixin, devModeMixin } from '@/mixin/index'
+import { getPageList, getVersionDelete } from "@/api/device/version";
+import { devMixin, devModeMixin } from "@/mixin/index";
 export default {
   mixins: [devMixin, devModeMixin],
   data() {
@@ -63,75 +121,77 @@ export default {
       // 表单
       form: {
         pageIndex: 1,
-        pageSize: 10
+        pageSize: 10,
       },
       // 列表
       tableData: [],
       // 总数
       total: 0,
-    }
+    };
   },
   mounted() {
-    this.getDevList()
-    this.getList()
+    this.getDevList();
+    this.getList();
   },
   methods: {
     // 列表
     getList() {
-      this.loading = true
-      getPageList(this.form).then(res => {
+      this.loading = true;
+      getPageList(this.form).then((res) => {
         if (res.code === 0) {
-          this.tableData = []
-          res.data.records.forEach(i => {
+          this.tableData = [];
+          res.data.records.forEach((i) => {
             this.tableData.push({
               ...i,
-              deviceIsEnforcement: i.deviceIsEnforcement ? i.deviceIsEnforcement : '否',
-              enforcementValue: i.enforcementValue ? i.enforcementValue : '否'
-            })
-          })
-          this.total = res.data.total
-          this.loading = false
+              deviceIsEnforcement: i.deviceIsEnforcement
+                ? i.deviceIsEnforcement
+                : "否",
+              enforcementValue: i.enforcementValue ? i.enforcementValue : "否",
+            });
+          });
+          this.total = res.data.total;
+          this.loading = false;
         }
-      })
+      });
     },
     // 搜索
     getSearch() {
-      this.form.pageIndex = 1
-      this.getList()
+      this.form.pageIndex = 1;
+      this.getList();
     },
     // 重置
     getRefresh() {
       this.form = {
         pageIndex: 1,
-        pageSize: 10
-      }
-      this.getList()
+        pageSize: 10,
+      };
+      this.getList();
     },
     // 新增
     getChange(id) {
       this.$router.push({
         path: `/device/version/detail`,
         query: {
-          id: id
-        }
-      })
+          id: id,
+        },
+      });
     },
     // 删除
     getDelete(id) {
-      this.loading = true
-      getVersionDelete({ id: id }).then(res => {
+      this.loading = true;
+      getVersionDelete({ id: id }).then((res) => {
         if (res.code === 0) {
-          this.$message.success('删除成功！')
-          this.getList()
-          this.loading = false
+          this.$message.success("删除成功！");
+          this.getList();
+          this.loading = false;
         }
-      })
+      });
     },
 
     // 字典翻译
     typeFormatter(row) {
-      return this.selectDictLabel(this.devModeOptions, row.type)
-    }
-  }
-}
+      return this.selectDictLabel(this.devModeOptions, row.type);
+    },
+  },
+};
 </script>

src/views/ohplay/operation/index.vue

@@ -44,7 +44,7 @@
 </template>
 
 <script>
-import { create, list, remove, edit } from '@/api/ohplay/operation'
+import { create, edit, list, remove } from '@/api/ohplay/operation';
 export default {
   data() {
     return {