From 4fabfe4dbd2eb28d07a4350597d314958cc1c281 Mon Sep 17 00:00:00 2001 From: MrShi <1878285526@qq.com> Date: 星期四, 09 十月 2025 11:16:43 +0800 Subject: [PATCH] 优化 --- admin/src/views/business/miniproSetting.vue | 191 +++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 165 insertions(+), 26 deletions(-) diff --git a/admin/src/views/business/miniproSetting.vue b/admin/src/views/business/miniproSetting.vue index 8bf034e..2490bf5 100644 --- a/admin/src/views/business/miniproSetting.vue +++ b/admin/src/views/business/miniproSetting.vue @@ -1,7 +1,7 @@ <template> <TableLayout :permissions="['business:baseparam:query']"> <!-- 鎼滅储琛ㄥ崟 --> - <el-form ref="form" slot="search-form" :model="form" label-width="130px" label-suffix="锛�"> + <el-form ref="form" slot="search-form" :model="form" label-width="160px" label-suffix="锛�"> <el-form-item label="涓婚〉涓婚"> <el-input v-model="form.projectName" placeholder="璇疯緭鍏ヤ富椤典富棰�"></el-input> @@ -10,38 +10,95 @@ <el-input v-model="form.serverPhone" placeholder="璇疯緭鍏ユ湇鍔$數璇�"></el-input> </el-form-item> <el-form-item label="鎶奸噾閲戦"> - <el-input v-model="form.rentDeposit" placeholder="璇疯緭鍏ユ娂閲戦噾棰�"></el-input> + <el-input v-model="form.rentDeposit" @change="changeVal(form.rentDeposit, 1)" type="number" + placeholder="璇疯緭鍏ユ娂閲戦噾棰�"></el-input> <div class="tips">璇疯緭鍏ラ渶瑕佺即绾崇殑鎶奸噾閲戦(鍗曚綅锛氬厓)</div> </el-form-item> <el-form-item label="钀ヤ笟鏃堕棿"> - <el-time-select placeholder="寮�濮嬫椂闂�" v-model="form.businessStarttime"></el-time-select> + <el-time-picker placeholder="寮�濮嬫椂闂�" value-format="HH:mm" format='HH:mm' + v-model="form.businessStarttime"></el-time-picker> 鑷� - <el-time-select placeholder="缁撴潫鏃堕棿" v-model="form.businessEndtime"></el-time-select> + <el-time-picker placeholder="缁撴潫鏃堕棿" value-format="HH:mm" format='HH:mm' + v-model="form.businessEndtime"></el-time-picker> </el-form-item> <el-form-item label="鍏嶈垂楠戣鏃堕暱"> - <el-input v-model="form.freeRentTime" placeholder="璇疯緭鍏ュ悕绉�"></el-input> + <el-input v-model="form.freeRentTime" type="number" @change="changeVal(form.freeRentTime, 2)" + placeholder="璇疯緭鍏ュ厤璐归獞琛屾椂闀�"></el-input> <div class="tips">鍏嶈垂楠戣鏃堕暱锛屽崟浣嶏細鍒嗛挓</div> </el-form-item> <el-form-item label="婊¤浇棰勮(%)" prop="name"> <div style="display: flex;"> - 浣庝簬<el-input style="width: 80px;" v-model="form.warnMin" placeholder="鏈�灏忓��"></el-input> - 鎴栭珮浜�<el-input style="width: 80px;" v-model="form.warnMax" placeholder="鏈�澶у��"></el-input> + 浣庝簬<el-input style="width: 80px;" v-model="form.warnMin" @change="changeVal(form.warnMin, 3)" type="number" + placeholder="鏈�灏忓��"></el-input> + 鎴栭珮浜�<el-input style="width: 80px;" v-model="form.warnMax" @change="changeVal(form.warnMax, 4)" type="number" + placeholder="鏈�澶у��"></el-input> 浼氭兂閽夐拤缇ゅ彂閫侀璀� </div> <div class="tips">褰撹溅杈嗘弧杞借秴杩囦互涓婇厤缃椂锛屾彁绀虹鐞嗗憳</div> </el-form-item> - <el-form-item label="棰勮閽夐拤缇ゅ湴鍧�"> - <el-input v-model="form.warnDingdingUrl" placeholder="璇疯緭鍏ラ璀﹂拤閽夌兢鍦板潃"></el-input> + <el-form-item label="鐢靛姩杞︿复鏃跺仠杞﹂檺鍒�"> + <el-radio v-model="form.pauseBikeType" label="0">鍋滆溅鐐瑰唴鍋滆溅</el-radio> + <el-radio v-model="form.pauseBikeType" label="1">杩愯惀鍖哄唴鍋滆溅</el-radio> + </el-form-item> + <el-form-item label="鐢靛姩杞︿复鏃惰嚜鍔ㄥ叧閿�"> + <el-input v-model="form.pauseAutoCloseTime" + oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" + type="number"></el-input> + <div class="placeholder9">涓村仠瓒呰繃閰嶇疆鏃堕暱锛岀郴缁熶細鑷姩鍏抽攣骞惰繘琛岀粨绠楋紝鍗曚綅锛氬垎閽�</div> + </el-form-item> + <el-form-item label="鐢靛姩杞︾數鍘嬭缃�"> + <div style="display: flex;"> + 浣庣數鍘嬮璀﹀��<el-input style="width: 80px;" + oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" + v-model="form.lowBikeVoltage" type="number"></el-input> + 浼忥紝婊$數鐢靛帇 <el-input style="width: 80px;" + oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" + v-model="form.fullBikeVoltage" type="number"></el-input> + </div> + </el-form-item> + <el-form-item label="杩愯惀鍖哄煙璁剧疆"> + <el-button type="primary" @click="handleDraw">鏌ョ湅/缂栬緫</el-button> + <div class="placeholder9">鐐瑰嚮鎸夐挳鍙煡鐪�/缂栬緫杩愯惀鍖哄煙锛岀敤鎴峰彧鑳藉湪杩愯惀鍖哄煙鍐呮壂鐮侀獞琛�</div> + </el-form-item> + <!-- <el-form-item label="棰勮閽夐拤缇ゅ湴鍧�">--> + <!-- <el-input v-model="form.warnDingdingUrl" placeholder="璇疯緭鍏ラ璀﹂拤閽夌兢鍦板潃"></el-input>--> + <!-- </el-form-item>--> + <el-form-item label="绉熻祦椤荤煡涓诲浘"> + <div style="display: flex;"> + <UploadAvatarImage :file="{ 'imgurlfull': form.leaseNoticeUrl, 'imgurl': leaseNoticeUrl }" + :uploadData="uploadData" tipsLabel="" @uploadSuccess="uploadOutSuccess" @uploadEnd="isUploading = false" + @uploadBegin="isUploading = true" /> + <div class="tips"> + <el-button type="text" style="color: red;" @click="form.leaseNoticeUrl = ''">鍒犻櫎</el-button> + </div> + </div> </el-form-item> <el-form-item label="绉熻祦娴佺▼瑙嗛" prop="name"> - <!-- :before-upload="beforeAvatarUpload" --> - <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" - accept=".mp4" :on-success="handleAvatarSuccess"> - <video v-if="form.rentTipsVideo" :src="form.rentTipsVideo" class="avatar"></video> - <!-- <img v-if="imageUrl" :src="imageUrl" > --> - <i v-else class="el-icon-plus avatar-uploader-icon"></i> - </el-upload> - <div class="tips">鍙兘涓婁紶mp4鏍煎紡锛屽缓璁笉瓒呰繃50M</div> + <div style="display: flex;"> + <div style="width: 250px;height: 180px" v-if="form.rentTipsVideo"> + <video controls :src="form.rentTipsVideo" style="width: 100%;height: 100%"></video> + </div> + <!-- <el-upload class="avatar-uploader" :action="uploadImgUrl" :show-file-list="false" accept=".mp4"--> + <!-- :data="{ folder: 'bike', }" :on-success="handleAvatarSuccess">--> + <!-- <video v-if="form.rentTipsVideo" :src="form.rentTipsVideo" class="avatar"></video>--> + <!-- <i v-else class="el-icon-plus avatar-uploader-icon"></i>--> + <!-- </el-upload>--> + <div class="tips"> + <div> + <el-upload class="upload-demo" ref="upload" :action="uploadImgUrl" :show-file-list="false" accept=".mp4" + :data="{ folder: 'bike', }" :on-success="handleAvatarSuccess"> + <el-button slot="trigger" size="small" type="primary">涓婁紶瑙嗛</el-button> + <div slot="tip" class="el-upload__tip">鍙兘涓婁紶mp4鏍煎紡锛屽缓璁笉瓒呰繃50M</div> + </el-upload> + <el-button type="text" style="color: red;" @click="form.rentTipsVideo = ''">鍒犻櫎</el-button> + </div> + <!-- <div>鍙兘涓婁紶mp4鏍煎紡锛屽缓璁笉瓒呰繃50M</div>--> + </div> + </div> + + </el-form-item> + <el-form-item label="绉熻祦椤荤煡"> + <RichEditor :content="{ content: form.leaseNotice }" @edit="form.leaseNotice = $event"></RichEditor> </el-form-item> <el-form-item label="楠戣溅閫氱煡鍐呭"> <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8 }" v-model="form.rentNotice" @@ -56,31 +113,51 @@ placeholder="璇疯緭鍏ュ仠姝㈡湇鍔℃彁绀�"></el-input> </el-form-item> <el-form-item label="鍋滄鏈嶅姟鏃堕棿"> - <el-time-select placeholder="寮�濮嬫椂闂�" v-model="form.stopServeStarttime"></el-time-select> + <!-- <el-time-picker placeholder="寮�濮嬫椂闂�" format='HH:mm' value-format="yyyy-MM-dd HH:mm:ss" + v-model="form.stopServeStarttime"></el-time-picker> 鑷� - <el-time-select placeholder="缁撴潫鏃堕棿" v-model="form.stopServeEndtime"></el-time-select> + <el-time-picker placeholder="缁撴潫鏃堕棿" value-format="yyyy-MM-dd HH:mm:ss" format='HH:mm' + v-model="form.stopServeEndtime"></el-time-picker> --> + <el-date-picker v-model="value1" type="datetimerange" @change="selectDate" range-separator="鑷�" + start-placeholder="寮�濮嬫椂闂�" end-placeholder="缁撴潫鏃堕棿" format="yyyy-MM-dd HH:mm:ss" + value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker> <div class="tips">鍋滄鏈嶅姟寮�濮嬫椂闂磋嚦缁撴潫鏃堕棿</div> </el-form-item> </template> <el-form-item label=""> - <el-button type="primary" v-permissions="['system:dict:updateMiniProgrammeDTO']" @click="saveSetting">淇濆瓨閰嶇疆椤�</el-button> + <el-button type="primary" v-permissions="['system:dict:updateMiniProgrammeDTO']" + @click="saveSetting">淇濆瓨閰嶇疆椤�</el-button> </el-form-item> </el-form> + <AMap @change="changeMap" ref="MapRef" /> </TableLayout> </template> <script> import TableLayout from '@/layouts/TableLayout' import { getMiniProgrammeDTO, updateById } from '@/api/business/minproSetting' +import UploadAvatarImage from '@/components/common/UploadAvatarImage.vue' +import RichEditor from '@/components/common/RichEditor.vue' +import AMap from './components/Map.vue' export default { name: 'BaseParam', - components: { TableLayout }, + components: { TableLayout, UploadAvatarImage, RichEditor, AMap }, data() { return { + uploadImgUrl: process.env.VUE_APP_API_PREFIX + '/public/uploadLocal', + option: { + format: 'HH:mm' + }, + uploadData: { folder: 'bike' }, + leaseNoticeUrl: '', + isUploading: false, + value1: [], // 鎼滅储 form: { businessEndtime: '', businessStarttime: '', + leaseNoticeUrl: '', + leaseNotice: '', freeRentTime: '', isStopServe: 0, projectName: '', @@ -93,20 +170,65 @@ stopServeTips: '', warnDingdingUrl: '', warnMax: '', - warnMin: '', + warnMin: '' } } }, created() { getMiniProgrammeDTO() .then(res => { - console.log(res); this.form = res + this.value1 = [res.stopServeStarttime, res.stopServeEndtime] }) }, methods: { + changeMap(e) { + console.log('e', e) + this.$set(this.form, 'parkLatLngList', JSON.stringify(e)) + }, + changeVal(val, type) { + if (type === 1) { + if (this.form.rentDeposit < 0) { + this.form.rentDeposit = '' + } + } else if (type === 2) { + if (this.form.freeRentTime < 0) { + this.form.freeRentTime = '' + } + } else if (type === 3) { + if (this.form.warnMin < 0) { + this.form.warnMin = '' + } + } else if (type === 4) { + if (this.form.warnMax < 0) { + this.form.warnMax = '' + } + } + }, + handleDraw() { + this.$refs.MapRef.isShowModal = true + this.$nextTick(() => { + if (this.form.parkLatLngList) { + this.$refs.MapRef.polygons = JSON.parse(this.form.parkLatLngList) + } + this.$refs.MapRef.initMap() + }) + }, handleAvatarSuccess(res, file) { - this.imageUrl = URL.createObjectURL(file.raw); + console.log(res.data.url) + this.form.rentTipsVideo = res.data.url + }, + uploadOutSuccess(file) { + this.leaseNoticeUrl = file.imgurl + this.form.leaseNoticeUrl = file.imgurlfull + }, + selectDate(v) { + this.form.stopServeStarttime = '' + this.form.stopServeEndtime = '' + if (v) { + this.form.stopServeStarttime = v[0] + this.form.stopServeEndtime = v[1] + } }, // beforeAvatarUpload(file) { // console.log(file.type); @@ -121,18 +243,31 @@ // return isJPG; // }, saveSetting() { + const reg = /^[0-9][0-9]*|0\.\d*[0-9]\d*$/ + if (!reg.test(this.form.rentDeposit)) { + return this.$tip.apiFailed({ message: '鎶奸噾閲戦蹇呴』澶т簬0' }) + } + if (!reg.test(this.form.freeRentTime)) { + return this.$tip.apiFailed({ message: '鍏嶈垂楠戣鏃堕暱蹇呴』澶т簬0' }) + } + if (!reg.test(this.form.warnMin)) { + return this.$tip.apiFailed({ message: '婊¤浇棰勮蹇呴』澶т簬0' }) + } + if (!reg.test(this.form.warnMax)) { + return this.$tip.apiFailed({ message: '婊¤浇棰勮蹇呴』澶т簬0' }) + } updateById(this.form) .then(res => { this.$tip.apiSuccess('淇濆瓨鎴愬姛') }) } - }, + } } </script> <style lang="scss" scoped> ::v-deep .el-form { - width: 800px; + width: 900px; } ::v-deep .table-content { @@ -174,5 +309,9 @@ .tips { color: #999; + display: flex; + justify-content: space-between; + flex-direction: column; + margin-left: 10px; } </style> -- Gitblit v1.9.3