<template> <view> <cu-custom bgColor="bg-blue" :isBack="true" v-if="title == '新建楼宇信息'"> <block slot="backText">返回</block> <block slot="content">新建楼宇信息</block> </cu-custom> <cu-custom bgColor="bg-blue" :isBack="true" v-if="title == '修改楼宇信息'"> <block slot="backText">返回</block> <block slot="content">修改楼宇信息</block> </cu-custom> <cu-custom bgColor="bg-blue" :isBack="true" v-if="title == '查看楼宇信息'"> <block slot="backText">返回</block> <block slot="content">查看楼宇信息</block> </cu-custom> <form @submit="formSubmit" class="cu-list menu"> <view class="cu-form-group margin-top"> <view class="title"> 所属园区 </view> <jp-picker v-model="inputForm.parkManagement.id" rangeKey="label" rangeValue="value" :range="parkList" :disabled="ischeck"> </jp-picker> </view> <view class="cu-form-group margin-top"> <view class="title"> <text class="red-color ">* </text> 楼宇名称 </view> <input v-model="inputForm.buildingName" placeholder="请填写楼宇名称" :disabled="ischeck"></input> </view> <view class="cu-form-group margin-top"> <view class="title"> 楼宇经度 </view> <input v-model="inputForm.buildingLongitude" placeholder="请填写楼宇经度" :disabled="ischeck"></input> </view> <view class="cu-form-group margin-top"> <view class="title"> 楼宇纬度 </view> <input v-model="inputForm.buildingLatitude" placeholder="请填写楼宇纬度" :disabled="ischeck"></input> </view> <view class="cu-form-group margin-top"> <view class="title"> 楼宇联系人 </view> <input v-model="inputForm.buildingContacts" placeholder="请填写楼宇联系人" :disabled="ischeck"></input> </view> <view class="cu-form-group margin-top"> <view class="title"> 楼宇联系人电话 </view> <input v-model="inputForm.reserve2" placeholder="请填写楼宇联系人电话" :disabled="ischeck"></input> </view> <view class="cu-form-group margin-top"> <view class="title"> 楼宇层数 </view> <input v-model="inputForm.buildingNum" placeholder="请填写楼宇层数" :disabled="ischeck"></input> </view> <view class="cu-form-group margin-top"> <view class="title"> 楼宇总面积 </view> <input v-model="inputForm.buildingArea" placeholder="请填写楼宇总面积" :disabled="ischeck"></input> </view> <view class="cu-form-group margin-top"> <view class="title"> 地点 </view> <input v-model="inputForm.placeSelectName" placeholder="请填写地点" disabled="disabled"></input> </view> <view class="cu-form-group margin-top"> <view class="title"> 街道 </view> <jp-picker v-model="inputForm.street" rangeKey="label" rangeValue="value" :range="$dictUtils.getDictList('region_management')" :disabled="ischeck"> <view class="picker"> {{$dictUtils.getDictLabel('region_management', inputForm.street ,'请选择')}} </view> </jp-picker> </view> <view class="cu-form-group margin-top"> <uni-file-picker style="margin-bottom: 10px;" limit="3" ref="picFile" v-model="picLists" fileMediatype="image" mode="grid" title="图片上传" :auto-upload="autoUpload" @select="select" @progress="progress" @success="success" @fail="fail" @delete="deleteFile" :imageStyles="imageStyles" :disabled="ischeck"> </uni-file-picker> </view> <view class="cu-form-group margin-top"> <view class="title"> 楼宇产业定位 </view> <textarea v-model="inputForm.buildingIndustry" placeholder="请填写楼宇产业定位" :disabled="ischeck"></textarea> </view> <view class="cu-form-group margin-top"> <view class="title"> 楼宇描述 </view> <textarea v-model="inputForm.buildingDescribe" placeholder="请填写楼宇描述" :disabled="ischeck"></textarea> </view> <view class="cu-form-group margin-top"> <view class="title"> 备注 </view> <textarea placeholder='请填写备注' v-model="inputForm.notes" :disabled="ischeck"></textarea> </view> <view style="height: 40rpx;"></view> <view class="padding-xl" v-if="!ischeck"> <button form-type="submit" class="cu-btn block bg-blue margin-tb-sm lg">提交</button> </view> </form> </view> </template> <script> var graceChecker = require("@/common/graceChecker.js"); import revenueListService from '@/api/revenue/revenueListService' import loginService from '@/api/auth/loginService.js' export default { onShow() {}, data() { return { title: '新建楼宇信息', inputForm: { "id": "23082c03aeb4464ea1b4577125a56767", "createDate": "2024-12-17 17:52:47", "createBy": { "id": "1506167921787850753", "admin": false, "roleIdList": [], "roleIds": "", "postIdList": [], "roleNames": "" }, "updateDate": "2024-12-19 11:39:38", "updateBy": { "id": "1", "admin": false, "roleIdList": [], "roleIds": "", "postIdList": [], "roleNames": "" }, "delFlag": 0, "parkManagement": { "id": "c8c61706e1e3430ca4fdd8413e7b6704", "parkName": "人工智能港", "propertyPerson": "洪晶晶", "propertyPhone": "13515140456" }, "buildingName": "B3", "buildingLongitude": "120.11693", "buildingLatitude": "33.328376", "buildingContacts": "吉祥", "buildingDescribe": "", "buildingNum": "8", "buildingArea": "8081", "buildingIndustry": "", "placeSelectName": "盐城市/盐都区", "place": "320900/320903/320903004", "street": "1", "placeDetailed": "", "placeSelectType3": "320900", "placeSelectType4": "320903", "placeSelectType5": "320903004", "picture": "", "notes": "", "reserve2": "13813223933", "reserve3": "", "reserve4": "1", "reserve9": "00003" }, autoUpload: false, picLists: [], picUrl: [], imageStyles: { width: 90, height: 90 }, parkList: [], ischeck: false, } }, created() {}, mounted() { }, async onLoad(query) { console.log(query, '==============>query') if (query && query.ischeck) { this.ischeck = true this.title = "查看楼宇信息"; } if (query && query.id && !query.ischeck) { this.title = "修改楼宇信息"; } }, methods: { getParkList() { loginService.parkList({ current: 1, size: 1000000, }).then(({ data }) => { this.parkList = data.records.map((item) => { return { label: item.parkName, value: item.id } }) console.log(this.parkList, '=============>') }).catch(e => { console.log(e) }) }, // 获取上传进度 progress(e) { console.log('上传进度:', e) }, // 上传成功 success(e) { console.log('上传成功') }, // 上传失败 fail(e) { console.log('上传失败:', e) }, deleteFile(e) { this.picUrl.splice(e.index, 1) }, // 获取上传状态 select(e) { console.log('选择文件:', e) var _this = this var i = 0 upload() function upload() { if (i >= e.tempFiles.length) { return; } var item = e.tempFiles[i] uni.showLoading({ title: "上传中", mask: true }); uni.uploadFile({ url: '/file/upload?uploadPath=', // 仅为示例,非真实的接口地址 filePath: item.url, name: 'file', formData: { 'fileName': item.name }, header: { 'token': _this.$auth.getUserToken() }, success: (res) => { var data = res.data if (typeof data['error'] != "undefined") { uni.showToast({ icon: 'none', title: '上传失败,请联系开发!' }); _this.$refs.picFile.clearFiles(_this.picLists.length) } else { _this.picUrl.push({ url: data, uuid: item.uuid }) i++; upload() } }, fail: () => { uni.hideLoading(); uni.showToast({ icon: 'none', title: '上传失败,请联系开发!' }); _this.$refs.picFile.clearFiles(_this.picLists.length) }, complete: function() { uni.hideLoading(); } }); } }, formSubmit: function(e) { //定义表单规则 var rule = [{ name: "buildingName", checkType: "notnull", checkRule: "", errorMsg: "楼宇名称不能为空" }, ]; //进行表单检查 var formData = this.inputForm; var checkRes = graceChecker.check(formData, rule); console.log(checkRes, '===================>checkRes') if (checkRes) { uni.showLoading() this.inputForm.picture = []; this.picUrl.forEach(item => { this.inputForm.picture.push(item.url) }) this.inputForm.picture = this.inputForm.picture.toString(); loginService.buildSave(this.inputForm).then(({ data }) => { uni.showToast({ title: data, icon: "success" }); uni.navigateTo({ url: '/pages/buildList/buildList' }) }).catch((e) => { }) } else { uni.showToast({ title: graceChecker.error, icon: "none" }); } } } } </script> <style> /* .file-title) { font-size: 17px !important; } */ input, textarea { color: #8799a3; } </style>