预防检查完成

src/components/BasicTable.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="basic-table">
     <el-table
+      ref="tableRef"
       v-bind="props.tableConfig"
       v-loading="props.tableConfig.loading"
       :data="props.tableData"
@@ -42,7 +43,10 @@
   import type { BasicTableProps } from '@/types/basic-table';
   import { PAGE_SIZE_CONFIG } from '@/constant/pagination';
   import EmptyImg from 'assets/images/empty@1X.png';
+  import type { ElTable } from 'element-plus';
   const selectedIds = ref<number[]>([]);
+  const tableRef = ref<InstanceType<typeof ElTable>>();
+
   const props = defineProps<{
     tableConfig: BasicTableProps;
     tableData: any[];
@@ -65,8 +69,17 @@
     selectedIds.value = selection.map((item) => item.id);
     emits('update:selection', selection);
   };
+
+  const clearSelection = () => {
+    if (!tableRef.value) return;
+    tableRef.value.clearSelection();
+    selectedIds.value = [];
+    emits('update:selection', []);
+  };
+
   defineExpose({
     selectedIds,
+    clearSelection,
   });
 </script>
 

src/views/disaster/components/InspectorSelect.vue

@@ -14,6 +14,7 @@
             label: 'label',
             children: 'children',
             disabled: (data) => !data.isUser || disabledIds.includes(data.id),
+            class: (data) => (data.isUser ? 'is-user' : ''),
           }"
           placeholder="请选择任务检查人"
           filterable
@@ -225,4 +226,14 @@
       }
     }
   }
+  :deep(.el-tree-node) {
+    .el-checkbox {
+      display: none;
+    }
+  }
+  :deep(.is-user) {
+    .el-checkbox {
+      display: flex;
+    }
+  }
 </style>

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

@@ -20,10 +20,18 @@
         >
           <template #taskName="scope">
             <div class="task-name--div">
-              <el-tooltip :content="scope.row.name" placement="top" effect="light">
+              <el-tooltip
+                :content="scope.row.name"
+                placement="top"
+                effect="light"
+                v-if="isToolTip(scope.row.overdue, scope.row.name)"
+              >
                 <span>{{ scope.row.name }}</span>
               </el-tooltip>
-              <img :src="OverdueIcon" v-if="scope.row.overdue" />
+              <span v-else>{{ scope.row.name }}</span>
+              <div class="overdue-icon">
+                <img :src="OverdueIcon" alt="overdue" v-if="scope.row.overdue" />
+              </div>
             </div>
           </template>
           <template #inspectType="scope">
@@ -35,7 +43,7 @@
           <!-- action button 不仅分任务情况 还要分 人物权限 -->
           <template #action="scope">
             <!-- 检查任务操作入口 -->
-            <div class="action-container" v-if="scope.row.taskState === TASK_STAGE.PENDING_CHECK">
+            <div class="action-container--div" v-if="scope.row.taskState === TASK_STAGE.PENDING_CHECK">
               <ActionButton text="去检查" @click="handleCheckItem(scope.row.id, 'check')" />
               <!-- 仅检查责任人可以看到 -->
               <ActionButton
@@ -45,7 +53,7 @@
               />
             </div>
             <!-- 审批任务操作入口 -->
-            <div class="action-container" v-else-if="scope.row.taskState === TASK_STAGE.PENDING_APPROVAL">
+            <div class="action-container--div" v-else-if="scope.row.taskState === TASK_STAGE.PENDING_APPROVAL">
               <!-- 审批人员可以看到 -->
               <ActionButton
                 text="去审批"
@@ -67,7 +75,7 @@
               />
             </div>
             <!-- 完成任务操作入口 -->
-            <div class="action-container" v-else-if="scope.row.taskState === TASK_STAGE.COMPLETED">
+            <div class="action-container--div" v-else-if="scope.row.taskState === TASK_STAGE.COMPLETED">
               <ActionButton text="查看" @click="handleCheckItem(scope.row.id, 'view')" />
               <!-- 仅审批人员可以看到 -->
               <ActionButton
@@ -118,6 +126,7 @@
   import type { PersonGroupItem } from '@/types/person-group/type';
   import { useRouter } from 'vue-router';
   import { ElMessage } from 'element-plus';
+  import { isToolTip } from './src/utils/is-tooltip';
 
   const router = useRouter();
   const userInfo = ref(false);

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

@@ -2,7 +2,7 @@
   <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">任务执行</span>
+      <span class="disaster-precaution-container__title">{{ headTitle }}</span>
     </header>
     <main class="disaster-precaution-container__main">
       <div class="disaster-precaution">
@@ -12,17 +12,16 @@
         <p class="title">
           被检查自查单位：<span class="content">{{ taskExecutionDetailList?.deptName }}</span>
         </p>
-        <TemplateTableMerge
-          ref="templateTableMergeRef"
-          :operation-type="operationType"
-          :main-table="templateDetailList?.inspectTemplateDetailVOs || []"
-          :opinion-data="templateDetailList?.deptOpinion || {} as ContentItem"
-          :result-data="templateDetailList?.inspectResult || {} as ContentItem"
-          :height="
-            operationType === 'check' ? 'calc(50vh - 65px)' : operationType === 'view' ? 'calc(70vh - 100px)' : '50vh'
-          "
-          @validate-change="handleValidateChange"
-        />
+        <div class="info-container">
+          <TemplateTableMerge
+            ref="templateTableMergeRef"
+            :operation-type="operationType"
+            :main-table="templateDetailList?.inspectTemplateDetailVOs || []"
+            :opinion-data="templateDetailList?.deptOpinion || opinionData"
+            :result-data="templateDetailList?.inspectResult || resultData"
+            @validate-change="handleValidateChange"
+          />
+        </div>
         <el-form style="max-width: 400px" :model="formModel" label-width="auto" v-if="operationType === 'check'">
           <el-form-item label="选择审批领导" prop="reviewerId" :rules="[{ required: true, message: '请选择审批领导' }]">
             <el-tree-select
