feat: 处理资源平台设备文章、设备音乐、爱听弹窗添加一层谨慎操作提示

src/views/device/article/index.vue

@@ -1,42 +1,93 @@
+
+<!-- 设备文章 -->
 <template>
   <div class="app-container">
     <!-- 搜索 -->
     <el-form inline size="mini">
       <el-form-item label="设备：">
-        <el-select v-model="form.deviceId" filterable placeholder="请选择设备" clearable>
-          <el-option v-for="item in devOptions" :key="item.value" :label="item.label" :value="item.value" />
+        <el-select
+          v-model="form.deviceId"
+          filterable
+          placeholder="请选择设备"
+          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 label="文章状态：">
         <el-select v-model="form.status" placeholder="请选择文章状态" clearable>
-          <el-option v-for="item in disabledOptions" :key="item.value" :label="item.label"
-            :value="item.value" />
+          <el-option
+            v-for="item in disabledOptions"
+            :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="getDetail()"
-          v-hasPermi="['device:article:add']">新增</el-button>
-        <el-button type="primary" icon="el-icon-delete" @click="getDelete(deleteList)"
-          :disabled="deleteList.length > 0 ? false : true" v-hasPermi="['device:article:delete']">
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          plain
+          @click="getDetail()"
+          v-hasPermi="['device:article:add']"
+          >新增</el-button
+        >
+        <el-button
+          type="primary"
+          icon="el-icon-delete"
+          @click="getDelete(deleteList)"
+          :disabled="deleteList.length > 0 ? false : true"
+          v-hasPermi="['device:article:delete']"
+        >
           批量删除
         </el-button>
       </el-form-item>
     </el-form>
     <!-- 列表 -->
-    <el-table :data="tableData" v-loading="loading" @selection-change="handleSelectionChange">
+    <el-table
+      :data="tableData"
+      v-loading="loading"
+      @selection-change="handleSelectionChange"
+    >
       <el-table-column type="selection" align="center" />
       <el-table-column label="文章标题" prop="title" align="center" />
-      <el-table-column label="设备" prop="linkDevice" align="center" :formatter="devFormatter"
-        show-overflow-tooltip />
-      <el-table-column label="文章状态" prop="status" align="center" :formatter="statusFormatter" />
+      <el-table-column
+        label="设备"
+        prop="linkDevice"
+        align="center"
+        :formatter="devFormatter"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        label="文章状态"
+        prop="status"
+        align="center"
+        :formatter="statusFormatter"
+      />
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button type="text" @click="getDetail(scope.row.id)" v-hasPermi="['device:article:edit']">
+          <el-button
+            type="text"
+            @click="getDetail(scope.row.id)"
+            v-hasPermi="['device:article:edit']"
+          >
             编辑
           </el-button>
-          <el-button type="delete" @click="getDelete(scope.row)" v-hasPermi="['device:article:delete']">
+          <el-button
+            type="delete"
+            @click="getDelete(scope.row)"
+            v-hasPermi="['device:article:delete']"
+          >
             删除
           </el-button>
         </template>
@@ -46,10 +97,11 @@
 </template>
 
 <script>
-import { list, remove } from '@/api/device/article'
-import { devMixin, disabledMixin } from '@/mixin/index'
+import { list, remove } from "@/api/device/article";
+import { devMixin, disabledMixin } from "@/mixin/index";
+import { dialogCallBack } from "@/utils/DialogUtil";
 export default {
-  name: 'Article',
+  name: "Article",
   mixins: [devMixin, disabledMixin],
   data() {
     return {
@@ -58,94 +110,106 @@ export default {
       // 表单
       form: {
         pageNum: 1,
-        pageSize: 10
+        pageSize: 10,
       },
       // 列表
       tableData: [],
       total: 0,
       // 批量删除
       deleteList: [],
-    }
+    };
   },
   mounted() {
-    this.getDevList()
-    this.getList()
+    this.getDevList();
+    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;
         }
-      })
+      });
     },
     // 搜索
     getSearch() {
-      this.form.pageNum = 1
-      this.getList()
+      this.form.pageNum = 1;
+      this.getList();
     },
     // 重置
     getRefresh() {
       this.form = {
         pageNum: 1,
-        pageSize: 10
-      }
-      this.getList()
+        pageSize: 10,
+      };
+      this.getList();
     },
     // 新增 / 编辑
     getDetail(id) {
       this.$router.push({
         path: `/device/article/detail`,
         query: {
-          id: id
-        }
-      })
+          id: id,
+        },
+      });
     },
     // 多选
     handleSelectionChange(val) {
-      this.deleteList = val
+      this.deleteList = val;
     },
