caseEditor/src/view/abstract/index.vue

<template>
  <div class="abstract">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="案件信息" name="1">
        <el-form
          ref="exampleRef"
          :model="bindExample"
          label-position="top"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          size="default"
          status-icon
        >
          <div class="form-content">
            <el-form-item label="案件名称" required prop="caseTitle">
              <el-input
                v-model="bindExample.caseTitle"
                placeholder="请输入"
                show-word-limit
                maxlength="100"
              />
            </el-form-item>
            <el-form-item label="立案编号" prop="caseNum">
              <el-input
                v-model="bindExample.caseNum"
                placeholder="请输入"
                show-word-limit
                maxlength="100"
              />
            </el-form-item>
            <el-form-item label="案件类别" required prop="caseCategory">
              <el-select
                v-model="bindExample.caseCategory"
                placeholder="请选择案件类别"
              >
                <el-option
                  v-for="item in criminalType"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="案发时间" required prop="crimeTime">
              <el-date-picker
                v-model="bindExample.crimeTime"
                type="datetime"
                aria-label="请选择案发时间"
                placeholder="请选择案发时间"
                style="width: 100%"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-form-item>

            <el-form-item label="案发区域" prop="name">
              <!-- <el-input
                v-model="bindExample.caseRegion"
                placeholder="请输入案发区域"
                show-word-limit
                maxlength="100"
              /> -->
              <el-cascader
        size="large"
        style="width: 100%"
        :props="selectSetting"
        :options="(geoData as any as CascaderOption[])"
        v-model="bindExample.caseRegion"
      ></el-cascader>
            </el-form-item>
            <el-form-item label="案件地点">
              <el-input
                v-model="bindExample.caseAddress"
                placeholder="输入名称搜索"
                clearable
                maxlength="100"
                disabled
              >
                <template #append>
                  <el-button :icon="Search" @click="searchAMapAddress" />
                </template>
              </el-input>
            </el-form-item>
            <!-- <el-form-item label="案发地点" prop="name">
          <el-input
            v-model="bindExample.caseAddress"
            placeholder="请输入"
            show-word-limit
            maxlength="100"
          />
        </el-form-item> -->
            <el-form-item label="是否命案" prop="region">
              <el-select
                v-model="bindExample.homicideCase"
                placeholder="请选择"
              >
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />
              </el-select>
            </el-form-item>
            <el-form-item label="是否刑案" prop="region">
              <el-select
                v-model="bindExample.criminalCase"
                placeholder="请选择"
              >
                <el-option label="是" :value="1" />
                <el-option label="否" :value="0" />
              </el-select>
            </el-form-item>
            <el-form-item label="经纬度" prop="name">
              <el-input
                v-model="bindExample.latAndLongs"
                placeholder="请输入"
                show-word-limit
                maxlength="100"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                class="w-full"
                type="primary"
                @click="submitForm(exampleRef)"
              >
                保存
              </el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="勘验信息" name="2">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          label-position="top"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          size="default"
          status-icon
        >
            <div class="form-content">
              <el-form-item label="指挥中心电话时间">
            <el-date-picker
              v-model="ruleForm.commandTime"
              type="datetime"
              placeholder="请选择"
              aria-label="请选择"
              value-format="YYYY-MM-DD HH:mm:ss"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="接警时间">
            <el-date-picker
              v-model="ruleForm.alarmTime"
              type="datetime"
              placeholder="请选择"
              aria-label="请选择"
              style="width: 100%"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
          <el-form-item label="报警人">
            <el-input
              v-model="ruleForm.alarmName"
              placeholder="请输入"
              show-word-limit
              maxlength="100"
            />
          </el-form-item>
          <el-form-item label="现场勘验单位">
            <el-input
              v-model="ruleForm.inquestDept"
              placeholder="请输入"
              show-word-limit
              maxlength="100"
            />
          </el-form-item>
          <el-form-item label="指派/报告单位">
            <el-input
              v-model="ruleForm.assignDept"
              placeholder="请输入"
              show-word-limit
              maxlength="100"
            />
          </el-form-item>
          <el-form-item label="指派方式">
            <el-input
              v-model="ruleForm.assignType"
              placeholder="请输入"
              show-word-limit
              maxlength="100"
            />
          </el-form-item>
          <el-form-item label="勘验时间">
            <el-date-picker
              v-model="ruleForm.times"
              value-format="YYYY-MM-DD HH:mm:ss"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              format="YYYY-MM-DD HH:mm:ss"
              date-format="YYYY/MM/DD ddd"
            />
          </el-form-item>
          <el-form-item label="勘验地点">
            <el-input
              v-model="ruleForm.inquestAddress"
              placeholder="请输入"
              show-word-limit
              maxlength="100"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              class="w-full"
              type="primary"
              @click="submitForm(ruleFormRef)"
            >
              保存
            </el-button>
          </el-form-item>
          </div>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, reactive, onMounted } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ElMessage, CascaderOption, CascaderProps } from "element-plus";
