调整生产运营双周会排版

src/views/pms/operation-meeting/components/operation-meeting-content.vue

@@ -141,8 +141,15 @@ const meetingTableBlueColumns = new Set<keyof DetailItem>([
 
 const isSummaryMode = computed(() => props.mode === 'summary')
 const canEditDetails = computed(() => !isSummaryMode.value && props.type !== 'view')
-const detailPanelVisible = ref(false)
+const detailPanelVisible = ref(props.mode === 'summary')
 const workloadDetailVisible = ref(false)
+const meetingHeaderVisible = computed(() => detailPanelVisible.value)
+
+watch(isSummaryMode, (summaryMode) => {
+  if (summaryMode) {
+    detailPanelVisible.value = true
+  }
+})
 
 const activeMeetings = computed<OperationMeetingFormItem[]>(() => {
   if (props.meetings.length) return props.meetings
@@ -715,168 +722,172 @@ const getMeetingTableCellClassName = ({ column }: MeetingTableCellStyleProps) =>
 
 <template>
   <section class="p-2 bg-white border-solid border-1 border-gray-200/90 rounded-xl">
-    <div class="meeting-section__top">
-      <h2 class="meeting-section__title">生产运营双周例会汇报</h2>
-
-      <div
-        :class="[
-          'meeting-section__grid',
-          { 'meeting-section__grid--company-only': !showMeetingMetaFields }
-        ]">
-        <el-form-item
-          v-if="showMeetingMetaFields"
-          label="会议期次"
-          label-position="left"
-          prop="meetingSeries"
-          class="mb-0! min-w-0">
-          <el-input-number
-            v-if="isSummaryMode"
-            :model-value="summaryMeetingMeta.meetingSeries"
-            class="w-full!"
-            placeholder="暂无会议期次"
-            disabled
-            :controls="false" />
-          <el-input-number
-            v-else
-            v-model="meetingSeriesModel"
-            class="w-full!"
-            placeholder="请输入会议期次"
-            :disabled="type === 'view'"
-            :controls="false"
-            :min="1"
-            :step="1"
-            :precision="0" />
-        </el-form-item>
-
-        <el-form-item label="专业公司" label-position="left" class="mb-0! min-w-0">
-          <el-select
-            v-if="isSummaryMode"
-            v-model="companyFilterModel"
-            class="w-full!"
-            placeholder="全部公司"
-            clearable
-            filterable>
-            <el-option
-              v-for="item in companyOptions"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value" />
-          </el-select>
-          <el-input
-            v-else
-            :model-value="companyDisplayName"
-            class="w-full!"
-            placeholder="新建保存后系统自动填充"
-            disabled />
-          <div v-if="!isSummaryMode && type === 'create'" class="absolute text-xs text-gray top-8">
-            新建保存后由系统自动填充。
-          </div>
-        </el-form-item>
-
-        <el-form-item
-          v-if="showMeetingMetaFields"
-          label="会议日期"
-          label-position="left"
-          prop="meetingDate"
-          class="mb-0! min-w-0">
-          <el-date-picker
-            v-if="isSummaryMode"
-            :model-value="summaryMeetingMeta.meetingDate"
-            type="date"
-            placeholder="暂无会议日期"
-            disabled
-            class="w-full!" />
-          <el-date-picker
-            v-else
-            v-model="meetingDateModel"
-            type="date"
-            placeholder="请选择会议日期"
-            :disabled="type === 'view'"
-            class="w-full!" />
-        </el-form-item>
-      </div>
-    </div>
+    <div v-show="meetingHeaderVisible">
+      <div class="meeting-section__top">
+        <h2 class="meeting-section__title">生产运营双周例会汇报</h2>
 
-    <section class="meeting-summary-strip">
-      <div class="meeting-summary-strip__title">
-        <span>{{ isSummaryMode ? currentSummaryScopeName : '公司整体' }}</span>
-        <small>经营数据汇总</small>
-      </div>
-      <div class="meeting-summary-strip__grid">
         <div
-          v-for="item in detailSummaryCards"
-          :key="item.label"
           :class="[
-            'meeting-summary-strip__item',
-            `meeting-summary-strip__item--${item.tone}`,
-            { 'meeting-summary-strip__item--no-compare': !item.compare }
+            'meeting-section__grid',
+            { 'meeting-section__grid--company-only': !showMeetingMetaFields }
           ]">
-          <div :class="item.icon + ' size-5 icon'"></div>
-          <span>{{ item.label }}</span>
-          <strong>{{ item.value }}<em>万元</em></strong>
-          <small
-            v-if="item.compare"
-            :class="[
-              'meeting-summary-strip__compare',
-              `meeting-summary-strip__compare--${item.compare.trend}`
-            ]">
-            <i :class="[item.compare.icon, 'meeting-summary-strip__compare-icon']"></i>
-            环比 {{ item.compare.value }}
-          </small>
+          <el-form-item
+            v-if="showMeetingMetaFields"
+            label="会议期次"
+            label-position="left"
+            prop="meetingSeries"
+            class="mb-0! min-w-0">
+            <el-input-number
+              v-if="isSummaryMode"
+              :model-value="summaryMeetingMeta.meetingSeries"
+              class="w-full!"
+              placeholder="暂无会议期次"
+              disabled
+              :controls="false" />
+            <el-input-number
+              v-else
+              v-model="meetingSeriesModel"
+              class="w-full!"
+              placeholder="请输入会议期次"
+              :disabled="type === 'view'"
+              :controls="false"
+              :min="1"
+              :step="1"
+              :precision="0" />
+          </el-form-item>
+
+          <el-form-item label="专业公司" label-position="left" class="mb-0! min-w-0">
+            <el-select
+              v-if="isSummaryMode"
+              v-model="companyFilterModel"
+              class="w-full!"
+              placeholder="全部公司"
+              clearable
+              filterable>
+              <el-option
+                v-for="item in companyOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value" />
+            </el-select>
+            <el-input
+              v-else
+              :model-value="companyDisplayName"
+              class="w-full!"
+              placeholder="新建保存后系统自动填充"
+              disabled />
+            <div
+              v-if="!isSummaryMode && type === 'create'"
+              class="absolute text-xs text-gray top-8">
+              新建保存后由系统自动填充。
+            </div>
+          </el-form-item>
+
+          <el-form-item
+            v-if="showMeetingMetaFields"
+            label="会议日期"
+            label-position="left"
+            prop="meetingDate"
+            class="mb-0! min-w-0">
+            <el-date-picker
+              v-if="isSummaryMode"
+              :model-value="summaryMeetingMeta.meetingDate"
+              type="date"
+              placeholder="暂无会议日期"
+              disabled
+              class="w-full!" />
+            <el-date-picker
+              v-else
+              v-model="meetingDateModel"
+              type="date"
+              placeholder="请选择会议日期"
+              :disabled="type === 'view'"
+              class="w-full!" />
+          </el-form-item>
         </div>
       </div>
-    </section>
 
-    <section v-if="showSummaryWorkload" class="meeting-workload-strip">
-      <div class="meeting-workload-strip__title">
-        <span>{{ workloadScopeName }}</span>
-        <small>工作量完成情况</small>
-        <el-button
-          class="meeting-workload-strip__detail"
-          link
-          size="small"
-          type="primary"
-          @click="workloadDetailVisible = true">
-          查看详情
-        </el-button>
-      </div>
-      <div
-        :class="[
-          'meeting-workload-strip__content',
-          { 'meeting-workload-strip__content--split': splitSummaryWorkload }
-        ]">
-        <div class="meeting-workload-strip__grid">
+      <section class="meeting-summary-strip">
+        <div class="meeting-summary-strip__title">
+          <span>{{ isSummaryMode ? currentSummaryScopeName : '公司整体' }}</span>
+          <small>经营数据汇总</small>
+        </div>
+        <div class="meeting-summary-strip__grid">
           <div
-            v-for="(item, index) in displayedSummaryWorkloadProperties"
-            :key="item.identifier"
+            v-for="item in detailSummaryCards"
+            :key="item.label"
             :class="[
-              'meeting-workload-strip__item',
-              `meeting-workload-strip__item--${getSummaryWorkloadTone(item, index)}`
+              'meeting-summary-strip__item',
+              `meeting-summary-strip__item--${item.tone}`,
+              { 'meeting-summary-strip__item--no-compare': !item.compare }
             ]">
-            <div :class="[getSummaryWorkloadIcon(item), 'size-5 icon']"></div>
-            <span>{{ item.name }}</span>
-            <strong>{{ formatWorkloadPropertyValue(item) }}</strong>
+            <div :class="item.icon + ' size-5 icon'"></div>
+            <span>{{ item.label }}</span>
+            <strong>{{ item.value }}<em>万元</em></strong>
+            <small
+              v-if="item.compare"
+              :class="[
+                'meeting-summary-strip__compare',
+                `meeting-summary-strip__compare--${item.compare.trend}`
+              ]">
+              <i :class="[item.compare.icon, 'meeting-summary-strip__compare-icon']"></i>
+              环比 {{ item.compare.value }}
+            </small>
           </div>
         </div>
-        <div v-if="splitSummaryWorkload" class="meeting-workload-strip__side">
-          <div
-            v-for="(item, index) in sideSummaryWorkloadProperties"
-            :key="item.identifier"
-            :class="[
-              'meeting-workload-strip__item',
-              'meeting-workload-strip__item--side',
-              `meeting-workload-strip__item--${getSummaryWorkloadTone(
-                item,
-                index + primarySummaryWorkloadProperties.length
-              )}`
-            ]">
-            <div :class="[getSummaryWorkloadIcon(item), 'size-5 icon']"></div>
-            <span>{{ item.name }}</span>
-            <strong>{{ formatWorkloadPropertyValue(item) }}</strong>
+      </section>
+
+      <section v-if="showSummaryWorkload" class="meeting-workload-strip">
+        <div class="meeting-workload-strip__title">
+          <span>{{ workloadScopeName }}</span>
+          <small>工作量完成情况</small>
+          <el-button
+            class="meeting-workload-strip__detail"
+            link
+            size="small"
+            type="primary"
+            @click="workloadDetailVisible = true">
+            查看详情
+          </el-button>
+        </div>
+        <div
+          :class="[
+            'meeting-workload-strip__content',
+            { 'meeting-workload-strip__content--split': splitSummaryWorkload }
+          ]">
+          <div class="meeting-workload-strip__grid">
+            <div
+              v-for="(item, index) in displayedSummaryWorkloadProperties"
+              :key="item.identifier"
+              :class="[
+                'meeting-workload-strip__item',
+                `meeting-workload-strip__item--${getSummaryWorkloadTone(item, index)}`
+              ]">
+              <div :class="[getSummaryWorkloadIcon(item), 'size-5 icon']"></div>
+              <span>{{ item.name }}</span>
+              <strong>{{ formatWorkloadPropertyValue(item) }}</strong>
+            </div>
+          </div>
+          <div v-if="splitSummaryWorkload" class="meeting-workload-strip__side">
+            <div
+              v-for="(item, index) in sideSummaryWorkloadProperties"
+              :key="item.identifier"
+              :class="[
+                'meeting-workload-strip__item',
+                'meeting-workload-strip__item--side',
+                `meeting-workload-strip__item--${getSummaryWorkloadTone(
+                  item,
+                  index + primarySummaryWorkloadProperties.length
+                )}`
+              ]">
+              <div :class="[getSummaryWorkloadIcon(item), 'size-5 icon']"></div>
+              <span>{{ item.name }}</span>
+              <strong>{{ formatWorkloadPropertyValue(item) }}</strong>
+            </div>
           </div>
         </div>
-      </div>
-    </section>
+      </section>
+    </div>
 
     <el-dialog
       v-model="workloadDetailVisible"
@@ -903,10 +914,13 @@ const getMeetingTableCellClassName = ({ column }: MeetingTableCellStyleProps) =>
       </div>
     </el-dialog>
 
-    <section class="meeting-detail-panel">
+    <section
+      :class="[
+        'meeting-detail-panel',
+        { 'meeting-detail-panel--collapsed': !meetingHeaderVisible }
+      ]">
       <el-button
-        v-if="!isSummaryMode"
-        class="mb-2"
+        :class="['meeting-detail-toggle', { 'mb-2': meetingHeaderVisible }]"
         size="default"
         link
         @click="() => (detailPanelVisible = !detailPanelVisible)">
@@ -919,9 +933,7 @@ const getMeetingTableCellClassName = ({ column }: MeetingTableCellStyleProps) =>
           <!-- {{ visible ? '收起' : '展开' }} -->
         </div>
       </el-button>
-      <div
-        v-show="isSummaryMode || detailPanelVisible"
-        class="flex items-center justify-between gap-4 mb-4">
+      <div v-if="meetingHeaderVisible" class="flex items-center justify-between gap-4 mb-4">
         <h3 class="text-lg font-bold m-0">会议明细</h3>
         <el-tag v-if="isSummaryMode" size="small" effect="plain">
           共 {{ displayDetails.length }} 项
@@ -936,7 +948,6 @@ const getMeetingTableCellClassName = ({ column }: MeetingTableCellStyleProps) =>
           class="meeting-table"
           :data="displayDetails"
           :loading="loading"
-          :max-height="660"
           align="left"
           :show-overflow-tooltip="false"
           :cell-style="getMeetingTableCellStyle"
@@ -1490,6 +1501,18 @@ const getMeetingTableCellClassName = ({ column }: MeetingTableCellStyleProps) =>
   border-top: 1px solid var(--el-border-color-lighter);
 }
 
+.meeting-detail-panel--collapsed {
+  padding-top: 0;
+  margin-top: 0;
+  border-top: 0;
+}
+
+.meeting-detail-toggle {
+  display: flex;
+  align-items: center;
+  min-height: 28px;
+}
+
 .meeting-detail-toggle__icon {
   transition: transform var(--el-transition-duration) ease;
 }
@@ -1505,9 +1528,35 @@ const getMeetingTableCellClassName = ({ column }: MeetingTableCellStyleProps) =>
   --zm-table-row-font-weight: 800;
   --zm-table-header-text-color: #333;
   --zm-table-border-color: #cbd5e1;
+  --zm-table-radius: 0;
   --zm-table-header-border-color: #c2ccda;
   --zm-table-row-border-color: #d4dce8;
 
+  overflow: visible;
+
+  :deep(.el-table__inner-wrapper) {
+    overflow: visible;
+  }
+
+  :deep(.el-table__body-wrapper),
+  :deep(.el-scrollbar),
+  :deep(.el-scrollbar__wrap) {
+    overflow: visible;
+  }
+
+  :deep(.el-scrollbar__bar.is-horizontal) {
+    display: block;
+  }
+
+  :deep(.el-table__header-wrapper),
+  :deep(.el-table__fixed-header-wrapper) {
+    position: sticky !important;
+    top: -20px;
+    z-index: 20;
+    width: 100%;
+    background: #fff;
+  }
+
   :deep(.header-wrapper) {
     height: 20px;
     justify-content: center !important;