+
     // 删除
     getDelete(row) {
-      let title = ''
-      let ids = ''
-      if (row.length > 0) {
-        title = '批量删除'
-        row.map(i => {
-          ids += i.id + ','
-        })
-        if (ids.length > 0) {
-          ids = ids.substr(0, ids.length - 1)
-        }
-      } else {
-        title = `删除${row.title}`
-        ids = row.id
-      }
-      this.$confirm(`是否${title}?`, '提示', {
-        type: 'warning'
-      }).then(() => {
-        remove({
-          ids: ids
-        }).then(res => {
-          if (res.code === 0) {
-            this.$message.success('删除成功！')
-            this.getList()
+      var that = this;
+      dialogCallBack(that, function () {
+        let title = "";
+        let ids = "";
+        if (row.length > 0) {
+          title = "批量删除";
+          row.map((i) => {
+            ids += i.id + ",";
+          });
+          if (ids.length > 0) {
+            ids = ids.substr(0, ids.length - 1);
           }
-        })
-      }).catch(() => { })
+        } else {
+          title = `删除${row.title}`;
+          ids = row.id;
+        }
+        that
+          .$confirm(`是否${title}?`, "提示", {
+            type: "warning",
+          })
+          .then(() => {
+            remove({
+              ids: ids,
+            }).then((res) => {
+              if (res.code === 0) {
+                that.$message.success("删除成功！");
+                that.getList();
+              }
+            });
+          })
+          .catch(() => {});
+      });
     },
 
     // 字典翻译
     devFormatter(row) {
-      return row.linkDevice ? row.linkDevice.split(',').map(i => this.selectDictLabel(this.devOptions, i)).join(',') : ''
+      return row.linkDevice
+        ? row.linkDevice
+            .split(",")
+            .map((i) => this.selectDictLabel(this.devOptions, i))
+            .join(",")
+        : "";
     },
     statusFormatter(row) {
-      return this.selectDictLabel(this.disabledOptions, row.status)
-    }
-  }
-}
+      return this.selectDictLabel(this.disabledOptions, row.status);
+    },
+  },
+};
 </script>

src/views/device/music/index.vue

@@ -1,3 +1,4 @@
+<!-- 设备音乐 -->
 <template>
   <div class="app-container">
     <!-- 搜索 -->
@@ -7,87 +8,205 @@
       </el-form-item>
       <el-form-item label="当前状态：">
         <el-select v-model="form.status" placeholder="请选择当前状态">
-          <el-option v-for="item in disabledOptions" :key="item.value" :value="item.value" :label="item.label" />
+          <el-option
+            v-for="item in disabledOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+          />
         </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="getDialog('新增')"
-          v-hasPermi="['device:music:add']">新增</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          plain
+          @click="getDialog('新增')"
+          v-hasPermi="['device:music:add']"
+          >新增</el-button
+        >
       </el-form-item>
     </el-form>
     <!-- 列表 -->
     <el-table :data="tableData" v-loading="loading">
       <el-table-column label="序号" type="index" align="center" />
-      <el-table-column label="配置名称" prop="name" align="center" show-overflow-tooltip />
-      <el-table-column label="关联设备" prop="deviceIds" align="center" show-overflow-tooltip>
+      <el-table-column
+        label="配置名称"
+        prop="name"
+        align="center"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        label="关联设备"
+        prop="deviceIds"
+        align="center"
+        show-overflow-tooltip
+      >
         <template slot-scope="scope">
-          {{ scope.row.deviceIds.split(',').map(i => selectDictLabel(allDev, i)).join(',') }}
+          {{
+            scope.row.deviceIds
+              .split(",")
+              .map((i) => selectDictLabel(allDev, i))
+              .join(",")
+          }}
         </template>
       </el-table-column>
       <el-table-column label="创建时间" prop="createTime" align="center" />
