364 lines
11 KiB
Vue
364 lines
11 KiB
Vue
<!-- 编辑弹窗 -->
|
|
<template>
|
|
<ele-modal
|
|
:width="800"
|
|
:visible="visible"
|
|
:maskClosable="false"
|
|
:maxable="maxable"
|
|
:title="isUpdate ? '编辑机构' : '添加机构'"
|
|
:body-style="{ paddingBottom: '28px' }"
|
|
@update:visible="updateVisible"
|
|
@ok="save"
|
|
>
|
|
<a-form
|
|
ref="formRef"
|
|
:model="form"
|
|
:rules="rules"
|
|
:label-col="styleResponsive ? { md: 4, sm: 5, xs: 24 } : { flex: '90px' }"
|
|
:wrapper-col="
|
|
styleResponsive ? { md: 19, sm: 19, xs: 24 } : { flex: '1' }
|
|
"
|
|
>
|
|
<a-form-item label="标题" name="title">
|
|
<a-input
|
|
allow-clear
|
|
placeholder="请输入"
|
|
v-model:value="form.title"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="联系方式" name="phone">
|
|
<a-input
|
|
allow-clear
|
|
placeholder="请输入"
|
|
v-model:value="form.phone"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="类型" name="type">
|
|
<DictSelect v-model:value="form.type" dictCode="LAW_ORG_TYPE" placeholder="类型选择"></DictSelect>
|
|
</a-form-item>
|
|
<a-form-item label="所在区域">
|
|
<a-cascader v-model:value="address" :options="areaList" placeholder="点击选择省市区"
|
|
:field-names="areaFieldNames" change-on-select
|
|
@change="changeArea" />
|
|
</a-form-item>
|
|
<a-form-item label="详细地址" name="address">
|
|
<a-input
|
|
allow-clear
|
|
placeholder="请输入"
|
|
v-model:value="form.address"
|
|
/>
|
|
</a-form-item>
|
|
<a-form-item label="地图选点">
|
|
<div style="margin-bottom: 1rem">
|
|
<a-space>
|
|
<a-input
|
|
allow-clear
|
|
placeholder="请输入经度(0~180)"
|
|
v-model:value="form.lng"
|
|
>
|
|
<template #addonBefore>经度</template>
|
|
</a-input>
|
|
<a-input
|
|
allow-clear
|
|
placeholder="请输入纬度(0~90)"
|
|
v-model:value="form.lat"
|
|
>
|
|
<template #addonBefore>纬度</template>
|
|
</a-input>
|
|
</a-space>
|
|
</div>
|
|
<!-- <a-button @click="showMap = true">点击选点</a-button>-->
|
|
<!-- <ele-map-picker-->
|
|
<!-- :need-city="true"-->
|
|
<!-- v-model:visible="showMap"-->
|
|
<!-- :center="[form.lng, form.lat]"-->
|
|
<!-- :search-type="1"-->
|
|
<!-- :zoom="12"-->
|
|
<!-- @done="onDone"-->
|
|
<!-- markerSrc="https://oss.wsdns.cn/20250420/48e2b37e6b3f4fad80718b244c2c12fe.png"-->
|
|
<!-- />-->
|
|
<!-- <span v-show="form.lng">{{ form.lng }},{{ form.lat }}</span>-->
|
|
<tdt-map v-if="visible" :center="mapState.center" :zoom="mapState.zoom"
|
|
style="width: 100%; height: 700px"
|
|
:controls="['Zoom']"
|
|
@click.native="clickMap">
|
|
<tdt-marker :position="[form.lng, form.lat]" :draggable="false" />
|
|
<tdt-control>
|
|
<tdt-search @poi-click="poiClick" />
|
|
</tdt-control>
|
|
</tdt-map>
|
|
</a-form-item>
|
|
</a-form>
|
|
</ele-modal>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, reactive, watch, getCurrentInstance } from "vue";
|
|
import { Form, message } from "ant-design-vue";
|
|
import { assignObject, uuid } from "ele-admin-pro";
|
|
import { addLawOrg, updateLawOrg } from "@/api/law/lawOrg";
|
|
import { LawOrg } from "@/api/law/lawOrg/model";
|
|
import { useThemeStore } from "@/store/modules/theme";
|
|
import { storeToRefs } from "pinia";
|
|
import { FormInstance } from "ant-design-vue/es/form";
|
|
import { Area } from "@/api/system/area/model";
|
|
import { listArea } from "@/api/system/area";
|
|
import { TdtMap } from "vue-tianditu";
|
|
import axios from "axios";
|
|
import { CenterPoint } from "ele-admin-pro/es/ele-map-picker/types";
|
|
|
|
// 是否是修改
|
|
const isUpdate = ref(false);
|
|
const useForm = Form.useForm;
|
|
// 是否开启响应式布局
|
|
const themeStore = useThemeStore();
|
|
const { styleResponsive } = storeToRefs(themeStore);
|
|
|
|
const props = defineProps<{
|
|
// 弹窗是否打开
|
|
visible: boolean;
|
|
// 修改回显的数据
|
|
data?: LawOrg | null;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
(e: "done"): void;
|
|
(e: "update:visible", visible: boolean): void;
|
|
}>();
|
|
|
|
// 提交状态
|
|
const loading = ref(false);
|
|
// 是否显示最大化切换按钮
|
|
const maxable = ref(true);
|
|
// 表格选中数据
|
|
const formRef = ref<FormInstance | null>(null);
|
|
|
|
// 用户信息
|
|
const form = reactive<LawOrg>({
|
|
id: undefined,
|
|
title: undefined,
|
|
phone: undefined,
|
|
address: undefined,
|
|
type: undefined,
|
|
provinceId: undefined,
|
|
cityId: undefined,
|
|
areaId: undefined,
|
|
lat: undefined,
|
|
lng: undefined,
|
|
deleted: undefined,
|
|
tenantId: undefined,
|
|
createTime: undefined,
|
|
updateTime: undefined,
|
|
province: undefined,
|
|
city: undefined,
|
|
region: undefined
|
|
});
|
|
|
|
const areaFieldNames = {
|
|
label: "name",
|
|
value: "id"
|
|
};
|
|
const address = ref<any[]>([]);
|
|
const areaList = ref<Area[]>([]);
|
|
const getAreaList = async () => {
|
|
areaList.value = await listArea({ level: 3 });
|
|
};
|
|
|
|
const changeArea = (value, options) => {
|
|
if (options) {
|
|
form.provinceId = options[0].id;
|
|
form.province = options[0].name;
|
|
if (options.length > 1) {
|
|
form.cityId = options[1].id;
|
|
form.city = options[1].name;
|
|
}
|
|
if (options.length > 2) {
|
|
form.areaId = options[2].id;
|
|
form.region = options[2].name;
|
|
}
|
|
} else {
|
|
form.provinceId = undefined;
|
|
form.province = undefined;
|
|
form.cityId = undefined;
|
|
form.city = undefined;
|
|
form.areaId = undefined;
|
|
form.region = undefined;
|
|
}
|
|
};
|
|
|
|
const map = ref();
|
|
const mapState = ref({
|
|
center: [108.358150, 22.826820],
|
|
zoom: 12
|
|
});
|
|
|
|
const poiClick = async ({ lonlat }) => {
|
|
const [lng, lat] = lonlat.split(",");
|
|
form.lng = parseFloat(lng);
|
|
form.lat = parseFloat(lat);
|
|
mapState.value.center = [form.lng, form.lat];
|
|
const instance = getCurrentInstance();
|
|
instance?.proxy?.$forceUpdate();
|
|
message.success("已选择");
|
|
const res = await axios.get(`https://api.tianditu.gov.cn/geocoder?postStr={'lon':${form.lng},'lat':${form.lat},'ver':1}&type=geocode&tk=71f234f251d4cb1feeb3c293a0f21709`);
|
|
if (res.status === 200 && parseInt(res.data.status) === 0) {
|
|
console.log(res.data.result);
|
|
form.province = res.data.result.addressComponent.province;
|
|
form.city = res.data.result.addressComponent.city;
|
|
form.region = res.data.result.addressComponent.county;
|
|
}
|
|
};
|
|
|
|
|
|
const clickMap = async ({ type, lnglat }) => {
|
|
if (type === "click") {
|
|
form.lng = lnglat.lng;
|
|
form.lat = lnglat.lat;
|
|
const instance = getCurrentInstance();
|
|
message.success("已选择");
|
|
mapState.value.center = [parseFloat(form.lng), parseFloat(form.lat)];
|
|
instance?.proxy?.$forceUpdate();
|
|
const res = await axios.get(`https://api.tianditu.gov.cn/geocoder?postStr={'lon':${lnglat.lng},'lat':${lnglat.lat},'ver':1}&type=geocode&tk=71f234f251d4cb1feeb3c293a0f21709`);
|
|
if (res.status === 200 && parseInt(res.data.status) === 0) {
|
|
form.province = res.data.result.addressComponent.province;
|
|
form.city = res.data.result.addressComponent.city;
|
|
form.region = res.data.result.addressComponent.county;
|
|
}
|
|
}
|
|
};
|
|
|
|
const showMap = ref(false);
|
|
const onDone = (location: CenterPoint) => {
|
|
if (location) {
|
|
form.province = `${location.city?.province}`;
|
|
form.city = `${location.city?.city}`;
|
|
form.region = `${location.city?.district}`;
|
|
form.lng = location.lng?.toString();
|
|
form.lat = location.lat?.toString();
|
|
}
|
|
showMap.value = false;
|
|
};
|
|
|
|
/* 更新visible */
|
|
const updateVisible = (value: boolean) => {
|
|
emit("update:visible", value);
|
|
};
|
|
|
|
// 表单验证规则
|
|
const rules = reactive({
|
|
title: [
|
|
{
|
|
required: true,
|
|
message: "请输入名称",
|
|
type: "string",
|
|
trigger: "blur"
|
|
}
|
|
],
|
|
phone: [
|
|
{
|
|
required: true,
|
|
message: "请输入电话",
|
|
type: "string",
|
|
trigger: "blur"
|
|
}
|
|
],
|
|
type: [
|
|
{
|
|
required: true,
|
|
message: "请选择类型",
|
|
type: "string",
|
|
trigger: "blur"
|
|
}
|
|
],
|
|
address: [
|
|
{
|
|
required: true,
|
|
message: "请输入地址",
|
|
type: "string",
|
|
trigger: "blur"
|
|
}
|
|
]
|
|
});
|
|
|
|
const { resetFields } = useForm(form, rules);
|
|
|
|
/* 保存编辑 */
|
|
const save = () => {
|
|
if (!formRef.value) {
|
|
return;
|
|
}
|
|
formRef.value
|
|
.validate()
|
|
.then(() => {
|
|
loading.value = true;
|
|
const formData = {
|
|
...form
|
|
};
|
|
const saveOrUpdate = isUpdate.value ? updateLawOrg : addLawOrg;
|
|
if (!form.areaId) return message.error("请选择区域");
|
|
if (!form.lat) return message.error("请在地图选点");
|
|
saveOrUpdate(formData)
|
|
.then((msg) => {
|
|
loading.value = false;
|
|
message.success(msg);
|
|
updateVisible(false);
|
|
emit("done");
|
|
})
|
|
.catch((e) => {
|
|
loading.value = false;
|
|
message.error(e.message);
|
|
});
|
|
})
|
|
.catch(() => {
|
|
});
|
|
};
|
|
|
|
const searchComplete = e => {
|
|
console.log(e);
|
|
};
|
|
|
|
|
|
watch(
|
|
() => props.visible,
|
|
async (visible) => {
|
|
if (visible) {
|
|
await getAreaList();
|
|
if (props.data) {
|
|
assignObject(form, props.data);
|
|
isUpdate.value = true;
|
|
if (form.provinceId && form.cityId && form.areaId) {
|
|
address.value = [form.provinceId, form.cityId, form.areaId];
|
|
}
|
|
if (form.lat && form.lng) {
|
|
mapState.value.center = [parseFloat(form.lng), parseFloat(form.lat)];
|
|
console.log(mapState.value);
|
|
}
|
|
} else {
|
|
isUpdate.value = false;
|
|
}
|
|
} else {
|
|
resetFields();
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
import * as icons from "@/layout/menu-icons";
|
|
|
|
export default {
|
|
components: icons,
|
|
data() {
|
|
return {
|
|
iconData: [
|
|
{
|
|
title: "已引入的图标",
|
|
icons: Object.keys(icons)
|
|
}
|
|
]
|
|
};
|
|
}
|
|
};
|
|
</script>
|