feige
2023-11-10 bcac500a760877dc9140f1f381739793706c1af6
ruoyi-ui/src/views/collection/collectionInfo.vue
@@ -23,15 +23,15 @@
      <!--      </el-form-item>-->
         <el-container>
           <el-row :span="12">
             <el-cow >
             <el-col >
              <el-form-item label="获得时间" prop="happenTime" label-width="70px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-date-picker v-model="formData.happenTime" type="date" placeholder="请选择日期"
                  :editable="false" :clearable="false" :style="{width: '100%'}" :disabled="dsb" value-format="yyyy-MM-dd"
                ></el-date-picker>
              </el-form-item>
             </el-cow>
             <el-cow >
             </el-col>
             <el-col >
               <el-form-item label="类别" prop="type" label-width="40px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                 <el-select v-model="formData.type" placeholder="请选择类别" clearable :style="{width: '100%'}"   :disabled="dsb">
                   <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label" :value="item.value"
@@ -39,42 +39,42 @@
                 </el-select>
                 <el-input v-model="newOption" v-if="showInput" placeholder="若未在上述选项中找到对应类别,请在此输入新的类别" @change="addNewOption"></el-input>
              </el-form-item>
             </el-cow>
             <el-cow >
             </el-col>
             <el-col >
              <el-form-item label="名称" prop="name" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-input v-model="formData.name" placeholder="请输入名称" clearable :style="{width: '100%'}" :disabled="dsb">
                </el-input>
              </el-form-item>
             </el-cow>
             <el-cow >
             </el-col>
             <el-col >
               <el-form-item label="来源" prop="source" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-input v-model="formData.source" placeholder="请输入来源" clearable :style="{width: '100%'}" :disabled="dsb">
                </el-input>
              </el-form-item>
             </el-cow>
             <el-cow >
             </el-col>
             <el-col >
              <el-form-item label="持有者" prop="owner" label-width="65px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-input v-model="formData.owner" placeholder="请输入持有者" clearable :style="{width: '100%'}" :disabled="dsb">
                </el-input>
              </el-form-item>
             </el-cow>
             <el-cow >
             </el-col>
             <el-col >
               <el-form-item label="价值" prop="price" label-width="50px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-input v-model="formData.price" placeholder="请输入价值" clearable :style="{width: '100%'}" :disabled="dsb">
                </el-input>
              </el-form-item>
             </el-cow>
             <el-cow >
             </el-col>
             <el-col >
              <el-form-item label="存放位置" prop="location" label-width="80px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
                <el-input v-model="formData.location" placeholder="请输入存放位置" clearable :style="{width: '100%'}" :disabled="dsb">
                </el-input>
              </el-form-item>
             </el-cow>
             <el-cow >
             </el-col>
             <el-col >
               <el-form-item label="备注" prop="remark" label-width="45px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">
              <el-input v-model="formData.remark" placeholder="请输入备注" clearable :style="{width: '100%'}" :disabled="dsb"></el-input>
            </el-form-item>
             </el-cow>
             </el-col>
           </el-row>
         </el-container>
@@ -96,7 +96,7 @@
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
                style="width: 100%; height: 100%; object-fit: cover;"
                style="width: 147px; height: 147px"
                fit="cover"
                :preview-src-list="[file.url]"
              >
@@ -146,14 +146,23 @@
            <div v-if="uploading1" class="upload-status">正在上传...</div>
            <i v-if="!uploading1" slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img
              <!-- 添加video元素用于显示视频 -->
              <video
                v-if="file.url.includes('.mp4')"
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                style="width: 147px; height: 147px"
                fit="cover"
              ></video>
              <img v-else
                class="el-upload-list__item-thumbnail"
                src="../../assets/401_images/401.gif"
                alt=""
                style="width: 100%; height: 100%; object-fit: cover;"
                fit="cover"
              >
                style="width: 100%; height: 100%"
                fit="cover">
              <span class="el-upload-list__item-actions">
               <span class="el-upload-list__item-name">{{ file.name }}</span>
                    <span
                      class="el-upload-list__item-preview"
                      @click="handleFileCardPreview(file)"
@@ -174,8 +183,7 @@
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
              </span>
            </div>
@@ -189,7 +197,7 @@
    </div>
        <el-dialog  :visible.sync="dialogVisible">
          <img w-full :src="dialogImageUrl"    style="width: 700px; height: 700px" alt="Preview Image" />
          <img w-full :src="dialogImageUrl"    style="width: 100%; height: 100%" alt="Preview Image" />
        </el-dialog>
@@ -235,7 +243,7 @@
        remark:undefined,
        url: undefined,
      },
      desurl:'',
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
@@ -460,9 +468,12 @@
    },
    handleFileCardPreview(file){
      this.dialogFileUrl = file.url;
      if(this.dialogFileUrl.includes("47.93.189.255")==true)
        this.dialogFileUrl = this.dialogFileUrl.replace("47.93.189.255","www.bendudu.com")
      const Base64 = require('js-base64').Base64
      this.desurl = process.env.VUE_APP_BASE_OTHER_API+'onlinePreview?url='+encodeURIComponent(Base64.encode(this.dialogFileUrl));
      myWindow=window.open(this.desurl,'','width=1200,height=800,top=150,left=300');
      this.desurl = process.env.VUE_APP_BASE_OTHER_API+"preview/"+'onlinePreview?url='+encodeURIComponent(Base64.encode(this.dialogFileUrl));
      let myWindow=window.open(this.desurl,'','width=1200,height=800,top=150,left=300');
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
@@ -549,7 +560,21 @@
          this.formData.url = ul+","+uls
          console.log(this.formData.url)
          updateCollection(this.formData).then(response => {
            this.$modal.msgSuccess("文档上传成功");
            this.$modal.msgSuccess("上传成功");
            const videoElement = document.createElement('video'); // 创建一个新的video元素
            videoElement.src = response.data.url; // 设置video元素的src为视频URL
            // 监听loadedmetadata事件以确保视频元数据加载完成
            videoElement.addEventListener('loadedmetadata', function() {
              const canvas = document.createElement('canvas');// 创建一个canvas元素
              const context = canvas.getContext('2d');
              context.drawImage(videoElement, 0, 0, canvas.width, canvas.height); // 将视频的首帧画面绘制到画布上
              const imageURL = canvas.toDataURL();// 将画布转换为图像URL
              videoElement.setAttribute('poster', imageURL);// 设置视频的封面图像
              // 在页面中显示视频元素
              document.body.appendChild(videoElement);
            });
            // this.open = false;
            // this.btn=false
          });
@@ -592,4 +617,8 @@
  font-weight: 400;
  color: #000000;
}
.el-upload-list__item-name {
  font-size: 14px; /* 调整文件名字的字体大小 */
}
</style>