<template>
|
<el-dialog
|
v-model="dialogShow"
|
width="50%"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
destroy-on-close
|
>
|
<template #header>
|
<span> 添加问题</span>
|
</template>
|
<el-form
|
label-width="90px"
|
label-position="left"
|
:rules="rules"
|
:model="formObj"
|
ref="formRef"
|
>
|
<el-form-item label="问题名称" prop="cqName">
|
<el-input
|
v-model="formObj.cqName"
|
placeholder="请输入问题名称"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="问题描述" prop="cqDescription">
|
<el-input
|
v-model="formObj.cqDescription"
|
type="textarea"
|
placeholder="请输入问题描述"
|
></el-input>
|
</el-form-item>
|
<el-form-item label="所在街镇" prop="cqStreet">
|
<el-select v-model="formObj.cqStreet" placeholder="所在街镇">
|
<el-option
|
v-for="s in streets"
|
:key="s.value"
|
:label="s.label"
|
:value="s.label"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="详细地址" prop="cqAddress">
|
<el-input
|
v-model="formObj.cqAddress"
|
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-item label="问题图片" prop="files">
|
<el-upload
|
ref="uploadRef"
|
:file-list="fileList"
|
action=""
|
:auto-upload="false"
|
list-type="picture-card"
|
name="images"
|
accept="image/png, image/jpeg"
|
:limit="3"
|
multiple
|
:on-preview="handleFilePreview"
|
:on-remove="handleFileRemove"
|
:on-change="handleFileChange"
|
>
|
<el-icon><Plus /></el-icon>
|
<template #tip>
|
<div class="el-upload__tip">
|
请选择小于500kb的jpg/png图片，最多3张
|
</div>
|
</template>
|
</el-upload>
|
</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>
|
<el-image-viewer
|
v-if="previewShow"
|
:url-list="urlList"
|
:initial-index="initialIndex"
|
:infinite="false"
|
@close="closePreview"
|
></el-image-viewer>
|
<MapSearch
|
v-model:show="mapDialogShow"
|
@on-submit="selectAddress"
|
></MapSearch>
|
</template>
|
|
<script setup>
|
import { reactive, ref, watch, computed } from 'vue';
|
import { useFormConfirm } from '@/composables/formConfirm';
|
import { streets } from '@/constant/street';
|
import clueQuestionApi from '@/api/clue/clueQuestionApi';
|
import MapSearch from '@/components/map/MapSearch.vue';
|
|
const props = defineProps({
|
clueId: Number,
|
show: Boolean,
|
question: Object
|
});
|
|
const emit = defineEmits(['update:show', 'onSubmit', 'onClose']);
|
|
// 上报弹出框
|
const dialogShow = ref(false);
|
const mapDialogShow = ref(false);
|
const uploadRef = ref();
|
const fileList = ref([]);
|
|
const previewShow = ref(false);
|
const initialIndex = ref(0);
|
const urlList = computed(() =>
|
fileList.value.map((value) => {
|
return value.url;
|
})
|
);
|
|
function handleFilePreview(file) {
|
initialIndex.value = fileList.value.indexOf(file);
|
previewShow.value = true;
|
}
|
|
function closePreview() {
|
previewShow.value = false;
|
}
|
|
function handleFileRemove(file, fileList) {
|
formObj.value.files = fileList;
|
}
|
|
function handleFileChange(file, fileList) {
|
formObj.value.files = fileList;
|
}
|
|
const { formObj, formRef, edit, onSubmit, onCancel, clear } =
|
useFormConfirm({
|
submit: {
|
do: submit
|
},
|
cancel: {
|
do: cancel
|
}
|
});
|
const loading = ref(false);
|
// 表单检查规则
|
const rules = reactive({
|
cqName: [
|
{
|
required: true,
|
message: '问题名称不能为空',
|
trigger: 'blur'
|
}
|
],
|
cqDescription: [
|
{
|
required: true,
|
message: '问题描述不能为空',
|
trigger: 'blur'
|
}
|
],
|
cqStreet: [
|
{
|
required: true,
|
message: '所在街镇不能为空',
|
trigger: 'change'
|
}
|
],
|
cqAddress: [
|
{
|
required: true,
|
message: '详细地址不能为空',
|
trigger: 'blur'
|
}
|
],
|
coordinate: [
|
{
|
required: true,
|
message: '坐标不能为空',
|
trigger: 'blur'
|
}
|
],
|
// cqLongitude: [
|
// {
|
// required: true,
|
// message: '经度不能为空',
|
// trigger: 'blur'
|
// }
|
// ],
|
// cqLatitude: [
|
// {
|
// required: true,
|
// message: '维度不能为空',
|
// trigger: 'blur'
|
// }
|
// ],
|
files: [
|
{
|
required: true,
|
message: '图片不能为空',
|
trigger: 'change'
|
}
|
]
|
});
|
|
function submit() {
|
const coor = formObj.value.coordinate.split(',');
|
const q = {
|
cId: parseInt(props.clueId),
|
cqName: formObj.value.cqName,
|
cqDescription: formObj.value.cqDescription,
|
cqStreet: formObj.value.cqStreet,
|
cqAddress: formObj.value.cqAddress,
|
cqLongitude: parseFloat(coor[0]),
|
cqLatitude: parseFloat(coor[1])
|
};
|
const files = [];
|
formObj.value.files.forEach((f) => {
|
files.push(f.raw);
|
});
|
return uploadQuestion(q, files);
|
}
|
|
function cancel() {
|
// clear();
|
dialogShow.value = false;
|
}
|
|
function openMapDialog() {
|
mapDialogShow.value = true;
|
}
|
|
function selectAddress(result) {
|
formObj.value.cqAddress = result.address;
|
formObj.value.coordinate = result.gpsLon + ',' + result.gpsLat;
|
}
|
|
/**
|
* 上传线索结论
|
*/
|
function uploadQuestion(question, files) {
|
loading.value = true;
|
|
return clueQuestionApi
|
.uploadQuestion(question, files)
|
.then(() => {
|
dialogShow.value = false;
|
clear();
|
uploadRef.value.clearFiles();
|
emit('onSubmit');
|
})
|
.finally(() => {
|
loading.value = false;
|
});
|
}
|
|
function parseFormObj(question) {
|
question.coordinate =
|
question.cqLongitude + ',' + question.cqLatitude;
|
fileList.value = [];
|
question.cqFilePath.forEach((f, index) => {
|
fileList.value.push({
|
name: `${index}`,
|
url: f
|
});
|
});
|
return { ...question };
|
}
|
|
watch(
|
() => [props.show, props.question],
|
(val) => {
|
dialogShow.value = val[0];
|
if (val[0]) {
|
fileList.value = [];
|
if (val[1]) {
|
formObj.value = parseFormObj(val[1]);
|
} else {
|
formObj.value = {};
|
}
|
}
|
}
|
);
|
// watch(
|
// () => props.question,
|
// (val) => {
|
// fileList.value = [];
|
// if (val) {
|
// formObj.value = parseFormObj(val);
|
// } else {
|
// formObj.value = {};
|
// }
|
// }
|
// );
|
watch(dialogShow, (val) => {
|
emit('update:show', val);
|
});
|
</script>
|
