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