修改云盘智搜-附件管理,基础界面

yz_08

2021-02-24 3ca12c43a0cb1680e2508ca2d16bd207e29cb5c1

 src/views/yunpan/zhishou.vue

@@ -78,17 +78,17 @@
            <i
              class="el-icon-bell"
              style=" color: #a32c30; margin-right: 10px;"
            />提示：文件不要超过10个，单个文件大小不超过50M，单击或者拖动文件到下面区域，支持单个或批量文件的上传。</el-col>
            />提示：文件不要超过10个，单个文件大小不超过200M，单击或者拖动文件到下面区域，支持单个或批量文件的上传。</el-col>
          </el-row>
          <el-row style="background-color: rgba(0,0,0,0.2);">
            <el-col :span="19">
            <el-col :span="17">
              <el-checkbox
                v-model="checkAll"
                class="myRedCheckBox"
                style="color: #000; margin-left: 20px;"
                @change="checkAllMethods()"
              >全选</el-checkbox></el-col>
            <el-col :span="5">
            <el-col :span="7">
              <el-button
                type="primary"
                icon="el-icon-download"
@@ -102,7 +102,7 @@
                @click="delFile()"
              >删除</el-button>
              <el-popconfirm title="是否移动文件？" @onConfirm="mvdialogFormVisible = true">
                <el-button slot="reference" class="hr-but" type="danger">转存</el-button>
                <el-button slot="reference" class="hr-but" type="danger">移动</el-button>
              </el-popconfirm>
            </el-col>
          </el-row>
@@ -140,21 +140,23 @@
        <el-main style="background-color: #fff;">
          <el-row v-for="(data, index) in filesUploadData" :key="index">
            <template v-for="(node, nodeIndex) in data.node">
              <el-col v-if="node.isUpload === false" :key="node.filesid" :span="3">
              <el-col v-if="node.isUpload === false" :key="node.filesid" :span="2">
                <el-card
                  shadow="never"
                  @click.native="clickCard(index * 8 + nodeIndex)"
                >
                  <img
                    :src="showFileImg(node.filesformat)"
                    class="uploading-image"
                    @click="clickCard(index * rowCount + nodeIndex)"
                  >
                  <div style="padding-top: 14px;">
                    <el-checkbox v-model="checkedArr[index * 8 + nodeIndex].isChecked" class="myRedCheckBox">{{ node.filesname }}</el-checkbox>
                  </div>
                  <el-tooltip class="item" effect="dark" :content="node.filesname" placement="bottom">
                    <div style="padding-top: 14px;">
                      <el-checkbox v-model="checkedArr[index * rowCount + nodeIndex].isChecked" class="myRedCheckBox">{{ node.filesname }}</el-checkbox>
                    </div>
                  </el-tooltip>
                </el-card>
              </el-col>
              <el-col v-if="node.isUpload" :key="node.filesid" :span="3">
              <el-col v-if="node.isUpload" :key="node.filesid" :span="2">
                <el-card shadow="never">
                  <el-upload
                    class="avatar-uploader"
@@ -166,7 +168,7 @@
                    :on-success="handleAvatarSuccess"
                    :on-error="handleAvatarError"
                    :multiple="true"
                    :limit="10"
                    :limit="20"
                    drag
                  >
                    <i class="el-icon-upload" />
@@ -188,6 +190,7 @@
export default {
  data() {
    return {
      rowCount: 12,
      mvrules: {
        folderid: [{ required: true, message: '请选择目录', trigger: 'change' }]
      },
@@ -252,8 +255,8 @@
      this.$get('hr/filesUpload', { ...params }).then(r => {
        r.data.data.forEach((v, i) => {
          this.checkedArr.push({ isChecked: false, filesid: v.filesid })
          // 一行8个 等于8就换行
          if (i % 8 === 0 && i !== 0) {
          // 一行12个 等于12就换行
          if (i % this.rowCount === 0 && i !== 0) {
            this.filesUploadData.push(node)
            node = { node: [] }
          }
@@ -270,8 +273,8 @@
        if (this.filesUploadData.length === 0) {
          this.filesUploadData.push({ node: [{ isUpload: true }] })
        } else {
          // 如果不为空,但是这一行刚好满8个了,就将数组,新增一个对象
          if (this.filesUploadData[this.filesUploadData.length - 1].node.length === 8) {
          // 如果不为空,但是这一行刚好满12个了,就将数组,新增一个对象
          if (this.filesUploadData[this.filesUploadData.length - 1].node.length === this.rowCount) {
            this.filesUploadData.push({ node: [{ isUpload: true }] })
          } else {
            // 新增一个上传
@@ -635,25 +638,35 @@
.myRedCheckBox .el-checkbox__inner:hover {
   border-color: #a32c30;
}

.avatar-uploader .el-upload {
   border: 1px dashed #d9d9d9;
   border-radius: 6px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
.avatar-uploader{
  .el-upload-dragger{
    width: 65px !important;
    height: 65px !important;
    .el-icon-upload{
      font-size: 40px;
      color: #8c939d;
      line-height: 30px;
    }
  }
}
.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-uploader .el-upload {
//    border: 1px dashed #d9d9d9;
//    border-radius: 6px;
//    cursor: pointer;
//    position: relative;
//    overflow: hidden;
// }
// .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;