|
|
|
@ -14,26 +14,25 @@ |
|
|
|
</div> |
|
|
|
<p class="file_name">文件夹</p> |
|
|
|
</div> |
|
|
|
<div class="material_item item_cont"> |
|
|
|
<img src="@/assets/images/background.jpg" alt /> |
|
|
|
<div class="item_format"> |
|
|
|
<span class="item_type">JPG</span> |
|
|
|
</div> |
|
|
|
<div class="file_name">人工智能</div> |
|
|
|
</div> |
|
|
|
<div class="material_item item_cont"> |
|
|
|
<div class="radio_img"></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">Video</span> |
|
|
|
<span class="item_time">03:00</span> |
|
|
|
<span class="item_type">{{ item.type }}</span> |
|
|
|
<span v-if="item.type !== 'JPG'" class="item_time">03:00</span> |
|
|
|
</div> |
|
|
|
<div class="file_name">防控疫情小贴士</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 --> |
|
|
|
<!-- 创建文件夹layer / 编辑 --> |
|
|
|
<div class="publish_layer"> |
|
|
|
<el-dialog |
|
|
|
title="创建文件夹" |
|
|
|
:title="layerTitle" |
|
|
|
:close-on-click-modal="false" |
|
|
|
:visible.sync="mkdirVisible" |
|
|
|
width="616px" |
|
|
|
@ -41,15 +40,15 @@ |
|
|
|
> |
|
|
|
<el-form ref="form" :inline="true" :model="form" size="small" label-width="100px"> |
|
|
|
<el-form-item |
|
|
|
label="文件夹名称" |
|
|
|
:label="labelTxt" |
|
|
|
prop="name" |
|
|
|
:rules="[ |
|
|
|
{ required: true, message: '请输入文件夹名称号', trigger: 'blur' } |
|
|
|
{ required: true, message: '请输入名称', trigger: 'blur' } |
|
|
|
]" |
|
|
|
> |
|
|
|
<el-input v-model="form.account" style="width: 336px" /> |
|
|
|
<el-input v-model="form.name" style="width: 336px" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="封面" prop="file"> |
|
|
|
<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 /> |
|
|
|
@ -91,8 +90,8 @@ |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
|
|
|
|
<!-- 创建文件夹layer --> |
|
|
|
<div class="publish_layer"> |
|
|
|
<!-- 上传列表layer --> |
|
|
|
<div class="upload_layer"> |
|
|
|
<!-- width="736px" --> |
|
|
|
<el-dialog |
|
|
|
title="上传列表" |
|
|
|
@ -134,6 +133,61 @@ |
|
|
|
</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> |
|
|
|
@ -155,14 +209,29 @@ export default { |
|
|
|
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 { |
|
|
|
mkdirVisible: false, |
|
|
|
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 |
|
|
|
@ -173,6 +242,40 @@ export default { |
|
|
|
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' |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -181,6 +284,13 @@ export default { |
|
|
|
'user' |
|
|
|
]) |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
isMultiSelected(newName, oldName) { |
|
|
|
if (newName === false) { |
|
|
|
this.contentIds = [] |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted: function () { |
|
|
|
this.start() |
|
|
|
}, |
|
|
|
@ -191,6 +301,49 @@ export default { |
|
|
|
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}%` |
|
|
|
}, |
|
|
|
@ -208,7 +361,7 @@ export default { |
|
|
|
}, |
|
|
|
// 进度条结束 |
|
|
|
end() { |
|
|
|
this.loading_txt = '开始' |
|
|
|
this.loading_txt = '继续' |
|
|
|
// const that = this |
|
|
|
// that.percentage = 100 |
|
|
|
clearInterval(this.timeStart) |
|
|
|
@ -236,11 +389,29 @@ export default { |
|
|
|
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; |
|
|
|
@ -312,4 +483,82 @@ export default { |
|
|
|
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> |
