From 727bc60da3cae258de027bbabe7fcdc17b9f47d5 Mon Sep 17 00:00:00 2001 From: liugongyu <290219706@qq.com> Date: Sun, 4 Jan 2026 21:07:16 +0800 Subject: [PATCH] 新增树 --- api/tree-archive/tree-archive.js | 4 ++-- pages-sub/data/tree-archive/addTree.vue | 339 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------------------------------------------------------------------------------------------------------------- 2 files changed, 196 insertions(+), 147 deletions(-) diff --git a/api/tree-archive/tree-archive.js b/api/tree-archive/tree-archive.js index e3b6d2d..c05bd3c 100644 --- a/api/tree-archive/tree-archive.js +++ b/api/tree-archive/tree-archive.js @@ -26,8 +26,8 @@ export const treeRoadReq = (params) => { * @param {Object} params * @returns {Promise} */ -export const addTree = (params) => { - return get('/app-api/garden/tree/create', params); +export const addTree = (data) => { + return post('/app-api/garden/tree/create', data); }; diff --git a/pages-sub/data/tree-archive/addTree.vue b/pages-sub/data/tree-archive/addTree.vue index 6472943..5a16a90 100644 --- a/pages-sub/data/tree-archive/addTree.vue +++ b/pages-sub/data/tree-archive/addTree.vue @@ -2,30 +2,34 @@ - + - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + - + @@ -33,26 +37,26 @@ - - + + - - + + - + - - + + - - - - + - - + + - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - 提交 - + - @@ -174,24 +177,21 @@ import { ref, reactive, nextTick } from 'vue' import { onReady, onLoad, onShow } from '@dcloudio/uni-app'; import { addTree } from "@/api/tree-archive/tree-archive.js"; - import { useUploadImgs } from '@/common/utils/useUploadImgs' import { useUserStore } from '@/pinia/user'; // ========== 状态管理 ========== const userStore = useUserStore(); - -// ✅ 全局响应式数据 const formRef = ref(null) const isShow = ref(false) -const contentHeight = ref(700) +const contentHeight = ref(200) const treeOwnershipData = ref([]) const treeLevelData = ref([]) -const pickerShow = ref(false) -const levelshow = ref(false) const loadingFlag = ref(false) +const showActionSheet = ref(false); +const currentActionSheetData = reactive({ type: '', list: [], title: '' }); -// ✅✅✅ 核心修改：图片上传配置 完全对标参考代码写法 +// 图片上传配置 const treeImgs = useUploadImgs({ maxCount: 3, uploadText: '选择图片', @@ -199,10 +199,9 @@ const treeImgs = useUploadImgs({ formRef: formRef, fieldName: 'treeImgList' }) -// 图片数组兜底，防止非数组报错 if (!Array.isArray(treeImgs.rawImgList.value)) treeImgs.rawImgList.value = []; -// ✅ 表单数据 - 替代vue2的data +// 表单数据 const formData = reactive({ treetype: '', treeheight: '', @@ -227,59 +226,89 @@ const formData = reactive({ maintainunit: '' }) -// ✅✅✅ 核心修改：表单校验规则 - 图片校验改为参考代码同款 +// ✅ 核心修复3：修复所有校验规则里的 语法错误 【trigger: ['blur','change]'] → trigger: ['blur','change']】 const rules = reactive({ - treetype: [{ required: true, message: '请输入名称', trigger: 'blur' }], - treeheight: [{ max: 10, message: '树高不能超过10个字符', trigger: 'blur' }, { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的数字格式', trigger: 'blur' }], - dbh: [{ required: true, message: '请输入胸径', trigger: 'blur' }, { max: 10, message: '胸径不能超过10个字符', trigger: 'blur' }, { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的数字格式', trigger: 'blur' }], - estimationtreeage: [{ max: 10, message: '预估树龄不能超过10个字符', trigger: 'blur' }, { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的数字格式', trigger: 'blur' }], - weekday: [{ max: 10, message: '干周不能超过10个字符', trigger: 'blur' }, { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的数字格式', trigger: 'blur' }], - canopyeastwest: [{ max: 10, message: '东西冠幅不能超过10个字符', trigger: 'blur' }, { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的数字格式', trigger: 'blur' }], - canopysouthnorth: [{ max: 10, message: '南北冠幅不能超过10个字符', trigger: 'blur' }, { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的数字格式', trigger: 'blur' }], - growlocation: [{ required: true, message: '请地图选择位置', trigger: 'change' }], - managedutyunit: [{ required: true, message: '请输入管护单位', trigger: 'blur' }], - oldtreeownershipText: [{ required: true, message: '请选择权属分类', trigger: 'change' }], - treeImgList: [treeImgs.imgValidateRule] // ✅ 图片校验规则和参考代码一致 + treetype: [{required: true, message: '请输入名称', trigger: ['blur','change']}], + treeheight: [{max: 10, message: '树高不能超过10个字符', trigger: ['blur','change']}, { + pattern: /^\d+(\.\d{1,2})?$/, + message: '格式不正确', + trigger: ['blur','change'] + }], + dbh: [{required: true, message: '请输入胸径',trigger: ['blur','change']}, { + max: 10, + message: '胸径不能超过10个字符', + trigger: ['blur','change'] + }, {pattern: /^\d+(\.\d{1,2})?$/, message: '格式不正确',trigger: ['blur','change']}], + estimationtreeage: [{max: 10, message: '预估树龄不能超过10个字符', trigger: ['blur','change']}, { + pattern: /^\d+(\.\d{1,2})?$/, + message: '格式不正确', + trigger: ['blur','change'] + }], + weekday: [{max: 10, message: '干周不能超过10个字符', trigger: ['blur','change']}, { + pattern: /^\d+(\.\d{1,2})?$/, + message: '格式不正确', + trigger: ['blur','change'] + }], + canopyeastwest: [{max: 10, message: '东西冠幅不能超过10个字符',trigger: ['blur','change']}, { + pattern: /^\d+(\.\d{1,2})?$/, + message: '格式不正确', + trigger: ['blur','change'] + }], + canopysouthnorth: [{max: 10, message: '南北冠幅不能超过10个字符', trigger: ['blur','change']}, { + pattern: /^\d+(\.\d{1,2})?$/, + message: '格式不正确', + trigger: ['blur','change'] + }], + growlocation: [{required: true, message: '请地图选择位置', trigger: ['blur','change']}], + managedutyunit: [{required: true, message: '请输入管护单位', trigger: ['blur','change']}], + oldtreeownershipText: [{required: true, message: '请选择权属分类', trigger: ['blur','change']}], + treeImgList: [treeImgs.imgValidateRule] }) -// ✅ 生命周期 +// 生命周期 onLoad((options) => { formData.road = options.roadId }) - onShow(async () => { - - treeLevelData.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('tree_level')); - treeOwnershipData.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('tree_ownership')); + treeLevelData.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('tree_level')) + treeOwnershipData.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('tree_ownership')) }) - -// 修复表单ref挂载问题，和参考代码一致 onReady(() => { nextTick(() => { formRef.value?.setRules(rules); }); }); - - const toggleArea = () => { isShow.value = !isShow.value } - -// 权属分类选择回调 -const pickerChange = (val) => { - formData.oldtreeownership = val.value - formData.oldtreeownershipText = val.label - pickerShow.value = false -} - -// 树木级别选择回调 -const pickerLevelChange = (val) => { - formData.treelevel = val.value - formData.treeleveltext = val.label - levelshow.value = false -} +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 = () => { @@ -292,7 +321,7 @@ const openMap = () => { fail: (err) => { console.error('地图选择失败', err); if (err.errMsg.includes('auth deny')) { - uni.showToast({ title: '请授权位置权限', icon: 'none' }); + uni.showToast({title: '请授权位置权限', icon: 'none'}); } } }); @@ -301,26 +330,18 @@ const openMap = () => { // 表单提交核心方法 const submit = async () => { if (loadingFlag.value) return - // 表单校验 const valid = await formRef.value.validate() if (!valid) return - - // ✅✅✅ 核心修改：获取上传成功的图片地址，和参考代码一致 const uploadImgUrls = treeImgs.getSuccessImgUrls() - - // 组装提交参数 formData.maintainunit = uni.getStorageSync('userInfo')?.belongCompanyId || '' - formData.treeImgList = uploadImgUrls // 赋值图片数组 + formData.treeImgList = uploadImgUrls loadingFlag.value = true - try { - const res = await addTree({ data: { ...formData } }) - if (res.code == '200') { - uni.showToast({ title: "新增成功", icon: "success" }); - uni.redirectTo({ url: '/subPackages/treePage/treeFiles' }); - } + const res = await addTree(formData) + uni.showToast({title: "新增成功", icon: "success"}); + uni.redirectTo({url: '/pages-sub/data/tree-archive/index'}); } catch (err) { - uni.showToast({ title: "新增失败，请重试", icon: "none" }); + uni.showToast({title: "新增失败，请重试", icon: "none"}); console.error(err) } finally { loadingFlag.value = false @@ -339,7 +360,35 @@ const submit = async () => { 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; +} \ No newline at end of file -- libgit2 0.21.4