|
|
@@ -5,7 +5,11 @@
|
|
|
</header>
|
|
|
<main class="safety-platform-container__main">
|
|
|
<div class="search-table-container">
|
|
|
- <BasicSearch :search-data="searchData" :search-config="DRILL_SIGN_LIST_SEARCH_CONFIG">
|
|
|
+ <BasicSearch
|
|
|
+ :search-data="searchData"
|
|
|
+ :search-config="DRILL_SIGN_LIST_SEARCH_CONFIG"
|
|
|
+ @update:searchData="handleSearch"
|
|
|
+ >
|
|
|
<template #drillScope>
|
|
|
<el-select v-model="searchData.drillScope" placeholder="请选择演练规模" filterable>
|
|
|
<el-option
|
|
|
@@ -23,39 +27,76 @@
|
|
|
range-separator="至"
|
|
|
start-placeholder="开始时间"
|
|
|
end-placeholder="结束时间"
|
|
|
- @change="handleDateChange"
|
|
|
/>
|
|
|
</template>
|
|
|
</BasicSearch>
|
|
|
- <!-- 表格 -->
|
|
|
+ <BasicTable :table-data="tableData" :table-config="tableConfig"> </BasicTable>
|
|
|
</div>
|
|
|
</main>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
- import { onMounted, reactive } from 'vue';
|
|
|
+ import { onMounted, reactive, ref } from 'vue';
|
|
|
import BasicSearch from '@/components/BasicSearch.vue';
|
|
|
+ import BasicTable from '@/components/BasicTable.vue';
|
|
|
import { useEmergencyDrillHook } from './hook';
|
|
|
- import type { DrillSignSearch } from '@/types/emergency-drill';
|
|
|
- import { DRILL_SIGN_LIST_SEARCH_CONFIG } from './configs/sign';
|
|
|
+ import useTableConfig from '@/hooks/useTableConfigHook';
|
|
|
+ import type { QueryPageRequest } from '@/types/basic-query';
|
|
|
+ import type { DrillSignSearch, DrillSignlistQuery, DrillSignListResponse } from '@/types/emergency-drill';
|
|
|
+ import { getDrillSignList } from '@/api/emergency-drill/emergency-drill';
|
|
|
+ import {
|
|
|
+ DRILL_SIGN_LIST_SEARCH_CONFIG,
|
|
|
+ DRILL_SIGN_LIST_TABLE_OPTIONS,
|
|
|
+ DRILI_SIGN_LIST_TABLE_COLUMNS,
|
|
|
+ } from './configs/sign';
|
|
|
+ import dayjs from 'dayjs';
|
|
|
|
|
|
const { drillScopeDice, getDrillScopeDict } = useEmergencyDrillHook();
|
|
|
+ const { tableConfig, pagination } = useTableConfig(DRILI_SIGN_LIST_TABLE_COLUMNS, DRILL_SIGN_LIST_TABLE_OPTIONS);
|
|
|
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;
|
|
|
+ const tableData = ref<DrillSignListResponse[]>([]);
|
|
|
+ let drillSignListQuery: QueryPageRequest<DrillSignlistQuery> = {
|
|
|
+ pageNumber: pagination.pageNumber,
|
|
|
+ pageSize: pagination.pageSize,
|
|
|
+ queryParam: {},
|
|
|
+ };
|
|
|
+ const handleSearch = () => {
|
|
|
+ drillSignListQuery.queryParam = {};
|
|
|
+ if (searchData.signType !== null) {
|
|
|
+ drillSignListQuery.queryParam.signType = searchData.signType;
|
|
|
+ }
|
|
|
+ if (searchData.drillScope) {
|
|
|
+ drillSignListQuery.queryParam.drillScope = searchData.drillScope;
|
|
|
+ }
|
|
|
+ if (searchData.drillContent) {
|
|
|
+ drillSignListQuery.queryParam.drillContent = searchData.drillContent;
|
|
|
}
|
|
|
+ if (searchData.drillTime) {
|
|
|
+ const [startDate, endDate] = searchData.drillTime;
|
|
|
+ drillSignListQuery.queryParam.drillTimeStart = dayjs(startDate).format('YYYY-MM-DD 00:00:00');
|
|
|
+ drillSignListQuery.queryParam.drillTimeEnd = dayjs(endDate).format('YYYY-MM-DD 23:59:59');
|
|
|
+ } else {
|
|
|
+ drillSignListQuery.queryParam.drillTimeStart = null;
|
|
|
+ drillSignListQuery.queryParam.drillTimeEnd = null;
|
|
|
+ }
|
|
|
+ getTableData();
|
|
|
+ };
|
|
|
+ const getTableData = async () => {
|
|
|
+ tableConfig.loading = true;
|
|
|
+ const res = await getDrillSignList(drillSignListQuery);
|
|
|
+ tableData.value = res.records;
|
|
|
+ pagination.total = res.totalRow;
|
|
|
+ tableConfig.loading = false;
|
|
|
};
|
|
|
onMounted(() => {
|
|
|
getDrillScopeDict();
|
|
|
+ getTableData();
|
|
|
});
|
|
|
</script>
|
|
|
|