feat: 初步调整视觉上下移动音频

src/api/operation/channels.js

@@ -75,9 +75,18 @@ export function classRemove(id) {
 }
 
 // 频道详情
-export function channelDetail(data) {
+// export function changeDetail(data) {
+//   return request({
+//     url: `/admin/config/channel/view`,
+//     method: 'post',
+//     data
+//   })
+// }
+
+// 频道详情 排序
+export function changeDetail(data) {
   return request({
-    url: `/admin/config/channel/view`,
+    url: `/admin/config/channel/channel/sortEdit`,
     method: 'post',
     data
   })

src/views/music/album/detail.vue

@@ -1,51 +1,135 @@
 <template>
   <div class="app-container">
-    <el-form class="form" :model="form" ref="form" :rules="rules" label-width="100px" :disabled="disabled">
+    <el-form
+      class="form"
+      :model="form"
+      ref="form"
+      :rules="rules"
+      label-width="100px"
+      :disabled="disabled"
+    >
       <el-form-item label="专辑名称：" prop="name">
         <el-input v-model="form.name" placeholder="请输入专辑名称" />
       </el-form-item>
       <el-form-item label="专辑介绍" prop="description">
-        <el-input v-model="form.description" type="textarea" :autosize="{ minRows: 5, maxRows: 10 }" maxlength="300"
-          show-word-limit placeholder="请输入专辑介绍" />
+        <el-input
+          v-model="form.description"
+          type="textarea"
+          :autosize="{ minRows: 5, maxRows: 10 }"
+          maxlength="300"
+          show-word-limit
+          placeholder="请输入专辑介绍"
+        />
       </el-form-item>
       <el-form-item label="专辑类型：" prop="albumType">
         <el-select v-model="form.albumType" placeholder="请选择专辑类型">
-          <el-option v-for="item in albumTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
+          <el-option
+            v-for="item in albumTypeOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="资源平台：" prop="platformId">
-        <el-select v-model="form.platformId" placeholder="请选择资源平台" :disabled="disabledPlatformId(form.platformId)">
-          <el-option v-for="item in platformOptions" :key="item.value" :value="item.value" :label="item.label"
-            :disabled="disabledJoinType(item.joinType)" />
+        <el-select
+          v-model="form.platformId"
+          placeholder="请选择资源平台"
+          :disabled="disabledPlatformId(form.platformId)"
+        >
+          <el-option
+            v-for="item in platformOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+            :disabled="disabledJoinType(item.joinType)"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="付费类型：" prop="payType">
         <el-select v-model="form.payType" placeholder="请选择付费类型">
-          <el-option v-for="item in payTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
+          <el-option
+            v-for="item in payTypeOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+          />
         </el-select>
       </el-form-item>
       <el-form-item v-if="form.payType !== 1" label="原价：" prop="price">
-        <el-input-number v-model="form.price" placeholder="请输入原价" :min="1" :precision="2" :controls="false" />
+        <el-input-number
+          v-model="form.price"
+          placeholder="请输入原价"
+          :min="1"
+          :precision="2"
+          :controls="false"
+        />
       </el-form-item>
       <el-form-item v-if="form.payType !== 1" label="折扣价：" prop="discount">
-        <el-input-number v-model="form.discount" placeholder="请输入折扣价" :min="1" :precision="2" :controls="false" />
+        <el-input-number
+          v-model="form.discount"
+          placeholder="请输入折扣价"
+          :min="1"
+          :precision="2"
+          :controls="false"
+        />
       </el-form-item>
       <el-form-item label="专辑封面：" prop="coverUrl">
-        <Upload listType="picture-card" :url="form.coverUrl" @upload="upload($event, 'coverUrl')" :disabled="disabled" />
+        <Upload
+          listType="picture-card"
+          :url="form.coverUrl"
+          @upload="upload($event, 'coverUrl')"
+          :disabled="disabled"
+        />
       </el-form-item>
-      <el-form-item label="歌曲列表：" style="width: 100%;">
-        <el-button type="primary" icon="el-icon-plus" @click="getDialog">添加歌曲</el-button>
+      <el-form-item label="歌曲列表：" style="width: 100%">
+        <el-button type="primary" icon="el-icon-plus" @click="getDialog"
+          >添加歌曲</el-button
+        >
         <!-- 列表 -->
         <el-table :data="form.programList" v-loading="form_loading">
           <el-table-column label="ID" prop="id" align="center" />
-          <el-table-column label="歌曲名称" prop="name" align="center" show-overflow-tooltip />
-          <el-table-column label="歌手名称" prop="singerName" align="center" show-overflow-tooltip />
+          <el-table-column
+            label="歌曲名称"
+            prop="name"
+            align="center"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="歌手名称"
+            prop="singerName"
+            align="center"
+            show-overflow-tooltip
+          />
           <el-table-column label="播放时长" prop="playTime" 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">
               <Audio :src="scope.row.progaramUrl" />
-              <el-button type="delete" :disabled="disabled" @click="getDelete(scope.$index)">删除</el-button>
+              <el-button
+                type="delete"
+                :disabled="disabled"
+                @click="getDelete(scope.$index)"
+                >删除</el-button
+              >
+
+              <el-button
+                type="text"
+                icon="el-icon-caret-top"
+                @click="getChangeDetail(scope.row, scope.row.sort - 1)"
+                :disabled="disabled"
+              />
+              <el-button
+                type="text"
+                icon="el-icon-caret-bottom"
+                @click="getChangeDetail(scope.row, scope.row.sort + 1)"
+                :disabled="disabled"
+              />
             </template>
           </el-table-column>
         </el-table>
@@ -53,79 +137,127 @@
     </el-form>
     <div class="form-btn">
       <el-button @click="cancel">取消</el-button>
-      <el-button v-if="!disabled" type="primary" @click="getSubmit">确定</el-button>
+      <el-button v-if="!disabled" type="primary" @click="getSubmit"
+        >确定</el-button
+      >
     </div>
 
     <!-- 弹窗 -->
     <el-dialog :visible.sync="dialogVisible" title="添加歌曲" width="1100px">
       <el-form inline size="mini" style="width: 100%">
         <el-form-item label="歌曲名称：">
-          <el-input v-model="dialogForm.name" placeholder="请输入歌曲名称" clearable />
+          <el-input
+            v-model="dialogForm.name"
+            placeholder="请输入歌曲名称"
+            clearable
+          />
         </el-form-item>
         <el-form-item label="歌手名称：">
-          <el-input v-model="dialogForm.singerName" placeholder="请输入歌手名称" clearable />
+          <el-input
+            v-model="dialogForm.singerName"
+            placeholder="请输入歌手名称"
+            clearable
+          />
         </el-form-item>
         <el-form-item label="资源平台：">
-          <el-select v-model="dialogForm.platformId" placeholder="请选择资源平台">
-            <el-option v-for="item in platformOptions.filter(i => !i.joinType.includes('1'))" :key="item.value"
-              :value="item.value" :label="item.label" />
+          <el-select
+            v-model="dialogForm.platformId"
+            placeholder="请选择资源平台"
+          >
+            <el-option
+              v-for="item in platformOptions.filter(
+                (i) => !i.joinType.includes('1')
+              )"
+              :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-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" show-overflow-tooltip />
-        <el-table-column label="歌手名称" prop="singerName" align="center" show-overflow-tooltip />
+        <el-table-column
+          label="歌曲名称"
+          prop="name"
+          align="center"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          label="歌手名称"
+          prop="singerName"
+          align="center"
+          show-overflow-tooltip
+        />
         <el-table-column label="播放时长" prop="playTime" align="center" />
         <el-table-column label="操作" align="center">
           <template slot-scope="scope">
-            <el-button type="text" @click="getChecked(scope.row)"
-              :disabled="form.programList.findIndex(i => i.id === scope.row.id) === -1 ? false : true">
+            <el-button
+              type="text"
+              @click="getChecked(scope.row)"
+              :disabled="
+                form.programList.findIndex((i) => i.id === scope.row.id) === -1
+                  ? false
+                  : true
+              "
+            >
               选择
             </el-button>
           </template>
         </el-table-column>
       </el-table>
-      <pagination v-show="total > 0" :total="total" :page.sync="dialogForm.pageNum" :limit.sync="dialogForm.pageSize"
-        @pagination="getList" />
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="dialogForm.pageNum"
+        :limit.sync="dialogForm.pageSize"
+        @pagination="getList"
+      />
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { submit, detail } from '@/api/music/menu'
-import { list } from '@/api/music/list'
-import { platformMixin, onOrOffMixin, payTypeMixin, albumTypeMixin } from '@/mixin/index'
-import Audio from '@/components/Audio/index.vue'
+import { list } from "@/api/music/list";
+import { detail, submit } from "@/api/music/menu";
+import Audio from "@/components/Audio/index.vue";
+import {
+albumTypeMixin,
+onOrOffMixin,
+payTypeMixin,
+platformMixin,
+} from "@/mixin/index";
 export default {
   mixins: [platformMixin, onOrOffMixin, payTypeMixin, albumTypeMixin],
   components: {
-    Audio
+    Audio,
   },
   data() {
     // 判断原价是否大于折扣价
     var checkPrice = (rule, value, callback) => {
       if (!value) {
-        callback(new Error('请输入原价'))
+        callback(new Error("请输入原价"));
       } else {
         if (this.form.discount && value <= this.form.discount) {
-          callback(new Error('原价必须大于折扣价'))
+          callback(new Error("原价必须大于折扣价"));
         }
-        callback()
+        callback();
       }
-    }
+    };
     // 判断折扣价是否小于原价
     var checkDiscount = (rule, value, callback) => {
       if (this.form.price && value >= this.form.price) {
-        callback(new Error('折扣价必须小于原价'))
+        callback(new Error("折扣价必须小于原价"));
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     return {
       // 遮罩层
       form_loading: false,
@@ -134,40 +266,79 @@ export default {
       form: {
         programList: [], // 歌曲列表
         status: 1,
-        type: 1
+        type: 1,
       },
       // 校验
       rules: {
-        name: [{
-          required: true, message: '请输入歌单名称', trigger: 'blur'
-        }],
-        description: [{
-          required: true, message: '请输入歌单介绍', trigger: 'blur'
-        }],
-        albumType: [{
-          required: true, message: '请选择专辑类型', trigger: 'blur'
-        }],
-        avatarNickName: [{
-          required: true, message: '请输入歌单创建者名称', trigger: 'blur'
-        }],
-        platformId: [{
-          required: true, message: '请选择资源平台', trigger: 'change'
-        }],
-        payType: [{
-          required: true, message: '请选择付费类型', trigger: 'change'
-        }],
-        price: [{
-          required: true, validator: checkPrice, trigger: 'blur'
-        }],
-        discount: [{
-          validator: checkDiscount, trigger: 'blur'
-        }],
-        coverUrl: [{
-          required: true, message: '请上传歌单封面', trigger: 'change'
-        }],
-        avatarNickHead: [{
-          required: true, message: '请上传创建者头像', trigger: 'change'
-        }]
+        name: [
+          {
+            required: true,
+            message: "请输入歌单名称",
+            trigger: "blur",
+          },
+        ],
+        description: [
+          {
+            required: true,
+            message: "请输入歌单介绍",
+            trigger: "blur",
+          },
+        ],
+        albumType: [
+          {
+            required: true,
+            message: "请选择专辑类型",
+            trigger: "blur",
+          },
+        ],
+        avatarNickName: [
+          {
+            required: true,
+            message: "请输入歌单创建者名称",
+            trigger: "blur",
+          },
+        ],
+        platformId: [
+          {
+            required: true,
+            message: "请选择资源平台",
+            trigger: "change",
+          },
+        ],
+        payType: [
+          {
+            required: true,
+            message: "请选择付费类型",
+            trigger: "change",
+          },
+        ],
+        price: [
+          {
+            required: true,
+            validator: checkPrice,
+            trigger: "blur",
+          },
+        ],
+        discount: [
+          {
+            validator: checkDiscount,
+            trigger: "blur",
+          },
+        ],
+        coverUrl: [
+          {
+            required: true,
+            message: "请上传歌单封面",
+            trigger: "change",
+          },
+        ],
+        avatarNickHead: [
+          {
+            required: true,
+            message: "请上传创建者头像",
+            trigger: "change",
+          },
+        ],
       },
       // 弹窗
       dialogVisible: false,
@@ -176,7 +347,7 @@ export default {
         pageNum: 1,
         pageSize: 10,
         status: 1,
-        platformId: null
+        platformId: null,
       },
       // 总数据
       total: 0,
@@ -185,59 +356,61 @@ export default {
       // 只读
       disabled: false,
       // 是否已选
-      disabledChecked: false
-    }
+      disabledChecked: false,
+    };
   },
   mounted() {
     // 获取资源平台
     this.getPlatform({
-      audioType: 15
-    })
+      audioType: 15,
+    });
     if (this.$route.query.id) {
-      this.form.id = this.$route.query.id
-      this.disabled = Boolean(this.$route.query.disabled)
-      this.getDetail()
+      this.form.id = this.$route.query.id;
+      this.disabled = Boolean(this.$route.query.disabled);
+      this.getDetail();
     }
   },
   methods: {
     // 详情
     getDetail() {
-      this.form_loading = true
-      detail(this.form.id).then(res => {
+      this.form_loading = true;
+      detail(this.form.id).then((res) => {
         if (res.code === 0) {
-          this.form = res.data
-          this.form_loading = false
+          this.form = res.data;
+          this.form_loading = false;
         }
-      })
+      });
     },
     // 上传
     upload(e, key) {
-      this.form[key] = e.file
+      this.form[key] = e.file;
     },
 
     // 添加歌曲
     getDialog() {
-      this.dialogVisible = true
-      this.dialogForm.platformId = this.platformOptions.filter(i => !i.joinType.includes('1'))[0].value
-      this.getList()
+      this.dialogVisible = true;
+      this.dialogForm.platformId = this.platformOptions.filter(
+        (i) => !i.joinType.includes("1")
+      )[0].value;
+      this.getList();
     },
 
     // 列表
     getList() {
-      this.loading = true
-      list(this.dialogForm).then(res => {
+      this.loading = true;
+      list(this.dialogForm).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.dialogForm.pageNum = 1
-      this.getList()
+      this.dialogForm.pageNum = 1;
+      this.getList();
     },
 
     // 重置
@@ -246,9 +419,9 @@ export default {
         pageNum: 1,
         pageSize: 10,
         status: 1,
-        platformId: this.platformOptions[0].value
-      }
-      this.getList()
+        platformId: this.platformOptions[0].value,
+      };
+      this.getList();
     },
 
     // 选择
@@ -259,14 +432,14 @@ export default {
         singerName: row.singerName,
         playTime: row.playTime,
         status: row.status,
-        progaramUrl: row.progaramUrl
-      })
-      this.$message.success('添加成功！')
+        progaramUrl: row.progaramUrl,
+      });
+      this.$message.success("添加成功！");
     },
 
     // 删除已选歌曲
     getDelete(index) {
-      this.form.programList.splice(index, 1)
+      this.form.programList.splice(index, 1);
     },
 
     // 确定