@@ -67,6 +66,9 @@
 
   const { getUserFirstLevelTreeList, treeData, id: userId } = useUserInfoHook();
 
+  const opinionData = ref<ContentItem>({} as ContentItem);
+  const resultData = ref<ContentItem>({} as ContentItem);
+
   // 需要禁用的用户ID列表
   const disabledIds = computed(() => {
     const ids = [userId];
@@ -130,6 +132,14 @@
     router.back();
   };
 
+  const headTitle = computed(() => {
+    if (operationType === 'view') {
+      return '灾害预防检查任务单';
+    } else {
+      return '任务执行';
+    }
+  });
+
   onMounted(() => {
     getTaskExecutionDetailList();
     getUserFirstLevelTreeList();
@@ -138,6 +148,7 @@
 
 <style lang="scss" scoped>
   @use '../style/disaster.scss' as *;
+  @use '@/views/disaster/style/info-container.scss' as *;
   .disaster-precaution-container__header {
     flex-direction: row !important;
     justify-content: flex-start !important;

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

@@ -20,87 +20,112 @@
             :searchData="searchData"
             @update:searchData="handleSearch"
           />
-          <div class="batch-operation--div fadeIn" v-show="selectionItems.length > 0 && taskManagementPermissions">
+        </header>
+        <div class="batch-table">
+          <div class="batch-operation--div" v-show="taskManagementPermissions && selectionItems.length > 0">
             <span>已选{{ selectionItems.length }}项</span>
-            <div class="batch-operation--div--button">
-              <el-button type="primary" v-show="isBatchPublish" @click="handleBatchPublish">批量发布</el-button>
-              <el-button type="primary" v-show="isBatchWithdraw" @click="handleBatchWithdraw">批量撤回</el-button>
-              <el-button type="primary" v-show="isBatchDelete" @click="handleBatchDelete">批量删除</el-button>
+            <div class="batch-operation--div--close">
+              <div class="batch-operation--div--button">
+                <el-button class="custom-el-button" v-show="isBatchPublish" @click="handleBatchPublish"
+                  >批量发布</el-button
+                >
+                <el-button class="custom-el-button" v-show="isBatchWithdraw" @click="handleBatchWithdraw"
+                  >批量撤回</el-button
+                >
+                <el-button class="custom-el-button" v-show="isBatchDelete" @click="handleBatchDelete"
+                  >批量删除</el-button
+                >
+              </div>
+              <el-icon class="close-icon" @click="handleCloseBatchOperation"><Close /></el-icon>
             </div>
           </div>
-        </header>
-        <BasicTable
-          ref="basicTableRef"
-          :table-config="tableConfig"
-          :table-data="tableData"
-          @update:pageSize="handleSizeChange"
-          @update:pageNumber="handleCurrentChange"
-          @update:selection="handleSelectionChange"
-        >
-          <template #taskName="scope">
-            <div class="task-name--div">
-              <el-tooltip :content="scope.row.name" placement="top" effect="light">
-                <span>{{ scope.row.name }}</span>
-              </el-tooltip>
-              <img :src="OverdueIcon" alt="overdue" v-if="scope.row.overdue" />
-            </div>
-          </template>
-          <template #inspectType="scope">
-            <span>{{ INSPECT_TYPE_MAP[scope.row.inspectType] }}</span>
-          </template>
-          <template #effectStatus="scope">
-            <div class="active-status--div">
-              <div
-                class="dot"
-                :style="{ backgroundColor: ACTIVE_STATUS_COLOR[scope.row.effectStatus as ACTIVE_STATUS] }"
-              ></div>
-              <span>{{ ACTIVE_STATUS_MAP[scope.row.effectStatus] }}</span>
-            </div>
-          </template>
-          <template #taskStage="scope">
-            <span>{{ TASK_STAGE_MAP[scope.row.taskState] }}</span>
-          </template>
-          <template #action="scope">
-            <ActionButton
-              text="编辑"
-              v-if="scope.row.effectStatus === ACTIVE_STATUS.NOT_EFFECTIVE && taskManagementPermissions"
-              @click="handleEditTask(scope.row.id)"
-            />
-            <ActionButton text="查看" @click="handleViewTask(scope.row.id)" />
-            <ActionButton
-              text="发布"
-              :popconfirm="{
-                title: '确定要发布?',
-              }"
-              v-if="scope.row.effectStatus === ACTIVE_STATUS.NOT_EFFECTIVE && taskManagementPermissions"
-              @confirm="handlePublishTask(scope.row.id)"
-            />
-            <ActionButton
-              text="撤回"
-              :popconfirm="{
-                title: '确定要撤回?',
-              }"
-              v-else-if="scope.row.effectStatus === ACTIVE_STATUS.ACTIVE && taskManagementPermissions"
-              @confirm="handleWithdrawTask(scope.row.id)"
-            />
-            <ActionButton
-              text="删除"
-              :popconfirm="{
-                title: '确定要删除?',
-              }"
-              v-if="scope.row.effectStatus === ACTIVE_STATUS.NOT_EFFECTIVE && taskManagementPermissions"
-              @confirm="handleDeleteTask(scope.row.id)"
-            />
-          </template>
-        </BasicTable>
+          <BasicTable
+            ref="basicTableRef"
+            :table-config="tableConfig"
+            :table-data="tableData"
+            @update:pageSize="handleSizeChange"
+            @update:pageNumber="handleCurrentChange"
+            @update:selection="handleSelectionChange"
+          >
+            <template #taskName="scope">
+              <div class="task-name--div">
+                <el-tooltip
+                  :content="scope.row.name"
+                  placement="top"
+                  effect="light"
+                  v-if="isToolTip(scope.row.overdue, scope.row.name)"
+                >
+                  <span>{{ scope.row.name }}</span>
+                </el-tooltip>
+                <span v-else>{{ scope.row.name }}</span>
+                <div class="overdue-icon">
+                  <img :src="OverdueIcon" alt="overdue" v-if="scope.row.overdue" />
+                </div>
+              </div>
+            </template>
+            <template #inspectType="scope">
+              <span>{{ INSPECT_TYPE_MAP[scope.row.inspectType] }}</span>
+            </template>
+            <template #effectStatus="scope">
+              <div class="active-status--div">
+                <div
+                  class="dot"
+                  :style="{ backgroundColor: ACTIVE_STATUS_COLOR[scope.row.effectStatus as ACTIVE_STATUS] }"
+                ></div>
+                <span>{{ ACTIVE_STATUS_MAP[scope.row.effectStatus] }}</span>
+              </div>
+            </template>
+            <template #taskStage="scope">
+              <span>{{ TASK_STAGE_MAP[scope.row.taskState] }}</span>
+            </template>
+            <template #action="scope">
+              <div class="action-container--div">
+                <ActionButton
+                  text="编辑"
+                  v-if="taskManagementPermissions && scope.row.effectStatus === ACTIVE_STATUS.NOT_EFFECTIVE"
+                  @click="handleEditTask(scope.row.id)"
+                />
+                <ActionButton text="查看" @click="handleViewTask(scope.row.id, scope.row.name, scope.row.deptName)" />
+                <ActionButton
+                  text="发布"
+                  :popconfirm="{
+                    title: '确定要发布?',
+                  }"
+                  v-if="taskManagementPermissions && scope.row.effectStatus === ACTIVE_STATUS.NOT_EFFECTIVE"
+                  @confirm="handlePublishTask(scope.row.id)"
+                />
+                <ActionButton
+                  text="撤回"
+                  :popconfirm="{
+                    title: '确定要撤回?',
+                  }"
+                  v-else-if="
+                    taskManagementPermissions &&
+                    scope.row.taskState !== TASK_STAGE.COMPLETED &&
+                    scope.row.effectStatus === ACTIVE_STATUS.ACTIVE
+                  "
+                  @confirm="handleWithdrawTask(scope.row.id)"
+                />
+                <ActionButton
+                  text="删除"
+                  :popconfirm="{
+                    title: '确定要删除?',
+                  }"
+                  v-if="taskManagementPermissions && scope.row.effectStatus === ACTIVE_STATUS.NOT_EFFECTIVE"
+                  @confirm="handleDeleteTask(scope.row.id)"
+                />
+              </div>
+            </template>
+          </BasicTable>
+        </div>
       </div>
     </main>
   </div>
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, reactive, watch } from 'vue';
-  import { Plus } from '@element-plus/icons-vue';
+  import { ref, onMounted, reactive } from 'vue';
+  import { Plus, Close } from '@element-plus/icons-vue';
   import BasicTable from '@/components/BasicTable.vue';
   import ActionButton from '@/components/ActionButton.vue';
   import Search from '@/views/disaster/components/Search.vue';
