修改图片大小

feige

2023-11-10 bcac500a760877dc9140f1f381739793706c1af6

 ruoyi-ui/src/views/honor/index.vue

@@ -98,7 +98,7 @@
            v-hasPermi="['family:note:export']"
          >导入模板下载</el-button>
        </el-col>
        <el-col :span="1.2">
        <el-col :span="1.5">

          <el-upload
            action=""
@@ -109,7 +109,7 @@
          >
            <el-button size="mini"   type="primary"
                       plain
                       icon="el-icon-plus" >导入</el-button>
                       icon="el-icon-top" >导入</el-button>

          </el-upload>
        </el-col>
@@ -124,22 +124,22 @@
        <template slot-scope="scope">{{scope.row.type? scope.row.type: '————'}}</template>
<!--        <template slot-scope="scope">{{ getSrc1(scope.row.type) }}</template>-->
      </el-table-column>
      <el-table-column label="名称" prop="name" sortable  width="120" align="center" >
      <el-table-column label="名称" prop="name" sortable :show-overflow-tooltip="true"  width="120" align="center" >
        <template slot-scope="scope">{{scope.row.name? scope.row.name: '————'}}</template>
      </el-table-column>
      <el-table-column label="证号/专业" prop="idNo" sortable width="170" align="center" >
      <el-table-column label="证号/专业" prop="idNo" sortable :show-overflow-tooltip="true" width="170" align="center" >
        <template slot-scope="scope">{{scope.row.idNo? scope.row.idNo: '————'}}</template>
      </el-table-column>
      <el-table-column label="级别" prop="grade" sortable width="120" align="center">
      <el-table-column label="级别" prop="grade" sortable :show-overflow-tooltip="true" width="120" align="center">
        <template slot-scope="scope">{{scope.row.grade? scope.row.grade: '————'}}</template>
      </el-table-column>
      <el-table-column label="有效时间" prop="validityDate" sortable width="170" align="center" >
      <el-table-column label="有效时间" prop="validityDate" :show-overflow-tooltip="true" sortable width="170" align="center" >
        <template slot-scope="scope">{{scope.row.validityDate? scope.row.validityDate: '————'}}</template>
      </el-table-column>
      <el-table-column label="获得时间" prop="getDate" sortable width="170" align="center" >
      <el-table-column label="获得时间" prop="getDate" sortable :show-overflow-tooltip="true" width="170" align="center" >
        <template slot-scope="scope">{{scope.row.getDate? scope.row.getDate: '————'}}</template>
      </el-table-column>
      <el-table-column label="存放位置" prop="location" sortable width="170" align="center" >
      <el-table-column label="存放位置" prop="location" sortable :show-overflow-tooltip="true" width="170" align="center" >
        <template slot-scope="scope">{{scope.row.location? scope.row.location: '————'}}</template>
      </el-table-column>
      <el-table-column label="电子文件" prop="url" width="160" align="center">
@@ -168,29 +168,32 @@
        <template slot-scope="scope">{{scope.row.remark? scope.row.remark: '————'}}</template>
      </el-table-column>
      <!--      </el-table-column>-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
      <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width">
        <template slot-scope="scope" v-if="scope.row.roleId !== 1">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:role:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:role:remove']"
          >删除</el-button>

          <el-button
            size="mini"
            type="text"
            icon="el-icon-d-arrow-right"
            @click="handleCheck(scope.row)">
            查看详情</el-button>
          <div class="button-container">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['system:role:edit']"
            >
              <span style="font-size: 14px;">修改</span>
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['system:role:remove']"
            ><span style="font-size: 14px;">删除</span></el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-d-arrow-right"
              @click="handleCheck(scope.row)">
              <span style="font-size: 14px;">查看详情</span></el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
@@ -252,21 +255,24 @@
        <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"
        >
         <i  slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
              style="width: 126px; height: 126px"
              fit="cover"
              :preview-src-list="[file.url]"
            >
          <div slot="file" slot-scope="{ file }">
            <template v-if="fileList">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
                style="width: 100%; height: 100%; object-fit: cover;"
                fit="cover"
                :preview-src-list="[file.url]"
              >
            </template>
            <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
@@ -295,11 +301,11 @@
          multiple

          :on-remove="handleRemoveFile"
          :http-request="requestUpload"
          :http-request="requestUpload1"
          :show-file-list="true"
        >
          <el-button type="primary">点击上传</el-button>
          <div v-if="uploading" class="upload-status">正在上传...</div>
          <div v-if="uploading1" class="upload-status">正在上传...</div>
          <template #tip>
            <div class="el-upload__tip">
            </div>
@@ -377,6 +383,7 @@
      btn:false,
      fit:['fill'],
      uploading: false,
      uploading1: false,
      formDat: {
        //荣誉证书记录
        id:undefined,
@@ -516,7 +523,6 @@
      );
      listType(this.queryParams).then(response => {
          this.typeList = response.data;
          this.total = response.data.total;
          // console.log( this.typeList )
          // 在回调函数中调用 getTypeOptions()
          this.getTypeOptions();
@@ -541,21 +547,6 @@
      }, []);

    },
    /** 查询类别信息 */
    // 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]})
    //     response.data.itemValues.replace("{", "").replace("}", "").split(",").map(elem => {
    //       const label = elem.split(":")[0].trim();
    //       const value = parseInt(elem.split(":")[1].trim());
    //       _this.typeOptions.push({ "label": label, "value": value });
    //     })
    //   })
    // },
    //类别选择
    getSrc1(type){
      if(type===0){
@@ -716,21 +707,21 @@
          addHonor(this.formDat).then(response => {
            this.$modal.msgSuccess("新增成功");
            this.open = false;
            // 清空formDat对象的数据
            Object.keys(this.formDat).forEach(key => {
              this.formDat[key] = '';
            });
            for(let i = 0; i <= this.fileList.length; i++)
            {
              this.handleRemove(this.fileList[0]);
            }
            for(let i = 0; i < this.fileListOther.length; i++){
              this.handleRemoveFile(this.fileListOther[0]);
            }
            this.getList();
          });
        }
      });
      // 清空formDat对象的数据
      Object.keys(this.formDat).forEach(key => {
        this.formDat[key] = '';
      });
      for(let i = 0; i <= this.fileList.length; i++)
      {
        this.handleRemove(this.fileList[0]);
      }
      for(let i = 0; i < this.fileListOther.length; i++){
        this.handleRemoveFile(this.fileListOther[0]);
      }
    },
    requestUpload(params)
    {
@@ -746,15 +737,25 @@
        if(_this.fot.includes(pth) === true)
        {
          _this.fileList.push({name:response.data.fileName, "url":response.data.url})

        }

        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.fileListOther.push({name:response.data.fileName, url:response.data.url})
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
@@ -825,6 +826,11 @@
  background: #FFEFF2;

}

.el-table__cell {
  font-size: 14px; /* 设置字体大小 */
}
.button-container {
  display: inline-flex; /* 设置按钮容器为行内元素 */
}

</style>