job-master/src/views/buy/order/add/add.vue

<template>
	<a-modal v-model:visible="openAddModel" :title="title" ok-text="提交" cancel-text="取消" @ok="sumbitForm"
		@cancel="cancelModal" width="50%">
		<a-form :model="createForm" layout="vertical">
			<a-row gutter="20">
				<a-col span="24">
					<a-form-item required label="选择门店地址">
						<a-switch v-model:checked="showMap"> </a-switch>
						<div v-if="showMap">
							<v-map @getLoc="getLoc"></v-map>
						</div>
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="门店地址" name="address">
						<a-input v-model:value="createForm.address" placeholder="请选择门店地址" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="门店名" name="store_name">
						<a-input v-model:value="createForm.store_name" placeholder="请输入门店名" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="联系人" name="contact_person">
						<a-input v-model:value="createForm.contact_person" placeholder="请输入联系人" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="联系电话" name="mobile">
						<a-input v-model:value="createForm.mobile" placeholder="请输入联系电话" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="审核电话" name="audit_mobile">
						<a-input v-model:value="createForm.audit_mobile" placeholder="请输入审核电话" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item required label="所属社区" name="communal">
						<a-input v-model:value="createForm.communal" placeholder="请输入所属社区" />
					</a-form-item>
				</a-col>
				<a-col span="24">
					<a-form-item label="地址分类" name="cate">
						<search-select placeholder="请搜索选择地址分类" :list="cate_list" :select_value="createForm.cate"
							@searchData="cateSearch" @getSelectValue="getCateValue"></search-select>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
	</a-modal>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed, defineProps, watch, defineEmits } from 'vue';
	import { GetActivityaddressCate, PostActivityaddressAdd, PostActivityaddressUpdate } from '@/apis/models';
	import vMap from '@/components/map/map-iframe.vue'
	import { dataForm, otherDataForm, reset } from '@/views/company/department/add/data.js';
	import { useCommon } from '@/hooks/useCommon';
	let { store, openAddModel, hideModal, message } = useCommon();
	const emit = defineEmits();
	let props = defineProps(['edit_record']);
	let title = ref<String>('新增活动地址');
	let showMap = ref<Boolean>(false);

	let createForm = ref(dataForm)
	let addOtherForm = ref(otherDataForm)


	onMounted(() => {
		cateSearch({ page: 1, pagesize: 10 })
	})


	// 选择企业
	let cate_list = ref<Object[]>([])
	const cateSearch = (val : Object) => {
		GetActivityaddressCate(val).then((res : object) => {
			const data = res.data.activity_address_cate.map((item : object) => ({
				label: item,
				value: item,
			}));
			cate_list.value = data;
		})
	}
	const getCateValue = (val : Object) => {
		createForm.value.cate = val.key;
	}

	// 经纬度
	const getLoc = (mapData : Object) => {
		console.log(mapData)
		createForm.value.address = mapData.poiaddress;
		createForm.value.lat = mapData.latlng.lat;
		createForm.value.lng = mapData.latlng.lng;
		showMap.value = false;
	}


	const sumbitForm = () => {
		if(!createForm.value.address) {
			message.error('请选择门店地址');
			return false;
		}
		if (createForm.value.address && createForm.value.store_name && createForm.value.contact_person && createForm.value.mobile && createForm.value.audit_mobile && createForm.value.communal && createForm.value.cate) {
			if (!createForm.value.id) {
				PostActivityaddressAdd(createForm.value).then(res => {
					message.success('创建活动地址');
					hideModal();
					resetForm();
					emit('successAdd');
				}).catch(err => {
				})
			} else {
				PostActivityaddressUpdate(createForm.value).then(res => {
					message.success('修改活动地址成功');
					hideModal();
					resetForm();
					emit('successAdd');
				}).catch(err => {
				})
			}

		} else {
			message.warning('请补充完整信息');
		}

	}

	const resetForm = () => {
		createForm.value = reset().dataForm;
	}
	const cancelModal = () => {
		emit('closeAdd');
		resetForm();
		hideModal();
		showMap.value = false;
	}


	openAddModel = computed(() => {
		return store.state.openAddModel;
	})

	watch(() => props.edit_record, (newVal) => {
		if (newVal) {
			title.value = '编辑活动地址';
			console.log(newVal)
			createForm.value = {
				id: newVal.id,
				address: newVal.address,
				lat: newVal.lat,
				lng: newVal.lng,
				store_name: newVal.store_name,
				contact_person: newVal.contact_person,
				mobile: newVal.mobile,
				audit_mobile: newVal.audit_mobile,
				communal: newVal.communal,
				cate: newVal.cate,
			}
		} else {
			title.value = '新增活动地址';
		}
	})
</script>

<style>

</style>