灾害处置完成 缺少查看

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

@@ -46,11 +46,11 @@
             </div>
             <template v-else>
               <CollapseItem
-                ref="collapseItemRef"
                 v-for="item in collapseList"
                 :key="item.id"
                 :name="item.taskName"
-                :defaultOpen="item.id === collapseList[0].id"
+                :isActive="activeId === item.id"
+                @toggle="handleCollapseToggle(item.id)"
               >
                 <template #viewOperation>
                   <el-tooltip
@@ -89,68 +89,72 @@
                   </el-button>
                 </template>
                 <template #main-table>
-                  <el-button
-                    type="primary"
-                    :icon="Plus"
-                    class="main-table__button"
-                    @click="handleCreateReportTask(item.id, item.taskName)"
-                    >新增</el-button
-                  >
-                  <BasicTable :tableData="item.tableData[0].disasterReportTaskInfoList" :tableConfig="tableConfig">
-                    <template #status="scope">
-                      <div class="active-status--div">
-                        <div
-                          class="dot"
-                          :style="{ backgroundColor: ACTIVE_STATUS_COLOR[scope.row.status as ACTIVE_STATUS] }"
-                        />
-                        <span>{{ ACTIVE_STATUS_MAP[scope.row.status] }}</span>
-                      </div>
-                    </template>
-                    <template #taskStage="scope">
-                      <span>{{ getTaskStage(scope.row.taskStage) }}</span>
-                    </template>
-                    <template #reportPrincipals="scope">
-                      <p v-for="user in scope.row.reportPrincipalInfoList" :key="user.reportPrincipalId">
-                        {{ user.reportPrincipalName }}（{{ user.reportPrincipalStaffNo }}）
-                      </p>
-                    </template>
-                    <template #action="scope">
-                      <ActionButton
-                        text="编辑"
-                        v-if="disposalManagementPermissions && scope.row.status === ACTIVE_STATUS.NOT_EFFECTIVE"
-                        @click="handleEditReportTask(item.id, scope.row.id)"
-                      />
-                      <ActionButton
-                        text="发布"
-                        :popconfirm="{
-                          title: '确定发布吗？',
-                        }"
-                        @confirm="handlePublishReportTask(scope.row.id, item.id)"
-                        v-if="disposalManagementPermissions && scope.row.status === ACTIVE_STATUS.NOT_EFFECTIVE"
-                      />
-                      <ActionButton
-                        text="撤回"
-                        :popconfirm="{
-                          title: '确定撤回吗？',
-                        }"
-                        @confirm="handleWithdrawReportTask(scope.row.id, item.id)"
-                        v-if="
-                          disposalManagementPermissions &&
-                          (scope.row.taskStage === TASK_STAGE.TO_BE_REPORTED ||
-                            scope.row.taskStage === TASK_STAGE.OVERDUE)
-                        "
-                      />
-                      <ActionButton
-                        text="删除"
-                        :popconfirm="{
-                          title: '确定删除吗？',
-                        }"
-                        @confirm="handleDeleteReportTask(scope.row.id)"
-                        v-if="disposalManagementPermissions && scope.row.status === ACTIVE_STATUS.NOT_EFFECTIVE"
-                      />
-                      <ActionButton text="查看" v-if="scope.row.status === ACTIVE_STATUS.ACTIVE" />
-                    </template>
-                  </BasicTable>
+                  <div class="mian-table-container">
+                    <el-button
+                      type="primary"
+                      :icon="Plus"
+                      class="main-table__button"
+                      @click="handleCreateReportTask(item.id, item.taskName)"
+                      >新增</el-button
+                    >
+                    <BasicTable :tableData="item.tableData[0].disasterReportTaskInfoList" :tableConfig="tableConfig">
+                      <template #status="scope">
+                        <div class="active-status--div">
+                          <div
+                            class="dot"
+                            :style="{ backgroundColor: ACTIVE_STATUS_COLOR[scope.row.status as ACTIVE_STATUS] }"
+                          />
+                          <span>{{ ACTIVE_STATUS_MAP[scope.row.status] }}</span>
+                        </div>
+                      </template>
+                      <template #taskStage="scope">
+                        <span>{{ getTaskStage(scope.row.taskStage) }}</span>
+                      </template>
+                      <template #reportPrincipals="scope">
+                        <p v-for="user in scope.row.reportPrincipalInfoList" :key="user.reportPrincipalId">
+                          {{ user.reportPrincipalName }}（{{ user.reportPrincipalStaffNo }}）
+                        </p>
+                      </template>
+                      <template #action="scope">
+                        <div class="action-container--div">
+                          <ActionButton
+                            text="编辑"
+                            v-if="disposalManagementPermissions && scope.row.status === ACTIVE_STATUS.NOT_EFFECTIVE"
+                            @click="handleEditReportTask(item.id, scope.row.id)"
+                          />
+                          <ActionButton
+                            text="发布"
+                            :popconfirm="{
+                              title: '确定发布吗？',
+                            }"
+                            @confirm="handlePublishReportTask(scope.row.id, item.id)"
+                            v-if="disposalManagementPermissions && scope.row.status === ACTIVE_STATUS.NOT_EFFECTIVE"
+                          />
+                          <ActionButton
+                            text="撤回"
+                            :popconfirm="{
+                              title: '确定撤回吗？',
+                            }"
+                            @confirm="handleWithdrawReportTask(scope.row.id, item.id)"
+                            v-if="
+                              disposalManagementPermissions &&
+                              (scope.row.taskStage === TASK_STAGE.TO_BE_REPORTED ||
+                                scope.row.taskStage === TASK_STAGE.OVERDUE)
+                            "
+                          />
+                          <ActionButton
+                            text="删除"
+                            :popconfirm="{
+                              title: '确定删除吗？',
+                            }"
+                            @confirm="handleDeleteReportTask(scope.row.id)"
+                            v-if="disposalManagementPermissions && scope.row.status === ACTIVE_STATUS.NOT_EFFECTIVE"
+                          />
+                          <ActionButton text="查看" v-if="scope.row.status === ACTIVE_STATUS.ACTIVE" />
+                        </div>
+                      </template>
+                    </BasicTable>
+                  </div>
                 </template>
               </CollapseItem>
             </template>
