feat: 处理资源平台添加一层谨慎操作提示

src/views/device/category/index.vue

@@ -37,7 +37,7 @@
           </el-button>
           <el-button
             type="delete"
-            @click="getDelete(scope.row.id)"
+            @click="getDelete(scope.row)"
             v-hasPermi="['device:category:delete']"
           >
             删除
@@ -205,11 +205,12 @@ export default {
     },
 
     // 删除
-    getDelete(id) {
+    getDelete(row) {
       var that = this;
+      var id = row.id;
       dialogCallBack(that, function () {
         that
-          .$confirm(`是否删除?`, "提示：", {
+          .$confirm(`是否删除${row.name}?`, "提示：", {
             type: "warning",
           })
           .then(() => {

src/views/device/list/index.vue

@@ -151,7 +151,7 @@
           <el-button
             v-if="scope.row.status === 2"
             type="delete"
-            @click="getDelete(scope.row.id)"
+            @click="getDelete(scope.row)"
             v-hasPermi="['device:list:delete']"
           >
             删除
@@ -172,11 +172,11 @@
 <script>
 import { change, list, remove } from "@/api/device/list";
 import {
-  devCategoryMixin,
-  devMixin,
-  devTypeMixin,
-  onOrOffMixin,
-  yesOrNoMixin,
+devCategoryMixin,
+devMixin,
+devTypeMixin,
+onOrOffMixin,
+yesOrNoMixin,
 } from "@/mixin/index";
 import { dialogCallBack } from "@/utils/DialogUtil";
 export default {
@@ -285,11 +285,12 @@ export default {
     },
 
     // 删除
-    getDelete(id) {
+    getDelete(row) {
       var that = this;
+      var id = row.id;
       dialogCallBack(that, function () {
         that
-          .$confirm("确定要删除?", {
+          .$confirm(`是否删除${row.name}?`, "提示：", {
             type: "warning",
           })
           .then(() => {

src/views/music/platform/index.vue

@@ -1,44 +1,104 @@
+<!-- 音频管理 资源平台 -->
 <template>
   <div class="app-container">
-    <el-button type="primary" icon="el-icon-plus" size="mini" @click="getDialog()"
-      v-hasPermi="['music:platform:add']">新增</el-button>
+    <el-button
+      type="primary"
+      icon="el-icon-plus"
+      size="mini"
+      @click="getDialog()"
+      v-hasPermi="['music:platform:add']"
+      >新增</el-button
+    >
     <!-- 列表 -->
     <el-table :data="tableData" v-loading="loading">
       <el-table-column type="index" label="序号" align="center" />
       <el-table-column label="资源平台" prop="name" align="center" />
-      <el-table-column label="音频类型" prop="audioType" align="center" :formatter="audioFormatter" />
-      <el-table-column label="对接方式" prop="joinType" align="center" :formatter="joinTypeFormatter" />
+      <el-table-column
+        label="音频类型"
+        prop="audioType"
+        align="center"
+        :formatter="audioFormatter"
+      />
+      <el-table-column
+        label="对接方式"
+        prop="joinType"
+        align="center"
+        :formatter="joinTypeFormatter"
+      />
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button type="text" @click="getDialog(scope.row.id)" v-hasPermi="['music:platform:edit']">编辑
+          <el-button
+            type="text"
+            @click="getDialog(scope.row.id)"
+            v-hasPermi="['music:platform:edit']"
+            >编辑
           </el-button>
-          <el-button type="delete" @click="getDelete(scope.row)" v-hasPermi="['music:platform:delete']">删除
+          <el-button
+            type="delete"
+            @click="getDelete(scope.row)"
+            v-hasPermi="['music:platform:delete']"
+            >删除
           </el-button>
         </template>
       </el-table-column>
     </el-table>
-    <pagination v-show="total>0" :total="total" :page.sync="form.pageNum" :limit.sync="form.pageSize"
-      @pagination="getList" />
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="form.pageNum"
+      :limit.sync="form.pageSize"
+      @pagination="getList"
+    />
 
     <!-- 弹窗 -->
-    <el-dialog :visible.sync="dialogVisible" :title="title" width="500px" :before-close="cancel">
-      <el-form :model="dialogForm" :rules="rules" ref="dialogForm" label-width="100px">
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :title="title"
+      width="500px"
+      :before-close="cancel"
+    >
+      <el-form
+        :model="dialogForm"
+        :rules="rules"
+        ref="dialogForm"
+        label-width="100px"
+      >
         <el-form-item label="资源平台：" prop="name">
-          <el-input v-model="dialogForm.name" placeholder="请输入资源平台名称" />
+          <el-input
+            v-model="dialogForm.name"
+            placeholder="请输入资源平台名称"
+          />
         </el-form-item>
         <el-form-item label="音频类型：" prop="audioType">
-          <el-select v-model="dialogForm.audioType" multiple placeholder="请选择音频类型">
-            <el-option v-for="item in audioOptions" :key="item.value" :value="item.value.toString()"
-              :label="item.label" />
+          <el-select
+            v-model="dialogForm.audioType"
+            multiple
+            placeholder="请选择音频类型"
+          >
+            <el-option
+              v-for="item in audioOptions"
+              :key="item.value"
+              :value="item.value.toString()"
+              :label="item.label"
+            />
           </el-select>
         </el-form-item>
         <el-form-item label="对接方式：" prop="joinType">
-          <el-select v-model="dialogForm.joinType" multiple placeholder="请选择资源对接方式">
-            <el-option v-for="item in joinTypeOptions" :key="item.value" :value="item.value.toString()"
-              :label="item.label" :disabled="item.disabled" />
+          <el-select
+            v-model="dialogForm.joinType"
+            multiple
+            placeholder="请选择资源对接方式"
+          >
+            <el-option
+              v-for="item in joinTypeOptions"
+              :key="item.value"
+              :value="item.value.toString()"
+              :label="item.label"
+              :disabled="item.disabled"
+            />
           </el-select>
         </el-form-item>
-        <el-form-item style="text-align: right;">
+        <el-form-item style="text-align: right">
           <el-button @click="cancel">取消</el-button>
           <el-button type="primary" @click="getSubmit">确定</el-button>
         </el-form-item>
@@ -48,8 +108,9 @@
 </template>
 
 <script>
-import { list, submit, detail, remove } from '@/api/music/platform'
-import { audioMixin } from '@/mixin/index'
+import { detail, list, remove, submit } from "@/api/music/platform";
+import { audioMixin } from "@/mixin/index";
+import { dialogCallBack } from "@/utils/DialogUtil";
 export default {
   mixins: [audioMixin],
   data() {
@@ -59,7 +120,7 @@ export default {
       // 列表表单
       form: {
         pageNum: 1,
-        pageSize: 10
+        pageSize: 10,
       },
       // 总数
       total: 0,
@@ -67,82 +128,103 @@ export default {
       tableData: [],
       // 弹窗
       dialogVisible: false,
-      title: '',
+      title: "",
       // 提交表单
       dialogForm: {
-        name: '',
+        name: "",
         audioType: [],
-        joinType: []
+        joinType: [],
       },
       // 校验
       rules: {
-        name: [{
-          required: true, message: '请输入资源平台名称', trigger: 'blur'
-        }, {
-          max: 20, message: '名称不得超过20个字符', trigger: 'blur'
-        }],
-        audioType: [{
-          required: true, message: '请选择音频类型', trigger: 'change'
-        }],
-        joinType: [{
-          required: true, message: '请选择资源对接方式', trigger: 'change'
-        }]
+        name: [
+          {
+            required: true,
+            message: "请输入资源平台名称",
+            trigger: "blur",
+          },
+          {
+            max: 20,
+            message: "名称不得超过20个字符",
+            trigger: "blur",
+          },
+        ],
+        audioType: [
+          {
+            required: true,
+            message: "请选择音频类型",
+            trigger: "change",
+          },
+        ],
+        joinType: [
+          {
+            required: true,
+            message: "请选择资源对接方式",
+            trigger: "change",
+          },
+        ],
       },
       // 对接方式
-      joinTypeOptions: [{
-        value: 1,
-        label: 'API接口'
-      }, {
-        value: 2,
-        label: '本地管理'
-      }, {
-        value: 3,
-        label: '小程序'
-      }]
-    }
+      joinTypeOptions: [
+        {
+          value: 1,
+          label: "API接口",
+        },
+        {
+          value: 2,
+          label: "本地管理",
+        },
+        {
+          value: 3,
+          label: "小程序",
+        },
+      ],
+    };
   },
   watch: {
-    'dialogForm.joinType'(val) {
+    "dialogForm.joinType"(val) {
       if (val) {
-        this.joinTypeOptions[1].disabled = val.findIndex(i => i === '1') !== -1 ? true : false
-        this.joinTypeOptions[0].disabled = val.findIndex(i => i === '2') !== -1 ? true : false
+        this.joinTypeOptions[1].disabled =
+          val.findIndex((i) => i === "1") !== -1 ? true : false;
+        this.joinTypeOptions[0].disabled =
+          val.findIndex((i) => i === "2") !== -1 ? true : false;
       }
-    }
+    },
   },
   mounted() {
-    this.getList()
+    this.getList();
   },
   methods: {
     // 列表
     getList() {
-      this.loading = true
-      list(this.form).then(res => {
+      this.loading = true;
+      list(this.form).then((res) => {
         if (res.code === 0) {
-          this.tableData = res.data.records
-          this.total = res.data.total
-          this.loading = false
+          this.tableData = res.data.records;
+          this.total = res.data.total;
+          this.loading = false;
         }
-      })
+      });
     },
     // 弹窗
     getDialog(id) {
-      this.dialogVisible = true
-      this.title = id ? '编辑' : '新增'
+      this.dialogVisible = true;
+      this.title = id ? "编辑" : "新增";
       if (id) {
-        detail(id).then(res => {
+        detail(id).then((res) => {
           if (res.code === 0) {
-            this.dialogForm = res.data
-            this.dialogForm.audioType = res.data.audioType.split(',')
-            this.dialogForm.joinType = res.data.joinType.split(',')
+            this.dialogForm = res.data;
+            this.dialogForm.audioType = res.data.audioType.split(",");
+            this.dialogForm.joinType = res.data.joinType.split(",");
           }
-        })
+        });
       }
     },
 
     // 取消
     cancel() {
-      this.dialogVisible = false
-      this.dialogForm = {}
+      this.dialogVisible = false;
+      this.dialogForm = {};
       this.$refs.dialogForm.resetFields();
     },
 
@@ -150,44 +232,64 @@ export default {
     getSubmit() {
       this.$refs.dialogForm.validate((valid) => {
         if (valid) {
-          this.dialogForm.audioType = this.dialogForm.audioType.join(',')
-          this.dialogForm.joinType = this.dialogForm.joinType.join(',')
-          submit(this.dialogForm).then(res => {
-            if (res.code === 0) {
-              this.$message.success(`${this.title}成功！`)
-              this.dialogVisible = false
-              this.getList()
-            }
-          }).catch(() => {
-            this.dialogForm.id ? this.dialogVisible = false : this.$refs.dialogForm.resetFields()
-          })
+          this.dialogForm.audioType = this.dialogForm.audioType.join(",");
+          this.dialogForm.joinType = this.dialogForm.joinType.join(",");
+          submit(this.dialogForm)
+            .then((res) => {
+              if (res.code === 0) {
+                this.$message.success(`${this.title}成功！`);
+                this.dialogVisible = false;
+                this.getList();
+              }
+            })
+            .catch(() => {
+              this.dialogForm.id
+                ? (this.dialogVisible = false)
+                : this.$refs.dialogForm.resetFields();
+            });
         } else {
-          return false
+          return false;
         }
-      })
+      });
     },
 
     // 删除
     getDelete(row) {
-      this.$confirm(`是否要删除${row.name}?`, '警告', {
-        type: 'warning'
-      }).then(() => {
-        remove(row.id).then(res => {
-          if (res.code === 0) {
-            this.$message.success('删除成功')
-            this.getList()
-          }
-        })
-      }).catch(() => { })
+      var that = this;
+      dialogCallBack(that, function () {
+        that
+          .$confirm(`是否删除${row.name}?`, "提示：", {
+            type: "warning",
+          })
+          .then(() => {
+            remove(row.id).then((res) => {
+              if (res.code === 0) {
+                that.$message.success("删除成功");
+                that.getList();
+              }
+            });
+          })
+          .catch(() => {});
+      });
     },
 
     // 字典翻译
     audioFormatter(row) {
-      return row.audioType ? row.audioType.split(',').map(i => this.selectDictLabel(this.audioOptions, i)).join(',') : '/'
+      return row.audioType
+        ? row.audioType
+            .split(",")
+            .map((i) => this.selectDictLabel(this.audioOptions, i))
+            .join(",")
+        : "/";
     },
     joinTypeFormatter(row) {
-      return row.joinType ? row.joinType.split(',').map(i => this.selectDictLabel(this.joinTypeOptions, i)).join(',') : '/'
-    }
-  }
+      return row.joinType
+        ? row.joinType
+            .split(",")
+            .map((i) => this.selectDictLabel(this.joinTypeOptions, i))
+            .join(",")
+        : "/";
+    },
+  },
 };
 </script>