|
|
|
|
@ -1,3 +1,10 @@
|
|
|
|
|
<!--
|
|
|
|
|
* @Author: zhangjiabao
|
|
|
|
|
* @Date: 2024-01-24 10:09:33
|
|
|
|
|
* @LastEditors: zhangjiabao
|
|
|
|
|
* @LastEditTime: 2024-01-24 17:55:06
|
|
|
|
|
* @FilePath: /luoo_manage_fe/src/views/article/articleModify.vue
|
|
|
|
|
-->
|
|
|
|
|
<!--
|
|
|
|
|
* @Description:
|
|
|
|
|
* @version: v1
|
|
|
|
|
@ -33,7 +40,7 @@
|
|
|
|
|
<el-cascader
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
:options="remoteTagList"
|
|
|
|
|
:props="{ multiple: true }"
|
|
|
|
|
:props="{ multiple: true, checkStrictly: true }"
|
|
|
|
|
size="small"
|
|
|
|
|
v-model="selectTag"
|
|
|
|
|
@change="handleTagSelectChange"
|
|
|
|
|
@ -85,7 +92,12 @@
|
|
|
|
|
></el-col
|
|
|
|
|
>
|
|
|
|
|
<el-col :span="4"
|
|
|
|
|
><el-button plain size="small" type="primary" icon="el-icon-zoom-in"
|
|
|
|
|
><el-button
|
|
|
|
|
plain
|
|
|
|
|
size="small"
|
|
|
|
|
type="primary"
|
|
|
|
|
icon="el-icon-zoom-in"
|
|
|
|
|
@click="handleMusicLibiraryAdd"
|
|
|
|
|
>曲库添加</el-button
|
|
|
|
|
>
|
|
|
|
|
</el-col>
|
|
|
|
|
@ -106,7 +118,7 @@
|
|
|
|
|
>
|
|
|
|
|
<el-table-column label="排序" align="center" width="60">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<i class="el-icon-rank"></i>
|
|
|
|
|
<i class="el-icon-sort"></i>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="picture" label="专辑封面" width="100px">
|
|
|
|
|
@ -124,7 +136,12 @@
|
|
|
|
|
<el-table-column prop="duration" label="时长"></el-table-column>
|
|
|
|
|
<el-table-column label="操作" width="300">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button plain icon="el-icon-edit" type="primary" size="mini"
|
|
|
|
|
<el-button
|
|
|
|
|
plain
|
|
|
|
|
icon="el-icon-edit"
|
|
|
|
|
type="primary"
|
|
|
|
|
size="mini"
|
|
|
|
|
@click="handleMusicModifyClick(scope.row)"
|
|
|
|
|
>编辑</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button
|
|
|
|
|
@ -191,10 +208,98 @@
|
|
|
|
|
>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
<el-dialog
|
|
|
|
|
title="曲库添加"
|
|
|
|
|
:visible="true"
|
|
|
|
|
v-if="musicDialog.visible"
|
|
|
|
|
width="40%"
|
|
|
|
|
top="60px"
|
|
|
|
|
append-to-body
|
|
|
|
|
:before-close="handleMusicDialogBeforeClose"
|
|
|
|
|
>
|
|
|
|
|
<!-- <el-input v-model="musicDialog.keyword"></el-input> -->
|
|
|
|
|
<el-select
|
|
|
|
|
v-model="musicDialog.selected"
|
|
|
|
|
filterable
|
|
|
|
|
remote
|
|
|
|
|
reserve-keyword
|
|
|
|
|
placeholder="请输入关键词"
|
|
|
|
|
@change="handleMusicLibrarySelectChange"
|
|
|
|
|
:loading="musicDialog.selectLoading"
|
|
|
|
|
:remote-method="queryFromMusicLibrary"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="item in musicDialog.remoteResult"
|
|
|
|
|
:key="item.id"
|
|
|
|
|
:label="item.name"
|
|
|
|
|
:value="item"
|
|
|
|
|
>
|
|
|
|
|
</el-option
|
|
|
|
|
></el-select>
|
|
|
|
|
<el-table
|
|
|
|
|
style="margin-top:10px"
|
|
|
|
|
border
|
|
|
|
|
fit
|
|
|
|
|
strip
|
|
|
|
|
size="mini"
|
|
|
|
|
v-loading="musicDialog.tableLoading"
|
|
|
|
|
:header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
|
|
|
|
|
:data="musicDialog.tableData"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column align="center" label="序号" width="95">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
{{ scope.$index + 1 }}
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="name" label="歌曲名称"></el-table-column>
|
|
|
|
|
<el-table-column prop="artist" label="歌手/乐队"></el-table-column>
|
|
|
|
|
<el-table-column prop="album" label="所属专辑"></el-table-column>
|
|
|
|
|
<el-table-column prop="duration" label="时长"></el-table-column>
|
|
|
|
|
<el-table-column label="操作">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button
|
|
|
|
|
size="mini"
|
|
|
|
|
plain
|
|
|
|
|
icon="el-icon-delete"
|
|
|
|
|
@click="handleMusicLibraryTableDelete(scope.row)"
|
|
|
|
|
type="danger"
|
|
|
|
|
>删除</el-button
|
|
|
|
|
>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<span slot="footer">
|
|
|
|
|
<el-button size="small" type="primary" @click="handleMusicDialogSubmit"
|
|
|
|
|
>保存</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button size="small" @click="handleMusicDialogCancel"
|
|
|
|
|
>取消</el-button
|
|
|
|
|
>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
<el-dialog
|
|
|
|
|
title="信息编辑"
|
|
|
|
|
:visible="true"
|
|
|
|
|
v-if="musicModifyDialog.visible"
|
|
|
|
|
width="40%"
|
|
|
|
|
top="60px"
|
|
|
|
|
append-to-body
|
|
|
|
|
:before-close="handleMusicModifyDialogBeforeClose"
|
|
|
|
|
><MusicModify
|
|
|
|
|
:remoteTagData="remoteTagList"
|
|
|
|
|
:data="musicModifyDialog.data"
|
|
|
|
|
></MusicModify>
|
|
|
|
|
<span slot="footer">
|
|
|
|
|
<el-button size="small" type="primary">保存</el-button>
|
|
|
|
|
<el-button size="small">取消</el-button>
|
|
|
|
|
</span></el-dialog
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import musicApi from "@/api/musicV2";
|
|
|
|
|
import { MusicModify } from "./musicModify.vue";
|
|
|
|
|
import Sortable from "sortablejs";
|
|
|
|
|
import { quillEditor } from "vue-quill-editor";
|
|
|
|
|
import "quill/dist/quill.core.css";
|
|
|
|
|
@ -232,6 +337,18 @@ export default {
|
|
|
|
|
songId: null,
|
|
|
|
|
data: ""
|
|
|
|
|
},
|
|
|
|
|
musicDialog: {
|
|
|
|
|
visible: false,
|
|
|
|
|
selected: null,
|
|
|
|
|
selectLoading: false,
|
|
|
|
|
tableLoading: false,
|
|
|
|
|
tableData: [],
|
|
|
|
|
remoteResult: []
|
|
|
|
|
},
|
|
|
|
|
musicModifyDialog: {
|
|
|
|
|
visible: false,
|
|
|
|
|
data: {}
|
|
|
|
|
},
|
|
|
|
|
coverUploadFileList: [],
|
|
|
|
|
// editorOption里是放图片上传配置参数用的，例如：
|
|
|
|
|
// action: '/api/product/richtext_img_upload.do', // 必填参数 图片上传地址
|
|
|
|
|
@ -262,7 +379,8 @@ export default {
|
|
|
|
|
this.syncTagDataToComponent();
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
quillEditor
|
|
|
|
|
quillEditor,
|
|
|
|
|
MusicModify
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
// 需要支持拖动效果的列表容器，在这里我们设置为el-table组件的tbody，
|
|
|
|
|
@ -275,14 +393,14 @@ export default {
|
|
|
|
|
animation: 150,
|
|
|
|
|
// 需要在odEnd方法中处理原始eltable数据，使原始数据与显示数据保持顺序一致
|
|
|
|
|
onEnd: ({ newIndex, oldIndex }) => {
|
|
|
|
|
const targetRow = this.data.songTableData[oldIndex];
|
|
|
|
|
this.data.songTableData.splice(oldIndex, 1);
|
|
|
|
|
this.data.songTableData.splice(newIndex, 0, targetRow);
|
|
|
|
|
console.table(this.data.songTableData);
|
|
|
|
|
const targetRow = this.data.songs[oldIndex];
|
|
|
|
|
this.data.songs.splice(oldIndex, 1);
|
|
|
|
|
this.data.songs.splice(newIndex, 0, targetRow);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// ************************* 数据处理 *************************
|
|
|
|
|
syncTagDataToComponent() {
|
|
|
|
|
// selectTag
|
|
|
|
|
for (let i in this.data.tag) {
|
|
|
|
|
@ -302,10 +420,84 @@ export default {
|
|
|
|
|
handleTagSelectChange(val) {
|
|
|
|
|
let newTag = [];
|
|
|
|
|
for (let i in val) {
|
|
|
|
|
if (val[i].length === 1) {
|
|
|
|
|
newTag.push(val[i][0]);
|
|
|
|
|
} else {
|
|
|
|
|
newTag.push(val[i][1]);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.data.tag = newTag;
|
|
|
|
|
},
|
|
|
|
|
queryFromMusicLibrary(keyword) {
|
|
|
|
|
// musicApi.getByKeyword(keyword).then(res => {
|
|
|
|
|
// if (res.code === 200) {
|
|
|
|
|
// this.musicDialog.remoteResult = res.data;
|
|
|
|
|
// } else {
|
|
|
|
|
// this.musicDialog.remoteResult = [];
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
this.musicDialog.selectLoading = true;
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
let musicList = [
|
|
|
|
|
{
|
|
|
|
|
album: "范特西",
|
|
|
|
|
artist: "周杰伦",
|
|
|
|
|
duration: "1h30min",
|
|
|
|
|
id: "1",
|
|
|
|
|
journal: [1, 2, 3],
|
|
|
|
|
lyric: "lllll llll lll",
|
|
|
|
|
name: "双节棍",
|
|
|
|
|
picture: "https://luoow.wxwenku.com/999/cover_min.jpg",
|
|
|
|
|
size: "1.3m",
|
|
|
|
|
state: "1",
|
|
|
|
|
tags: [3, 5, 11],
|
|
|
|
|
updateTime: "2023-01-01",
|
|
|
|
|
url:
|
|
|
|
|
"https://luoow.wxwenku.com/999/01._Belmondo_(Große_Liebe)_Annett_Louisan.mp3",
|
|
|
|
|
userId: "1"
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
album: "范特西1",
|
|
|
|
|
artist: "周杰伦1",
|
|
|
|
|
duration: "1h30min",
|
|
|
|
|
id: "2",
|
|
|
|
|
journal: [1, 2, 3],
|
|
|
|
|
lyric: "lllll llll lll",
|
|
|
|
|
name: "双节棍1",
|
|
|
|
|
picture: "https://luoow.wxwenku.com/999/cover_min.jpg",
|
|
|
|
|
size: "1.3m",
|
|
|
|
|
state: "1",
|
|
|
|
|
tags: [3, 5, 11],
|
|
|
|
|
updateTime: "2023-01-01",
|
|
|
|
|
url:
|
|
|
|
|
"https://luoow.wxwenku.com/999/01._Belmondo_(Große_Liebe)_Annett_Louisan.mp3",
|
|
|
|
|
userId: "1"
|
|
|
|
|
}
|
|
|
|
|
];
|
|
|
|
|
this.musicDialog.remoteResult = musicList;
|
|
|
|
|
this.musicDialog.selectLoading = false;
|
|
|
|
|
}, 1000);
|
|
|
|
|
},
|
|
|
|
|
handleMusicLibrarySelectChange(val) {
|
|
|
|
|
for (let i in this.musicDialog.tableData) {
|
|
|
|
|
if (this.musicDialog.tableData[i]["id"] === val["id"]) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.musicDialog.tableData.push(val);
|
|
|
|
|
},
|
|
|
|
|
handleMusicLibraryTableDelete(row) {
|
|
|
|
|
let newList = [];
|
|
|
|
|
for (let i in this.musicDialog.tableData) {
|
|
|
|
|
let item = this.musicDialog.tableData[i];
|
|
|
|
|
if (item["id"] === row["id"]) {
|
|
|
|
|
continue;
|
|
|
|
|
}
|
|
|
|
|
newList.push(item);
|
|
|
|
|
}
|
|
|
|
|
this.musicDialog.tableData = newList;
|
|
|
|
|
},
|
|
|
|
|
// ************************* 上传事件 *************************
|
|
|
|
|
handleRemove(file, fileList) {
|
|
|
|
|
console.log(file, fileList);
|
|
|
|
|
},
|
|
|
|
|
@ -322,6 +514,21 @@ export default {
|
|
|
|
|
beforeRemove(file, fileList) {
|
|
|
|
|
return this.$confirm(`确定移除 ${file.name}？`);
|
|
|
|
|
},
|
|
|
|
|
// ************************* 按扭事件 *************************
|
|
|
|
|
/**
|
|
|
|
|
* 曲库添加按扭点击事件
|
|
|
|
|
*/
|
|
|
|
|
handleMusicLibiraryAdd() {
|
|
|
|
|
this.musicDialog.visible = true;
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 歌曲编辑按扭点击事件
|
|
|
|
|
*/
|
|
|
|
|
handleMusicModifyClick(row) {
|
|
|
|
|
this.musicModifyDialog.data = row;
|
|
|
|
|
this.musicModifyDialog.visible = true;
|
|
|
|
|
},
|
|
|
|
|
// ************************* 弹窗事件 *************************
|
|
|
|
|
/**
|
|
|
|
|
* 弹窗关闭按扭点击事件
|
|
|
|
|
*/
|
|
|
|
|
@ -341,6 +548,23 @@ export default {
|
|
|
|
|
* 弹窗提交按扭点击事件
|
|
|
|
|
*/
|
|
|
|
|
handleLyricDialogSubmit() {
|
|
|
|
|
// musicApi
|
|
|
|
|
// .updateLyric(this.lyricDialog.songId, this.lyricDialog.data)
|
|
|
|
|
// .then(res => {
|
|
|
|
|
// if (res.code === 200) {
|
|
|
|
|
// for (let sIndex in this.data.songs) {
|
|
|
|
|
// if (this.data.songs[sIndex].id === this.lyricDialog.songId) {
|
|
|
|
|
// this.data.songs[sIndex].lyric = this.lyricDialog.data;
|
|
|
|
|
// }
|
|
|
|
|
// break;
|
|
|
|
|
// }
|
|
|
|
|
// this.lyricDialog.data = "";
|
|
|
|
|
// this.lyricDialog.songId = null;
|
|
|
|
|
// this.lyricDialog.visible = false;
|
|
|
|
|
// } else {
|
|
|
|
|
// this.$message.error(res.message);
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
for (let sIndex in this.data.songs) {
|
|
|
|
|
if (this.data.songs[sIndex].id === this.lyricDialog.songId) {
|
|
|
|
|
this.data.songs[sIndex].lyric = this.lyricDialog.data;
|
|
|
|
|
@ -366,6 +590,49 @@ export default {
|
|
|
|
|
this.lyricDialog.songId = row.id;
|
|
|
|
|
this.lyricDialog.data = row.lyric;
|
|
|
|
|
this.lyricDialog.visible = true;
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 弹窗关闭按扭点击事件
|
|
|
|
|
*/
|
|
|
|
|
handleMusicDialogBeforeClose(done) {
|
|
|
|
|
this.musicDialog.visible = false;
|
|
|
|
|
done();
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 弹窗提交按扭点击事件
|
|
|
|
|
*/
|
|
|
|
|
handleMusicDialogSubmit() {
|
|
|
|
|
this.$message.success("music submit");
|
|
|
|
|
// let newList = []
|
|
|
|
|
for (let i in this.musicDialog.tableData) {
|
|
|
|
|
let item = this.musicDialog.tableData[i];
|
|
|
|
|
let isIn = false;
|
|
|
|
|
for (let j in this.data.songs) {
|
|
|
|
|
let itemInTable = this.data.songs[j];
|
|
|
|
|
if (itemInTable.id === item.id) {
|
|
|
|
|
isIn = true;
|
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
if (!isIn) {
|
|
|
|
|
this.data.songs.push(item);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.musicDialog.visible = false;
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 弹窗取消按扭点击事件
|
|
|
|
|
*/
|
|
|
|
|
handleMusicDialogCancel() {
|
|
|
|
|
this.$message.success("music cancel");
|
|
|
|
|
this.musicDialog.visible = false;
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 弹窗关闭按扭点击事件
|
|
|
|
|
*/
|
|
|
|
|
handleMusicModifyDialogBeforeClose(done) {
|
|
|
|
|
this.musicModifyDialog.visible = false;
|
|
|
|
|
done();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
zhangjiabao
1 year ago