@@ -179,7 +183,7 @@
   import CollapseItem from './src/components/CollapseItem.vue';
   import BasicTable from '@/components/BasicTable.vue';
   import { getAllDepartments } from '@/api/auth/dept';
-  import { onMounted, reactive, ref, nextTick } from 'vue';
+  import { onMounted, reactive, ref } from 'vue';
   import { formatDeptTree } from '@/views/disaster/utils/formatDeptTree';
   import type { DeptTreeItem } from '@/types/dept/type';
   import {
@@ -231,12 +235,13 @@
   const total = ref(0);
 
   const collapseLoading = ref(false);
-  const collapseItemRef = ref<InstanceType<typeof CollapseItem>[]>([]);
   const collapseList = ref<DisposalManagementCollapseListResponse<DisposalManagementTableResponse>[]>([]);
   const disposalManagementPermissions = ref(false);
 
   const { tableConfig } = useTableConfig(DISPOSAL_MANAGEMENT_TABLE_COLUMNS, DISPOSAL_MANAGEMENT_TABLE_OPTIONS, false);
 
+  const activeId = ref<number | null>(null);
+
   const handleSizeChange = async (size: number) => {
     pageSize.value = size;
     await getDisposalData();
@@ -322,6 +327,14 @@
     ElMessage.success('删除成功');
   };
 
+  const handleCollapseToggle = (itemId: number) => {
+    if (activeId.value === itemId) {
+      activeId.value = null;
+    } else {
+      activeId.value = itemId;
+    }
+  };
+
   const getDisposalData = async () => {
     collapseLoading.value = true;
     const res = await getDisasterControlCollapseData({
@@ -341,9 +354,12 @@
     taskIds.value = collapseList.value.map((item) => item.id);
     total.value = res.totalRow;
     collapseLoading.value = false;
-    nextTick(() => {
-      collapseItemRef.value[0]?.openFirstCollapseItem();
-    });
+
+    if (collapseList.value.length > 0) {
+      activeId.value = collapseList.value[0].id;
+    } else {
+      activeId.value = null;
+    }
   };
 
   const getDisposalTableData = async () => {

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

@@ -5,9 +5,7 @@
       <span class="disaster-precaution-container__title">{{ headerTitle }}</span>
     </header>
     <main class="disaster-precaution-container__main">
-      <section>
-        <component :is="dynamicComponent" :id="id" ref="dynamicComponentRef" />
-      </section>
+      <component :is="dynamicComponent" :id="id" ref="dynamicComponentRef" />
     </main>
     <footer class="disaster-precaution-container__footer" v-if="operate">
       <el-button @click="router.back()">取消</el-button>

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

@@ -5,9 +5,7 @@
       <span class="disaster-precaution-container__title">{{ headerTitle }}</span>
     </header>
     <main class="disaster-precaution-container__main">
-      <section>
-        <component :is="dynamicComponent" :id="id" ref="dynamicComponentRef" />
-      </section>
+      <component :is="dynamicComponent" :id="id" ref="dynamicComponentRef" />
     </main>
     <footer class="disaster-precaution-container__footer" v-if="operate">
       <el-button @click="router.back()">取消</el-button>

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

@@ -31,11 +31,11 @@
             </div>
             <template v-else>
               <CollapseItem
-                ref="collapseItemRef"
                 v-for="item in collapseList"
                 :key="item.id"
                 :name="item.taskName"
-                :defaultOpen="item.id === collapseList[0].id"
+                :isActive="activeId === item.id"
+                @toggle="handleCollapseToggle(item.id)"
               >
                 <template #viewOperation>
                   <el-tooltip
@@ -53,73 +53,78 @@
                   </el-tooltip>
                 </template>
                 <template #main-table>
-                  <BasicTable :tableData="item.tableData[0].disasterReportRecordDetailList" :tableConfig="tableConfig">
-                    <template #affectedArea="scope">
-                      <div class="affected-area-container">
-                        <span>{{ scope.row.buildingNo }}-{{ scope.row.floorNo }}-{{ scope.row.roomNo }}</span>
-                      </div>
-                    </template>
-                    <template #affectedItems="scope">
-                      <el-tooltip
-                        :content="scope.row.affectedItems"
-                        placement="top-start"
-                        effect="light"
-                        v-if="scope.row.affectedItems"
-                      >
-                        <div class="affected-items-container">
-                          <span>{{ scope.row.affectedItems }}</span>
+                  <div class="mian-table-container">
+                    <BasicTable
+                      :tableData="item.tableData[0].disasterReportRecordDetailList"
+                      :tableConfig="tableConfig"
+                    >
+                      <template #affectedArea="scope">
+                        <div class="affected-area-container">
+                          <span>{{ scope.row.buildingNo }}-{{ scope.row.floorNo }}-{{ scope.row.roomNo }}</span>
                         </div>
-                      </el-tooltip>
-                      <span v-else>--</span>
-                    </template>
-                    <template #responsibleDeptName="scope">
-                      <span v-if="scope.row.responsibleDeptName">{{ scope.row.responsibleDeptName }}</span>
-                      <span v-else>--</span>
-                    </template>
-                    <template #priority="scope">
-                      <span v-if="scope.row.priority">{{ getPriority(scope.row.priority) }}</span>
-                      <span v-else>--</span>
-                    </template>
-                    <template #fixStatus="scope">
-                      <span v-if="scope.row.fixStatus">{{ getfixStatus(scope.row.fixStatus) }}</span>
-                      <span v-else>--</span>
-                    </template>
-                    <template #action="scope">
-                      <div class="action-container" v-if="scope.row.fixStatus === FIX_STATUS.TO_BE_RECTIFIED">
-                        <ActionButton text="查看" />
-                        <ActionButton
-                          text="去整改"
-                          @click="
-                            handleRectification(
-                              scope.row.id,
-                              item.handleTaskId,
-                              scope.row.fixTaskId,
-                              item.tableData[0].disasterReportRecordDetailList,
-                            )
-                          "
-                        />
-                        <ActionButton
-                          text="添加整改人"
-                          v-if="scope.row.isFixPrincipal"
-                          @click="handleAddFixer(scope.row.id, scope.row.fixerList)"
-                        />
-                      </div>
-                      <div class="action-container" v-else>
-                        <ActionButton text="查看" />
-                        <ActionButton
-                          text="去整改"
-                          @click="
-                            handleRectification(
-                              scope.row.id,
-                              item.handleTaskId,
-                              scope.row.fixTaskId,
-                              item.tableData[0].disasterReportRecordDetailList,
-                            )
-                          "
-                        />
-                      </div>
-                    </template>
-                  </BasicTable>
+                      </template>
+                      <template #affectedItems="scope">
+                        <el-tooltip
+                          :content="scope.row.affectedItems"
+                          placement="top-start"
+                          effect="light"
+                          v-if="scope.row.affectedItems"
+                        >
+                          <div class="affected-items-container">
+                            <span>{{ scope.row.affectedItems }}</span>
+                          </div>
+                        </el-tooltip>
+                        <span v-else>--</span>
+                      </template>
+                      <template #responsibleDeptName="scope">
+                        <span v-if="scope.row.responsibleDeptName">{{ scope.row.responsibleDeptName }}</span>
+                        <span v-else>--</span>
+                      </template>
+                      <template #priority="scope">
+                        <span v-if="scope.row.priority">{{ getPriority(scope.row.priority) }}</span>
+                        <span v-else>--</span>
+                      </template>
+                      <template #fixStatus="scope">
+                        <span v-if="scope.row.fixStatus">{{ getfixStatus(scope.row.fixStatus) }}</span>
+                        <span v-else>--</span>
+                      </template>
+                      <template #action="scope">
+                        <div class="action-container" v-if="scope.row.fixStatus === FIX_STATUS.TO_BE_RECTIFIED">
+                          <ActionButton text="查看" />
+                          <ActionButton
+                            text="去整改"
+                            @click="
+                              handleRectification(
+                                scope.row.id,
+                                item.handleTaskId,
+                                scope.row.fixTaskId,
+                                item.tableData[0].disasterReportRecordDetailList,
+                              )
+                            "
+                          />
+                          <ActionButton
+                            text="添加整改人"
+                            v-if="scope.row.isFixPrincipal"
+                            @click="handleAddFixer(scope.row.id, scope.row.fixerList)"
+                          />
+                        </div>
+                        <div class="action-container" v-else>
+                          <ActionButton text="查看" />
+                          <ActionButton
+                            text="去整改"
+                            @click="
+                              handleRectification(
+                                scope.row.id,
+                                item.handleTaskId,
+                                scope.row.fixTaskId,
+                                item.tableData[0].disasterReportRecordDetailList,
+                              )
+                            "
+                          />
+                        </div>
+                      </template>
+                    </BasicTable>
+                  </div>
                 </template>
               </CollapseItem>
             </template>
@@ -154,7 +159,7 @@
   import CollapseItem from './src/components/CollapseItem.vue';
   import BasicTable from '@/components/BasicTable.vue';
   import InspectorSelect from '@/views/disaster/components/InspectorSelect.vue';
-  import { nextTick, onMounted, reactive, ref } from 'vue';
+  import { onMounted, reactive, ref } from 'vue';
   import { getReportTaskList, getLossRecordTableData, addFixer } from '@/api/disaster-control';
   import type { disasterReportTaskInfoListResponse } from '@/types/disaster-control';
   import { DEFAULT_PAGE_SIZE, DISASTER_CONTROL_PAGE_SIZE_CONFIG, FIX_STATUS } from './src/constant';
@@ -184,7 +189,6 @@
   const { id: userId } = useUserInfoHook();
 
   const { getPriority, getPriorityDict, priorityDice } = useDisasterControlHook();
-  const collapseItemRef = ref<InstanceType<typeof CollapseItem>[]>([]);
 
   const searchData = reactive({
     priority: null,
@@ -202,6 +206,7 @@
   const collapseLoading = ref(false);
   const collapseList = ref<DisposalManagementCollapseListResponse<LossRecordTableResponse>[]>([]);
 
+  const activeId = ref<number | null>(null);
   const { tableConfig } = useTableConfig(LOSS_RECORD_TABLE_COLUMNS, DISPOSAL_MANAGEMENT_TABLE_OPTIONS, false);
 
   const handleSizeChange = async (size: number) => {
@@ -234,6 +239,13 @@
     });
   };
 
+  const handleCollapseToggle = (itemId: number) => {
+    if (activeId.value === itemId) {
+      activeId.value = null;
+    } else {
+      activeId.value = itemId;
+    }
+  };
   const getDisposalData = async () => {
     collapseLoading.value = true;
     const res = await getReportTaskList({
@@ -253,9 +265,11 @@
     taskIds.value = collapseList.value.map((item) => item.handleTaskId);
     total.value = res.totalRow;
     collapseLoading.value = false;
-    nextTick(() => {
-      collapseItemRef.value[0]?.openFirstCollapseItem();
-    });
+    if (collapseList.value.length > 0) {
+      activeId.value = collapseList.value[0].id;
+    } else {
+      activeId.value = null;
+    }
   };
 
   const getDisposalTableData = async () => {

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

@@ -5,9 +5,7 @@
       <span class="disaster-precaution-container__title">{{ headerTitle }}</span>
     </header>
     <main class="disaster-precaution-container__main">
-      <section>
-        <component :is="dynamicComponent" ref="dynamicComponentRef" />
-      </section>
+      <component :is="dynamicComponent" ref="dynamicComponentRef" />
     </main>
     <footer class="disaster-precaution-container__footer" v-if="operate">
       <el-button @click="router.back()">取消</el-button>
@@ -37,8 +35,11 @@
     const fixedTitle = '损失记录';
     if (operate === 'create') {
       return `创建${fixedTitle}`;
+    } else if (operate === 'edit') {
+      return `编辑${fixedTitle}`;
+    } else {
+      return `查看${fixedTitle}`;
     }
-    return `查看${fixedTitle}`;
   });
   const dynamicComponent = computed(() => {
     if (operate === 'create') {

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

@@ -3,7 +3,7 @@
     <div class="collapse-item__header" @click="toggle">
       <div class="collapse-item__header--left">
         <el-icon class="collapse-item__icon">
-          <component :is="isOpen ? ArrowUp : ArrowDown" />
+          <component :is="isActive ? ArrowUp : ArrowDown" />
         </el-icon>
         <span>{{ name }}</span>
         <slot name="viewOperation" />
@@ -12,27 +12,25 @@
         <slot name="batchOperation" />
       </div>
     </div>
-    <div v-show="isOpen" class="collapse-item__main">
+    <div v-show="isActive" class="collapse-item__main">
       <slot name="main-table" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-  import { ref } from 'vue';
   import { ArrowUp, ArrowDown } from '@element-plus/icons-vue';
-  const props = defineProps<{ name: string; defaultOpen?: boolean }>();
-  const isOpen = ref(false);
+  
+  defineProps<{ 
+    name: string; 
+    isActive?: boolean;
+  }>();
+  
+  const emit = defineEmits(['toggle']);
+  
   const toggle = () => {
-    isOpen.value = !isOpen.value;
+    emit('toggle');
   };
-  const openFirstCollapseItem = () => {
-    if (!props.defaultOpen) return;
-    isOpen.value = true;
-  };
-  defineExpose({
-    openFirstCollapseItem,
-  });
 </script>
 
 <style lang="scss" scoped>

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

@@ -28,11 +28,11 @@
         </div>
         <template v-else>
           <CollapseItem
-            ref="collapseItemRef"
             v-for="item in collapseList"
             :key="item.id"
             :name="item.taskName"
-            :defaultOpen="item.id === collapseList[0].id"
+            :isActive="activeId === item.id"
+            @toggle="handleCollapseToggle(item.id)"
           >
             <template #viewOperation>
               <el-tooltip
@@ -50,76 +50,78 @@
               </el-tooltip>
             </template>
             <template #main-table>
-              <el-button
-                type="primary"
-                :icon="Plus"
-                class="main-table__button"
-                v-if="isOverdue(item.dueCompleteTime)"
-                @click="handleReport(item.id, item.taskName)"
-                >新增</el-button
-              >
-              <BasicTable :tableData="item.tableData[0]?.disasterReportRecordDetailList" :tableConfig="tableConfig">
-                <template #affectedArea="scope">
-                  <div class="affected-area-container">
-                    <span>{{ scope.row.buildingNo }}-{{ scope.row.floorNo }}-{{ scope.row.roomNo }}</span>
-                  </div>
-                </template>
-                <template #affectedItems="scope">
-                  <el-tooltip
-                    :content="scope.row.affectedItems"
-                    placement="top-start"
-                    effect="light"
-                    v-if="scope.row.isLoss"
-                  >
-                    <div class="affected-items-container">
-                      <span>{{ scope.row.affectedItems }}</span>
+              <div class="mian-table-container">
+                <el-button
+                  type="primary"
+                  :icon="Plus"
+                  class="main-table__button"
+                  v-if="isOverdue(item.dueCompleteTime)"
+                  @click="handleReport(item.id, item.taskName)"
+                  >新增</el-button
+                >
+                <BasicTable :tableData="item.tableData[0]?.disasterReportRecordDetailList" :tableConfig="tableConfig">
+                  <template #affectedArea="scope">
+                    <div class="affected-area-container">
+                      <span>{{ scope.row.buildingNo }}-{{ scope.row.floorNo }}-{{ scope.row.roomNo }}</span>
                     </div>
-                  </el-tooltip>
-                  <span v-else>无损失</span>
-                </template>
-                <template #responsibleDeptName="scope">
-                  <span v-if="scope.row.isLoss">{{ scope.row.responsibleDeptName }}</span>
-                  <span v-else>--</span>
-                </template>
-                <template #priority="scope">
-                  <span v-if="scope.row.isLoss">{{ getPriority(scope.row.priority) }}</span>
-                  <span v-else>--</span>
-                </template>
-                <template #fixStatus="scope">
-                  <div class="fix-status-container">
-                    <span v-if="scope.row.isLoss">{{ getfixStatus(scope.row.fixStatus) }}</span>
+                  </template>
+                  <template #affectedItems="scope">
+                    <el-tooltip
+                      :content="scope.row.affectedItems"
+                      placement="top-start"
+                      effect="light"
+                      v-if="scope.row.isLoss"
+                    >
+                      <div class="affected-items-container">
+                        <span>{{ scope.row.affectedItems }}</span>
+                      </div>
+                    </el-tooltip>
+                    <span v-else>无损失</span>
+                  </template>
+                  <template #responsibleDeptName="scope">
+                    <span v-if="scope.row.isLoss">{{ scope.row.responsibleDeptName }}</span>
+                    <span v-else>--</span>
+                  </template>
+                  <template #priority="scope">
+                    <span v-if="scope.row.isLoss">{{ getPriority(scope.row.priority) }}</span>
                     <span v-else>--</span>
-                  </div>
-                </template>
-                <template #action="scope">
-                  <div class="action-container" v-if="scope.row.isLoss">
-                    <ActionButton
-                      text="编辑"
-                      v-if="isOverdue(item.dueCompleteTime) && scope.row.fixStatus === FIX_STATUS.TO_BE_RECTIFIED"
-                      @click="handleEdit(scope.row.id, item.id)"
-                    />
-                    <ActionButton text="查看" />
-                    <ActionButton
-                      text="删除"
-                      v-if="scope.row.fixStatus === FIX_STATUS.TO_BE_RECTIFIED"
-                      @click="handleDelete(scope.row.id)"
-                    />
-                  </div>
-                  <div class="action-container" v-else>
-                    <ActionButton text="查看" v-if="scope.row.fixStatus === FIX_STATUS.TEMPORARY_CLOSED" />
-                    <ActionButton
-                      text="编辑"
-                      @click="handleEdit(scope.row.id, item.id)"
-                      v-if="isOverdue(item.dueCompleteTime) && scope.row.fixStatus !== FIX_STATUS.TEMPORARY_CLOSED"
-                    />
-                    <ActionButton
-                      text="删除"
-                      @click="handleDelete(scope.row.id)"
-                      v-if="scope.row.fixStatus !== FIX_STATUS.TEMPORARY_CLOSED"
-                    />
-                  </div>
-                </template>
-              </BasicTable>
+                  </template>
+                  <template #fixStatus="scope">
+                    <div class="fix-status-container">
+                      <span v-if="scope.row.isLoss">{{ getfixStatus(scope.row.fixStatus) }}</span>
+                      <span v-else>--</span>
+                    </div>
+                  </template>
+                  <template #action="scope">
+                    <div class="action-container" v-if="scope.row.isLoss">
+                      <ActionButton
+                        text="编辑"
+                        v-if="isOverdue(item.dueCompleteTime) && scope.row.fixStatus === FIX_STATUS.TO_BE_RECTIFIED"
+                        @click="handleEdit(scope.row.id, item.handleTaskId)"
+                      />
+                      <ActionButton text="查看" />
+                      <ActionButton
+                        text="删除"
+                        v-if="scope.row.fixStatus === FIX_STATUS.TO_BE_RECTIFIED"
+                        @click="handleDelete(scope.row.id)"
+                      />
+                    </div>
+                    <div class="action-container" v-else>
+                      <ActionButton text="查看" v-if="scope.row.fixStatus === FIX_STATUS.TEMPORARY_CLOSED" />
+                      <ActionButton
+                        text="编辑"
+                        @click="handleEdit(scope.row.id, item.id)"
+                        v-if="isOverdue(item.dueCompleteTime) && scope.row.fixStatus !== FIX_STATUS.TEMPORARY_CLOSED"
+                      />
+                      <ActionButton
+                        text="删除"
+                        @click="handleDelete(scope.row.id)"
+                        v-if="scope.row.fixStatus !== FIX_STATUS.TEMPORARY_CLOSED"
+                      />
+                    </div>
+                  </template>
+                </BasicTable>
+              </div>
             </template>
           </CollapseItem>
         </template>
@@ -142,7 +144,7 @@
 
 <script lang="ts" setup>
   import ViewDocument from '../svg/view-document.svg';
-  import { ref, reactive, onMounted, nextTick, onUnmounted } from 'vue';
+  import { ref, reactive, onMounted, onUnmounted } from 'vue';
   import { Plus } from '@element-plus/icons-vue';
   import Search from '@/views/disaster/components/Search.vue';
   import BasicTable from '@/components/BasicTable.vue';
@@ -174,7 +176,7 @@
   const pageSize = ref(DEFAULT_PAGE_SIZE);
   const total = ref(0);
   const collapseLoading = ref(false);
-  const collapseItemRef = ref<InstanceType<typeof CollapseItem>[]>([]);
+  const activeId = ref<number | null>(null);
   const { tableConfig } = useTableConfig(LOSS_RECORD_TABLE_COLUMNS, DISPOSAL_MANAGEMENT_TABLE_OPTIONS, false);
   const searchData = reactive({
     handleDeptIds: null,
@@ -193,6 +195,13 @@
 
   const taskIds = ref<number[]>([]);
   const collapseList = ref<DisposalManagementCollapseListResponse<LossRecordTableResponse>[]>([]);
+  const handleCollapseToggle = (itemId: number) => {
+    if (activeId.value === itemId) {
+      activeId.value = null;
+    } else {
+      activeId.value = itemId;
+    }
+  };
   const getDisposalData = async () => {
     collapseLoading.value = true;
     const res = await getReportTaskList({
@@ -216,9 +225,11 @@
     taskIds.value = res.records.map((item) => item.handleTaskId);
     total.value = res.totalRow;
     collapseLoading.value = false;
-    nextTick(() => {
-      collapseItemRef.value[0]?.openFirstCollapseItem();
-    });
+    if (collapseList.value.length > 0) {
+      activeId.value = collapseList.value[0].id;
+    } else {
+      activeId.value = null;
+    }
   };
 
   const getDisposalTableData = async () => {

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

@@ -12,7 +12,7 @@ import {
 // 通用搜索配置
 const BASIC_SEARCH_CONFIG = {
   FIX_STATUS: {
-    label: '整改进度',
+    label: '整改进度：',
     prop: 'fixStatus',
     component: 'ElSelect',
     selectOptions: FIX_STATUS_OPTIONS,
@@ -25,12 +25,12 @@ const BASIC_SEARCH_CONFIG = {
 // 灾害处理搜索配置
 export const DISPOSAL_MANAGEMENT_SEARCH_CONFIG: SearchConfig[] = [
   {
-    label: '上报单位',
+    label: '上报单位：',
     prop: 'reportDeptIds',
     slot: 'reportDeptIds',
   },
   {
-    label: '生效状态',
+    label: '生效状态：',
     prop: 'status',
     component: 'ElSelect',
     selectOptions: ACTIVE_STATUS_OPTIONS,
@@ -39,7 +39,7 @@ export const DISPOSAL_MANAGEMENT_SEARCH_CONFIG: SearchConfig[] = [
     },
   },
   {
-    label: '任务阶段',
+    label: '任务阶段：',
     prop: 'taskStage',
     component: 'ElSelect',
     selectOptions: TASK_STAGE_OPTIONS_DISPOSAL_MANAGEMENT,
@@ -52,7 +52,7 @@ export const DISPOSAL_MANAGEMENT_SEARCH_CONFIG: SearchConfig[] = [
 // 损失上报-上报任务搜索配置
 export const LOSS_REPORT_REPORT_TASK_SEARCH_CONFIG: SearchConfig[] = [
   {
-    label: '任务阶段',
+    label: '任务阶段：',
     prop: 'taskStage',
     component: 'ElSelect',
     selectOptions: TASK_STAGE_OPTIONS_REPORT_TASK,
@@ -65,7 +65,7 @@ export const LOSS_REPORT_REPORT_TASK_SEARCH_CONFIG: SearchConfig[] = [
 // 损失记录-损失记录搜索配置
 export const LOSS_RECORD_LOSS_RECORD_SEARCH_CONFIG: SearchConfig[] = [
   {
-    label: '整改部门',
+    label: '整改部门：',
     prop: 'handleDeptIds',
     slot: 'handleDeptIds',
   },
@@ -75,7 +75,7 @@ export const LOSS_RECORD_LOSS_RECORD_SEARCH_CONFIG: SearchConfig[] = [
 // 处置整改搜索配置
 export const DISPOSAL_RECTIFICATION_SEARCH_CONFIG: SearchConfig[] = [
   {
-    label: '优先级',
+    label: '优先级：',
     prop: 'priority',
     slot: 'priority',
   },

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

@@ -6,19 +6,16 @@ import type { TableColumnProps } from '@/types/basic-table';
 const TABLE_OPTIONS = {
   emptyText: '暂无数据',
   loading: true,
-  stripe: true,
 };
 
 // 处置管理表格配置
 export const DISPOSAL_MANAGEMENT_TABLE_OPTIONS = {
   ...TABLE_OPTIONS,
-  height: '40vh',
 };
 
 // 损失上报-上报任务表格配置
 export const LOSS_REPORT_REPORT_TASK_TABLE_OPTIONS = {
   ...TABLE_OPTIONS,
-  height: 'calc(65vh - 50px)',
 };
 
 // 基础表格列配置项
@@ -33,19 +30,18 @@ const BASIC_TABLE_COLUMNS = {
   DEPT_NAME: {
     label: '上报部门',
     prop: 'deptName',
-    align: 'center',
+    minWidth: '120px',
   },
   DUE_COMPLETE_TIME: {
     label: '应完成上报时间',
     prop: 'dueCompleteTime',
-    align: 'center',
-    width: '200px',
+    minWidth: '200px',
   },
   TASK_STAGE: {
     label: '任务阶段',
     prop: 'taskStage',
-    align: 'center',
     slot: 'taskStage',
+    minWidth: '120px',
   },
   ACTION: {
     prop: 'action',
@@ -65,7 +61,6 @@ export const DISPOSAL_MANAGEMENT_TABLE_COLUMNS: TableColumnProps[] = [
   {
     label: '任务状态',
     prop: 'status',
-    align: 'center',
     slot: 'status',
     width: '120px',
   },
@@ -73,9 +68,8 @@ export const DISPOSAL_MANAGEMENT_TABLE_COLUMNS: TableColumnProps[] = [
   {
     label: '上报责任人',
     prop: 'reportPrincipals',
-    align: 'center',
     slot: 'reportPrincipals',
-    width: '300px',
+    minWidth: '300px',
   },
   BASIC_TABLE_COLUMNS.ACTION,
 ];
@@ -86,7 +80,7 @@ export const LOSS_REPORT_REPORT_TASK_TABLE_COLUMNS: TableColumnProps[] = [
   {
     label: '任务名称',
     prop: 'taskName',
-    align: 'center',
+    minWidth: '120px',
   },
   BASIC_TABLE_COLUMNS.DEPT_NAME,
   BASIC_TABLE_COLUMNS.DUE_COMPLETE_TIME,
@@ -99,40 +93,37 @@ export const LOSS_RECORD_TABLE_COLUMNS: TableColumnProps[] = [
   {
     label: '受灾地点',
     prop: 'affectedArea',
-    align: 'center',
     slot: 'affectedArea',
-    width: '180px',
+    minWidth: '200px',
   },
   {
     label: '受灾物品',
     prop: 'affectedItems',
-    align: 'center',
     slot: 'affectedItems',
-    width: '200px',
+    minWidth: '200px',
   },
   {
     label: '上报时间',
     prop: 'updatedAt',
-    align: 'center',
-    width: '200px',
+    minWidth: '200px',
   },
   {
     label: '整改部门',
     prop: 'responsibleDeptName',
-    align: 'center',
     slot: 'responsibleDeptName',
+    minWidth: '120px'
   },
   {
     label: '优先级',
     prop: 'priority',
-    align: 'center',
     slot: 'priority',
+    minWidth: '120px'
   },
   {
     label: '整改进度',
     prop: 'fixStatus',
-    align: 'center',
     slot: 'fixStatus',
+    minWidth: '120px'
   },
   BASIC_TABLE_COLUMNS.ACTION,
 ];

src/views/disaster/disaster-control/src/style/collapse.scss

@@ -40,3 +40,9 @@
     opacity: 0.5;
   }
 }
+.mian-table-container{
+  width: 100%;
+  height: 100%;
+  padding: 10px;
+  background-color: $white-color;
+}