kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

迁移

Browse Source
This commit is contained in:
yanran200730
2022-02-09 10:15:39 +08:00
parent 8440693bbd
commit 407d8d4baa
31 changed files with 10557 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

475
project/sass/apps/AppHomesteadManagement/components/Add.vue Normal file
View File

@@ -0,0 +1,475 @@
<template>
<section style="height: 100%" class="AppHomesteadManagement">
<ai-detail class="Add">
<!-- 返回按钮 -->
<template #title>
<ai-title :title="isEdit ? '编辑宅基地信息' : '添加宅基地'" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
</template>
<template #content>
<el-form :model="formData" :rules="formRules" ref="ruleForm" label-width="150px" label-suffix="：" align-items="center">
<ai-card title="户主信息" >
<template slot="content">
<div class="flex">
<el-form-item label="姓名" prop="name">
<el-input size="small" class="user-selecter" v-model="formData.name" placeholder="请输入" clearable>
<template slot="append">
<ai-person-select :instance="instance" @selectPerson="checkName">
</ai-person-select>
</template>
</el-input>
</el-form-item>
<el-form-item label="身份证号码" prop="idNumber">
<ai-id size="small" v-model="formData.idNumber" @change="IdCard(formData.idNumber)"/>
</el-form-item>
<el-form-item label="性别" prop="sex">
<ai-select v-model="formData.sex" placeholder="请选择" :selectList="dict.getDict('sex')" disabled />
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input size="small" v-model="formData.age" placeholder="请输入" clearable disabled></el-input>
</el-form-item>
<el-form-item label="联系电话">
<el-input size="small" v-model="formData.phone" placeholder="请输入" clearable :maxlength="20"></el-input>
</el-form-item>
</div>
<el-form-item label="所属村" prop="areaId">
<ai-area-get :instance="instance" v-model="formData.areaId" :name.sync="formData.areaName" />
</el-form-item>
</template>
</ai-card>
<ai-card title="宅基地情况" >
<template slot="content">
<div class="flex">
<el-form-item label="宅基地面积">
<el-input size="small" v-model="formData.homesteadArea" placeholder="请输入" clearable maxlength="10">
<template slot="append">m²</template>
</el-input>
</el-form-item>
<el-form-item label="房基占地面积">
<el-input size="small" v-model="formData.houseArea" placeholder="请输入" clearable maxlength="10">
<template slot="append">m²</template>
</el-input>
</el-form-item>
</div>
<el-form-item label="宅基地地址">
<el-input size="small" v-model="formData.homesteadAddress" placeholder="请输入" clearable maxlength="20"></el-input>
</el-form-item>
<div class="flex">
<el-form-item label="四至-东至">
<el-input size="small" v-model="formData.eastTo" placeholder="请输入" clearable maxlength="20"></el-input>
</el-form-item>
<el-form-item label="四至-南至">
<el-input size="small" v-model="formData.southTo" placeholder="请输入" clearable maxlength="20"></el-input>
</el-form-item>
<el-form-item label="四至-西至">
<el-input size="small" v-model="formData.westTo" placeholder="请输入" clearable maxlength="20"></el-input>
</el-form-item>
<el-form-item label="四至-北至">
<el-input size="small" v-model="formData.northTo" placeholder="请输入" clearable maxlength="20"></el-input>
</el-form-item>
</div>
<el-form-item label="地类" class="buildingTypes">
<el-radio-group v-model="formData.landType">
<el-radio :label="item.dictValue" v-for="(item, index) in dict.getDict('homesteadLandType')" :key="index">{{item.dictName}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="性质" class="buildingTypes">
<el-radio-group v-model="formData.houseType">
<el-radio :label="item.dictValue" v-for="(item, index) in dict.getDict('homesteadHouseType')" :key="index">{{item.dictName}}</el-radio>
</el-radio-group>
</el-form-item>
<div class="flex">
<el-form-item label="住宅建筑面积">
<el-input size="small" v-model="formData.liveBuildingArea" placeholder="请输入" clearable maxlength="10">
<template slot="append">m²</template>
</el-input>
</el-form-item>
<el-form-item label="建筑层数">
<el-input size="small" v-model="formData.buildingFloorNumber" placeholder="请输入" clearable maxlength="10">
<template slot="append">层</template>
</el-input>
</el-form-item>
<el-form-item label="建筑高度">
<el-input size="small" v-model="formData.buildingHeight" placeholder="请输入" clearable maxlength="10">
<template slot="append">m</template>
</el-input>
</el-form-item>
</div>
</template>
</ai-card>
<ai-card title="位置信息" >
<template slot="content">
<div class="flex">
<el-form-item label="楼栋经度">
<el-input size="small" v-model="formData.lng" placeholder="请输入" clearable maxlength="10"></el-input>
</el-form-item>
<el-form-item label="楼栋纬度">
<el-input size="small" v-model="formData.lat" placeholder="请输入" clearable maxlength="10"></el-input>
</el-form-item>
</div>
<el-form-item label="地图位置">
<el-button @click="showMap = true">地图标绘</el-button>
</el-form-item>
</template>
</ai-card>
</el-form>
</template>
<!-- 底部按钮 -->
<template #footer>
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="confirm()">提交</el-button>
</template>
</ai-detail>
<ai-dialog title="地图" :visible.sync="showMap" @opened="getCorpLocation" width="800px" class="mapDialog" @onConfirm="selectMap">
<div id="map"></div>
<el-form label-width="80px" style="padding: 10px 20px 0 20px;">
<el-row type="flex" justify="space-between">
<el-form-item label="经度">
<el-input disabled size="small" v-model="placeDetail.lng"></el-input>
</el-form-item>
<el-form-item label="纬度">
<el-input disabled size="small" v-model="placeDetail.lat"></el-input>
</el-form-item>
</el-row>
</el-form>
<el-input id="searchPlaceInput" size="medium" class="searchPlaceInput" clearable v-model="searchPlace" autocomplete="on" @change="placeSearch.search(searchPlace)" placeholder="请输入关键字">
<el-button type="primary" slot="append" @click="placeSearch.search(searchPlace)">搜索</el-button>
</el-input>
<div id="searchPlaceOutput" />
</ai-dialog>
</section>
</template>
<script>
import { mapState } from 'vuex'
import AMapLoader from '@amap/amap-jsapi-loader'
export default {
name: 'Add',
props: {
dict: Object,
params: Object,
instance: Function,
},
data() {
return {
formData: {
name: '',
idNumber: '',
age: '',
sex: '',
phone: '',
areaId: '',
homesteadArea: '',
houseArea: '',
homesteadAddress: '',
eastTo: '',
southTo: '',
westTo: '',
northTo: '',
landType: '0',
houseType: '0',
liveBuildingArea: '',
buildingFloorNumber: '',
buildingHeight: '',
lng: '',
lat: '',
id: '',
areaName: ''
},
formRules: {
name: [
{ required: true, message: '请选择人员', trigger: 'change' },
],
age: [
{ required: true, message: '请输入年龄', trigger: 'change' },
],
sex: [
{ required: true, message: '请选择性别', trigger: 'change' },
],
idNumber: [
{ required: true, message: '请输入身份证号码', trigger: 'change' },
],
areaId: [
{ required: true, message: '请选择所属村', trigger: 'change' },
]
},
map: null,
placeDetail: {
lng: '',
lat: '',
},
showMap: false,
searchPlace: '',
}
},
computed: {
...mapState(['user']),
isEdit() {
return !!this.params.id
},
},
mounted() {
this.dict.load('homesteadLocationStatus', 'homesteadHouseType', 'homesteadLandType', 'sex').then(() => {
if(this.params.id) {
this.getListinfo()
}
})
},
methods: {
checkName(e) {
this.formData.name = e.name
this.formData.idNumber = e.idNumber
this.formData.phone = e.phone
this.formData.areaId = e.householdAreaId
},
IdCard(UUserCard) {
if (UUserCard) {
let arr = [];
if (parseInt(UUserCard.substr(16, 1)) % 2 == 1) {
arr.push("1");
} else {
arr.push("0");
}
const myDate = new Date();
const month = myDate.getMonth() + 1;
const day = myDate.getDate();
let age = myDate.getFullYear() - UUserCard.substring(6, 10) - 1;
if (
UUserCard.substring(10, 12) < month ||
(UUserCard.substring(10, 12) == month &&
UUserCard.substring(12, 14) <= day)
) {
age++;
}
arr.push(age);
this.formData.sex = arr[0];
this.formData.age = arr[1];
}
},
decimalInput(name) {
if(!/^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/g.test(this.formData[name])){
this.formData[name] = ''
return this.$message.error('最多只保留两位小数点')
}
},
numberInput(name) {
if(!/^[1-9]\d*|0$/g.test(this.formData[name])){
this.formData[name] = ''
return this.$message.error('请输入正整数')
}
},
selectMap() {
this.formData.lng = this.placeDetail.lng
this.formData.lat = this.placeDetail.lat
this.showMap = false
},
getCorpLocation() {
this.instance.post('/app/appdvcpconfig/getCorpLocation').then((res) => {
if (res.code == 0) {
this.initMap(res.data)
}
})
},
initMap({ lng, lat }) {
AMapLoader.load({
key: 'b553334ba34f7ac3cd09df9bc8b539dc',
version: '2.0',
plugins: ['AMap.PlaceSearch', 'AMap.AutoComplete', 'AMap.Geocoder'],
}).then((AMap) => {
this.placeDetail.lng = this.formData.lng
this.placeDetail.lat = this.formData.lat
this.map = new AMap.Map('map', {
resizeEnable: true,
zooms: [6, 20],
center: [lng, lat],
zoom: 11,
})
this.placeSearch = new AMap.PlaceSearch({ map: this.map })
new AMap.AutoComplete({
input: 'searchPlaceInput',
output: 'searchPlaceOutput',
}).on('select', (e) => {
if (e?.poi) {
this.placeSearch.setCity(e.poi.adcode)
this.movePosition(e.poi.location)
}
})
this.map.on('click', (e) => {
new AMap.Geocoder().getAddress(e.lnglat, (sta, res) => {
if (res?.regeocode) {
this.placeDetail = {
lng: e.lnglat?.lng,
lat: e.lnglat?.lat,
address: res.regeocode.formattedAddress,
}
}
})
this.movePosition(e.lnglat)
})
})
},
movePosition(center) {
if (this.map) {
this.map.clearMap()
this.map.panTo(center)
this.map.add([
new AMap.Marker({
position: center,
clickable: true,
}),
])
this.map.setFitView()
}
},
getListinfo() {
return this.instance
.post('/app/apphomesteadinfo/queryDetailById', null, {
params: {
id: this.params.id,
},
})
.then((res) => {
if (res.data) {
this.formData = res.data
}
})
},
confirm() {
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
this.instance
.post(`/app/apphomesteadinfo/addOrUpdate`, {
...this.formData,
})
.then((res) => {
if (res.code == 0) {
this.$message.success('提交成功')
setTimeout(() => {
this.cancel(true)
}, 1000)
}
})
}
})
},
// 返回按钮
cancel(isRefresh) {
this.$emit('change', {
type: 'list',
isRefresh: !!isRefresh,
})
},
},
watch: {
communityNameContent: {
deep: true,
},
},
}
</script>
<style lang="scss" scoped>
.AppHomesteadManagement {
::v-deep .amap-logo {
display: none!important;
}
::v-deep .amap-copyright {
display: none!important;
}
}
.Add {
height: 100%;
.ai-detail__title {
background-color: #fff;
}
.ai-detail__content {
.ai-detail__content--wrapper {
.el-form {
// background-color: #fff;
// padding: 0 60px;
.flex {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.el-form-item {
width: 48%;
}
.buildingTypes {
width: 100%;
}
}
}
}
}
.user-selecter {
::v-deep .el-input-group__append {
width: 68px;
background: transparent;
}
::v-deep .el-button {
color: #fff;
&:hover {
opacity: 0.8;
background: linear-gradient(90deg, #299FFF 0%, #0C61FF 100%);
}
}
}
}
::v-deep .mapDialog {
.el-dialog__body {
padding: 0;
.ai-dialog__content {
padding: 0;
}
.ai-dialog__content--wrapper {
padding: 0 !important;
position: relative;
}
#map {
width: 100%;
height: 420px;
}
.searchPlaceInput {
position: absolute;
width: 250px;
top: 30px;
left: 25px;
}
#searchPlaceOutput {
position: absolute;
width: 250px;
left: 25px;
height: initial;
top: 80px;
background: white;
z-index: 250;
max-height: 300px;
overflow-y: auto;
.auto-item {
text-align: left;
font-size: 14px;
padding: 8px;
box-sizing: border-box;
}
}
}
}
</style>