From d22ce1ad1c4656f5c2212bbabb35ba498300aced Mon Sep 17 00:00:00 2001 From: riku <risaku@163.com> Date: 星期四, 20 七月 2023 17:12:20 +0800 Subject: [PATCH] 线索下发及提交结论和问题模块基本完成 --- src/views/overlay-clue/components/QuestionDetail.vue | 264 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 264 insertions(+), 0 deletions(-) diff --git a/src/views/overlay-clue/components/QuestionDetail.vue b/src/views/overlay-clue/components/QuestionDetail.vue new file mode 100644 index 0000000..ac67c93 --- /dev/null +++ b/src/views/overlay-clue/components/QuestionDetail.vue @@ -0,0 +1,264 @@ +<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="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"></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-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> + <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([]); + +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({ + 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), + 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, + (val) => { + dialogShow.value = val; + } +); +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