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