|  | @ -3,29 +3,36 @@ | 
		
	
		
			
				|  |  |     <div class="material_content"> |  |  |     <div class="material_content"> | 
		
	
		
			
				|  |  |       <div class="material_item cont_upload"> |  |  |       <div class="material_item cont_upload"> | 
		
	
		
			
				|  |  |         <el-button class="cont_upload_btn" round type="primary">上传</el-button> |  |  |         <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> |  |  |         <el-button class="mkdir_btn" round type="primary" @click="handleMkdir">创建文件夹</el-button> | 
		
	
		
			
				|  |  |       </div> |  |  |       </div> | 
		
	
		
			
				|  |  |       <div class="material_item folder"> |  |  |  | 
		
	
		
			
				|  |  |  |  |  |       <div v-for="item in materialFolders" :key="item.id" class="material_item folder"> | 
		
	
		
			
				|  |  |         <div class="icon_bg"> |  |  |         <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" /> |  |  |             <use xlink:href="#icon-wenjianjia" /> | 
		
	
		
			
				|  |  |           </svg> |  |  |           </svg> | 
		
	
		
			
				|  |  |           <img src /> |  |  |  | 
		
	
		
			
				|  |  |  |  |  |           <img v-else :src="item.imgPath" /> | 
		
	
		
			
				|  |  |         </div> |  |  |         </div> | 
		
	
		
			
				|  |  |         <p class="file_name">文件夹</p> |  |  |  | 
		
	
		
			
				|  |  |  |  |  |         <p class="file_name">{{ item.name }}</p> | 
		
	
		
			
				|  |  |       </div> |  |  |       </div> | 
		
	
		
			
				|  |  |       <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) }]" |  |  |         :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 v-if="item.type == 'audio'" class="radio_img"></div> | 
		
	
		
			
				|  |  |         <div class="item_format"> |  |  |         <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> | 
		
	
		
			
				|  |  |         <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> |  |  |         <span v-if="isMultiSelected" class="checked_btn" @click="selectedItem(item.id, item.type)"></span> | 
		
	
		
			
				|  |  |       </div> |  |  |       </div> | 
		
	
		
			
				|  |  |     </div> |  |  |     </div> | 
		
	
	
		
			
				|  | @ -55,37 +62,12 @@ | 
		
	
		
			
				|  |  |               <img src="@/assets/images/t-sc.png" alt /> |  |  |               <img src="@/assets/images/t-sc.png" alt /> | 
		
	
		
			
				|  |  |               <div slot="file" slot-scope="{file}"> |  |  |               <div slot="file" slot-scope="{file}"> | 
		
	
		
			
				|  |  |                 <img class="el-upload-list__item-thumbnail" :src="file.url" alt /> |  |  |                 <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> |  |  |               </div> | 
		
	
		
			
				|  |  |             </el-upload> |  |  |             </el-upload> | 
		
	
		
			
				|  |  |             <!-- <el-dialog :visible.sync="dialogVisible"> |  |  |  | 
		
	
		
			
				|  |  |               <img width="100%" :src="dialogImageUrl" alt /> |  |  |  | 
		
	
		
			
				|  |  |             </el-dialog>--> |  |  |  | 
		
	
		
			
				|  |  |           </el-form-item> |  |  |           </el-form-item> | 
		
	
		
			
				|  |  |         </el-form> |  |  |         </el-form> | 
		
	
		
			
				|  |  |         <div slot="footer" class="dialog-footer"> |  |  |         <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> |  |  |           <el-button round @click="mkdirVisible=false">取 消</el-button> | 
		
	
		
			
				|  |  |         </div> |  |  |         </div> | 
		
	
		
			
				|  |  |       </el-dialog> |  |  |       </el-dialog> | 
		
	
	
		
			
				|  | @ -198,21 +180,10 @@ | 
		
	
		
			
				|  |  | </template> |  |  | </template> | 
		
	
		
			
				|  |  | 
 |  |  | 
 | 
		
	
		
			
				|  |  | <script> |  |  | <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 { |  |  | export default { | 
		
	
		
			
				|  |  |   name: 'MaterialList', |  |  |   name: 'MaterialList', | 
		
	
		
			
				|  |  |   components: {}, |  |  |   components: {}, | 
		
	
		
			
				|  |  |   cruds() { |  |  |  | 
		
	
		
			
				|  |  |     return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }}) |  |  |  | 
		
	
		
			
				|  |  |   }, |  |  |  | 
		
	
		
			
				|  |  |   mixins: [presenter(), header(), form(defaultForm), crud()], |  |  |  | 
		
	
		
			
				|  |  |   props: { |  |  |   props: { | 
		
	
		
			
				|  |  |     isMultiSelected: { |  |  |     isMultiSelected: { | 
		
	
		
			
				|  |  |       type: Boolean, |  |  |       type: Boolean, | 
		
	
	
		
			
				|  | @ -225,6 +196,8 @@ export default { | 
		
	
		
			
				|  |  |   }, |  |  |   }, | 
		
	
		
			
				|  |  |   data() { |  |  |   data() { | 
		
	
		
			
				|  |  |     return { |  |  |     return { | 
		
	
		
			
				|  |  |  |  |  |       materialFolders: [], // 文件夹list | 
		
	
		
			
				|  |  |  |  |  |       materialList: [], // 素材库list | 
		
	
		
			
				|  |  |       uploadListVisible: false, |  |  |       uploadListVisible: false, | 
		
	
		
			
				|  |  |       loading_txt: '暂停', |  |  |       loading_txt: '暂停', | 
		
	
		
			
				|  |  |       progressLoading: true, |  |  |       progressLoading: true, | 
		
	
	
		
			
				|  | @ -236,9 +209,12 @@ export default { | 
		
	
		
			
				|  |  |       formType: null, |  |  |       formType: null, | 
		
	
		
			
				|  |  |       movingVisible: false, |  |  |       movingVisible: false, | 
		
	
		
			
				|  |  |       movingChecked: null, |  |  |       movingChecked: null, | 
		
	
		
			
				|  |  |       // dialogImageUrl: '', |  |  |  | 
		
	
		
			
				|  |  |       // dialogVisible: false, |  |  |  | 
		
	
		
			
				|  |  |       // disabled: false |  |  |  | 
		
	
		
			
				|  |  |  |  |  |       form: { | 
		
	
		
			
				|  |  |  |  |  |         id: null, | 
		
	
		
			
				|  |  |  |  |  |         name: '', | 
		
	
		
			
				|  |  |  |  |  |         file: null | 
		
	
		
			
				|  |  |  |  |  |       }, | 
		
	
		
			
				|  |  |  |  |  | 
 | 
		
	
		
			
				|  |  |       uploadData: [ |  |  |       uploadData: [ | 
		
	
		
			
				|  |  |         { |  |  |         { | 
		
	
		
			
				|  |  |           id: '1', |  |  |           id: '1', | 
		
	
	
		
			
				|  | @ -284,9 +260,6 @@ export default { | 
		
	
		
			
				|  |  |     } |  |  |     } | 
		
	
		
			
				|  |  |   }, |  |  |   }, | 
		
	
		
			
				|  |  |   computed: { |  |  |   computed: { | 
		
	
		
			
				|  |  |     ...mapGetters([ |  |  |  | 
		
	
		
			
				|  |  |       'user' |  |  |  | 
		
	
		
			
				|  |  |     ]) |  |  |  | 
		
	
		
			
				|  |  |   }, |  |  |   }, | 
		
	
		
			
				|  |  |   watch: { |  |  |   watch: { | 
		
	
		
			
				|  |  |     isMultiSelected(newName, oldName) { |  |  |     isMultiSelected(newName, oldName) { | 
		
	
	
		
			
				|  | @ -297,8 +270,23 @@ export default { | 
		
	
		
			
				|  |  |   }, |  |  |   }, | 
		
	
		
			
				|  |  |   mounted: function() { |  |  |   mounted: function() { | 
		
	
		
			
				|  |  |     this.start() |  |  |     this.start() | 
		
	
		
			
				|  |  |  |  |  |     this.getMaterialList() | 
		
	
		
			
				|  |  |   }, |  |  |   }, | 
		
	
		
			
				|  |  |   methods: { |  |  |   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) { |  |  |     publishHandle(index) { | 
		
	
		
			
				|  |  |       this.$router.push( |  |  |       this.$router.push( | 
		
	
		
			
				|  |  |         { |  |  |         { | 
		
	
	
		
			
				|  | 
 |