@@ -274,28 +447,28 @@ export default {
       this.$refs.form.validate((valid) => {
         if (valid) {
           if (this.form.programList) {
-            let arr = []
-            this.form.programList.map(i => {
-              arr.push(i.id)
-            })
-            this.form.programList = arr
+            let arr = [];
+            this.form.programList.map((i) => {
+              arr.push(i.id);
+            });
+            this.form.programList = arr;
           }
-          this.form_loading = true
-          let title = this.form.id ? '编辑成功！' : '新增成功！'
-          submit(this.form).then(res => {
+          this.form_loading = true;
+          let title = this.form.id ? "编辑成功！" : "新增成功！";
+          submit(this.form).then((res) => {
             if (res.code === 0) {
-              this.$message.success(`${title}`)
+              this.$message.success(`${title}`);
               if (!this.form.id) {
-                this.cancel()
+                this.cancel();
               } else {
-                this.getDetail()
+                this.getDetail();
               }
             }
-          })
+          });
         } else {
-          return false
+          return false;
         }
-      })
+      });
     },
 
     // 取消
@@ -305,10 +478,10 @@ export default {
 
     // 字典翻译
     statusFormatter(row) {
-      return this.selectDictLabel(this.onOrOffOptions, row.status)
-    }
-  }
-}
+      return this.selectDictLabel(this.onOrOffOptions, row.status);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>

src/views/music/album/index.vue

@@ -9,86 +9,211 @@
         <el-input v-model="form.name" placeholder="请输入专辑名称" clearable />
       </el-form-item>
       <el-form-item label="歌手名称：">
-        <el-input v-model="form.singerName" placeholder="请输入歌手名称" clearable />
+        <el-input
+          v-model="form.singerName"
+          placeholder="请输入歌手名称"
+          clearable
+        />
       </el-form-item>
       <el-form-item label="资源平台：">
-        <el-select v-model="form.platformId" placeholder="请选择资源平台" clearable>
-          <el-option v-for="item in platformOptions" :key="item.value" :value="item.value" :label="item.label" />
+        <el-select
+          v-model="form.platformId"
+          placeholder="请选择资源平台"
+          clearable
+        >
+          <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="专辑类型：">
-        <el-select v-model="form.albumType" placeholder="请选择专辑类型" clearable>
-          <el-option v-for="item in albumTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
+        <el-select
+          v-model="form.albumType"
+          placeholder="请选择专辑类型"
+          clearable
+        >
+          <el-option
+            v-for="item in albumTypeOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="付费类型：">
-        <el-select v-model="form.payType" placeholder="请选择付费类型" clearable>
-          <el-option v-for="item in payTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
+        <el-select
+          v-model="form.payType"
+          placeholder="请选择付费类型"
+          clearable
+        >
+          <el-option
+            v-for="item in payTypeOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="当前状态：">
         <el-select v-model="form.status" placeholder="请选择当前状态" clearable>
-          <el-option v-for="item in onOrOffOptions" :key="item.value" :value="item.value" :label="item.label" />
+          <el-option
+            v-for="item in onOrOffOptions"
+            :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" plain icon="el-icon-plus" @click="getDetail()"
-          v-hasPermi="['music:album:add']">新增</el-button>
-        <el-button type="primary" :disabled="obj.id === ''" @click="getChange(obj, 1)"
-          v-hasPermi="['music:album:up']">批量上架</el-button>
-        <el-button type="primary" :disabled="obj.id === ''" @click="getChange(obj, 2)"
-          v-hasPermi="['music:album:down']">批量下架</el-button>
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          @click="getDetail()"
+          v-hasPermi="['music:album:add']"
+          >新增</el-button
+        >
+        <el-button
+          type="primary"
+          :disabled="obj.id === ''"
+          @click="getChange(obj, 1)"
+          v-hasPermi="['music:album:up']"
+          >批量上架</el-button
+        >
+        <el-button
+          type="primary"
+          :disabled="obj.id === ''"
+          @click="getChange(obj, 2)"
+          v-hasPermi="['music:album:down']"
+          >批量下架</el-button
+        >
       </el-form-item>
     </el-form>
     <!-- 列表 -->
