You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
563 lines
15 KiB
563 lines
15 KiB
<template>
|
|
<div>
|
|
<div class="material_content">
|
|
<div class="material_item cont_upload">
|
|
<el-button class="cont_upload_btn" round type="primary">上传</el-button>
|
|
<el-button class="mkdir_btn" round type="primary" @click="handleMkdir">创建文件夹</el-button>
|
|
</div>
|
|
<div class="material_item folder">
|
|
<div class="icon_bg">
|
|
<svg class="font-icon icon" aria-hidden="true">
|
|
<use xlink:href="#icon-wenjianjia" />
|
|
</svg>
|
|
<img src />
|
|
</div>
|
|
<p class="file_name">文件夹</p>
|
|
</div>
|
|
<div
|
|
v-for="(item, index) in listData"
|
|
:key="index"
|
|
:class="['material_item', 'item_cont', { 'item_multi': contentIds.includes(item.id) }]"
|
|
>
|
|
<img v-if="item.coverImg" :src="item.coverImg" alt />
|
|
<div v-if="item.type == 'audio'" class="radio_img"></div>
|
|
<div class="item_format">
|
|
<span class="item_type">{{ item.type }}</span>
|
|
<span v-if="item.type !== 'JPG'" class="item_time">03:00</span>
|
|
</div>
|
|
<div class="file_name">{{ item.name }}</div>
|
|
<span v-if="isMultiSelected" class="checked_btn" @click="selectedItem(item.id, item.type)"></span>
|
|
</div>
|
|
</div>
|
|
<!-- 创建文件夹layer / 编辑 -->
|
|
<div class="publish_layer">
|
|
<el-dialog
|
|
:title="layerTitle"
|
|
:close-on-click-modal="false"
|
|
:visible.sync="mkdirVisible"
|
|
width="616px"
|
|
height="384px"
|
|
>
|
|
<el-form ref="form" :inline="true" :model="form" size="small" label-width="100px">
|
|
<el-form-item
|
|
:label="labelTxt"
|
|
prop="name"
|
|
:rules="[
|
|
{ required: true, message: '请输入名称', trigger: 'blur' }
|
|
]"
|
|
>
|
|
<el-input v-model="form.name" style="width: 336px" />
|
|
</el-form-item>
|
|
<el-form-item v-if="formType !== 'JPG'" label="封面" prop="file">
|
|
<el-upload action="#" list-type="picture-card" :auto-upload="false">
|
|
<!-- <i slot="default" class="el-icon-plus"></i> -->
|
|
<img src="@/assets/images/t-sc.png" alt />
|
|
<div slot="file" slot-scope="{file}">
|
|
<img class="el-upload-list__item-thumbnail" :src="file.url" alt />
|
|
<!-- <span class="el-upload-list__item-actions">
|
|
<span
|
|
class="el-upload-list__item-preview"
|
|
@click="handlePictureCardPreview(file)"
|
|
>
|
|
<i class="el-icon-zoom-in"></i>
|
|
</span>
|
|
<span
|
|
v-if="!disabled"
|
|
class="el-upload-list__item-delete"
|
|
@click="handleDownload(file)"
|
|
>
|
|
<i class="el-icon-download"></i>
|
|
</span>
|
|
<span
|
|
v-if="!disabled"
|
|
class="el-upload-list__item-delete"
|
|
@click="handleRemove(file)"
|
|
>
|
|
<i class="el-icon-delete"></i>
|
|
</span>
|
|
</span>-->
|
|
</div>
|
|
</el-upload>
|
|
<!-- <el-dialog :visible.sync="dialogVisible">
|
|
<img width="100%" :src="dialogImageUrl" alt />
|
|
</el-dialog>-->
|
|
</el-form-item>
|
|
</el-form>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button :loading="crud.status.cu === 2" type="primary" round @click="crud.submitCU">保存</el-button>
|
|
<el-button round @click="crud.cancelCU">关闭</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
|
|
<!-- 上传列表layer -->
|
|
<div class="upload_layer">
|
|
<!-- width="736px" -->
|
|
<el-dialog
|
|
title="上传列表"
|
|
:close-on-click-modal="false"
|
|
:visible.sync="uploadListVisible"
|
|
height="384px"
|
|
>
|
|
<!-- :status="percentage === 100 ? undefined : 'success'" -->
|
|
<el-table :data="uploadData" :header-cell-style="{ color: '#333' }">
|
|
<el-table-column align="center" prop="name" label="文件名" />
|
|
<el-table-column align="center" prop="type" label="类型" />
|
|
<el-table-column align="center" prop="size" label="大小" />
|
|
<el-table-column align="center" prop="status" label="状态">
|
|
<template>
|
|
<div v-if="progressLoading" class="loadingModal" :style="{ 'height': '100%' }">
|
|
<el-progress
|
|
:stroke-width="6"
|
|
:percentage="percentage"
|
|
:color="colors"
|
|
:format="format"
|
|
/>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column align="center" prop="handle" label="操作">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
type="primary"
|
|
round
|
|
class="on_off_btn"
|
|
@click="end(scope.$index, scope.row)"
|
|
>{{ loading_txt }}</el-button>
|
|
<el-button
|
|
type="info"
|
|
round
|
|
class="upload_delt"
|
|
@click="handleRecord(scope.$index, scope.row)"
|
|
>删除</el-button>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="upload_list_right">
|
|
<el-upload
|
|
class="upload-demo"
|
|
action="https://jsonplaceholder.typicode.com/posts/"
|
|
multiple
|
|
:limit="3"
|
|
>
|
|
<div class="right_upload">点击上传</div>
|
|
</el-upload>
|
|
<div class="upload_return">返回</div>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
|
|
<!-- 多选操作 -->
|
|
<div v-if="contentIds.length !== 0" class="multi_handle">
|
|
<el-button type="button" class="mulit_btn">即时发布</el-button>
|
|
<el-button type="button" class="mulit_btn">定时发布</el-button>
|
|
<el-button
|
|
type="button"
|
|
class="mulit_btn"
|
|
:disabled="contentIds.length > 1"
|
|
@click="editContent()"
|
|
>编辑</el-button>
|
|
<el-button type="button" class="mulit_btn">下载</el-button>
|
|
<el-button type="button" class="mulit_btn" @click="moveingTo()">移动</el-button>
|
|
<el-button type="button" class="mulit_btn mulit_delt_btn">删除</el-button>
|
|
</div>
|
|
|
|
<!-- 移动至layer -->
|
|
<div class="wjj_layer">
|
|
<!-- width="736px" -->
|
|
<el-dialog
|
|
title="移动至"
|
|
:close-on-click-modal="false"
|
|
:visible.sync="movingVisible"
|
|
width="576px"
|
|
height="384px"
|
|
>
|
|
<div class="wjj_list">
|
|
<div
|
|
v-for="(item, index) in wjjList"
|
|
:key="index"
|
|
:class="['wjj_item', { 'wjj_item_active': movingChecked === index }]"
|
|
@click="wjjSelected(index)"
|
|
>
|
|
<svg class="font-icon icon" aria-hidden="true">
|
|
<use xlink:href="#icon-wenjianjia" />
|
|
</svg>
|
|
<p class="wjj_name">{{ item.name }}</p>
|
|
</div>
|
|
</div>
|
|
<div slot="footer" class="dialog-footer">
|
|
<el-button type="primary" round>确定</el-button>
|
|
<el-button round @click="crud.cancelCU">取消</el-button>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import crudUser from '@/api/system/user'
|
|
import CRUD, { presenter, header, form, crud } from '@crud/crud'
|
|
import { mapGetters } from 'vuex'
|
|
const defaultForm = {
|
|
id: null,
|
|
name: '',
|
|
file: null
|
|
}
|
|
export default {
|
|
name: 'MaterialList',
|
|
components: {},
|
|
cruds() {
|
|
return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }})
|
|
},
|
|
mixins: [presenter(), header(), form(defaultForm), crud()],
|
|
props: {
|
|
isMultiSelected: {
|
|
type: Boolean,
|
|
required: true
|
|
},
|
|
mulitText: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
uploadListVisible: false,
|
|
loading_txt: '暂停',
|
|
progressLoading: true,
|
|
percentage: 0,
|
|
colors: '#1e9f4c',
|
|
layerTitle: '创建文件夹',
|
|
labelTxt: '文件夹名称',
|
|
mkdirVisible: false,
|
|
formType: null,
|
|
movingVisible: false,
|
|
movingChecked: null,
|
|
// dialogImageUrl: '',
|
|
// dialogVisible: false,
|
|
// disabled: false
|
|
uploadData: [
|
|
{
|
|
id: '1',
|
|
name: '文件夹1',
|
|
type: 'vedio',
|
|
size: '3MB'
|
|
}
|
|
],
|
|
listData: [
|
|
{
|
|
id: '1',
|
|
name: '人工智能',
|
|
type: 'JPG',
|
|
coverImg: require('@/assets/images/background.jpg'),
|
|
time: ''
|
|
},
|
|
{
|
|
id: '2',
|
|
name: '防控疫情小贴士',
|
|
type: 'vedio',
|
|
coverImg: require('@/assets/images/background.jpg'),
|
|
time: '03:00'
|
|
},
|
|
{
|
|
id: '3',
|
|
name: '防控疫情小贴士2',
|
|
type: 'audio',
|
|
coverImg: '',
|
|
time: '01:20'
|
|
}
|
|
],
|
|
contentIds: [],
|
|
wjjList: [
|
|
{
|
|
id: '1',
|
|
name: '文件夹1'
|
|
},
|
|
{
|
|
id: '2',
|
|
name: '文件夹2'
|
|
}
|
|
]
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters([
|
|
'user'
|
|
])
|
|
},
|
|
watch: {
|
|
isMultiSelected(newName, oldName) {
|
|
if (newName === false) {
|
|
this.contentIds = []
|
|
}
|
|
}
|
|
},
|
|
mounted: function() {
|
|
this.start()
|
|
},
|
|
methods: {
|
|
handleMkdir() {
|
|
this.mkdirVisible = true
|
|
},
|
|
UploadList() {
|
|
this.uploadListVisible = true
|
|
},
|
|
selectedItem(id, type) {
|
|
console.log('type', type)
|
|
|
|
const arr = this.contentIds
|
|
// includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效
|
|
if (arr.includes(id)) {
|
|
// 判断数组中是否有选中的id,如果有则去掉
|
|
const index = arr.indexOf(id)
|
|
if (index > -1) {
|
|
arr.splice(index, 1)
|
|
}
|
|
} else {
|
|
this.contentIds.push(id)
|
|
this.formType = type
|
|
}
|
|
|
|
console.log('formType', this.formType)
|
|
},
|
|
editContent() {
|
|
this.mkdirVisible = true
|
|
this.labelTxt = '文件名称'
|
|
|
|
if (this.formType === 'vedio') {
|
|
this.layerTitle = '视频编辑'
|
|
} else if (this.formType === 'audio') {
|
|
this.layerTitle = '音频编辑'
|
|
} else {
|
|
this.layerTitle = '图片编辑'
|
|
}
|
|
|
|
const resType = this.listData.filter(item => {
|
|
return item.id === this.contentIds[0]
|
|
})
|
|
this.form.name = resType[0].name
|
|
},
|
|
moveingTo(index) {
|
|
this.movingVisible = true
|
|
// this.movingChecked = index
|
|
},
|
|
wjjSelected(index) {
|
|
this.movingChecked = index
|
|
console.log(this.movingChecked)
|
|
},
|
|
format(percentage) {
|
|
return percentage === 100 ? '100%' : `${percentage}%`
|
|
},
|
|
start() {
|
|
const that = this
|
|
that.$nextTick(() => {
|
|
that.progressLoading = true
|
|
that.percentage = 0
|
|
that.timeStart = setInterval(() => {
|
|
if (that.percentage < 100) {
|
|
that.percentage += 1
|
|
}
|
|
}, 100)
|
|
})
|
|
},
|
|
// 进度条结束
|
|
end() {
|
|
this.loading_txt = '继续'
|
|
// const that = this
|
|
// that.percentage = 100
|
|
clearInterval(this.timeStart)
|
|
// setTimeout(() => {
|
|
// that.progressLoading = false
|
|
// }, 300)
|
|
}
|
|
// handleRemove(file) {
|
|
// console.log(file)
|
|
// },
|
|
// handlePictureCardPreview(file) {
|
|
// this.dialogImageUrl = file.url
|
|
// this.dialogVisible = true
|
|
// },
|
|
// handleDownload(file) {
|
|
// console.log(file)
|
|
// }
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.material_content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-left: 24px;
|
|
.material_item {
|
|
position: relative;
|
|
width: 174px;
|
|
height: 182px;
|
|
border-radius: 4px;
|
|
margin: 0 20px 20px 0;
|
|
}
|
|
.checked_btn {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
display: block;
|
|
width: 24px;
|
|
height: 24px;
|
|
background: url(~@/assets/images/un_selected.png) no-repeat;
|
|
background-size: 24px 24px;
|
|
cursor: pointer;
|
|
}
|
|
.item_multi {
|
|
border-color: #3a8aeb !important;
|
|
.checked_btn {
|
|
background: url(~@/assets/images/selected.png) no-repeat;
|
|
}
|
|
}
|
|
.cont_upload {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
align-content: center;
|
|
border: 1px dashed #dcdde3;
|
|
background: #f2f7ff;
|
|
.el-button {
|
|
display: block;
|
|
width: 114px;
|
|
height: 34px;
|
|
padding: 0;
|
|
font-size: 14px;
|
|
border: none;
|
|
}
|
|
.cont_upload_btn {
|
|
background: linear-gradient(to right, #fc8c6f, #fa544e) !important;
|
|
}
|
|
.mkdir_btn {
|
|
margin-left: 0;
|
|
margin-top: 16px;
|
|
}
|
|
}
|
|
|
|
.folder {
|
|
border: 1px solid #dcdde3;
|
|
.icon_bg {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 148px;
|
|
background: #fff5dd;
|
|
.icon {
|
|
width: 104px;
|
|
height: 89px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item_cont {
|
|
border-color: #dcdde3;
|
|
img {
|
|
width: 100%;
|
|
height: 148px;
|
|
}
|
|
.radio_img {
|
|
width: 100%;
|
|
height: 148px;
|
|
}
|
|
}
|
|
}
|
|
::v-deep .el-table {
|
|
.el-button {
|
|
padding: 0 10px;
|
|
height: 24px;
|
|
&.upload_delt {
|
|
background-color: #f76b6b;
|
|
}
|
|
}
|
|
}
|
|
::v-deep .el-upload--picture-card {
|
|
width: 128px;
|
|
height: 120px;
|
|
background-color: #f2f7ff;
|
|
}
|
|
::v-deep .el-upload-list--picture-card .el-upload-list__item {
|
|
width: 128px;
|
|
height: 120px;
|
|
}
|
|
.upload_layer {
|
|
::v-deep .el-dialog__headerbtn {
|
|
right: -60px;
|
|
.el-dialog__close {
|
|
color: #fff;
|
|
font-size: 26px;
|
|
}
|
|
}
|
|
.upload_list_right {
|
|
position: absolute;
|
|
right: 24px;
|
|
top: 24px;
|
|
display: flex;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #3a8aeb;
|
|
.upload_return {
|
|
margin-left: 16px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.multi_handle {
|
|
position: fixed;
|
|
bottom: 140px;
|
|
left: 50%;
|
|
width: 1100px;
|
|
padding: 25px 150px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border-radius: 4px;
|
|
margin-left: -438px;
|
|
.mulit_btn {
|
|
padding: 0 24px;
|
|
height: 34px;
|
|
font-size: 14px;
|
|
color: #333;
|
|
border: none;
|
|
margin: 0 24px;
|
|
background-color: #fff;
|
|
}
|
|
.mulit_delt_btn {
|
|
background-color: #ec414d;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.wjj_layer {
|
|
::v-deep .el-dialog__body {
|
|
padding: 30px 24px;
|
|
}
|
|
.wjj_list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.wjj_item {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: center;
|
|
justify-content: center;
|
|
width: 96px;
|
|
height: 104px;
|
|
cursor: pointer;
|
|
&.wjj_item_active {
|
|
background: #e8f3ff;
|
|
border: 1px solid #428fec;
|
|
}
|
|
.font-icon {
|
|
width: 64px;
|
|
height: 55px;
|
|
}
|
|
.wjj_name {
|
|
font-size: 14px;
|
|
color: #333;
|
|
margin-top: 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|