会议记录调整

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

@@ -191,72 +191,90 @@ const getMeetingTableCellStyle: any = ({
 
   return undefined
 }
+
+const visible = ref(false)
 </script>
 
 <template>
   <section class="py-2.5 px-4 bg-white border-solid border-1 border-gray-200/90 rounded-xl mb-4">
-    <div class="meeting-section__grid">
-      <el-form-item
-        label="会议期次"
-        label-position="left"
-        prop="meetingSeries"
-        class="mb-0! min-w-0"
-      >
-        <el-input-number
-          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-input
-          :model-value="companyDisplayName"
-          class="w-full!"
-          placeholder="新建保存后系统自动填充"
-          disabled
-        />
-        <div v-if="type === 'create'" class="absolute text-xs text-gray top-8">
-          新建保存后由系统自动填充。
-        </div>
-      </el-form-item>
-
-      <el-form-item label="会议日期" label-position="left" prop="meetingDate" class="mb-0! min-w-0">
-        <el-date-picker
-          v-model="meetingDateModel"
-          type="date"
-          placeholder="请选择会议日期"
-          :disabled="type === 'view'"
-          class="w-full!"
-        />
-      </el-form-item>
-
-      <section class="meeting-summary-strip meeting-section__grid-full">
-        <div class="meeting-summary-strip__title">
-          <span>公司整体</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}`]"
-          >
-            <span>{{ item.label }}</span>
-            <strong>{{ item.value }}<em>万元</em></strong>
+    <div class="meeting-section__top">
+      <h2 class="meeting-section__title">生产运营双周例会汇报</h2>
+
+      <div class="meeting-section__grid">
+        <el-form-item
+          label="会议期次"
+          label-position="left"
+          prop="meetingSeries"
+          class="mb-0! min-w-0"
+        >
+          <el-input-number
+            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-input
+            :model-value="companyDisplayName"
+            class="w-full!"
+            placeholder="新建保存后系统自动填充"
+            disabled
+          />
+          <div v-if="type === 'create'" class="absolute text-xs text-gray top-8">
+            新建保存后由系统自动填充。
           </div>
-        </div>
-      </section>
+        </el-form-item>
+
+        <el-form-item
+          label="会议日期"
+          label-position="left"
+          prop="meetingDate"
+          class="mb-0! min-w-0"
+        >
+          <el-date-picker
+            v-model="meetingDateModel"
+            type="date"
+            placeholder="请选择会议日期"
+            :disabled="type === 'view'"
+            class="w-full!"
+          />
+        </el-form-item>
+      </div>
     </div>
+
+    <section class="meeting-summary-strip">
+      <div class="meeting-summary-strip__title">
+        <span>公司整体</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}`]"
+        >
+          <div class="i-mingcute:currency-cny-2-fill size-4 icon"></div>
+          <span>{{ item.label }}</span>
+          <strong>{{ item.value }}<em>万元</em></strong>
+        </div>
+      </div>
+    </section>
   </section>
 
-  <section class="p-6 bg-white border-solid border-1 border-gray-200/90 rounded-xl">
-    <div class="flex items-center justify-between gap-4 mb-4">
+  <section class="p-2 bg-white border-solid border-1 border-gray-200/90 rounded-xl">
+    <el-button class="mb-2" size="default" link @click="() => (visible = !visible)">
+      <div class="flex items-center gap-1">
+        <div class="i-lucide:chevron-right size-4"></div>
+        <!-- {{ visible ? '收起' : '展开' }} -->
+      </div>
+    </el-button>
+    <div v-show="visible" class="flex items-center justify-between gap-4 mb-4">
       <h3 class="text-lg font-bold m-0">会议明细</h3>
       <el-button v-if="type !== 'view'" type="primary" @click="emits('add-detail')">
         <Icon icon="ep:plus" class="mr-5px" />