-    <el-table :data="tableData" v-loading="loading" @selection-change="handleSelect">
+    <el-table
+      :data="tableData"
+      v-loading="loading"
+      @selection-change="handleSelect"
+    >
       <el-table-column type="selection" align="center" />
-      <el-table-column label="专辑Id" prop="id" align="center" show-overflow-tooltip />
-      <el-table-column label="专辑名称" prop="name" align="center" show-overflow-tooltip />
+      <el-table-column
+        label="专辑Id"
+        prop="id"
+        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 v-if="scope.row.coverUrl" :src="scope.row.coverUrl" />
         </template>
       </el-table-column>
-      <el-table-column label="专辑类型" prop="albumType" align="center" :formatter="typeFormatter" show-overflow-tooltip />
-      <el-table-column label="歌手名称" prop="singerName" align="center" show-overflow-tooltip />
-      <el-table-column label="付费类型" prop="payType" align="center" :formatter="payTypeFormatter" />
+      <el-table-column
+        label="专辑类型"
+        prop="albumType"
+        align="center"
+        :formatter="typeFormatter"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        label="歌手名称"
+        prop="singerName"
+        align="center"
+        show-overflow-tooltip
+      />
+      <el-table-column
+        label="付费类型"
+        prop="payType"
+        align="center"
+        :formatter="payTypeFormatter"
+      />
       <el-table-column label="歌曲数量" prop="programCount" align="center" />
-      <el-table-column label="资源平台" prop="platformId" align="center" :formatter="platformFormatter" />
-      <el-table-column label="当前状态" prop="status" align="center" :formatter="statusFormatter" />
+      <el-table-column
+        label="资源平台"
+        prop="platformId"
+        align="center"
+        :formatter="platformFormatter"
+      />
+      <el-table-column
+        label="当前状态"
+        prop="status"
+        align="center"
+        :formatter="statusFormatter"
+      />
       <el-table-column label="更新时间" prop="updateTime" align="center">
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+          <span>{{
+            parseTime(scope.row.updateTime, "{y}-{m}-{d} {h}:{i}:{s}")
+          }}</span>
         </template>
       </el-table-column>
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button type="text" @click="getDetail(scope.row.id, true)">查看</el-button>
+          <el-button type="text" @click="getDetail(scope.row.id, true)"
+            >查看</el-button
+          >
           <span v-if="scope.row.status === 2">
-            <el-button type="text" @click="getDetail(scope.row.id)" v-hasPermi="['music:album:edit']"
-              style="margin-left: 10px">
+            <el-button
+              type="text"
+              @click="getDetail(scope.row.id)"
+              v-hasPermi="['music:album:edit']"
+              style="margin-left: 10px"
+            >
               编辑
             </el-button>
-            <el-button type="text" @click="getChange(scope.row, 1)" v-hasPermi="['music:album:up']">上架
+            <el-button
+              type="text"
+              @click="getChange(scope.row, 1)"
+              v-hasPermi="['music:album:up']"
+              >上架
             </el-button>
-            <el-button type="delete" @click="getDelete(scope.row)" v-hasPermi="['music:album:delete']">删除
+            <el-button
+              type="delete"
+              @click="getDelete(scope.row)"
+              v-hasPermi="['music:album:delete']"
+              >删除
             </el-button>
           </span>
-          <el-button v-else type="text" @click="getChange(scope.row, 2)" v-hasPermi="['music:album:down']">下架
+          <el-button
+            v-else
+            type="text"
+            @click="getChange(scope.row, 2)"
+            v-hasPermi="['music:album:down']"
+            >下架
           </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"
+    />
   </div>
 </template>
 
 <script>
-import { list, change, remove } from '@/api/music/menu'
-import { platformMixin, onOrOffMixin, payTypeMixin, albumTypeMixin } from '@/mixin/index'
+import { change, list, remove } from "@/api/music/menu";
+import {
+albumTypeMixin,
+onOrOffMixin,
+payTypeMixin,
+platformMixin,
+} from "@/mixin/index";
 export default {
   mixins: [platformMixin, onOrOffMixin, payTypeMixin, albumTypeMixin],
   data() {
@@ -99,7 +224,7 @@ export default {
       form: {
         pageNum: 1,
         pageSize: 10,
-        type: 1
+        type: 1,
       },
       // 总数据
       total: 0,
@@ -107,38 +232,38 @@ export default {
       tableData: [],
       // 批量上下架
       obj: {
-        id: '',
-        name: '已选数据'
-      }
-    }
+        id: "",
+        name: "已选数据",
+      },
+    };
   },
   mounted() {
     // 获取资源平台
     this.getPlatform({
-      audioType: 15
-    })
-    this.getList()
+      audioType: 15,
+    });
+    this.getList();
   },
   methods: {
     // 列表
     getList() {
-      this.loading = true
+      this.loading = true;
       // 后端延迟
       setTimeout(() => {
-        list(this.form).then(res => {
+        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;
           }
-        })
+        });
       }, 1500);
     },
 
     // 搜索
     getSearch() {
-      this.form.pageNum = 1
-      this.getList()
+      this.form.pageNum = 1;
+      this.getList();
     },
 
     // 重置
@@ -146,9 +271,9 @@ export default {
       this.form = {
         pageNum: 1,
         pageSize: 10,
-        type: 1
-      }
-      this.getList()
+        type: 1,
+      };
+      this.getList();
     },
 
     // 新增 / 查看 / 编辑
