JCSS / yl_miniapp

Blame view

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