JCSS / jcss-miniprogram

  <template>
    <view class="container">

      <!-- 顶部固定吸顶Tabs区域 -->

      <up-sticky bg-color="#ffffff">
        <view class="header-wrap">
          <up-tabs
              v-model="activeTab"
              :list="tabList"
              active-color="#1989fa"
              inactive-color="#666"
              font-size="30rpx"
              @click="handleTabChange"
              :scrollable="false"
          />
        </view>
      </up-sticky>

      <!-- Tab0 基本信息页面 - v-if改v-show 核心修复 -->

      <view v-show="activeTab === 0" class="base-info-wrap">

        <up-form :model="formData" ref="formRef" label-width="140rpx" border-bottom>
          <up-form-item label="名称" prop="treetype" required>
            <up-input v-model.trim="formData.treetype" placeholder="请输入名称" maxlength="30" border="none"/>
          </up-form-item>
  
          <view class="form-row-wrap">
            <up-row gutter="10">
              <up-col span="6">
                <up-form-item label="胸径" prop="dbh" required>
                  <up-input v-model.trim="formData.dbh" placeholder="请输入" maxlength="10" border="none"
                            input-align="left"/>
                  <template #right>
                    <text style="padding-left: 12rpx;color:#ccc;font-size:14px">厘米</text>
                  </template>
                </up-form-item>
              </up-col>
              <up-col span="6">
                <up-form-item label="高度" prop="treeheight">
                  <up-input v-model.trim="formData.treeheight" placeholder="请输入" maxlength="10" border="none"
                            input-align="left"/>
                  <template #right>
                    <text style="padding-left: 12rpx;color:#ccc;font-size:14px;">米</text>
                  </template>
                </up-form-item>
              </up-col>
            </up-row>
          </view>
  
          <up-form-item label="位置" prop="growlocation" required class="location-form-item" @click="openMap">
            <up-input v-model="formData.growlocation" placeholder="请选择" readonly border="none"/>
            <template #right>
              <up-icon name="map" size="22"></up-icon>
            </template>
          </up-form-item>
  
          <up-row gutter="10">
            <up-col span="6">
              <up-form-item label="经度" :borderBottom="false">
                <up-input v-model="formData.longitude" placeholder="" readonly border="none"/>
              </up-form-item>
            </up-col>
            <up-col span="6">
              <up-form-item label="纬度" :borderBottom="false">
                <up-input v-model="formData.latitude" placeholder="" readonly border="none"/>
              </up-form-item>
            </up-col>
          </up-row>
  
          <up-form-item label="管护单位" prop="managedutyunit" required>
            <up-input v-model.trim="formData.managedutyunit" placeholder="请输入" maxlength="30" border="none"/>
          </up-form-item>
  
          <up-form-item label="权属分类" prop="oldtreeownershipText" required arrow
                        @click="handleActionSheetOpen('ownership')">
            <up-input v-model.trim="formData.oldtreeownershipText" placeholder="请选择" readonly border="none"
                      bg-color="transparent"/>
          </up-form-item>
  
          <!-- ✅ 核心修复：补全name属性 + 所有配置齐全 -->
          <up-form-item label="图片信息" prop="treeImgList" required>
            <up-upload
                name="treeImgList"
                :file-list="treeImgList.imgList.value"
                @after-read="treeImgList.uploadImgs"
                @delete="treeImgList.deleteImg"
                multiple
                :width="70"
                :height="70"
                :max-count="treeImgList.uploadConfig.maxCount"
                :upload-text="treeImgList.uploadConfig.uploadText"
                :size-type="treeImgList.uploadConfig.sizeType"
            ></up-upload>
          </up-form-item>
  
          <view
              class="animated-area"
              :style="{
              height: isShow ? contentHeight + 'px' : '0',
              opacity: isShow ? 1 : 0,
              overflow: 'hidden'
            }"
          >
            <up-row gutter="10">
              <up-col span="6">
                <up-form-item label="拉丁文" prop="latinname">
                  <up-input v-model.trim="formData.latinname" placeholder="请输入" maxlength="30" border="none"/>
                </up-form-item>
              </up-col>
              <up-col span="6">
                <up-form-item label="级别" arrow @click="handleActionSheetOpen('level')">
                  <up-input v-model.trim="formData.treeleveltext" placeholder="请选择" readonly border="none"
                            bg-color="transparent"/>
                </up-form-item>
              </up-col>
            </up-row>
  
            <up-form-item label="生长环境" prop="growthenvironment">
              <up-input v-model.trim="formData.growthenvironment" placeholder="请输入" maxlength="50" border="none"/>
            </up-form-item>
  
            <view class="form-row-wrap">
              <up-row gutter="10">
                <up-col span="6">
                  <up-form-item label="预估树龄" prop="estimationtreeage">
                    <up-input v-model.trim="formData.estimationtreeage" placeholder="请输入" maxlength="10" border="none"
                              input-align="left"/>
                    <template #right>
                      <text style="padding-left:12rpx;color:#ccc;font-size:14px">年</text>
                    </template>
                  </up-form-item>
                </up-col>
                <up-col span="6">
                  <up-form-item label="干周" prop="weekday">
                    <up-input v-model.trim="formData.weekday" placeholder="请输入" maxlength="10" border="none"
                              input-align="left"/>
                    <template #right>
                      <text style="padding-left:12rpx;color:#ccc;font-size:14px">厘米</text>
                    </template>
                  </up-form-item>
                </up-col>
              </up-row>
            </view>
  
            <view class="form-row-wrap">
              <up-row gutter="10">
                <up-col span="6">
                  <up-form-item label="东西冠幅" prop="canopyeastwest">
                    <up-input v-model.trim="formData.canopyeastwest" placeholder="请输入" maxlength="10" border="none"
                              input-align="left"/>
                    <template #right>
                      <text style="padding-left:12rpx;color:#ccc;font-size:14px">米</text>
                    </template>
                  </up-form-item>
                </up-col>
                <up-col span="6">
                  <up-form-item label="南北冠幅" prop="canopysouthnorth">
                    <up-input v-model.trim="formData.canopysouthnorth" placeholder="请输入" maxlength="10" border="none"
                              input-align="left"/>
                    <template #right>
                      <text style="padding-left:12rpx;color:#ccc;font-size:14px">米</text>
                    </template>
                  </up-form-item>
                </up-col>
              </up-row>

            </view>
          </view>

  
          <up-button
              @click="toggleArea"
              type="primary"
              plain
              size="large"
              style="margin-top:20rpx"
          >
            {{ isShow ? '- 隐藏区域' : '+ 显示区域' }}
          </up-button>
        </up-form>

      </view>

      <!-- Tab1 变更日志页面 - 不变，保留原布局 -->

      <view v-show="activeTab === 1" class="log-wrap">

        <up-empty v-if="logRows.length === 0" marginTop="100" text="暂无变更日志"></up-empty>

        <view class="record-wrap" v-else>
          <up-card
              v-for="item in logRows"
              :key="item.id"
              :border="false"
              :show-head="false"
              class="tree-card"
              :foot-border-top="false"

              @click="toLogDetailPage(item)"

          >
            <template #body>
              <view class="card-body-inner">

                <view class="record-list-left" :style="`background-image: url(${item.treephotoone});`"></view>
                <view class="record-list-right">

                  <view class="up-flex up-flex-items-center up-flex-between">

                    <view class="u-line-1 treetypeName">{{ item.treetype }}</view>
                    <view style="text-align: right">{{ timeFormat(item.updatetime) }}</view>
                  </view>

                  <view class=" fs-align__center" style="margin: 8px 0">
                    <img src="../../../static/imgs/tree/tree-high.png" style="width:12px;height:12px;margin-right:6px;"

                         alt=""> 高度：{{ item.treeheight }} 米

                  </view>
                  <view class=" fs-align__center">

                    <img src="../../../static/imgs/tree/treearound.png" style="width:12px;height:12px;margin-right:6px;"

                         alt="">胸径：{{ item.dbh }} 厘米

                  </view>
                </view>
              </view>
              <view class="treenumber-no">
                树木编号：{{ item.treenumber }}
              </view>
            </template>
          </up-card>
        </view>
      </view>
  

      <!-- 修改：底部按钮 新增改修改，只在基本信息Tab显示 -->
      <view class="fixed-bottom-btn-wrap" v-show="activeTab === 0">
        <up-button type="primary" @click="submit" :loading="loadingFlag" size="large" >修改树木信息</up-button>

      </view>

      <!-- 字典选择弹窗 -->
      <up-action-sheet
          :show="showActionSheet"
          :actions="currentActionSheetData.list"
          :title="currentActionSheetData.title"
          @close="handleActionSheetClose"
          @select="handleActionSheetSelect"
      ></up-action-sheet>
  

    </view>

  </template>
  

  <script setup>

  import { ref, reactive, nextTick } from 'vue'

  import { onReady, onLoad, onShow, onUnload } from '@dcloudio/uni-app';

  import { treeRoadReq, treeLogReq, treeDetailReq, updateTree } from "@/api/tree-archive/tree-archive.js";
  import { timeFormat } from '@/uni_modules/uview-plus';
  import { useUploadImgs } from '@/common/utils/useUploadImgs'
  import { useUserStore } from '@/pinia/user';
  

  // ========== 常量配置区

  const CONST = {

    // 上传配置 统一抽离

    UPLOAD_CONFIG: { maxCount: 3, uploadText: '选择图片', sizeType: ['compressed'] }
  }
  
  // ========== 页面关闭统一跳转 ==========

  onUnload(() => {

    uni.reLaunch({url: '/pages-sub/data/tree-archive/index'})

  })

  
  // ========== 基础变量 ==========
  const rows = ref([])
  const roadId = ref('')
  const count = ref(0)

  const treeId = ref('') // 树木主键ID 必传修改接口
  const loadingFlag = ref(false)
  const isInit = ref(false) // ✅ 新增：防止重复加载回显数据的核心标识

  
  // ========== Tab切换核心变量 ==========
  const activeTab = ref(0); // 0=基本信息 1=变更日志

  const tabList = ref([{name: '基本信息'}, {name: '变更日志'}]);

  
  // ========== 数据变量 ==========

  const logRows = ref([]) // 变更日志列表数据
  const userStore = useUserStore();
  const formRef = ref(null)
  const isShow = ref(false)
  const contentHeight = ref(200)
  const treeOwnershipData = ref([])
  const treeLevelData = ref([])
  const showActionSheet = ref(false);
  const currentActionSheetData = reactive({type: '', list: [], title: ''});
  

  // ========== 核心修复：图片上传配置  ==========

  const treeImgList = useUploadImgs({
    ...CONST.UPLOAD_CONFIG,
    formRef: formRef,
    fieldName: 'treeImgList'
  })

  // 初始化图片数组为纯净空数组，杜绝残留数据

  treeImgList.imgList.value = []
  treeImgList.rawImgList.value = []
  
  // ========== 表单数据 ==========
  const formData = reactive({
    id: '', // 新增主键ID，提交修改必传

    treetype: '',
    treeheight: '',
    dbh: '',

    treelevel: '',
    treeleveltext: '',
    managedutyunit: '',
    oldtreeownership: '',
    oldtreeownershipText: '',
    latinname: '',
    estimationtreeage: '',
    canopysouthnorth: '',
    canopyeastwest: '',
    weekday: '',
    growlocation: '',
    growthenvironment: '',
    treeImgList: [],
    address: '',
    latitude: '',
    longitude: '',
    road: '',
    maintainunit: '',
    treephotoone: '',
    treephototwo: '',
    treephotothree: '',
    treephotofour: '',
    treephotofive: ''
  })
  
  // ========== 表单校验规则【完整保留，无修改】 ==========
  const isPureZero = (val) => {
    if (!val) return false;
    const pureZeroReg = /^0+$/;
    return pureZeroReg.test(val.trim());
  };
  const trimFormData = (obj) => {
    for (const key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key) && typeof obj[key] === 'string') {
        obj[key] = obj[key].trim();
      }
    }
  };
  const emojiReg = /[\uD83C\uD83D\uD83E][\uDC00-\uDFFF]+|[\u2702\u2705\u2708-\u2712\u2714\u2716\u271D\u2721\u2728\u2733\u2734\u2744\u2747\u274C\u274E\u2753-\u2755\u2757\u2763-\u2767\u2795-\u2797\u27A1\u27B0\u27BF\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299\ufe0f\u200d]+/g;
  const filterEmoji = (val) => typeof val === 'string' ? val.replace(emojiReg, '') : val;
  const hasEmoji = (val) => val && emojiReg.test(val);
  const rules = reactive({
    treetype: [
      {
        validator: (rule, val, callback) => hasEmoji(val) ? callback(new Error('禁止输入表情符号')) : callback(),
        trigger: ['blur', 'change', 'input'],
        priority: 10
      },
      {required: true, message: '请输入名称', trigger: ['blur', 'change', 'input']},
      {max: 30, message: '名称最多输入30个字符', trigger: ['blur', 'change', 'input']}
    ],
    treeheight: [
      {max: 10, message: '树高不能超过10个字符', trigger: ['blur', 'change', 'input']},
      {pattern: /^\d+(\.\d{1,2})?$/, message: '格式不正确，支持数字或两位小数', trigger: ['blur', 'change', 'input']},
      {
        validator: (rule, val, callback) => isPureZero(val) ? callback(new Error('不能输入纯0无效值')) : callback(),
        trigger: ['blur', 'change', 'input']
      }
    ],
    dbh: [
      {
        validator: (rule, val, callback) => hasEmoji(val) ? callback(new Error('禁止输入表情符号')) : callback(),
        trigger: ['blur', 'change', 'input'],
        priority: 10
      },
      {required: true, message: '请输入胸径', trigger: ['blur', 'change', 'input']},
      {max: 10, message: '胸径不能超过10个字符', trigger: ['blur', 'change', 'input']},
      {pattern: /^\d+(\.\d{1,2})?$/, message: '格式不正确，支持数字或两位小数', trigger: ['blur', 'change', 'input']},
      {
        validator: (rule, val, callback) => isPureZero(val) ? callback(new Error('不能输入纯0无效值')) : callback(),
        trigger: ['blur', 'change', 'input']
      }
    ],
    estimationtreeage: [
      {max: 10, message: '预估树龄不能超过10个字符', trigger: ['blur', 'change', 'input']},
      {pattern: /^\d+(\.\d{1,2})?$/, message: '格式不正确，支持数字或两位小数', trigger: ['blur', 'change', 'input']},
      {
        validator: (rule, val, callback) => isPureZero(val) ? callback(new Error('不能输入纯0无效值')) : callback(),
        trigger: ['blur', 'change', 'input']
      }
    ],
    weekday: [
      {max: 10, message: '干周不能超过10个字符', trigger: ['blur', 'change', 'input']},
      {pattern: /^\d+(\.\d{1,2})?$/, message: '格式不正确，支持数字或两位小数', trigger: ['blur', 'change', 'input']},
      {
        validator: (rule, val, callback) => isPureZero(val) ? callback(new Error('不能输入纯0无效值')) : callback(),
        trigger: ['blur', 'change', 'input']
      }
    ],
    canopyeastwest: [
      {max: 10, message: '东西冠幅不能超过10个字符', trigger: ['blur', 'change', 'input']},
      {pattern: /^\d+(\.\d{1,2})?$/, message: '格式不正确，支持数字或两位小数', trigger: ['blur', 'change', 'input']},
      {
        validator: (rule, val, callback) => isPureZero(val) ? callback(new Error('不能输入纯0无效值')) : callback(),
        trigger: ['blur', 'change', 'input']
      }
    ],
    canopysouthnorth: [
      {max: 10, message: '南北冠幅不能超过10个字符', trigger: ['blur', 'change', 'input']},
      {pattern: /^\d+(\.\d{1,2})?$/, message: '格式不正确，支持数字或两位小数', trigger: ['blur', 'change', 'input']},
      {
        validator: (rule, val, callback) => isPureZero(val) ? callback(new Error('不能输入纯0无效值')) : callback(),
        trigger: ['blur', 'change', 'input']
      }
    ],
    growlocation: [{required: true, message: '请选择地图位置', trigger: ['blur', 'change', 'manual']}],
    managedutyunit: [
      {
        validator: (rule, val, callback) => hasEmoji(val) ? callback(new Error('禁止输入表情符号')) : callback(),
        trigger: ['blur', 'change', 'input'],
        priority: 10
      },
      {required: true, message: '请输入管护单位', trigger: ['blur', 'change', 'input']},
      {max: 30, message: '管护单位最多输入30个字符', trigger: ['blur', 'change', 'input']}
    ],
    oldtreeownershipText: [{required: true, message: '请选择权属分类', trigger: ['blur', 'change']}],
    latinname: [
      {
        validator: (rule, val, callback) => hasEmoji(val) ? callback(new Error('禁止输入表情符号')) : callback(),
        trigger: ['blur', 'change', 'input'],
        priority: 10
      },
      {max: 30, message: '拉丁文最多输入30个字符', trigger: ['blur', 'change', 'input']}
    ],
    growthenvironment: [
      {
        validator: (rule, val, callback) => hasEmoji(val) ? callback(new Error('禁止输入表情符号')) : callback(),
        trigger: ['blur', 'change', 'input'],
        priority: 10
      },
      {max: 50, message: '生长环境最多输入50个字符', trigger: ['blur', 'change', 'input']}
    ],
    treeImgList: [treeImgList.imgValidateRule]

  })

  
  // ========== 生命周期 ==========
  onLoad((options) => {
    console.log('编辑页入参', options)
    roadId.value = options.roadId || ''
    count.value = options.count || 0

    treeId.value = options.id || '' // 获取树木主键ID
    formData.id = treeId.value      // 赋值给表单，提交必传
    formData.road = roadId.value    // 赋值道路ID
    isInit.value = false // 初始化标识为false
  });
  
  onShow(async () => {
    treeLevelData.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('tree_level'))
    treeOwnershipData.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('tree_ownership'))

    if (activeTab.value === 0 && treeId.value && !isInit.value) {
      await getTreeDetail()
      isInit.value = true // 加载完成后标记为true，永不重复执行

    }
  })
  

  onReady(() => {
    nextTick(() => formRef.value?.setRules(rules));
  });

  // ========== Tab切换事件 ==========

  const handleTabChange = async (item) => {

    activeTab.value = item.index

    if (activeTab.value === 0) {
      getTreeLogList()
    } else if (activeTab.value === 1) {
      getTreeLogList()

    }
  }
  
  // ========== 接口请求 ==========

  const treeRoadQuery = async () => {

    const res = await treeRoadReq({road: roadId.value})

    rows.value = res.list
  }
  

  // ==========

  const getTreeDetail = async () => {
    const res = await treeDetailReq({id: treeId.value})
    Object.assign(formData, res)
    // 字典文本回显
    formData.oldtreeownershipText = uni.$dict.getDictLabel('tree_ownership', res.oldtreeownership)
    formData.treeleveltext = uni.$dict.getDictLabel('tree_level', formData.treelevel)
  

    treeImgList.imgList.value = []
    treeImgList.rawImgList.value = []
    formData.treephotoone = ''
    formData.treephototwo = ''
    formData.treephotoone = ''
    formData.treephotothree = ''
    formData.treephotofour = ''
    formData.treephotofive = ''
  

    if (Array.isArray(res.treeImgList) && res.treeImgList.length > 0) {
      const imgList = res.treeImgList.map((url, idx) => ({
        url,
        name: `renew_img_${idx}`,
        status: 'success'
      }));
      // 直接赋值，不再追加，彻底解决重复问题
      treeImgList.imgList.value = imgList
      treeImgList.rawImgList.value = imgList
    }
  }

  
  // 获取树木的变更日志列表
  const getTreeLogList = async () => {

    const res = await treeLogReq({treeid: treeId.value})

    logRows.value = res.list
  }
  

  // ========== 表单相关方法 ==========
  const toggleArea = () => isShow.value = !isShow.value
  
  const handleActionSheetOpen = (type) => {
    const configMap = {
      ownership: {title: '请选择权属分类', list: treeOwnershipData.value},
      level: {title: '请选择树木级别', list: treeLevelData.value}
    };
    Object.assign(currentActionSheetData, configMap[type], {type});
    showActionSheet.value = true;
  };
  
  const handleActionSheetClose = () => {
    showActionSheet.value = false;
    Object.assign(currentActionSheetData, {type: '', list: [], title: ''});
  };
  
  const handleActionSheetSelect = (e) => {
    const {type} = currentActionSheetData;
    if (type === 'ownership') {
      formData.oldtreeownership = e.value
      formData.oldtreeownershipText = e.name
      formRef.value?.validateField('oldtreeownershipText');
    } else if (type === 'level') {
      formData.treelevel = e.value
      formData.treeleveltext = e.name
    }
    handleActionSheetClose();
  };
  
  // 地图选址
  const openMap = () => {
    uni.chooseLocation({
      success: async (res) => {
        formData.growlocation = res.address
        formData.latitude = res.latitude
        formData.longitude = res.longitude
        await nextTick()
        formRef.value?.validateField('growlocation');
      },
      fail: (err) => {
        console.error('地图选择失败', err);
        err.errMsg.includes('auth deny') && uni.showToast({title: '请授权位置权限', icon: 'none'});
      }
    });

  }
  

  // ========== 核心修改：表单提交 ==========
  const submit = async () => {
    if (loadingFlag.value) return
    // 过滤表情+去空格
    for (const key in formData) {
      if (typeof formData[key] === 'string') {
        formData[key] = filterEmoji(formData[key]).trim();
      }
    }
    // 表单校验
    const valid = await formRef.value.validate()
    if (!valid) return

    // 图片取值 统一调用封装方法

    const uploadImgUrls = treeImgList.getSuccessImgUrls()
    formData.maintainunit = userStore.userInfo.user.companyId
    formData.treeImgList = uploadImgUrls
    loadingFlag.value = true
    try {
      await updateTree(formData)
      uni.showToast({title: "修改成功", icon: "success"});
      uni.redirectTo({url: '/pages-sub/data/tree-archive/index'});
    } catch (err) {
      uni.showToast({title: "修改失败，请重试", icon: "none"});
      console.error(err)
    } finally {
      loadingFlag.value = false
    }

  }
  

  // ========== 页面跳转 ==========

  const toLogDetailPage = (i) => {

    uni.navigateTo({

      url: `/pages-sub/data/tree-archive/logDetail`,

      success: (res) => {

        res.eventChannel.emit('logData', i);
      }

    })
  }
  </script>
  

  <style scoped lang="scss">

  .container {
    min-height: 100vh;

    padding-bottom: 100rpx;

  }
  

  .header-wrap {
    background-color: #fff;
    padding: 10rpx 0;

    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.03);

  }
  

  .base-info-wrap {

    padding: 15px 15px;
    background: #fff;

  }
  

  .log-wrap {
    min-height: calc(100vh - 120rpx);
  }

  .record-wrap {
    padding-bottom: 20px;
  }
  
  .treetypeName {
    flex: 1;

    font-size: 14px;

    font-weight: bold;
  }
  
  .record-list-left {
    height: 70px;
    width: 70px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
  }
  
  .record-list-right {
    margin-left: 20px;
    flex: 1;
    overflow: hidden;
  }
  

  
  .treenumber-no {
    padding: 3px 10px;
    background: #bdefd0;
    font-size: 12px;
    margin-top: 8px;
  }
  

  .card-body-inner {

    display: flex;

    font-size: 12px;

  }
  

  .fs-align__center {
    display: flex;
    align-items: center;
  }

  // 表单样式
  .animated-area {
    transition: all 0.3s ease-out;
    margin-top: 10rpx;

  }
  

  .location-form-item {
    padding-right: 10rpx;
  }

  .form-row-wrap {
    width: 100%;

    display: flex;

    flex-direction: column;
  
    :deep(.u-form-item) {
      position: relative;
      margin-bottom: 0 !important;
    }
  
    :deep(.u-form-item__body__right__message ) {
      position: absolute;
      left: 0;
      bottom: -20rpx;
      line-height: 20rpx;
      font-size: 22rpx;
      color: #f56c6c;
      width: 100%;
      box-sizing: border-box;
    }

  }

  .form-row-wrap + .u-form-item {
    margin-top: 25rpx !important;
  }

  </style>