JCSS / yl_miniapp

Blame view

subPackages/treePage/editTreeIfo.vue 16.8 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">
69173829   刘淇   样式优化 
12
13
 
            <tui-form-item label="胸径" asterisk prop="dbh" :position="2">
              <tui-input padding="0" :borderBottom="false" placeholder="请输入"  maxlength="10"
73dee4bd   刘淇   高度非必填 
14
 
                         v-model="formData.dbh"></tui-input>
f2ecd120   刘淇   树 修改 
15
 
              <template v-slot:right>
69173829   刘淇   样式优化 
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">
69173829   刘淇   样式优化 
21
22
 
            <tui-form-item label="高度"  prop="treeheight" :position="2">
              <tui-input padding="0" :borderBottom="false" placeholder="请输入"  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"
          >
69173829   刘淇   样式优化 
50
 
            <span style="color: #ccc;font-size: 14px"> {{ 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"
f2ecd120   刘淇   树 修改 
59
60
 
              prop="latitude"
          >
69173829   刘淇   样式优化 
61
 
            <span style="color: #ccc;font-size: 14px"> {{ formData.latitude }}</span>
f2ecd120   刘淇   树 修改 
62
63
64
65
 
          </tui-form-item>
        </tui-col>
73dee4bd   刘淇   高度非必填 
66
f2ecd120   刘淇   树 修改 
67
68
69
70
71
72
73
74
 
        <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   刘淇   树木详情 
75
 
        <tui-form-item asterisk label="权属分类" arrow highlight prop="oldtreeownershipText" @click="pickerShow">
f2ecd120   刘淇   树 修改 
76
 
          <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
b951d827   刘淇   树木详情 
77
 
                     backgroundColor="transparent" v-model="formData.oldtreeownershipText"></tui-input>
f2ecd120   刘淇   树 修改 
78
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
 
        </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   刘淇   树木详情 
129
 
              <tui-form-item label="级别" arrow highlight prop="treeleveltext" @click="pickerLevelShow">
f2ecd120   刘淇   树 修改 
130
 
                <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled
b951d827   刘淇   树木详情 
131
 
                           backgroundColor="transparent" v-model="formData.treeleveltext"></tui-input>
f2ecd120   刘淇   树 修改 
132
133
134
135
136
137
138
139
140
141
142
143
 
              </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">
69173829   刘淇   样式优化 
144
145
 
              <tui-form-item label="预估树龄" prop="estimationtreeage" :position="2">
                <tui-input padding="0" :borderBottom="false" placeholder="请输入"  maxlength="10"
f2ecd120   刘淇   树 修改 
146
147
 
                           v-model="formData.estimationtreeage"></tui-input>
                <template v-slot:right>
69173829   刘淇   样式优化 
148
 
                  <text style="padding-left: 12rpx;color:#ccc;font-size: 12px">年</text>
f2ecd120   刘淇   树 修改 
149
150
151
152
 
                </template>
              </tui-form-item>
            </tui-col>
            <tui-col :span="12">
69173829   刘淇   样式优化 
153
154
 
              <tui-form-item label="干周" prop="weekday" :position="2">
                <tui-input padding="0" :borderBottom="false" placeholder="请输入"  maxlength="10"
f2ecd120   刘淇   树 修改 
155
156
 
                           v-model="formData.weekday"></tui-input>
                <template v-slot:right>
69173829   刘淇   样式优化 
157
 
                  <text style="padding-left: 12rpx;color:#ccc;font-size: 12px">厘米</text>
f2ecd120   刘淇   树 修改 
158
159
160
161
162
163
164
165
 
                </template>
              </tui-form-item>
            </tui-col>
          </tui-row>
  
  
          <tui-row>
            <tui-col :span="12">
69173829   刘淇   样式优化 
166
167
 
              <tui-form-item label="东西冠幅" prop="canopyeastwest" :position="2">
                <tui-input padding="0" :borderBottom="false" placeholder="请输入"  maxlength="10"
f2ecd120   刘淇   树 修改 
168
169
 
                           v-model="formData.canopyeastwest"></tui-input>
                <template v-slot:right>
fa7a1f8d   刘淇   首页完善 
170
 
                  <text style="padding-left: 12rpx;color:#ccc;font-size: 12px">米</text>
f2ecd120   刘淇   树 修改 
171
172
173
174
 
                </template>
              </tui-form-item>
            </tui-col>
            <tui-col :span="12">
69173829   刘淇   样式优化 
175
176
 
              <tui-form-item label="南北冠幅" prop="canopysouthnorth" :position="2">
                <tui-input padding="0" :borderBottom="false" placeholder="请输入"  maxlength="10"
f2ecd120   刘淇   树 修改 
177
178
 
                           v-model="formData.canopysouthnorth"></tui-input>
                <template v-slot:right>
69173829   刘淇   样式优化 
179
 
                  <text style="padding-left: 12rpx;color:#ccc;font-size: 12px">米</text>
f2ecd120   刘淇   树 修改 
180
181
182
183
184
 
                </template>
              </tui-form-item>
            </tui-col>
          </tui-row>
f2ecd120   刘淇   树 修改 
185
186
187
188
189
190
191
192
193
194
195
196
 
        </view>
  
        <!-- 触发按钮 -->
        <tui-button
            @click="toggleArea"
            type="primary"
            :loading="false"
            height="80rpx"
            plain
        >
          {{ isShow ? '- 隐藏区域' : '+ 显示区域' }}
        </tui-button>
f2ecd120   刘淇   树 修改 
197
 
      </tui-form>
b951d827   刘淇   树木详情 
198
199
 
      <view style="height: 60px;width: 100%"></view>
      <view class="tui-btn__box">
73dee4bd   刘淇   高度非必填 
200
 
        <tui-button bold @click="submit">修改树木信息</tui-button>
b951d827   刘淇   树木详情 
201
 
      </view>
f2ecd120   刘淇   树 修改 
202
203
204
205
206
207
208
209
210
211
212
 
      <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   刘淇   树木详情 
213
 
  import { uploadURL, OSSURL } from '@/config/app'
7fc91f7a   刘淇   上传体验版优化 
214
 
  import { treeOwnership, addTree, treeLevelReq, treeDetailReq, updateTree } from "@/subPackages/common/api/tree.js";
f2ecd120   刘淇   树 修改 
215
216
217
218
219
220
 
  const rules = [{
    name: "treetype",
    rule: ["required"],
    msg: ["请输入名称"]
  }, {
    name: "treeheight",
73dee4bd   刘淇   高度非必填 
221
222
 
    rule: ["maxLength:10", "isAmount"],
    msg: ["数高不能超过10个字符", "请输入正确"]
f2ecd120   刘淇   树 修改 
223
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
 
  }, {
    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   刘淇   树木详情 
255
 
      name: "oldtreeownershipText",
f2ecd120   刘淇   树 修改 
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
 
      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   刘淇   树 修改 
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
 
    data() {
      return {
        isShow: false,       // 控制区域显示/隐藏
        contentHeight: 200,    // 内容区域高度
        serverURL: uploadURL,
        treeOwnershipData: [],
        treeLevelData: [], // 级别
        show: false,
        levelshow: false,
        //仅对部分数据进行收集演示
        formData: {
          //数名
          treetype: '',
          //树高
          treeheight: '',
          //胸径
          dbh: '',
          //级别
          treelevel: '',
b951d827   刘淇   树木详情 
293
 
          treeleveltext: '',
f2ecd120   刘淇   树 修改 
294
295
296
297
 
          //权属单位
          managedutyunit: '',
          //权属分类
          oldtreeownership: '',
b951d827   刘淇   树木详情 
298
 
          oldtreeownershipText: '',
f2ecd120   刘淇   树 修改 
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
 
          latinname: '', // 拉丁名
          estimationtreeage: '', // 估测树龄
          canopysouthnorth: '', // 冠幅南北
          canopyeastwest: '', // 冠幅东西
          weekday: '', // 干周
          growlocation: '', // 位置
          growthenvironment: '', // 生长环境
          treeImgList: [], // 图片信息
          treeImgListFile: [], // 图片信息
          address: '',      // 位置名称
          latitude: '',     // 纬度
          longitude: '',     // 经度
          road: ''
        },
      }
    },
    watch: {
      treeId: {
b951d827   刘淇   树木详情 
317
 
        immediate: true,
f2ecd120   刘淇   树 修改 
318
 
        handler(newVal, oldVal) {
137be4e2   刘淇   树木历史 
319
 
          if (newVal && newVal !== oldVal) {
f2ecd120   刘淇   树 修改 
320
321
322
323
324
325
326
327
328
329
330
331
 
            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   刘淇   树 修改 
332
333
 
    },
    methods: {
b951d827   刘淇   树木详情 
334
335
 
      treeDetailQuery(newVal) {
        treeDetailReq(newVal).then(res => {
f2ecd120   刘淇   树 修改 
336
 
          this.formData = res.data
137be4e2   刘淇   树木历史 
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
 
          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   刘淇   树 修改 
353
354
355
356
357
 
          this.formData.treeImgListFile = res.data.treeImgList.map(imgUrl => {
            return imgUrl.startsWith(OSSURL)
                ? imgUrl.slice(OSSURL.length)
                : imgUrl;
          });
f2ecd120   刘淇   树 修改 
358
359
 
        })
      },
f2ecd120   刘淇   树 修改 
360
361
362
363
364
365
366
367
368
369
370
371
372
373
 
      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   刘淇   树 修改 
374
 
          this.formData.treeImgListFile = e.imgArr
b951d827   刘淇   树木详情 
375
 
          this.formData.treeImgList = e.imgArr.map(item => OSSURL + item);
f2ecd120   刘淇   树 修改 
376
377
378
379
 
          console.log(this.formData.treeImgList)
          // baseURL
          // 手动触发treeImgList字段的校验
          this.$refs.form.validateField("treeImgList");
f2ecd120   刘淇   树 修改 
380
 
        }
f2ecd120   刘淇   树 修改 
381
382
383
384
385
386
387
 
      },
      // 删除图片回调
      handleRemove(index) {
        // 从列表中移除
        this.formData.treeImgList.splice(index, 1);
        this.formData.treeImgListFile.splice(index, 1);
        console.log(this.formData.treeImgList.length)
f2ecd120   刘淇   树 修改 
388
389
390
391
392
393
394
395
396
 
      },
      pickerShow() {
        this.show = true
      },
      pickerHide() {
        this.show = false
      },
      pickerChange(e) {
        console.log(e)
b951d827   刘淇   树木详情 
397
398
 
        this.formData.oldtreeownership = e.dictValue
        this.formData.oldtreeownershipText = e.dictLabel
f2ecd120   刘淇   树 修改 
399
400
401
402
403
404
405
406
407
 
      },
      pickerLevelShow() {
        this.levelshow = true
      },
      pickerLevelHide() {
        this.levelshow = false
      },
      pickerLevelChange(e) {
        console.log(e)
b951d827   刘淇   树木详情 
408
409
 
        this.formData.treelevel = e.dictValue
        this.formData.treeleveltext = e.dictLabel
f2ecd120   刘淇   树 修改 
410
411
412
413
414
 
      },
      submit() {
        // 3. 打印提交时的数据
        console.log("提交时treeImgList：", this.formData.treeImgList);
        // 手动校验图片
73dee4bd   刘淇   高度非必填 
415
 
        console.log( this.formData);
f2ecd120   刘淇   树 修改 
416
417
418
419
420
421
422
423
424
 
        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   刘淇   高度非必填 
425
 
            updateTree({data:this.formData}).then(res => {
f2ecd120   刘淇   树 修改 
426
 
              console.log(res)
75d3172d   刘淇   样式优化 
427
 
              this.formData.maintainunit = this.userInfo.belongCompanyId
f2ecd120   刘淇   树 修改 
428
429
 
              if (res.code == '200') {
                uni.showToast({title: "修改成功", icon: "none"});
69173829   刘淇   样式优化 
430
 
                // uni.$tui.href(`/subPackages/treePage/treeRecord?roadId=${this.formData.road}`)
731c8689   刘淇   跳转优化 
431
432
433
434
 
                // uni.$tui.href(`/subPackages/treePage/treeFiles`)
                uni.redirectTo({
                  url: '/subPackages/treePage/treeFiles' // 目标页面路径
                });
f2ecd120   刘淇   树 修改 
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
501
502
503
 
              }
            })
          } 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>