@@ -157,62 +282,69 @@ export default {
         path: `/music/album/detail`,
         query: {
           id: id,
-          disabled: boolean
-        }
-      })
+          disabled: boolean,
+        },
+      });
     },
 
     // 上下架
     getChange(row, status) {
-      let title = status === 1 ? '上架' : '下架'
-      this.$confirm(`是否${title}${row.name}?`, '提示', {
-        type: 'warning'
-      }).then(() => {
-        change(row.id, status).then(res => {
-          if (res.code === 0) {
-            this.$message.success(`${title}成功！`)
-            this.getList()
-          }
+      let title = status === 1 ? "上架" : "下架";
+      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(row) {
-      this.$confirm(`是否删除${row.name}?`, '提示', {
-        type: 'warning'
-      }).then(() => {
-        remove(row.id).then(res => {
-          if (res.code === 0) {
-            this.$message.success('删除成功！')
-            this.getList()
-          }
+      this.$confirm(`是否删除${row.name}?`, "提示", {
+        type: "warning",
+      })
+        .then(() => {
+          remove(row.id).then((res) => {
+            if (res.code === 0) {
+              this.$message.success("删除成功！");
+              this.getList();
+            }
+          });
         })
-      }).catch(() => { })
+        .catch(() => {});
     },
 
     // 多选
     handleSelect(e) {
-      this.obj.id = ''
-      e.map((item, index) => this.obj.id += item.id + ((index + 1) < e.length ? ',' : ''))
+      this.obj.id = "";
+      e.map(
+        (item, index) =>
+          (this.obj.id += item.id + (index + 1 < e.length ? "," : ""))
+      );
     },
 
     // 字典翻译
     platformFormatter(row) {
-      return this.selectDictLabel(this.platformOptions, row.platformId)
+      return this.selectDictLabel(this.platformOptions, row.platformId);
     },
 
     statusFormatter(row) {
-      return this.selectDictLabel(this.onOrOffOptions, row.status)
+      return this.selectDictLabel(this.onOrOffOptions, row.status);
     },
 
     typeFormatter(row) {
-      return this.selectDictLabel(this.albumTypeOptions, row.albumType)
+      return this.selectDictLabel(this.albumTypeOptions, row.albumType);
     },
 
     payTypeFormatter(row) {
-      return this.selectDictLabel(this.payTypeOptions, row.payType)
-    }
+      return this.selectDictLabel(this.payTypeOptions, row.payType);
+    },
   },
 };
 </script>

src/views/music/blog/detail.vue

@@ -1,135 +1,325 @@
 <template>
   <div class="app-container">
-    <el-form class="form" :model="form" ref="form" :rules="rules" label-width="100px" :disabled="disabled">
+    <el-form
+      class="form"
+      :model="form"
+      ref="form"
+      :rules="rules"
+      label-width="100px"
+      :disabled="disabled"
+    >
       <el-form-item label="播客名称：" prop="name">
         <el-input v-model="form.name" placeholder="请输入播客名称" />
       </el-form-item>
       <el-form-item label="主播名称：" prop="podcasterIds">
-        <el-select v-model="form.podcasterIds" multiple filterable remote reserve-keyword placeholder="请输入主播名称"
-          :remote-method="getSelect" no-data-text="请新增主播">
-          <el-option v-for="item in anchorOptions" :key="item.value" :value="item.value" :label="item.label" />
+        <el-select
+          v-model="form.podcasterIds"
+          multiple
+          filterable
+          remote
+          reserve-keyword
+          placeholder="请输入主播名称"
+          :remote-method="getSelect"
+          no-data-text="请新增主播"
+        >
+          <el-option
+            v-for="item in anchorOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="播客分类：" prop="categoryIds">
-        <el-select v-model="form.categoryIds" multiple placeholder="请选择播客分类">
-          <el-option v-for="item in blogClassOptions" :key="item.value" :value="item.value" :label="item.label" />
+        <el-select
+          v-model="form.categoryIds"
+          multiple
+          placeholder="请选择播客分类"
+        >
+          <el-option
+            v-for="item in blogClassOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="播客介绍：" prop="description">
-        <el-input v-model="form.description" type="textarea" :autosize="{ minRows: 5, maxRows: 10 }" maxlength="300"
-          show-word-limit placeholder=" 请输入播客介绍" />
+        <el-input
+          v-model="form.description"
+          type="textarea"
+          :autosize="{ minRows: 5, maxRows: 10 }"
+          maxlength="300"
+          show-word-limit
+          placeholder=" 请输入播客介绍"
+        />
       </el-form-item>
       <el-form-item label="资源平台：" prop="platformId">
-        <el-select v-model="form.platformId" placeholder="请选择资源平台" :disabled="disabledPlatformId(form.platformId)">
-          <el-option v-for="item in platformOptions" :key="item.value" :value="item.value" :label="item.label"
-            :disabled="disabledJoinType(item.joinType)" />
+        <el-select
+          v-model="form.platformId"
+          placeholder="请选择资源平台"
+          :disabled="disabledPlatformId(form.platformId)"
+        >
+          <el-option
+            v-for="item in platformOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+            :disabled="disabledJoinType(item.joinType)"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="付费类型：" prop="charging">
         <el-select v-model="form.charging" placeholder="请选择付费类型">
-          <el-option v-for="item in payTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
+          <el-option
+            v-for="item in payTypeOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+          />
         </el-select>
       </el-form-item>
       <el-form-item v-if="form.charging !== 1" label="原价：" prop="price">
-        <el-input-number v-model="form.price" placeholder="请输入原价" :min="1" :precision="2" :controls="false" />
+        <el-input-number
+          v-model="form.price"
+          placeholder="请输入原价"
+          :min="1"
+          :precision="2"
+          :controls="false"
+        />
       </el-form-item>
-      <el-form-item v-if="form.charging !== 1" label="折扣价：" prop="discountedPrice">
-        <el-input-number v-model="form.discountedPrice" placeholder="请输入折扣价" :min="1" :precision="2" :controls="false" />
+      <el-form-item
+        v-if="form.charging !== 1"
+        label="折扣价："
+        prop="discountedPrice"
+      >
+        <el-input-number
+          v-model="form.discountedPrice"
+          placeholder="请输入折扣价"
+          :min="1"
+          :precision="2"
+          :controls="false"
+        />
       </el-form-item>
       <el-form-item label="播客封面" prop="thumb">
-        <Upload listType="picture-card" :url="form.thumb" @upload="upload" :disabled="disabled" />
+        <Upload
+          listType="picture-card"
+          :url="form.thumb"
+          @upload="upload"
+          :disabled="disabled"
+        />
       </el-form-item>
       <el-form-item label="关联节目：" prop="adminPodCastProgramDetailResp">
         <el-button type="primary" @click="getDialog">关联节目</el-button>
-        <el-button @click="getDelete" :disabled="ids.length > 0 ? false : true">解除关联</el-button>
+        <el-button @click="getDelete" :disabled="ids.length > 0 ? false : true"
+          >解除关联</el-button
+        >
       </el-form-item>
       <el-form-item style="width: 100%">
-        <el-table :data="form.adminPodCastProgramDetailResp" @selection-change="handleSelect">
+        <el-table
+          :data="form.adminPodCastProgramDetailResp"
+          @selection-change="handleSelect"
+        >
           <el-table-column type="selection" align="center" />
-          <el-table-column label="ID" prop="id" align="center" show-overflow-tooltip />
-          <el-table-column label="节目名称" prop="name" align="center" show-overflow-tooltip />
-          <el-table-column label="资源平台" prop="platformId" align="center" :formatter="platformFormatter" />
-          <el-table-column label="当前状态" prop="status" align="center" :formatter="statusFormatter" />
+          <el-table-column
+            label="ID"
+            prop="id"
+            align="center"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="节目名称"
+            prop="name"
+            align="center"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="资源平台"
+            prop="platformId"
+            align="center"
+            :formatter="platformFormatter"
+          />
+          <el-table-column
+            label="当前状态"
+            prop="status"
+            align="center"
+            :formatter="statusFormatter"
+          />
+
+          <el-table-column label="操作" align="center">
+            <template slot-scope="scope">
+              <Audio :src="scope.row.progaramUrl" />
+
+              <el-button
+                type="text"
+                icon="el-icon-caret-top"
+                @click="getChangeDetail(scope.row, scope.row.sort - 1)"
+                :disabled="disabled"
+              />
+              <el-button
+                type="text"
+                icon="el-icon-caret-bottom"
+                @click="getChangeDetail(scope.row, scope.row.sort + 1)"
+                :disabled="disabled"
+              />
+            </template>
+          </el-table-column>
         </el-table>
       </el-form-item>
     </el-form>
     <div class="form-btn">
       <el-button @click="cancel">取消</el-button>
-      <el-button v-if="!disabled" type="primary" @click="getSubmit">确定</el-button>
+      <el-button v-if="!disabled" type="primary" @click="getSubmit"
+        >确定</el-button
+      >
     </div>
 
     <!-- 弹窗 -->
     <el-dialog :visible.sync="dialogVisible" title="关联节目" width="1200px">
       <el-form inline size="mini" style="width: 100%">
         <el-form-item label="节目ID：">
-          <el-input v-model="dialogForm.id" placeholder="请输入节目ID" clearable />
+          <el-input
+            v-model="dialogForm.id"
+            placeholder="请输入节目ID"
+            clearable
+          />
         </el-form-item>
         <el-form-item label="节目名称：">
-          <el-input v-model="dialogForm.name" placeholder="请输入节目名称" clearable />
+          <el-input
+            v-model="dialogForm.name"
+            placeholder="请输入节目名称"
+            clearable
+          />
         </el-form-item>
         <el-form-item label="付费类型：">
-          <el-select v-model="dialogForm.isFree" placeholder="请选择付费类型" clearable>
-            <el-option v-for="item in freeOptions" :key="item.value" :value="item.value" :label="item.label" />
+          <el-select
+            v-model="dialogForm.isFree"
+            placeholder="请选择付费类型"
+            clearable
+          >
+            <el-option
+              v-for="item in freeOptions"
+              :key="item.value"
+              :value="item.value"
+              :label="item.label"
+            />
           </el-select>
         </el-form-item>
         <el-form-item label="资源平台：">
-          <el-select v-model="dialogForm.platformId" placeholder="请选择资源平台">
-            <el-option v-for="item in platformOptions.filter(i => !i.joinType.includes('1'))" :key="item.value"
-              :value="item.value" :label="item.label" />
+          <el-select
+            v-model="dialogForm.platformId"
+            placeholder="请选择资源平台"
+          >
+            <el-option
+              v-for="item in platformOptions.filter(
+                (i) => !i.joinType.includes('1')
+              )"
+              :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-form-item>
       </el-form>
       <el-table :data="dialogTableData" v-loading="loading">
         <el-table-column label="ID" prop="id" align="center" />
-        <el-table-column label="节目名称" prop="name" align="center" show-overflow-tooltip />
-        <el-table-column label="资源平台" prop="platformId" align="center" :formatter="platformFormatter" />
-        <el-table-column label="付费类型" prop="isFree" align="center" :formatter="freeFormatter" />
-        <el-table-column label="当前状态" prop="status" align="center" :formatter="statusFormatter" />
+        <el-table-column
+          label="节目名称"
+          prop="name"
+          align="center"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          label="资源平台"
+          prop="platformId"
+          align="center"
+          :formatter="platformFormatter"
+        />
+        <el-table-column
+          label="付费类型"
+          prop="isFree"
+          align="center"
+          :formatter="freeFormatter"
+        />
+        <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="getChecked(scope.row)"
-              :disabled="form.adminPodCastProgramDetailResp.findIndex(i => i.id === scope.row.id) === -1 ? false : true">
+            <el-button
+              type="text"
+              @click="getChecked(scope.row)"
+              :disabled="
+                form.adminPodCastProgramDetailResp.findIndex(
+                  (i) => i.id === scope.row.id
+                ) === -1
+                  ? false
+                  : true
+              "
+            >
               选择
             </el-button>
           </template>
         </el-table-column>
       </el-table>
-      <pagination v-show="total > 0" :total="total" :page.sync="dialogForm.pageNum" :limit.sync="dialogForm.pageSize"
-        @pagination="getList" />
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="dialogForm.pageNum"
+        :limit.sync="dialogForm.pageSize"
+        @pagination="getList"
+      />
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { blogClassMixin, platformMixin, payTypeMixin, onOrOffMixin, isFreeMixin } from '@/mixin/index'
-import { selectAnchor } from '@/api/music/anchor'
-import { detail, submit, relieve, checkList } from '@/api/music/blog'
+import { selectAnchor } from "@/api/music/anchor";
+import { checkList, detail, relieve, submit } from "@/api/music/blog";
+import {
+blogClassMixin,
+isFreeMixin,
+onOrOffMixin,
+payTypeMixin,
+platformMixin,
+} from "@/mixin/index";
 export default {
-  mixins: [blogClassMixin, platformMixin, payTypeMixin, onOrOffMixin, isFreeMixin],
+  mixins: [
+    blogClassMixin,
+    platformMixin,
+    payTypeMixin,
+    onOrOffMixin,
+    isFreeMixin,
+  ],
   data() {
     // 判断原价是否大于折扣价
     var checkPrice = (rule, value, callback) => {
       if (!value) {
-        callback(new Error('请输入原价'))
+        callback(new Error("请输入原价"));
       } else {
         if (this.form.discountedPrice && value <= this.form.discountedPrice) {
-          callback(new Error('原价必须大于折扣价'))
+          callback(new Error("原价必须大于折扣价"));
         }
-        callback()
+        callback();
       }
-    }
+    };
     // 判断折扣价是否小于原价
     var checkDiscount = (rule, value, callback) => {
       if (this.form.price && value >= this.form.price) {
-        callback(new Error('折扣价必须小于原价'))
+        callback(new Error("折扣价必须小于原价"));
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     return {
       // 遮罩层
       loading: false,
@@ -138,7 +328,7 @@ export default {
         adminPodCastProgramDetailResp: [],
         podcastProgramIds: [],
         categoryIds: [],
-        status: 1
+        status: 1,
       },
       // 主播
       anchorOptions: [],
@@ -149,7 +339,7 @@ export default {
         pageNum: 1,
         pageSize: 10,
         status: 1,
-        platformId: null
+        platformId: null,
       },
       // 总数据
       total: 0,
@@ -159,116 +349,153 @@ export default {
       disabled: false,
       // 校验
       rules: {
-        name: [{
-          required: true, message: '请输入播客专辑名称', trigger: 'blur'
-        }],
-        podcasterIds: [{
-          required: true, message: '请输入主播名称', trigger: 'blur'
-        }],
-        categoryIds: [{
-          required: true, message: '请选择播客分类', trigger: 'change'
-        }],
-        platformId: [{
-          required: true, message: '请选择资源平台', trigger: 'change'
-        }],
-        charging: [{
-          required: true, message: '请选择付费类型', trigger: 'change'
-        }],
-        price: [{
-          required: true, validator: checkPrice, trigger: 'blur'
-        }],
-        discountedPrice: [{
-          validator: checkDiscount, trigger: 'blur'
-        }],
-        thumb: [{
-          required: true, message: '请上传播客封面', trigger: 'change'
-        }],
-        adminPodCastProgramDetailResp: [{
-          required: true, message: '请关联节目', trigger: 'change'
-        }]
+        name: [
+          {
+            required: true,
+            message: "请输入播客专辑名称",
+            trigger: "blur",
+          },
+        ],
+        podcasterIds: [
+          {
+            required: true,
+            message: "请输入主播名称",
+            trigger: "blur",
+          },
+        ],
+        categoryIds: [
+          {
+            required: true,
+            message: "请选择播客分类",
+            trigger: "change",
+          },
+        ],
+        platformId: [
+          {
+            required: true,
+            message: "请选择资源平台",
+            trigger: "change",
+          },
+        ],
+        charging: [
+          {
+            required: true,
+            message: "请选择付费类型",
+            trigger: "change",
+          },
+        ],
+        price: [
+          {
+            required: true,
+            validator: checkPrice,
+            trigger: "blur",
+          },
+        ],
+        discountedPrice: [
+          {
+            validator: checkDiscount,
+            trigger: "blur",
+          },
+        ],
+        thumb: [
+          {
+            required: true,
+            message: "请上传播客封面",
+            trigger: "change",
+          },
+        ],
+        adminPodCastProgramDetailResp: [
+          {
+            required: true,
+            message: "请关联节目",
+            trigger: "change",
+          },
+        ],
       },
       // 解除关联
       ids: [],
       // 是否已选
-      disabledChecked: false
-    }
+      disabledChecked: false,
+    };
   },
   mounted() {
     // 获取资源平台
     this.getPlatform({
-      audioType: 8
-    })
+      audioType: 8,
+    });
     if (this.$route.query.id) {
-      this.form.id = this.$route.query.id
-      this.disabled = Boolean(this.$route.query.disabled)
-      this.getDetail()
+      this.form.id = this.$route.query.id;
+      this.disabled = Boolean(this.$route.query.disabled);
+      this.getDetail();
     }
   },
   methods: {
     // 详情
     getDetail() {
-      detail(this.form.id).then(res => {
+      detail(this.form.id).then((res) => {
         if (res.code === 0) {
-          this.form = res.data
-          this.anchorOptions = []
-          res.data.adminPrdCasterResp.map(i => {
+          this.form = res.data;
+          this.anchorOptions = [];
+          res.data.adminPrdCasterResp.map((i) => {
             this.anchorOptions.push({
               value: i.podcasterId,
-              label: i.podcasterName
-            })
-          })
-          this.form.podcasterIds = res.data.podcasterIds.split(',')
+              label: i.podcasterName,
+            });
+          });
+          this.form.podcasterIds = res.data.podcasterIds.split(",");
         }
-      })
+      });
     },
 
     // 查询主播
     getSelect(e) {
       if (e) {
         setTimeout(() => {
-          this.anchorOptions = []
-          selectAnchor(e).then(res => {
+          this.anchorOptions = [];
+          selectAnchor(e).then((res) => {
             if (res.code === 0) {
-              res.data.map(i => {
+              res.data.map((i) => {
                 this.anchorOptions.push({
                   value: i.id,
-                  label: i.nickname
-                })
-              })
+                  label: i.nickname,
+                });
+              });
             }
-          }, 500)
-        })
+          }, 500);
+        });
       }
     },
 
     // 上传
     upload(e) {
-      this.form.thumb = e.file
+      this.form.thumb = e.file;
     },
 
     // 弹窗
     getDialog() {
-      this.dialogVisible = true
-      this.dialogForm.platformId = this.platformOptions.filter(i => !i.joinType.includes('1'))[0].value
-      this.getList()
+      this.dialogVisible = true;
+      this.dialogForm.platformId = this.platformOptions.filter(
+        (i) => !i.joinType.includes("1")
+      )[0].value;
+      this.getList();
     },
 
     // 节目列表
     getList() {
-      this.loading = true
-      checkList(this.dialogForm).then(res => {
+      this.loading = true;
+      checkList(this.dialogForm).then((res) => {
         if (res.code === 0) {
-          this.dialogTableData = res.data.records
-          this.total = res.data.total
-          this.loading = false
+          this.dialogTableData = res.data.records;
+          this.total = res.data.total;
+          this.loading = false;
         }
-      })
+      });
     },
 
     // 搜索
     getSearch() {
-      this.dialogForm.pageNum = 1
-      this.getList()
+      this.dialogForm.pageNum = 1;
+      this.getList();
     },
 
     // 重置
