feat: 添加功能权限删除提示弹窗

src/views/device/function/index.vue

@@ -3,33 +3,59 @@
     <!-- 搜索 -->
     <el-form inline label-width="100px" size="mini" @submit.native.prevent>
       <el-form-item>
-        <el-button type="primary" icon="el-icon-plus" plain @click="getChange()"
-          v-hasPermi="['device:function:add']">新增</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          plain
+          @click="getChange()"
+          v-hasPermi="['device:function:add']"
+          >新增</el-button
+        >
       </el-form-item>
     </el-form>
     <!-- 表格 -->
     <el-table :data="tableData" v-loading="loading">
       <el-table-column label="权限ID" prop="id" align="center" />
       <el-table-column label="功能名称" prop="name" align="center" />
-      <el-table-column label="功能分类" prop="type" align="center"></el-table-column>
+      <el-table-column
+        label="功能分类"
+        prop="type"
+        align="center"
+      ></el-table-column>
       <el-table-column label="状态" align="center">
         <template slot-scope="scope">
-          <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
+          <dict-tag
+            :options="dict.type.sys_normal_disable"
+            :value="scope.row.status"
+          />
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button type="text" @click="getChange(scope.row)" v-hasPermi="['device:function:edit']">
+          <el-button
+            type="text"
+            @click="getChange(scope.row)"
+            v-hasPermi="['device:function:edit']"
+          >
             编辑
           </el-button>
-          <el-button type="delete" @click="getDelete(scope.row)" v-hasPermi="['device:function:delete']">
+          <el-button
+            type="delete"
+            @click="getDelete(scope.row)"
+            v-hasPermi="['device:function:delete']"
+          >
             删除
           </el-button>
         </template>
       </el-table-column>
     </el-table>
     <!-- 新增弹窗 -->
-    <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" :before-close="getCancel">
+    <el-dialog
+      :title="title"
+      :visible.sync="dialogVisible"
+      width="500px"
+      :before-close="getCancel"
+    >
       <el-form :model="form" :rules="rules" ref="form" label-width="100px">
         <el-form-item label="功能名称：" prop="name">
           <el-input v-model="form.name" placeholder="请输入分类名称" />
@@ -53,7 +79,7 @@
 </template>
 
 <script>
-import { list, create, edit } from "@/api/device/function";
+import { create, edit, list } from "@/api/device/function";
 export default {
   dicts: ["sys_normal_disable"],
   data() {
@@ -71,21 +97,27 @@ export default {
         status: 0,
       },
       rules: {
-        name: [{
-          required: true,
-          message: "请输入功能名称",
-          trigger: "blur"
-        }],
-        type: [{
-          required: true,
-          message: "请选择功能分类",
-          trigger: "change"
-        }],
-        status: [{
-          required: true,
-          message: "请选择状态",
-          trigger: "change"
-        }]
+        name: [
+          {
+            required: true,
+            message: "请输入功能名称",
+            trigger: "blur",
+          },
+        ],
+        type: [
+          {
+            required: true,
+            message: "请选择功能分类",
+            trigger: "change",
+          },
+        ],
+        status: [
+          {
+            required: true,
+            message: "请选择状态",
+            trigger: "change",
+          },
+        ],
       },
     };
   },
@@ -110,10 +142,10 @@ export default {
       this.form = row
         ? row
         : {
-          name: "",
-          type: "",
-          status: 0,
-        };
+            name: "",
+            type: "",
+            status: 0,
+          };
       this.title = row ? "编辑" : "新增";
     },
 
@@ -154,13 +186,19 @@ export default {
 
     // 删除
     getDelete(row) {
-      this.form = row;
-      this.form.isDelete = 1;
-      edit(this.form).then((res) => {
-        if (res.code === 0) {
-          this.$message.success("已删除！");
-          this.getList();
-        }
+      this.$confirm("是否删除？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      }).then(() => {
+        this.form = row;
+        this.form.isDelete = 1;
+        edit(this.form).then((res) => {
+          if (res.code === 0) {
+            this.$message.success("已删除！");
+            this.getList();
+          }
+        });
       });
     },
   },