131 lines
4.9 KiB
Vue
131 lines
4.9 KiB
Vue
<template>
|
|
<AFormPanel
|
|
ref="formPanel"
|
|
:details-loader="detailsLoader"
|
|
:do-submit="doSubmit"
|
|
:rules="rules"
|
|
:title="status === 'add' ? '新建站点' : '修改站点'"
|
|
>
|
|
<template #default="{formData}">
|
|
<div class="form-items">
|
|
<ElFormItem label="企业信息 Id" prop="orgId">
|
|
|
|
</ElFormItem>
|
|
<ElFormItem label="站点名称" prop="stationName">
|
|
<ElInput v-model="formData.stationName" placeholder="站点名称"/>
|
|
</ElFormItem>
|
|
<!-- <ElFormItem label="省；代码" prop="province">
|
|
<ElInput v-model="formData.province" placeholder="省；代码" />
|
|
</ElFormItem>
|
|
<ElFormItem label="市；代码" prop="city">
|
|
<ElInput v-model="formData.city" placeholder="市；代码" />
|
|
</ElFormItem>
|
|
<ElFormItem label="区县；代码" prop="area">
|
|
<ElInput v-model="formData.area" placeholder="区县；代码" />
|
|
</ElFormItem>
|
|
<ElFormItem label="乡镇街道；代码" prop="town">
|
|
<ElInput v-model="formData.town" placeholder="乡镇街道；代码" />
|
|
</ElFormItem> -->
|
|
<ElFormItem label="详细地址" prop="address">
|
|
</ElFormItem>
|
|
<ElFormItem label="省" prop="provinceName">
|
|
<ElInput v-model="formData.provinceName" placeholder="省"/>
|
|
</ElFormItem>
|
|
<ElFormItem label="市" prop="cityName">
|
|
<ElInput v-model="formData.cityName" placeholder="市"/>
|
|
</ElFormItem>
|
|
<ElFormItem label="区县" prop="areaName">
|
|
<ElInput v-model="formData.areaName" placeholder="区县"/>
|
|
</ElFormItem>
|
|
<ElFormItem label="乡镇街道" prop="townName">
|
|
<ElInput v-model="formData.townName" placeholder="乡镇街道"/>
|
|
</ElFormItem>
|
|
|
|
<ElFormItem label="经度" prop="lng">
|
|
<ElInput v-model="formData.lng" placeholder="经度"/>
|
|
</ElFormItem>
|
|
<ElFormItem label="纬度" prop="lat">
|
|
<ElInput v-model="formData.lat" placeholder="纬度"/>
|
|
</ElFormItem>
|
|
|
|
<div id="container" style="width: 100%; height: 400px"></div>
|
|
|
|
</div>
|
|
</template>
|
|
</AFormPanel>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import StationApi from '@/pages/cst/station/station-api.ts'
|
|
import Strings from '@/common/utils/strings.ts'
|
|
import { type FormRules } from 'element-plus'
|
|
import AFormPanel from '@/components/a-form-panel/AFormPanel.vue'
|
|
import type { ComponentExposed } from 'vue-component-type-helpers'
|
|
|
|
const props = withDefaults(defineProps<{
|
|
research?: () => void
|
|
}>(), {
|
|
research: () => {
|
|
},
|
|
})
|
|
const formPanelIns = useTemplateRef<ComponentExposed<typeof AFormPanel>>('formPanel')
|
|
const status = ref<'add' | 'modify'>('add')
|
|
|
|
const rules = reactive<FormRules<StationTypes.SearchStationResult>>({
|
|
id: [ {required: true, message: '请填写Id', trigger: 'blur'} ],
|
|
orgId: [ {required: true, message: '请填写企业信息 Id', trigger: 'blur'} ],
|
|
stationName: [ {required: true, message: '请填写站点名称', trigger: 'blur'} ],
|
|
province: [ {required: true, message: '请填写省；代码', trigger: 'blur'} ],
|
|
city: [ {required: true, message: '请填写市；代码', trigger: 'blur'} ],
|
|
area: [ {required: true, message: '请填写区县；代码', trigger: 'blur'} ],
|
|
town: [ {required: true, message: '请填写乡镇街道；代码', trigger: 'blur'} ],
|
|
provinceName: [ {required: true, message: '请填写省', trigger: 'blur'} ],
|
|
cityName: [ {required: true, message: '请填写市', trigger: 'blur'} ],
|
|
areaName: [ {required: true, message: '请填写区县', trigger: 'blur'} ],
|
|
townName: [ {required: true, message: '请填写乡镇街道', trigger: 'blur'} ],
|
|
address: [ {required: true, message: '请填写详细地址', trigger: 'blur'} ],
|
|
lng: [ {required: true, message: '请填写经度', trigger: 'blur'} ],
|
|
lat: [ {required: true, message: '请填写纬度', trigger: 'blur'} ],
|
|
creatorId: [ {required: true, message: '请填写创建人', trigger: 'blur'} ],
|
|
modifierId: [ {required: true, message: '请填写修改人', trigger: 'blur'} ],
|
|
createTime: [ {required: true, message: '请填写创建时间', trigger: 'blur'} ],
|
|
modifyTime: [ {required: true, message: '请填写修改时间', trigger: 'blur'} ],
|
|
deleted: [ {required: true, message: '请填写是否删除', trigger: 'blur'} ],
|
|
})
|
|
|
|
|
|
function detailsLoader(id?: string) {
|
|
if (Strings.isBlank(id)) {
|
|
status.value = 'add'
|
|
return Promise.resolve()
|
|
} else {
|
|
status.value = 'modify'
|
|
return StationApi
|
|
.detail(id!)
|
|
.then(res => res.data)
|
|
}
|
|
}
|
|
|
|
function doSubmit(data: ProjectTypes.SearchProjectResult) {
|
|
if (status.value === 'add') {
|
|
return StationApi.add(data)
|
|
.then(props.research)
|
|
} else {
|
|
return StationApi.modify(data)
|
|
.then(props.research)
|
|
}
|
|
}
|
|
|
|
defineExpose({
|
|
open(data?: ProjectTypes.SearchProjectResult) {
|
|
formPanelIns.value?.open(data?.id)
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style lang="stylus" scoped>
|
|
.form-panel {
|
|
padding 20px
|
|
}
|
|
</style>
|