调整

src/views/law/lawOrg/components/lawOrgEdit.vue

@@ -0,0 +1,335 @@
+<!-- 编辑弹窗 -->
+<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="地图选点">
+                <p>已选坐标: {{ form.lng }},{{ form.lat }}</p>
+                <!--                <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;
+        if (options.length > 1) form.cityId = options[1].id;
+        if (options.length > 2) form.areaId = options[2].id;
+    } else {
+        form.provinceId = undefined;
+        form.cityId = undefined;
+        form.areaId = 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>

src/views/law/lawOrg/components/search.vue

@@ -0,0 +1,69 @@
+<!-- 搜索表单 -->
+<template>
+    <a-space :size="10" style="flex-wrap: wrap">
+        <a-input-search v-model:value="searchText" placeholder="请输入搜索关键词" @change="search" allow-clear />
+        <a-select v-model:value="type" style="width: 150px" placeholder="类型筛选" @change="search" allow-clear>
+            <a-select-option v-for="(item, index) in dictList" :key="index" :value="item.dictDataCode">
+                {{ item.dictDataCode }}
+            </a-select-option>
+        </a-select>
+        <a-button type="primary" class="ele-btn-icon" @click="add">
+            <template #icon>
+                <PlusOutlined />
+            </template>
+            <span>添加</span>
+        </a-button>
+    </a-space>
+</template>
+
+<script lang="ts" setup>
+import { PlusOutlined } from "@ant-design/icons-vue";
+import { ref, watch } from "vue";
+import { LawOrgParam } from "@/api/law/lawOrg/model";
+import { listDictData } from "@/api/system/dict-data";
+import { DictData } from "@/api/system/dict-data/model";
+
+const props = withDefaults(
+    defineProps<{
+        // 选中的角色
+        selection?: [];
+    }>(),
+    {}
+);
+
+const searchText = ref("");
+const type = ref();
+
+const emit = defineEmits<{
+    (e: "search", where?: LawOrgParam): void;
+    (e: "add"): void;
+    (e: "remove"): void;
+    (e: "batchMove"): void;
+}>();
+
+const search = () => {
+    emit("search", {
+        keywords: searchText.value,
+        type: type.value
+    });
+};
+
+const dictList = ref<DictData[]>([]);
+const getDictList = async () => {
+    dictList.value = await listDictData({
+        dictId: 161
+    });
+};
+getDictList();
+
+// 新增
+const add = () => {
+    emit("add");
+};
+
+watch(
+    () => props.selection,
+    () => {
+    }
+);
+</script>