From 1f96f089eb3546c682313d29513be04ac72e2de5 Mon Sep 17 00:00:00 2001 From: riku <risaku@163.com> Date: 星期二, 31 十月 2023 16:21:08 +0800 Subject: [PATCH] Merge branch 'master' of ssh://114.215.109.124:29418/grid-management-vue --- src/views/overlay-clue/report/components/QuestionDetail.vue | 314 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 314 insertions(+), 0 deletions(-) diff --git a/src/views/overlay-clue/report/components/QuestionDetail.vue b/src/views/overlay-clue/report/components/QuestionDetail.vue new file mode 100644 index 0000000..81c524a --- /dev/null +++ b/src/views/overlay-clue/report/components/QuestionDetail.vue @@ -0,0 +1,314 @@ +<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鐨刯pg/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> -- Gitblit v1.9.3