feige
2023-12-07 ad5eea58d5ac15dd08ff51658d717984d098f81e
ruoyi-ui/src/views/collection/collectionInfo.vue
@@ -1,7 +1,15 @@
<template>
  <div class="app-container">
  <div class="app-container" id="printable-content">
    <div class="form-header mt">
      <h4 class="dt h4">收藏与荣誉详细信息 </h4>
      <h1 style="font-size:21px;padding-top:30px;display: flex;justify-content: space-between;align-items: center;" >
        <span>收藏与荣誉详细信息</span>
        <div style="display: flex; align-items: center;">
        <el-button size="mini" type="text"  v-print="'#printable-content'" v-hasPermi="['person:information:memo']">
        <div class="form" ><el-icon  style="padding-right:100px;"></el-icon>
          <span class="text" style="width: 69px;height: 26px;font-size: 16px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei; color: #EBA4AA;">打印</span></div>
      </el-button></div>
      </h1>
<!--      <el-button v-if="isShow" type="primary" class="pt"  icon="el-icon-edit" @click="handleEdit()" >编辑</el-button>-->
      <!--      <br>-->
      <!--      <el-button type="primary" class="pt"   @click="handleExport"-->
@@ -15,70 +23,74 @@
      <!--      </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-input v-model="formData.happenTime" placeholder="请输入获得时间" clearable :style="{width: '100%'}" :disabled="dsb">
                </el-input>
                <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-form-item label="获得时间" prop="happenTime" label-width="78px" style="background: #FAD1E0;border-radius: 7px 7px 7px 7px;opacity: 1;">-->
<!--                 <el-date-picker v-model='formData.happenTime' type='date' placeholder='请选择日期'></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%'}"  >
                 <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"
                   ></el-option>
                 </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>
          <h4 class="form-header">电子文件 </h4>
          <h4 class="form-header">相关图片 </h4>
          <el-upload
            action="#"
            accept="image/jpeg, image/png,image/jpg, image/WMF,image/gif"
            list-type="picture-card"
            multiple
            :http-request="requestUpload"
            :file-list="fileList"
            :disabled="!btn"
            :class="{ hide: !btn }"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div v-if="uploading" class="upload-status">正在上传...</div>
            <i v-if="!uploading" slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img
                class="el-upload-list__item-thumbnail"
@@ -89,53 +101,33 @@
                :preview-src-list="[file.url]"
              >
              <span class="el-upload-list__item-actions" >
            <span
              v-if="isShow"
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <i class="el-icon-zoom-in"></i>
            </span>
            <span
              v-if="isShow"
              class="el-upload-list__item-delete"
              @click="handleDownload(file.url)"
            >
              <i class="el-icon-download"></i>
            </span>
            <span
              v-if="isShow"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <i class="el-icon-delete"></i>
            </span>
          </span>
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file.url)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="isShow"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <!--<h4 class="form-header">其他附件 </h4>
          <el-upload
            action=""
            :file-list="fileListOther"
            class="upload-demo"
            multiple
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :http-request="requestUpload"
            :show-file-list="true"
          >
            <el-button v-if="isShow" type="primary" >点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
              </div>
            </template>
          </el-upload>-->
          <h4 class="form-header">其他附件 </h4>
          <el-upload
            action=""
@@ -144,35 +136,46 @@
            multiple
            list-type="picture-card"
            :on-preview="handleFileCardPreview"
            :on-remove="handleRemove"
            :http-request="requestUpload"
            :on-remove="handleRemoveFile"
            :http-request="requestUpload1"
            :show-file-list="true"
            :disabled="!btn"
            :class="{ hide: !btn }"
          >
            <i slot="default" class="el-icon-plus"></i>
            <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: 147px; height: 147px"
                fit="cover"
              >
                fit="cover">
              <span class="el-upload-list__item-actions">
                    <span v-if="isShow"
               <span class="el-upload-list__item-name">{{ file.name }}</span>
                    <span
                      class="el-upload-list__item-preview"
                      @click="handleFileCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span
                      v-if="isShow"
                      @click="handleRemove(file)"
                      class="el-upload-list__item-delete"
                      class="el-upload-list__item-delete"
                      @click="handleDownload(file.url)"
                    >
                      <i class="el-icon-download"></i>
                    </span>
                 <i class="el-icon-download"></i>
                 </span>
                    <span
                      v-if="isShow"
                      class="el-upload-list__item-delete"