-      <el-table-column label="当前状态" prop="status" align="center" :formatter="statusFormatter" />
+      <el-table-column
+        label="当前状态"
+        prop="status"
+        align="center"
+        :formatter="statusFormatter"
+      />
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button type="text" @click="getDialog('查看', scope.row.id)">查看</el-button>
-          <el-button type="text" v-if="scope.row.status === 0" @click="getChange('下架', scope.row, 1)"
-            v-hasPermi="['device:music:down']">下架</el-button>
+          <el-button type="text" @click="getDialog('查看', scope.row.id)"
+            >查看</el-button
+          >
+          <el-button
+            type="text"
+            v-if="scope.row.status === 0"
+            @click="getChange('下架', scope.row, 1)"
+            v-hasPermi="['device:music:down']"
+            >下架</el-button
+          >
           <span v-else>
-            <el-button type="text" style="margin-left: 10px" @click="getDialog('编辑', scope.row.id)"
-              v-hasPermi="['device:music:edit']">编辑</el-button>
-            <el-button type="text" @click="getChange('上架', scope.row, 0)"
-              v-hasPermi="['device:music:up']">上架</el-button>
-            <el-button type="delete" @click="getChange('删除', scope.row, 2)"
-              v-hasPermi="['device:music:delete']">删除</el-button>
+            <el-button
+              type="text"
+              style="margin-left: 10px"
+              @click="getDialog('编辑', scope.row.id)"
+              v-hasPermi="['device:music:edit']"
+              >编辑</el-button
+            >
+            <el-button
+              type="text"
+              @click="getChange('上架', scope.row, 0)"
+              v-hasPermi="['device:music:up']"
+              >上架</el-button
+            >
+            <el-button
+              type="delete"
+              @click="getDelete('删除', scope.row, 2)"
+              v-hasPermi="['device:music:delete']"
+              >删除</el-button
+            >
           </span>
         </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="close">
-      <el-form :model="dialogForm" :rules="rules" ref="dialogForm" label-width="100px"
-        :disabled="title === '查看' ? true : false">
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :title="title"
+      width="500px"
+      :before-close="close"
+    >
+      <el-form
+        :model="dialogForm"
+        :rules="rules"
+        ref="dialogForm"
+        label-width="100px"
+        :disabled="title === '查看' ? true : false"
+      >
         <el-form-item label="配置名称：" prop="name">
           <el-input v-model="dialogForm.name" placeholder="请输入配置名称" />
         </el-form-item>
         <el-form-item label="关联设备：" prop="deviceIds">
-          <el-select v-model="dialogForm.deviceIds" multiple filterable placeholder="请选择关联设备">
-            <el-option v-for="item in devOptions" :key="item.value" :value="item.value" :label="item.label" />
+          <el-select
+            v-model="dialogForm.deviceIds"
+            multiple
+            filterable
+            placeholder="请选择关联设备"
+          >
+            <el-option
+              v-for="item in devOptions"
+              :key="item.value"
+              :value="item.value"
+              :label="item.label"
+            />
           </el-select>
         </el-form-item>
         <el-form-item label="赠送信息：">
-          <el-form-item label="资源平台：" prop="bullframeMusicGiveReqList.platformId">
-            <el-select v-model="dialogForm.bullframeMusicGiveReqList.platformId" placeholder="请选择资源平台">
-              <el-option v-for="item in platformOptions" :key="item.value" :value="item.value" :label="item.label" />
+          <el-form-item
+            label="资源平台："
+            prop="bullframeMusicGiveReqList.platformId"
+          >
+            <el-select
+              v-model="dialogForm.bullframeMusicGiveReqList.platformId"
+              placeholder="请选择资源平台"
+            >
+              <el-option
+                v-for="item in platformOptions"
+                :key="item.value"
+                :value="item.value"
+                :label="item.label"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item label="栏目：" prop="bullframeMusicGiveReqList.groupIdList">
-            <el-select v-model="dialogForm.bullframeMusicGiveReqList.groupIdList" multiple placeholder="请选择栏目">
-              <el-option v-for="item in sceneOptions" :key="item.value" :value="item.id" :label="item.name" />
+          <el-form-item
+            label="栏目："
+            prop="bullframeMusicGiveReqList.groupIdList"
+          >
+            <el-select
+              v-model="dialogForm.bullframeMusicGiveReqList.groupIdList"
+              multiple
+              placeholder="请选择栏目"
+            >
+              <el-option
+                v-for="item in sceneOptions"
+                :key="item.value"
+                :value="item.id"
+                :label="item.name"
+              />
             </el-select>
           </el-form-item>
