sl-sfy-safety/src/views/emergency/emergency-drill/PageDrillSignList.vue

<template>
  <div class="safety-platform-container">
    <header class="safety-platform-container__header">
      <div class="breadcrumb-title"> 演练会签 </div>
    </header>
    <main class="safety-platform-container__main">
      <div class="search-table-container">
        <BasicSearch :search-data="searchData" :search-config="DRILL_SIGN_LIST_SEARCH_CONFIG">
          <template #drillScope>
            <el-select v-model="searchData.drillScope" placeholder="请选择演练规模" filterable>
              <el-option
                v-for="item in drillScopeDice"
                :key="item.itemCode"
                :label="item.itemValue"
                :value="item.itemCode"
              />
            </el-select>
          </template>
          <template #drillTime>
            <el-date-picker
              v-model="searchData.drillTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              @change="handleDateChange"
            />
          </template>
        </BasicSearch>
        <!-- 表格 -->
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, reactive } from 'vue';
  import BasicSearch from '@/components/BasicSearch.vue';
  import { useEmergencyDrillHook } from './hook';
  import type { DrillSignSearch } from '@/types/emergency-drill';
  import { DRILL_SIGN_LIST_SEARCH_CONFIG } from './configs/sign';

  const { drillScopeDice, getDrillScopeDict } = useEmergencyDrillHook();
  const searchData = reactive<DrillSignSearch>({
    signType: null,
    drillScope: null,
    drillContent: null,
    drillTime: null,
  });
  const handleDateChange = (val: string[]) => {
    if (val && val.length === 2) {
      const [startDate, endDate] = val;
      searchData.drillTime = [`${startDate} 00:00:00`, `${endDate} 23:59:59`];
      return;
    }
  };
  onMounted(() => {
    getDrillScopeDict();
  });
</script>

<style scoped lang="scss">
  @use '@/styles/page-details-layout.scss' as *;
  @use '@/styles/page-main-layout.scss' as *;
</style>