@@ -277,15 +504,15 @@ export default {
         pageNum: 1,
         pageSize: 10,
         status: 1,
-        platformId: this.platformOptions[0].value
-      }
-      this.getList()
+        platformId: this.platformOptions[0].value,
+      };
+      this.getList();
     },
 
     // 选择
     getChecked(row) {
-      this.form.adminPodCastProgramDetailResp.push(row)
-      this.$message.success('选择成功！')
+      this.form.adminPodCastProgramDetailResp.push(row);
+      this.$message.success("选择成功！");
     },
 
     // 解除关联
@@ -293,22 +520,22 @@ export default {
       if (this.form.id) {
         relieve({
           id: this.form.id,
-          podcastProgramIds: this.ids
-        }).then(res => {
+          podcastProgramIds: this.ids,
+        }).then((res) => {
           if (res.code === 0) {
-            this.$message.success('解除成功！')
-            this.getDetail()
+            this.$message.success("解除成功！");
+            this.getDetail();
           }
-        })
+        });
       } else {
-        this.ids.map(i => {
+        this.ids.map((i) => {
           this.form.adminPodCastProgramDetailResp.map((j, index) => {
             if (j.id === i) {
-              this.form.adminPodCastProgramDetailResp.splice(index, 1)
-              this.$message.success('解除成功！')
+              this.form.adminPodCastProgramDetailResp.splice(index, 1);
+              this.$message.success("解除成功！");
             }
-          })
-        })
+          });
+        });
       }
     },
 
@@ -316,53 +543,53 @@ export default {
     getSubmit() {
       this.$refs.form.validate((valid) => {
         if (valid) {
-          let title = this.form.id ? '编辑成功！' : '新增成功！'
-          this.form.podcastProgramIds = []
-          this.form.adminPodCastProgramDetailResp.map(i => {
-            this.form.podcastProgramIds.push(i.id)
-          })
-          submit(this.form).then(res => {
+          let title = this.form.id ? "编辑成功！" : "新增成功！";
+          this.form.podcastProgramIds = [];
+          this.form.adminPodCastProgramDetailResp.map((i) => {
+            this.form.podcastProgramIds.push(i.id);
+          });
+          submit(this.form).then((res) => {
             if (res.code === 0) {
-              this.$message.success(`${title}`)
+              this.$message.success(`${title}`);
               if (this.form.id) {
-                delete this.form.adminPodCastProgramDetailResp
-                this.getDetail()
+                delete this.form.adminPodCastProgramDetailResp;
+                this.getDetail();
               } else {
-                this.cancel()
+                this.cancel();
               }
             }
-          })
+          });
         } else {
-          return false
+          return false;
         }
-      })
+      });
     },
 
     // 多选
     handleSelect(e) {
-      this.ids = []
-      e.map(i => {
-        this.ids.push(i.id)
-      })
+      this.ids = [];
+      e.map((i) => {
+        this.ids.push(i.id);
+      });
     },
 
     // 取消
     cancel() {
-      this.$tab.closeOpenPage('/music/blog')
+      this.$tab.closeOpenPage("/music/blog");
     },
 
     // 字典翻译
     platformFormatter(row) {
-      return this.selectDictLabel(this.platformOptions, row.platformId)
+      return this.selectDictLabel(this.platformOptions, row.platformId);
     },
     statusFormatter(row) {
-      return this.selectDictLabel(this.onOrOffOptions, row.status)
+      return this.selectDictLabel(this.onOrOffOptions, row.status);
     },
     freeFormatter(row) {
-      return this.selectDictLabel(this.freeOptions, row.isFree)
-    }
-  }
-}
+      return this.selectDictLabel(this.freeOptions, row.isFree);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>

src/views/music/blog/index.vue

@@ -6,90 +6,217 @@
         <el-input v-model="form.id" placeholder="请输入播客Id" clearable />
       </el-form-item>
       <el-form-item label="播客名称：">