-          <el-form-item label="有效时长：" prop="bullframeMusicGiveReqList.indate">
-            <el-select v-model="dialogForm.bullframeMusicGiveReqList.indate" placeholder="请选择有效时长">
-              <el-option v-for="item in timeOptions" :key="item.value" :value="item.value" :label="item.label" />
+          <el-form-item
+            label="有效时长："
+            prop="bullframeMusicGiveReqList.indate"
+          >
+            <el-select
+              v-model="dialogForm.bullframeMusicGiveReqList.indate"
+              placeholder="请选择有效时长"
+            >
+              <el-option
+                v-for="item in timeOptions"
+                :key="item.value"
+                :value="item.value"
+                :label="item.label"
+              />
             </el-select>
           </el-form-item>
         </el-form-item>
       </el-form>
       <div slot="footer">
         <el-button @click="close">取消</el-button>
-        <el-button v-if="title !== '查看' ? true : false" type="primary" @click="getSubmit">确定</el-button>
+        <el-button
+          v-if="title !== '查看' ? true : false"
+          type="primary"
+          @click="getSubmit"
+          >确定</el-button
+        >
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { list, detail, submit, change, devList } from '@/api/device/music'
-import { list as sceneList } from '@/api/operation/scene'
-import { disabledMixin } from '@/mixin/index'
+import { change, detail, devList, list, submit } from "@/api/device/music";
+import { list as sceneList } from "@/api/operation/scene";
+import { disabledMixin } from "@/mixin/index";
+import { dialogCallBack } from "@/utils/DialogUtil";
 export default {
   mixins: [disabledMixin],
   data() {
@@ -97,7 +216,7 @@ export default {
       // 表单
       form: {
         pageNum: 1,
-        pageSize: 10
+        pageSize: 10,
       },
       // 总数居
       total: 0,
@@ -105,7 +224,7 @@ export default {
       tableData: [],
       // 弹窗
       dialogVisible: false,
-      title: '新增',
+      title: "新增",
       // 弹窗表单
       dialogForm: {
         bullframeMusicGiveReqList: {},
@@ -115,170 +234,214 @@ export default {
       // 全部列表
       allDev: [],
       // 资源平台
-      platformOptions: [{
-        value: 10,
-        label: '爱听音乐'
-      }],
+      platformOptions: [
+        {
+          value: 10,
+          label: "爱听音乐",
+        },
+      ],
       // 栏目
       sceneOptions: [],
       // 有效时长
       timeOptions: [
-        { value: -1, label: '1天' },
-        { value: 3, label: '1个月' },
-        { value: 10, label: '2个月' },
-        { value: 4, label: '3个月' },
-        { value: 11, label: '4个月' },
-        { value: 12, label: '5个月' },
-        { value: 5, label: '6个月' },
-        { value: 13, label: '7个月' },
-        { value: 14, label: '8个月' },
-        { value: 15, label: '9个月' },
-        { value: 16, label: '10个月' },
-        { value: 17, label: '11个月' },
-        { value: 6, label: '12个月' },
+        { value: -1, label: "1天" },
+        { value: 3, label: "1个月" },
+        { value: 10, label: "2个月" },
+        { value: 4, label: "3个月" },
+        { value: 11, label: "4个月" },
+        { value: 12, label: "5个月" },
+        { value: 5, label: "6个月" },
+        { value: 13, label: "7个月" },
+        { value: 14, label: "8个月" },
+        { value: 15, label: "9个月" },
+        { value: 16, label: "10个月" },
+        { value: 17, label: "11个月" },
+        { value: 6, label: "12个月" },
       ],
       // 校验
       rules: {
-        name: [{
-          required: true, message: '请输入配置名称', trigger: 'blur'
-        }],
-        deviceIds: [{
-          required: true, message: '请选择关联设备', trigger: 'blur'
-        }],
-        platformId: [{
-          required: true, message: '请选择资源平台', trigger: 'blur'
-        }],
-        groupIdList: [{
-          required: true, message: '请选择栏目', trigger: 'blur'
-        }],
-        indate: [{
-          required: true, message: '请选择有效时长', trigger: 'blur'
-        }]
-      }
-    }
+        name: [
+          {
+            required: true,
+            message: "请输入配置名称",
+            trigger: "blur",
+          },
+        ],
+        deviceIds: [
+          {
+            required: true,
+            message: "请选择关联设备",
+            trigger: "blur",
+          },
+        ],
+        platformId: [
+          {
+            required: true,
+            message: "请选择资源平台",
+            trigger: "blur",
+          },
+        ],
+        groupIdList: [
+          {
+            required: true,
+            message: "请选择栏目",
+            trigger: "blur",
+          },
+        ],
+        indate: [
+          {
+            required: true,
+            message: "请选择有效时长",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
   },
   mounted() {
-    this.getDev(1)
-    this.getList()
+    this.getDev(1);
+    this.getList();
   },
   methods: {
     // 列表
     getList() {
-      this.loading = false
-      list(this.form).then(res => {
+      this.loading = false;
+      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;
         }
-      })
+      });
     },
 
     // 搜索
     getSearch() {
-      this.form.pageNum = 1
-      this.getList()
+      this.form.pageNum = 1;
+      this.getList();
     },
 
     // 重置
     getRefresh() {
       this.form = {
-        bullframeMusicGiveReqList: {}
-      }
-      this.getList()
+        bullframeMusicGiveReqList: {},
+      };
+      this.getList();
     },
 
     // 弹窗
     getDialog(title, id) {
-      this.dialogVisible = true
-      this.title = title
-      this.getDev(2)
-      this.getScene()
+      this.dialogVisible = true;
+      this.title = title;
+      this.getDev(2);
+      this.getScene();
       if (id) {
-        detail(id).then(res => {
-          this.dialogForm = res.data
-          this.dialogForm.deviceIds = res.data.deviceIds.split(',')
-          res.data.existDeviceList.map(i => {
+        detail(id).then((res) => {
+          this.dialogForm = res.data;
+          this.dialogForm.deviceIds = res.data.deviceIds.split(",");
+          res.data.existDeviceList.map((i) => {
             this.devOptions.unshift({
               value: i.clientTypeId,
-              label: i.name
-            })
-          })
-        })
+              label: i.name,
+            });
+          });
+        });
       }
     },
 
     // 关闭弹窗
     close() {
-      this.dialogVisible = false
+      this.dialogVisible = false;
       this.dialogForm = {
-        bullframeMusicGiveReqList: {}
-      }
+        bullframeMusicGiveReqList: {},
+      };
     },
 
     // 上下架
     getChange(title, row, status) {
-      this.$confirm(`是否${title}${row.name}？`, '提示', {
-        type: 'warning'
-      }).then(() => {
-        change(row.id, status).then(res => {
-          if (res.code === 0) {
-            this.$message.success(`${title}成功！`)
-            this.getList()
-          }
+      this.$confirm(`是否${title}${row.name}？`, "提示", {
+        type: "warning",
+      })
+        .then(() => {
+          change(row.id, status).then((res) => {
+            if (res.code === 0) {
+              this.$message.success(`${title}成功！`);
+              this.getList();
+            }
+          });
         })
-      }).catch(() => { })
+        .catch(() => {});
+    },
+
+    // 删除
+    getDelete(title, row, status) {
+      var that = this;
+      dialogCallBack(that, function () {
+        that
+          .$confirm(`是否${title}${row.name}？`, "提示", {
+            type: "warning",
+          })
+          .then(() => {
+            change(row.id, status).then((res) => {
+              if (res.code === 0) {
+                that.$message.success(`${title}成功！`);
+                that.getList();
+              }
+            });
+          })
+          .catch(() => {});
+      });
     },
 
     // 设备列表
     getDev(type) {
-      this.devOptions = []
-      devList(type).then(res => {
+      this.devOptions = [];
+      devList(type).then((res) => {
         if (res.code === 0) {
-          res.data.map(i => {
+          res.data.map((i) => {
             let obj = {
               value: i.clientTypeId,
-              label: i.name
-            }
-            type === 1 ? this.allDev.push(obj) : this.devOptions.push(obj)
-          })
+              label: i.name,
+            };
+            type === 1 ? this.allDev.push(obj) : this.devOptions.push(obj);
+          });
         }
-      })
+      });
     },
 
     // 栏目接口
     getScene() {
-      sceneList().then(res => {
+      sceneList().then((res) => {
         if (res.code === 0) {
-          this.sceneOptions = res.data
+          this.sceneOptions = res.data;
         }
-      })
+      });
     },
 
     // 提交
     getSubmit() {
       this.$refs.dialogForm.validate((valid) => {
         if (valid) {
-          this.dialogForm.deviceIds = this.dialogForm.deviceIds.join(',')
-          submit(this.dialogForm).then(res => {
+          this.dialogForm.deviceIds = this.dialogForm.deviceIds.join(",");
+          submit(this.dialogForm).then((res) => {
             if (res.code === 0) {
-              this.$message.success(`${this.title}成功！`)
-              this.close()
-              this.getList()
+              this.$message.success(`${this.title}成功！`);
+              this.close();
+              this.getList();
             }
-          })
+          });
         } else {
-          return false
+          return false;
         }
-      })
+      });
     },
 
     // 字典翻译
     statusFormatter(row) {
-      return this.selectDictLabel(this.disabledOptions, row.status)
-    }
-  }
-}
+      return this.selectDictLabel(this.disabledOptions, row.status);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>

