public-fuse/src/app/criminal/view/example/edit.vue

<template>
  <el-form ref="form" label-width="84px">
    <!-- {{ bindExample }} -->
    <el-form-item label="案件名称">
      <el-input v-model="bindExample.caseTitle" maxlength="50" placeholder="请输入案件名称" />
    </el-form-item>
    <el-form-item label="详细地址">
      <el-input v-model="bindExample.mapUrl" placeholder="输入名称搜索" clearable disabled>
        <template #append>
          <el-button :icon="Search" @click="searchAMapAddress" />
        </template>
      </el-input>
    </el-form-item>
    <el-form-item label="首页显示">
      <el-switch v-model="bindExample.mapShow" :disabled="!bindExample.latAndLong" />
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Example, setExample, addExample } from "@/app/criminal/store/example";
import { ElMessage } from "element-plus";
import { QuiskExpose } from "@/helper/mount";
import { Search } from "@element-plus/icons-vue";
import { selectMapImage } from "@/view/case/quisk";

const props = defineProps<{ example?: Example }>();
const bindExample = ref<Example>(props.example ? { ...props.example } : ({} as Example));

defineExpose<QuiskExpose>({
  async submit() {
    if (!bindExample.value.caseTitle || !bindExample.value.caseTitle.trim()) {
      ElMessage.error("案件名称不能为空");
      throw "案件名称不能为空";
    } else if (!bindExample.value.latAndLong || !bindExample.value.latAndLong.trim()) {
      ElMessage.error("详细地址不能为空");
      throw "详细地址不能为空！";
    }
    await (bindExample.value.caseId
      ? setExample(bindExample.value)
      : addExample(bindExample.value));
  },
});

const searchAMapAddress = async () => {
  const data = await selectMapImage({});
  if (!data?.search) return;
  bindExample.value.mapUrl = data.search.text;
  bindExample.value.latAndLong = `${data.search.lat},${data.search.lng}`;
};
</script>