feat(设备定义):

luoyb

2021-06-03 36c84173ee2638aff47a3ed42cd22db8092ea133

 src/views/yunpan/uploadfj.vue

@@ -32,29 +32,29 @@
          >
            <span
              style="position: relative; top: -5px;"
              @click="clickTimeline(index, activity.id)"
              @click="clickTimeline(index)"
            >
              {{ activity.timestamp }}</span>
          </el-timeline-item>
        </el-timeline>
      </el-aside>
      <el-container>
      <el-container style="height: 88vh;">
        <el-header class="text-header">
          <el-row><el-col :span="24">
            <i
              class="el-icon-bell"
              style=" color: #a32c30; margin-right: 10px;"
            />提示：文件不要超过10个，单个文件大小不超过50M，单击或者拖动文件到下面区域，支持单个或批量文件的上传。</el-col>
              style="color: #a32c30; margin-right: 10px;"
            />提示：文件不要超过10个，单个文件大小不超过100M，单击或者拖动文件到下面区域，支持单个或批量文件的上传。</el-col>
          </el-row>
          <el-row style="background-color: rgba(0,0,0,0.2);">
            <el-col :span="14">
            <el-col :span="16">
              <el-checkbox
                v-model="checkAll"
                class="myRedCheckBox"
                style="color: #000; margin-left: 20px;"
                @change="checkAllMethods()"
              >全选</el-checkbox></el-col>
            <el-col :span="10">
            <el-col :span="8">
              <el-button
                type="primary"
                icon="el-icon-download"
@@ -63,15 +63,15 @@
              >下载</el-button>
              <el-button
                type="primary"
                class="pri-del-btn"
                icon="el-icon-search"
                size="mini"
                @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" type="danger">转存</el-button>
              </el-popconfirm>
              <el-button type="warning" @click="openUpdateFileName()">重命名</el-button>
              <el-button type="primary" @click="downloaddialogFormVisible = true">查看</el-button>
            </el-col>
          </el-row>
        </el-header>
@@ -121,18 +121,35 @@
        <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.accessoryid" :span="3">
                <el-card
                  shadow="never"
                >
                  <img
                  <el-image
                    v-if="'tif,bmp,jpg,png,gif'.indexOf(node.filesformat) == -1"
                    :src="showFileImg(node.filesformat)"
                    class="uploading-image"
                    @click="clickCard(index * 8 + nodeIndex)"
                  >
                  <el-tooltip class="item" effect="dark" :content="node.filesname" placement="bottom">
                    <div style="padding-top: 14px;">
                    :preview-src-list="srcList"
                    @click="clickImg(node)"
                  />
                  <el-tooltip v-if="'tif,bmp,jpg,png,gif'.indexOf(node.filesformat) == -1" class="item" effect="dark" :content="node.filesname" placement="bottom">
                    <div style="padding-top: 14px;text-align: center">
                      <el-checkbox v-model="checkedArr[index * 8 + nodeIndex].isChecked" class="myRedCheckBox">{{ node.filesname }}</el-checkbox>
                    </div>
                  </el-tooltip>
                  <el-tooltip v-if="'tif,bmp,jpg,png,gif'.indexOf(node.filesformat) != -1" class="item" effect="dark" :content="node.filesname" placement="bottom">
                    <div style="padding-top: 14px;">
                      <el-image
                        style="width: 100px; height: 80px;margin-top: -10px;"
                        :src="getImg+node.accessoryid"
                        :preview-src-list="srcList"
                        @click="clickImg(node)"
                      />
                      <br>
                      <el-checkbox v-model="checkedArr[index * 8 + nodeIndex].isChecked" class="myRedCheckBox">

                        {{ node.filesname }}
                      </el-checkbox>
                    </div>
                  </el-tooltip>
                </el-card>
@@ -174,10 +191,16 @@
    rowitem: {
      type: Object,
      required: true
    },
    tableindex: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      srcList: [],
      getImg: pages.getAccessoryImage,
      updateFileNameFormVisible: false,
      file: {
        fileName: ''
@@ -186,7 +209,7 @@
        labelid: [{ required: true, message: '请选择标签', trigger: 'change' }],
        fileName: [
          { required: true, message: '请输入文件名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 20 个字符', trigger: 'blur' }
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ]
      },
      mvdialogFormVisible: false,
@@ -211,13 +234,21 @@
  },
  mounted() {
    this.initlabel()
    setTimeout(() => {
      this.clickTimeline(this.tableindex)
    }, 1500)
  },
  methods: {
    clickImg(node) {
      this.srcList = []
      if ('tif,bmp,jpg,png,gif'.indexOf(node.filesformat) >= 0) {
        this.srcList.push(this.getImg + node.accessoryid)
      }
    },
    updateFileName(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var checke = ''
          debugger
          this.checkedArr.forEach((v, i) => {
            if (v.isChecked) {
              checke = v.accessoryid
@@ -319,7 +350,7 @@
        }
      })
    },
    clickTimeline(index, id) {
    clickTimeline(index) {
      // 不这样操作的不会响应式更新
      // 赋值到新的列表
      var list = this.activities
@@ -362,6 +393,10 @@
    },
    showFileImg(type) {
      switch (type) {
        case 'xls':
          return require('../../assets/uploading/xls.png')
        case 'xlsx':
          return require('../../assets/uploading/xls.png')
        case 'txt':
          return require('../../assets/uploading/txt.png')
        case 'apk':
@@ -418,9 +453,9 @@
    },
    beforeAvatarUpload(file) {
      this.fileDate.labelid = this.activities[this.beforeIndex].id
      const isLt50M = file.size / 1024 / 1024 < 50
      const isLt50M = file.size / 1024 / 1024 < 100
      if (!isLt50M) {
        this.$message.error('上传文件不能超过 50MB!')
        this.$message.error('上传文件不能超过 100MB!')
      }
      return isLt50M
    },
@@ -602,8 +637,8 @@
      }
   }
   .add-folder-but {
      background: #fff !important;
      color: #a32c30 !important;
      background: #a32c30 !important;
      color: #fff !important;
      margin-bottom: 20px;
   }
   padding: 0 15px 0 15px;
@@ -611,8 +646,8 @@
      line-height: 60px;
   }
   .uploading-image {
      width: 60%;
      height: 60%;
      width: 45%;
      height: 45%;
      display: block;
    margin: 0 auto;
   }
@@ -652,10 +687,12 @@
   border-color: #a32c30;
}
.myRedCheckBox .el-checkbox__label {
  width: 90%;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.myRedCheckBox .el-checkbox__input {
  vertical-align: text-top;
}

.avatar-uploader .el-upload {
@@ -689,6 +726,11 @@
   width: 100px;
   height: 100px;
}

.el-image .el-image-viewer__mask {
  background-color: #fff !important;
  opacity: 1;
}
</style>
<style lang="scss" scoped>
.el-main {
@@ -713,4 +755,9 @@
.el-input-number {
   width: 100%;
}
.pri-del-btn {
  background-color: rgb(64, 158, 255);
  border-color: rgb(64, 158, 255);
}

</style>