src/views/operation/dialog/index.vue

@@ -7,73 +7,147 @@
       </el-form-item>
       <el-form-item label="当前状态：">
         <el-select v-model="form.status" placeholder="请选择当前状态">
-          <el-option v-for="item in disabledOptions" :key="item.value" :value="item.value" :label="item.label" />
+          <el-option
+            v-for="item in disabledOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+          />
         </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="getDialog('新增')"
-          v-hasPermi="['operation:dialog:add']">新增</el-button>
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          plain
+          @click="getDialog('新增')"
+          v-hasPermi="['operation:dialog:add']"
+          >新增</el-button
+        >
       </el-form-item>
     </el-form>
     <!-- 列表 -->
     <el-table :data="tableData" v-loading="loading">
       <el-table-column label="序号" type="index" align="center" />
-      <el-table-column label="弹窗名称" prop="name" align="center" show-overflow-tooltip />
+      <el-table-column
+        label="弹窗名称"
+        prop="name"
+        align="center"
+        show-overflow-tooltip
+      />
       <el-table-column label="弹窗图片" align="center" width="100px">
         <template slot-scope="scope">
           <el-image :src="scope.row.pic" />
         </template>
       </el-table-column>
-      <el-table-column label="关联设备" align="center" :formatter="devFormatter" show-overflow-tooltip />
+      <el-table-column
+        label="关联设备"
+        align="center"
+        :formatter="devFormatter"
+        show-overflow-tooltip
+      />
       <el-table-column label="创建时间" prop="createTime" align="center" />
