From bcac500a760877dc9140f1f381739793706c1af6 Mon Sep 17 00:00:00 2001 From: feige <feige@qq.com> Date: 星期五, 10 十一月 2023 10:29:38 +0800 Subject: [PATCH] 修改图片大小 --- ruoyi-ui/src/views/travel/travelInfo.vue | 172 +++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 113 insertions(+), 59 deletions(-) diff --git a/ruoyi-ui/src/views/travel/travelInfo.vue b/ruoyi-ui/src/views/travel/travelInfo.vue index 2b38dcd..a8908ae 100644 --- a/ruoyi-ui/src/views/travel/travelInfo.vue +++ b/ruoyi-ui/src/views/travel/travelInfo.vue @@ -1,31 +1,62 @@ <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> </div> <div > <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px" style="width: 60%;"> - <el-form-item label="鍙戠敓鏃堕棿" prop="happenTime"> - <el-input v-model="formData.happenTime" placeholder="璇疯緭鍏ュ彂鐢熸椂闂�" clearable :style="{width: '100%'}" :disabled="dsb"> - </el-input> + <el-form-item label="鍙戠敓鏃堕棿" prop="happenDate"> + <el-date-picker v-model="formData.happenDate" 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="address"> <el-input v-model="formData.address" placeholder="璇疯緭鍏ュ湴鐐�" clearable :style="{width: '100%'}" :disabled="dsb"> </el-input> </el-form-item> - <el-form-item label="浜虹墿" prop="people"> - <el-input v-model="formData.people" placeholder="璇疯緭鍏ヤ汉鐗�" clearable :style="{width: '100%'}" :disabled="dsb"> + <el-form-item label="寤虹瓚" prop="scenic"> + <el-input v-model="formData.scenic" placeholder="璇疯緭鍏ュ缓绛�" clearable :style="{width: '100%'}" :disabled="dsb"></el-input> + </el-form-item> + + + <el-form-item label="闂ㄧエ" prop="entrance"> + <el-input v-model="formData.entrance" placeholder="璇疯緭鍏ラ棬绁�" type="number" clearable :style="{width: '100%'}" :disabled="dsb"> </el-input> </el-form-item> - <el-form-item label="鏍囬" prop="title"> - <el-input v-model="formData.title" placeholder="璇疯緭鍏ユ爣棰�" clearable :style="{width: '100%'}" :disabled="dsb"></el-input> + <el-form-item label="浣忓閰掑簵" prop="hotel"> + <el-input v-model="formData.hotel" placeholder="璇疯緭鍏ヤ綇瀹块厭搴�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> </el-form-item> - <el-form-item label="鏃呮湡" prop="travelPeriod"> - <el-input v-model="formData.travelPeriod" placeholder="璇疯緭鍏ユ爣棰�" clearable :style="{width: '100%'}" :disabled="dsb"></el-input> + <el-form-item label="浣忓璐圭敤" prop="stay"> + <el-input v-model="formData.stay" placeholder="璇疯緭鍏ュ湴鐐�" type="number" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + <el-form-item label="椁愯垂" prop="eat"> + <el-input v-model="formData.eat" placeholder="璇疯緭鍏ュ湴鐐�" type="number" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + <el-form-item label="浜ら�氳垂" prop="travel"> + <el-input v-model="formData.travel" placeholder="璇疯緭鍏ヤ氦閫氳垂" type="number" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> </el-form-item> - <el-form-item label="鎸佽瘉鏃呮父" prop="certificate"> - <el-select v-model="formData.certificate" placeholder="璇烽�夋嫨璇佷欢" clearable :style="{width: '100%'}" :disabled="dsb"> + <el-form-item label="鍑鸿鏂瑰紡" prop="travelMode"> + <el-input v-model="formData.travelMode" placeholder="璇疯緭鍏ュ湴鐐�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + <el-form-item label="杞︽/鑸彮" prop="flight"> + <el-input v-model="formData.flight" placeholder="璇疯緭鍏ュ湴鐐�" clearable :style="{width: '100%'}" :disabled="dsb"> + </el-input> + </el-form-item> + <el-form-item label="鎸佽瘉鏃呮父" prop="document"> + <el-select v-model="formData.document" placeholder="璇烽�夋嫨璇佷欢" clearable :style="{width: '100%'}" :disabled="dsb"> <el-option label="灞呮皯韬唤璇�" value="灞呮皯韬唤璇�"></el-option> <el-option label="涓存椂韬唤璇�" value="涓存椂韬唤璇�"></el-option> <el-option label="鎴峰彛鏈�" value="鎴峰彛鏈�"></el-option> @@ -33,20 +64,10 @@ <el-option label="瀛︾敓璇�" value="瀛︾敓璇�"></el-option> </el-select> </el-form-item> - <el-form-item label="璐圭敤" prop="totalPrice"> - <el-input v-model="formData.totalPrice" placeholder="璇疯緭鍏ユ爣棰�" clearable :style="{width: '100%'}" :disabled="true"></el-input> - </el-form-item> - <el-form-item label="鏄惁鍏垂鏃呮父" prop="self"> - <el-select v-model="formData.self" placeholder="璇烽�夋嫨鏄惁" clearable :style="{width: '100%'}" :disabled="dsb"> - <el-option label="鏄�" value="1"></el-option> - <el-option label="鍚�" value="0"></el-option> - </el-select> - </el-form-item> - - <el-form-item label="澶囨敞" prop="remark"> - <el-input v-model="formData.remark" placeholder="璇疯緭鍏ュ娉�" clearable :style="{width: '100%'}" :disabled="dsb"></el-input> - </el-form-item> +<!-- <el-form-item label="澶囨敞" prop="remark">--> +<!-- <el-input v-model="formData.remark" placeholder="璇疯緭鍏ュ娉�" clearable :style="{width: '100%'}" :disabled="dsb"></el-input>--> +<!-- </el-form-item>--> <h4 class="form-header">鐢靛瓙鏂囦欢 </h4> @@ -56,6 +77,8 @@ multiple :http-request="requestUpload" :file-list="fileList" + :disabled="!btn" + :class="{ hide: !btn }" > <div v-if="uploading" class="upload-status">姝e湪涓婁紶...</div> <i v-if="!uploading" slot="default" class="el-icon-plus"></i> @@ -107,41 +130,50 @@ :on-remove="handleRemoveFile" :http-request="requestUpload" :show-file-list="true" + :disabled="!btn" + :class="{ hide: !btn }" > <div v-if="uploading" class="upload-status">姝e湪涓婁紶...</div> <i v-if="!uploading" 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="../../assets/401_images/401.gif" - alt="" + :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%" + fit="cover"> + <span class="el-upload-list__item-actions"> - <span + <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 - class="el-upload-list__item-preview" - @click="handleFileCardPreview(file)" - > - <i class="el-icon-zoom-in"></i> - </span> - <span - - class="el-upload-list__item-delete" - @click="handleDownload(file.url)" - > + 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="handleRemoveFile(file)" - > - <i class="el-icon-delete"></i> - </span> - </span> - + <span + v-if="isShow" + class="el-upload-list__item-delete" + @click="handleRemoveFile(file)" + > + <i class="el-icon-delete"></i> + </span> + </span> </div> @@ -154,7 +186,7 @@ </el-form> </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> </div> </template> @@ -187,19 +219,25 @@ formData: { id: undefined, - title: undefined, + happenDate:undefined, + entrance:undefined, + hotel: undefined, people: undefined, address: undefined, remark: undefined, + travelMode:undefined, + stay:undefined, + flight:undefined, + document:undefined, url: undefined, }, dialogImageUrl: '', dialogVisible: false, disabled: false, rules: { - title: [{ - required: true, - message: '璇疯緭鍏ュぇ浜嬫爣棰�', + flight: [{ + // required: true, + message: '璇疯緭鍏ヨ溅娆�/鑸彮', trigger: 'blur' }], familyId: [{ @@ -245,6 +283,7 @@ document.title = "鏃呮父缁忓巻璇︾粏淇℃伅"; this.$route.meta.title = "鏃呮父缁忓巻璇︾粏淇℃伅";//鍒楄〃鐨勫悕绉� this.isShow=true + this.btn = false; } let _this = this @@ -283,8 +322,10 @@ let uls = this.fileListOther.map(function (elem){ return elem.url.replace(process.env.VUE_APP_BASE_TRUE_API,"") }).join(",") + this.formData.id = this.$route.params && this.$route.params.id; this.formData.url = ul+","+uls + console.log(this.formData) this.$refs['elForm'].validate(valid => { @@ -335,9 +376,16 @@ }, handleFileCardPreview(file){ this.dialogFileUrl = file.url; + // alert(file.url) + // this.dialogFileUrl = 'https://www.bendudu.com:8080/profile/upload/2023/10/18/20231018214647A011.doc' + // this.dialogFileUrl = 'https://47.93.189.255:8080/profile/upload/2023/03/19/test7_20230319222030A007.jpg' + if(this.dialogFileUrl.includes("47.93.189.255")==true) + this.dialogFileUrl = this.dialogFileUrl.replace("47.93.189.255","www.bendudu.com") + //alert(this.dialogFileUrl) 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; @@ -359,7 +407,7 @@ handleEdit() { this.dsb = false - // this.btn = true + this.btn = true this.isShow=false }, requestUpload(params) @@ -417,4 +465,10 @@ display: block; position: absolute; } +.hide .el-upload--picture-card { + display: none; +} +.form{ + background:center/11% no-repeat url('../../assets/icons/form.png') ; +} </style> -- Gitblit v1.9.1