-        <el-input v-model="form.podcastName" placeholder="请输入播客名称" clearable />
+        <el-input
+          v-model="form.podcastName"
+          placeholder="请输入播客名称"
+          clearable
+        />
       </el-form-item>
       <el-form-item label="主播名称：">
-        <el-input v-model="form.podcasterName" placeholder="请输入主播名称" clearable />
+        <el-input
+          v-model="form.podcasterName"
+          placeholder="请输入主播名称"
+          clearable
+        />
       </el-form-item>
       <el-form-item label="播客分类：">
-        <el-select v-model="form.categoryId" filterable placeholder="请选择播客分类" clearable>
-          <el-option v-for="item in blogClassOptions" :key="item.value" :value="item.value" :label="item.label" />
+        <el-select
+          v-model="form.categoryId"
+          filterable
+          placeholder="请选择播客分类"
+          clearable
+        >
+          <el-option
+            v-for="item in blogClassOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="付费类型：">
-        <el-select v-model="form.payType" placeholder="请选择付费类型" clearable>
-          <el-option v-for="item in payTypeOptions" :key="item.value" :value="item.value" :label="item.label" />
+        <el-select
+          v-model="form.payType"
+          placeholder="请选择付费类型"
+          clearable
+        >
+          <el-option
+            v-for="item in payTypeOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="当前状态：">
         <el-select v-model="form.status" placeholder="请选择当前状态" clearable>
-          <el-option v-for="item in onOrOffOptions" :key="item.value" :value="item.value" :label="item.label" />
+          <el-option
+            v-for="item in onOrOffOptions"
+            :key="item.value"
+            :value="item.value"
+            :label="item.label"
+          />
         </el-select>
       </el-form-item>
       <el-form-item label="资源平台：">
-        <el-select v-model="form.platformId" placeholder="请选择资源平台" clearable>
-          <el-option v-for="item in platformOptions" :key="item.value" :value="item.value" :label="item.label" />
+        <el-select
+          v-model="form.platformId"
+          placeholder="请选择资源平台"
+          clearable
+        >
+          <el-option
+            v-for="item in platformOptions"
+            :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" plain icon="el-icon-plus" @click="getDetail()"
-          v-hasPermi="['music:blog:add']">新增</el-button>
-        <el-button type="primary" :disabled="obj.id === ''" @click="getChange(obj, 1)"
-          v-hasPermi="['music:blog:up']">批量上架</el-button>
-        <el-button type="primary" :disabled="obj.id === ''" @click="getChange(obj, 2)"
-          v-hasPermi="['music:blog:down']">批量下架</el-button>
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          @click="getDetail()"
+          v-hasPermi="['music:blog:add']"
+          >新增</el-button
+        >
+        <el-button
+          type="primary"
+          :disabled="obj.id === ''"
+          @click="getChange(obj, 1)"
+          v-hasPermi="['music:blog:up']"
+          >批量上架</el-button
+        >
+        <el-button
+          type="primary"
+          :disabled="obj.id === ''"
+          @click="getChange(obj, 2)"
+          v-hasPermi="['music:blog:down']"
+          >批量下架</el-button
+        >
       </el-form-item>
     </el-form>
     <!-- 列表 -->
-    <el-table :data="tableData" v-loading="loading" @selection-change="handleSelect">
+    <el-table
+      :data="tableData"
+      v-loading="loading"
+      @selection-change="handleSelect"
+    >
       <el-table-column type="selection" align="center" />
-      <el-table-column label="播客Id" prop="id" align="center" show-overflow-tooltip />
-      <el-table-column label="播客名称" prop="name" align="center" show-overflow-tooltip />
+      <el-table-column
+        label="播客Id"
+        prop="id"
+        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.thumb" />
         </template>
       </el-table-column>
-      <el-table-column label="播客分类" prop="categoryids" align="center" :formatter="categoryFormatter"
-        show-overflow-tooltip>
+      <el-table-column
+        label="播客分类"
+        prop="categoryids"
+        align="center"
+        :formatter="categoryFormatter"
+        show-overflow-tooltip
+      >
       </el-table-column>
       <el-table-column label="主播名称" align="center" show-overflow-tooltip>
         <template slot-scope="scope">
-          <span v-for="(item, index) in scope.row.adminPrdCasterResp" :key="item.podcasterId">
-            {{ item.podcasterName }}{{ index + 1 >= scope.row.adminPrdCasterResp.length ? '' : '，' }}
+          <span
+            v-for="(item, index) in scope.row.adminPrdCasterResp"
+            :key="item.podcasterId"
+          >
+            {{ item.podcasterName
+            }}{{ index + 1 >= scope.row.adminPrdCasterResp.length ? "" : "，" }}
           </span>
         </template>
       </el-table-column>
-      <el-table-column label="付费类型" prop="charging" align="center" :formatter="chargingFormatter" />
+      <el-table-column
+        label="付费类型"
+        prop="charging"
+        align="center"
+        :formatter="chargingFormatter"
+      />
       <el-table-column label="节目数量" prop="programCount" align="center" />
-      <el-table-column label="当前状态" prop="status" align="center" :formatter="statusFormatter" />
-      <el-table-column label="资源平台" prop="platformId" align="center" :formatter="platformFormatter" />
+      <el-table-column
+        label="当前状态"
+        prop="status"
+        align="center"
+        :formatter="statusFormatter"
+      />
+      <el-table-column
+        label="资源平台"
+        prop="platformId"
+        align="center"
+        :formatter="platformFormatter"
+      />
       <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button type="text" @click="getDetail(scope.row.id, true)">查看</el-button>
+          <el-button type="text" @click="getDetail(scope.row.id, true)"
+            >查看</el-button
+          >
           <span v-if="scope.row.status === 2">
-            <el-button type="text" @click="getDetail(scope.row.id)" v-hasPermi="['music:blog:edit']"
-              style="margin-left: 10px">编辑</el-button>
-            <el-button type="text" @click="getChange(scope.row, 1)" v-hasPermi="['music:blog:up']">上架
+            <el-button
+              type="text"
+              @click="getDetail(scope.row.id)"
+              v-hasPermi="['music:blog:edit']"
+              style="margin-left: 10px"
+              >编辑</el-button
+            >
+            <el-button
+              type="text"
+              @click="getChange(scope.row, 1)"
+              v-hasPermi="['music:blog:up']"
+              >上架
             </el-button>
-            <el-button type="delete" @click="getDelete(scope.row)" v-hasPermi="['music:blog:delete']">删除
+            <el-button
+              type="delete"
+              @click="getDelete(scope.row)"
+              v-hasPermi="['music:blog:delete']"
+              >删除
             </el-button>
           </span>
-          <el-button v-else type="text" @click="getChange(scope.row, 2)" v-hasPermi="['music:blog:down']">下架
+          <el-button
+            v-else
+            type="text"
+            @click="getChange(scope.row, 2)"
+            v-hasPermi="['music:blog:down']"
+            >下架
           </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"
+    />
   </div>
 </template>
 
 <script>
-import { list, change, remove } from '@/api/music/blog'
-import { payTypeMixin, onOrOffMixin, platformMixin, blogClassMixin } from '@/mixin/index'
+import { change, list, remove } from "@/api/music/blog";
+import {
+blogClassMixin,
+onOrOffMixin,
+payTypeMixin,
+platformMixin,
+} from "@/mixin/index";
 export default {
   mixins: [payTypeMixin, onOrOffMixin, platformMixin, blogClassMixin],
   data() {
@@ -99,7 +226,7 @@ export default {
       // 表单
       form: {
         pageNum: 1,
-        pageSize: 10
+        pageSize: 10,
       },
       // 总数据
       total: 0,
@@ -107,44 +234,44 @@ export default {
       tableData: [],
       // 批量上下架
       obj: {
-        id: '',
-        name: '已选数据'
-      }
-    }
+        id: "",
+        name: "已选数据",
+      },
+    };
   },
   mounted() {
     // 获取资源平台
     this.getPlatform({
-      audioType: 8
-    })
-    this.getList()
+      audioType: 8,
+    });
+    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();
     },
 
     // 新增 查看 编辑