-      <el-table-column label="当前状态" prop="status" align="center" :formatter="statusFormatter" />
+      <el-table-column
+        label="当前状态"
+        prop="status"
+        align="center"
+        :formatter="statusFormatter"
+      />
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button type="text" @click="getDialog('查看', scope.row.id)">查看</el-button>
-          <el-button v-if="scope.row.status === 0" type="text" @click="getChange(scope.row, 1, '下架')"
-            v-hasPermi="['operation:dialog:down']">下架</el-button>
+          <el-button type="text" @click="getDialog('查看', scope.row.id)"
+            >查看</el-button
+          >
+          <el-button
+            v-if="scope.row.status === 0"
+            type="text"
+            @click="getChange(scope.row, 1, '下架')"
+            v-hasPermi="['operation:dialog:down']"
+            >下架</el-button
+          >
           <span v-else style="margin-left: 10px">
-            <el-button type="text" @click="getDialog('编辑', scope.row.id)"
-              v-hasPermi="['operation:dialog:edit']">编辑</el-button>
-            <el-button type="text" @click="getChange(scope.row, 0, '上架')"
-              v-hasPermi="['operation:dialog:up']">上架</el-button>
-            <el-button type="delete" @click="getChange(scope.row, 2, '删除')"
-              v-hasPermi="['operation:dialog:delete']">删除</el-button>
+            <el-button
+              type="text"
+              @click="getDialog('编辑', scope.row.id)"
+              v-hasPermi="['operation:dialog:edit']"
+              >编辑</el-button
+            >
+            <el-button
+              type="text"
+              @click="getChange(scope.row, 0, '上架')"
+              v-hasPermi="['operation:dialog:up']"
+              >上架</el-button
+            >
+            <el-button
+              type="delete"
+              @click="getDelete(scope.row, 2, '删除')"
+              v-hasPermi="['operation:dialog:delete']"
+              >删除</el-button
+            >
           </span>
         </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="getClose">
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :title="title"
+      width="500px"
+      :before-close="getClose"
+    >
       <el-form label-width="auto" :disabled="title === '查看' ? true : false">
         <el-form-item label="弹窗名称：">
           <el-input v-model="dialogForm.name" placeholder="请输入弹窗名称" />
         </el-form-item>
         <el-form-item label="关联设备：">
