|
@@ -1,145 +1,78 @@
|
|
|
<!-- 音乐专辑 详情 -->
|
|
|
<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-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">
|
|
|
+ <div v-if="currentEditIndex !== scope.$index">
|
|
|
+ <span :style="{ marginRight: (!disabled || !canOrder) ? '0px' : '8px' }">
|
|
|
+ {{ (dialogForm.pageNum - 1) * dialogForm.pageSize + scope.$index + 1 }}
|
|
|
+ </span>
|
|
|
+ <svg-icon v-if="!disabled || !canOrder" icon-class="edit"
|
|
|
+ @click.native="handleEditClick(scope.row, scope.$index)" />
|
|
|
+ </div>
|
|
|
+ <el-input v-else v-model="editData.sortIndex" size="mini" style="width:60px;" type="number"
|
|
|
+ @blur="onNumberBlur(scope.row, scope.$index)" placeholder="序号" ref="numberInput" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
<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="getChange(true, scope.$index, scope.$index - 1)"
|
|
|
- :disabled="
|
|
|
- (scope.$index < 1 && !disabled) ||
|
|
|
+ <el-button type="text" icon="el-icon-caret-top" @click="getChange(true, scope.$index, scope.$index - 1)"
|
|
|
+ :disabled="(scope.$index < 1 && !disabled) ||
|
|
|
disabledPlatformId(form.platformId)
|
|
|
- "
|
|
|
- />
|
|
|
+ " />
|
|
|
|
|
|
<!-- 向下移动 -->
|
|
|
- <el-button
|
|
|
- type="text"
|
|
|
- icon="el-icon-caret-bottom"
|
|
|
- @click="getChange(false, scope.$index, scope.$index + 1)"
|
|
|
- :disabled="
|
|
|
- (scope.$index > form.programList.length - 2 && !disabled) ||
|
|
|
+ <el-button type="text" icon="el-icon-caret-bottom"
|
|
|
+ @click="getChange(false, scope.$index, scope.$index + 1)" :disabled="(scope.$index > form.programList.length - 2 && !disabled) ||
|
|
|
disabledPlatformId(form.platformId)
|
|
|
- "
|
|
|
- />
|
|
|
+ " />
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
@@ -147,77 +80,37 @@
|
|
|
</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"
|
|
|
- ref="multipleTable"
|
|
|
- :row-key="tableKey"
|
|
|
- v-loading="loading"
|
|
|
- @selection-change="handleSelectionChange"
|
|
|
- >
|
|
|
- <el-table-column
|
|
|
- type="selection"
|
|
|
- align="center"
|
|
|
- key="selection"
|
|
|
- reserve-selection
|
|
|
- />
|
|
|
+ <el-table :data="tableData" ref="multipleTable" :row-key="tableKey" v-loading="loading"
|
|
|
+ @selection-change="handleSelectionChange">
|
|
|
+ <el-table-column type="selection" align="center" key="selection" reserve-selection />
|
|
|
|
|
|
<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">
|
|
@@ -235,13 +128,8 @@
|
|
|
</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>
|
|
@@ -251,13 +139,13 @@ 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,
|
|
|
+ albumTypeMixin,
|
|
|
+ onOrOffMixin,
|
|
|
+ payTypeMixin,
|
|
|
+ platformMixin,
|
|
|
} from "@/mixin/index";
|
|
|
export default {
|
|
|
- name:"musicAlbumDetail",
|
|
|
+ name: "musicAlbumDetail",
|
|
|
mixins: [platformMixin, onOrOffMixin, payTypeMixin, albumTypeMixin],
|
|
|
components: {
|
|
|
Audio,
|
|
@@ -292,6 +180,8 @@ export default {
|
|
|
status: 1,
|
|
|
type: 1,
|
|
|
},
|
|
|
+ editData: {},
|
|
|
+ currentEditIndex: -1,
|
|
|
// 校验
|
|
|
rules: {
|
|
|
name: [
|
|
@@ -402,7 +292,66 @@ export default {
|
|
|
tableKey(row) {
|
|
|
return row.id;
|
|
|
},
|
|
|
+ // 输入框失去焦点时隐藏
|
|
|
+ onNumberBlur(row, index) {
|
|
|
+
|
|
|
+ let newValue = Number(this.editData.sortIndex);
|
|
|
+ const maxLen = this.form.programList.length;
|
|
|
+
|
|
|
+ if (isNaN(newValue) || newValue === null || newValue === undefined) {
|
|
|
+ console.log('序号未修改:', newValue);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (newValue < 1) {
|
|
|
+ this.$message.warning('序号必须大于0');
|
|
|
+ this.currentEditIndex = -1;
|
|
|
+
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (newValue > maxLen) {
|
|
|
+ // 超出就是最后一位
|
|
|
+ newValue = maxLen
|
|
|
+ }
|
|
|
+
|
|
|
+ if (newValue === -1 || newValue === '') {
|
|
|
+ // 新值为空时处理
|
|
|
+ this.currentEditIndex = -1;
|
|
|
+ console.log('序号未修改:', newValue);
|
|
|
+ return
|
|
|
+ }
|
|
|
+ console.log('序号修改:', newValue, '当前索引:', index, this.currentEditIndex);
|
|
|
+
|
|
|
+ // 计算目标下标
|
|
|
+ const targetIndex = newValue - 1;
|
|
|
+ if (targetIndex === index) {
|
|
|
+ // this.currentEditIndex = -1;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 交换两个元素
|
|
|
+ // ...existing code...
|
|
|
+ // 插入到目标位置,原本序号顺延
|
|
|
+ const movingItem = this.form.programList.splice(index, 1)[0];
|
|
|
+ this.form.programList.splice(targetIndex, 0, movingItem);
|
|
|
+ // ...existing code...
|
|
|
+ this.currentEditIndex = -1;
|
|
|
+ this.$message.success("操作成功!");
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ // 点击编辑图标显示输入框
|
|
|
+ handleEditClick(row, index) {
|
|
|
+ if (this.disabled || !this.canOrder) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.editData = {
|
|
|
+ sortIndex: row.index,
|
|
|
+ };
|
|
|
+ this.currentEditIndex = index;
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.numberInput.focus();
|
|
|
+ });
|
|
|
|
|
|
+ },
|
|
|
handleSelectionChange(val) {
|
|
|
if (this.isLoad) {
|
|
|
if (this.form.programList.length == 0) {
|