2023.10.31

riku

2023-10-31 2d3d56ff801b73afdb779267004d740f9beafe57

 src/views/overlay-clue/report/components/QuestionDetail.vue

ÎļþÃû´Ó src/views/overlay-clue/components/QuestionDetail.vue ÐÞ¸Ä
@@ -7,7 +7,7 @@
    destroy-on-close
  >
    <template #header>
      <span> åé¦ˆé—®é¢˜</span>
      <span> æ·»åŠ é—®é¢˜</span>
    </template>
    <el-form
      label-width="90px"
@@ -16,11 +16,17 @@
      :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="请输入详情"
          placeholder="请输入问题描述"
        ></el-input>
      </el-form-item>
      <el-form-item label="所在街镇" prop="cqStreet">
@@ -34,7 +40,10 @@
        </el-select>
      </el-form-item>
      <el-form-item label="详细地址" prop="cqAddress">
        <el-input v-model="formObj.cqAddress"></el-input>
        <el-input
          v-model="formObj.cqAddress"
          placeholder="请输入地址或者通过“坐标拾取”自动获得"
        ></el-input>
      </el-form-item>
      <el-form-item label="坐标" prop="coordinate">
        <el-input
@@ -57,6 +66,7 @@
          accept="image/png, image/jpeg"
          :limit="3"
          multiple
          :on-preview="handleFilePreview"
          :on-remove="handleFileRemove"
          :on-change="handleFileChange"
        >
@@ -80,6 +90,13 @@
      >
    </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"
@@ -99,13 +116,30 @@
  question: Object
});

const emit = defineEmits(['update:show', 'onSubmit'], ['onClose']);
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;
@@ -127,6 +161,13 @@
const loading = ref(false);
// è¡¨å•æ£€æŸ¥è§„则
const rules = reactive({
  cqName: [
    {
      required: true,
      message: '问题名称不能为空',
      trigger: 'blur'
    }
  ],
  cqDescription: [
    {
      required: true,
@@ -182,6 +223,7 @@
  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,
@@ -238,26 +280,34 @@
      url: f
    });
  });
  return question;
  return { ...question };
}

watch(
  () => props.show,
  () => [props.show, props.question],
  (val) => {
    dialogShow.value = val;
  }
);
watch(
  () => props.question,
  (val) => {
    dialogShow.value = val[0];
    if (val[0]) {
    fileList.value = [];
    if (val) {
      formObj.value = parseFormObj(val);
      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);
});