subPackages/treePage/editTreeIfo.vue

<template>
  <view class="container">
    <tui-form ref="form" :show-message="false" :model="formData">
      <tui-form-item asterisk label="名称" prop="treetype" :labelSize="32">
        <tui-input padding="0" :borderBottom="false" placeholder="请输入名称" maxlength="30"  :size="32"
                   v-model="formData.treetype"></tui-input>
      </tui-form-item>
      <tui-row>
        <tui-col :span="12">
          <tui-form-item label="胸径" asterisk prop="dbh" :position="2" :labelSize="32">
            <tui-input padding="0" :borderBottom="false" placeholder="请输入"  maxlength="10"  :size="32"
                       v-model="formData.dbh"></tui-input>
            <template v-slot:right>
              <text style="padding-left: 12rpx;color:#ccc;font-size:14px">厘米</text>
            </template>
          </tui-form-item>
        </tui-col>
        <tui-col :span="12">
          <tui-form-item label="高度"  prop="treeheight" :position="2" :labelSize="32">
            <tui-input padding="0" :borderBottom="false" placeholder="请输入"  maxlength="10"  :size="32"
                       v-model="formData.treeheight"></tui-input>
            <template v-slot:right>
              <text style="padding-left: 12rpx;color:#ccc;font-size:14px;">米</text>
            </template>
          </tui-form-item>
        </tui-col>
      </tui-row>
      <tui-form-item
          asterisk
          label="位置"
          class="location-form-item"
          @click="openMap"
          prop="growlocation"
          :labelSize="32"
      >
        <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled  :size="32"
                   v-model="formData.growlocation"></tui-input>
        <template v-slot:right>
          <tui-icon name="gps" :size="20"></tui-icon>
        </template>
      </tui-form-item>
      <tui-col :span="12">
        <tui-form-item
            label="经度"
            labelColor="#ccc"
            class="location-form-item"
            prop="latitude"
            :labelSize="32"
        >
<!--          <span style="color: #ccc;font-size: 14px"> {{ formData.longitude }}</span>-->
          <tui-input padding="0" :borderBottom="false" placeholder="" disabled  :size="32"
                     v-model="formData.longitude"></tui-input>
        </tui-form-item>
      </tui-col>
      <tui-col :span="12">
        <tui-form-item
            labelColor="#ccc"
            label="纬度"
            class="location-form-item"
            prop="latitude"
            :labelSize="32"
        >
<!--          <span style="color: #ccc;font-size: 14px"> {{ formData.latitude }}</span>-->
          <tui-input padding="0" :borderBottom="false" placeholder="" disabled  :size="32"
                     v-model="formData.latitude"></tui-input>
        </tui-form-item>
      </tui-col>
      <tui-form-item asterisk label="管护单位" prop="managedutyunit" :labelSize="32">
        <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="30"  :size="32"
                   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>
      <tui-form-item asterisk label="权属分类" arrow highlight prop="oldtreeownershipText" @click="pickerShow" :labelSize="32">
        <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled  :size="32"
                   backgroundColor="transparent" v-model="formData.oldtreeownershipText"></tui-input>
      </tui-form-item>
      <tui-form-item label="图片信息" asterisk prop="treeImgList" :labelSize="32">
        <!-- 使用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" :labelSize="32">
              <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="30"  :size="32"
                         v-model="formData.latinname"></tui-input>
            </tui-form-item>
          </tui-col>
          <tui-col :span="12">
            <tui-form-item label="级别" arrow highlight prop="treeleveltext" @click="pickerLevelShow" :labelSize="32">
              <tui-input padding="0" :borderBottom="false" placeholder="请选择" disabled  :size="32"
                         backgroundColor="transparent" v-model="formData.treeleveltext"></tui-input>
            </tui-form-item>
          </tui-col>
        </tui-row>
        <tui-form-item label="生长环境" prop="growthenvironment" :labelSize="32">
          <tui-input padding="0" :borderBottom="false" placeholder="请输入" maxlength="50"  :size="32"
                     v-model="formData.growthenvironment"></tui-input>
        </tui-form-item>
        <tui-row>
          <tui-col :span="12">
            <tui-form-item label="预估树龄" prop="estimationtreeage" :position="2" :labelSize="32">
              <tui-input padding="0" :borderBottom="false" placeholder="请输入"  maxlength="10"  :size="32"
                         v-model="formData.estimationtreeage"></tui-input>
              <template v-slot:right>
                <text style="padding-left: 12rpx;color:#ccc;font-size: 14px">年</text>
              </template>
            </tui-form-item>
          </tui-col>
          <tui-col :span="12">
            <tui-form-item label="干周" prop="weekday" :position="2" :labelSize="32">
              <tui-input padding="0" :borderBottom="false" placeholder="请输入"  maxlength="10"  :size="32"
                         v-model="formData.weekday"></tui-input>
              <template v-slot:right>
                <text style="padding-left: 12rpx;color:#ccc;font-size: 14px">厘米</text>
              </template>
            </tui-form-item>
          </tui-col>
        </tui-row>
        <tui-row>
          <tui-col :span="12">
            <tui-form-item label="东西冠幅" prop="canopyeastwest" :position="2" :labelSize="32">
              <tui-input padding="0" :borderBottom="false" placeholder="请输入"  maxlength="10"  :size="32"
                         v-model="formData.canopyeastwest"></tui-input>
              <template v-slot:right>
                <text style="padding-left: 12rpx;color:#ccc;font-size: 14px">米</text>
              </template>
            </tui-form-item>
          </tui-col>
          <tui-col :span="12">
            <tui-form-item label="南北冠幅" prop="canopysouthnorth" :position="2" :labelSize="32">
              <tui-input padding="0" :borderBottom="false" placeholder="请输入"  maxlength="10"  :size="32"
                         v-model="formData.canopysouthnorth"></tui-input>
              <template v-slot:right>
                <text style="padding-left: 12rpx;color:#ccc;font-size: 14px">米</text>
              </template>
            </tui-form-item>
          </tui-col>
        </tui-row>
      </view>
      <!-- 触发按钮 -->
      <tui-button
          @click="toggleArea"
          type="primary"
          :loading="false"
          height="80rpx"
          plain
      >
        {{ isShow ? '- 隐藏更多属性' : '+ 展示更多属性' }}
      </tui-button>
    </tui-form>
    <view style="height: 60px;width: 100%"></view>
    <view class="tui-btn__box">
      <tui-button bold @click="submit">修改树木信息</tui-button>
    </view>
    <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>
