canvasScreen_admin/src/views/materialContent/materialList/index.vue

<template>
  <div>
    <div class="material_content">
      <div class="material_item cont_upload">
        <el-button class="cont_upload_btn" round type="primary">上传</el-button>
        <el-button class="mkdir_btn" round type="primary" @click="handleMkdir">创建文件夹</el-button>
      </div>
      <div class="material_item folder">
        <div class="icon_bg">
          <svg class="font-icon icon" aria-hidden="true">
            <use xlink:href="#icon-wenjianjia" />
          </svg>
          <img src />
        </div>
        <p class="file_name">文件夹</p>
      </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">{{ item.type }}</span>
          <span v-if="item.type !== 'JPG'" class="item_time">03:00</span>
        </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 / 编辑 -->
    <div class="publish_layer">
      <el-dialog
        :title="layerTitle"
        :close-on-click-modal="false"
        :visible.sync="mkdirVisible"
        width="616px"
        height="384px"
      >
        <el-form ref="form" :inline="true" :model="form" size="small" label-width="100px">
          <el-form-item
            :label="labelTxt"
            prop="name"
            :rules="[
              { required: true, message: '请输入名称', trigger: 'blur' }
            ]"
          >
            <el-input v-model="form.name" style="width: 336px" />
          </el-form-item>
          <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 />
              <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 round @click="crud.cancelCU">关闭</el-button>
        </div>
      </el-dialog>
    </div>

    <!-- 上传列表layer -->
    <div class="upload_layer">
      <!-- width="736px" -->
      <el-dialog
        title="上传列表"
        :close-on-click-modal="false"
        :visible.sync="uploadListVisible"
        height="384px"
      >
        <!-- :status="percentage === 100 ? undefined : 'success'" -->
        <el-table :data="uploadData" :header-cell-style="{ color: '#333' }">
          <el-table-column align="center" prop="name" label="文件名" />
          <el-table-column align="center" prop="type" label="类型" />
          <el-table-column align="center" prop="size" label="大小" />
          <el-table-column align="center" prop="status" label="状态">
            <template>
              <div v-if="progressLoading" class="loadingModal" :style="{ 'height': '100%' }">
                <el-progress
                  :stroke-width="6"
                  :percentage="percentage"
                  :color="colors"
                  :format="format"
                />
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="handle" label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                round
                class="on_off_btn"
                @click="end(scope.$index, scope.row)"
              >{{ loading_txt }}</el-button>
              <el-button
                type="info"
                round
                class="upload_delt"
                @click="handleRecord(scope.$index, scope.row)"
              >删除</el-button>
            </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>
</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
}
export default {
  name: 'MaterialList',
  components: {},
  cruds() {
    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 {
      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
      uploadData: [
        {
          id: '1',
          name: '文件夹1',
          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'
        }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  watch: {
    isMultiSelected(newName, oldName) {
      if (newName === false) {
        this.contentIds = []
      }
    }
  },
  mounted: function() {
    this.start()
  },
  methods: {
    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)) {
        // 判断数组中是否有选中的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}%`
    },
    start() {
      const that = this
      that.$nextTick(() => {
        that.progressLoading = true
        that.percentage = 0
        that.timeStart = setInterval(() => {
          if (that.percentage < 100) {
            that.percentage += 1
          }
        }, 100)
      })
    },
    // 进度条结束
    end() {
      this.loading_txt = '继续'
      // const that = this
      // that.percentage = 100
      clearInterval(this.timeStart)
      // setTimeout(() => {
      //   that.progressLoading = false
      // }, 300)
    }
    // handleRemove(file) {
    //   console.log(file)
    // },
    // handlePictureCardPreview(file) {
    //   this.dialogImageUrl = file.url
    //   this.dialogVisible = true
    // },
    // handleDownload(file) {
    //   console.log(file)
    // }
  }
}
</script>

<style lang="scss" scoped>
.material_content {
  display: flex;
  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;
    justify-content: center;
    align-content: center;
    border: 1px dashed #dcdde3;
    background: #f2f7ff;
    .el-button {
      display: block;
      width: 114px;
      height: 34px;
      padding: 0;
      font-size: 14px;
      border: none;
    }
    .cont_upload_btn {
      background: linear-gradient(to right, #fc8c6f, #fa544e) !important;
    }
    .mkdir_btn {
      margin-left: 0;
      margin-top: 16px;
    }
  }

  .folder {
    border: 1px solid #dcdde3;
    .icon_bg {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 148px;
      background: #fff5dd;
      .icon {
        width: 104px;
        height: 89px;
      }
    }
  }

  .item_cont {
    border-color: #dcdde3;
    img {
      width: 100%;
      height: 148px;
    }
    .radio_img {
      width: 100%;
      height: 148px;
    }
  }
}
::v-deep .el-table {
  .el-button {
    padding: 0 10px;
    height: 24px;
    &.upload_delt {
      background-color: #f76b6b;
    }
  }
}
::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;
}
.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>