import { Example, setExample, getExamplePagging } from "@/app/criminal/store/example";
import { selectMapImage } from "@/view/case/quisk";
import { geoData } from "./getGeo";
import { getSceneListData, getCaseInquestInfo, casesaveOrUpDate, getcaseInDate, getCaseInfo  } from "@/store/case";
const selectSetting = ref<CascaderProps>({
  value: "name",
  label: "name",
});
import { router } from "@/router";
const active = ref(true);
const caseId = computed(() => {
  const caseId = router.currentRoute.value.params.caseId;
  if (caseId) {
    return Number(caseId);
  }
});
const ruleFormRef = ref(null);
const exampleRef = ref(null);
const activeName = ref("1");
const ruleForm = ref({
  commandTime: "",
  alarmTime: "",
  alarmName: "",
  inquestDept: "",
  assignDept: "",
  inquestAddress: "",
  location: "",
  times: [],
  resource: "",
  desc: "",
});
const bindExample = ref({
  caseTitle: "",
  caseNum: "",
  mapId: "",
  mapUrl: "",
  caseCategory: "",
  crimeTime: "",
  caseRegion: [],
  caseAddress: "",
  homicideCase: 0,
  criminalCase: 0,
  latAndLong: "",
  latAndLongs: "",
  criminalType: "",
});
const criminalType = [
  "杀人",
  "爆炸",
  "放火",
  "强奸",
  "绑架",
  "投毒",
  "破坏",
  "伤害致死",
  "入室抢劫",
  "入室盗窃",
  "抢劫",
  "抢夺",
  "盗窃类",
  "接触性诈骗",
];
onMounted(async () => {
  console.log("caseInfo", caseId.value);
  const caseInfo = await getCaseInfo(caseId.value)
  const caseData = await getCaseInquestInfo(caseId.value)
  console.log("caseInfo", caseInfo, caseData);
  if (caseInfo) {
    ruleForm.value = caseData || {};
    bindExample.value = JSON.parse(JSON.stringify(caseInfo));
    bindExample.value.latAndLongs = bindExample.value.latAndLong.split(',').reverse().join(',')
 }
});
const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}));
const rules = reactive({
  caseTitle: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
  caseNum: [
    {
      required: true,
      message: "请输入",
      trigger: "blur",
    },
  ],
  crimeTime: [
    {
      required: true,
      message: "请选择",
      trigger: "change",
    },
  ],
  caseCategory: [
    { required: true, message: "请选择", trigger: "change" },
  ],
});
const showModal = ref(false);
const submit = async () => {
  if(activeName.value == "1") {
    if (!bindExample.value.caseTitle || !bindExample.value.caseTitle.trim()) {
      ElMessage.error("案件名称不能为空");
      throw "案件名称不能为空";
    }
    let latAndLong = bindExample.value.latAndLongs?.split(',').reverse().join(',')
    await setExample({...bindExample.value, latAndLong, caseId :caseId.value })
    await getCaseInfo(caseId.value)
  }else{
    await casesaveOrUpDate({...ruleForm.value, caseId :caseId.value })
  }
  ElMessage.success("保存成功");
};
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      submit();
    } else {
      console.log("error submit!", fields);
    }
  });
};
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};
function handleActive(params) {
  console.log("handleActive", params);
}
async function handleAdd() {
  console.log("handleAdd");
}
const searchAMapAddress = async () => {
  const data = await selectMapImage({text: true, mapId: bindExample.value.mapId});
  console.log("searchAMapAddress", data);
  if (!data?.search) return;
  bindExample.value.mapId = data.mapId;
  bindExample.value.mapUrl = data.mapUrl;
  bindExample.value.caseAddress = data.search.text;
  bindExample.value.latAndLong = `${data.search.lat},${data.search.lng}`;
  bindExample.value.latAndLongs = `${data.search.lng},${data.search.lat}`;
};
</script>
<style lang="scss" scoped>
.abstract {
  height: 100%;
  .el-form-item--label-top {
    margin-bottom: 14px;
  }
  .form-content {
    height: calc(100vh - 175px);
    overflow-y: scroll;
  }
  .demo-tabs {
    .el-tabs__item {
      height: 32px;
      line-height: 32px;
    }
  }
}
</style>