<template>
|
<el-dialog
|
style="pointer-events: auto"
|
:model-value="modelValue"
|
@update:modelValue="handleDialogChange"
|
width="50%"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
destroy-on-close
|
>
|
<template #header>
|
<span> {{ create ? '发布内部线索' : '更新内部线索' }}</span>
|
</template>
|
<el-form
|
label-width="120px"
|
label-position="right"
|
:rules="rules"
|
:model="formObj"
|
ref="formRef"
|
>
|
<el-form-item label="线索名称" prop="cclueName">
|
<el-input
|
v-model="formObj.cclueName"
|
placeholder="请输入线索名称"
|
class="w-200"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="线索描述" prop="cconclusion">
|
<el-input
|
v-model="formObj.cconclusion"
|
type="textarea"
|
placeholder="请输入线索描述"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="详细地址" prop="caddress">
|
<el-input
|
v-model="formObj.caddress"
|
placeholder="请输入地址或者通过“坐标拾取”自动获得"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="坐标" prop="coordinate">
|
<el-input
|
style="width: 300px; margin-right: 8px"
|
v-model="formObj.coordinate"
|
placeholder="经纬度坐标，格式为121.123452,31.231235"
|
></el-input>
|
<el-button plain type="primary" @click="openMapDialog"
|
>坐标拾取</el-button
|
>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<el-button @click="onCancel">取消</el-button>
|
<el-button
|
:disabled="!edit"
|
type="primary"
|
:loading="loading"
|
@click="onSubmit"
|
>确定</el-button
|
>
|
</template>
|
</el-dialog>
|
<MapSearch
|
v-model:show="mapDialogShow"
|
@on-submit="selectAddress"
|
></MapSearch>
|
</template>
|
<script setup>
|
import { ref, reactive, watch, onMounted } from 'vue';
|
import { useFormConfirm } from '@/composables/formConfirm';
|
import clueInternalApi from '@/api/clue/clueInternalApi';
|
|
import MapSearch from '@/components/map/MapSearch.vue';
|
|
const props = defineProps({
|
modelValue: Boolean,
|
clueData: Object,
|
create: {
|
type: Boolean,
|
default: true
|
},
|
// 自定义创建方法
|
onCreate: Function,
|
// 自定义更新方法
|
onUpdate: Function
|
});
|
|
const emits = defineEmits(['update:modelValue', 'onSubmit']);
|
|
function handleDialogChange(value) {
|
emits('update:modelValue', value);
|
}
|
|
const { formObj, formRef, edit, onSubmit, onCancel, clear } =
|
useFormConfirm({
|
submit: {
|
do: submit
|
},
|
cancel: {
|
do: cancel
|
}
|
});
|
const loading = ref(false);
|
// 表单检查规则
|
const rules = reactive({
|
cclueName: [
|
{
|
required: true,
|
message: '线索名称不能为空',
|
trigger: 'blur'
|
}
|
],
|
caddress: [
|
{
|
required: true,
|
message: '线索地址不能为空',
|
trigger: 'blur'
|
}
|
],
|
coordinate: [
|
{
|
required: true,
|
message: '线索定位不能为空',
|
trigger: 'blur'
|
}
|
],
|
});
|
|
// 对话框确认操作
|
function submit() {
|
const param = getParams();
|
return props.create
|
? props.onCreate
|
? props.onCreate(param)
|
: createClue(param)
|
: props.onUpdate
|
? props.onUpdate(param)
|
: updateClue(param);
|
}
|
|
// 对话框取消操作
|
function cancel() {
|
emits('update:modelValue', false);
|
}
|
|
// 新建内部线索
|
function createClue(params) {
|
clueInternalApi
|
.createInternalClue(params)
|
.then(() => {
|
emits('update:modelValue', false);
|
emits('onSubmit');
|
})
|
.finally(() => {
|
loading.value = false;
|
});
|
}
|
|
// 更新内部线索
|
function updateClue(params) {
|
clueInternalApi
|
.updateInternalClue(params)
|
.then(() => {
|
emits('update:modelValue', false);
|
emits('onSubmit');
|
})
|
.finally(() => {
|
loading.value = false;
|
});
|
}
|
|
// 获取线索对象参数
|
function getParams() {
|
const coor = formObj.value.coordinate.split(',');
|
return {
|
cid: formObj.value.cid,
|
cclueName: formObj.value.cclueName,
|
cconclusion: formObj.value.cconclusion,
|
caddress: formObj.value.caddress,
|
clongitude: parseFloat(coor[0]),
|
clatitude: parseFloat(coor[1])
|
};
|
}
|
|
// 初始化线索表单对象
|
watch(
|
() => [props.modelValue, props.clueData],
|
(nV, oV) => {
|
const [m, d] = nV;
|
if (m) {
|
formObj.value = {};
|
if (d) {
|
formObj.value = d;
|
formObj.value.coordinate = d.cLongitude + ',' + d.cLatitude;
|
}
|
}
|
}
|
);
|
/*********************************************************** */
|
const mapDialogShow = ref(false);
|
function openMapDialog() {
|
mapDialogShow.value = true;
|
}
|
function selectAddress(result) {
|
formObj.value.caddress = result.address;
|
formObj.value.coordinate = result.gpsLon + ',' + result.gpsLat;
|
}
|
</script>
|
