完成预防检查的表格 缺少子页面

mock/login/routers.ts

@@ -66,7 +66,7 @@ const list = [
       {
         children: [
           {
-            component: '/todo/todo',
+            component: '/disaster/disaster-precaution/PageTaskManagement',
             id: 1029,
             meta: {
               activeMenu: null,
@@ -86,7 +86,7 @@ const list = [
             redirect: '',
           },
           {
-            component: '/disaster-precaution/PageTaskExecution',
+            component: '/disaster/disaster-precaution/PageTaskExecution',
             id: 1030,
             meta: {
               activeMenu: null,
@@ -106,7 +106,7 @@ const list = [
             redirect: '',
           },
           {
-            component: '/disaster-precaution/PageTaskTemplate',
+            component: '/disaster/disaster-precaution/PageTaskTemplate',
             id: 1031,
             meta: {
               activeMenu: null,
@@ -126,7 +126,7 @@ const list = [
             redirect: '',
           },
           {
-            component: '/disaster-precaution/PageTaskTemplateDetail',
+            component: '/disaster/disaster-precaution/PageTaskTemplateDetail',
             id: 1032,
             meta: {
               activeMenu: null,
@@ -167,7 +167,7 @@ const list = [
         redirect: '',
       },
       {
-        component: '/todo/todo',
+        component: '/disaster/disaster-control/PageDisasterControl',
         id: 1032,
         meta: {
           activeMenu: null,

mock/task-execution/table.ts

@@ -1,5 +1,57 @@
 import { resultSuccess } from '../_util';
 
+const taskManagement = [
+  {
+    id: 1001,
+    taskName: '日常检查任务2024',
+    selfCheckUnit: '安全生产部',
+    taskType: '日常检查',
+    shouldCompleteTime: '2024-03-20 10:00:00',
+    activeStatus: 1,
+    taskStage: 0,
+    isOverdue: 0,
+  },
+  {
+    id: 1002,
+    taskName: '专项检查任务2025',
+    selfCheckUnit: '运维部',
+    taskType: '专项检查',
+    shouldCompleteTime: '2024-03-25 15:30:00',
+    activeStatus: 1,
+    taskStage: 1,
+    isOverdue: 0,
+  },
+  {
+    id: 1003,
+    taskName: '季度检查任务2026',
+    selfCheckUnit: '技术部',
+    taskType: '季度检查',
+    shouldCompleteTime: '2024-06-30 18:00:00',
+    activeStatus: 0,
+    taskStage: 2,
+    isOverdue: 0,
+  },
+  {
+    id: 1004,
+    taskName: '年度检查任务2027',
+    selfCheckUnit: '工程部',
+    taskType: '年度检查',
+    shouldCompleteTime: '2024-12-31 23:59:59',
+    activeStatus: 0,
+    taskStage: 3,
+    isOverdue: 0,
+  },
+  {
+    id: 1005,
+    taskName: '日常检查任务20295123458111111',
+    selfCheckUnit: '质量部',
+    taskType: '日常检查',
+    shouldCompleteTime: '2024-03-21 14:00:00',
+    activeStatus: 2,
+    taskStage: 4,
+    isOverdue: 1,
+  },
+];
 const taskExecutionDoing = [
   {
     id: 1001,
@@ -74,9 +126,28 @@ const taskExecutionDone = [
     taskStage: 0,
     isOverdue: 1,
   },
+  {
+    id: 1002,
+    taskName: '任务2',
+    selfCheckUnit: '单位2',
+    taskType: '类型2',
+    shouldCompleteTime: '2021-01-01',
+    submitTime: '2021-01-01',
+    activeStatus: 0,
+    taskStage: 0,
+    isOverdue: 1,
+  },
 ];
 
 export default [
+  {
+    url: '/eye_api_bak/api/admin/task/getTaskManagementList',
+    timeout: 1000,
+    method: 'get',
+    response: () => {
+      return resultSuccess(taskManagement);
+    },
+  },
   {
     url: '/eye_api_bak/api/admin/task/getTaskDoingList',
     timeout: 1000,

src/api/task-execution/tableData.ts

@@ -1,5 +1,24 @@
 import { http } from '@/utils/http/axios';
-import type { DoingTaskExecutionTableDataResponse, DoneTaskExecutionTableDataResponse } from '@/types/task-execution/tableData';
+import type {
+  TaskExecutionTableData,
+  DoingTaskExecutionTableDataResponse,
+  DoneTaskExecutionTableDataResponse,
+} from '@/types/task-execution/tableData';
+/**
+ * 获取任务管理表格数据
+ */
+export function getTaskManagementTableData() {
+  return http.request<TaskExecutionTableData[]>(
+    {
+      url: '/admin/task/getTaskManagementList',
+      method: 'get',
+    },
+    {
+      ignoreTargetTenantId: true,
+    },
+  );
+}
+
 /**
  * 获取任务执行进行中表格数据
  */

src/constant/pagination.ts

@@ -1,2 +1,2 @@
-export const PAGE_SIZE_CONFIG = [10, 20, 30, 40, 50, 80, 100];
+export const PAGE_SIZE_CONFIG = [20, 50, 100];
 export const DEFAULT_PAGE_SIZE = 20;

src/views/disaster-precaution/src/constants/task-execution.ts

@@ -1,78 +0,0 @@
-/**
- * 任务执行常量
- */
-export enum ACTIVE_STATUS {
-  ACTIVE = 1,
-  INACTIVE = 0,
-}
-
-export enum OVERDUE_STATUS {
-  OVERDUE = 1,
-  NOT_OVERDUE = 0,
-}
-
-export const ACTIVE_STATUS_MAP: Record<number, string> = {
-  [ACTIVE_STATUS.ACTIVE]: '生效',
-  [ACTIVE_STATUS.INACTIVE]: '失效',
-};
-
-export enum TASK_STAGE {
-  PENDING_CHECK = 0,
-  PENDING_APPROVAL = 1,
-  PENDING_REVIEW = 2,
-  COMPLETED = 3,
-}
-
-export const TASK_STAGE_MAP: Record<number, string> = {
-  [TASK_STAGE.PENDING_CHECK]: '待检查',
-  [TASK_STAGE.PENDING_APPROVAL]: '待审批',
-  [TASK_STAGE.PENDING_REVIEW]: '待复查',
-  [TASK_STAGE.COMPLETED]: '已完成',
-};
-
-export const TASK_STAGE_ACTION_TEXT: Record<number, string> = {
-  [TASK_STAGE.PENDING_CHECK]: '去查看',
-  [TASK_STAGE.PENDING_APPROVAL]: '去审批',
-  [TASK_STAGE.PENDING_REVIEW]: '去复查',
-};
-
-export const ACTIVE_STATUS_OPTIONS = [
-  {
-    label: '生效',
-    value: ACTIVE_STATUS.ACTIVE,
-  },
-  {
-    label: '失效',
-    value: ACTIVE_STATUS.INACTIVE,
-  },
-];
-
-export const TASK_STAGE_OPTIONS_DOING = [
-  {
-    label: '待检查',
-    value: TASK_STAGE.PENDING_CHECK,
-  },
-  {
-    label: '待审批',
-    value: TASK_STAGE.PENDING_APPROVAL,
-  },
-  {
-    label: '待复查',
-    value: TASK_STAGE.PENDING_REVIEW,
-  },
-];
-
-export const TASK_STAGE_OPTIONS_DONE = [
-  {
-    label: '待审批',
-    value: TASK_STAGE.PENDING_APPROVAL,
-  },
-  {
-    label: '待复查',
-    value: TASK_STAGE.PENDING_REVIEW,
-  },
-  {
-    label: '已完成',
-    value: TASK_STAGE.COMPLETED,
-  },
-];

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

@@ -0,0 +1,7 @@
+<template>
+  <div> this is disaster control page </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>

src/views/disaster-precaution/PageTaskExecution.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="disaster-precaution-container">
     <header class="header">
-      <span class="title">任务执行</span>
+      <span class="title">检查任务执行</span>
       <el-tabs v-model="activeName">
         <el-tab-pane label="待执行任务" name="doing" />
         <el-tab-pane label="已提交任务" name="done" />

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

@@ -0,0 +1,170 @@
+<template>
+  <div class="disaster-precaution-container">
+    <header class="header">
+      <span class="title">检查任务管理</span>
+    </header>
+    <main class="main">
+      <div class="disaster-precaution">
+        <header class="header" style="padding: 0 !important">
+          <el-button type="primary" :icon="Plus" class="create-task-btn">创建检查任务单</el-button>
+          <Search type="management" />
+        </header>
+        <BasicTable
+          :table-config="tableConfig"
+          :table-data="tableData"
+          @update:pageSize="handleSizeChange"
+          @update:pageNumber="handleCurrentChange"
+        >
+          <template #taskName="scope">
+            <div class="task-name--div">
+              <el-tooltip :content="scope.row.taskName" placement="top" effect="light">
+                <span>{{ scope.row.taskName }}</span>
+              </el-tooltip>
+              <img :src="OverdueIcon" alt="overdue" v-if="scope.row.isOverdue === OVERDUE_STATUS.OVERDUE" />
+            </div>
+          </template>
+          <template #activeStatus="scope">
+            <div class="active-status--div">
+              <div
+                class="dot"
+                :style="{ backgroundColor: ACTIVE_STATUS_COLOR[scope.row.activeStatus as ACTIVE_STATUS] }"
+              ></div>
+              <span>{{ ACTIVE_STATUS_MAP[scope.row.activeStatus] }}</span>
+            </div>
+          </template>
+          <template #taskStage="scope">
+            <span>{{ TASK_STAGE_MAP[scope.row.taskStage] }}</span>
+          </template>
+          <template #action="scope">
+            <ActionButton text="编辑" v-if="scope.row.activeStatus === ACTIVE_STATUS.NOT_EFFECTIVE" />
+            <ActionButton text="查看" />
+            <el-popconfirm
+              confirm-button-text="确定"
+              cancel-button-text="取消"
+              title="确定要发布?"
+              v-if="scope.row.activeStatus === ACTIVE_STATUS.NOT_EFFECTIVE"
+            >
+              <template #reference>
+                <ActionButton text="发布" />
+              </template>
+            </el-popconfirm>
+            <el-popconfirm
+              confirm-button-text="确定"
+              cancel-button-text="取消"
+              title="确定要取消发布?"
+              v-else-if="scope.row.activeStatus === ACTIVE_STATUS.ACTIVE"
+            >
+              <template #reference>
+                <ActionButton text="取消发布" />
+              </template>
+            </el-popconfirm>
+            <ActionButton text="删除" v-if="scope.row.activeStatus === ACTIVE_STATUS.NOT_EFFECTIVE" />
+          </template>
+        </BasicTable>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import { Plus } from '@element-plus/icons-vue';
+  import Search from './src/components/Search.vue';
+  import BasicTable from '@/components/BasicTable.vue';
+  import ActionButton from '@/components/ActionButton.vue';
+  import type { TableColumnProps } from '@/types/basic-table';
+  import useTableConfig from '@/hooks/useTableConfigHook';
+  import { getTaskManagementTableData } from '@/api/task-execution/tableData';
+  import type { TaskExecutionTableData } from '@/types/task-execution/tableData';
+  import OverdueIcon from '@/assets/svg/overdue.svg';
+  import {
+    OVERDUE_STATUS,
+    ACTIVE_STATUS,
+    ACTIVE_STATUS_MAP,
+    ACTIVE_STATUS_COLOR,
+    TASK_STAGE_MAP,
+  } from './src/constants/task-execution';
+  const tableData = ref<TaskExecutionTableData[]>([]);
+  const columns: TableColumnProps[] = [
+    {
+      prop: 'taskName',
+      label: '任务名称',
+      align: 'center',
+      slot: 'taskName',
+    },
+    {
+      prop: 'selfCheckUnit',
+      label: '被检查（自查）单位',
+      align: 'center',
+    },
+    {
+      prop: 'taskType',
+      label: '检查类型',
+      align: 'center',
+    },
+    {
+      prop: 'shouldCompleteTime',
+      label: '应完成时间',
+      align: 'center',
+    },
+    {
+      prop: 'activeStatus',
+      label: '生效状态',
+      align: 'center',
+      slot: 'activeStatus',
+    },
+    {
+      prop: 'taskStage',
+      label: '任务阶段',
+      align: 'center',
+      slot: 'taskStage',
+    },
+    {
+      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);
+  const handleSizeChange = (value: number) => {
+    pagination.pageSize = value;
+    tableConfig.loading = true;
+    getTableData();
+  };
+  const handleCurrentChange = (value: number) => {
+    pagination.pageNumber = value;
+    tableConfig.loading = true;
+    getTableData();
+  };
+  const getTableData = async () => {
+    const res = await getTaskManagementTableData();
+    console.log(res);
+    tableData.value = res;
+    pagination.total = tableData.value.length;
+    tableConfig.loading = false;
+  };
+  onMounted(() => {
+    getTableData();
+  });
+</script>
+
+<style scoped lang="scss">
+  @use './src/styles/disaster-precaution.scss' as *;
+  @use './src/styles/task-execution.scss' as *;
+  .disaster-precaution {
+    gap: 20cpx !important;
+  }
+  .create-task-btn {
+    width: 150cpx;
+    font-size: 14cpx;
+  }
+</style>

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

@@ -4,7 +4,7 @@
       <div class="select-box--item">
         <span>检查类型：</span>
         <el-select v-model="selectTaskType" placeholder="请选择检查类型">
-          <el-option v-for="item in taskTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
+          <el-option v-for="item in TASK_TYPE_OPTIONS" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </div>
       <div class="select-box--item">
@@ -29,17 +29,29 @@
 
 <script lang="ts" setup>
   import { ref, computed } from 'vue';
-  import { ACTIVE_STATUS_OPTIONS, TASK_STAGE_OPTIONS_DOING, TASK_STAGE_OPTIONS_DONE } from '../constants/task-execution';
+  import {
+    TASK_TYPE_OPTIONS,
+    ACTIVE_STATUS_OPTIONS_DEFAULT,
+    ACTIVE_STATUS_OPTIONS_MANAGEMENT,
+    TASK_STAGE_OPTIONS_DOING,
+    TASK_STAGE_OPTIONS_DONE,
+    TASK_STAGE_OPTIONS_MANAGEMENT,
+  } from '../constants/task-execution';
   const selectTaskType = ref('');
   const selectActiveStatus = ref('');
   const selectTaskStage = ref('');
-  // 后端接口
-  const taskTypeOptions = ref<{ label: string; value: string | number }[]>([]);
   const props = defineProps<{
-    type: 'doing' | 'done';
+    type: 'doing' | 'done' | 'management';
   }>();
+  const ACTIVE_STATUS_OPTIONS = computed(() => {
+    return props.type === 'management' ? ACTIVE_STATUS_OPTIONS_MANAGEMENT : ACTIVE_STATUS_OPTIONS_DEFAULT;
+  });
   const TASK_STAGE_OPTIONS = computed(() => {
-    return props.type === 'doing' ? TASK_STAGE_OPTIONS_DOING : TASK_STAGE_OPTIONS_DONE;
+    return props.type === 'management'
+      ? TASK_STAGE_OPTIONS_MANAGEMENT
+      : props.type === 'doing'
+      ? TASK_STAGE_OPTIONS_DOING
+      : TASK_STAGE_OPTIONS_DONE;
   });
 </script>
 

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

@@ -18,7 +18,13 @@
         </div>
       </template>
       <template #activeStatus="scope">
-        <span>{{ ACTIVE_STATUS_MAP[scope.row.activeStatus] }}</span>
+        <div class="active-status--div">
+          <div
+            class="dot"
+            :style="{ backgroundColor: ACTIVE_STATUS_COLOR[scope.row.activeStatus as ACTIVE_STATUS] }"
+          ></div>
+          <span>{{ ACTIVE_STATUS_MAP[scope.row.activeStatus] }}</span>
+        </div>
       </template>
       <template #taskStage="scope">
         <span>{{ TASK_STAGE_MAP[scope.row.taskStage] }}</span>
@@ -43,6 +49,7 @@
   import {
     ACTIVE_STATUS,
     ACTIVE_STATUS_MAP,
+    ACTIVE_STATUS_COLOR,
     TASK_STAGE_MAP,
     TASK_STAGE_ACTION_TEXT,
     OVERDUE_STATUS,

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

@@ -18,7 +18,13 @@
         </div>
       </template>
       <template #activeStatus="scope">
-        <span>{{ ACTIVE_STATUS_MAP[scope.row.activeStatus] }}</span>
+        <div class="active-status--div">
+          <div
+            class="dot"
+            :style="{ backgroundColor: ACTIVE_STATUS_COLOR[scope.row.activeStatus as ACTIVE_STATUS] }"
+          ></div>
+          <span>{{ ACTIVE_STATUS_MAP[scope.row.activeStatus] }}</span>
+        </div>
       </template>
       <template #taskStage="scope">
         <span>{{ TASK_STAGE_MAP[scope.row.taskStage] }}</span>
@@ -44,13 +50,20 @@
 </template>
 
 <script lang="ts" setup>
-  import { ref,onMounted } from 'vue';
+  import { ref, onMounted } from 'vue';
   import BasicTable from '@/components/BasicTable.vue';
   import ActionButton from '@/components/ActionButton.vue';
   import Search from './Search.vue';
   import type { TableColumnProps } from '@/types/basic-table';
   import useTableConfig from '@/hooks/useTableConfigHook';
-  import { ACTIVE_STATUS, ACTIVE_STATUS_MAP, TASK_STAGE, TASK_STAGE_MAP, OVERDUE_STATUS } from '../constants/task-execution';
+  import {
+    ACTIVE_STATUS,
+    ACTIVE_STATUS_MAP,
+    ACTIVE_STATUS_COLOR,
+    TASK_STAGE,
+    TASK_STAGE_MAP,
+    OVERDUE_STATUS,
+  } from '../constants/task-execution';
   import type { DoneTaskExecutionTableDataResponse } from '@/types/task-execution/tableData';
   import { getTaskExecutionDoneTableData } from '@/api/task-execution/tableData';
   const tableData = ref<DoneTaskExecutionTableDataResponse[]>([]);

src/views/disaster/disaster-precaution/src/constants/task-execution.ts

@@ -0,0 +1,152 @@
+/**
+ * 任务执行常量
+ */
+export enum TASK_TYPE {
+  Previous = 0,
+  Midterm = 1,
+  Later = 2,
+}
+export enum ACTIVE_STATUS {
+  INACTIVE = 0,
+  ACTIVE,
+  NOT_EFFECTIVE,
+}
+
+export enum OVERDUE_STATUS {
+  OVERDUE = 1,
+  NOT_OVERDUE = 0,
+}
+
+export const ACTIVE_STATUS_COLOR = {
+  [ACTIVE_STATUS.ACTIVE]: '#52c41a',
+  [ACTIVE_STATUS.INACTIVE]: '#ff4d4f',
+  [ACTIVE_STATUS.NOT_EFFECTIVE]: '#1890ff',
+};
+
+export const TASK_TYPE_MAP: Record<number, string> = {
+  [TASK_TYPE.Previous]: '台讯前期',
+  [TASK_TYPE.Midterm]: '台讯中期',
+  [TASK_TYPE.Later]: '台讯后期',
+};
+
+export const ACTIVE_STATUS_MAP: Record<number, string> = {
+  [ACTIVE_STATUS.ACTIVE]: '生效',
+  [ACTIVE_STATUS.INACTIVE]: '失效',
+  [ACTIVE_STATUS.NOT_EFFECTIVE]: '未生效',
+};
+
+export enum TASK_STAGE {
+  PENDING_CHECK = 0,
+  PENDING_APPROVAL = 1,
+  PENDING_REVIEW = 2,
+  COMPLETED = 3,
+  NOT_RELEASE = 4,
+}
+
+export const TASK_STAGE_MAP: Record<number, string> = {
+  [TASK_STAGE.NOT_RELEASE]: '待发布',
+  [TASK_STAGE.PENDING_CHECK]: '待检查',
+  [TASK_STAGE.PENDING_APPROVAL]: '待审批',
+  [TASK_STAGE.PENDING_REVIEW]: '待复查',
+  [TASK_STAGE.COMPLETED]: '已完成',
+};
+
+export const TASK_STAGE_ACTION_TEXT: Record<number, string> = {
+  [TASK_STAGE.PENDING_CHECK]: '去查看',
+  [TASK_STAGE.PENDING_APPROVAL]: '去审批',
+  [TASK_STAGE.PENDING_REVIEW]: '去复查',
+};
+
+export const TASK_TYPE_OPTIONS = [
+  {
+    label: '台讯前期',
+    value: TASK_TYPE.Previous,
+  },
+  {
+    label: '台讯中期',
+    value: TASK_TYPE.Midterm,
+  },
+  {
+    label: '台讯后期',
+    value: TASK_TYPE.Later,
+  },
+];
+
+export const ACTIVE_STATUS_OPTIONS_DEFAULT = [
+  {
+    label: '生效',
+    value: ACTIVE_STATUS.ACTIVE,
+  },
+  {
+    label: '失效',
+    value: ACTIVE_STATUS.INACTIVE,
+  },
+];
+
+export const ACTIVE_STATUS_OPTIONS_MANAGEMENT = [
+  {
+    label: '未生效',
+    value: ACTIVE_STATUS.NOT_EFFECTIVE,
+  },
+  {
+    label: '生效',
+    value: ACTIVE_STATUS.ACTIVE,
+  },
+  {
+    label: '失效',
+    value: ACTIVE_STATUS.INACTIVE,
+  },
+];
+
+export const TASK_STAGE_OPTIONS_DOING = [
+  {
+    label: '待检查',
+    value: TASK_STAGE.PENDING_CHECK,
+  },
+  {
+    label: '待审批',
+    value: TASK_STAGE.PENDING_APPROVAL,
+  },
+  {
+    label: '待复查',
+    value: TASK_STAGE.PENDING_REVIEW,
+  },
+];
+
+export const TASK_STAGE_OPTIONS_DONE = [
+  {
+    label: '待审批',
+    value: TASK_STAGE.PENDING_APPROVAL,
+  },
+  {
+    label: '待复查',
+    value: TASK_STAGE.PENDING_REVIEW,
+  },
+  {
+    label: '已完成',
+    value: TASK_STAGE.COMPLETED,
+  },
+];
+
+export const TASK_STAGE_OPTIONS_MANAGEMENT = [
+  {
+    label: '待发布',
+    value: TASK_STAGE.NOT_RELEASE,
+  },
+  {
+    label: '待检查',
+    value: TASK_STAGE.PENDING_CHECK,
+  },
+  {
+    label: '待审批',
+    value: TASK_STAGE.PENDING_APPROVAL,
+  },
+  {
+    label: '待复查',
+    value: TASK_STAGE.PENDING_REVIEW,
+  },
+  {
+    label: '已完成',
+    value: TASK_STAGE.COMPLETED,
+  },
+];

src/views/disaster-precaution/src/styles/task-execution.scss

@@ -21,3 +21,14 @@
     text-overflow: ellipsis;
   }
 }
+
+.active-status--div {
+  @include flex-center;
+  width: 100%;
+  gap: 8cpx;
+  .dot {
+    width: 6cpx;
+    height: 6cpx;
+    border-radius: 50%;
+  }
+}