xj-admin/src/views/emergency/aed/location/compoents/locationDrawer.vue

<template>
    <BasicDrawer v-bind="$attrs" width="800px" :show-footer="true" :title="title" @register="registerDrawer" destroyOnClose @ok="handleSubmit">
        <BasicForm @register="registerForm">
            <template #old="{ model, field }">
                <a-input placeholder="请选择未布点设备" v-model:value="model[field]" readonly style="cursor: pointer" @click="clickDevice" />
            </template>
            <template #hostSerialNum="{ model, field }"> {{ model[field] }} </template>

            <template #installAddress="{ model, field }">
                <div style="display: flex">
                    <a-input v-model:value="model[field]" :disabled="true" />
                    <a-button style="margin-left: 10px" @click="viewMap">查看地图</a-button>
                </div>
            </template>
        </BasicForm>

        <Map @register="registerMap" :state="state" ref="map" @get-position="getPosition" />
    </BasicDrawer>
    <choose-some :width="'600px'" @register="registerDrawer1" @select-some="selectSome" title="选择设备" :tableprops="tableProps" />
</template>
<script setup lang="ts">
    import BasicDrawer from '/@/components/Drawer/src/BasicDrawer.vue';
    import { useDrawer, useDrawerInner } from '/@/components/Drawer';
    import { ref } from 'vue';
    import BasicForm from '/@/components/Form/src/BasicForm.vue';
    import { useForm } from '/@/components/Form';
    import { formSchema, mColumns, mSearchFormSchema } from '/@/views/emergency/aed/location/locationList.data';
    import ChooseSome from '/@/views/compoents/chooseSome/index.vue';
    import { addApi, editApi, getUnPublishEquipmentApi } from '/@/views/emergency/aed/location/locationList.api';
    import Map from '/@/views/consult/resource/components/Map.vue';
    import { useModal } from '/@/components/Modal';

    const title = ref();
    const state = ref();
    const isUpdate = ref(false);
    const emit = defineEmits(['success']);

    const [registerDrawer1, { openDrawer }] = useDrawer();

    const [registerMap, { openModal }] = useModal();
    function viewMap() {
        openModal(true, {
            record: state.value,
        });
    }

    async function getPosition(val) {
        let { pname, cityname, adname, address, name } = val.handleItem || '';
        let nameList = [pname, cityname, adname, address, name];
        let str = '';
        nameList.map((item) => {
            if (item !== undefined) {
                str += item;
            }
        });
        console.log(str);
        await setFieldsValue({
            latitude: val.lat,
            longitude: val.lng,
            installAddress: str,
        });
        state.value = {
            ...state.value,
            latitude: val.lat,
            longitude: val.lng,
        };
    }
    const tableProps = ref({
        tableProps: {
            // title: '一线医疗点医药管理',
            api: getUnPublishEquipmentApi,
            columns: mColumns,
            canResize: false,
            rowKey: (record: Recordable) => {
                return JSON.stringify(record);
            },
            beforeFetch: (params: any) => {
                params['publishFlag'] = '0';
            },
            formConfig: {
                //labelWidth: 120,
                schemas: mSearchFormSchema,
                autoSubmitOnEnter: true,
                showAdvancedButton: false,
                fieldMapToNumber: [],
                fieldMapToTime: [],
                baseColProps: {
                    xs: 8,
                    sm: 8,
                    md: 8,
                    lg: 8,
                    xl: 12,
                    xxl: 12,
                },
                actionColOptions: {
                    span: 24,
                    offset: 0,
                    xs: 8,
                    sm: 8,
                    md: 8,
                    lg: 8,
                    xl: 12,
                    xxl: 12,
                },
            },
            showActionColumn: false,
        },
    });

    const [registerForm, { setFieldsValue, validate }] = useForm({
        schemas: formSchema,
        showActionButtonGroup: false,
    });
    const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
        title.value = data.title;
        isUpdate.value = data.isUpdate;
        state.value = {
            latitude: null,
            longitude: null,
        };
        setDrawerProps({ confirmLoading: false });
        if (data.isUpdate) {
            await setFieldsValue({
                ...data.record,
                ...{ installTIme: data.record.installTime },
            });
            state.value = { ...data.record, address: data.record.installAddress };
        }
    });

    function selectSome(v) {
        setFieldsValue({
            name: JSON.parse(v).name,
            id: JSON.parse(v).id,
            // hostModel: JSON.parse(v).hostModel,
        });
    }

    function clickDevice() {
        openDrawer(true, {});
    }

    async function handleSubmit() {
        try {
            const values = await validate();
            setDrawerProps({ confirmLoading: true });
            if (isUpdate.value) {
                await editApi(values);
            } else {
                await addApi(values);
            }
            closeDrawer();
            emit('success');
        } catch {
            setDrawerProps({ confirmLoading: false });
        }
    }
</script>
<style scoped lang="less"></style>