feat: 增加钢琴音响壁纸图片删除功能

src/api/operation/piano.js

@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+
+
+// 获取列表
+export function list(data) {
+  return request({
+    url: `/admin/wallpaperConfig/page`,
+    method: 'post',
+    data,
+    // headers: {
+    //   'Content-Type': 'multipart/form-data'
+    // }
+  })
+}
+
+// status 0:上架 1:下架 2:删除
+export function deletes(id, status) {
+  return request({
+    url: `/admin/wallpaperConfig/hitOrSold/${id}/${status}`,
+    method: 'get'
+  })
+}
+
+// 新增 
+export function add(data) {
+  return request({
+    url: `/admin/wallpaperConfig/save`,
+    method: 'post',
+    data
+  })
+}
+
+//  编辑
+export function edit(data) {
+  return request({
+    url: `/admin/wallpaperConfig/update`,
+    method: 'post',
+    data
+  })
+}

src/views/operation/piano/index.vue

@@ -0,0 +1,269 @@
+<!-- 运营管理 说明书管理 -->
+<template>
+  <div class="app-container">
+    <!-- 搜索 -->
+    <el-form inline size="mini">
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          plain
+          @click="getDialog(0, null)"
+          v-hasPermi="['operation:piano:add']"
+          >新增</el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <!-- 列表 -->
+    <el-table :data="tableData" v-loading="loading">
+      <el-table-column
+        label="排序"
+        align="center"
+        type="index"
+        show-overflow-tooltip
+      />
+
+      <el-table-column label="图片" align="center">
+        <template slot-scope="scope">
+          <el-image :src="scope.row.pic" />
+        </template>
+      </el-table-column>
+
+      <el-table-column label="创建时间" align="center" prop="createTimeStr" />
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <span style="margin: 0 10px">
+            <el-button
+              type="text"
+              @click="getDialog(1, scope.row)"
+              v-hasPermi="['operation:piano:edit']"
+              >编辑</el-button
+            >
+
+            <el-button
+              type="delete"
+              @click="getDelete(scope.row)"
+              v-hasPermi="['operation:piano:delete']"
+              >删除</el-button
+            >
+          </span>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 弹窗 -->
+    <el-dialog
+      :visible.sync="dialogVisible"
+      :title="dialogTitle"
+      width="500px"
+      :before-close="getDialogClose"
+    >
+      <el-form
+        :model="dialogData"
+        ref="dialogData"
+        :rules="rules"
+        label-width="auto"
+      >
+        <el-form-item label="上传：" prop="pic">
+          <Upload
+            listType="picture-card"
+            :url="dialogData.pic"
+            @upload="uploadCode($event, 'pic')"
+          />
+        </el-form-item>
+
+        <el-form-item label="排序：" prop="sort">
+          <el-input-number v-model="dialogData.sort" :min="1" />
+        </el-form-item>
+
+        <el-form-item label="应用类型：" prop="applicationType">
+          <el-select
+            v-model="dialogData.applicationType"
+            placeholder="请选择设备类型"
+          >
+            <el-option
+              v-for="item in applicationType"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer">
+        <el-button @click="getDialogClose">取消</el-button>
+        <!-- <el-button @click="getDialogClose">取消</el-button> -->
+        <el-button type="primary" @click="getDialogSubmit">确定</el-button>
+      </div>
+    </el-dialog>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="form.pageNum"
+      :limit.sync="form.pageSize"
+      @pagination="getList"
+    />
+  </div>
+</template>
+
+<script>
+import { add, deletes, edit, list } from "@/api/operation/piano";
+import { currentMixin, devMixin, disabledMixin } from "@/mixin/index";
+import { dialogCallBack } from "@/utils/DialogUtil";
+export default {
+  mixins: [devMixin, currentMixin, disabledMixin],
+  data() {
+    return {
+      // 遮罩层
+      loading: false,
+      // 表单
+      form: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      // 总数据
+      total: 0,
+      // 列表
+      tableData: [],
+      // 弹窗
+      dialogVisible: false,
+      dialogTitle: "新增",
+      dialogData: {
+        sort: 1,
+      },
+      // 设备连接
+      applicationType: [
+        {
+          value: "0",
+          label: "小程序",
+        },
+        {
+          value: "1",
+          label: "APP",
+        },
+      ],
+      ///弹窗类型
+      dialogStatus: 0,
+
+      // 表单验证
+      rules: {
+        pic: [{ required: true, message: "请上传图片", trigger: "change" }],
+        sort: [{ required: true, message: "请选择排序", trigger: "blur" }],
+        applicationType: [
+          { required: true, message: "请选择应用类型", trigger: "blur" },
+        ],
+      },
+    };
+  },
+
+  watch: {},
+  mounted() {
+    this.getList();
+  },
+
+  methods: {
+    addData() {},
+    // 列表
+    getList() {
+      this.loading = true;
+      list(this.form).then((res) => {
+        console.log("gadfadfqwwerqewr===" + JSON.stringify(res));
+        if (res.code === 0) {
+          this.tableData = res.data.records;
+          this.total = res.data.total;
+          this.loading = false;
+        }
+      });
+    },
+
+    // 弹窗
+    async getDialog(status, row) {
+      console.log("gadfadfqwwerqewr=aaa==" + JSON.stringify(row));
+      this.dialogVisible = true;
+      this.dialogStatus = status;
+      if (status == 0) {
+        this.dialogData = { sort: 1 };
+      } else {
+        this.dialogData = row;
+      }
+    },
+
+    // 删除
+    getDelete(row) {
+      var that = this;
+      dialogCallBack(that, function () {
+        that
+          .$confirm(`是否删除?`, "提示：", {
+            type: "warning",
+          })
+          .then(() => {
+            deletes(row.id, 2).then((res) => {
+              if (res.code === 0) {
+                that.$message.success("删除成功！");
+                that.getList();
+              }
+            });
+          });
+      });
+    },
+    // 取消
+    getDialogClose() {
+      this.dialogVisible = false;
+      this.dialogData = { sort: 1 };
+      this.$refs.dialogData.resetFields();
+    },
+
+    // 上传
+    uploadCode(e) {
+      this.dialogData.pic = e.file;
+    },
+
+    // 提交分类表单
+    getDialogSubmit() {
+      var pic = this.dialogData.pic;
+      if (pic == null || pic == "") {
+        this.$message.success("请上传图片");
+        return;
+      }
+
+      var sort = this.dialogData.sort;
+      if (sort == null || sort == "") {
+        this.$message.success("请选择排序");
+        return;
+      }
+
+      var applicationType = this.dialogData.applicationType;
+      if (applicationType == null || applicationType == "") {
+        this.$message.success("请选择应用类型");
+        return;
+      }
+
+      console.log(
+        "gadfadfqwwerqewr==111=" +
+          this.dialogStatus +
+          "===" +
+          JSON.stringify(this.dialogData)
+      );
+      ///新增
+      if (this.dialogStatus == 0) {
+        add(this.dialogData).then((res) => {
+          if (res.code === 0) {
+            this.$message.success("添加成功！");
+            this.getDialogClose();
+          }
+        });
+      } else {
+        edit(this.dialogData).then((res) => {
+          if (res.code === 0) {
+            this.$message.success("修改成功！");
+            this.cancel();
+          }
+        });
+      }
+    },
+  },
+};
+</script>