创建任务检查菜单

mock/login/routers.ts

@@ -127,6 +127,26 @@ const list = [
             path: 'task-management',
             redirect: '',
           },
+          {
+            component: '/disaster/disaster-precaution/PageTaskItem',
+            id: 1033,
+            meta: {
+              activeMenu: null,
+              alwaysShow: false,
+              frameSrc: '',
+              hidden: false,
+              icon: '',
+              isFrame: 0,
+              isRoot: false,
+              noCache: false,
+              query: '',
+              title: '任务列表详情',
+            },
+            name: '/disaster-prevention/disaster-precaution/task-item',
+            parentId: 1028,
+            path: 'task-item',
+            redirect: '',
+          },
           {
             component: '/disaster/disaster-precaution/PageTaskExecution',
             id: 1030,

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

@@ -0,0 +1,61 @@
+<template>
+  <div class="disaster-precaution-container">
+    <header class="disaster-precaution-container__header">
+      <img :src="BackIcon" alt="back" class="back-icon" @click="router.back()" />
+      <span class="disaster-precaution-container__title">{{ headerTitle }}</span>
+    </header>
+    <main class="disaster-precaution-container__main">
+      <component :is="dynamicComponent" />
+    </main>
+    <footer class="disaster-precaution-container__footer" v-if="operate">
+      <el-button>取消</el-button>
+      <el-button type="primary">提交</el-button>
+    </footer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed, defineAsyncComponent } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import BackIcon from 'assets/svg/back.svg';
+  const router = useRouter();
+  const route = useRoute();
+  const operate = route.query.operate;
+  const headerTitle = computed(() => {
+    if (operate === 'create') {
+      return '创建灾害检测任务';
+    } else if (operate === 'edit') {
+      return '编辑灾害检测任务';
+    }
+    return '查看灾害检测任务';
+  });
+  const dynamicComponent = computed(() => {
+    if (operate === 'create') {
+      return defineAsyncComponent(() => import('./src/components/CreateTaskItem.vue'));
+    }
+    return '';
+  });
+</script>
+
+<style lang="scss" scoped>
+  @use '../style/disaster.scss' as *;
+  .back-icon {
+    width: 16cpx;
+    cursor: pointer;
+  }
+  .disaster-precaution-container__header {
+    flex-direction: row !important;
+    justify-content: flex-start !important;
+    gap: 8cpx !important;
+  }
+  .disaster-precaution-container__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    width: calc(100vw - 310cpx);
+    height: 88cpx;
+    padding: 28cpx;
+    background-color: $white-color;
+    border-radius: 4cpx;
+  }
+</style>

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

@@ -6,7 +6,7 @@
     <main class="disaster-precaution-container__main">
       <div class="disaster-precaution">
         <header class="disaster-precaution__header">
-          <el-button type="primary" :icon="Plus" class="create-task-btn">创建检查任务单</el-button>
+          <el-button type="primary" :icon="Plus" class="create-task-btn" @click="handleCreateTask">创建检查任务单</el-button>
           <Search type="management" />
         </header>
         <BasicTable
@@ -46,9 +46,9 @@
               v-if="scope.row.activeStatus === ACTIVE_STATUS.NOT_EFFECTIVE"
             />
             <ActionButton
-              text="取消发布"
+              text="撤回"
               :popconfirm="{
-                title: '确定要取消发布?',
+                title: '确定要撤回?',
               }"
               v-else-if="scope.row.activeStatus === ACTIVE_STATUS.ACTIVE"
             />
@@ -79,6 +79,16 @@
   import OverdueIcon from '@/assets/svg/overdue.svg';
   import { OVERDUE_STATUS, TASK_STAGE_MAP } from './src/constants/task-execution';
   import { ACTIVE_STATUS, ACTIVE_STATUS_COLOR, ACTIVE_STATUS_MAP } from '@/views/disaster/constant';