@@ -114,14 +139,13 @@
   import type { TaskManagementListQuery, TaskManagementListResponse } from '@/types/disaster-precaution';
   import OverdueIcon from '@/assets/svg/overdue.svg';
   import { ElMessage } from 'element-plus';
-  import { INSPECT_TYPE_MAP, TASK_STAGE_MAP } from './src/constants/task-execution';
+  import { INSPECT_TYPE_MAP, TASK_STAGE_MAP, TASK_STAGE } from './src/constants/task-execution';
   import { ACTIVE_STATUS, ACTIVE_STATUS_COLOR, ACTIVE_STATUS_MAP } from '@/views/disaster/constant';
   import {
     TABLE_OPTIONS_MANAGEMENT,
     TASK_MANAGEMENT_TABLE_COLUMNS,
     TASK_MANAGEMENT_SEARCH_CONFIG,
     TABLE_MANAGEMENT_HEIGHT_DEFAULT,
-    TABLE_MANAGEMENT_HEIGHT_BATCH_OPERATION,
     TABLE_MANAGEMENT_HEIGHT_NOT_PERMISSION,
   } from './src/config';
   import { useRouter } from 'vue-router';
@@ -129,13 +153,14 @@
   import { DISASTER_PERMISSIONS } from '@/views/disaster/constant';
   import { useUserInfoHook } from '@/views/disaster/hooks/userInfo';
   import { openMessageBox } from '@/utils/element-plus/messageBox';
+  import { isToolTip } from './src/utils/is-tooltip';
 
   const { permissions } = useUserInfoHook();
   const router = useRouter();
   const searchData = reactive({
-    inspectType: '',
-    effectStatus: '',
-    taskState: '',
+    inspectType: null,
+    effectStatus: null,
+    taskState: null,
   });
   const { tableConfig, pagination } = useTableConfig(TASK_MANAGEMENT_TABLE_COLUMNS, TABLE_OPTIONS_MANAGEMENT);
   let taskManagementListQuery: QueryPageRequest<TaskManagementListQuery> = {
@@ -145,13 +170,13 @@
   };
   const handleSearch = () => {
     taskManagementListQuery.queryParam = {};
-    if (searchData.inspectType !== '') {
+    if (searchData.inspectType) {
       taskManagementListQuery.queryParam.inspectType = searchData.inspectType;
     }
-    if (searchData.effectStatus !== '') {
+    if (searchData.effectStatus) {
       taskManagementListQuery.queryParam.effectStatus = searchData.effectStatus;
     }
-    if (searchData.taskState !== '') {
+    if (searchData.taskState) {
       taskManagementListQuery.queryParam.taskState = searchData.taskState;
     }
     if (Object.keys(taskManagementListQuery.queryParam).length > 0) {
@@ -198,6 +223,10 @@
     }
   };
   const basicTableRef = ref<InstanceType<typeof BasicTable>>();
+  const handleCloseBatchOperation = () => {
+    if (!basicTableRef.value) return;
+    basicTableRef.value.clearSelection();
+  };
   const handleBatchDelete = async () => {
     const confirmed = await openMessageBox('', '删除后任务不可恢复，确认删除吗？', 'warning');
     if (!confirmed) return;
@@ -240,10 +269,10 @@
       query: { operate: 'edit', id },
     });
   };
-  const handleViewTask = (id: number) => {
+  const handleViewTask = (id: number, name: string, deptName: string) => {
     router.push({
       name: defaultName,
-      query: { id },
+      query: { id, name, deptName },
     });
   };
   const tableData = ref<TaskManagementListResponse[]>([]);
@@ -274,32 +303,44 @@
       ? TABLE_MANAGEMENT_HEIGHT_DEFAULT
       : TABLE_MANAGEMENT_HEIGHT_NOT_PERMISSION;
   });
