appadmin_service/new_photo.vue

<template>
  <div class="app-container">
    <div v-loading.fullscreen.lock="loadingFull" />
    <el-tabs v-model="classParams.type">
      <el-tab-pane label="图片" name="0" />
      <el-tab-pane label="视频" name="1" />
    </el-tabs>
    <div style="margin-bottom: 20px;">
      <el-input v-model="searchParams.search_name" placeholder="分类名称" style="width: 300px" />
      <el-select v-model="searchParams.activity_id" style="width: 300px" placeholder="关联活动">
        <el-option label="全部" value="" />
        <el-option
          v-for="item in season_list"
          :key="`${item.season}_${item.type}`"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
      <el-button type="primary" @click="searchParams.page_index = 1; getClassList()">搜索</el-button>
      <el-button type="primary" @click="fileType = true; fileVis = true">添加目录</el-button>
    </div>
    <el-collapse v-model="classActived" accordion @change="toggleImgList">
      <el-collapse-item v-for="item in classList" :key="item.id" :name="JSON.stringify(item)">
        <template slot="title">
          <div class="photo_title_container">
            <p>{{ item.imgclass_name }}</p>
            <template v-if="+classParams.type === 0">
              <div v-if="item.is_old">
                <el-button type="text" @click.stop="submitDeleteClass(item.id)">删除目录</el-button>
                <el-button type="text" @click.stop="setEditClass(item)">修改目录</el-button>
                <el-button type="text" @click.stop="setUploadImg(item.id)">{{ +classParams.type === 0 ? '添加图片' : '添加视频' }}</el-button>
                <el-button type="text" @click.stop="setMachDeleteImg">批量删除</el-button>
                <el-button type="text" @click.stop="setSeleceAllImg(item)">
                  {{ item.isSelectAll ? '已全选' : '全选' }}
                </el-button>
              </div>
              <div v-else>
                <el-button type="text" @click.stop="submitDeleteClass(item.id)">删除目录</el-button>
                <el-button type="text" @click.stop="setEditClass(item)">修改目录</el-button>
                <el-button type="text" @click.stop="addClassify(item)">添加分类</el-button>
              </div>
            </template>
            <template v-else>
              <div>
                <el-button type="text" @click.stop="submitDeleteClass(item.id)">删除目录</el-button>
                <el-button type="text" @click.stop="setEditClass(item)">修改目录</el-button>
                <el-button type="text" @click.stop="setUploadImg(item.id)">{{ +classParams.type === 0 ? '添加图片' : '添加视频' }}</el-button>
                <el-button type="text" @click.stop="setMachDeleteImg">批量删除</el-button>
                <el-button type="text" @click.stop="setSeleceAllImg(item)">
                  {{ item.isSelectAll ? '已全选' : '全选' }}
                </el-button>
              </div>
            </template>
            <!-- <ul class="controls_container">
              <el-tooltip class="item" effect="dark" content="删除目录" placement="top">
                <li class="controls_item" @click.stop="submitDeleteClass(item.id)"><i class="el-icon-folder-delete" /></li>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="修改目录" placement="top">
                <li class="controls_item" @click.stop="setEditClass(item)"><i class="el-icon-edit-outline" /></li>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" :content="+classParams.type === 0 ? '添加图片' : '添加视频'" placement="top">
                <li class="controls_item" @click.stop="setUploadImg(item.id)"><i class="el-icon-plus" /></li>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="批量删除" placement="top">
                <li class="controls_item" @click.stop="setMachDeleteImg"><i class="el-icon-delete" /></li>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="全选" placement="top">
                <li class="controls_item" :class="item.isSelectAll ? 'controls_item_active' : ''" @click.stop="setSeleceAllImg(item)"><i class="el-icon-aim" /></li>
              </el-tooltip>
            </ul> -->
          </div>
        </template>
        <template v-if="+classParams.type === 0 && !item.is_old">
          <template v-if="showClassIfy">
            <!-- <ul class="controls_container">
              <el-tooltip class="item" effect="dark" content="返回" placement="top">
                <li class="controls_item" @click="showClassIfy = false"><i class="el-icon-refresh-left" /></li>
              </el-tooltip>
            </ul> -->
            <el-button type="text" @click="showClassIfy = false">返回</el-button>
            <el-button type="text" @click.stop="setClassifyUploadImg">上传图片</el-button>
            <el-button type="text" @click.stop="setMachDeleteImg">批量删除</el-button>
            <template v-if="classIfyImgList.length > 0">
              <div class="class_img_list">
                <div
                  v-for="btem in classIfyImgList"
                  :key="btem.id"
                  class="class_img_item"
                >
                  <el-image
                    :src="btem.thumbnail"
                    fit="fill"
                    :preview-src-list="[btem.img_url]"
                    class="class_img"
                  />
                  <div class="class_img_controls">
                    <el-tooltip class="item" effect="dark" content="选择批量删除" placement="top">
                      <el-checkbox v-model="deleteImgs[btem.id]" />
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="删除图片" placement="top">
                      <i class="el-icon-delete-solid control_detele" @click="submitDeleteImgOne(btem.id)" />
                    </el-tooltip>
                  </div>
                </div>
              </div>
              <div class="flex_center">
                <pagination
                  :total="classIfyImgTotal"
                  :page.sync="classImgParmas.page_index"
                  :limit.sync="classImgParmas.page_size"
                  @pagination="updateShowImgs"
                  @updata:limit="updateShowImgs"
                />
              </div>
            </template>
            <div v-else class="photo_no">
              <i class="el-icon-receiving" />
              <p class="text">该分类暂无图片</p>
            </div>
          </template>
          <template v-else>
            <div v-if="classifyList.length > 0" class="classList">
              <div
                v-for="cItem in classifyList"
                :key="cItem.id"
                class="classItem"
                @click="showClassIfyImg(cItem.id)"
              >
                <i class="el-icon-folder-opened classItem-icon" />
                <p class="classItem-name">{{ cItem.image_name }}</p>
                <div style="width: 100%">
                  <el-button type="text" @click.stop="updateClassify(cItem)">修改</el-button>
                  <el-button type="text" @click.stop="toDeleteClassify(cItem.id)">删除</el-button>
                </div>
              </div>
            </div>
            <div v-else class="photo_no">
              <i class="el-icon-receiving" />
              <p class="text">暂无分类</p>
            </div>
          </template>
        </template>
        <template v-else>
          <div v-if="classImgList.length > 0">
            <div class="class_img_list">
              <div
                v-for="btem in classImgList"
                :key="btem.id"
                class="class_img_item"
              >
                <el-image
                  v-if="+classParams.type === 0"
                  :src="btem.thumbnail"
                  fit="fill"
                  :preview-src-list="[btem.img_url]"
                  class="class_img"
                />
                <div v-else>
                  <video :src="btem.img_url" controls class="class_video" />
                </div>
                <div class="class_img_controls">
                  <el-tooltip class="item" effect="dark" content="选择批量删除" placement="top">
                    <el-checkbox v-model="deleteImgs[btem.id]" />
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" :content="+classParams.type ? '删除视频' : '删除图片'" placement="top">
                    <i class="el-icon-delete-solid control_detele" @click="submitDeleteImgOne(btem.id)" />
                  </el-tooltip>
                </div>
              </div>
            </div>
            <div class="flex_center">
              <pagination
                :total="classImgTotal"
                :page.sync="classImgParmas.page_index"
                :limit.sync="classImgParmas.page_size"
                @pagination="updateShowImgs"
              />
            </div>
          </div>
          <div v-else class="photo_no">
            <i class="el-icon-receiving" />
            <p class="text">暂无内容</p>
          </div>
        </template>
      </el-collapse-item>
    </el-collapse>
    <pagination
      :total="classTotal"
      :page.sync="searchParams.page_index"
      :limit.sync="searchParams.page_size"
      @pagination="getClassList"
    />
    <!-- 添加分类名 -->
    <el-dialog
      :title="fileType ? '添加目录' : '修改目录'"
      :visible.sync="fileVis"
      width="500px"
      :close-on-click-modal="false"
      :before-close="resetClassParams"
    >
      <el-form ref="classForm" label-width="80px" :model="classParams" :rules="classRule" :hide-required-asterisk="true">
        <el-form-item label="分类名称:" prop="title">
          <el-input v-model="classParams.title" type="text" />
        </el-form-item>
        <el-form-item label="关联活动:" prop="activity_id">
          <el-select v-model="classParams.activity_id" style="width: 100%">
            <el-option
              v-for="item in season_list"
              :key="`${item.season}_${item.type}`"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="排序:" prop="sort">
          <el-input v-model="classParams.sort" type="text" placeholder="数字越大越靠上" />
        </el-form-item>
        <el-form-item>
          <el-button v-if="fileType" type="primary" size="small" @click="submitAddClass">添加</el-button>
          <el-button v-else type="primary" size="small" @click="submitEditClass">修改</el-button>
          <el-button size="small" @click="resetClassParams">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 上传图片 -->
    <el-dialog
      :title="+classParams.type === 0 ? '上传图片' : '上传视频'"
      :visible.sync="imgVis"
      width="800px"
      :close-on-click-modal="false"
      :before-close="updateShowImgs"
    >
      <div v-if="+classParams.type === 0">
        <el-upload
          class="upload-demo"
          drag
          action=""
          multiple
          accept=".jpg, .jpeg, .png"
          :http-request="submitUploadImg"
          :show-file-list="false"
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div slot="tip" class="el-upload__tip">只能上传jpg/jpeg/png文件, 且图片最大不超过3M</div>
        </el-upload>
      </div>
      <div v-else>
        <el-upload
          class="upload-demo"
          drag
          action=""
          accept=".mp4"
          :http-request="submitUploadVideo"
          :show-file-list="false"
        >
          <i class="el-icon-upload" />
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div slot="tip" class="el-upload__tip">上传视频类型为: .mp4 后缀的文件类型, 且视频最大不超过45M</div>
        </el-upload>
      </div>
      <ul class="upload_list_container">
        <li v-for="(item, i) in uploadImgs" :key="`upload_img_${i}`" class="upload_item">
          <p class="img_name">{{ item.name }}</p>
          <el-progress :percentage="item.progress" style="width: 300px" />
        </li>
      </ul>
    </el-dialog>
    <!-- 添加/修改分类 -->
    <el-dialog
      :title="dialog.classifyType ? '添加分类' : '修改分类'"
      :visible.sync="dialog.classify"
      width="520px"
      :close-on-click-modal="false"
      :before-close="resetClassIfy"
    >
      <el-form ref="classifyForm" label-width="100px" :rules="classifyRules" :model="classifyForm">
        <el-form-item label="分类名称:" prop="image_name">
          <el-input v-model="classifyForm.image_name" type="text" />
        </el-form-item>
        <el-form-item label="排序:" prop="sort">
          <el-input v-model="classifyForm.sort" type="text" />
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button @click="resetClassIfy">取消</el-button>
        <el-button type="primary" @click="toPublishClassify">{{ dialog.classifyType ? '添加' : '修改' }}</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import {
  addClass,
  getClassList,
  deleteClass,
  editClass,
  uploadImg,
  getClassImgList,
  deleteClassImg,
  uploadVideo,
  getChildClass,
  getChildImg,
  addUpdateFolder,
  deleteFolder,
  uploadClassifyImg,
  deleteFolderImg
} from '@/api/photo'
export default {
  data() {
    return {
      fileVis: false,
      fileType: true,
      loadingFull: false,
      imgVis: false,
      classParams: {
        activity_id: '',
        title: '',
        sort: '',
        type: '0',
        id: ''
      },
      searchParams: {
        page_index: 1,
        page_size: 10,
        search_name: '',
        activity_id: ''
      },
      classRule: {
        activity_id: [
          { required: true, message: '请选请关联活动', trigger: 'change' }
        ],
        title: [
          { required: true, message: '请填写分类名称', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请填写排序大小', trigger: 'blur' }
        ]
      },
      classList: [],
      classTotal: 0,
      uploadClassId: '',
      uploadImgs: [],
      classActived: [],
      classImgParmas: {
        page_index: 1,
        page_size: 80
      },
      classImgList: [],
      classImgTotal: 0,
      deleteImgs: {},
      isSelectAll: false,
      classifyList: [],
      classifyTotal: 0,
      classifyImgParams: {
        id: '',
        page_index: 1,
        page_size: 80
      },
      showClassIfy: false,
      classIfyImgList: [],
      classIfyImgTotal: 0,
      dialog: {
        classify: false,
        classifyType: true
      },
      classifyForm: {
        image_name: '',
        sort: '',
        image_class_id: '',
        id: '',
        data: null
      },
      classifyRules: {
        image_name: [
          { required: true, message: '请填写分类名称', trigger: 'blur' }
        ],
        sort: [
          { required: true, message: '请填写排序', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    season_list() {
      return this.$store.state.user.season_list
    }
  },
  watch: {
    'classParams.type'() {
      this.getClassList()
    }
  },
  created() {
    this.getClassList()
  },
  methods: {
    // 删除分类
    toDeleteClassify(id) {
      this.$confirm('确认删除这个分类吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loadingFull = true
        deleteFolder({ id }).then(res => {
          this.loadingFull = false
          if (res.code === 200) {
            this.$message.success('删除分类成功')
            this.toggleImgList(this.classifyForm.data)
          } else {
            this.$message.error(res.message || '删除分类失败')
          }
        }).catch(() => {
          this.loadingFull = false
          this.$message.error('删除分类失败')
        })
      }).catch(() => {})
    },
    addClassify(data) {
      this.classifyForm.data = JSON.stringify(data)
      this.classifyForm.image_class_id = data.id
      this.dialog.classify = true
      this.dialog.classifyType = true
    },
    // 重置分类
    resetClassIfy() {
      this.classifyForm.image_name = ''
      this.classifyForm.sort = ''
      this.classifyForm.image_class_id = ''
      this.classifyForm.id = ''
      this.dialog.classify = false
      this.dialog.classifyType = false
    },
    // 修改分类
    updateClassify(data) {
      this.classifyForm.id = data.id
      this.classifyForm.image_name = data.image_name
      this.classifyForm.sort = data.sort
      this.dialog.classify = true
      this.dialog.classifyType = false
    },
    // 增加修改分类
    toPublishClassify() {
      this.$refs.classifyForm.validate(valid => {
        if (valid) {
          const { id, image_class_id, sort, image_name, data } = this.classifyForm
          const params = this.dialog.classifyType ? {
            image_class_id, sort, image_name
          } : {
            id, image_name, sort
          }
          this.loadingFull = true
          addUpdateFolder(params).then(res => {
            this.loadingFull = false
            if (res.code === 200) {
              this.$message.success(this.classifyType ? '添加成功' : '修改成功')
              this.toggleImgList(data)
              this.resetClassIfy()
            } else {
              this.$message.error(res.message || this.classifyType ? '添加分类失败' : '修改分类失败')
            }
          }).catch(() => {
            this.loadingFull = false
            this.$message.error(this.classifyType ? '添加分类失败' : '修改分类失败')
          })
        } else {
          return false
        }
      })
    },
    // 重置添加分类
    resetClassParams() {
      this.classParams.activity_id = ''
      this.classParams.title = ''
      this.classParams.sort = ''
      this.classParams.id = ''
      this.fileVis = false
      this.fileType = true
    },
    // 获取分类列表
    getClassList() {
      const params = Object.assign({}, this.searchParams)
      params.type = this.classParams.type
      this.loadingFull = true
      getClassList(params).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.classList = res.data.list.map(item => {
            item.isSelectAll = false
            return item
          })
          this.classTotal = res.data.total
        } else {
          this.$message.error(res.message || '获取相册失败')
        }
      }).catch(() => {
        this.loadingFull = false
        this.$message.error('获取相册失败')
      })
    },
    // 添加分类
    submitAddClass() {
      this.$refs.classForm.validate((valid) => {
        if (valid) {
          this.loadingFull = true
          addClass(this.classParams).then(res => {
            this.loadingFull = false
            if (res.code === 200) {
              this.$message.success('添加分类成功')
              this.resetClassParams()
              this.getClassList()
            } else {
              this.$message.error(res.message || '添加分类失败')
            }
          }).catch(() => {
            this.loadingFull = false
            this.$message.error('添加分类失败')
          })
        } else {
          return false
        }
      })
    },
    // 删除分类
    submitDeleteClass(id) {
      this.$confirm('确认删除这个分类目录', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loadingFull = true
        deleteClass({ id }).then(res => {
          this.loadingFull = false
          if (res.code === 200) {
            this.$message.success('删除分类成功')
            this.getClassList()
          } else {
            this.$message.error(res.message || '删除分类失败')
          }
        }).catch((e) => {
          this.loadingFull = false
          this.$message.error('删除分类失败')
        })
      }).catch(() => {})
    },
    // 修改分类
    setEditClass(item) {
      const { imgclass_name, activity_id, sort, id } = item
      this.classParams.title = imgclass_name
      this.classParams.sort = sort
      this.classParams.activity_id = activity_id
      this.classParams.id = id
      this.fileType = false
      this.fileVis = true
    },
    submitEditClass() {
      this.$refs.classForm.validate((valid) => {
        if (valid) {
          this.loadingFull = true
          editClass(this.classParams).then(res => {
            this.loadingFull = false
            if (res.code === 200) {
              this.$message.success('修改分类成功')
              this.resetClassParams()
              this.getClassList()
            } else {
              this.$message.error(res.message || '修改分类成功')
            }
          }).catch(() => {
            this.loadingFull = false
            this.$message.error('修改分类成功')
          })
        } else {
          return false
        }
      })
    },
    // 显示分类图片
    showClassIfyImg(id) {
      this.uploadClassId = id
      this.classifyImgParams.id = id
      this.showClassIfy = true
      this.getClassifyImg()
    },
    // 获取分类图片
    getClassifyImg() {
      this.loadingFull = true
      getChildImg(this.classifyImgParams).then(res => {
        this.loadingFull = false
        if (res.code === 200) {
          this.classIfyImgList = res.data.list
          this.classIfyImgTotal = res.data.total
        } else {
          this.$message.error(res.message || '获取图片失败')
        }
      }).catch(() => {
        this.loadingFull = false
        this.$message.error('获取图片失败')
      })
    },
    resetShowImgs() {
      this.deleteImgs = {}
      this.classImgList = []
      this.classImgTotal = 0
      this.classIfyImgList = []
      this.showClassIfy = false
      this.classList.forEach(item => {
        this.$set(item, 'isSelectAll', false)
      })
    },
    // 获取图片列表
    toggleImgList(data) {
      if (!data) return false
      data = JSON.parse(data)
      this.resetShowImgs()
      if (!data.is_old && +this.classParams.type === 0) {
        this.loadingFull = true
        this.classifyForm.data = JSON.stringify(data)
        getChildClass({ id: data.id }).then(res => {
          this.loadingFull = false
          if (res.code === 200) {
            this.classifyList = res.data.list
            this.classifyTotal = res.data.total
          } else {
            this.$message.error(res.message || '获取分类失败')
          }
        }).catch(() => {
          this.loadingFull = false
          this.$message.error('获取分类失败')
        })
      } else {
        console.log(this.classImgParmas)
        const { page_index, page_size } = this.classImgParmas
        this.classifyForm.data = ''
        this.loadingFull = true
        getClassImgList({
          id: data.id,
          page_index,
          page_size
        }).then(res => {
          this.loadingFull = false
          if (res.code === 200) {
            this.classImgList = res.data.list
            this.classImgTotal = res.data.total
          } else {
            this.$message.error(res.message || '获取图片失败')
          }
        }).catch(() => {
          this.loadingFull = false
          this.$message.error('获取图片失败')
        })
      }
    },
    // 上传完成更新图片
    updateShowImgs({ page, limit }) {
      if (this.imgVis) {
        this.uploadImgs = []
        this.imgVis = false
      }
      if (+this.classParams.type === 1 && this.classifyForm.data) {
        if (page) {
          this.classifyImgParams.page_size = limit
          this.classifyImgParams.page_index = page
        }
        this.getClassifyImg()
      } else {
        if (this.classActived) {
          if (page) {
            this.classImgParmas.page_index = page
            this.classImgParmas.page_size = limit
          }
          this.toggleImgList(this.classActived)
        }
      }
    },
    // 上传分类图片
    setClassifyUploadImg(id) {
      this.imgVis = true
    },
    // 上传图片
    setUploadImg(id) {
      this.uploadClassId = id
      this.imgVis = true
    },
    submitUploadImg(params) {
      if (!this.uploadClassId) {
        this.$message.error('获取分类Id失败')
        this.imgVis = false
        return false
      }
      const file = params.file
      const { size } = file
      if (size > 1024 * 1024 * 3) {
        this.$message.error('图片体积最大为3M')
        return false
      }
      this.uploadImgs.push({
        file,
        name: file.name,
        progress: 0
      })
      if (this.classifyForm.data) {
        const formData = new FormData()
        formData.append('file', file)
        formData.append('id', this.uploadClassId)
        const _this = this
        const _i = this.uploadImgs.length - 1
        uploadClassifyImg(formData, ({ loaded, total }) => {
          const complete = (loaded / total * 100) | 0
          _this.uploadImgs[_i].progress = complete
        }).then(res => {
          if (res.code === 200) {
            this.$message.success('上传图片成功')
          } else {
            this.$message.error(res.message || '上传图片失败')
          }
        }).catch((e) => {
          this.$message.error('上传图片失败')
        })
      } else {
        this.uploadImg(file, this.uploadImgs.length - 1)
      }
    },
    uploadImg(file, i) {
      const _this = this
      const formData = new FormData()
      formData.append('file', file)
      formData.append('id', this.uploadClassId)
      formData.append('type', this.classParams.type)
      uploadImg(formData, ({ loaded, total }) => {
        const complete = (loaded / total * 100) | 0
        _this.uploadImgs[i].progress = complete
      }).then(res => {
        if (res.code === 200) {
          this.$message.success('上传图片成功')
        } else {
          this.$message.error(res.message || '上传图片失败')
        }
      }).catch((e) => {
        this.$message.error('上传图片失败')
      })
    },
    // 全选图片
    setSeleceAllImg(data) {
      data.isSelectAll = !data.isSelectAll
      if (data.isSelectAll) {
        this.classImgList.forEach(item => {
          this.$set(this.deleteImgs, item.id, true)
        })
      } else {
        const obj = Object.assign({}, this.deleteImgs)
        Object.keys(obj).forEach(id => {
          this.$set(this.deleteImgs, id, false)
        })
      }
    },
    // 批量删除
    setMachDeleteImg() {
      const obj = Object.assign({}, this.deleteImgs)
      const selectedArr = Object.keys(obj).filter(id => obj[id])
      if (selectedArr.length === 0) {
        this.$message.error('请至少选择一个')
        return false
      }
      this.$confirm('是否确认删除选择图片?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitDeleteImg(selectedArr)
      }).catch(() => {})
    },
    // 单个删除
    submitDeleteImgOne(id) {
      this.$confirm(`是否确认删除该${+this.classParams.type ? '视频' : '图片'}?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.submitDeleteImg([id])
      }).catch(() => {})
    },
    // 提交删除
    submitDeleteImg(ids) {
      if (this.classifyForm.data) {
        deleteFolderImg({ ids }).then(res => {
          if (res.code === 200) {
            this.$message.success('删除图片成功')
            this.deleteImgs = {}
            this.getClassifyImg()
          } else {
            this.$message.error(res.message || '删除图片失败')
          }
        }).catch(() => {
          this.$message.error('删除图片失败')
        })
      } else {
        deleteClassImg({ ids }).then(res => {
          if (res.code === 200) {
            this.$message.success('删除图片成功')
            this.deleteImgs = {}
            this.updateShowImgs()
          } else {
            this.$message.error(res.message || '删除图片失败')
          }
        }).catch(() => {
          this.$message.error('删除图片失败')
        })
      }
    },
    // 上传视频
    submitUploadVideo(params) {
      const file = params.file
      const { size, type } = file
      if (size > 45 * 1024 * 1024) {
        this.$message.error('视频最大不超过45M')
        return false
      }
      const fileType = ['video/mp4']
      console.log(type)
      if (!fileType.includes(type)) {
        this.$message.error('上传视频类型不是mp4类型')
        return false
      }
      this.uploadImgs.push({
        file,
        name: file.name,
        progress: 0
      })
      this.uploadVideo(file, this.uploadImgs.length - 1)
    },
    uploadVideo(file, i) {
      const _this = this
      const formData = new FormData()
      formData.append('file', file)
      formData.append('id', this.uploadClassId)
      formData.append('type', this.classParams.type)
      uploadVideo(formData, ({ loaded, total }) => {
        const complete = (loaded / total * 100) | 0
        _this.uploadImgs[i].progress = complete
      }).then(res => {
        if (res.code === 200) {
          this.$message.success('上传视频成功')
        } else {
          this.$message.error(res.message || '上传视频失败')
        }
      }).catch(() => {
        this.$message.error('上传视频失败')
      })
    }
  }
}
</script>
<style scoped lang="scss">
  /deep/ .el-tree-node__content {
    height: auto;
  }
  .photo_title_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex: 1;
    padding-right: 20px;
    // height: 48px;
    // line-height: 48px;
  }
  .controls_container {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    .controls_item {
      width: 25px;
      height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #cccccc;
      color: #ffffff;
      margin-right: 10px;
      border-radius: 2px;
      font-size: 14px;
      cursor: pointer;
      &:hover {
        background: #409EFF !important;
      }
    }
    .controls_item_active {
      background: #409EFF !important;
    }
  }
  .photo_no {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px;
    font-size: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #cccccc;
    .text {
      font-size: 18px;
      font-weight: 500;
    }
  }
  /deep/ .el-upload{
    width: 100%;
    .el-upload-dragger{
      width: 100%;
    }
  }
  .upload_list_container {
    list-style: none;
    padding: 0;
    max-height: 500px;
    overflow-y: scroll;
    .upload_item {
      list-style: none;
      margin-bottom: 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .img_name {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 10px;
        margin: 0;
      }
    }
  }
  .class_img_list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .class_img_item {
      margin-right: 10px;
      margin-bottom: 10px;
      position: relative;
      .class_img {
        width: 100px;
        height: 100px;
      }
      .class_video {
        width: 400px;

      }
      .class_img_controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .control_detele {
          font-size: 14px;
        }
        i {
          cursor: pointer;
        }
      }
    }
  }
  /deep/ .pagination-container{
    padding: 0;
  }
  .flex_center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .classList {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    .classItem {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;
      cursor: pointer;
      margin-right: 20px;
      margin-bottom: 20px;
      &-icon {
        width: 130px;
        height: 130px;
        background: #f5f7fa;
        border: 1px solid #f1f1f1;
        font-size: 100px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      &-name {
        line-height: 30px;
        height: 30px;
        text-align: center;
        margin: 0;
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
</style>