@@ -153,61 +280,72 @@ export default {
         path: `/music/blog/detail`,
         query: {
           id: id,
-          disabled: boolean
-        }
-      })
+          disabled: boolean,
+        },
+      });
     },
 
     // 上下架
     getChange(row, status) {
-      let title = status === 1 ? '上架' : '下架'
-      this.$confirm(`是否${title}${row.name}?`, '提示', {
-        type: 'warning'
-      }).then(() => {
-        change(row.id, status).then(res => {
-          if (res.code === 0) {
-            this.$message.success(`${title}成功！`)
-            this.getList()
-          }
+      let title = status === 1 ? "上架" : "下架";
+      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(row) {
-      this.$confirm(`是否删除${row.name}?`, '提示', {
-        type: 'warning'
-      }).then(() => {
-        remove(row.id).then(res => {
-          if (res.code === 0) {
-            this.$message.success('删除成功！')
-            this.getList()
-          }
+      this.$confirm(`是否删除${row.name}?`, "提示", {
+        type: "warning",
+      })
+        .then(() => {
+          remove(row.id).then((res) => {
+            if (res.code === 0) {
+              this.$message.success("删除成功！");
+              this.getList();
+            }
+          });
         })
-      }).catch(() => { })
+        .catch(() => {});
     },
 
     // 多选
     handleSelect(e) {
-      this.obj.id = ''
-      e.map((item, index) => this.obj.id += item.id + ((index + 1) < e.length ? ',' : ''))
+      this.obj.id = "";
+      e.map(
+        (item, index) =>
+          (this.obj.id += item.id + (index + 1 < e.length ? "," : ""))
+      );
     },
 
     // 字典翻译
     chargingFormatter(row) {
-      return this.selectDictLabel(this.payTypeOptions, row.charging)
+      return this.selectDictLabel(this.payTypeOptions, row.charging);
     },
     statusFormatter(row) {
-      return this.selectDictLabel(this.onOrOffOptions, row.status)
+      return this.selectDictLabel(this.onOrOffOptions, row.status);
     },
     platformFormatter(row) {
-      return this.selectDictLabel(this.platformOptions, row.platformId)
+      return this.selectDictLabel(this.platformOptions, row.platformId);
     },
     categoryFormatter(row) {
-      return row.categoryIds.map((item, index) => (this.selectDictLabel(this.blogClassOptions, item)) + (index + 1 < row.categoryIds.length ? '，' : ''))
-    }
-  }
-}
+      return row.categoryIds.map(
+        (item, index) =>
+          this.selectDictLabel(this.blogClassOptions, item) +
+          (index + 1 < row.categoryIds.length ? "，" : "")
+      );
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped></style>

src/views/operation/channel/detail.vue

@@ -8,18 +8,38 @@
             <el-input v-model="form.aliasName" placeholder="请输入频道名称" />
           </el-form-item>
           <el-form-item label="频道属性：">
-            <el-select v-model="form.channelType" placeholder="请选择频道属性" :disabled="disabled" @change="handleChange">
-              <el-option v-for="item in channelTypeOptions" :key="item.value" :value="Number(item.value)"
-                :label="item.label" :disabled="channelDisabled(item.value)" />
+            <el-select
+              v-model="form.channelType"
+              placeholder="请选择频道属性"
+              :disabled="disabled"
+              @change="handleChange"
+            >
+              <el-option
+                v-for="item in channelTypeOptions"
+                :key="item.value"
+                :value="Number(item.value)"
+                :label="item.label"
+                :disabled="channelDisabled(item.value)"
+              />
             </el-select>
           </el-form-item>
           <el-form-item label="频道封面：">
-            <Upload listType="picture-card" :url="form.pic" @upload="getUpload" :disabled="isRead" />
+            <Upload
+              listType="picture-card"
+              :url="form.pic"
+              @upload="getUpload"
+              :disabled="isRead"
+            />
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="频道简介：">
-            <el-input v-model="form.description" type="textarea" rows="12" placeholder="请输入频道简介" />
+            <el-input
+              v-model="form.description"
+              type="textarea"
+              rows="12"
+              placeholder="请输入频道简介"
+            />
           </el-form-item>
         </el-col>
       </el-row>
@@ -28,33 +48,80 @@
           新增内容
         </el-button>
         <el-table :data="form.list" v-loading="loading">
-          <el-table-column label="音频ID" prop="audioId" align="center" show-overflow-tooltip />
-          <el-table-column label="音频名称" prop="audioName" align="center" show-overflow-tooltip />
+          <el-table-column
+            label="音频ID"
+            prop="audioId"
+            align="center"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="音频名称"
+            prop="audioName"
+            align="center"
+            show-overflow-tooltip
+          />
           <el-table-column label="音频封面" align="center" width="100px">
             <template slot-scope="scope">
               <el-image :src="scope.row.audioPic" />
             </template>
           </el-table-column>
-          <el-table-column label="音频作者" align="center" show-overflow-tooltip>
+          <el-table-column
+            label="音频作者"
+            align="center"
+            show-overflow-tooltip
+          >
             <template slot-scope="scope">
               <span>
-                {{ scope.row.singerName ? scope.row.singerName : '-' }}
+                {{ scope.row.singerName ? scope.row.singerName : "-" }}
               </span>
             </template>
           </el-table-column>
-          <el-table-column label="专辑名称" prop="songName" align="center" show-overflow-tooltip>
+          <el-table-column
+            label="专辑名称"
+            prop="songName"
+            align="center"
+            show-overflow-tooltip
+          >
             <template slot-scope="scope">
               <span>
-                {{ scope.row.songName ? scope.row.songName : '-' }}
+                {{ scope.row.songName ? scope.row.songName : "-" }}
               </span>
             </template>
           </el-table-column>
-          <el-table-column label="付费类型" prop="isFree" align="center" :formatter="freeFormatter" />
-          <el-table-column label="资源平台" align="center" :formatter="platfromFormatter" />
-          <el-table-column label="当前状态" align="center" :formatter="statusFormatter" />
+          <el-table-column
+            label="付费类型"
+            prop="isFree"
+            align="center"
+            :formatter="freeFormatter"
+          />
+          <el-table-column
+            label="资源平台"
+            align="center"
+            :formatter="platfromFormatter"
+          />
+          <el-table-column
+            label="当前状态"
+            align="center"
+            :formatter="statusFormatter"
+          />
           <el-table-column label="操作" align="center">
             <template slot-scope="scope">
-              <el-button type="delete" @click="getDelete(scope.row)">删除</el-button>
+              <el-button type="delete" @click="getDelete(scope.row)"
+                >删除</el-button
+              >
+
+              <el-button
+                type="text"
+                icon="el-icon-caret-top"
+                @click="getChangeDetail(scope.row, scope.row.sort - 1)"
+                :disabled="disabled"
+              />
+              <el-button
+                type="text"
+                icon="el-icon-caret-bottom"
+                @click="getChangeDetail(scope.row, scope.row.sort + 1)"
+                :disabled="disabled"
+              />
             </template>
           </el-table-column>
         </el-table>
@@ -66,18 +133,23 @@
       <el-button v-if="!isRead" type="primary" @click="submit">提交</el-button>
     </div>
     <!-- 弹窗 -->
-    <Dialog :visible="dialogVisible" :data="form.list" :channelType="form.channelType" @close="close" />
+    <Dialog
+      :visible="dialogVisible"
+      :data="form.list"
+      :channelType="form.channelType"
+      @close="close"
+    />
   </div>
 </template>
 
 <script>
-import Dialog from '@/components/Dialog/index.vue'
-import { channelDetail, edit } from '@/api/operation/channel'
-import { platformMixin, isFreeMixin, disabledMixin } from '@/mixin/index'
+import { channelDetail, edit } from "@/api/operation/channel";
+import Dialog from "@/components/Dialog/index.vue";
+import { disabledMixin, isFreeMixin, platformMixin } from "@/mixin/index";
 export default {
   mixins: [platformMixin, isFreeMixin, disabledMixin],
   components: {
-    Dialog
+    Dialog,
   },
   data() {
     return {
@@ -88,98 +160,98 @@ export default {
       // 表单
       form: {},
       // 频道1 频道2 的频道属性不可修改
-      disabled: this.$route.query.index == '1' ? true : false,
+      disabled: this.$route.query.index == "1" ? true : false,
       channelTypeOptions: [
-        { value: 2, label: '广播' },
-        { value: 6, label: '节目' },
-        { value: 8, label: '专辑' },
-        { value: 16, label: '猫王音乐台' },
-        { value: 17, label: '猫王精选电台' }
+        { value: 2, label: "广播" },
+        { value: 6, label: "节目" },
+        { value: 8, label: "专辑" },
+        { value: 16, label: "猫王音乐台" },
+        { value: 17, label: "猫王精选电台" },
       ],
       // 只读
-      isRead: Boolean(this.$route.query.boolean)
-    }
+      isRead: Boolean(this.$route.query.boolean),
+    };
   },
   mounted() {
-    this.getDetail()
-    this.getPlatform({})
+    this.getDetail();
+    this.getPlatform({});
   },
   methods: {
     // 频道详情
     getDetail() {
       channelDetail({
-        channelId: this.$route.query.channelId
-      }).then(res => {
+        channelId: this.$route.query.channelId,
+      }).then((res) => {
         if (res.code === 0) {
-          this.form = res.data
+          this.form = res.data;
         }
-      })
+      });
     },
 
     // 修改频道属性
     handleChange() {
-      this.form.list = this.form.audioList = []
+      this.form.list = this.form.audioList = [];
     },
 
     // 上传频道封面
     getUpload(e) {
-      this.form.pic = e.file
+      this.form.pic = e.file;
     },
 
     // 打开弹窗
     getDialog() {
-      this.dialogVisible = true
+      this.dialogVisible = true;
     },
 
     // 关闭弹窗
     close() {
-      this.dialogVisible = false
+      this.dialogVisible = false;
     },
 
     // 删除
     getDelete(row) {
-      this.form.list = this.form.list.filter(i => i.audioId !== row.audioId)
+      this.form.list = this.form.list.filter((i) => i.audioId !== row.audioId);
     },
 
     // 提交
     submit() {
-      this.form.audioList = []
-      this.form.list.map(i => {
+      this.form.audioList = [];
+      this.form.list.map((i) => {
         this.form.audioList.push({
           audioId: i.audioId,
-          audioType: i.audioType
-        })
-      })
-      edit(this.form).then(res => {
+          audioType: i.audioType,
+        });
+      });
+      edit(this.form).then((res) => {
         if (res.code === 0) {
-          this.$message.success('修改成功！')
-          this.getDetail()
+          this.$message.success("修改成功！");
+          this.getDetail();
         }
-      })
+      });
     },
 
     // 取消
     cancel() {
-      this.$tab.closeOpenPage('/operation/channel')
+      this.$tab.closeOpenPage("/operation/channel");
     },
 
     // 除了2频道都不可以选猫王精选电台
-    channelDisabled(e){
-      return this.$route.query.index !== '1' ? e == 17 ? true : false : false
+    channelDisabled(e) {
+      return this.$route.query.index !== "1" ? (e == 17 ? true : false) : false;
     },
 
     // 字典翻译
     platfromFormatter(row) {
-      return this.selectDictLabel(this.platformTypeOptions, row.platformId)
+      return this.selectDictLabel(this.platformTypeOptions, row.platformId);
     },
     freeFormatter(row) {
-      return this.selectDictLabel(this.freeOptions, row.isFree)
+      return this.selectDictLabel(this.freeOptions, row.isFree);
     },
     statusFormatter(row) {
-      return this.selectDictLabel(this.disabledOptions, row.status)
-    }
-  }
-}
+      return this.selectDictLabel(this.disabledOptions, row.status);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>

src/views/operation/channel/index.vue

@@ -68,7 +68,7 @@
 </template>
 
 <script>
-import { channelPage, page, create, editPage, getRemove, devList, change } from '@/api/operation/channel'
+import { change, channelPage, create, devList, editPage, getRemove, page } from '@/api/operation/channel';
 export default {
   name: 'Channel',
   data() {

src/views/operation/channels/detail.vue

@@ -8,18 +8,36 @@
             <el-input v-model="form.aliasName" placeholder="请输入频道名称" />
           </el-form-item>
           <el-form-item label="频道属性：">
-            <el-select v-model="form.channelType" placeholder="请选择频道属性" @change="handleChange">
-              <el-option v-for="item in channelTypeOptions" :key="item.value" :value="Number(item.value)"
-                :label="item.label" />
+            <el-select
+              v-model="form.channelType"
+              placeholder="请选择频道属性"
+              @change="handleChange"
+            >
+              <el-option
+                v-for="item in channelTypeOptions"
+                :key="item.value"
+                :value="Number(item.value)"
+                :label="item.label"
+              />
             </el-select>
           </el-form-item>
           <el-form-item label="频道封面：">
-            <Upload listType="picture-card" :url="form.pic" @upload="getUpload" :disabled="isRead" />
+            <Upload
+              listType="picture-card"
+              :url="form.pic"
+              @upload="getUpload"
+              :disabled="isRead"
+            />
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="频道简介：">
-            <el-input v-model="form.description" type="textarea" rows="12" placeholder="请输入频道简介" />
+            <el-input
+              v-model="form.description"
+              type="textarea"
+              rows="12"
+              placeholder="请输入频道简介"
+            />
           </el-form-item>
         </el-col>
       </el-row>
@@ -28,33 +46,80 @@
           新增内容
         </el-button>
         <el-table :data="form.list" v-loading="loading">
-          <el-table-column label="音频ID" prop="audioId" align="center" show-overflow-tooltip />
-          <el-table-column label="音频名称" prop="audioName" align="center" show-overflow-tooltip />
+          <el-table-column
+            label="音频ID"
+            prop="audioId"
+            align="center"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            label="音频名称"
+            prop="audioName"
+            align="center"
+            show-overflow-tooltip
+          />
           <el-table-column label="音频封面" align="center" width="100px">
             <template slot-scope="scope">
               <el-image :src="scope.row.audioPic" />
             </template>
           </el-table-column>
-          <el-table-column label="音频作者" align="center" show-overflow-tooltip>
+          <el-table-column
+            label="音频作者"
+            align="center"
+            show-overflow-tooltip
+          >
             <template slot-scope="scope">
               <span>
-                {{ scope.row.singerName ? scope.row.singerName : '-' }}
+                {{ scope.row.singerName ? scope.row.singerName : "-" }}
               </span>
             </template>
           </el-table-column>
-          <el-table-column label="专辑名称" prop="songName" align="center" show-overflow-tooltip>
+          <el-table-column
+            label="专辑名称"
+            prop="songName"
+            align="center"
+            show-overflow-tooltip
+          >
             <template slot-scope="scope">
               <span>
-                {{ scope.row.songName ? scope.row.songName : '-' }}
+                {{ scope.row.songName ? scope.row.songName : "-" }}
               </span>
             </template>
           </el-table-column>
-          <el-table-column label="付费类型" prop="isFree" align="center" :formatter="freeFormatter" />
-          <el-table-column label="资源平台" align="center" :formatter="platfromFormatter" />
-          <el-table-column label="当前状态" align="center" :formatter="statusFormatter" />
+          <el-table-column
+            label="付费类型"
+            prop="isFree"
+            align="center"
+            :formatter="freeFormatter"
+          />
+          <el-table-column
+            label="资源平台"
+            align="center"
+            :formatter="platfromFormatter"
+          />
+          <el-table-column
+            label="当前状态"
+            align="center"
+            :formatter="statusFormatter"
+          />
           <el-table-column label="操作" align="center">
             <template slot-scope="scope">
-              <el-button type="delete" @click="getDelete(scope.row)">删除</el-button>
+              <el-button type="delete" @click="getDelete(scope.row)"
+                >删除</el-button
+              >
+
+              <el-button
+                type="text"
+                icon="el-icon-caret-top"
+                @click="getChangeDetail(scope.row, scope.row.sort - 1)"
+                :disabled="disabled"
+              />
+              <el-button
+                type="text"
+                icon="el-icon-caret-bottom"
+                @click="getChangeDetail(scope.row, scope.row.sort + 1)"
+                :disabled="disabled"
+              />
             </template>
           </el-table-column>
         </el-table>
@@ -66,18 +131,27 @@
       <el-button v-if="!isRead" type="primary" @click="submit">提交</el-button>
     </div>
     <!-- 弹窗 -->
-    <Dialog :visible="dialogVisible" :data="form.list" :channelType="form.channelType" @close="close" />
+    <Dialog
+      :visible="dialogVisible"
+      :data="form.list"
+      :channelType="form.channelType"
+      @close="close"
+    />
   </div>
 </template>
 
 <script>
-import Dialog from '@/components/Dialog/index.vue'
-import { channelDetail, channeledit } from '@/api/operation/channels'
-import { platformMixin, isFreeMixin, disabledMixin } from '@/mixin/index'
+import {
+changeDetail,
+channelDetail,
+channeledit,
+} from "@/api/operation/channels";
+import Dialog from "@/components/Dialog/index.vue";
+import { disabledMixin, isFreeMixin, platformMixin } from "@/mixin/index";
 export default {
   mixins: [platformMixin, isFreeMixin, disabledMixin],
   components: {
-    Dialog
+    Dialog,
   },
   data() {
     return {
@@ -88,89 +162,102 @@ export default {
       // 表单
       form: {},
       channelTypeOptions: [
-        { value: 2, label: '广播' },
-        { value: 6, label: '节目' },
-        { value: 8, label: '专辑' }
+        { value: 2, label: "广播" },
+        { value: 6, label: "节目" },
+        { value: 8, label: "专辑" },
       ],
       // 只读
-      isRead: Boolean(this.$route.query.boolean)
-    }
+      isRead: Boolean(this.$route.query.boolean),
+    };
   },
   mounted() {
-    this.getDetail()
-    this.getPlatform({})
+    this.getDetail();
+    this.getPlatform({});
   },
   methods: {
+    // 排序
+    getChangeDetail(row, sort) {
+      changeDetail({
+        id: row.id,
+        sort: sort,
+      }).then((res) => {
+        if (res.code === 0) {
+          this.$message.success("修改成功！");
+          this.getDetail();
+        }
+      });
+    },
+
     // 频道详情
     getDetail() {
       channelDetail({
-        channelId: this.$route.query.channelId
-      }).then(res => {
+        channelId: this.$route.query.channelId,
+      }).then((res) => {
         if (res.code === 0) {
-          this.form = res.data
+          this.form = res.data;
         }
-      })
+      });
     },
 
     // 修改频道属性
     handleChange() {
-      this.form.list = this.form.audioList = []
+      this.form.list = this.form.audioList = [];
     },
 
     // 上传频道封面
     getUpload(e) {
-      this.form.pic = e.file
+      this.form.pic = e.file;
     },
 
     // 打开弹窗
     getDialog() {
-      this.dialogVisible = true
+      this.dialogVisible = true;
     },
 
     // 关闭弹窗
     close() {
-      this.dialogVisible = false
+      this.dialogVisible = false;
     },
 
     // 删除
     getDelete(row) {
-      this.form.list = this.form.list.filter(i => i.audioId !== row.audioId)
+      this.form.list = this.form.list.filter((i) => i.audioId !== row.audioId);
     },
 
     // 提交
     submit() {
-      this.form.audioList = []
-      this.form.list.map(i => {
+      this.form.audioList = [];
+      this.form.list.map((i) => {
         this.form.audioList.push({
           audioId: i.audioId,
-          audioType: i.audioType
-        })
-      })
-      channeledit(this.form).then(res => {
+          audioType: i.audioType,
+        });
+      });
+      channeledit(this.form).then((res) => {
         if (res.code === 0) {
-          this.$message.success('修改成功！')
-          this.getDetail()
+          this.$message.success("修改成功！");
+          this.getDetail();
         }
-      })
+      });
     },
 
     // 取消
     cancel() {
-      this.$tab.closeOpenPage('/operation/channels')
+      this.$tab.closeOpenPage("/operation/channels");
     },
 
     // 字典翻译
     platfromFormatter(row) {
-      return this.selectDictLabel(this.platformTypeOptions, row.platformId)
+      return this.selectDictLabel(this.platformTypeOptions, row.platformId);
     },
     freeFormatter(row) {
-      return this.selectDictLabel(this.freeOptions, row.isFree)
+      return this.selectDictLabel(this.freeOptions, row.isFree);
     },
     statusFormatter(row) {
-      return this.selectDictLabel(this.disabledOptions, row.status)
-    }
-  }
-}
+      return this.selectDictLabel(this.disabledOptions, row.status);
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>