+  import { useRouter } from 'vue-router';
+  const router = useRouter();
+  const handleCreateTask = () => {
+    router.push({
+      name: '/disaster-prevention/disaster-precaution/task-item',
+      query: {
+        operate: 'create',
+      },
+    });
+  };
   const tableData = ref<TaskExecutionTableData[]>([]);
   const columns: TableColumnProps[] = [
     {
@@ -125,7 +135,7 @@
   ];
   const options = {
     emptyText: '暂无数据',
-    height: '63vh',
+    height: '60vh',
     loading: true,
     stripe: true,
   };

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

@@ -7,7 +7,7 @@
     <main class="disaster-precaution-container__main">
       <div class="template-container">
         <span class="title">被检查（自查）单位名称：</span>
-        <TemplateTableMerge :operation-type="operationType" :main-table="data!" height="65vh" />
+        <TemplateTableMerge :operation-type="operationType" :main-table="data!" height="62vh" />
       </div>
     </main>
   </div>

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

@@ -0,0 +1,106 @@
+<template>
+  <div class="task-item-container">
+    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto">
+      <el-form-item label="任务名称：" prop="name">
+        <el-input v-model="ruleForm.name" placeholder="请输入任务名称" maxlength="200" show-word-limit />
+      </el-form-item>
+      <el-form-item label="被检查（自查）单位：" prop="checkUnit">
+        <el-select v-model="ruleForm.checkUnit" placeholder="请选择被检查（自查）单位" />
+      </el-form-item>
+      <el-form-item label="检查类型：" prop="checkType">
+        <el-select-v2 v-model="ruleForm.checkType" placeholder="请选择检查类型" :options="TASK_TYPE_OPTIONS" />
+      </el-form-item>
+      <el-form-item label="应完成时间：" prop="shouldCompleteTime">
+        <el-date-picker
+          v-model="ruleForm.shouldCompleteTime"
+          type="datetime"
+          placeholder="请选择应完成时间"
+          format="YYYY-MM-DD HH:mm"
+          date-format="MMM DD, YYYY"
+          time-format="HH:mm"
+        />
+      </el-form-item>
+      <el-form-item label="检查要求：">
+        <el-input
+          v-model="ruleForm.checkRequirement"
+          type="textarea"
+          placeholder="请输入检查要求"
+          :rows="3"
+          maxlength="500"
+          show-word-limit
+        />
+      </el-form-item>
+      <el-form-item label="创建人：">
+        <el-input v-model="ruleForm.createUser" disabled />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { reactive, ref } from 'vue';
+  import type { FormInstance, FormRules } from 'element-plus';
+  import { TASK_TYPE_OPTIONS } from '../constants/task-execution';
+
+  interface RuleForm {
+    name: string;
+    checkUnit: string;
+    checkType: string;
+    shouldCompleteTime: string;
+    checkRequirement: string;
+    createUser: string;
+  }
+
+  const ruleFormRef = ref<FormInstance>();
+  const ruleForm = reactive<RuleForm>({
+    name: '',
+    checkUnit: '',
+    checkType: '',
+    shouldCompleteTime: '',
+    checkRequirement: '',
+    createUser: 'XXX',
+  });
+
+  const rules = reactive<FormRules<RuleForm>>({
+    name: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
+    checkUnit: [
+      {
+        required: true,
+        message: '请选择被检查（自查）单位',
+        trigger: 'change',
+      },
+    ],
+    checkType: [
+      {
+        required: true,
+        message: '请选择检查类型',
+        trigger: 'change',
+      },
+    ],
+    shouldCompleteTime: [
+      {
+        required: true,
+        message: '请选择应完成时间',
+        trigger: 'change',
+      },
+    ],
+  });
+</script>
+
+<style scoped lang="scss">
+  .task-item-container {
+    width: 100%;
+    max-height: calc(100vh - 350cpx);
+    overflow: auto;
+  }
+  .el-form {
+    display: flex;
+    flex-direction: column;
+    width: 600cpx;
+    height: 100%;
+    gap: 12cpx;
+  }
+  :deep(.el-date-editor) {
+    --el-date-editor-width: 100%;
+  }
+</style>

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

@@ -95,7 +95,7 @@
   ];
   const options = {
     emptyText: '暂无数据',
-    height: '64vh',
+    height: '60vh',
     loading: true,
     stripe: true,
   };

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

@@ -107,7 +107,7 @@
   ];
   const options = {
     emptyText: '暂无数据',
-    height: '64vh',
+    height: '60vh',
     loading: true,
     stripe: true,
   };

src/views/disaster/disaster-precaution/src/constants/template-detail.ts

@@ -4,6 +4,7 @@
 import Previous from '../images/previous@1X.png';
 import Midterm from '../images/midterm@1X.png';
 import Later from '../images/later@1X.png';
+import { TASK_TYPE } from './task-execution';
 // 模板前、中、后期数据
 export const PREVIOUS_TEMPLATE_DATA = [
   {
@@ -444,19 +445,19 @@ export const LATER_TEMPLATE_DATA = [
 ];
 export const TASK_TEMPLATE_LIST = [
   {
-    id: 1,
+    id: TASK_TYPE.Previous,
     name: '台讯前期安全检查模版',
     img: Previous,
     data: PREVIOUS_TEMPLATE_DATA,
   },
   {
-    id: 2,
+    id: TASK_TYPE.Midterm,
     name: '台讯中期安全检查任务模版',
     img: Midterm,
     data: MIDTERM_TEMPLATE_DATA,
   },
   {
-    id: 3,
+    id: TASK_TYPE.Later,
     name: '台讯后期安全检查模版',
     img: Later,
     data: LATER_TEMPLATE_DATA,