-          <el-select v-model="dialogForm.deviceIds" multiple filterable placeholder="请选择关联设备">
-            <el-option v-for="item in devOptions" :key="item.value" :value="item.value" :label="item.label" />
+          <el-select
+            v-model="dialogForm.deviceIds"
+            multiple
+            filterable
+            placeholder="请选择关联设备"
+          >
+            <el-option
+              v-for="item in devOptions"
+              :key="item.value"
+              :value="item.value"
+              :label="item.label"
+            />
           </el-select>
         </el-form-item>
         <el-form-item label="弹窗图片：">
-          <Upload listType="picture-card" :url="dialogForm.pic" @upload="upload"
-            :disabled="title === '查看' ? true : false" />
+          <Upload
+            listType="picture-card"
+            :url="dialogForm.pic"
+            @upload="upload"
+            :disabled="title === '查看' ? true : false"
+          />
         </el-form-item>
       </el-form>
       <div slot="footer">
         <el-button @click="getClose">取消</el-button>
-        <el-button v-if="title !== '查看'" type="primary" @click="getSubmit">确定</el-button>
+        <el-button v-if="title !== '查看'" type="primary" @click="getSubmit"
+          >确定</el-button
+        >
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { list, detail, change, devList, submit } from '@/api/operation/dialog'
-import { disabledMixin } from '@/mixin/index'
+import { change, detail, devList, list, submit } from "@/api/operation/dialog";
+import { disabledMixin } from "@/mixin/index";
+import { dialogCallBack } from "@/utils/DialogUtil";
 export default {
   mixins: [disabledMixin],
   data() {
@@ -83,7 +157,7 @@ export default {
       // 表单
       form: {
         pageNum: 1,
-        pageSize: 10
+        pageSize: 10,
       },
       // 总数据
       total: 0,
@@ -92,132 +166,158 @@ export default {
       // 弹窗
       dialogVisible: false,
       // 弹窗名称
-      title: '新增',
+      title: "新增",
       // 弹窗表单
       dialogForm: {},
       // 设备列表
       devOptions: [],
-      allDevs: []
-    }
+      allDevs: [],
+    };
   },
   mounted() {
-    this.getList()
-    this.getDev(1)
+    this.getList();
+    this.getDev(1);
   },
   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;
         }
