zhangjiabao
1 year ago
parent
1a9f311b5c
commit
aa6b705810
|
After Width: | Height: | Size: 603 B |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.6 KiB |
@ -1,28 +1,45 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: zhangjiabao
|
||||||
|
* @Date: 2024-01-02 15:41:16
|
||||||
|
* @LastEditors: zhangjiabao
|
||||||
|
* @LastEditTime: 2024-01-25 17:49:21
|
||||||
|
* @FilePath: /luoo_manage_fe/src/views/layout/components/Sidebar/index.vue
|
||||||
|
-->
|
||||||
<template>
|
<template>
|
||||||
<scroll-bar>
|
<scroll-bar>
|
||||||
<el-menu mode="vertical" unique-opened :default-active="$route.path" :collapse="isCollapse" background-color="#304156" text-color="#fff" active-text-color="#409EFF">
|
<span
|
||||||
|
style="font-size: 20px;color: white; text-align: center; display: inline-block; width: 100%; margin-top: 10px;"
|
||||||
|
>QueYue</span
|
||||||
|
>
|
||||||
|
<el-menu
|
||||||
|
mode="vertical"
|
||||||
|
unique-opened
|
||||||
|
:default-active="$route.path"
|
||||||
|
:collapse="isCollapse"
|
||||||
|
background-color="#304156"
|
||||||
|
text-color="#fff"
|
||||||
|
active-text-color="#409EFF"
|
||||||
|
>
|
||||||
<sidebar-item :routes="routes"></sidebar-item>
|
<sidebar-item :routes="routes"></sidebar-item>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
</scroll-bar>
|
</scroll-bar>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { mapGetters } from 'vuex'
|
import { mapGetters } from "vuex";
|
||||||
import SidebarItem from './SidebarItem'
|
import SidebarItem from "./SidebarItem";
|
||||||
import ScrollBar from '@/components/ScrollBar'
|
import ScrollBar from "@/components/ScrollBar";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { SidebarItem, ScrollBar },
|
components: { SidebarItem, ScrollBar },
|
||||||
computed: {
|
computed: {
|
||||||
...mapGetters([
|
...mapGetters(["sidebar"]),
|
||||||
'sidebar'
|
|
||||||
]),
|
|
||||||
routes() {
|
routes() {
|
||||||
return this.$router.options.routes
|
return this.$router.options.routes;
|
||||||
},
|
},
|
||||||
isCollapse() {
|
isCollapse() {
|
||||||
return !this.sidebar.opened
|
return !this.sidebar.opened;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -0,0 +1,640 @@
|
|||||||
|
<!--
|
||||||
|
* @Description: 曲库
|
||||||
|
* @version: v1
|
||||||
|
* @Author: zhangjiabao
|
||||||
|
* @Date: 2024-01-14 00:12:59
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<!-- card -->
|
||||||
|
<el-card class="box-card">
|
||||||
|
<div slot="header" class="card-header clearfix">
|
||||||
|
<span class="card-header-text">曲库管理</span>
|
||||||
|
</div>
|
||||||
|
<!-- 查询条件 -->
|
||||||
|
<el-form :inline="true" class="in-card-form">
|
||||||
|
<el-form-item>
|
||||||
|
<el-input
|
||||||
|
placeholder="请输入关键词"
|
||||||
|
size="medium"
|
||||||
|
v-model="queryForm.data.keyword"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-select
|
||||||
|
placeholder="选择发布人"
|
||||||
|
size="medium"
|
||||||
|
v-model="queryForm.data.creatorId"
|
||||||
|
>
|
||||||
|
<el-option
|
||||||
|
v-for="item in queryForm.remoteData.publisher"
|
||||||
|
:label="item.name"
|
||||||
|
:value="item.id"
|
||||||
|
:key="item.id"
|
||||||
|
></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-date-picker
|
||||||
|
placeholder="选择时间范围"
|
||||||
|
v-model="queryForm.data.timeRange"
|
||||||
|
type="daterange"
|
||||||
|
:range-separator="
|
||||||
|
queryForm.data.timeRange.length === 0 ? null : '~'
|
||||||
|
"
|
||||||
|
:editable="false"
|
||||||
|
:clearable="false"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
start-placeholder="选择时间范围"
|
||||||
|
size="medium"
|
||||||
|
style="width: 280px;"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-search"
|
||||||
|
type="primary"
|
||||||
|
size="medium"
|
||||||
|
@click="handleQueryClick"
|
||||||
|
>查询</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
icon="el-icon-refresh-left"
|
||||||
|
size="medium"
|
||||||
|
@click="handleResetClick"
|
||||||
|
>重置</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-form :inline="true" class="in-card-form">
|
||||||
|
<el-form-item>
|
||||||
|
<el-button icon="el-icon-upload" type="primary" size="small"
|
||||||
|
>上传</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button icon="el-icon-upload2" size="small">批量上传</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button icon="el-icon-download" size="small">下载</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button icon="el-icon-delete" size="small">删除</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<!-- 表格 -->
|
||||||
|
<el-table
|
||||||
|
stripe
|
||||||
|
:data="table.data"
|
||||||
|
ref="songTable"
|
||||||
|
height="calc(100vh - 375px)"
|
||||||
|
v-loading="table.loading"
|
||||||
|
v-if="table.show"
|
||||||
|
element-loading-text="加载中"
|
||||||
|
@selection-change="handleTableSelectionChange"
|
||||||
|
:header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
|
||||||
|
border
|
||||||
|
fit
|
||||||
|
>
|
||||||
|
<el-table-column type="selection" width="55"> </el-table-column>
|
||||||
|
<el-table-column sortable label="歌曲名">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{ scope.row.name }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button style="padding: 0px;" type="text" icon="el-icon-download"
|
||||||
|
>下载</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="artist" label="歌手/乐队"></el-table-column>
|
||||||
|
<el-table-column prop="album" label="所属专辑"></el-table-column>
|
||||||
|
<el-table-column label="歌曲风格">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{ getTagNameById(scope.row.tags) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="picture" label="专辑封面" width="100px">
|
||||||
|
<template slot-scope="slot">
|
||||||
|
<img
|
||||||
|
style="width: 50;height: 50px;"
|
||||||
|
v-if="slot.row.picture"
|
||||||
|
:src="slot.row.picture"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="duration" label="时长"></el-table-column>
|
||||||
|
<el-table-column label="关联期刊">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-for="j in scope.row.journal" :key="j + ''">{{ j }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
prop="updateTime"
|
||||||
|
sortable
|
||||||
|
label="修改时间"
|
||||||
|
></el-table-column>
|
||||||
|
<el-table-column fixed="right" label="启停用" width="100">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-switch
|
||||||
|
style="margin-bottom: 4px;"
|
||||||
|
v-model="scope.row.state"
|
||||||
|
active-color="#13ce66"
|
||||||
|
@change="handleTableRowStatusChange($event, scope.row)"
|
||||||
|
:active-value="1"
|
||||||
|
:inactive-value="0"
|
||||||
|
size="mini"
|
||||||
|
></el-switch>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="上传人员">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span>{{ getAuthorNameById(scope.row.userId) }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column fixed="right" label="操作" width="300">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
plain
|
||||||
|
icon="el-icon-edit"
|
||||||
|
@click="handleModifyClick(scope.row)"
|
||||||
|
type="primary"
|
||||||
|
size="mini"
|
||||||
|
>编辑</el-button
|
||||||
|
>
|
||||||
|
<el-button plain icon="el-icon-success" type="success" size="mini"
|
||||||
|
>歌词</el-button
|
||||||
|
>
|
||||||
|
<el-popconfirm
|
||||||
|
confirm-button-text="确定"
|
||||||
|
cancel-button-text="取消"
|
||||||
|
icon="el-icon-info"
|
||||||
|
icon-color="red"
|
||||||
|
title="是否确认删除歌曲？"
|
||||||
|
style="margin-left: 10px;"
|
||||||
|
@confirm="handleDeleteClick(scope.row)"
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
slot="reference"
|
||||||
|
plain
|
||||||
|
icon="el-icon-delete"
|
||||||
|
type="danger"
|
||||||
|
size="mini"
|
||||||
|
>删除</el-button
|
||||||
|
>
|
||||||
|
</el-popconfirm>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<el-row :inline="true">
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="foot-operator-right">
|
||||||
|
<el-button size="small" @click="handleTableSelectionAllClick"
|
||||||
|
>选择全部</el-button
|
||||||
|
>
|
||||||
|
<el-button size="small" @click="handleTableSelectionInverseClick"
|
||||||
|
>反向选择</el-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12" style="text-align: right;">
|
||||||
|
<div class="foot-operator-right">
|
||||||
|
<el-pagination
|
||||||
|
class="pagination-right"
|
||||||
|
background
|
||||||
|
v-if="table.show"
|
||||||
|
layout="total, prev, pager, next, sizes"
|
||||||
|
:current-page.sync="table.page.current"
|
||||||
|
:page-size="table.page.size"
|
||||||
|
:total="table.page.total"
|
||||||
|
@size-change="handlePageSizeChange"
|
||||||
|
@current-change="handlePageCurrentChange"
|
||||||
|
>
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-card>
|
||||||
|
<el-dialog
|
||||||
|
title="信息编辑"
|
||||||
|
:visible="true"
|
||||||
|
v-if="musicModifyDialog.visible"
|
||||||
|
width="40%"
|
||||||
|
top="60px"
|
||||||
|
append-to-body
|
||||||
|
:before-close="handleMusicModifyDialogBeforeClose"
|
||||||
|
><MusicModify
|
||||||
|
:remoteTagList="queryForm.remoteData.tags"
|
||||||
|
: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 tagApi from "@/api/tag";
|
||||||
|
import musicApi from "@/api/musicV2";
|
||||||
|
import MusicModify from "./musicModify.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Song",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 查询表单
|
||||||
|
queryForm: {
|
||||||
|
remoteData: {
|
||||||
|
publisher: [],
|
||||||
|
tags: []
|
||||||
|
},
|
||||||
|
lastQuery: {},
|
||||||
|
data: {
|
||||||
|
keyword: null,
|
||||||
|
creatorId: null,
|
||||||
|
timeRange: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
musicModifyDialog: {
|
||||||
|
visible: false,
|
||||||
|
data: {}
|
||||||
|
},
|
||||||
|
// 表格
|
||||||
|
table: {
|
||||||
|
show: true,
|
||||||
|
loading: true,
|
||||||
|
selection: [],
|
||||||
|
data: [],
|
||||||
|
page: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
filters: {},
|
||||||
|
components: {
|
||||||
|
MusicModify
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.fetchCreaterList();
|
||||||
|
this.fetchTags();
|
||||||
|
this.fetchData(this.queryForm.data);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
log(e) {
|
||||||
|
this.$message.success(e);
|
||||||
|
},
|
||||||
|
// ************************* 数据查询 *************************
|
||||||
|
/**
|
||||||
|
* 查询表格数据
|
||||||
|
*/
|
||||||
|
fetchData(param) {
|
||||||
|
// 记录上一次查询条件
|
||||||
|
this.queryForm.lastQuery = param;
|
||||||
|
|
||||||
|
let queryParam = {
|
||||||
|
keyword: param.keyword,
|
||||||
|
userId: param.creatorId
|
||||||
|
};
|
||||||
|
if (param.timeRange) {
|
||||||
|
if (param.timeRange[0]) {
|
||||||
|
queryParam.start = param.timeRange[0] + " 00:00:00";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (param.timeRange[1]) {
|
||||||
|
queryParam.end = param.timeRange[1] + " 23:59:59";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.table.loading = 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: "1627863701048659968"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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: "1627863701048659968"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
this.table.data = musicList;
|
||||||
|
this.table.page.total = 10;
|
||||||
|
this.table.loading = false;
|
||||||
|
}, 1000);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 创建人下拉框
|
||||||
|
*/
|
||||||
|
fetchCreaterList() {
|
||||||
|
tagApi.createrList().then(res => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.queryForm.remoteData.publisher = res.data;
|
||||||
|
} else {
|
||||||
|
this.queryForm.remoteData.publisher = [];
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 高级筛选tag
|
||||||
|
*/
|
||||||
|
fetchTags() {
|
||||||
|
// tagApi.queryHierarchical().then(res => {
|
||||||
|
// console.log(res)
|
||||||
|
// })
|
||||||
|
let res = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
nameCh: "语言类型",
|
||||||
|
children: [
|
||||||
|
{ id: 3, nameCh: "中文" },
|
||||||
|
{ id: 4, nameCh: "日文" },
|
||||||
|
{ id: 5, nameCh: "英文" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 10,
|
||||||
|
nameCh: "期刊标签",
|
||||||
|
children: [
|
||||||
|
{ id: 11, nameCh: "民谣" },
|
||||||
|
{ id: 12, nameCh: "摇滚" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
|
let newList = [];
|
||||||
|
for (let index in res) {
|
||||||
|
let item = res[index];
|
||||||
|
let newItem = { value: item.id, label: item.nameCh, children: [] };
|
||||||
|
for (let childrenIndex in item.children) {
|
||||||
|
let childrenItem = item.children[childrenIndex];
|
||||||
|
newItem.children.push({
|
||||||
|
value: childrenItem.id,
|
||||||
|
label: childrenItem.nameCh
|
||||||
|
});
|
||||||
|
}
|
||||||
|
newList.push(newItem);
|
||||||
|
}
|
||||||
|
this.queryForm.remoteData.tags = newList;
|
||||||
|
},
|
||||||
|
// ************************* 数据处理 *************************
|
||||||
|
getAuthorNameById(userId) {
|
||||||
|
for (let index in this.queryForm.remoteData.publisher) {
|
||||||
|
let item = this.queryForm.remoteData.publisher[index];
|
||||||
|
if (item.id === userId) {
|
||||||
|
return item.name;
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getTagNameById(tagIdList) {
|
||||||
|
let tagList = [];
|
||||||
|
for (let tagIdIndex in tagIdList) {
|
||||||
|
let tagId = tagIdList[tagIdIndex];
|
||||||
|
for (let index in this.queryForm.remoteData.tags) {
|
||||||
|
let item = this.queryForm.remoteData.tags[index];
|
||||||
|
if (item.value === tagId) {
|
||||||
|
tagList.push(item.label);
|
||||||
|
}
|
||||||
|
if (!item.children) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
for (let subIndex in item.children) {
|
||||||
|
let subItem = item.children[subIndex];
|
||||||
|
if (subItem.value === tagId) {
|
||||||
|
tagList.push(subItem.label);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let name = "";
|
||||||
|
for (let index in tagList) {
|
||||||
|
name = name + "#" + tagList[index] + " ";
|
||||||
|
}
|
||||||
|
return name;
|
||||||
|
},
|
||||||
|
// ************************* 按扭事件 *************************
|
||||||
|
/**
|
||||||
|
* 查询按扭点击事件
|
||||||
|
*/
|
||||||
|
handleQueryClick() {
|
||||||
|
this.table.page.current = 1;
|
||||||
|
this.table.page.total = 0;
|
||||||
|
this.fetchData(this.queryForm.data);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 重置点击事件
|
||||||
|
*/
|
||||||
|
handleResetClick() {
|
||||||
|
this.queryForm.data = {
|
||||||
|
keyword: null,
|
||||||
|
creatorId: null,
|
||||||
|
timeRange: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 编辑标签点击事件
|
||||||
|
*/
|
||||||
|
handleModifyClick(row) {
|
||||||
|
this.musicModifyDialog.data = row;
|
||||||
|
this.musicModifyDialog.visible = true;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 删除按钮点击事件
|
||||||
|
*/
|
||||||
|
handleDeleteClick(row) {
|
||||||
|
musicApi.delete(row.id).then(res => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.$message.success(res.message);
|
||||||
|
this.fetchData(this.queryForm.lastQuery);
|
||||||
|
return;
|
||||||
|
} else {
|
||||||
|
this.$message.error(res.message);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 表格内状态滑块切换事件
|
||||||
|
*/
|
||||||
|
handleTableRowStatusChange($event, row) {
|
||||||
|
this.$message("状态切换" + $event);
|
||||||
|
musicApi.updateStatus(row.id, $event).then(res => {
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.$message.success(res.message);
|
||||||
|
} else {
|
||||||
|
this.$message.error(res.message);
|
||||||
|
}
|
||||||
|
this.fetchData(this.queryForm.lastQuery);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 表格多选框
|
||||||
|
*/
|
||||||
|
handleTableSelectionChange(val) {
|
||||||
|
this.table.selection = val;
|
||||||
|
console.log(val);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 表格全选
|
||||||
|
*/
|
||||||
|
handleTableSelectionAllClick() {
|
||||||
|
this.handleTableSelectRows(this.table.data);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 表格反选
|
||||||
|
*/
|
||||||
|
handleTableSelectionInverseClick() {
|
||||||
|
let newSelection = [];
|
||||||
|
for (let rowIndex in this.table.data) {
|
||||||
|
let isIn = false;
|
||||||
|
for (let seletIndex in this.table.selection) {
|
||||||
|
if (
|
||||||
|
this.table.selection[seletIndex]["id"] ===
|
||||||
|
this.table.data[rowIndex]["id"]
|
||||||
|
) {
|
||||||
|
isIn = true;
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!isIn) {
|
||||||
|
newSelection.push(this.table.data[rowIndex]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.$refs.songTable.clearSelection();
|
||||||
|
this.handleTableSelectRows(newSelection);
|
||||||
|
},
|
||||||
|
handleTableSelectRows(rows) {
|
||||||
|
this.$refs.songTable.clearSelection();
|
||||||
|
for (let rowIndex in rows) {
|
||||||
|
this.$refs.songTable.toggleRowSelection(rows[rowIndex]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 分页组件页数变化事件
|
||||||
|
*/
|
||||||
|
handlePageCurrentChange(val) {
|
||||||
|
this.table.page.current = val;
|
||||||
|
this.fetchData(this.queryForm.lastQuery);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 分页组件大小变化事件
|
||||||
|
*/
|
||||||
|
handlePageSizeChange(val) {
|
||||||
|
this.table.page.size = val;
|
||||||
|
this.fetchData(this.queryForm.lastQuery);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 弹窗关闭按扭点击事件
|
||||||
|
*/
|
||||||
|
handleMusicModifyDialogBeforeClose(done) {
|
||||||
|
this.musicModifyDialog.visible = false;
|
||||||
|
done();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.pagination-right {
|
||||||
|
text-align: right;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.foot-operator-right {
|
||||||
|
text-align: left;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.box-card {
|
||||||
|
min-height: 300px;
|
||||||
|
height: calc(100vh - 140px);
|
||||||
|
border-radius: 10px;
|
||||||
|
.el-card__header {
|
||||||
|
background-color: rgba(249, 249, 249, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/deep/ .el-dialog {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.popup-dialog {
|
||||||
|
.el-dialog__header {
|
||||||
|
border-top-left-radius: 5px;
|
||||||
|
border-top-right-radius: 5px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #f5f5f5f5;
|
||||||
|
}
|
||||||
|
.el-dialog__title {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
.el-dialog__footer {
|
||||||
|
border-top: solid;
|
||||||
|
border-top-width: thin;
|
||||||
|
border-top-color: rgb(233, 233, 233);
|
||||||
|
padding: 10px 20px 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.in-card-form {
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.clearfix:before,
|
||||||
|
.clearfix:after {
|
||||||
|
display: table;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
.clearfix:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.card-header {
|
||||||
|
height: 23px;
|
||||||
|
}
|
||||||
|
.app-container {
|
||||||
|
font-family: "Microsoft YaHei Bold", "Microsoft YaHei Regular",
|
||||||
|
"Microsoft YaHei", sans-serif;
|
||||||
|
}
|
||||||
|
.card-header-text {
|
||||||
|
font-family: "Microsoft YaHei Bold", "Microsoft YaHei Regular",
|
||||||
|
"Microsoft YaHei", sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 20px;
|
||||||
|
letter-spacing: normal;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue