开始灾害处置清单

mock/disaster-control/table.ts

@@ -0,0 +1,32 @@
+import { resultSuccess } from '../_util';
+
+const disasterList = [
+  {
+    id: 1001,
+    disasterType: '台风',
+    disasterLevel: 'IV级/一般',
+    startTime: '2024-03-20 10:00:00',
+    endTime: '2024-03-20 10:00:00',
+    disasterMaterial: [
+      {
+        name: '台风灾害处置材料',
+        type: 'docx',
+        link: '',
+      },
+    ],
+    shouldCompleteTime: '2024-03-20 10:00:00',
+    activeStatus: 1,
+    taskStage: 0,
+  },
+];
+
+export default [
+  {
+    url: '/eye_api_bak/api/admin/disaster/getDisasterList',
+    timeout: 1000,
+    method: 'get',
+    response: () => {
+      return resultSuccess(disasterList);
+    },
+  },
+];

src/views/disaster/disaster-control/PageDisasterControl.vue

@@ -1,7 +1,94 @@
 <template>
-  <div> this is disaster control page </div>
+  <div class="disaster-precaution-container">
+    <header class="header">
+      <span class="title">灾后处置清单</span>
+    </header>
+    <main class="main">
+      <div class="disaster-control-container">
+        <header class="disaster-control__header">
+          <el-button type="primary" class="disaster-control__header-button" :icon="Plus">创建灾害处置单</el-button>
+          <Search />
+        </header>
+        <BasicTable :table-config="tableConfig" :table-data="tableData"> </BasicTable>
+      </div>
+    </main>
+  </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { Plus } from '@element-plus/icons-vue';
+  import Search from './src/components/Search.vue';
+  import BasicTable from '@/components/BasicTable.vue';
+  import type { TableColumnProps } from '@/types/basic-table';
+  import useTableConfig from '@/hooks/useTableConfigHook';
+  const tableData = ref<any[]>([]);
+  const columns: TableColumnProps[] = [
+    {
+      prop: 'disasterType',
+      label: '灾害类型',
+      align: 'center',
+    },
+    {
+      prop: 'disasterLevel',
+      label: '等级',
+      align: 'center',
+    },
+    {
+      prop: 'startTime',
+      label: '开始时间',
+      align: 'center',
+    },
+    {
+      prop: 'endTime',
+      label: '结束时间',
+      align: 'center',
+    },
+    {
+      prop: 'disasterMaterial',
+      label: '处置材料',
+      align: 'center',
+      slot: 'disasterMaterial',
+    },
+    {
+      prop: 'shouldCompleteTime',
+      label: '应完成时间',
+      align: 'center',
+      slot: 'shouldCompleteTime',
+    },
+    {
+      prop: 'activeStatus',
+      label: '生效状态',
+      align: 'center',
+      slot: 'activeStatus',
+    },
+    {
+      prop: 'action',
+      label: '操作',
+      align: 'center',
+      slot: 'action',
+      width: '250cpx',
+      fixed: 'right',
+    },
+  ];
+  const options = {
+    emptyText: '暂无数据',
+    height: '64vh',
+    loading: true,
+    stripe: true,
+  };
+  const { tableConfig, pagination } = useTableConfig(columns, options);
+</script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+  @use '../style/disaster.scss' as *;
+  .disaster-control__header-button {
+    font-size: 14cpx;
+    margin-bottom: 20cpx;
+  }
+  .disaster-control-container{
+    display: flex;
+    flex-direction: column;
+    gap: 20cpx;
+  }
+</style>

