创建/编辑/删除文件夹

src/api/material/material.js

@@ -1,5 +1,6 @@
 import request from '@/utils/request'
 
+// 获取素材库list
 export function getMaterialList(parameter) {
   return request({
     url: 'api/material/myMaterial',
@@ -7,9 +8,29 @@ export function getMaterialList(parameter) {
     data: parameter
   })
 }
-export function getQiniuToken() {
+
+// 新建/编辑 文件夹 - 素材库
+export function saveMaterialFolder(parameter) {
+  return request({
+    url: 'api/material/saveMaterialFolder',
+    method: 'post',
+    data: parameter
+  })
+}
+
+// 删除 文件夹 - 素材库
+export function deleteMaterialFolder(data) {
   return request({
-    url: 'api/qiniu/uploadTokenCover',
-    method: 'get'
+    url: 'api/material/deleteMaterialFolder?id=' + data,
+    method: 'post'
+  })
+}
+
+// 编辑 - 素材库
+export function saveMaterial(parameter) {
+  return request({
+    url: 'api/material/save',
+    method: 'post',
+    data: parameter
   })
 }

src/api/upload/upload.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+// 获取七牛云token
+export function getQiniuToken() {
+  return request({
+    url: 'api/qiniu/uploadTokenCover',
+    method: 'get'
+  })
+}

src/views/components/upload.vue

@@ -1,23 +1,11 @@
 <template>
   <div class="components_upload">
-    <!-- 上传文件 -->
-    <div class="">
     <el-button class="cont_upload_btn" round type="primary">上传</el-button>
     <input id="upFile" type="file" name="upFile" @change="changeFile($event)" />
+    <input type="button" name="开始上传" value="开始上传" @click="uploadFile()" />
     <!-- <img v-if="coverUrl" :src="coverUrl" alt="封面" /> -->
-      <!-- <el-progress :percentage="filePercent" />
-      {{ filePercent }} -->
-    </div>
-
-    <!-- 上传封面 -->
-    <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-progress :percentage="filePercent" />
+    {{ filePercent }}
     <!-- 上传列表layer -->
     <div class="upload_layer">
       <!-- width="736px" -->
@@ -64,15 +52,15 @@
           </el-table-column>
         </el-table>
         <div class="upload_list_right">
-          <!-- <el-upload
+          <el-upload
             class="upload-demo"
             action="https://jsonplaceholder.typicode.com/posts/"
             multiple
             :limit="3"
           >
             <div class="right_upload">点击上传</div>
-          </el-upload> -->
-          <input type="button" name="开始上传" value="开始上传" @click="uploadFile()" />
+          </el-upload>
+
           <div class="upload_return" @click="uploadListVisible=false">返回</div>
         </div>
       </el-dialog>
@@ -81,7 +69,7 @@
 </template>
 <script>
 import * as qiniu from 'qiniu-js'
-import { getQiniuToken } from '@/api/material/material'
+import { getQiniuToken } from '@/api/upload/upload'
 export default {
   name: 'Qiniu',
   data() {

src/views/components/upload_cover.vue

@@ -1,22 +1,5 @@
 <template>
-  <!-- upload -->
   <div class="upload_cover">
-    <!-- <el-upload
-      class="upload-demo"
-      drag
-      :action="upload_qiniu_url"
-      :show-file-list="false"
-      :on-success="handleAvatarSuccess"
-      :on-error="handleError"
-      :before-upload="beforeAvatarUpload"
-      :data="qiniuData"
-    >
-      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
-      <div v-else class="el-default">
-        <i class="el-icon-upload"></i>
-      </div>
-      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
-    </el-upload> -->
     <el-upload
       :action="upload_qiniu_url"
       :show-file-list="false"
@@ -26,19 +9,20 @@
       :data="qiniuData"
       list-type="picture-card"
     >
-      <div class="avatar-uploader">
-        <img v-if="imageUrl" :src="imageUrl" class="avatar" alt />
+      <div v-if="imageUrl" class="avatar-uploader">
+        <img :src="imageUrl" class="avatar" alt />
+      </div>
       <div class="el-default">
         <img src="@/assets/images/t-sc.png" alt />
       </div>
-      </div>
       <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
     </el-upload>
   </div>
 </template>
 <script>
-import { getQiniuToken } from '@/api/material/material'
+import { getQiniuToken } from '@/api/upload/upload'
 export default {
+  name: 'UploadCover',
   data() {
     return {
       imageUrl: '',
@@ -46,7 +30,7 @@ export default {
         key: '',
         token: ''
       },
-      // 七牛云的上传地址，根据自己所在地区选择，我这里是华南区
+      // 七牛云的上传地址
       upload_qiniu_url: 'https://upload.qiniup.com/',
       // 这是七牛云空间的外链默认域名
       upload_qiniu_addr: 'qiniu.aiyxlib.com'
@@ -59,7 +43,7 @@ export default {
     getQiniuToken() {
       const _this = this
       getQiniuToken().then(res => {
-        if (res.code == 200) {
+        if (res.code === 200) {
           this.qiniuData.token = res.data
         } else {
           _this.$message({
@@ -86,15 +70,6 @@ export default {
     handleAvatarSuccess: function(res, file) {
       this.imageUrl = 'http://' + this.upload_qiniu_addr + '/' + res.key
       console.log(this.imageUrl)
-      this.$message({
-        message: '上传成功',
-        duration: 2000,
-        type: 'warning'
-      })
-    },
-    handlePictureCardPreview(file) {
-      this.imageUrl = 'http://' + this.upload_qiniu_addr + '/' + res.key
-      this.dialogVisible = true
     },
     handleError: function(res) {
       this.$message({
@@ -106,28 +81,40 @@ export default {
   }
 }
 </script>
-<style scoped>
-/* .avatar-uploader .el-upload {
-  border: 5px dashed #ca1717 !important;
+<style lang="scss" scoped>
+::v-deep .el-upload--picture-card {
+  display: flex;
+  width: 100%;
+  height: 120px;
+  border: none;
+  background: none;
+}
+::v-deep .el-upload-list--picture-card .el-upload-list__item {
+  width: 128px;
+  height: 120px;
+}
+.avatar-uploader{
+  width: 128px;
+  height: 120px;
+  margin-right: 20px;
   border-radius: 6px;
-  cursor: pointer;
-  position: relative;
   overflow: hidden;
+  img{
+    display: block;
+    width: 128px;
+    height: 120px;
+  }
+}
+.el-default{
+  width: 128px;
+  height: 120px;
+  background-color: #f2f7ff;
+  border: 1px dashed #c0ccda;
+  border-radius: 6px;
 }
-.avatar-uploader .el-upload:hover {
-  border-color: #409EFF;
-} */
-/* .avatar-uploader-icon {
-  font-size: 28px;
-  color: #8c939d;
-  width: 178px;
-  height: 178px;
-  line-height: 178px;
-  text-align: center;
-} */
 .avatar {
-  width: 178px;
-  height: 178px;
   display: block;
+  width: 128px;
+  height: 120px;
 }
 </style>

src/views/materialContent/materialList/index.vue

@@ -1,11 +1,13 @@
 <template>
   <div>
     <div class="material_content">
+      <!-- 上传 / 创建文件夹 -->
       <div class="material_item cont_upload">
-        <Upload rel="upload" />
-        <el-button class="mkdir_btn" round type="primary" @click="handleMkdir">创建文件夹</el-button>
+        <Upload rel="uploadMaterial" />
+        <el-button class="mkdir_btn" round type="primary" @click="handleMkdir(0)">创建文件夹</el-button>
       </div>
-      <div v-for="item in materialFolders" :key="item.id" class="material_item folder">
+      <!-- 文件夹list -->
+      <div v-for="(item,index) in materialFolders" :key="item.id" :class="['material_item', 'folder', { 'item_multi': folderChecked == index }]" @click="editFolder(item,index)">
         <div class="icon_bg">
           <svg v-if="!item.imgPath" class="font-icon icon" aria-hidden="true">
             <use xlink:href="#icon-wenjianjia" />
@@ -13,7 +15,9 @@
           <img v-else :src="item.imgPath" />
         </div>
         <p class="file_name">{{ item.name }}</p>
+        <span v-if="folderChecked == index" class="checked_btn"></span>
       </div>
+      <!-- 素材库list -->
       <div
         v-for="(item, index) in materialList"
         :key="'list-'+index"
@@ -37,9 +41,8 @@
         :show-close="false"
         :visible.sync="mkdirVisible"
         width="616px"
-        height="384px"
       >
-        <el-form ref="form" :inline="true" :model="form" size="small" label-width="100px">
+        <el-form ref="folderForm" :inline="true" :model="folderForm" size="small" label-width="100px">
           <el-form-item
             :label="labelTxt"
             prop="name"
@@ -47,23 +50,24 @@
               { required: true, message: '请输入名称', trigger: 'blur' }
             ]"
           >
-            <el-input v-model="form.name" style="width: 336px" />
+            <el-input v-model="folderForm.name" style="width: 336px" />
           </el-form-item>
-          <el-form-item v-if="formType !== 'JPG'" label="封面" prop="file">
-            <UploadCover />
+          <el-form-item v-if="formType !== 'JPG'" label="封面">
+            <UploadCover ref="childUpload" />
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
-          <el-button type="primary" round>保 存</el-button>
-          <el-button round @click="mkdirVisible=false">取 消</el-button>
+          <el-button type="primary" round @click="submitForm('folderForm')">保 存</el-button>
+          <el-button round @click="resetForm()">取 消</el-button>
         </div>
       </el-dialog>
     </div>
 
     <!-- 多选操作 -->
-    <div v-if="contentIds.length !== 0" class="multi_handle">
+    <div v-if="contentIds.length !== 0 || folderChecked != -1" class="multi_handle">
+      <div v-if="isEditFolder != true">
         <el-button type="button" class="mulit_btn" @click="publishHandle(0)">即时发布</el-button>
-      <el-button type="button" class="mulit_btn" @click="publishHandle(1)">定时发布</el-button>
+        <el-button v-if="isEditFolder != true" type="button" class="mulit_btn" @click="publishHandle(1)">定时发布</el-button>
         <el-button
           type="button"
           class="mulit_btn"
@@ -74,6 +78,16 @@
         <el-button type="button" class="mulit_btn" @click="moveingTo()">移动</el-button>
         <el-button type="button" class="mulit_btn mulit_delt_btn">删除</el-button>
       </div>
+      <div v-else>
+        <el-button
+          type="button"
+          class="mulit_btn"
+          @click="handleMkdir(1)"
+        >编辑</el-button>
+        <el-button type="button" class="mulit_btn mulit_delt_btn" @click="deleteMaterialFolder">删除</el-button>
+      </div>
+
+    </div>
 
     <!-- 移动至layer -->
     <div class="wjj_layer">
@@ -90,7 +104,7 @@
           <div
             v-for="(item, index) in wjjList"
             :key="index"
-            :class="['wjj_item', { 'wjj_item_active': movingChecked === index }]"
+            :class="['wjj_item', { 'wjj_item_active': folderChecked === index }]"
             @click="wjjSelected(index)"
           >
             <svg class="font-icon icon" aria-hidden="true">
@@ -109,66 +123,38 @@
 </template>
 
 <script>
-import { getMaterialList } from '@/api/material/material'
+import { getMaterialList, saveMaterialFolder, deleteMaterialFolder, saveMaterial } from '@/api/material/material'
 import Upload from '../../components/upload'
 import UploadCover from '../../components/upload_cover'
 export default {
   name: 'MaterialList',
   components: { Upload, UploadCover },
-  props: {
-    isMultiSelected: {
-      type: Boolean,
-      required: true
-    },
-    mulitText: {
-      type: String,
-      required: true
-    }
-  },
   data() {
     return {
+      orga_id: '133221333123111', // 机构ID
       materialFolders: [], // 文件夹list
       materialList: [], // 素材库list
+      folderForm: { // form
+        fid: '',
+        id: '',
+        img_path: '',
+        name: '',
+        orga_id: ''
+      },
+      isEditFolder: false, // 是否编辑文件夹
+      mkdirVisible: false, // 新建编辑layer
+      folderChecked: -1, // 文件夹是否单击选中
       // uploadListVisible: false,
-
       // progressLoading: true,
       // percentage: 0,
-      colors: '#1e9f4c',
+      // colors: '#1e9f4c',
       layerTitle: '创建文件夹',
       labelTxt: '文件夹名称',
-      mkdirVisible: false,
       formType: null,
       movingVisible: false,
-      movingChecked: null,
-      form: {
-        id: null,
-        name: '',
-        file: null
-      },
       uploadListData: [
       ],
       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: [
@@ -203,14 +189,132 @@ export default {
         'folder_id': '',
         'material_name': '',
         'material_type': 0,
-        'orga_id': '133221333123111'
+        'orga_id': this.orga_id
       }
       getMaterialList(params).then(res => {
         this.materialFolders = res.data.materialFolders
         this.materialList = res.data.pageThemeVO
-        console.log(this.materialFolders)
+        // 创建文件夹获取data
+        this.folderForm.fid = res.data.thisFoldId
+      })
+    },
+    // 新建 / 编辑 文件夹
+    handleMkdir(mkdirType) {
+      this.mkdirVisible = true
+      this.folderForm.orga_id = this.orga_id
+      if (mkdirType === 0) {
+        this.$nextTick(() => {
+          this.$refs.childUpload.imageUrl = ''
+          this.folderForm.img_path = ''
+          this.folderForm.name = ''
+        })
+        delete this.folderForm.id
+      } else {
+        this.$nextTick(() => {
+          this.$refs.childUpload.imageUrl = this.folderForm.img_path
+        })
+      }
+    },
+    // 选择 编辑 文件夹
+    editFolder(item, index) {
+      console.log(item)
+      if (index !== this.folderChecked) {
+        this.folderChecked = index
+        this.isEditFolder = true
+        this.folderForm = {
+          fid: item.fid,
+          id: item.id,
+          name: item.name,
+          img_path: item.imgPath,
+          orga_id: item.orgaId
+        }
+      } else {
+        this.folderChecked = -1
+        this.isEditFolder = false
+      }
+    },
+    // 删除 文件夹
+    deleteMaterialFolder() {
+      this.$confirm('此操作将永久删除该文件夹, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        const id = this.folderForm.id
+        deleteMaterialFolder(id).then(res => {
+          if (res.code === 200) {
+            this.$message({
+              message: '删除文件夹成功',
+              type: 'success'
+            })
+            this.getMaterialList()
+            this.folderChecked = -1
+            this.isEditFolder = false
+          }
+        })
+      }).catch(() => {
+        this.$message({
+          message: '已取消删除',
+          type: 'info'
+        })
+      })
+    },
+    saveMaterial() {
+      const params = {
+        'class_ids': [
+          // 素材类id集合
+        ],
+        'deposit_url': '', // 素材存放路径
+        'device_direction': 1, // 横竖屏 1.横屏 2.竖屏,
+        'folder_id': '', // 文件夹id
+        'img_path': '', // 封面图片id
+        'material_id': '', // 素材id
+        'material_name': '', // 素材名称
+        'material_type': '', // 素材类别
+        'orga_id': this.orga_id, // 机构id
+        'store_type': 1 // 库类型 1.素材库 2.主题库
+      }
+      saveMaterialFolder(params).then(res => {
+        // if (res.code == 200) {
+
+        // }
+      })
+    },
+    // 提交表单 - 新建/编辑
+    submitForm(formName) {
+      this.folderForm.img_path = this.$refs.childUpload.imageUrl
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          saveMaterialFolder(this.folderForm).then(res => {
+            if (res.code == 200) {
+              this.$message({
+                message: '创建文件夹成功',
+                duration: 2000,
+                type: 'success'
+              })
+              this.mkdirVisible = false
+              this.getMaterialList()
+            } else {
+              this.$message({
+                message: '创建文件夹失败',
+                duration: 2000,
+                type: 'warning'
+              })
+            }
+          })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
       })
     },
+    // 重置表单
+    resetForm() {
+      // 强制重置folderForm表单
+      // Object.assign(this.$data.folderForm, this.$options.data.call(this).folderForm)
+      this.mkdirVisible = false
+    },
+    // 选择素材 - to 即时发布/定时发布
     publishHandle(index) {
       this.$router.push(
         {
@@ -218,15 +322,11 @@ export default {
         }
       )
     },
-    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)) {
@@ -239,7 +339,6 @@ export default {
         this.contentIds.push(id)
         this.formType = type
       }
-
       console.log('formType', this.formType)
     },
     editContent() {
@@ -253,19 +352,18 @@ export default {
       } else {
         this.layerTitle = '图片编辑'
       }
-
       const resType = this.listData.filter(item => {
         return item.id === this.contentIds[0]
       })
-      this.form.name = resType[0].name
+      this.folderForm.name = resType[0].name
     },
     moveingTo(index) {
       this.movingVisible = true
       // this.movingChecked = index
     },
     wjjSelected(index) {
-      this.movingChecked = index
-      console.log(this.movingChecked)
+      this.folderChecked = index
+      console.log(this.folderChecked)
     },
     format(percentage) {
       return percentage === 100 ? '100%' : `${percentage}%`
@@ -292,16 +390,6 @@ export default {
       //   that.progressLoading = false
       // }, 300)
     }
-    // handleRemove(file) {
-    //   console.log(file)
-    // },
-    // handlePictureCardPreview(file) {
-    //   this.dialogImageUrl = file.url
-    //   this.dialogVisible = true
-    // },
-    // handleDownload(file) {
-    //   console.log(file)
-    // }
   }
 }
 </script>
@@ -317,6 +405,7 @@ export default {
     height: 182px;
     border-radius: 4px;
     margin: 0 20px 20px 0;
+    overflow: hidden;
   }
   .item_cont {
     border-color: #dcdde3;
@@ -344,13 +433,5 @@ export default {
     }
   }
 }
-::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;
-}
+
 </style>