-      })
+      });
     },
 
     // 搜索
     getSearch() {
-      this.form.pageNum = 1
-      this.getList()
+      this.form.pageNum = 1;
+      this.getList();
     },
 
     // 重置
     getRefresh() {
       this.form = {
         pageNum: 1,
-        pageSize: 10
-      }
-      this.getList()
+        pageSize: 10,
+      };
+      this.getList();
     },
 
     // 上下架
     getChange(row, status, title) {
-      this.$confirm(`是否${title}${row.name}?`, '提示', {
-        type: 'warning'
-      }).then(res => {
-        change(row.id, status).then(res => {
-          if (res.code === 0) {
-            this.$message.success(`${title}成功！`)
-            this.getList()
-          }
+      this.$confirm(`是否${title}${row.name}?`, "提示", {
+        type: "warning",
+      })
+        .then((res) => {
+          change(row.id, status).then((res) => {
+            if (res.code === 0) {
+              this.$message.success(`${title}成功！`);
+              this.getList();
+            }
+          });
         })
-      }).catch(() => { })
+        .catch(() => {});
+    },
+
+    // 删除
+    getDelete(row, status, title) {
+      var that = this;
+      dialogCallBack(that, function () {
+        that
+          .$confirm(`是否${title}${row.name}?`, "提示", {
+            type: "warning",
+          })
+          .then((res) => {
+            change(row.id, status).then((res) => {
+              if (res.code === 0) {
+                that.$message.success(`${title}成功！`);
+                that.getList();
+              }
+            });
+          })
+          .catch(() => {});
+      });
     },
 
     // 弹窗
     getDialog(title, id) {
-      this.dialogVisible = true
-      this.title = title
-      this.getDev(2)
+      this.dialogVisible = true;
+      this.title = title;
+      this.getDev(2);
       if (id) {
-        detail(id).then(res => {
+        detail(id).then((res) => {
           if (res.code === 0) {
-            this.dialogForm = res.data
-            this.dialogForm.deviceIds = res.data.deviceIds.split(',')
-            res.data.existDeviceList.map(i => {
+            this.dialogForm = res.data;
+            this.dialogForm.deviceIds = res.data.deviceIds.split(",");
+            res.data.existDeviceList.map((i) => {
               this.devOptions.unshift({
                 value: i.clientTypeId,
-                label: i.name
-              })
-            })
+                label: i.name,
+              });
+            });
           }
-        })
+        });
       }
     },
 
     // 设备列表
     getDev(type) {
-      this.devOptions = []
-      devList(type).then(res => {
+      this.devOptions = [];
+      devList(type).then((res) => {
         if (res.code === 0) {
-          res.data.map(i => {
+          res.data.map((i) => {
             let obj = {
               value: i.clientTypeId,
-              label: i.name
-            }
-            type === 1 ? this.allDevs.push(obj) : this.devOptions.push(obj)
-          })
+              label: i.name,
+            };
+            type === 1 ? this.allDevs.push(obj) : this.devOptions.push(obj);
+          });
         }
-      })
+      });
     },
 
     // 上传
     upload(e) {
-      this.dialogForm.pic = e.file
+      this.dialogForm.pic = e.file;
     },
 
     // 关闭
     getClose() {
-      this.dialogVisible = false
-      this.dialogForm = {}
+      this.dialogVisible = false;
+      this.dialogForm = {};
     },
 
     // 确定
     getSubmit() {
-      this.dialogForm.deviceIds = this.dialogForm.deviceIds.join(',')
-      submit(this.dialogForm).then(res => {
+      this.dialogForm.deviceIds = this.dialogForm.deviceIds.join(",");
+      submit(this.dialogForm).then((res) => {
         if (res.code === 0) {
-          this.$message.success('提交成功！')
-          this.getClose()
-          this.getList()
+          this.$message.success("提交成功！");
+          this.getClose();
+          this.getList();
         }
-      })
+      });
     },
 
     // 字典翻译
     devFormatter(row) {
-      return row.deviceIds ? row.deviceIds.split(',').map(i => this.selectDictLabel(this.allDevs, i)).join('，') : ''
+      return row.deviceIds
+        ? row.deviceIds
+            .split(",")
+            .map((i) => this.selectDictLabel(this.allDevs, i))
+            .join("，")
+        : "";
     },
 
     statusFormatter(row) {
-      return this.selectDictLabel(this.disabledOptions, row.status)
-    }
-  }
-}
+      return this.selectDictLabel(this.disabledOptions, row.status);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-
 </style>