@@ -273,26 +291,26 @@ const getMeetingTableCellStyle: any = ({
         :show-overflow-tooltip="false"
         :cell-style="getMeetingTableCellStyle"
       >
-        <zm-table-column width="156" align="center" label="项目名称" prop="projectName" />
-        <zm-table-column label="本期生产运行情况">
-          <zm-table-column width="220" label="计划工作量" prop="plannedWorkload" />
-          <zm-table-column width="220" label="实际完成" prop="actualCompletion" />
+        <zm-table-column min-width="8%" align="center" label="项目名称" prop="projectName" />
+        <zm-table-column min-width="27%" label="本期生产运行情况">
+          <zm-table-column min-width="10%" label="计划工作量" prop="plannedWorkload" />
+          <zm-table-column min-width="10%" label="实际完成" prop="actualCompletion" />
           <zm-table-column
-            width="120"
+            min-width="7%"
             label="设备利用率"
             prop="equipmentUtilizationRate"
             :formatter="(row) => `${row.equipmentUtilizationRate}%`"
           />
         </zm-table-column>
-        <zm-table-column label="生产管理情况及重点工作	">
-          <zm-table-column label="重点工作及完成情况" prop="keyWorkCompletion" />
-          <zm-table-column width="300" label="存在问题及分析" prop="problemsAnalysis" />
+        <zm-table-column min-width="31%" label="生产管理情况及重点工作	">
+          <zm-table-column min-width="19%" label="重点工作及完成情况" prop="keyWorkCompletion" />
+          <zm-table-column min-width="12%" label="存在问题及分析" prop="problemsAnalysis" />
         </zm-table-column>
-        <zm-table-column label="下期工作计划		">
-          <zm-table-column width="240" label="计划工作量" prop="nextPlannedWorkload" />
-          <zm-table-column label="重点工作事项" prop="priorityTasks" />
+        <zm-table-column min-width="29%" label="下期工作计划		">
+          <zm-table-column min-width="10%" label="计划工作量" prop="nextPlannedWorkload" />
+          <zm-table-column min-width="19%" label="重点工作事项" prop="priorityTasks" />
         </zm-table-column>
-        <zm-table-column label="操作" width="140" align="center" fixed="right">
+        <zm-table-column label="操作" min-width="5%" align="center" fixed="right">
           <template #default="{ row, $index }">
             <div class="meeting-table__actions">
               <el-button
@@ -391,8 +409,28 @@ const getMeetingTableCellStyle: any = ({
   gap: 18px 20px;
 }
 
-.meeting-section__grid-full {
-  grid-column: 1 / -1;
+.meeting-section__top {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: 240px;
+  align-items: start;
+  margin-bottom: 18px;
+}
+
+.meeting-section__title {
+  padding-top: 4px;
+  margin: 0;
+  font-size: 18px;
+  font-weight: 800;
+  line-height: 32px;
+  color: #1f2937;
+  white-space: nowrap;
+  transform: translateY(-4px);
+}
+
+:deep(.el-form-item__label) {
+  font-weight: 800;
+  color: #1f2937;
 }
 
 .meeting-summary-strip {
@@ -440,7 +478,7 @@ const getMeetingTableCellStyle: any = ({
   min-width: 0;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
+  gap: 4px;
   padding: 4px 6px;
   background: rgb(255 255 255 / 72%);
   border: 1px solid rgb(219 234 254 / 70%);
@@ -483,15 +521,18 @@ const getMeetingTableCellStyle: any = ({
   }
 }
 
-.meeting-summary-strip__item--revenue strong {
+.meeting-summary-strip__item--revenue strong,
+.meeting-summary-strip__item--revenue .icon {
   color: #1b71f6;
 }
 
-.meeting-summary-strip__item--account strong {
+.meeting-summary-strip__item--account strong,
+.meeting-summary-strip__item--account .icon {
   color: #f59e0b;
 }
 
-.meeting-summary-strip__item--payment strong {
+.meeting-summary-strip__item--payment strong,
+.meeting-summary-strip__item--payment .icon {
   color: #10b981;
 }
 
@@ -507,9 +548,13 @@ const getMeetingTableCellStyle: any = ({
 
   :deep(.header-wrapper) {
     height: 20px;
+    justify-content: center !important;
+    text-align: center;
 
     .truncate {
+      width: 100%;
       height: 20px;
+      text-align: center;
     }
   }
 }
@@ -625,6 +670,17 @@ const getMeetingTableCellStyle: any = ({
 }
 
 @media (width <= 960px) {
+  .meeting-section__top {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  .meeting-section__title {
+    padding-top: 0;
+    line-height: 24px;
+    transform: translateY(0);
+  }
+
   .meeting-section__grid {
     grid-template-columns: 1fr;
   }