126 lines
4.2 KiB
Vue
126 lines
4.2 KiB
Vue
<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>
|