<template>
|
<view class="container">
|
<view class="wrap">
|
<u-form labelWidth="70" :model="form" :rules="rules" ref="form">
|
<view class="item">
|
<!-- u-form-item v-if="!currentId" @click="showPicker = true" class="form-item" labelWidth="100" label="楼栋:"
|
:required="isRequired" :disabled="isDisabled" prop="buildingCode">
|
<u--input border="none" disabledColor="#ffffff" v-model="form.building" placeholder="请选择">
|
</u--input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item> -->
|
<view class="box-title">
|
<box-title title="基础信息"></box-title>
|
</view>
|
<u-form-item class="form-item" labelWidth="100" label="场所名称:" :required="isRequiredPlace"
|
:disabled="isDisabled" prop="placeName">
|
<u--input border="none" v-model="form.placeName" placeholder="请输入">
|
</u--input>
|
</u-form-item>
|
|
<u-form-item @click="popup" class="form-item" labelWidth="100" label="标签:" :required="isRequired"
|
:disabled="isDisabled" prop="label">
|
<u-input border="none" v-model="categoryValue" disabled disabledColor="#ffffff"
|
placeholder="请选择">
|
</u-input>
|
<u-icon slot="right" name="arrow-right"></u-icon>
|
</u-form-item>
|
|
<u-form-item class="form-item" labelWidth="100" label="备注:" prop="remark">
|
<u--input border="none" v-model="form.remark" placeholder="请输入">
|
</u--input>
|
</u-form-item>
|
|
<u-form-item label="经纬度:" prop="location" labelWidth="100">
|
<view class="address-row flex j-c-s-b a-i-c">
|
<view class="address-content f-28" v-if="form.jwd">
|
{{form.jwd}}
|
</view>
|
<view class="address-content f-28" v-if="!form.jwd" style="color: #c0c4cc;">
|
请选择地址
|
</view>
|
<view class="location-btn c-main f-24" @click="getLocation()">
|
获取地址
|
</view>
|
</view>
|
</u-form-item>
|
|
<u-form-item label="地址:" labelWidth="100" v-if="form.location">
|
<view class="address-row">
|
{{form.location}}
|
</view>
|
</u-form-item>
|
|
</view>
|
|
<view class="item">
|
<view class="box-title">
|
<box-title title="负责人信息"></box-title>
|
</view>
|
<u-form-item class="form-item" labelWidth="100" :required="isRequired" :disabled="isDisabled"
|
label="场所负责人:" prop="principal">
|
<u--input border="none" v-model="form.principal" placeholder="请输入">
|
</u--input>
|
</u-form-item>
|
<u-form-item class="form-item" labelWidth="100" :required="isRequired" :disabled="isDisabled"
|
label="手机号:" prop="principalPhone">
|
<u--input border="none" type="number" v-model="form.principalPhone" placeholder="请输入">
|
</u--input>
|
</u-form-item>
|
</view>
|
|
<view class="item pic">
|
<view class="box-title">
|
<box-title title="场所照片"></box-title>
|
</view>
|
<u-upload :fileList="form.images" :previewFullImage="uploadConfig.previewFullImage"
|
:accept="uploadConfig.acceptImg" :multiple="uploadConfig.multiple"
|
:maxCount="uploadConfig.maxCount" :capture="uploadConfig.capture"
|
uploadIcon="/static/icon/upload.png" @afterRead="afterReadImg" @delete="deletePic">
|
</u-upload>
|
</view>
|
</u-form>
|
</view>
|
<footer-btn @click="submit" text="保存" />
|
<u-picker :show="showPicker" :defaultIndex="defaultIndex" ref="uPicker" keyName="name" :loading="pickerLoading"
|
:columns="pickColumns" @change="changeHandler" @confirm="confirmPicker"
|
@cancel="showPicker = false"></u-picker>
|
|
|
<u-picker :show="isShowCatePicker" :defaultIndex="categoryIndex" ref="catePicker" keyName="categoryName"
|
:columns="categoryList" @confirm="confirmCategory" @change="changeCategory"
|
@cancel="isShowCatePicker = false"></u-picker>
|
|
|
</view>
|
</template>
|
|
<script>
|
import uploadMixin from "@/mixin/uploadMixin";
|
import lineItem from "@/subPackage/workbench/components/lineItem.vue"
|
import {
|
getLabelCate
|
} from "@/api/label/categoryLabel.js";
|
import {
|
getDoorplateAddressDetail,
|
getDoorplateAddressList
|
} from "@/api/doorplateAddress/doorplateAddress";
|
import {
|
getPlaceDetail
|
} from '@/api/place/place.js'
|
import {
|
add
|
} from "@/api/place/place";
|
import {
|
format
|
} from "echarts";
|
import boxTitle from '../components/boxTitle/index.vue'
|
import {
|
minioBaseUrl
|
} from "../../../common/setting";
|
export default {
|
mixins: [uploadMixin],
|
components: {
|
lineItem,
|
boxTitle
|
},
|
data() {
|
return {
|
isRequired: false,
|
isRequiredPlace: true,
|
isDisabled: true,
|
showPicker: false,
|
pickerLoading: false,
|
pickColumns: [],
|
defaultIndex: [0, 0, 0, 0, 0],
|
|
selectValue: [],
|
|
form: {
|
// buildingCode: "",
|
images: [],
|
label: "",
|
remark: "",
|
imageUrls: "",
|
placeName: "",
|
principal: '',
|
principalPhone: '',
|
lat: '',
|
lng: '',
|
location: ''
|
},
|
rules: {
|
// 'buildingCode': {
|
// type: 'string',
|
// required: true,
|
// message: '请选择楼栋',
|
// trigger: ['blur', 'change']
|
// },
|
'form.placeName': {
|
type: 'string',
|
required: true,
|
message: '请输入场所名称',
|
trigger: ['blur', 'change']
|
},
|
'form.label': {
|
type: 'string',
|
required: true,
|
message: '请选择标签',
|
trigger: ['blur', 'change'],
|
},
|
'form.username': {
|
type: 'string',
|
required: true,
|
message: '请输入场所负责人',
|
trigger: ['blur', 'change'],
|
},
|
'form.principalPhone': [{
|
required: false,
|
message: '请输入手机号',
|
trigger: ['blur', 'change'],
|
},
|
{
|
validator: (rule, value, callback) => {
|
return uni.$u.test.mobile(value);
|
},
|
message: '手机号码不正确',
|
trigger: ['change', 'blur']
|
|
}
|
|
],
|
},
|
|
labelList: [{
|
text: '全部标签',
|
children: [],
|
dot: false
|
}, ],
|
|
comprehensiveData: {
|
basic: [{
|
label: "社区名称",
|
name: 'communityName',
|
value: "暂无数据"
|
},
|
{
|
label: "网格名称",
|
name: 'gridName',
|
value: "暂无数据"
|
},
|
{
|
label: "网格员",
|
name: 'realName',
|
value: "暂无数据"
|
},
|
{
|
label: "联系电话",
|
name: 'gridPhone',
|
value: "暂无数据"
|
}
|
],
|
scene: [
|
// {
|
// label: "场所照片",
|
// name: 'imageUrls',
|
// value: "",
|
// useSlot: "pic",
|
// },
|
// {
|
// label: "场所负责人",
|
// name: 'username',
|
// value: "未完善",
|
// },
|
{
|
label: "采集人",
|
name: 'createUserName',
|
value: "未完善"
|
},
|
{
|
label: "采集时间",
|
name: 'createTime',
|
value: "未完善"
|
},
|
// {
|
// label: "历史事件",
|
// value: "未完善",
|
// }
|
],
|
},
|
publicData: {
|
basic: [{
|
label: "公安局",
|
name: 'branchName',
|
value: "暂无数据"
|
},
|
{
|
label: "派出所",
|
name: 'localPoliceStationName',
|
value: "暂无数据"
|
},
|
{
|
label: "辖区民警",
|
name: 'policeman',
|
value: "暂无数据"
|
},
|
{
|
label: "联系电话",
|
name: 'policemanPhone',
|
value: "暂无数据"
|
}
|
],
|
scene: [
|
|
// {
|
// label: "消防照片",
|
// useSlot: "pic",
|
// },
|
// {
|
// label: "采集人",
|
// value: "未完善"
|
// },
|
// {
|
// label: "采集时间",
|
// value: "未完善"
|
// },
|
// {
|
// label: "消防负责人",
|
// value: "未完善",
|
// },
|
// {
|
// label: "采集人",
|
// value: "未完善"
|
// },
|
// {
|
// label: "采集时间",
|
// value: "未完善",
|
// },
|
// {
|
// label: "历史事件",
|
// value: "未完善",
|
// }
|
],
|
},
|
|
activeIds: [],
|
showLabelList: [],
|
houseCode: "",
|
currentId: "",
|
addressType: 2,
|
isShowCatePicker: false,
|
categoryList: [
|
[],
|
[]
|
],
|
categoryIndex: [],
|
firstId: "",
|
secondId: "",
|
categoryValue: "",
|
houseCode: "",
|
from: ""
|
}
|
},
|
created() {
|
this.buildColumn()
|
},
|
options: {
|
styleIsolation: 'shared', // 解除样式隔离
|
},
|
onLoad(option) {
|
const {
|
type
|
} = option
|
if (option.addressType) {
|
this.addressType = option.addressType
|
}
|
if (option.id) {
|
this.currentId = option.id;
|
}
|
if (option.houseCode) {
|
this.houseCode = option.houseCode
|
this.form.houseCode = option.houseCode
|
}
|
if (option.id || option.houseCode) {
|
this.getBuildingDetail()
|
}
|
this.getCategory();
|
},
|
|
watch: {
|
|
firstId: {
|
handler(newVal, oldVal) {
|
if (newVal) {
|
this.getCategory(3, this.firstId);
|
}
|
},
|
immediate: true
|
}
|
|
// secondId:{
|
// handler(newVal,oldVal){
|
// this.getCategory(3,this.secondId);
|
// },
|
// immediate:true
|
// }
|
|
},
|
|
|
methods: {
|
// getBuildingDetail(params = {}) {
|
// getDoorplateAddressDetail(Object.assign(params, {
|
// stdId: this.stdId
|
// })).then(res => {
|
// let data = res.data
|
// this.form.buildingCode = data.buildingCode
|
|
// let buildingNameArr = [data.townStreetName, data.neiName, data.streetRuName, data.aoiName,
|
// data.buildingName
|
// ]
|
// let arr = buildingNameArr.filter(e => {
|
// return e != null || e != ''
|
// })
|
|
// // 赋值
|
// // this.form.placeName = data['placeName']
|
// Object.keys(this.form).forEach(key => {
|
// if (!data[key]) {
|
// this.form[key] = data.place[key]
|
// } else {
|
// this.form[key] = data[key]
|
// }
|
// })
|
|
// this.form.building = arr.join("")
|
|
// Object.keys(this.comprehensiveData).forEach(key => {
|
// this.comprehensiveData[key].forEach(item => {
|
// if (!data[item.name]) {
|
// item.value = data.place[item.name] || '未完善'
|
// } else {
|
// item.value = data[item.name] || '未完善'
|
// }
|
// })
|
// this.publicData[key].forEach(item => {
|
// if (!data[item.name]) {
|
// item.value = data.place[item.name] || '未完善'
|
// } else {
|
// item.value = data[item.name] || '未完善'
|
// }
|
// })
|
// })
|
// })
|
// },
|
|
navTo(type) {
|
if (type == 1) {
|
uni.navigateTo({
|
url: `/subPackage/workbench/views/report?code=${this.houseCode}`
|
})
|
} else {
|
uni.navigateTo({
|
url: `/subPackage/workbench/views/audit?code=${this.houseCode}`
|
})
|
}
|
},
|
|
//获取分类
|
getCategory(level = 2, id) {
|
let params = {
|
level
|
}
|
if (level == 3) {
|
params.parentNo = id
|
}
|
getLabelCate(params).then(res => {
|
console.log(res)
|
if (res.code == 200) {
|
let index = level - 2;
|
this.$set(this.categoryList, index, res.data);
|
if (level == 2) {
|
this.firstId = res.data[0].categoryNo
|
}
|
}
|
})
|
},
|
|
//选择分类
|
confirmCategory(e) {
|
console.log("confirm=>", e)
|
let {
|
indexs,
|
value
|
} = e;
|
this.categoryIndex = indexs;
|
this.categoryValue = value[value.length - 1].categoryName;
|
this.form.label = value[value.length - 1].categoryNo;
|
this.isShowCatePicker = false;
|
},
|
|
//切换分类
|
changeCategory(e) {
|
const {
|
columnIndex,
|
value,
|
values, // values为当前变化列的数组内容
|
index,
|
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
picker = this.$refs.catePicker
|
} = e
|
|
console.log("change=>", e)
|
|
// 当第一列值发生变化时，变化第二列(后一列)对应的选项
|
if (columnIndex === 0) {
|
// picker为选择器this实例，变化第二列对应的选项
|
// picker.setColumnValues(1, this.categoryList[index])
|
this.firstId = e.value[columnIndex].categoryNo;
|
// this.secondId = this.categoryList[1][0].categoryNo;
|
// this.getCategory(2,this.firstId);
|
}
|
// else if ( columnIndex === 1){
|
// picker.setColumnValues(2, this.categoryList[index])
|
// this.secondId = e.value[columnIndex].categoryNo;
|
// this.getCategory(3,this.secondId)
|
// }
|
},
|
|
getBuildingDetail(params = {}) {
|
let idorCodeParams = {}
|
if (this.houseCode) {
|
idorCodeParams = {
|
houseCode: this.houseCode,
|
// addressType:this.addressType
|
}
|
}
|
if (this.addressType) {
|
idorCodeParams.addressType = this.addressType
|
}
|
if (this.currentId) {
|
idorCodeParams = {
|
id: this.currentId
|
}
|
}
|
getPlaceDetail({
|
...params,
|
...idorCodeParams
|
}).then(({
|
code,
|
data
|
}) => {
|
if (code !== 200) {
|
uni.showToast({
|
title: "数据加载失败",
|
icon: 'error'
|
})
|
return
|
}
|
this.houseCode = data.houseCode;
|
const dpaEntity = data?.doorplateAddressEntity || {}
|
const gridEntity = data?.grid || {}
|
// this.form.buildingCode = dpaEntity?.buildingCode || ''
|
let buildingNameArr = [
|
dpaEntity?.townStreetName,
|
dpaEntity?.neiName,
|
dpaEntity?.streetRuName,
|
dpaEntity?.aoiName,
|
dpaEntity?.buildingName
|
]
|
let arr = buildingNameArr.filter(e => {
|
return e != null || e != ''
|
})
|
this.form.placeName = data['placeName'] || ''
|
Object.keys(this.form).forEach(key => {
|
if (!data[key]) {
|
// this.form[key] = dpaEntity[key] || '未完善'
|
this.form[key] = dpaEntity[key]
|
} else {
|
// this.form[key] = data[key] || '未完善'
|
this.form[key] = data[key]
|
}
|
if (key === "images") {
|
// this.form[key] = data.imageUrls
|
if (data.imageUrls) {
|
this.form.images = this.$setImageUrl(data.imageUrls, 2);
|
this.uploadConfig.maxCount = this.form.images.length;
|
} else {
|
this.form.images = []
|
}
|
}
|
})
|
this.form.jwd = `${Number(data.lng).toFixed(6)},${Number(data.lat).toFixed(6)}`
|
this.form.building = arr.join("")
|
let labelList = data.placePoiLabelVOList;
|
let tempLabelList = [];
|
for (let i of labelList) { //过滤一级数据
|
if (i.type != 1) {
|
tempLabelList.push(i)
|
}
|
}
|
this.firstId = tempLabelList[0].poiCode;
|
this.categoryValue = tempLabelList[1].labelName;
|
this.form.label = tempLabelList[1].poiCode
|
setTimeout(() => {
|
let firstIndex = this.categoryList[0].findIndex(i => i.categoryNo ==
|
tempLabelList[0].poiCode)
|
let childIndex = this.categoryList[1].findIndex(i => i.categoryNo ==
|
tempLabelList[1].poiCode)
|
this.categoryIndex = [firstIndex, childIndex]
|
}, 500)
|
|
Object.keys(this.comprehensiveData).forEach(key => {
|
this.comprehensiveData[key].forEach(item => {
|
if (!data[item.name]) {
|
item.value = dpaEntity[item.name] || '未完善'
|
item.value = gridEntity[item.name] || '未完善'
|
} else {
|
item.value = data[item.name] || '未完善'
|
if (item.name == "imageUrls") {
|
item.value = this.$setImageUrl(data[item.name])
|
// item.value = minioBaseUrl + data[item.name] || '未完善'
|
}
|
}
|
})
|
this.publicData[key].forEach(item => {
|
if (!data[item.name]) {
|
item.value = dpaEntity[item.name] || '未完善'
|
} else {
|
item.value = data[item.name] || '未完善'
|
}
|
})
|
})
|
|
})
|
},
|
|
//表单提交
|
submit() {
|
const that = this
|
this.$refs.form.validate().then(valid => {
|
if (valid) {
|
if (this.form?.images?.length > 0) {
|
let urls = []
|
this.form.images.forEach(e => {
|
urls.push(e.name)
|
})
|
this.form.imageUrls = urls.join(",")
|
}
|
|
this.form.roleName = uni.getStorageSync("activeRole").roleName;
|
add(this.form).then(res => {
|
uni.showToast({
|
icon: 'success',
|
title: '保存成功'
|
})
|
setTimeout(() => {
|
uni.navigateBack()
|
}, 300)
|
})
|
}
|
})
|
},
|
|
async buildColumn() {
|
//设置街道
|
const townStreet = await this.getDoorplateAddressList(null, "townStreet")
|
this.setColumn(townStreet, 0)
|
//设置社区
|
const nei = await this.getDoorplateAddressList(townStreet[0]?.code, "nei")
|
this.setColumn(nei, 1)
|
//设置路
|
const streetRu = await this.getDoorplateAddressList(nei[0]?.code, "streetRu")
|
this.setColumn(streetRu, 2)
|
//设置地区
|
const district = await this.getDoorplateAddressList(streetRu[0]?.code, "district")
|
this.setColumn(district, 3)
|
//设置楼栋
|
const building = await this.getDoorplateAddressList(district[0]?.code, "building")
|
this.setColumn(building, 4)
|
},
|
|
setColumn(data, index) {
|
this.$set(this.pickColumns, index, data)
|
},
|
|
getLocation() {
|
uni.chooseLocation({
|
success: (res) => {
|
console.log("location==>", res);
|
this.form.lat = res.latitude;
|
this.form.lng = res.longitude;
|
this.form.location = res.address;
|
this.form.jwd =
|
`${Number(res.longitude).toFixed(6)},${Number(res.latitude).toFixed(6)}`
|
}
|
})
|
},
|
|
async getDoorplateAddressList(code, type) {
|
const res = await getDoorplateAddressList(code, type)
|
return res.data
|
},
|
|
confirmPicker(e) {
|
|
if (e.value[4]) {
|
this.selectValue = e.value
|
|
let arr = this.selectValue.map(e => e.name)
|
this.form.building = arr.join("")
|
|
this.form.buildingCode = e.value[4].code
|
}
|
this.showPicker = false
|
},
|
|
async changeHandler(e) {
|
const {
|
columnIndex,
|
index,
|
// 微信小程序无法将picker实例传出来，只能通过ref操作
|
picker = this.$refs.uPicker
|
} = e
|
let item = e.values[columnIndex][index]
|
//街道
|
if (columnIndex === 0) {
|
//获取社区列表
|
const nei = await this.getDoorplateAddressList(item.code, "nei")
|
picker.setColumnValues(1, nei)
|
|
const streetRu = await this.getDoorplateAddressList(nei[0].code, "streetRu")
|
picker.setColumnValues(2, streetRu)
|
|
const district = await this.getDoorplateAddressList(streetRu[0].code, "district")
|
picker.setColumnValues(3, district)
|
|
const building = await this.getDoorplateAddressList(district[0].code, "building")
|
picker.setColumnValues(4, building)
|
}
|
|
if (columnIndex === 1) {
|
const streetRu = await this.getDoorplateAddressList(item.code, "streetRu")
|
picker.setColumnValues(2, streetRu)
|
|
const district = await this.getDoorplateAddressList(streetRu[0].code, "district")
|
picker.setColumnValues(3, district)
|
|
const building = await this.getDoorplateAddressList(district[0].code, "building")
|
picker.setColumnValues(4, building)
|
}
|
|
if (columnIndex === 2) {
|
|
const district = await this.getDoorplateAddressList(item.code, "district")
|
picker.setColumnValues(3, district)
|
|
const building = await this.getDoorplateAddressList(district[0].code, "building")
|
picker.setColumnValues(4, building)
|
}
|
|
if (columnIndex === 3) {
|
const building = await this.getDoorplateAddressList(item.code, "building")
|
picker.setColumnValues(4, building)
|
}
|
|
},
|
|
//弹出层打开
|
popup() {
|
// this.$refs.uniPopup.open()
|
this.isShowCatePicker = true;
|
|
},
|
|
imgPreview(value) {
|
uni.previewImage({
|
urls: minioBaseUrl + [value],
|
})
|
},
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
position: relative;
|
width: calc(100% - 60rpx);
|
// height: 100%;
|
display: flex;
|
flex-direction: column;
|
background: #f5f5f5;
|
padding: 0 30rpx 20rpx 30rpx;
|
|
.wrap {
|
width: 100%;
|
margin-bottom: 120rpx;
|
}
|
|
.box-title {
|
padding: 10px 0;
|
|
.title-more {
|
display: flex;
|
align-items: center;
|
height: 100%;
|
|
.item {
|
width: 50rpx;
|
height: 40rpx;
|
color: #ffffff;
|
padding: 6rpx;
|
font-size: 2rpx;
|
text-align: center;
|
line-height: 20px;
|
}
|
|
}
|
}
|
|
.item {
|
margin-top: 20rpx;
|
background-color: #ffffff;
|
border-radius: 8rpx;
|
padding: 0 30rpx;
|
|
.form-item {
|
background-color: #ffffff;
|
padding: 2rpx 10px;
|
border-bottom: 0.1px solid #eff1f3;
|
}
|
|
.label {
|
padding: 10rpx 30rpx;
|
display: flex;
|
background-color: #ffffff;
|
flex-wrap: wrap;
|
|
.activeLabel {
|
// width: 80rpx;
|
margin-left: 10rpx;
|
margin-top: 10rpx
|
}
|
}
|
|
|
|
}
|
|
.pic {
|
background-color: #ffffff;
|
padding-bottom: 20rpx;
|
|
/deep/ .u-upload__button {
|
border: 1rpx solid #EEEEEE;
|
background-color: #fff;
|
}
|
}
|
|
.image {
|
padding: 20rpx;
|
}
|
|
.bottom {
|
padding: 20rpx;
|
background-color: #ffffff;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.btn {
|
width: calc(100% - 40rpx);
|
}
|
}
|
}
|
|
/deep/ .u-form-item {
|
background-color: #ffffff;
|
padding: 2rpx 10px;
|
border-bottom: 1px solid #eff1f3;
|
}
|
|
.red {
|
background-color: red;
|
border-radius: 10rpx 0rpx 0rpx 10rpx;
|
}
|
|
.orange {
|
background-color: orange;
|
}
|
|
.green {
|
background-color: green;
|
border-radius: 0rpx 10rpx 10rpx 0rpx;
|
}
|
|
|
.address-row {
|
flex: 1;
|
}
|
|
.address-content {
|
width: calc(100% - 116rpx - 15rpx);
|
margin-right: 15rpx;
|
}
|
|
.location-btn {
|
width: 116rpx;
|
height: 46rpx;
|
line-height: 46rpx;
|
border-radius: 4rpx;
|
border: 1px solid currentColor;
|
padding: 0;
|
background-color: #fff;
|
text-align: center;
|
}
|
</style>
|