-  watch(
-    () => selectionItems.value.length,
-    (newLength) => {
-      // 如果没有权限，则不显示批量操作
-      if (!taskManagementPermissions.value) return;
-      if (newLength > 0) {
-        tableConfig.height = TABLE_MANAGEMENT_HEIGHT_BATCH_OPERATION;
-      } else {
-        tableConfig.height = TABLE_MANAGEMENT_HEIGHT_DEFAULT;
-      }
-    },
-  );
 </script>
 
 <style scoped lang="scss">
   @use '../style/disaster.scss' as *;
   @use './src/style/task-execution.scss' as *;
+  .batch-table {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
   .batch-operation--div {
     @include flex-center;
     justify-content: flex-start;
+    position: absolute;
+    top: 0;
+    left: 0;
     gap: 60px;
     width: 100%;
-    height: 54px;
+    height: 48px;
     border: 4px;
     padding: 16px 25px;
     background-color: #ddefff;
-    margin-top: 20px;
+    z-index: 100;
+    &--close {
+      @include flex-center;
+      justify-content: space-between;
+      flex: 1;
+    }
+    .close-icon {
+      font-size: 20px;
+      color: #ff4d4f;
+      cursor: pointer;
+    }
+  }
+  .custom-el-button {
+    --el-border-color: #1890ff;
+    --el-text-color-regular: #1890ff;
+    --el-color-primary: #fff;
+    --el-color-primary-light-9: #1890ff;
   }
 </style>

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

@@ -5,13 +5,14 @@
       <span class="disaster-precaution-container__title">{{ name }}</span>
     </header>
     <main class="disaster-precaution-container__main">
-      <TemplateTableMerge
-        :operation-type="'template'"
-        :main-table="templateDetail"
-        :opinion-data="{} as ContentItem"
-        :result-data="{} as ContentItem"
-        height="calc(70vh - 25px)"
-      />
+      <div class="info-container">
+        <TemplateTableMerge
+          :operation-type="'template'"
+          :main-table="templateDetail"
+          :opinion-data="opinionData"
+          :result-data="resultData"
+        />
+      </div>
     </main>
   </div>
 </template>
@@ -26,6 +27,9 @@
   import type { SpanTableData } from '@/views/disaster/disaster-precaution/src/type';
   import type { ContentItem } from '@/types/disaster-precaution';
 
+  const resultData = ref<ContentItem>({} as ContentItem);
+  const opinionData = ref<ContentItem>({} as ContentItem);
+
   const route = useRoute();
   const router = useRouter();
   const id = Number(route.params.id);
@@ -41,6 +45,7 @@
 
 <style lang="scss" scoped>
   @use '../style/disaster.scss' as *;
+  @use '@/views/disaster/style/info-container.scss' as *;
   .disaster-precaution-container__header {
     flex-direction: row !important;
     justify-content: flex-start !important;

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

@@ -5,7 +5,7 @@
     maxlength="200"
     placeholder="不符合时必填，请输入实际情况，1-200字"
     type="textarea"
-    :rows="3"
+    :rows="4"
   />
 </template>
 
@@ -36,6 +36,5 @@
 <style lang="scss" scoped>
   .el-input {
     width: 100%;
-    border: 1px solid red;
   }
 </style>

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

@@ -1,44 +1,37 @@
 <template>
   <div class="info-container">
-    <section>
-      <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
-        <template #deptName>
-          <el-select
-            v-model="ruleFormData.deptIdList"
-            multiple
-            placeholder="请选择被检查（自查）单位"
-            filterable
-            class="custom-select"
-          >
-            <el-option v-for="item in firstLevelDepts" :key="item.id" :label="item.deptName" :value="item.id" />
+    <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
+      <template #deptName>
+        <el-select
+          v-model="ruleFormData.deptIdList"
+          multiple
+          placeholder="请选择被检查（自查）单位"
+          filterable
+          class="custom-select"
+        >
+          <el-option v-for="item in firstLevelDepts" :key="item.id" :label="item.deptName" :value="item.id" />
+        </el-select>
+      </template>
+      <template #inspectType>
+        <div class="task-type-container">
+          <el-select v-model="ruleFormData.inspectType" placeholder="请选择检查类型" @change="handleTaskTypeChange">
+            <el-option v-for="item in INSPECT_TYPE_OPTIONS" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
-        </template>
-        <template #inspectType>
-          <div class="task-type-container">
-            <el-select v-model="ruleFormData.inspectType" placeholder="请选择检查类型" @change="handleTaskTypeChange">
-              <el-option
-                v-for="item in INSPECT_TYPE_OPTIONS"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-            <el-select v-model="ruleFormData.templateId" placeholder="请选择关联模板" disabled>
-              <el-option v-for="item in TASK_TEMPLATE_LIST" :key="item.id" :label="item.name" :value="item.id" />
-            </el-select>
-          </div>
-        </template>
-        <template #userGroupList>
-          <GroupSelect v-model="ruleFormData.userGroupList" :groupOptions="groupOptions" />
-        </template>
-        <template #isPush>
-          <el-radio-group v-model="ruleFormData.isPush">
-            <el-radio :value="IS_PUSH.PUSH">是</el-radio>
-            <el-radio :value="IS_PUSH.NOT_PUSH">否</el-radio>
-          </el-radio-group>
-        </template>
-      </BasicForm>
-    </section>
+          <el-select v-model="ruleFormData.templateId" placeholder="请选择关联模板" disabled>
+            <el-option v-for="item in TASK_TEMPLATE_LIST" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </div>
+      </template>
+      <template #userGroupList>
+        <GroupSelect v-model="ruleFormData.userGroupList" :groupOptions="groupOptions" />
+      </template>
+      <template #isPush>
+        <el-radio-group v-model="ruleFormData.isPush">
+          <el-radio :value="IS_PUSH.PUSH">是</el-radio>
+          <el-radio :value="IS_PUSH.NOT_PUSH">否</el-radio>
+        </el-radio-group>
+      </template>
+    </BasicForm>
   </div>
 </template>
 

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

@@ -1,33 +1,26 @@
 <template>
   <div class="info-container">
-    <section>
-      <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
-        <template #inspectType>
-          <div class="task-type-container">
-            <el-select v-model="ruleFormData.inspectType" placeholder="请选择检查类型" @change="handleTaskTypeChange">
-              <el-option
-                v-for="item in INSPECT_TYPE_OPTIONS"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-            <el-select v-model="ruleFormData.templateId" placeholder="请选择关联模板" disabled>
-              <el-option v-for="item in TASK_TEMPLATE_LIST" :key="item.id" :label="item.name" :value="item.id" />
-            </el-select>
-          </div>
-        </template>
-        <template #userGroupList>
-          <GroupSelect v-model="ruleFormData.userGroupList" :groupOptions="groupOptions" />
-        </template>
-        <template #isPush>
-          <el-radio-group v-model="ruleFormData.isPush">
-            <el-radio :value="IS_PUSH.PUSH">是</el-radio>
-            <el-radio :value="IS_PUSH.NOT_PUSH">否</el-radio>
-          </el-radio-group>
-        </template>
-      </BasicForm>
-    </section>
+    <BasicForm ref="basicFormRef" :formData="ruleFormData" :formRules="formRules" :formConfig="ruleFormConfig">
+      <template #inspectType>
+        <div class="task-type-container">
+          <el-select v-model="ruleFormData.inspectType" placeholder="请选择检查类型" @change="handleTaskTypeChange">
+            <el-option v-for="item in INSPECT_TYPE_OPTIONS" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+          <el-select v-model="ruleFormData.templateId" placeholder="请选择关联模板" disabled>
+            <el-option v-for="item in TASK_TEMPLATE_LIST" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </div>
+      </template>
+      <template #userGroupList>
+        <GroupSelect v-model="ruleFormData.userGroupList" :groupOptions="groupOptions" />
+      </template>
+      <template #isPush>
+        <el-radio-group v-model="ruleFormData.isPush">
+          <el-radio :value="IS_PUSH.PUSH">是</el-radio>
+          <el-radio :value="IS_PUSH.NOT_PUSH">否</el-radio>
+        </el-radio-group>
+      </template>
+    </BasicForm>
   </div>
 </template>
 

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

@@ -1,17 +1,10 @@
 <template>
   <div class="el-table-page">
     <el-table :data="TASK_TEMPLATE_HEADER" :show-header="false" border>
-      <el-table-column prop="title" align="center" width="60" />
+      <el-table-column prop="title" align="center" width="110" />
       <el-table-column prop="content" align="center" />
     </el-table>
-    <el-table
-      v-bind="$attrs"
-      :data="mergedTableData"
-      :span-method="handleSpanMethod"
-      border
-      class="custom-table"
-      :row-class-name="tableRowClassName"
-    >
+    <el-table :data="mergedTableData" :span-method="handleSpanMethod" border class="custom-table">
       <el-table-column v-for="column in TASK_TEMPLATE_MAIN_COLUMNS" :key="column.prop" v-bind="column" align="center">
         <template #default="scope">
           <!-- 底部表格内容 - 第一列 -->
@@ -33,8 +26,8 @@
               >
                 <div class="execute-result">{{ resultData.executeResult }}</div>
                 <div class="execute-person">
-                  <span>检查人员：{{ resultData.executeName }}</span>
-                  <span>时间：{{ resultData.inspectTime }}</span>
+                  <span v-if="resultData.executeName">检查人员：{{ resultData.executeName }}</span>
+                  <span v-if="resultData.inspectTime">时间：{{ resultData.inspectTime }}</span>
                   <div class="execute-images" v-if="resultData.executeImages && resultData.executeImages.length > 0">
                     <el-tooltip content="图片查看" effect="light">
                       <el-image
@@ -69,8 +62,8 @@
               <div class="inspection-result-approve" v-else-if="props.operationType === 'view'">
                 <div class="execute-result">{{ opinionData.executeResult }}</div>
                 <div class="execute-person">
-                  <span>审批人员：{{ opinionData.executeName }}</span>
-                  <span>时间：{{ opinionData.inspectTime }}</span>
+                  <span v-if="opinionData.executeName">审批人员：{{ opinionData.executeName }}</span>
+                  <span v-if="opinionData.inspectTime">时间：{{ opinionData.inspectTime }}</span>
                   <div class="execute-images" v-if="opinionData.executeImages && opinionData.executeImages.length > 0">
                     <el-tooltip content="图片查看" effect="light">
                       <el-image
@@ -280,15 +273,6 @@
     return { rowspan: 1, colspan: 1 };
   };
 
-  // 新增：底部行粘性定位 class
-  const tableRowClassName = ({ row }: { row: MergedRow }) => {
-    if (row.rowType !== 'footer') return;
-    if (row.footerType === 'inspectionAndSelftest') {
-      return 'sticky-footer-inspection';
-    }
-    return;
-  };
-
   // 校验规则
   const checkRule = (): boolean => {
     const mainData = mergedTableData.value.filter((item): item is MainRow => item.rowType === 'main');
@@ -321,7 +305,6 @@
   };
 
   const safetyJsonParse = (value: string) => {
-    console.log(value);
     try {
       return JSON.parse(value);
     } catch (error) {
@@ -436,19 +419,7 @@
 
   :deep(.custom-table th) {
     background-color: $white-color !important;
-    color: #606266 !important;
-    font-weight: 500 !important;
-  }
-
-  .sticky-footer {
-    position: sticky;
-    z-index: 2;
-  }
-
-  :deep(.sticky-footer-inspection) {
-    @extend .sticky-footer;
-    bottom: 0;
-    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+    font-weight: 400 !important;
   }
   .inspection-result-approve {
     width: 100%;

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

@@ -1,104 +1,38 @@
 <template>
   <div class="info-container">
-    <section>
-      <BasicForm ref="basicFormRef" :formData="ruleFormData" :formConfig="ruleFormConfig">
-        <template #inspectType>
-          <div class="task-type-container">
-            <el-select
-              v-model="ruleFormData.inspectType"
-              placeholder="请选择检查类型"
-              @change="handleTaskTypeChange"
-              disabled
-            >
-              <el-option
-                v-for="item in INSPECT_TYPE_OPTIONS"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              />
-            </el-select>
-            <el-select v-model="ruleFormData.templateId" placeholder="请选择关联模板" disabled>
-              <el-option v-for="item in TASK_TEMPLATE_LIST" :key="item.id" :label="item.name" :value="item.id" />
-            </el-select>
-          </div>
-        </template>
-        <template #userGroupList>
-          <GroupSelect v-model="ruleFormData.userGroupList" :groupOptions="groupOptions" disabled />
-        </template>
-        <template #isPush>
-          <el-radio-group v-model="ruleFormData.isPush" disabled>
-            <el-radio :value="IS_PUSH.PUSH">是</el-radio>
-            <el-radio :value="IS_PUSH.NOT_PUSH">否</el-radio>
-          </el-radio-group>
-        </template>
-      </BasicForm>
-    </section>
+    <TemplateTableMerge
+      :operation-type="'view'"
+      :main-table="templateDetailList?.inspectTemplateDetailVOs || []"
+      :opinion-data="templateDetailList?.deptOpinion || opinionData"
+      :result-data="templateDetailList?.inspectResult || resultData"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-  import BasicForm from '@/components/BasicForm.vue';
-  import { useFormConfigHook } from '@/hooks/useFormConfigHook';
-  import GroupSelect from '@/views/disaster/components/GroupSelect.vue';
-  import { TASK_MANAGEMENT_FROM_CONFIG_EDIT, TASK_MANAGEMENT_FROM_DATA, TASK_MANAGEMENT_FROM_RULES } from '../config';
-  import { onMounted, ref } from 'vue';
-  import { TaskManagementRuleForm } from '../type';
-  import type { UserGroupOption } from '@/types/person-group/type';
-  import { getAllUserGroup } from '@/api/system/person-group';
-  import { INSPECT_TYPE_OPTIONS } from '../constants/task-execution';
-  import { TASK_TEMPLATE_LIST } from '../constants/template-detail';
-  import { IS_PUSH } from '@/views/disaster/constant';
-  import { viewTaskManagementDetail } from '@/api/disaster-precaution';
-  import { cloneDeep } from 'lodash-es';
-
-  const props = defineProps<{
-    id: number;
-  }>();
-
-  const basicFormRef = ref<InstanceType<typeof BasicForm>>();
-  const groupOptions = ref<UserGroupOption[]>([]);
-
-  const handleTaskTypeChange = (taskType: number | null) => {
-    ruleFormData.taskTemplate = taskType;
+  import { useRoute } from 'vue-router';
+  import { ref, onMounted } from 'vue';
+  import TemplateTableMerge from './TemplateTableMerge.vue';
+  import { getTaskExecutionDetail } from '@/api/disaster-precaution';
+  import type { TaskExecutionDetailResponse, TemplateDetailResponse, ContentItem } from '@/types/disaster-precaution';
+
+  const route = useRoute();
+  const id = Number(route.query.id);
+  const opinionData = ref<ContentItem>({} as ContentItem);
+  const resultData = ref<ContentItem>({} as ContentItem);
+
+  const taskExecutionDetailList = ref<TaskExecutionDetailResponse>();
+  const templateDetailList = ref<TemplateDetailResponse>();
+  const getTaskExecutionDetailList = async () => {
+    const res = await getTaskExecutionDetail(id);
+    taskExecutionDetailList.value = res;
+    templateDetailList.value = JSON.parse(res.detail) as TemplateDetailResponse;
   };
-
-  const TASK_MANAGEMENT_FROM_CONFIG_VIEW = cloneDeep(TASK_MANAGEMENT_FROM_CONFIG_EDIT).map((item) => {
-    if (item.componentProps) {
-      item.componentProps = { ...item.componentProps, disabled: true };
-    }
-    return item;
-  });
-
-  const { ruleFormConfig, ruleFormData, cloneRuleFormData } = useFormConfigHook<TaskManagementRuleForm>(
-    TASK_MANAGEMENT_FROM_CONFIG_VIEW,
-    TASK_MANAGEMENT_FROM_DATA,
-    TASK_MANAGEMENT_FROM_RULES,
-  );
-
-  const getTaskManagementItemInfo = async () => {
-    const res = await viewTaskManagementDetail(props.id);
-    for (const key in res) {
-      if (key in ruleFormData) {
-        ruleFormData[key] = res[key as keyof typeof res];
-        ruleFormData.userGroupList = JSON.parse(res.userGroupList as unknown as string);
-      }
-    }
-    ruleFormData.deptName = res.deptName;
-    cloneRuleFormData();
-  };
-
-  const getUserGroupList = async () => {
-    const res = await getAllUserGroup();
-    groupOptions.value = res.groupVOList;
-  };
-
   onMounted(() => {
-    getTaskManagementItemInfo();
-    getUserGroupList();
+    getTaskExecutionDetailList();
   });
 </script>
 
 <style scoped lang="scss">
   @use '@/views/disaster/style/info-container.scss' as *;
-  @use '../style/task-item.scss' as *;
 </style>

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

@@ -8,7 +8,7 @@ import { validateFormTime } from '@/views/disaster/utils/validateTime';
 // 通用表单配置
 const BASIC_FORM_CONFIG = {
   TASK_NAME: {
-    label: '任务名称',
+    label: '任务名称：',
     prop: 'name',
     component: 'ElInput',
     componentProps: {
@@ -18,12 +18,12 @@ const BASIC_FORM_CONFIG = {
     },
   },
   INSPECT_TYPE: {
-    label: '检查类型',
+    label: '检查类型：',
     prop: 'inspectType',
     slot: 'inspectType',
   },
   DUE_COMPLETE_TIME: {
-    label: '应完成时间',
+    label: '应完成时间：',
     prop: 'dueCompleteTime',
     component: 'ElDatePicker',
     componentProps: {
@@ -36,7 +36,7 @@ const BASIC_FORM_CONFIG = {
     },
   },
   INSPECT_REQUIREMENT: {
-    label: '检查要求',
+    label: '检查要求：',
     prop: 'inspectRequirement',
     component: 'ElInput',
     componentProps: {
@@ -48,17 +48,17 @@ const BASIC_FORM_CONFIG = {
     },
   },
   USER_GROUP_LIST: {
-    label: '检查责任人',
+    label: '检查责任人：',
     prop: 'userGroupList',
     slot: 'userGroupList',
   },
   IS_PUSH: {
-    label: '是否推送',
+    label: '是否推送：',
     prop: 'isPush',
     slot: 'isPush',
   },
   CREATE_USER: {
-    label: '创建人',
+    label: '创建人：',
     prop: 'realname',
     component: 'ElInput',
     componentProps: {
@@ -70,7 +70,7 @@ const BASIC_FORM_CONFIG = {
 export const TASK_MANAGEMENT_FROM_CONFIG_CREATE: FormConfig[] = [
   BASIC_FORM_CONFIG.TASK_NAME,
   {
-    label: '被检查（自查）单位',
+    label: '被检查（自查）单位：',
     prop: 'deptIdList',
     slot: 'deptName',
   },
@@ -86,7 +86,7 @@ export const TASK_MANAGEMENT_FROM_CONFIG_CREATE: FormConfig[] = [
 export const TASK_MANAGEMENT_FROM_CONFIG_EDIT: FormConfig[] = [
   BASIC_FORM_CONFIG.TASK_NAME,
   {
-    label: '被检查（自查）单位',
+    label: '被检查（自查）单位：',
     prop: 'deptName',
     component: 'ElInput',
     componentProps: {

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

@@ -5,7 +5,6 @@ import {
   TASK_EXECUTION_TABLE_COLUMNS,
   TABLE_MANAGEMENT_HEIGHT_DEFAULT,
   TABLE_MANAGEMENT_HEIGHT_NOT_PERMISSION,
-  TABLE_MANAGEMENT_HEIGHT_BATCH_OPERATION,
 } from './table';
 import { TASK_MANAGEMENT_SEARCH_CONFIG, TASK_EXECUTION_SEARCH_CONFIG } from './search';
 import {
@@ -27,6 +26,5 @@ export {
   TASK_MANAGEMENT_FROM_DATA,
   TASK_MANAGEMENT_FROM_RULES,
   TABLE_MANAGEMENT_HEIGHT_DEFAULT,
-  TABLE_MANAGEMENT_HEIGHT_NOT_PERMISSION,
-  TABLE_MANAGEMENT_HEIGHT_BATCH_OPERATION,
+  TABLE_MANAGEMENT_HEIGHT_NOT_PERMISSION
 };

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

@@ -12,7 +12,7 @@ import { ACTIVE_STATUS_OPTIONS } from '@/views/disaster/constant';
 // 通用搜索配置
 const BASIC_SEARCH_CONFIG = {
   INSPECT_TYPE: {
-    label: '检查类型',
+    label: '检查类型：',
     prop: 'inspectType',
     component: 'ElSelect',
     selectOptions: INSPECT_TYPE_OPTIONS,
@@ -26,7 +26,7 @@ const BASIC_SEARCH_CONFIG = {
 export const TASK_MANAGEMENT_SEARCH_CONFIG: SearchConfig[] = [
   BASIC_SEARCH_CONFIG.INSPECT_TYPE,
   {
-    label: '生效状态',
+    label: '生效状态：',
     prop: 'effectStatus',
     component: 'ElSelect',
     selectOptions: ACTIVE_STATUS_OPTIONS,
@@ -35,7 +35,7 @@ export const TASK_MANAGEMENT_SEARCH_CONFIG: SearchConfig[] = [
     },
   },
   {
-    label: '任务阶段',
+    label: '任务阶段：',
     prop: 'taskState',
     component: 'ElSelect',
     selectOptions: TASK_STAGE_OPTIONS_MANAGEMENT,
@@ -49,7 +49,7 @@ export const TASK_MANAGEMENT_SEARCH_CONFIG: SearchConfig[] = [
 export const TASK_EXECUTION_SEARCH_CONFIG: SearchConfig[] = [
   BASIC_SEARCH_CONFIG.INSPECT_TYPE,
   {
-    label: '任务阶段',
+    label: '任务阶段：',
     prop: 'taskState',
     component: 'ElSelect',
     selectOptions: TASK_STAGE_OPTIONS_EXECUTION,

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

@@ -5,13 +5,11 @@ import type { TableColumnProps } from '@/types/basic-table';
 
 export const TABLE_MANAGEMENT_HEIGHT_DEFAULT = 'calc(65vh - 50px)';
 export const TABLE_MANAGEMENT_HEIGHT_NOT_PERMISSION = 'calc(70vh - 50px)';
-export const TABLE_MANAGEMENT_HEIGHT_BATCH_OPERATION = 'calc(65vh - 125px)';
 
 // 基础表格样式配置
 const TABLE_OPTIONS_DEFAULT = {
   emptyText: '暂无数据',
-  loading: true,
-  stripe: true,
+  loading: true
 };
 // 任务管理表格样式配置
 export const TABLE_OPTIONS_MANAGEMENT = {
@@ -28,32 +26,30 @@ const BASIC_TABLE_COLUMNS = {
   TASK_NAME: {
     prop: 'name',
     label: '任务名称',
-    align: 'center',
     slot: 'taskName',
-    width: '150px',
+    width: '220px',
   },
   SELF_CHECK_UNIT: {
     prop: 'deptName',
     label: '被检查（自查）单位',
-    align: 'center',
+    minWidth: '200px',
   },
   INSPECT_TYPE: {
     prop: 'inspectType',
     label: '检查类型',
-    align: 'center',
     slot: 'inspectType',
+    minWidth: '120px',
   },
   DUE_COMPLETE_TIME: {
     prop: 'dueCompleteTime',
     label: '应完成时间',
-    align: 'center',
-    width: '200px',
+    minWidth: '200px',
   },
   TASK_STAGE: {
     prop: 'taskState',
     label: '任务阶段',
-    align: 'center',
     slot: 'taskStage',
+    minWidth: '120px',
   },
   ACTION: {
     prop: 'action',
@@ -81,7 +77,6 @@ export const TASK_MANAGEMENT_TABLE_COLUMNS: TableColumnProps[] = [
   {
     prop: 'effectStatus',
     label: '生效状态',
-    align: 'center',
     slot: 'effectStatus',
     width: '120px',
   },
@@ -89,8 +84,7 @@ export const TASK_MANAGEMENT_TABLE_COLUMNS: TableColumnProps[] = [
   {
     prop: 'updatedAt',
     label: '创建时间',
-    align: 'center',
-    width: '200px',
+    minWidth: '200px',
   },
   BASIC_TABLE_COLUMNS.ACTION,
 ];

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

@@ -35,10 +35,10 @@ export const TASK_TEMPLATE_HEADER = [
   },
 ];
 export const TASK_TEMPLATE_MAIN_COLUMNS = [
-  { prop: 'index', label: '序号', width: 60 },
-  { prop: 'inspectItem', label: '检查项目', width: 225 },
+  { prop: 'index', label: '序号', width: 110 },
+  { prop: 'inspectItem', label: '检查项目', width: 200 },
   { prop: 'inspectStandard', label: '检查标准', width: 500 },
-  { prop: 'inspectMethod', label: '检查方法', width: 225 },
+  { prop: 'inspectMethod', label: '检查方法', width: 200 },
 ];
 export const MERGE_FIELDS = ['index', 'inspectItem', 'inspectMethod'];
 

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

@@ -1,14 +1,17 @@
-@use '@/styles/variables.scss' as *;
 .task-name--div {
-  @include flex-center;
+  display: flex;
   width: 100%;
   span {
-    flex: 1;
     text-align: left;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
+  .overdue-icon {
+    display: flex;
+    align-items: center;
+    flex: 1;
+  }
   img {
     width: 36px;
   }

src/views/disaster/disaster-precaution/src/utils/is-tooltip.ts

@@ -0,0 +1,14 @@
+/**
+ * 判断是否需要显示tooltip
+ */
+export const isToolTip = (overdue: boolean, name: string) => {
+  // 计算实际长度，中文算2个字符，英文和符号算1个字符
+  const realLength = name.split('').reduce((acc, char) => {
+    const charCode = char.charCodeAt(0);
+    // 中文范围：0x4E00-0x9FA5
+    return acc + (charCode >= 0x4e00 && charCode <= 0x9fa5 ? 2 : 1);
+  }, 0);
+  if (overdue && realLength > 18) return true;
+  if (!overdue && realLength > 24) return true;
+  return false;
+};

src/views/disaster/disaster-warning/src/components/ViewDefenseNoticeItem.vue

@@ -24,6 +24,7 @@
           <span>{{ defenseNoticeDetail?.pushTime ? '发布人：' : '创建人：' }}</span>
           <span class="info-content">
             {{ defenseNoticeDetail?.pushTime ? defenseNoticeDetail.pushName : defenseNoticeDetail?.realname }}
+            &nbsp;&nbsp;
             {{ defenseNoticeDetail?.pushTime }}
           </span>
         </p>
@@ -34,7 +35,10 @@
       <div v-html="defenseNoticeDetail?.content"></div>
     </section>
     <section class="attachment" v-if="defenseNoticeDetail?.attachmentListRes.length">
-      <span class="info-content">附件({{ defenseNoticeDetail?.attachmentListRes.length }})</span>
+      <span class="info-content" style="font-size: 14px"
+        >附件({{ defenseNoticeDetail?.attachmentListRes.length }})</span
+      >
+      &nbsp;
       <a @click="downloadAll">下载全部</a>
       <div class="attachment-list">
         <div
@@ -119,7 +123,7 @@
   .disaster {
     display: flex;
     gap: 370px;
-    margin-bottom: 8px;
+    margin-bottom: 16px;
   }
   .info-item {
     color: rgba($text-color, 0.85);
@@ -145,6 +149,7 @@
   .attachment {
     margin-top: 18px;
     a {
+      font-size: 14px;
       color: $primary-color;
       cursor: pointer;
     }
@@ -181,6 +186,7 @@
     &--footer {
       @include flex-center;
       justify-content: space-between;
+      font-size: 14px;
       .info {
         @include flex-center;
         gap: 2px;