|
|
|
|
@ -0,0 +1,339 @@
|
|
|
|
|
<!--
|
|
|
|
|
* @Description:
|
|
|
|
|
* @version: v1
|
|
|
|
|
* @Author: zhangjiabao
|
|
|
|
|
* @Date: 2024-01-20 02:11:55
|
|
|
|
|
-->
|
|
|
|
|
<template>
|
|
|
|
|
<div>
|
|
|
|
|
<el-form
|
|
|
|
|
style="width: 800px;margin: 0 auto;"
|
|
|
|
|
label-position="left"
|
|
|
|
|
label-suffix=":"
|
|
|
|
|
label-width="100px"
|
|
|
|
|
>
|
|
|
|
|
<el-form-item prop="volid" label="期刊编号">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="data.number"
|
|
|
|
|
size="small"
|
|
|
|
|
placeholder="期刊编号"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item prop="title" label="期刊标题">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="data.name"
|
|
|
|
|
size="small"
|
|
|
|
|
placeholder="请输入期刊标题"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item prop="tag" label="期刊标签">
|
|
|
|
|
<el-cascader
|
|
|
|
|
placeholder="请选择"
|
|
|
|
|
:options="remoteTagList"
|
|
|
|
|
:props="{ multiple: true }"
|
|
|
|
|
v-model="selectTag"
|
|
|
|
|
@change="handleTagSelectChange"
|
|
|
|
|
filterable
|
|
|
|
|
></el-cascader>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item prop="author" label="期刊作者">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="data.userId"
|
|
|
|
|
size="small"
|
|
|
|
|
placeholder="不填写则默认为发布者"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item prop="image" label="上传封面">
|
|
|
|
|
<el-upload
|
|
|
|
|
action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
|
|
:on-preview="handlePreview"
|
|
|
|
|
:on-remove="handleRemove"
|
|
|
|
|
:before-remove="beforeRemove"
|
|
|
|
|
multiple
|
|
|
|
|
:limit="1"
|
|
|
|
|
:on-exceed="handleExceed"
|
|
|
|
|
:file-list="coverUploadFileList"
|
|
|
|
|
>
|
|
|
|
|
<el-button size="small" type="primary" icon="el-icon-receiving"
|
|
|
|
|
>上传图片</el-button
|
|
|
|
|
>
|
|
|
|
|
<div
|
|
|
|
|
slot="tip"
|
|
|
|
|
style="font-family: '微软雅黑', sans-serif; font-weight: 400; font-style: normal; color: #999999;"
|
|
|
|
|
>
|
|
|
|
|
支持格式：.jpg, .png 单个文件不能超过5MB 建议图片分辨率640*520
|
|
|
|
|
</div>
|
|
|
|
|
</el-upload>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="期刊音乐">
|
|
|
|
|
<el-row>
|
|
|
|
|
<el-col :span="6"
|
|
|
|
|
><el-button plain size="middle" type="primary" icon="el-icon-plus"
|
|
|
|
|
>上传歌曲</el-button
|
|
|
|
|
></el-col
|
|
|
|
|
>
|
|
|
|
|
<el-col :span="6"
|
|
|
|
|
><el-button
|
|
|
|
|
plain
|
|
|
|
|
size="middle"
|
|
|
|
|
type="primary"
|
|
|
|
|
icon="el-icon-zoom-in"
|
|
|
|
|
>曲库添加</el-button
|
|
|
|
|
></el-col
|
|
|
|
|
>
|
|
|
|
|
</el-row>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<el-table
|
|
|
|
|
size="mini"
|
|
|
|
|
:data="data.songs"
|
|
|
|
|
style="width: calc(50% + 400px); margin: 0 0 auto auto;"
|
|
|
|
|
stripe
|
|
|
|
|
class="draggable-table"
|
|
|
|
|
row-key="name"
|
|
|
|
|
border
|
|
|
|
|
fit
|
|
|
|
|
element-loading-text="加载中"
|
|
|
|
|
:header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
|
|
|
|
|
>
|
|
|
|
|
<el-table-column label="排序" align="center" width="60">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<i class="el-icon-rank"></i>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
<el-table-column prop="picture" label="专辑封面"></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="操作" fixed="right" width="300">
|
|
|
|
|
<template slot-scope="scope">
|
|
|
|
|
<el-button plain icon="el-icon-edit" type="primary" size="mini"
|
|
|
|
|
>编辑</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button
|
|
|
|
|
plain
|
|
|
|
|
icon="el-icon-success"
|
|
|
|
|
type="success"
|
|
|
|
|
size="mini"
|
|
|
|
|
@click="handleLyricClick(scope.row)"
|
|
|
|
|
>歌词</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-popconfirm
|
|
|
|
|
confirm-button-text="确定"
|
|
|
|
|
cancel-button-text="取消"
|
|
|
|
|
icon="el-icon-info"
|
|
|
|
|
icon-color="red"
|
|
|
|
|
title="是否确认删除标签？"
|
|
|
|
|
style="margin-left: 10px;"
|
|
|
|
|
@confirm="console.log('delete')"
|
|
|
|
|
>
|
|
|
|
|
<el-button
|
|
|
|
|
slot="reference"
|
|
|
|
|
plain
|
|
|
|
|
icon="el-icon-delete"
|
|
|
|
|
type="danger"
|
|
|
|
|
size="mini"
|
|
|
|
|
>删除</el-button
|
|
|
|
|
>
|
|
|
|
|
</el-popconfirm>
|
|
|
|
|
</template>
|
|
|
|
|
</el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<el-form
|
|
|
|
|
label-suffix=":"
|
|
|
|
|
style="width: calc(50% + 400px); margin: 15px 0 auto auto;"
|
|
|
|
|
label-position="left"
|
|
|
|
|
label-width="100px"
|
|
|
|
|
>
|
|
|
|
|
<el-form-item prop="volid" label="期刊文案">
|
|
|
|
|
<quill-editor
|
|
|
|
|
ref="text"
|
|
|
|
|
v-model="data.summary"
|
|
|
|
|
style="height: 500px;"
|
|
|
|
|
class="myQuillEditor"
|
|
|
|
|
:options="editorOption"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<el-dialog
|
|
|
|
|
title="歌词"
|
|
|
|
|
:visible="true"
|
|
|
|
|
v-if="lyricDialog.visible"
|
|
|
|
|
width="40%"
|
|
|
|
|
top="60px"
|
|
|
|
|
append-to-body
|
|
|
|
|
:before-close="handleLyricDialogBeforeClose"
|
|
|
|
|
>
|
|
|
|
|
<el-input type="textarea" v-model="lyricDialog.data"></el-input>
|
|
|
|
|
<span slot="footer">
|
|
|
|
|
<el-button size="small" type="primary" @click="handleLyricDialogSubmit"
|
|
|
|
|
>保存</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button size="small" @click="handleLyricDialogCancel"
|
|
|
|
|
>取消</el-button
|
|
|
|
|
>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import Sortable from "sortablejs";
|
|
|
|
|
import { quillEditor } from "vue-quill-editor";
|
|
|
|
|
import "quill/dist/quill.core.css";
|
|
|
|
|
import "quill/dist/quill.snow.css";
|
|
|
|
|
import "quill/dist/quill.bubble.css";
|
|
|
|
|
export default {
|
|
|
|
|
name: "ArticleModify",
|
|
|
|
|
props: {
|
|
|
|
|
data: {
|
|
|
|
|
type: Object,
|
|
|
|
|
default: {
|
|
|
|
|
id: null,
|
|
|
|
|
name: null,
|
|
|
|
|
tag: [],
|
|
|
|
|
number: null,
|
|
|
|
|
userId: null,
|
|
|
|
|
coverPhoto: null,
|
|
|
|
|
songs: []
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
remoteTagList: {
|
|
|
|
|
type: Array,
|
|
|
|
|
default: []
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
selectTag: [],
|
|
|
|
|
lyricDialog: {
|
|
|
|
|
visible: false,
|
|
|
|
|
songId: null,
|
|
|
|
|
data: ""
|
|
|
|
|
},
|
|
|
|
|
coverUploadFileList: [],
|
|
|
|
|
// editorOption里是放图片上传配置参数用的，例如：
|
|
|
|
|
// action: '/api/product/richtext_img_upload.do', // 必填参数 图片上传地址
|
|
|
|
|
// methods: 'post', // 必填参数 图片上传方式
|
|
|
|
|
// token: '', // 可选参数 如果需要token验证，假设你的token有存放在sessionStorage
|
|
|
|
|
// name: 'upload_file', // 必填参数 文件的参数名
|
|
|
|
|
// size: 500, // 可选参数 图片大小，单位为Kb, 1M = 1024Kb
|
|
|
|
|
// accept: 'multipart/form-data, image/png, image/gif, image/jpeg, image/bmp, image/x-icon,image/jpg' // 可选 可上传的图片格式
|
|
|
|
|
editorOption: {},
|
|
|
|
|
rules: {}
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
filters: {},
|
|
|
|
|
created() {
|
|
|
|
|
this.syncTagDataToComponent();
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
quillEditor
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
// 需要支持拖动效果的列表容器，在这里我们设置为el-table组件的tbody，
|
|
|
|
|
// 注意：最前面的一段为前面el-table的class: draggable-table，主要为了防止如果页面有多个table，多个table同时实现拖拽效果
|
|
|
|
|
// 当然，如果多个table都需要拖拽效果，选择器中最前面的.draggable-table可以去除。
|
|
|
|
|
const tbody = document.querySelector(
|
|
|
|
|
".draggable-table .el-table__body-wrapper tbody"
|
|
|
|
|
);
|
|
|
|
|
new Sortable(tbody, {
|
|
|
|
|
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);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
syncTagDataToComponent() {
|
|
|
|
|
// selectTag
|
|
|
|
|
for (let i in this.data.tag) {
|
|
|
|
|
let tag = this.data.tag[i];
|
|
|
|
|
|
|
|
|
|
for (let j in this.remoteTagList) {
|
|
|
|
|
let jId = this.remoteTagList[j].value;
|
|
|
|
|
for (let k in this.remoteTagList[j].children) {
|
|
|
|
|
let kId = this.remoteTagList[j].children[k].value;
|
|
|
|
|
if (tag === this.remoteTagList[j].children[k].value) {
|
|
|
|
|
this.selectTag.push([jId, kId]);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
handleTagSelectChange(val) {
|
|
|
|
|
let newTag = [];
|
|
|
|
|
for (let i in val) {
|
|
|
|
|
newTag.push(val[i][1]);
|
|
|
|
|
}
|
|
|
|
|
this.data.tag = newTag;
|
|
|
|
|
},
|
|
|
|
|
handleRemove(file, fileList) {
|
|
|
|
|
console.log(file, fileList);
|
|
|
|
|
},
|
|
|
|
|
handlePreview(file) {
|
|
|
|
|
console.log(file);
|
|
|
|
|
},
|
|
|
|
|
handleExceed(files, fileList) {
|
|
|
|
|
this.$message.warning(
|
|
|
|
|
`当前限制选择 1 个文件，本次选择了 ${
|
|
|
|
|
files.length
|
|
|
|
|
} 个文件，共选择了 ${files.length + fileList.length} 个文件`
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
beforeRemove(file, fileList) {
|
|
|
|
|
return this.$confirm(`确定移除 ${file.name}？`);
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 弹窗关闭按扭点击事件
|
|
|
|
|
*/
|
|
|
|
|
handleLyricDialogBeforeClose(done) {
|
|
|
|
|
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;
|
|
|
|
|
done();
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 弹窗提交按扭点击事件
|
|
|
|
|
*/
|
|
|
|
|
handleLyricDialogSubmit() {
|
|
|
|
|
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;
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 弹窗取消按扭点击事件
|
|
|
|
|
*/
|
|
|
|
|
handleLyricDialogCancel() {
|
|
|
|
|
this.lyricDialog.data = "";
|
|
|
|
|
this.lyricDialog.songId = null;
|
|
|
|
|
this.lyricDialog.visible = false;
|
|
|
|
|
},
|
|
|
|
|
/**
|
|
|
|
|
* 打开弹窗按扭点击事件
|
|
|
|
|
*/
|
|
|
|
|
handleLyricClick(row) {
|
|
|
|
|
this.lyricDialog.songId = row.id;
|
|
|
|
|
this.lyricDialog.data = row.lyric;
|
|
|
|
|
this.lyricDialog.visible = true;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
