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

<template>
  <el-form ref="form" label-width="84px">
    <el-form-item label="案件名称">
      <el-input
        v-model="bindExample.caseTitle"
        maxlength="300"
        placeholder="请输入案件名称"
      />
    </el-form-item>

    <el-form-item label="案件编号">
      <el-input
        v-model="bindExample.caseNum"
        maxlength="300"
        placeholder="请输入案件编号"
      />
    </el-form-item>

    <el-form-item label="案件类别">
      <el-input
        v-model="bindExample.caseCategory"
        maxlength="300"
        placeholder="请输入案件类别"
      />
    </el-form-item>

    <el-form-item label="案件区域">
      <el-input
        v-model="bindExample.caseRegion"
        maxlength="300"
        placeholder="案件区域"
      />
    </el-form-item>

    <el-form-item label="案件地点">
      <el-input
        v-model="bindExample.caseAddress"
        maxlength="300"
        placeholder="案件地点"
      />
    </el-form-item>
    <!-- class="mandatory" -->
    <div class="el-form-item">
      <el-col :span="12">
        <el-form-item label="是否命案">
          <el-radio-group v-model="bindExample.homicideCase">
            <el-radio-button :value="1">是</el-radio-button>
            <el-radio-button :value="0">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="是否刑案">
          <el-radio-group v-model="bindExample.criminalCase">
            <el-radio-button :value="1">是</el-radio-button>
            <el-radio-button :value="0">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </div>

    <el-form-item label="经纬度">
      <el-input
        v-model="bindExample.latAndLong"
        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>
</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";

interface CriminalExample extends Example {
  caseNum: string; //案件编号
  caseCategory: string; //案件类别
  caseRegion: string; //案发区域
  caseAddress: string; //案发地址
  homicideCase: number; //是否命案，0否，1是
  criminalCase: number; //是否刑案，0否，1是
}

const props = defineProps<{ example?: CriminalExample }>();

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

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>