|
|
|
@ -3,29 +3,36 @@ |
|
|
|
<div class="material_content"> |
|
|
|
<div class="material_item cont_upload"> |
|
|
|
<el-button class="cont_upload_btn" round type="primary">上传</el-button> |
|
|
|
<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 /> |
|
|
|
</div> |
|
|
|
</el-upload> |
|
|
|
<el-button class="mkdir_btn" round type="primary" @click="handleMkdir">创建文件夹</el-button> |
|
|
|
</div> |
|
|
|
<div class="material_item folder"> |
|
|
|
<div v-for="item in materialFolders" :key="item.id" class="material_item folder"> |
|
|
|
<div class="icon_bg"> |
|
|
|
<svg class="font-icon icon" aria-hidden="true"> |
|
|
|
<svg v-if="!item.imgPath" class="font-icon icon" aria-hidden="true"> |
|
|
|
<use xlink:href="#icon-wenjianjia" /> |
|
|
|
</svg> |
|
|
|
<img src /> |
|
|
|
<img v-else :src="item.imgPath" /> |
|
|
|
</div> |
|
|
|
<p class="file_name">文件夹</p> |
|
|
|
<p class="file_name">{{ item.name }}</p> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
v-for="(item, index) in listData" |
|
|
|
:key="index" |
|
|
|
v-for="(item, index) in materialList" |
|
|
|
:key="'list-'+index" |
|
|
|
:class="['material_item', 'item_cont', { 'item_multi': contentIds.includes(item.id) }]" |
|
|
|
> |
|
|
|
<img v-if="item.coverImg" :src="item.coverImg" alt /> |
|
|
|
<img v-if="item.img_path" :src="item.img_path" 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> |
|
|
|
<span class="item_type">{{ item.material_type }}</span> |
|
|
|
<span v-if="item.material_type !== 'JPG'" class="item_time">03:00</span> |
|
|
|
</div> |
|
|
|
<div class="file_name">{{ item.name }}</div> |
|
|
|
<div class="file_name">{{ item.material_name }}</div> |
|
|
|
<span v-if="isMultiSelected" class="checked_btn" @click="selectedItem(item.id, item.type)"></span> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -55,37 +62,12 @@ |
|
|
|
<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 type="primary" round>保 存</el-button> |
|
|
|
<el-button round @click="mkdirVisible=false">取 消</el-button> |
|
|
|
</div> |
|
|
|
</el-dialog> |
|
|
|
@ -198,21 +180,10 @@ |
|
|
|
</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 |
|
|
|
} |
|
|
|
import { getMaterialList } from '@/api/material/material' |
|
|
|
export default { |
|
|
|
name: 'MaterialList', |
|
|
|
components: {}, |
|
|
|
cruds() { |
|
|
|
return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }}) |
|
|
|
}, |
|
|
|
mixins: [presenter(), header(), form(defaultForm), crud()], |
|
|
|
props: { |
|
|
|
isMultiSelected: { |
|
|
|
type: Boolean, |
|
|
|
@ -225,6 +196,8 @@ export default { |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
materialFolders: [], // 文件夹list |
|
|
|
materialList: [], // 素材库list |
|
|
|
uploadListVisible: false, |
|
|
|
loading_txt: '暂停', |
|
|
|
progressLoading: true, |
|
|
|
@ -236,9 +209,12 @@ export default { |
|
|
|
formType: null, |
|
|
|
movingVisible: false, |
|
|
|
movingChecked: null, |
|
|
|
// dialogImageUrl: '', |
|
|
|
// dialogVisible: false, |
|
|
|
// disabled: false |
|
|
|
form: { |
|
|
|
id: null, |
|
|
|
name: '', |
|
|
|
file: null |
|
|
|
}, |
|
|
|
|
|
|
|
uploadData: [ |
|
|
|
{ |
|
|
|
id: '1', |
|
|
|
@ -284,9 +260,6 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapGetters([ |
|
|
|
'user' |
|
|
|
]) |
|
|
|
}, |
|
|
|
watch: { |
|
|
|
isMultiSelected(newName, oldName) { |
|
|
|
@ -297,8 +270,23 @@ export default { |
|
|
|
}, |
|
|
|
mounted: function() { |
|
|
|
this.start() |
|
|
|
this.getMaterialList() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 获取素材库list |
|
|
|
getMaterialList() { |
|
|
|
const params = { |
|
|
|
'folder_id': '', |
|
|
|
'material_name': '', |
|
|
|
'material_type': 0, |
|
|
|
'orga_id': '133221333123111' |
|
|
|
} |
|
|
|
getMaterialList(params).then(res => { |
|
|
|
this.materialFolders = res.data.materialFolders |
|
|
|
this.materialList = res.data.pageThemeVO |
|
|
|
console.log(this.materialFolders) |
|
|
|
}) |
|
|
|
}, |
|
|
|
publishHandle(index) { |
|
|
|
this.$router.push( |
|
|
|
{ |
|
|
|
|
