完成任务管理页面

mock/task-execution/table.ts

@@ -32,6 +32,29 @@ const taskManagement = [
     isOverdue: 1,
   },
 ];
+const taskManagementItem = {
+  id: 1001,
+  taskName: '日常检查任务2024',
+  selfCheckUnit: '安全生产部',
+  taskType: 2,
+  taskTemplate: 2,
+  shouldCompleteTime: '2024-03-20 10:00',
+  checkRequirement: '检查要求',
+  checkUser: [
+    {
+      id: 1,
+      realname: 'test111',
+      username: '3133',
+    },
+    {
+      id: 3,
+      realname: 'test333',
+      username: '3135',
+    },
+  ],
+  isPush: true,
+  createUser: '张三',
+};
 const taskExecutionDoing = [
   {
     id: 1001,
@@ -128,6 +151,14 @@ export default [
       return resultSuccess(taskManagement);
     },
   },
+  {
+    url: '/eye_api_bak/api/admin/task/getTaskManagementItem',
+    timeout: 1000,
+    method: 'get',
+    response: () => {
+      return resultSuccess(taskManagementItem);
+    },
+  },
   {
     url: '/eye_api_bak/api/admin/task/getTaskDoingList',
     timeout: 1000,

src/api/task-execution/tableData.ts

@@ -1,6 +1,7 @@
 import { http } from '@/utils/http/axios';
 import type {
   TaskExecutionTableData,
+  TaskManagementItemResponse,
   DoingTaskExecutionTableDataResponse,
   DoneTaskExecutionTableDataResponse,
 } from '@/types/task-execution/tableData';
@@ -19,6 +20,23 @@ export function getTaskManagementTableData() {
   );
 }
 
+/**
+ * 获取任务管理详情
+ */
+export function getTaskManagementItem(id: number) {
+  return http.request<TaskManagementItemResponse>(
+    {
+      url: '/admin/task/getTaskManagementItem',
+      method: 'get',
+      params: {
+        id,
+      },
+    },
+    {
+      ignoreTargetTenantId: true,
+    },
+  );
+}
 /**
  * 获取任务执行进行中表格数据
  */

src/components/BasicTable.vue

@@ -50,6 +50,7 @@
   const emits = defineEmits<{
     (e: 'update:pageSize', value: number): void;
     (e: 'update:pageNumber', value: number): void;
+    (e: 'update:selectedIds', value: number[]): void;
   }>();
   const handleSizeChange = (value: number) => {
     emits('update:pageSize', value);
@@ -61,6 +62,7 @@
 
   const handleSelectionChange = (selection: any[]) => {
     selectedIds.value = selection.map((item) => item.id);
+    emits('update:selectedIds', selectedIds.value);
   };
   defineExpose({
     selectedIds,

src/types/task-execution/tableData.ts

@@ -1,3 +1,4 @@
+import type { TaskManagementRuleForm } from '@/views/disaster/disaster-precaution/src/type';
 export interface TaskExecutionTableData {
   id: number;
   taskName: string;
@@ -8,6 +9,10 @@ export interface TaskExecutionTableData {
   taskStage: number;
   isOverdue: number;
 }
+
+export interface TaskManagementItemResponse extends TaskManagementRuleForm {
+  id: number;
+}
 export interface DoingTaskExecutionTableDataResponse extends TaskExecutionTableData {
   createTime: string;
   updateTime: string;

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

@@ -14,12 +14,19 @@
             :searchData="searchData"
             @update:searchData="handleSearch"
           />
+          <div
+            style="width: 100%; height: 20px; background-color: red; margin-top: 20px"
+            v-show="selectedIds.length > 0"
+          >
+            <span>{{ selectedIds.length }}项</span>
+          </div>
         </header>
         <BasicTable
           :table-config="tableConfig"
           :table-data="tableData"
           @update:pageSize="handleSizeChange"
           @update:pageNumber="handleCurrentChange"
+          @update:selectedIds="handleSelectedIds"
         >
           <template #taskName="scope">
             <div class="task-name--div">
@@ -45,8 +52,12 @@
             <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="查看" />
+            <ActionButton
+              text="编辑"
+              v-if="scope.row.activeStatus === ACTIVE_STATUS.NOT_EFFECTIVE"
+              @click="handleEditTask(scope.row.id)"
+            />
+            <ActionButton text="查看" @click="handleViewTask(scope.row.id)" />
             <ActionButton
               text="发布"
               :popconfirm="{
@@ -98,6 +109,11 @@
   const handleSearch = (data: any) => {
     console.log(data);
   };
+  const selectedIds = ref<number[]>([]);
+  const handleSelectedIds = (ids: number[]) => {
+    selectedIds.value = ids;
+    console.log(ids);
+  };
   const defaultPath = '/disaster-prevention/disaster-precaution/task-item';
   const handleCreateTask = () => {
     router.push({
@@ -107,6 +123,18 @@
       },
     });
   };
+  const handleEditTask = (id: number) => {
+    router.push({
+      name: defaultPath,
+      query: { operate: 'edit', id },
+    });
+  };
+  const handleViewTask = (id: number) => {
+    router.push({
+      name: defaultPath,
+      query: { id },
+    });
+  };
   const tableData = ref<TaskExecutionTableData[]>([]);
   const { tableConfig, pagination } = useTableConfig(TASK_MANAGEMENT_TABLE_COLUMNS, TABLE_OPTIONS);
   const handleSizeChange = (value: number) => {

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

@@ -108,13 +108,5 @@
 
 <style scoped lang="scss">
   @use '@/views/disaster/style/info-container.scss' as *;
-  :deep(.el-date-editor) {
-    --el-date-editor-width: 100%;
-  }
-  .task-type-container {
-    display: flex;
-    justify-content: space-between;
-    gap: 10cpx;
-    width: 100%;
-  }
+  @use '../style/task-item.scss' as *;
 </style>

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

@@ -49,17 +49,23 @@
 
 <script setup lang="ts">
   import BasicForm from '@/components/BasicForm.vue';
+  import User from '@/views/disaster/components/User.vue';
   import { useFormConfigHook } from '@/hooks/useFormConfigHook';
   import { TASK_MANAGEMENT_FROM_CONFIG, TASK_MANAGEMENT_FROM_DATA, TASK_MANAGEMENT_FROM_RULES } from '../config';
   import { onMounted, ref } from 'vue';
   import { TaskManagementRuleForm } from '../type';
   import { TASK_TYPE_OPTIONS } from '../constants/task-execution';
   import { TASK_TEMPLATE_LIST } from '../constants/template-detail';
-  import User from '@/views/disaster/components/User.vue';
+  import { getTaskManagementItem } from '@/api/task-execution/tableData';
   import type { UserInfo } from '@/types/push-object';
   import type { TreeNodeData } from '@/views/disaster/types';
 
+  const props = defineProps<{
+    id: number;
+  }>();
+
   const userInfo = ref(false);
+
   const userOptions = ref<UserInfo[]>([]);
   const basicFormRef = ref<InstanceType<typeof BasicForm>>();
 
@@ -67,7 +73,7 @@
     ruleFormData.taskTemplate = taskType;
   };
 
-  const { ruleFormConfig, ruleFormData, formRules, cloneRuleFormData, beforeRouteLeave } =
+  const { ruleFormConfig, ruleFormData, formRules,cloneRuleFormData, beforeRouteLeave } =
     useFormConfigHook<TaskManagementRuleForm>(
       TASK_MANAGEMENT_FROM_CONFIG,
       TASK_MANAGEMENT_FROM_DATA,
@@ -85,6 +91,17 @@
     userOptions.value = ruleFormData.checkUser;
   };
 
+  const getTaskManagementItemInfo = async () => {
+    const res = await getTaskManagementItem(props.id);
+    userOptions.value = res.checkUser;
+    for (const key in res) {
+      if (key in ruleFormData) {
+        ruleFormData[key] = res[key as keyof typeof res];
+      }
+    }
+    cloneRuleFormData();
+  };
+
   const handleValidate = async () => {
     if (!basicFormRef.value) return;
     const parentValidateResult = await basicFormRef.value.validateForm();
@@ -100,21 +117,12 @@
   });
 
   onMounted(() => {
-    ruleFormData.createUser = 'XXX';
-    cloneRuleFormData();
+    getTaskManagementItemInfo();
     beforeRouteLeave();
   });
 </script>
 
 <style scoped lang="scss">
   @use '@/views/disaster/style/info-container.scss' as *;
-  :deep(.el-date-editor) {
-    --el-date-editor-width: 100%;
-  }
-  .task-type-container {
-    display: flex;
-    justify-content: space-between;
-    gap: 10cpx;
-    width: 100%;
-  }
+  @use '../style/task-item.scss' as *;
 </style>

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

@@ -3,7 +3,12 @@
     <BasicForm ref="basicFormRef" :formData="ruleFormData" :formConfig="ruleFormConfig">
       <template #taskType>
         <div class="task-type-container">
-          <el-select v-model="ruleFormData.taskType" placeholder="请选择检查类型" @change="handleTaskTypeChange">
+          <el-select
+            v-model="ruleFormData.taskType"
+            placeholder="请选择检查类型"
+            @change="handleTaskTypeChange"
+            disabled
+          >
             <el-option v-for="item in TASK_TYPE_OPTIONS" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
           <el-select v-model="ruleFormData.taskTemplate" placeholder="请选择关联模板" disabled>
@@ -12,13 +17,7 @@
         </div>
       </template>
       <template #checkUser>
-        <el-select
-          v-model="ruleFormData.checkUser"
-          value-key="id"
-          multiple
-          placeholder="请选择人员"
-          @click="userInfo = true"
-        >
+        <el-select v-model="ruleFormData.checkUser" value-key="id" multiple placeholder="请选择人员" disabled>
           <el-option
             v-for="user in userOptions"
             :key="user.id"
@@ -28,22 +27,12 @@
         </el-select>
       </template>
       <template #isPush>
-        <el-radio-group v-model="ruleFormData.isPush">
+        <el-radio-group v-model="ruleFormData.isPush" disabled>
           <el-radio :value="true">是</el-radio>
           <el-radio :value="false">否</el-radio>
         </el-radio-group>
       </template>
     </BasicForm>
-    <el-dialog
-      v-model="userInfo"
-      title="添加人员"
-      align-center
-      :close-on-click-modal="false"
-      :destroy-on-close="true"
-      class="customDialog--pushObject"
-    >
-      <User :customUserList="ruleFormData.checkUser" @cancel="userInfo = false" @submit="handleSubmit" />
-    </el-dialog>
   </div>
 </template>
 
@@ -55,11 +44,14 @@
   import { TaskManagementRuleForm } from '../type';
   import { TASK_TYPE_OPTIONS } from '../constants/task-execution';
   import { TASK_TEMPLATE_LIST } from '../constants/template-detail';
-  import User from '@/views/disaster/components/User.vue';
+  import { getTaskManagementItem } from '@/api/task-execution/tableData';
   import type { UserInfo } from '@/types/push-object';
-  import type { TreeNodeData } from '@/views/disaster/types';
+  import { cloneDeep } from 'lodash-es';
+
+  const props = defineProps<{
+    id: number;
+  }>();
 
-  const userInfo = ref(false);
   const userOptions = ref<UserInfo[]>([]);
   const basicFormRef = ref<InstanceType<typeof BasicForm>>();
 
@@ -67,54 +59,36 @@
     ruleFormData.taskTemplate = taskType;
   };
 
-  const { ruleFormConfig, ruleFormData, formRules, cloneRuleFormData, beforeRouteLeave } =
-    useFormConfigHook<TaskManagementRuleForm>(
-      TASK_MANAGEMENT_FROM_CONFIG,
-      TASK_MANAGEMENT_FROM_DATA,
-      TASK_MANAGEMENT_FROM_RULES,
-    );
+  const TASK_MANAGEMENT_FROM_CONFIG_DISABLED = cloneDeep(TASK_MANAGEMENT_FROM_CONFIG).map((item) => {
+    if (item.componentProps) {
+      item.componentProps = { ...item.componentProps, disabled: true };
+    }
+    return item;
+  });
 
-  const handleSubmit = (selectedPersonList: TreeNodeData[]) => {
-    ruleFormData.checkUser = selectedPersonList.map((user) => {
-      return {
-        id: user.id,
-        username: user.name.split('-')[0],
-        realname: user.name.split('-')[1],
-      };
-    });
-    userOptions.value = ruleFormData.checkUser;
-  };
+  const { ruleFormConfig, ruleFormData, cloneRuleFormData } = useFormConfigHook<TaskManagementRuleForm>(
+    TASK_MANAGEMENT_FROM_CONFIG_DISABLED,
+    TASK_MANAGEMENT_FROM_DATA,
+    TASK_MANAGEMENT_FROM_RULES,
+  );
 
-  const handleValidate = async () => {
-    if (!basicFormRef.value) return;
-    const parentValidateResult = await basicFormRef.value.validateForm();
-    return parentValidateResult;
-  };
-  const getFormData = () => {
+  const getTaskManagementItemInfo = async () => {
+    const res = await getTaskManagementItem(props.id);
+    userOptions.value = res.checkUser;
+    for (const key in res) {
+      if (key in ruleFormData) {
+        ruleFormData[key] = res[key as keyof typeof res];
+      }
+    }
     cloneRuleFormData();
-    return ruleFormData;
   };
-  defineExpose({
-    handleValidate,
-    getFormData,
-  });
 
   onMounted(() => {
-    ruleFormData.createUser = 'XXX';
-    cloneRuleFormData();
-    beforeRouteLeave();
+    getTaskManagementItemInfo();
   });
 </script>
 
 <style scoped lang="scss">
   @use '@/views/disaster/style/info-container.scss' as *;
-  :deep(.el-date-editor) {
-    --el-date-editor-width: 100%;
-  }
-  .task-type-container {
-    display: flex;
-    justify-content: space-between;
-    gap: 10cpx;
-    width: 100%;
-  }
+  @use '../style/task-item.scss' as *;
 </style>

src/views/disaster/disaster-precaution/src/config/table.ts

@@ -12,6 +12,13 @@ export const TABLE_OPTIONS = {
 
 // 任务管理表格列配置
 export const TASK_MANAGEMENT_TABLE_COLUMNS: TableColumnProps[] = [
+  {
+    prop: 'select',
+    label: '',
+    type: 'selection',
+    align: 'center',
+    width: '80cpx',
+  },
   {
     prop: 'taskName',
     label: '任务名称',

src/views/disaster/disaster-precaution/src/style/task-item.scss

@@ -0,0 +1,9 @@
+:deep(.el-date-editor) {
+  --el-date-editor-width: 100%;
+}
+.task-type-container {
+  display: flex;
+  justify-content: space-between;
+  gap: 10cpx;
+  width: 100%;
+}

src/views/disaster/disaster-precaution/src/type.ts

@@ -31,6 +31,7 @@ export interface TaskManagementRuleForm
   selfCheckUnit: string[];
   checkRequirement: string;
   checkUser: UserInfo[];
-  isPush: number | null;
+  isPush: boolean | null;
   createUser: string;
+  [key: string]: any;
 }