sookie/blog-admin-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

element-plus 版本升级适配

Browse Source
This commit is contained in:
sookie
2023-01-15 13:50:58 +08:00
parent f38acbd7a7
commit 1ff7f5dec5
12 changed files with 132 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/api/Hitokoto.vue
+8 -8
View File
@@ -2,15 +2,15 @@
<div>
<el-form inline :model="search">
<el-form-item label="内容">
<el-input size="small" v-model="search.content" />
<el-input v-model="search.content" />
</el-form-item>
<el-form-item label="类型">
<el-select size="small" v-model="search.type" multiple collapse-tags>
<el-select v-model="search.type" multiple collapse-tags>
<el-option v-for="item in typeList" :key="item.value" :value="item.value" :label="item.label" />
</el-select>
</el-form-item>
<el-form-item label="创建时间">
<el-date-picker size="small"
<el-date-picker
v-model="search.createdAt"
type="daterange"
range-separator="至"
@@ -19,15 +19,15 @@
</el-form-item>
</el-form>
<div class="btn-container">
<el-button size="small" type="primary" @click="addModal = true">添加</el-button>
<el-button size="small" type="danger" @click="deleteAll">删除</el-button>
<el-button type="primary" @click="addModal = true">添加</el-button>
<el-button type="danger" @click="deleteAll">删除</el-button>
<div class="search-btn">
<el-button type="primary" @click="loadDataBase(true)" size="small" icon="el-icon-search">搜索</el-button>
<el-button @click="reset" size="small" icon="el-icon-refresh-right">重置</el-button>
<el-button type="primary" @click="loadDataBase(true)" icon="Search">搜索</el-button>
<el-button @click="reset" icon="RefreshLeft">重置</el-button>
</div>
</div>
<div class="table-container">
<el-table :data="hitokotoData" v-loading="loading" stripe height="715" @selection-change="dataSelect">
<el-table :data="hitokotoData" v-loading="loading" stripe @selection-change="dataSelect">
<el-table-column type="selection" width="55" />
<el-table-column prop="type" label="类型" width="180">
<template #default="scope">
src/views/api/Music.vue
+47 -40
View File
@@ -2,38 +2,38 @@
<div>
<el-form inline :model="search">
<el-form-item label="名称">
<el-input size="small" v-model="search.name" />
<el-input v-model="search.name" />
</el-form-item>
<el-form-item label="所属歌单">
<el-select size="small" v-model="search.lib_id" multiple collapse-tags>
<el-select v-model="search.lib_id" multiple collapse-tags>
<el-option v-for="musicLib in musicLibs" :key="musicLib._id" :value="musicLib._id" :label="musicLib.name" />
</el-select>
</el-form-item>
<el-form-item label="文件类型">
<el-select size="small" v-model="search.ext" multiple >
<el-select v-model="search.ext" multiple >
<el-option v-for="ext in exts" :key="ext" :value="ext" :label="ext" />
</el-select>
</el-form-item>
<el-form-item label="标题">
<el-input size="small" v-model="search.title" />
<el-input v-model="search.title" />
</el-form-item>
<el-form-item label="唱片集">
<el-input size="small" v-model="search.album" />
<el-input v-model="search.album" />
</el-form-item>
<el-form-item label="艺术家">
<el-input size="small" v-model="search.artist" />
<el-input v-model="search.artist" />
</el-form-item>
</el-form>
<div class="btn-container">
<el-button type="success" plain size="small" icon="el-icon-caret-right" @click="playMusic">播放</el-button>
<el-button type="primary" size="small" icon="el-icon-upload" @click="openUploadModal">上传音乐</el-button>
<el-button type="success" plain icon="VideoPlay" @click="playMusic">播放</el-button>
<el-button type="primary" icon="Upload" @click="openUploadModal">上传音乐</el-button>
<div class="search-btn">
<el-button type="primary" @click="loadDataBase(true)" size="small" icon="el-icon-search">搜索</el-button>
<el-button @click="reset" size="small" icon="el-icon-refresh-right">重置</el-button>
<el-button type="primary" @click="loadDataBase(true)" icon="Search">搜索</el-button>
<el-button @click="reset" icon="RefreshLeft">重置</el-button>
</div>
</div>
<div class="table-container">
<el-table :data="musicData" v-loading="loading" stripe height="715" @selection-change="dataSelect">
<el-table :data="musicData" v-loading="loading" stripe @selection-change="dataSelect">
<el-table-column type="selection" width="55" />
<el-table-column prop="name" label="名称" show-overflow-tooltip role=""/>
<el-table-column prop="ext" label="类型" width="100" />
@@ -48,19 +48,15 @@
<el-table-column prop="lib_id" label="所属歌单" >
<template #default="scope">
<template v-if="scope.row.isEditing && currentRow">
<el-select v-model="currentRow.lib_id" size="mini">
<el-select v-model="currentRow.lib_id">
<el-option v-for="musicLib in musicLibs" :key="musicLib._id" :value="musicLib._id" :label="musicLib.name" />
</el-select>
<el-button type="text" @click="saveMusicLib(scope.row)">
<i class="el-icon-check"></i>
</el-button>
<el-button type="text" @click="scope.row.isEditing = false">
<i class="el-icon-close"></i>
</el-button>
<el-button link icon="Check" type="primary" @click="saveMusicLib(scope.row)"></el-button>
<el-button link icon="Close" type="primary" @click="scope.row.isEditing = false"></el-button>
</template>
<template v-else>
{{ findMusicLib(scope.row.lib_id) }}
<el-button type="text" @click="updateLib(scope.row)">
<el-button link type="primary" @click="updateLib(scope.row)">
<i class="el-icon-edit-outline"></i>
</el-button>
</template>
@@ -68,13 +64,18 @@
</el-table-column>
<el-table-column prop="lyric_id" label="歌词" width="120" >
<template #default="scope">
<i :class="scope.row.lyric_id ? 'el-icon-check' : 'el-icon-close'" ></i>
<div style="width: 18px">
<el-icon>
<Check v-if="scope.row.lyric_id" />
<Close v-else/>
</el-icon>
</div>
</template>
</el-table-column>
<el-table-column label="操作" width="230" >
<template #default="scope">
<el-button size="mini" plain @click="updateLyric(scope.row)">歌词</el-button>
<el-button type="danger" size="mini" plain @click="remove(scope.row)">删除</el-button>
<el-button link icon="Document" @click="updateLyric(scope.row)" title="歌词"></el-button>
<el-button link type="danger" icon="Delete" @click="remove(scope.row)" title="删除"></el-button>
</template>
</el-table-column>
</el-table>
@@ -111,25 +112,31 @@
<el-dialog v-model="uploadModal" title="上传音乐" :width="550" @closed="uploadModalClosed" >
<el-form :label-width="80">
<el-form-item label="歌单">
<el-radio-group v-model="libIdSelected">
<el-radio v-for="item in musicLibs" :key="item._id" :label="item._id" border size="small">{{item.name}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item >
<el-upload
ref="musicUpload"
action="/api/v2/music/upload"
name="file"
accept=".mp3,.flac"
:headers="{token: $store.state.loginInfo.token}"
:on-success="uploadSuccess"
:on-error="uploadError"
:auto-upload="false"
multiple
:data="{libId: libIdSelected}">
<el-button size="small" type="primary">选择文件</el-button>
</el-upload>
<el-select v-model="libIdSelected">
<el-option v-for="musicLib in musicLibs" :key="musicLib._id" :value="musicLib._id" :label="musicLib.name" />
</el-select>
</el-form-item>
<el-upload
ref="musicUpload"
action="/api/v2/music/upload"
name="file"
accept=".mp3,.flac"
:headers="{token: $store.state.loginInfo.token}"
:on-success="uploadSuccess"
:on-error="uploadError"
:auto-upload="false"
multiple
drag
:data="{libId: libIdSelected}">
<div class="el-upload__text">
拖拽到此处或<em>点击上传</em>
</div>
<template #tip>
<div class="el-upload__tip">
可选择 mp3/flac 文件
</div>
</template>
</el-upload>
</el-form>
<template #footer>
<span class="dialog-footer">
src/views/api/PhotoWall.vue
+13 -13
View File
@@ -1,30 +1,30 @@
<template>
<div>
<el-alert type="info" show-icon :closable="false" >
<el-alert type="info" show-icon :closable="false" style="margin-bottom: 10px" >
<template #title>上传要求</template>
图片格式为{{allowUploadExt.join('、')}}，文件大小不超过10MB。
</el-alert>
<el-form inline :model="search">
<el-form-item label="文件名">
<el-input size="small" v-model="search.name" />
<el-input v-model="search.name" />
</el-form-item>
<el-form-item label="宽度" >
<el-input size="small" v-model="search.widthMin" type="number" style="vertical-align: middle;" >
<el-input v-model="search.widthMin" type="number" style="vertical-align: middle;" >
<template #prepend>≥</template>
</el-input>
</el-form-item>
<el-form-item>
<el-input size="small" v-model="search.widthMax" type="number" style="vertical-align: middle;" >
<el-input v-model="search.widthMax" type="number" style="vertical-align: middle;" >
<template #prepend>≤</template>
</el-input>
</el-form-item>
<el-form-item label="高度" >
<el-input size="small" v-model="search.heightMin" type="number" style="vertical-align: middle;" >
<el-input v-model="search.heightMin" type="number" style="vertical-align: middle;" >
<template #prepend>≥</template>
</el-input>
</el-form-item>
<el-form-item>
<el-input size="small" v-model="search.heightMax" type="number" style="vertical-align: middle;" >
<el-input v-model="search.heightMax" type="number" style="vertical-align: middle;" >
<template #prepend>≤</template>
</el-input>
</el-form-item>
@@ -41,17 +41,17 @@
auto-upload
:show-file-list="false"
style="display: inline-block;margin-right: 10px;">
<el-button size="small" type="primary" icon="el-icon-upload" :loading="isUploading">上传图片</el-button>
<el-button type="primary" icon="Upload" :loading="isUploading">上传图片</el-button>
</el-upload>
<el-button size="small" type="danger" @click="deleteAll">删除</el-button>
<el-button type="danger" @click="deleteAll" style="vertical-align: bottom">批量删除</el-button>
<div class="search-btn">
<el-button type="primary" @click="loadDataBase(true)" size="small" icon="el-icon-search">搜索</el-button>
<el-button @click="reset" size="small" icon="el-icon-refresh-right">重置</el-button>
<el-button type="primary" @click="loadDataBase(true)" icon="Search">搜索</el-button>
<el-button @click="reset" icon="RefreshLeft">重置</el-button>
</div>
</div>
<div class="table-container">
<el-table :data="photowallData" v-loading="loading" stripe height="715" @selection-change="dataSelect">
<el-table :data="photowallData" v-loading="loading" stripe @selection-change="dataSelect">
<el-table-column type="selection" width="55" />
<el-table-column prop="name" label="文件名" />
<el-table-column prop="md5" label="md5" width="300" />
@@ -60,7 +60,7 @@
<el-table-column prop="height" label="高度" width="70" />
<el-table-column label="操作" width="100" >
<template #default="scope">
<el-button size="mini" plain @click="preview(scope.row)">预览</el-button>
<el-button link icon="View" plain @click="preview(scope.row)" title="预览"></el-button>
</template>
</el-table-column>
</el-table>
@@ -146,7 +146,7 @@ export default class PhotoWall extends BaseList<PhotoWallPage> {
message: h('img', { style: `width:500px;height:${previewHeight}px;`, src: `${pictureCdn}/${row.name}` }, ''),
showCancelButton: false,
confirmButtonText: '关闭',
customStyle: {width: '530px'}
customStyle: {width: '600px'}
}).catch(() => {})
}
created() {
src/views/api/SourceImage.vue
+5 -5
View File
@@ -16,12 +16,12 @@
auto-upload
:show-file-list="false"
style="display: inline-block;margin-right: 10px;">
<el-button size="small" type="primary" icon="el-icon-upload" :loading="isUploading">上传图片</el-button>
<el-button type="primary" icon="Upload" :loading="isUploading">上传图片</el-button>
</el-upload>
<el-button size="small" type="danger" @click="deleteAll">删除</el-button>
<el-button type="danger" @click="deleteAll" style="vertical-align: bottom">批量删除</el-button>
</div>
<div class="table-container">
<el-table :data="sourceImageData" v-loading="loading" stripe height="715" @selection-change="dataSelect">
<el-table :data="sourceImageData" v-loading="loading" stripe @selection-change="dataSelect">
<el-table-column type="selection" width="55" />
<el-table-column prop="hash" label="md5" width="300" />
<el-table-column prop="size" label="文件大小" >
@@ -42,8 +42,8 @@
</el-table-column>
<el-table-column label="操作" >
<template #default="scope">
<el-button size="mini" type="primary" plain @click="modifyTags(scope.row)">修改标签</el-button>
<el-button size="mini" plain @click="preview(scope.row)">预览</el-button>
<el-button link icon="EditPen" type="primary" plain @click="modifyTags(scope.row)" title="修改标签"></el-button>
<el-button link icon="View" plain @click="preview(scope.row)" title="预览"></el-button>
</template>
</el-table-column>
</el-table>