import { uploadURL, OSSURL } from '@/config/app'
import { treeOwnership, addTree, treeLevelReq, treeDetailReq, updateTree } from "@/subPackages/common/api/tree.js";
const rules = [{
  name: "treetype",
  rule: ["required"],
  msg: ["请输入名称"]
}, {
  name: "treeheight",
  rule: ["maxLength:10", "isAmount"],
  msg: ["数高不能超过10个字符", "请输入正确"]
}, {
  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: ["请选择权属单位"]
  }, {
    name: "oldtreeownershipText",
    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
    }
  },
  data() {
    return {
      isShow: false,       // 控制区域显示/隐藏
      contentHeight: 200,    // 内容区域高度
      serverURL: uploadURL,
      treeOwnershipData: [],
      treeLevelData: [], // 级别
      show: false,
      levelshow: false,
      //仅对部分数据进行收集演示
      formData: {
        //数名
        treetype: '',
        //树高
        treeheight: '',
        //胸径
        dbh: '',
        //级别
        treelevel: '',
        treeleveltext: '',
        //权属单位
        managedutyunit: '',
        //权属分类
        oldtreeownership: '',
        oldtreeownershipText: '',
        latinname: '', // 拉丁名
        estimationtreeage: '', // 估测树龄
        canopysouthnorth: '', // 冠幅南北
        canopyeastwest: '', // 冠幅东西
        weekday: '', // 干周
        growlocation: '', // 位置
        growthenvironment: '', // 生长环境
        treeImgList: [], // 图片信息
        treeImgListFile: [], // 图片信息
        address: '',      // 位置名称
        latitude: '',     // 纬度
        longitude: '',     // 经度
        road: ''
      },
    }
  },
  watch: {
    treeId: {
      immediate: true,
      handler(newVal, oldVal) {
        if (newVal && newVal !== oldVal) {
          this.treeDetailQuery(newVal)
        }
      }
    }
  },
  onReady() {
    //开启即时校验，开启后输入即校验【参数必传】，第一参数：是否开启；第二参数：校验规则
    // 开启即时校验，参数：是否开启、校验规则
    this.$refs.form && this.$refs.form.immediateValidate(true, rules);
    // this.$refs.form && this.$refs.form.immediateValidate(true, rules)
  },
  onLoad(options) {
  },
  methods: {
    treeDetailQuery(newVal) {
      treeDetailReq(newVal).then(res => {
        this.formData = res.data
        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;
          }
        })
        this.formData.treeImgListFile = res.data.treeImgList.map(imgUrl => {
          return imgUrl.startsWith(OSSURL)
              ? imgUrl.slice(OSSURL.length)
              : imgUrl;
        });
      })
    },
    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)
        this.formData.treeImgListFile = e.imgArr
        this.formData.treeImgList = e.imgArr.map(item => OSSURL + item);
        console.log(this.formData.treeImgList)
        // baseURL
        // 手动触发treeImgList字段的校验
        this.$refs.form.validateField("treeImgList");
      }
    },
    // 删除图片回调
    handleRemove(index) {
      // 从列表中移除
      this.formData.treeImgList.splice(index, 1);
      this.formData.treeImgListFile.splice(index, 1);
      console.log(this.formData.treeImgList.length)
    },
    pickerShow() {
      this.show = true
    },
    pickerHide() {
      this.show = false
    },
    pickerChange(e) {
      console.log(e)
      this.formData.oldtreeownership = e.dictValue
      this.formData.oldtreeownershipText = e.dictLabel
    },
    pickerLevelShow() {
      this.levelshow = true
    },
    pickerLevelHide() {
      this.levelshow = false
    },
    pickerLevelChange(e) {
      console.log(e)
      this.formData.treelevel = e.dictValue
      this.formData.treeleveltext = e.dictLabel
    },
    submit() {
      // 3. 打印提交时的数据
      console.log("提交时treeImgList：", this.formData.treeImgList);
      // 手动校验图片
      console.log( this.formData);
      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('校验通过！')
          updateTree({data:this.formData}).then(res => {
            console.log(res)
            this.formData.maintainunit = this.userInfo.belongCompanyId
            if (res.code == '200') {
              uni.showToast({title: "修改成功", icon: "none"});
              // uni.$tui.href(`/subPackages/treePage/treeRecord?roadId=${this.formData.road}`)
              // uni.$tui.href(`/subPackages/treePage/treeFiles`)
              uni.redirectTo({
                url: '/subPackages/treePage/treeFiles' // 目标页面路径
              });
            }
          })
        } 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>