Commit f2ecd120bbb808088f45f2be07350849be14399f
1 parent
21397afd
树 修改
Showing
5 changed files
with
525 additions
and
16 deletions
api/tree.js
| @@ -11,6 +11,8 @@ export const addTree = (params) => request.post('/business/tree', params) | @@ -11,6 +11,8 @@ export const addTree = (params) => request.post('/business/tree', params) | ||
| 11 | // 树基本详情 | 11 | // 树基本详情 |
| 12 | export const treeDetailReq = (params) => request.get('/business/tree/'+params ) | 12 | export const treeDetailReq = (params) => request.get('/business/tree/'+params ) |
| 13 | 13 | ||
| 14 | +// 修改树 | ||
| 15 | +export const updateTree = (params) => request.put('/business/tree/',params ) | ||
| 14 | 16 | ||
| 15 | // 归属公司 | 17 | // 归属公司 |
| 16 | export const belongCompanyreq = (params) => request.get('/system/dict/data/type/belongCompanyId', params) | 18 | export const belongCompanyreq = (params) => request.get('/system/dict/data/type/belongCompanyId', params) |
components/common/tui-request/index.js
| @@ -123,6 +123,11 @@ const http = { | @@ -123,6 +123,11 @@ const http = { | ||
| 123 | config.url = url || config.url || '' | 123 | config.url = url || config.url || '' |
| 124 | return http.request(config) | 124 | return http.request(config) |
| 125 | }, | 125 | }, |
| 126 | + put(url, config = {}) { | ||
| 127 | + config.method = 'put' | ||
| 128 | + config.url = url || config.url || '' | ||
| 129 | + return http.request(config) | ||
| 130 | + }, | ||
| 126 | all(requests) { | 131 | all(requests) { |
| 127 | return Promise.all(requests) | 132 | return Promise.all(requests) |
| 128 | }, | 133 | }, |
subPackages/treePage/addTree.vue
| @@ -86,6 +86,7 @@ | @@ -86,6 +86,7 @@ | ||
| 86 | :value="formData.treeImgListFile" | 86 | :value="formData.treeImgListFile" |
| 87 | :serverUrl="serverURL" :header="{'Authorization': userToken}" | 87 | :serverUrl="serverURL" :header="{'Authorization': userToken}" |
| 88 | @complete="handleComplete" | 88 | @complete="handleComplete" |
| 89 | + @remove="handleRemove" | ||
| 89 | :limit="3" | 90 | :limit="3" |
| 90 | accept="image/*" | 91 | accept="image/*" |
| 91 | > | 92 | > |
| @@ -310,15 +311,9 @@ export default { | @@ -310,15 +311,9 @@ export default { | ||
| 310 | longitude: '', // 经度 | 311 | longitude: '', // 经度 |
| 311 | road: '' | 312 | road: '' |
| 312 | }, | 313 | }, |
| 313 | - // currentFiles: [...this.value], // 当前已上传文件列表 | ||
| 314 | - // value: [] | ||
| 315 | } | 314 | } |
| 316 | }, | 315 | }, |
| 317 | watch: { | 316 | watch: { |
| 318 | - // 监听外部传入的value变化 | ||
| 319 | - // value(newVal) { | ||
| 320 | - // this.currentFiles = [...newVal]; | ||
| 321 | - // } | ||
| 322 | }, | 317 | }, |
| 323 | onReady() { | 318 | onReady() { |
| 324 | //开启即时校验，开启后输入即校验【参数必传】，第一参数：是否开启；第二参数：校验规则 | 319 | //开启即时校验，开启后输入即校验【参数必传】，第一参数：是否开启；第二参数：校验规则 |
| @@ -334,9 +329,7 @@ export default { | @@ -334,9 +329,7 @@ export default { | ||
| 334 | this.treeOwnership() | 329 | this.treeOwnership() |
| 335 | }, | 330 | }, |
| 336 | methods: { | 331 | methods: { |
| 337 | - handleInput() { | ||
| 338 | - this.formData.treeheight = this.formData.treeheight.replace(/^(\d*\.\d{0,2}).*/, '$1'); | ||
| 339 | - }, | 332 | + // 权属分类 |
| 340 | treeOwnership() { | 333 | treeOwnership() { |
| 341 | treeOwnership().then(res => { | 334 | treeOwnership().then(res => { |
| 342 | console.log(res) | 335 | console.log(res) |
| @@ -369,10 +362,9 @@ export default { | @@ -369,10 +362,9 @@ export default { | ||
| 369 | handleRemove(index) { | 362 | handleRemove(index) { |
| 370 | // 从列表中移除 | 363 | // 从列表中移除 |
| 371 | this.formData.treeImgList.splice(index, 1); | 364 | this.formData.treeImgList.splice(index, 1); |
| 365 | + this.formData.treeImgListFile.splice(index, 1); | ||
| 372 | console.log(this.formData.treeImgList.length) | 366 | console.log(this.formData.treeImgList.length) |
| 373 | - // // 通知父组件更新 | ||
| 374 | - // this.$emit('input', this.currentFiles); | ||
| 375 | - // this.$emit('remove', index); | 367 | + |
| 376 | }, | 368 | }, |
| 377 | pickerShow() { | 369 | pickerShow() { |
| 378 | this.show = true | 370 | this.show = true |
subPackages/treePage/editTree.vue
| @@ -6,7 +6,7 @@ | @@ -6,7 +6,7 @@ | ||
| 6 | 6 | ||
| 7 | 7 | ||
| 8 | <view class="content-container"> | 8 | <view class="content-container"> |
| 9 | - <view v-if="currentName === '基本信息'">xiugai基本信息</view> | 9 | + <editTreeIfo v-if="currentName === '基本信息'" :treeId="id"></editTreeIfo> |
| 10 | 10 | ||
| 11 | <treeLog v-if="currentName === '变更日志'" :logId="id" /> | 11 | <treeLog v-if="currentName === '变更日志'" :logId="id" /> |
| 12 | </view> | 12 | </view> |
| @@ -14,11 +14,12 @@ | @@ -14,11 +14,12 @@ | ||
| 14 | 14 | ||
| 15 | </template> | 15 | </template> |
| 16 | <script > | 16 | <script > |
| 17 | -import { treeDetailReq } from "@/api/tree"; | 17 | +// import { treeDetailReq } from "@/api/tree"; |
| 18 | 18 | ||
| 19 | import treeLog from "./treeLog.vue"; | 19 | import treeLog from "./treeLog.vue"; |
| 20 | +import editTreeIfo from "./editTreeIfo.vue"; | ||
| 20 | export default { | 21 | export default { |
| 21 | - components:{treeLog}, | 22 | + components:{treeLog,editTreeIfo}, |
| 22 | name: "editTree", | 23 | name: "editTree", |
| 23 | data(){ | 24 | data(){ |
| 24 | return{ | 25 | return{ |
| @@ -29,7 +30,8 @@ export default { | @@ -29,7 +30,8 @@ export default { | ||
| 29 | }, | 30 | }, |
| 30 | onLoad(options){ | 31 | onLoad(options){ |
| 31 | this.id = options.id | 32 | this.id = options.id |
| 32 | - this.treeDetailQuery() | 33 | + console.log( this.id ) |
| 34 | + // this.treeDetailQuery() | ||
| 33 | }, | 35 | }, |
| 34 | methods:{ | 36 | methods:{ |
| 35 | treeDetailQuery(){ | 37 | treeDetailQuery(){ |
subPackages/treePage/editTreeIfo.vue
0 → 100644
| 1 | +<template> | ||
| 2 | + <view class="container"> | ||
| 3 | + <tui-form ref="form" :show-message="false" :model="formData"> | ||
| 4 | + <tui-form-item asterisk label="名称" prop="treetype"> | ||
| 5 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入名称" maxlength="30" | ||
| 6 | + v-model="formData.treetype"></tui-input> | ||
| 7 | + </tui-form-item> | ||
| 8 | + | ||
| 9 | + <tui-row> | ||
| 10 | + <tui-col :span="12"> | ||
| 11 | + <tui-form-item label="高度" asterisk prop="treeheight" :position="3"> | ||
| 12 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" | ||
| 13 | + v-model="formData.treeheight"></tui-input> | ||
| 14 | + <template v-slot:right> | ||
| 15 | + <text style="padding-left: 12rpx;color:#aaa;font-size:14px;">米</text> | ||
| 16 | + </template> | ||
| 17 | + </tui-form-item> | ||
| 18 | + </tui-col> | ||
| 19 | + <tui-col :span="12"> | ||
| 20 | + <tui-form-item label="胸径" asterisk prop="dbh" :position="3"> | ||
| 21 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" | ||
| 22 | + v-model="formData.dbh"></tui-input> | ||
| 23 | + <template v-slot:right> | ||
| 24 | + <text style="padding-left: 12rpx;color:#aaa;font-size:14px">厘米</text> | ||
| 25 | + </template> | ||
| 26 | + </tui-form-item> | ||
| 27 | + </tui-col> | ||
| 28 | + </tui-row> | ||
| 29 | + | ||
| 30 | + | ||
| 31 | + <tui-form-item | ||
| 32 | + asterisk | ||
| 33 | + label="位置" | ||
| 34 | + class="location-form-item" | ||
| 35 | + @click="openMap" | ||
| 36 | + prop="growlocation" | ||
| 37 | + > | ||
| 38 | + <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled | ||
| 39 | + v-model="formData.growlocation"></tui-input> | ||
| 40 | + <template v-slot:right> | ||
| 41 | + <tui-icon name="gps" :size="20"></tui-icon> | ||
| 42 | + </template> | ||
| 43 | + </tui-form-item> | ||
| 44 | + | ||
| 45 | + <tui-col :span="12"> | ||
| 46 | + <tui-form-item | ||
| 47 | + | ||
| 48 | + label="纬度" | ||
| 49 | + class="location-form-item" | ||
| 50 | + | ||
| 51 | + prop="latitude" | ||
| 52 | + > | ||
| 53 | + {{ formData.latitude }} | ||
| 54 | + </tui-form-item> | ||
| 55 | + </tui-col> | ||
| 56 | + <tui-col :span="12"> | ||
| 57 | + <tui-form-item | ||
| 58 | + label="经度" | ||
| 59 | + class="location-form-item" | ||
| 60 | + prop="latitude" | ||
| 61 | + > | ||
| 62 | + {{ formData.longitude }} | ||
| 63 | + </tui-form-item> | ||
| 64 | + </tui-col> | ||
| 65 | + | ||
| 66 | + | ||
| 67 | + <tui-form-item asterisk label="管护单位" prop="managedutyunit"> | ||
| 68 | + | ||
| 69 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="30" | ||
| 70 | + v-model="formData.managedutyunit"></tui-input> | ||
| 71 | + | ||
| 72 | + <!-- <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled--> | ||
| 73 | + <!-- backgroundColor="transparent" v-model="formData.managedutyunit"></tui-input>--> | ||
| 74 | + </tui-form-item> | ||
| 75 | + <tui-form-item asterisk label="权属分类" arrow highlight prop="oldtreeownership" @click="pickerShow"> | ||
| 76 | + <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled | ||
| 77 | + backgroundColor="transparent" v-model="formData.oldtreeownership"></tui-input> | ||
| 78 | + </tui-form-item> | ||
| 79 | + | ||
| 80 | + <tui-form-item label="图片信息" asterisk prop="treeImgList"> | ||
| 81 | + <!-- 使用ThorUI的tui-upload组件 --> | ||
| 82 | + <!-- @remove="handleRemove" :multiple="true" :value="formData.treeImgList"--> | ||
| 83 | + <tui-upload | ||
| 84 | + :height="140" | ||
| 85 | + :width="140" | ||
| 86 | + :value="formData.treeImgListFile" | ||
| 87 | + :serverUrl="serverURL" :header="{'Authorization': userToken}" | ||
| 88 | + @complete="handleComplete" | ||
| 89 | + @remove="handleRemove" | ||
| 90 | + :limit="3" | ||
| 91 | + accept="image/*" | ||
| 92 | + > | ||
| 93 | + <!-- 自定义上传按钮 --> | ||
| 94 | + <view class="upload-btn"> | ||
| 95 | + <tui-icon name="plus" size="32" color="#999"></tui-icon> | ||
| 96 | + | ||
| 97 | + </view> | ||
| 98 | + <!-- 提示信息 --> | ||
| 99 | + <!-- <view class="upload-tips">--> | ||
| 100 | + <!-- 最多上传3张图片，单张不超过5MB--> | ||
| 101 | + <!-- </view>--> | ||
| 102 | + | ||
| 103 | + | ||
| 104 | + </tui-upload> | ||
| 105 | + <!-- 提示信息 --> | ||
| 106 | + <!-- <view class="upload-tips">--> | ||
| 107 | + <!-- 最多上传3张图片，单张不超过5MB--> | ||
| 108 | + <!-- </view>--> | ||
| 109 | + </tui-form-item> | ||
| 110 | + | ||
| 111 | + <!-- 动画区域（初始隐藏） --> | ||
| 112 | + <view | ||
| 113 | + class="animated-area" | ||
| 114 | + :style="{ | ||
| 115 | + height: isShow ? contentHeight + 'px' : '0', | ||
| 116 | + opacity: isShow ? 1 : 0, | ||
| 117 | + overflow: 'hidden' | ||
| 118 | + }" | ||
| 119 | + > | ||
| 120 | + | ||
| 121 | + <tui-row> | ||
| 122 | + <tui-col :span="12"> | ||
| 123 | + <tui-form-item label="拉丁文" prop="latinname"> | ||
| 124 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="30" | ||
| 125 | + v-model="formData.latinname"></tui-input> | ||
| 126 | + </tui-form-item> | ||
| 127 | + </tui-col> | ||
| 128 | + <tui-col :span="12"> | ||
| 129 | + <tui-form-item label="级别" arrow highlight prop="treelevel" @click="pickerLevelShow"> | ||
| 130 | + <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled | ||
| 131 | + backgroundColor="transparent" v-model="formData.treelevel"></tui-input> | ||
| 132 | + </tui-form-item> | ||
| 133 | + </tui-col> | ||
| 134 | + </tui-row> | ||
| 135 | + | ||
| 136 | + <tui-form-item label="生长环境" prop="growthenvironment"> | ||
| 137 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="50" | ||
| 138 | + v-model="formData.growthenvironment"></tui-input> | ||
| 139 | + </tui-form-item> | ||
| 140 | + | ||
| 141 | + | ||
| 142 | + <tui-row> | ||
| 143 | + <tui-col :span="12"> | ||
| 144 | + <tui-form-item label="预估树龄" prop="estimationtreeage" :position="3"> | ||
| 145 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" | ||
| 146 | + v-model="formData.estimationtreeage"></tui-input> | ||
| 147 | + <template v-slot:right> | ||
| 148 | + <text style="padding-left: 12rpx;color:#aaa;font-size: 14px">年</text> | ||
| 149 | + </template> | ||
| 150 | + </tui-form-item> | ||
| 151 | + </tui-col> | ||
| 152 | + <tui-col :span="12"> | ||
| 153 | + <tui-form-item label="干周" prop="weekday" :position="3"> | ||
| 154 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" | ||
| 155 | + v-model="formData.weekday"></tui-input> | ||
| 156 | + <template v-slot:right> | ||
| 157 | + <text style="padding-left: 12rpx;color:#aaa;font-size: 14px">厘米</text> | ||
| 158 | + </template> | ||
| 159 | + </tui-form-item> | ||
| 160 | + </tui-col> | ||
| 161 | + </tui-row> | ||
| 162 | + | ||
| 163 | + | ||
| 164 | + <tui-row> | ||
| 165 | + <tui-col :span="12"> | ||
| 166 | + <tui-form-item label="东西冠幅" prop="canopyeastwest" :position="3"> | ||
| 167 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" | ||
| 168 | + v-model="formData.canopyeastwest"></tui-input> | ||
| 169 | + <template v-slot:right> | ||
| 170 | + <text style="padding-left: 12rpx;color:#aaa">米</text> | ||
| 171 | + </template> | ||
| 172 | + </tui-form-item> | ||
| 173 | + </tui-col> | ||
| 174 | + <tui-col :span="12"> | ||
| 175 | + <tui-form-item label="南北冠幅" prop="canopysouthnorth" :position="3"> | ||
| 176 | + <tui-input padding="0" :borderBottom="false" placeholder="请输入" textRight maxlength="10" | ||
| 177 | + v-model="formData.canopysouthnorth"></tui-input> | ||
| 178 | + <template v-slot:right> | ||
| 179 | + <text style="padding-left: 12rpx;color:#aaa;font-size: 14px">米</text> | ||
| 180 | + </template> | ||
| 181 | + </tui-form-item> | ||
| 182 | + </tui-col> | ||
| 183 | + </tui-row> | ||
| 184 | + | ||
| 185 | + | ||
| 186 | + </view> | ||
| 187 | + | ||
| 188 | + <!-- 触发按钮 --> | ||
| 189 | + <tui-button | ||
| 190 | + @click="toggleArea" | ||
| 191 | + type="primary" | ||
| 192 | + :loading="false" | ||
| 193 | + height="80rpx" | ||
| 194 | + plain | ||
| 195 | + > | ||
| 196 | + {{ isShow ? '- 隐藏区域' : '+ 显示区域' }} | ||
| 197 | + </tui-button> | ||
| 198 | + | ||
| 199 | + | ||
| 200 | + <view class="tui-btn__box"> | ||
| 201 | + <tui-button bold @click="submit">提交</tui-button> | ||
| 202 | + </view> | ||
| 203 | + </tui-form> | ||
| 204 | + <tui-picker :show="show" :pickerData="treeOwnershipData" textField="dictLabel" valueField="dictValue" | ||
| 205 | + @hide="pickerHide" @change="pickerChange"> | ||
| 206 | + </tui-picker> | ||
| 207 | + | ||
| 208 | + <tui-picker :show="levelshow" :pickerData="treeLevelData" textField="dictLabel" valueField="dictValue" | ||
| 209 | + @hide="pickerLevelHide" @change="pickerLevelChange"> | ||
| 210 | + </tui-picker> | ||
| 211 | + </view> | ||
| 212 | +</template> | ||
| 213 | + | ||
| 214 | +<script> | ||
| 215 | +import { uploadURL,OSSURL} from '@/config/app' | ||
| 216 | +import { treeOwnership, addTree, treeLevelReq, treeDetailReq, updateTree } from "@/api/tree"; | ||
| 217 | +const rules = [{ | ||
| 218 | + name: "treetype", | ||
| 219 | + rule: ["required"], | ||
| 220 | + msg: ["请输入名称"] | ||
| 221 | +}, { | ||
| 222 | + name: "treeheight", | ||
| 223 | + rule: ["required", "maxLength:10", "isAmount"], | ||
| 224 | + msg: ["请输入数高", "数高不能超过10个字符", "请输入正确"] | ||
| 225 | +}, { | ||
| 226 | + name: "dbh", | ||
| 227 | + rule: ["required", "maxLength:10", "isAmount"], | ||
| 228 | + msg: ["请输入胸径", "胸径不能超过10个字符", "请输入正确"] | ||
| 229 | +}, { | ||
| 230 | + name: "estimationtreeage", | ||
| 231 | + rule: ["maxLength:10", "isAmount"], | ||
| 232 | + msg: ["胸径不能超过10个字符", "请输入正确"] | ||
| 233 | +}, | ||
| 234 | + { | ||
| 235 | + name: "weekday", | ||
| 236 | + rule: ["maxLength:10", "isAmount"], | ||
| 237 | + msg: ["胸径不能超过10个字符", "请输入正确"] | ||
| 238 | + }, | ||
| 239 | + { | ||
| 240 | + name: "canopyeastwest", | ||
| 241 | + rule: ["maxLength:10", "isAmount"], | ||
| 242 | + msg: ["胸径不能超过10个字符", "请输入正确"] | ||
| 243 | + }, | ||
| 244 | + { | ||
| 245 | + name: "canopysouthnorth", | ||
| 246 | + rule: ["maxLength:10", "isAmount"], | ||
| 247 | + msg: ["胸径不能超过10个字符", "请输入正确"] | ||
| 248 | + }, { | ||
| 249 | + name: "growlocation", | ||
| 250 | + rule: ["required"], | ||
| 251 | + msg: ["请地图选择位置"] | ||
| 252 | + }, { | ||
| 253 | + name: "managedutyunit", | ||
| 254 | + rule: ["required"], | ||
| 255 | + msg: ["请选择权属单位"] | ||
| 256 | + }, { | ||
| 257 | + name: "oldtreeownership", | ||
| 258 | + rule: ["required"], | ||
| 259 | + msg: ["请选择权属分类"] | ||
| 260 | + }, { | ||
| 261 | + name: "treeImgListFile", | ||
| 262 | + rule: ["required", "custom"], // 增加required强制必选 | ||
| 263 | + msg: ["请上传图片", "请至少上传一张图片"], // 对应两个规则的提示 | ||
| 264 | + custom: function (value) { | ||
| 265 | + // 即使required通过，再校验数组长度 | ||
| 266 | + return value.length > 0; | ||
| 267 | + } | ||
| 268 | + }]; | ||
| 269 | +export default { | ||
| 270 | + props: { | ||
| 271 | + treeId: { | ||
| 272 | + type: String, | ||
| 273 | + required: true | ||
| 274 | + } | ||
| 275 | + }, | ||
| 276 | + | ||
| 277 | + data() { | ||
| 278 | + return { | ||
| 279 | + isShow: false, // 控制区域显示/隐藏 | ||
| 280 | + contentHeight: 200, // 内容区域高度 | ||
| 281 | + serverURL: uploadURL, | ||
| 282 | + treeOwnershipData: [], | ||
| 283 | + treeLevelData: [], // 级别 | ||
| 284 | + show: false, | ||
| 285 | + levelshow: false, | ||
| 286 | + //仅对部分数据进行收集演示 | ||
| 287 | + formData: { | ||
| 288 | + //数名 | ||
| 289 | + treetype: '', | ||
| 290 | + //树高 | ||
| 291 | + treeheight: '', | ||
| 292 | + //胸径 | ||
| 293 | + dbh: '', | ||
| 294 | + //级别 | ||
| 295 | + treelevel: '', | ||
| 296 | + //权属单位 | ||
| 297 | + managedutyunit: '', | ||
| 298 | + //权属分类 | ||
| 299 | + oldtreeownership: '', | ||
| 300 | + latinname: '', // 拉丁名 | ||
| 301 | + estimationtreeage: '', // 估测树龄 | ||
| 302 | + canopysouthnorth: '', // 冠幅南北 | ||
| 303 | + canopyeastwest: '', // 冠幅东西 | ||
| 304 | + weekday: '', // 干周 | ||
| 305 | + growlocation: '', // 位置 | ||
| 306 | + growthenvironment: '', // 生长环境 | ||
| 307 | + treeImgList: [], // 图片信息 | ||
| 308 | + treeImgListFile: [], // 图片信息 | ||
| 309 | + address: '', // 位置名称 | ||
| 310 | + latitude: '', // 纬度 | ||
| 311 | + longitude: '', // 经度 | ||
| 312 | + road: '' | ||
| 313 | + }, | ||
| 314 | + } | ||
| 315 | + }, | ||
| 316 | + watch: { | ||
| 317 | + treeId: { | ||
| 318 | + // immediate: true, | ||
| 319 | + handler(newVal, oldVal) { | ||
| 320 | + if (newVal !== oldVal) { | ||
| 321 | + treeLevelReq().then(res => { | ||
| 322 | + this.treeLevelData = res.data | ||
| 323 | + }) | ||
| 324 | + // this.formData.road = options.roadId | ||
| 325 | + this.treeOwnership() | ||
| 326 | + this.treeDetailQuery(newVal) | ||
| 327 | + } | ||
| 328 | + } | ||
| 329 | + } | ||
| 330 | + }, | ||
| 331 | + onReady() { | ||
| 332 | + //开启即时校验，开启后输入即校验【参数必传】，第一参数：是否开启；第二参数：校验规则 | ||
| 333 | + // 开启即时校验，参数：是否开启、校验规则 | ||
| 334 | + this.$refs.form && this.$refs.form.immediateValidate(true, rules); | ||
| 335 | + // this.$refs.form && this.$refs.form.immediateValidate(true, rules) | ||
| 336 | + }, | ||
| 337 | + onLoad(options) { | ||
| 338 | + | ||
| 339 | + | ||
| 340 | + }, | ||
| 341 | + methods: { | ||
| 342 | + treeDetailQuery(newVal){ | ||
| 343 | + | ||
| 344 | + treeDetailReq(newVal).then(res=>{ | ||
| 345 | + this.formData = res.data | ||
| 346 | + | ||
| 347 | + this.formData.treeImgListFile = res.data.treeImgList.map(imgUrl => { | ||
| 348 | + return imgUrl.startsWith(OSSURL) | ||
| 349 | + ? imgUrl.slice(OSSURL.length) | ||
| 350 | + : imgUrl; | ||
| 351 | + }); | ||
| 352 | + | ||
| 353 | + | ||
| 354 | + // this.formData.treeImgListFile = res.data.treeImgList.map(imgUrl => { | ||
| 355 | + // // 强制确保 imgUrl 是字符串类型 | ||
| 356 | + // const urlStr = typeof imgUrl === 'string' ? imgUrl : ''; | ||
| 357 | + // return { | ||
| 358 | + // url: urlStr // 必须是字符串，不能是对象 | ||
| 359 | + // }; | ||
| 360 | + // }); | ||
| 361 | + console.log('123'+newVal) | ||
| 362 | + console.log( this.formData.treeImgListFile) | ||
| 363 | + }) | ||
| 364 | + }, | ||
| 365 | + | ||
| 366 | + treeOwnership() { | ||
| 367 | + treeOwnership().then(res => { | ||
| 368 | + console.log(res) | ||
| 369 | + this.treeOwnershipData = res.data | ||
| 370 | + }) | ||
| 371 | + }, | ||
| 372 | + // 切换显示/隐藏状态 | ||
| 373 | + toggleArea() { | ||
| 374 | + this.isShow = !this.isShow; | ||
| 375 | + }, | ||
| 376 | + // 上传完成回调 | ||
| 377 | + handleComplete(e) { | ||
| 378 | + if (e.status == 1) { | ||
| 379 | + console.log(e) | ||
| 380 | + // this.formData.treeImgList.push(e.imgArr); | ||
| 381 | + console.log(e.imgArr[0]) | ||
| 382 | + this.formData.treeImgListFile = e.imgArr | ||
| 383 | + this.formData.treeImgList = e.imgArr.map(item=>OSSURL+item); | ||
| 384 | + console.log(this.formData.treeImgList) | ||
| 385 | + // baseURL | ||
| 386 | + // 手动触发treeImgList字段的校验 | ||
| 387 | + this.$refs.form.validateField("treeImgList"); | ||
| 388 | + | ||
| 389 | + } | ||
| 390 | + // this.formData.treeImgList = e.imgArr; | ||
| 391 | + // 根据实际接口返回格式调整 | ||
| 392 | + // this.currentFiles.push(e.data); | ||
| 393 | + }, | ||
| 394 | + // 删除图片回调 | ||
| 395 | + handleRemove(index) { | ||
| 396 | + // 从列表中移除 | ||
| 397 | + this.formData.treeImgList.splice(index, 1); | ||
| 398 | + this.formData.treeImgListFile.splice(index, 1); | ||
| 399 | + console.log(this.formData.treeImgList.length) | ||
| 400 | + | ||
| 401 | + }, | ||
| 402 | + pickerShow() { | ||
| 403 | + this.show = true | ||
| 404 | + }, | ||
| 405 | + pickerHide() { | ||
| 406 | + this.show = false | ||
| 407 | + }, | ||
| 408 | + pickerChange(e) { | ||
| 409 | + console.log(e) | ||
| 410 | + this.formData.oldtreeownership = e.dictLabel | ||
| 411 | + }, | ||
| 412 | + pickerLevelShow() { | ||
| 413 | + this.levelshow = true | ||
| 414 | + }, | ||
| 415 | + pickerLevelHide() { | ||
| 416 | + this.levelshow = false | ||
| 417 | + }, | ||
| 418 | + pickerLevelChange(e) { | ||
| 419 | + console.log(e) | ||
| 420 | + this.formData.treelevel = e.dictLabel | ||
| 421 | + }, | ||
| 422 | + submit() { | ||
| 423 | + // 3. 打印提交时的数据 | ||
| 424 | + console.log("提交时treeImgList：", this.formData.treeImgList); | ||
| 425 | + // 手动校验图片 | ||
| 426 | + if (!this.formData.treeImgList || this.formData.treeImgList.length === 0) { | ||
| 427 | + uni.showToast({title: "请上传图片", icon: "none"}); | ||
| 428 | + return; // 阻止提交 | ||
| 429 | + } | ||
| 430 | + //注：结合FormItem校验，validate方法第三个参数必须传true | ||
| 431 | + this.$refs.form.validate(this.formData, rules, true).then(res => { | ||
| 432 | + if (res.isPass) { | ||
| 433 | + console.log(this.formData) | ||
| 434 | + console.log('校验通过！') | ||
| 435 | + updateTree({data: {...this.formData}}).then(res => { | ||
| 436 | + console.log(res) | ||
| 437 | + if (res.code == '200') { | ||
| 438 | + uni.showToast({title: "修改成功", icon: "none"}); | ||
| 439 | + // uni.$tui.href(`/subPackages/treePage/treeRecord?roadId=${this.formData.road}`) | ||
| 440 | + } | ||
| 441 | + }) | ||
| 442 | + } else { | ||
| 443 | + console.log(res) | ||
| 444 | + } | ||
| 445 | + }).catch(errors => { | ||
| 446 | + console.log(errors) | ||
| 447 | + }) | ||
| 448 | + }, | ||
| 449 | + // 打开地图选择 | ||
| 450 | + openMap() { | ||
| 451 | + // 如果已有位置信息，默认显示该位置，否则使用当前位置 | ||
| 452 | + const options = { | ||
| 453 | + latitude: this.formData.latitude ? Number(this.formData.latitude) : '', | ||
| 454 | + longitude: this.formData.longitude ? Number(this.formData.longitude) : '', | ||
| 455 | + scale: 16, // 地图缩放级别 | ||
| 456 | + name: this.formData.growlocation || '', // 位置名称 | ||
| 457 | + address: this.formData.growlocation || '' // 详细地址 | ||
| 458 | + }; | ||
| 459 | + // 调用微信小程序地图选择API | ||
| 460 | + uni.chooseLocation({ | ||
| 461 | + ...options, | ||
| 462 | + success: (res) => { | ||
| 463 | + console.log(res) | ||
| 464 | + // 选择成功后更新位置信息 | ||
| 465 | + this.formData.growlocation = res.address | ||
| 466 | + this.formData.latitude = res.latitude | ||
| 467 | + this.formData.longitude = res.longitude | ||
| 468 | + }, | ||
| 469 | + fail: (err) => { | ||
| 470 | + console.error('地图选择失败', err); | ||
| 471 | + if (err.errMsg.includes('auth deny')) { | ||
| 472 | + uni.showToast({ | ||
| 473 | + title: '请授权位置权限', | ||
| 474 | + icon: 'none' | ||
| 475 | + }); | ||
| 476 | + } | ||
| 477 | + } | ||
| 478 | + }); | ||
| 479 | + } | ||
| 480 | + } | ||
| 481 | +} | ||
| 482 | +</script> | ||
| 483 | + | ||
| 484 | +<style> | ||
| 485 | +.tui-title { | ||
| 486 | + width: 100%; | ||
| 487 | + font-size: 28rpx; | ||
| 488 | + color: #888; | ||
| 489 | + padding: 30rpx; | ||
| 490 | + box-sizing: border-box; | ||
| 491 | +} | ||
| 492 | + | ||
| 493 | +.tui-btn__box { | ||
| 494 | + width: 100%; | ||
| 495 | + position: fixed; | ||
| 496 | + bottom: 0; | ||
| 497 | +} | ||
| 498 | + | ||
| 499 | +.location-content { | ||
| 500 | + font-size: 14px; | ||
| 501 | +} | ||
| 502 | + | ||
| 503 | +/* 动画区域样式 */ | ||
| 504 | +.animated-area { | ||
| 505 | + height: 200rpx; | ||
| 506 | + transition: all 0.3s ease-out; /* 动画过渡效果 */ | ||
| 507 | +} | ||
| 508 | +</style> | ||
| 0 | \ No newline at end of file | 509 | \ No newline at end of file |