@@ -180,8 +183,7 @@
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
              </span>
            </div>
@@ -195,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>
@@ -207,7 +209,8 @@
import {blobValidate} from "@/utils/ruoyi";
import errorCode from "@/utils/errorCode";
import {Message} from "element-ui";
import {getCollection, updateCollection,download,uploadPic} from "@/api/collection/index";
import {addRole, updateRole} from "@/api/system/role";
import {getCollection, updateCollection,download,uploadPic,listType} from "@/api/collection/index";
export default {
  components: {},
@@ -216,18 +219,20 @@
    return {
      cdi:"收藏与荣誉详细信息",
      udi:"收藏与荣誉信息详情",
      fot:[".jpg",".jif"],
      fileList:[
      ],
      fileListOther:[
      ],
    // 数据范围选项
    fot:['.bmp','.jpg','.jpeg','.png','.tif','.gif','.pcx','.tga','.exif','.fpx',
      '.svg','.psd','.cdr','.pcd','.dxf','.ufo','.eps','.ai','.aw','.WMF','.webp','.apng'],
      fileList:[],
      fileListOther:[],
      dsb:true,
      btn:false,
      isShow:true,
      uploading: false,
      uploading1: false,
      // 收藏与荣誉表格数据
     collectionList: [],
      typeList:[],
      formData: {
        //收藏与荣誉记录
        id:undefined,
@@ -241,6 +246,7 @@
        remark:undefined,
        url: undefined,
      },
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
@@ -288,30 +294,9 @@
        }],
      },
      typeOptions: [
        {
          value: '邮票',
          label: '邮票'
        }, {
          value: '日本军刀',
          label: '日本军刀'
        }, {
          value: '茅台酒',
          label: '茅台酒'
        }, {
          value: '红木',
          label: '红木'
        }, {
          value: '纪念品',
          label: '纪念品'
        }, {
          value: '瓷器',
          label: '瓷器'
        }, {
          value: '书籍',
          label: '书籍'
        }
      ],
      typeOptions: [],
      newOption: undefined,
      showInput: false
    }
  },
  computed: {},
@@ -324,13 +309,16 @@
      jd =  this.$route.query.detail
      this.btn= jd
      this.dsb = !jd
      document.title = "修改收藏与荣誉详细信息";
      this.showInput=true
      this.isShow=true
   //   document.title = "修改收藏与荣誉详细信息";
      this.$route.meta.title = "修改收藏与荣誉详细信息";//列表的名称
    }
    else{
      document.title = "收藏与荣誉详细信息";
    //  document.title = "收藏与荣誉详细信息";
      this.$route.meta.title = "收藏与荣誉详细信息";//列表的名称
      this.isShow=false
      this.btn = false;
    }
    let _this = this
