public-fuse/src/app/fire/view/dispatch/header.vue

<template>
  <com-head :options="head" showCtrl>
    <el-form label-width="84px">
      <el-form-item label="项目编号：">
        <el-input v-model="pagging.state.query.projectSn" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="起火对象：">
        <el-input
          v-model="pagging.state.query.projectName"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="起火地址：">
        <el-input
          v-model="pagging.state.query.projectAddress"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="起火场所：">
        <el-cascader
          style="width: 100%"
          v-model="projectSite"
          placeholder="请选择"
          :options="[{ label: '全部', value: UN_REQ_NUM.toString() }].concat(place)"
          :props="{ expandTrigger: 'hover', checkStrictly: true }"
        ></el-cascader>
      </el-form-item>

      <el-form-item label="承办单位：">
        <com-company v-model="pagging.state.query.deptId" />
      </el-form-item>
      <el-form-item label="事故日期：">
        <el-date-picker
          type="date"
          v-model="pagging.state.query.accidentDate"
          placeholder="请选择"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item label="火灾原因：">
        <el-cascader
          style="width: 100%"
          v-model="fireReason"
          placeholder="请选择"
          :options="[{ label: '全部', value: UN_REQ_NUM.toString() }].concat(reason)"
          :props="{ expandTrigger: 'hover', checkStrictly: true }"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="项目状态：">
        <el-select placeholder="请选择" v-model="pagging.state.query.status" showAll>
          <el-option
            v-for="option in fireStatuOptions"
            :key="option.value"
            :value="option.value"
            :label="option.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item class="searh-btns" style="grid-area: 1/4/4/5">
        <el-button type="primary" @click="pagging.refresh">查询</el-button>
        <el-button type="primary" plain @click="pagging.queryReset">重置</el-button>
      </el-form-item>
    </el-form>
  </com-head>
</template>

<script lang="ts" setup>
import { FirePagging } from "./pagging";
import comCompany from "@/components/company-select/index.vue";
import { genCascaderValue, getCode, getRaw, getValue } from "@/helper/cascader";
import { reason, place, fireStatuOptions } from "@/app/fire/constant/fire";
import comHead from "@/components/head/index.vue";
import { computed, ref, watchEffect } from "vue";
import { UN_REQ_NUM } from "@/constant/sys";

const props = defineProps<{ pagging: FirePagging; isTeached: boolean }>();
const head = computed(() => [
  { name: props.isTeached ? "教学平台" : "火调管理", value: "2" },
]);

const projectSite = genCascaderValue(
  computed(() => props.pagging.state.query),
  "projectSite",
  UN_REQ_NUM.toString()
);
watchEffect(() => {
  props.pagging.state.query.projectSiteCode = getCode(place, getRaw(projectSite.value!));
});
const fireReason = genCascaderValue(
  computed(() => props.pagging.state.query),
  "fireReason"
);
</script>