src/views/disaster/disaster-control/src/components/Search.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="search-box">
+    <section class="select-box">
+      <div class="select-box--item">
+        <span>灾害类型：</span>
+        <el-select v-model="selectDisasterType" placeholder="请选择灾害类型">
+          <el-option v-for="item in DISASTER_TYPE_OPTIONS" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </div>
+      <div class="select-box--item">
+        <span>灾害等级：</span>
+        <el-select v-model="selectDisasterLevel" placeholder="请选择灾害等级">
+          <el-option v-for="item in DISASTER_LEVEL_OPTIONS" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </div>
+      <div class="select-box--item">
+        <span>状态：</span>
+        <el-select v-model="selectStatus" placeholder="请选择状态">
+          <el-option v-for="item in STATUS_OPTIONS" :key="item.value" :label="item.label" :value="item.value" />
+        </el-select>
+      </div>
+      <div class="select-box--item">
+        <span>创建时间：</span>
+        <el-date-picker
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+          format="YYYY-MM-DD HH:mm:ss"
+          date-format="YYYY/MM/DD ddd"
+          time-format="A hh:mm:ss"
+          v-model="dateRange"
+        />
+      </div>
+    </section>
+    <section class="search-btn">
+      <el-button type="primary">查询</el-button>
+      <el-button>重置</el-button>
+    </section>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  const selectDisasterType = ref('');
+  // 根据字典配置
+  const DISASTER_TYPE_OPTIONS = ref<{ label: string; value: string }[]>([]);
+  const selectDisasterLevel = ref('');
+  // 根据字典配置
+  const DISASTER_LEVEL_OPTIONS = ref<{ label: string; value: string }[]>([]);
+  const selectStatus = ref('');
+  // 根据字典配置
+  const STATUS_OPTIONS = ref<{ label: string; value: string }[]>([]);
+  const dateRange = ref<string[]>([]);
+</script>
+
+<style lang="scss" scoped>
+  @use '@/views/disaster/style/search.scss' as *;
+</style>

src/views/disaster/disaster-precaution/PageTaskExecution.vue

@@ -26,7 +26,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @use './src/styles/disaster-precaution.scss' as *;
+  @use '../style/disaster.scss' as *;
   // override header padding
   .header {
     padding: 16cpx 0 0 22cpx !important;

src/views/disaster/disaster-precaution/PageTaskManagement.vue

@@ -158,8 +158,8 @@
 </script>
 
 <style scoped lang="scss">
-  @use './src/styles/disaster-precaution.scss' as *;
-  @use './src/styles/task-execution.scss' as *;
+    @use '../style/disaster.scss' as *;
+  @use './src/style/task-execution.scss' as *;
   .disaster-precaution {
     gap: 20cpx !important;
   }

src/views/disaster/disaster-precaution/PageTaskTemplate.vue

@@ -39,7 +39,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @use './src/styles/disaster-precaution.scss' as *;
+    @use '../style/disaster.scss' as *;
   .template-card-list {
     display: flex;
     gap: 32cpx;

src/views/disaster/disaster-precaution/PageTaskTemplateDetail.vue

@@ -36,7 +36,7 @@
 </script>
 
 <style lang="scss" scoped>
-  @use './src/styles/disaster-precaution.scss' as *;
+    @use '../style/disaster.scss' as *;
   .back-icon {
     width: 16cpx;
     cursor: pointer;

src/views/disaster/disaster-precaution/src/components/Search.vue

@@ -56,26 +56,5 @@
 </script>
 
 <style lang="scss" scoped>
-  .search-box {
-    @include flex-center;
-    justify-content: space-between;
-    width: 100%;
-    height: 100%;
-  }
-  .select-box {
-    @include flex-center;
-    gap: 10cpx;
-    &--item {
-      @include flex-center;
-      white-space: nowrap;
-      gap: 10cpx;
-    }
-    span {
-      color: rgba(0, 0, 0, 0.85);
-      font-size: 14cpx;
-    }
-    .el-select {
-      width: 200cpx;
-    }
-  }
+@use '@/views/disaster/style/search.scss' as *;
 </style>

src/views/disaster/disaster-precaution/src/components/TaskExecutionDoing.vue

@@ -128,5 +128,5 @@
 </script>
 
 <style lang="scss" scoped>
-  @use '../styles/task-execution.scss' as *;
+  @use '../style/task-execution.scss' as *;
 </style>

src/views/disaster/disaster-precaution/src/components/TaskExecutionDone.vue

@@ -148,5 +148,5 @@
 </script>
 
 <style lang="scss" scoped>
-  @use '../styles/task-execution.scss' as *;
+  @use '../style/task-execution.scss' as *;
 </style>

src/views/disaster/style/search.scss

@@ -0,0 +1,28 @@
+@use '@/styles/variables.scss' as *;
+.search-box {
+  @include flex-center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+}
+.select-box {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10cpx;
+  &--item {
+    @include flex-center;
+    white-space: nowrap;
+    gap: 10cpx;
+  }
+  span {
+    color: rgba(0, 0, 0, 0.85);
+    font-size: 14cpx;
+  }
+  .el-select {
+    width: 200cpx;
+  }
+}
+.search-btn {
+  display: flex;
+}