125 lines
3.4 KiB
Vue
125 lines
3.4 KiB
Vue
<template>
|
|
<div class="modal-content">
|
|
<a-form class="content-form" ref="formRef" :model="props.modalData" :label-col="labelCol">
|
|
<a-form-item
|
|
label="编号"
|
|
name="num"
|
|
:rules="[{ required: true, message: '请输入编号' }]"
|
|
>
|
|
<a-input v-model:value="props.modalData.num" />
|
|
</a-form-item>
|
|
<a-form-item
|
|
label="名称"
|
|
name="name"
|
|
:rules="[{ required: true, message: '请输入名称' }]"
|
|
>
|
|
<a-input v-model:value="props.modalData.name" />
|
|
</a-form-item>
|
|
<a-form-item
|
|
label="负责人"
|
|
name="manager"
|
|
:rules="[{ required: true, message: '请输入负责人' }]"
|
|
>
|
|
<a-input v-model:value="props.modalData.manager" />
|
|
</a-form-item>
|
|
<a-form-item
|
|
label="联系方式"
|
|
name="phone"
|
|
:rules="[{ required: true, message: '请输入联系方式' }]"
|
|
>
|
|
<a-input v-model:value="props.modalData.phone" />
|
|
</a-form-item>
|
|
<a-form-item
|
|
label="地址"
|
|
name="address"
|
|
:rules="[{ required: true, message: '请输入地址' }]"
|
|
>
|
|
<div style="display: flex;">
|
|
<a-input v-model:value="props.modalData.address" style="margin-right: 10px;"/>
|
|
<a-button style="margin-right: 10px;" @click="mapVisible = true">选择地址</a-button>
|
|
</div>
|
|
</a-form-item>
|
|
|
|
</a-form>
|
|
<div class="button-div">
|
|
<a-button class="cancel-button" @click="cancel">取消</a-button>
|
|
<a-button class="save-button" type="primary" @click="submit">提交</a-button>
|
|
</div>
|
|
</div>
|
|
<a-modal
|
|
width="60%"
|
|
v-model:open="mapVisible"
|
|
title="选择位置"
|
|
@ok="handlePostionOk"
|
|
:destroyOnClose="true"
|
|
>
|
|
<Map ref="PostionRef" @getAddress="getAddress"/>
|
|
</a-modal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted } from "vue"
|
|
import Map from '@/components/illegalconstruction/Map.vue'
|
|
import { Add, Update } from '@/api/illegalconstruction/parkinglot'
|
|
import { message } from "ant-design-vue";
|
|
const props = defineProps(['modalType', 'modalData'])
|
|
const emits = defineEmits(['closeAddOrUpdateModal'])
|
|
|
|
const formRef = ref()
|
|
const PostionRef = ref();
|
|
const mapVisible = ref(false);
|
|
const labelCol = { style: { width: '80px' } };
|
|
|
|
onMounted(() => {
|
|
})
|
|
const handlePostionOk = () => {
|
|
const data = PostionRef.value.getPosition();
|
|
console.log(data);
|
|
if(data){
|
|
props.modalData.address = data.address
|
|
}
|
|
mapVisible.value = false;
|
|
};
|
|
const getAddress = (lng, lat, siteAddress) => {
|
|
console.log(lng,lat,siteAddress)
|
|
}
|
|
const submit = () => {
|
|
formRef.value.validate().then(() => {
|
|
console.log('values', props.modalData);
|
|
if(props.modalType == 'add'){
|
|
Add(props.modalData).then(res => {
|
|
message.success('停车场添加成功')
|
|
emits('closeAddOrUpdateModal',true)
|
|
})
|
|
}else{
|
|
Update(props.modalData).then(res => {
|
|
message.success('停车场编辑成功')
|
|
emits('closeAddOrUpdateModal',true)
|
|
})
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.log('error', error);
|
|
});
|
|
}
|
|
const cancel = () => {
|
|
emits('closeAddOrUpdateModal')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.modal-content{
|
|
padding: 20px;
|
|
.content-form{
|
|
margin-bottom: 20px;
|
|
}
|
|
.button-div{
|
|
display: flex;
|
|
justify-content: end;
|
|
.cancel-button{
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|