update

init
2025-06-27 17:42:38 +08:00
commit bd6402478b
5317 changed files with 785994 additions and 0 deletions
@@ -0,0 +1,125 @@
+<template>
+    <BasicDrawer :showFooter="showFooter" :title="title" :width="800" destroyOnClose v-bind="$attrs" @ok="handleSubmit" @register="registerModal">
+        <BasicForm @register="registerForm">
+            <template #address="{ model }">
+                <a-input v-model:value="model['installAddress']" placeholder="请输入安装位置或地图选点" :disabled="!showFooter" style="width: 82%" />
+                <a-button :disabled="!showFooter" style="margin-left: 10px" @click="viewMap"> 查看地图 </a-button>
+            </template>
+        </BasicForm>
+        <Map ref="map" :state="state" @register="registerMap" @get-position="getPosition" />
+    </BasicDrawer>
+</template>
+
+<script lang="ts" setup>
+    import { ref, unref } from 'vue';
+    import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+    import { BasicForm, useForm } from '/@/components/Form/index';
+    import { formSchema } from '../Device.data';
+    import { saveOrUpdate } from '../Device.api';
+    import Map from '/@/views/consult/resource/components/Map.vue';
+    import { useModal } from '/@/components/Modal';
+
+    // Emits声明
+    const emit = defineEmits(['register', 'success']);
+    const isUpdate = ref(true);
+    const showFooter = ref<boolean>(true);
+    const state = ref();
+    //设置标题
+    const title = ref<string>('');
+    //表单配置
+    const [registerForm, { setProps, resetFields, setFieldsValue, validate, getFieldsValue, clearValidate }] = useForm({
+        //labelWidth: 150,
+        schemas: formSchema,
+        showActionButtonGroup: false,
+        baseColProps: { span: 24 },
+    });
+    const [registerMap, { openModal }] = useModal();
+    //表单赋值
+    const [registerModal, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
+        //重置表单
+        await resetFields();
+        setDrawerProps({
+            confirmLoading: false,
+            showCancelBtn: !!data?.showFooter,
+            showOkBtn: !!data?.showFooter,
+        });
+        isUpdate.value = !!data?.isUpdate;
+        showFooter.value = data.showFooter;
+        title.value = data.title;
+        let customAddress = '';
+        if (unref(isUpdate)) {
+            customAddress = `${data.record?.longitude}，${data.record?.latitude}`;
+            //表单赋值
+            await setFieldsValue({
+                ...data.record,
+                customAddress,
+                second: data.record?.departCode.slice(0, 6),
+            });
+            state.value = data.record;
+        } else {
+            state.value = {};
+        }
+        await clearValidate();
+        // 隐藏底部时禁用整个表单
+        await setProps({ disabled: !data?.showFooter });
+    });
+
+    function viewMap() {
+        openModal(true, {
+            record: { ...getFieldsValue() },
+        });
+    }
+
+    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;
+            }
+        });
+        await setFieldsValue({
+            latitude: val.lat,
+            longitude: val.lng,
+            customAddress: `${val.lng}，${val.lat}`,
+            installAddress: str,
+        });
+        state.value = {
+            ...state.value,
+            latitude: val.lat,
+            longitude: val.lng,
+        };
+    }
+
+    //表单提交事件
+    async function handleSubmit() {
+        try {
+            let values = await validate();
+            setDrawerProps({ confirmLoading: true });
+            const params = {
+                ...state.value,
+                ...values,
+            };
+            //提交表单
+            await saveOrUpdate(params, isUpdate.value);
+            //关闭弹窗
+            closeDrawer();
+            //刷新列表
+            emit('success');
+        } finally {
+            setDrawerProps({ confirmLoading: false });
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    /** 时间和数字输入框样式 */
+    :deep(.ant-input-number) {
+        width: 100%;
+    }
+
+    :deep(.ant-calendar-picker) {
+        width: 100%;
+    }
+</style>