@@ -357,23 +345,46 @@
        }
        this.loading = false;
      });
      listType(this.queryParams).then(response => {
          this.typeList = response.data;
          this.total = response.data.total;
          // console.log( this.typeList )
          // 在回调函数中调用 getTypeOptions()
          this.getTypeOptions();
          this.loading = false;
        }
      );
      // this.getCateInfor()
    }
  },
  mounted() {},
  methods: {
    /** 查询类别信息 */
    // getCateInfor()
    // {
    //   let _this = this
    //   getCategory().then(response=>{
    //
    //     response.data.itemValues.replace("{","").replace("}","").split(",").map(elem=>{
    //       _this.typeOptions.push({"label":elem.split(":")[0], "value":elem.split(":")[0]})
    //     })
    //   })
    // },
    //类别
    addNewOption() {
      const newOption = this.newOption.trim();
      if (newOption && !this.typeOptions.includes(newOption)) {
        this.typeOptions.push(newOption);
        this.$set(this.formData, 'type', newOption); // 更新formDat.type的值为新的选项
      }
    },
    getTypeOptions() {
      const filteredOptions = this.typeList.filter(item => typeof item === 'string' && item !== '');
      // 创建一个空对象用于存储唯一的字符串选项
      const uniqueOptions = {};
      // 构建下拉选项列表
      this.typeOptions = filteredOptions.reduce((options, option) => {
        if (!uniqueOptions[option]) {
          uniqueOptions[option] = true;
          options.push({
            label: option,
            value: option
          });
        }
        return options;
      }, []);
    },
    submitForm() {
      let ul = this.fileList.map(function (elem){
        return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
@@ -425,6 +436,18 @@
      {
        if(this.fileListOther[i].url==file.url)
          this.$delete(this.fileListOther,i);
        let ul = this.fileList.map(function (elem){
          return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
        }).join(",")
        let uls = this.fileListOther.map(function (elem){
          return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
        }).join(",")
        this.formData.url = ul+","+uls;
        updateCollection(this.formData).then(response => {
          this.$modal.msgSuccess("删除成功");
          // this.open = false;
          // this.btn=false
        });
      }
    },
    handleRemove(file) {
@@ -432,13 +455,28 @@
      {
        if(this.fileList[i].url==file.url)
          this.$delete(this.fileList,i);
        let ul = this.fileList.map(function (elem){
          return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
        }).join(",")
        let uls = this.fileListOther.map(function (elem){
          return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
        }).join(",")
        this.formData.url = ul+","+uls;
        updateCollection(this.formData).then(response => {
          this.$modal.msgSuccess("删除成功");
          // this.open = false;
          // this.btn=false
        });
      }
    },
    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;
@@ -460,7 +498,7 @@
    handleEdit()
    {
      this.dsb = false
      // this.btn = true
      this.btn = true
      this.isShow=false
    },
    requestUpload(params)
@@ -469,10 +507,45 @@
      var formData = new FormData();
      formData.append('uploadFile', file);
      let _this = this
      this.uploading = true;
      uploadPic(formData).then(response => {
        let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length)
        this.uploading = false;
        if(_this.fot.includes(pth) === true)
        {
          _this.fileList.push({name:response.data.fileName, "url":response.data.url})
          let ul = this.fileList.map(function (elem){
            return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
          }).join(",")
          let uls = this.fileListOther.map(function (elem){
            return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
          }).join(",")
          this.formData.url = ul+","+uls
          console.log(this.formData.url)
          updateCollection(this.formData).then(response => {
            this.$modal.msgSuccess("图片上传成功");
            // this.open = false;
            // this.btn=false
          });
        }
        else{
          _this.fileListOther.push({name:response.data.fileName, url:response.data.url})
        }
      })
    },
    requestUpload1(params)
    {
      var file = params.file;
      var formData = new FormData();
      formData.append('uploadFile', file);
      let _this = this
      this.uploading1 = true;
      uploadPic(formData).then(response => {
        let pth = response.data.originalFilename.substr(response.data.originalFilename.length-4, response.data.originalFilename.length)
        this.uploading1 = false;
        // this.$modal.msgSuccess("上传成功");
        if(_this.fot.includes(pth) === true)
        {
          _this.fileList.push({name:response.data.fileName, "url":response.data.url})
@@ -481,18 +554,36 @@
        else{
          _this.fileListOther.push({name:response.data.fileName, url:response.data.url})
          let ul = this.fileList.map(function (elem){
            return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
          }).join(",")
          let uls = this.fileListOther.map(function (elem){
            return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"")
          }).join(",")
          this.formData.url = ul+","+uls
          console.log(this.formData.url)
          updateCollection(this.formData).then(response => {
            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
          });
        }
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('/zfCollection/export', {
        ...this.queryParams
      }, `zfCollection_${new Date().getTime()}.xlsx`)
    }
  }
}
@@ -517,10 +608,20 @@
  display: block;
  position: absolute;
}
.hide /deep/ .el-upload--picture-card {
  display: none;
}
.form{
  background:center/11% no-repeat url('../../assets/icons/form.png') ;
}
.form_item{
  font-size: 12px;
  font-family: Microsoft YaHei-Regular, Microsoft YaHei;
  font-weight: 400;
  color: #000000;
}
.el-upload-list__item-name {
  font-size: 14px; /* 调整文件名字的字体大小 */
}
</style>