优化

src/service/CareProgress.vue

@@ -18,7 +18,7 @@ import VChart from 'vue-echarts';
 
 use([CanvasRenderer, LineChart, MarkLineComponent, GridComponent, VisualMapComponent, TitleComponent, TooltipComponent, LegendComponent]);
 
-const type=ref('careProgress')
+const type = ref('careProgress');
 type FollowModel = Partial<ConditioningRecordListModel>;
 const props = defineProps<{
   data: FollowModel;
@@ -34,12 +34,21 @@ const { data: patient } = useWatcher(() => patientMethod(props.data.patientId!),
   },
 });
 
-
 const careProcessList = ref<OpenConditioningSchemeModel>();
 async function getCareProgress() {
   const res = await getConditioningProcessMethod(Number(props.data.id));
   careProcessList.value = res as OpenConditioningSchemeModel;
+  console.log(careProcessList.value?.items, 'careProcessList');
 }
+const isShowDelivery = ref<boolean>(false);
+// 监听 displayTableData 的变化
+watch(careProcessList, (newValue) => {
+  if (newValue?.items) {
+    isShowDelivery.value = newValue.items.some((item) => {
+      return item.conditioningProgramDetail?.isDelivery === 'Y';
+    });
+  }
+});
 onMounted(async () => {
   if (props.data.id) {
     await getCareProgress();
@@ -133,18 +142,22 @@ const option = ref({
 });
 
 // 监听数据变化更新图表
-watch(() => careProcessList.value?.patientConditioningScores, (newScores) => {
-  if (newScores && newScores.length > 0) {
-    option.value.xAxis.data = newScores.map(item => item.time4);
-    option.value.series[0].data = newScores.map(item => item.score);
-    option.value.series[0].markPoint.data = newScores.map((item) => ({
-      coord: [item.time4, item.score],
-      value: item.score,
-      name: item.time4,
-      label: { show: true, formatter: item.time4 },
-    }));
-  }
-}, { immediate: true });
+watch(
+  () => careProcessList.value?.patientConditioningScores,
+  (newScores) => {
+    if (newScores && newScores.length > 0) {
+      option.value.xAxis.data = newScores.map((item) => item.time4);
+      option.value.series[0].data = newScores.map((item) => item.score);
+      option.value.series[0].markPoint.data = newScores.map((item) => ({
+        coord: [item.time4, item.score],
+        value: item.score,
+        name: item.time4,
+        label: { show: true, formatter: item.time4 },
+      }));
+    }
+  },
+  { immediate: true }
+);
 
 type SymptomItemVo = Record<
   `symptom-${HealthReportSymptomItemVo['id']}`,
@@ -163,16 +176,20 @@ interface Model extends SymptomItemVo {
 }
 // 查看健康评估
 function open(row: Model) {
-  // console.log(row, '查看健康评估');
   const component = defineAsyncComponent(() => import('@/components/ReportPreview.vue'));
   const id = `drawer:report:preview`;
-  const onDestroy = () => { VxeUI.drawer.close(id); };
+  const onDestroy = () => {
+    VxeUI.drawer.close(id);
+  };
   onDestroy();
   VxeUI.drawer.open({
     id,
-    mask: true, lockView: false, padding: false,
+    mask: true,
+    lockView: false,
+    padding: false,
     width: window.innerWidth - 256,
-    escClosable: true, maskClosable: true,
+    escClosable: true,
+    maskClosable: true,
     title: `健康分析报告`,
     slots: {
       default() {
@@ -204,29 +221,30 @@ function open(row: Model) {
                     ? '已完结'
                     : ''
       }}</span>
-      <span
-         v-if="careProcessList?.patientName"
-         >姓名：<b>{{ careProcessList?.patientName }}</b></span
+      <span v-if="careProcessList?.patientName"
+        >姓名：<b>{{ careProcessList?.patientName }}</b></span
       >
       <span v-if="careProcessList?.diagnosis">疾病名称：{{ careProcessList?.diagnosis }}</span>
       <span v-if="careProcessList?.symptom">证型：{{ careProcessList?.symptom }}</span>
       <span v-if="careProcessList?.createBy">开具医生：{{ careProcessList?.createBy }}</span>
-      <span v-if="careProcessList?.estimatedStartDate && careProcessList?.estimatedEndDate">调养周期：{{ careProcessList?.estimatedStartDate }} ~ {{ careProcessList?.estimatedEndDate }}</span>
+      <span v-if="careProcessList?.estimatedStartDate && careProcessList?.estimatedEndDate"
+        >调养周期：{{ careProcessList?.estimatedStartDate }} ~ {{ careProcessList?.estimatedEndDate }}</span
+      >
     </div>
-    <div v-if="careProcessList?.isDelivery === 'Y'" class="delivery-info">
-      <a-checkbox checked disabled style="color: #52c41a; margin-right: 8px" />
-      <span>配送</span>
+    <div v-if="isShowDelivery" class="delivery-info" style="margin-left: 75px">
+      <a-checkbox checked style="color: #52c41a; margin-right: 8px" />
+      <span style="margin-right: 15px">配送</span>
       <span>地址：{{ careProcessList?.provinceName }}{{ careProcessList?.cityName }}{{ careProcessList?.areaName }}{{ careProcessList?.detailAddress }}</span>
       <span style="margin-left: 16px">电话：{{ careProcessList?.phone }}</span>
     </div>
     <!-- 线上项目 -->
-    <div v-for="item in careProcessList?.items" :key="item.id">
+    <div v-for="item in careProcessList?.items" :key="item.id" class="project-card">
       <div class="project-section" v-if="item?.patientConditioningOfflines">
         <div class="project-title">
           <span style="font-size: 14px; font-weight: bold">◇ {{ item?.conditioningProgramDetail?.name }}</span>
-          <span class="stat">数量：{{ item.totalMeasure }}</span>
-          <span class="stat">还剩：{{ item?.remainCount }}</span>
-          <span class="stat">已核销：{{ item?.finishCount }}</span>
+          <span class="stat">数量：{{ item.totalMeasure }} {{ item?.conditioningProgramDetail?.cpFixedPricingRule?.pricingUnit || '次' }}</span>
+          <span class="stat">还剩：{{ item?.remainCount }} {{ item?.conditioningProgramDetail?.cpFixedPricingRule?.pricingUnit || '次' }}</span>
+          <span class="stat">已核销：{{ item?.finishCount }} {{ item?.conditioningProgramDetail?.cpFixedPricingRule?.pricingUnit || '次' }}</span>
         </div>
         <vxe-table :data="item?.patientConditioningOfflines" border>
           <vxe-column type="seq" title="序号" width="80" />
@@ -238,7 +256,7 @@ function open(row: Model) {
         <div class="mt-3">
           <div class="mb-1">
             预定频率：每 {{ item.frequencyType }} 天 {{ item.frequencyMeasure }}
-            {{ item?.conditioningProgramDetail?.cpFixedPricingRule?.pricingUnit || '次'}}
+            {{ item?.conditioningProgramDetail?.cpFixedPricingRule?.pricingUnit || '次' }}
           </div>
           <div v-if="item.remark">操作指南：{{ item.remark }}</div>
         </div>
@@ -246,22 +264,22 @@ function open(row: Model) {
       <!-- 线上 -->
       <div class="yuanqi-tea" v-if="item?.patientConditioningOnlines">
         <div class="mb-2">
-          <span class="mr-10">◇ {{ item?.conditioningProgramDetail?.name }}</span>
-          <span>数量：{{ item.totalMeasure }}</span>
+          <span class="mr-10" style="font-size: 14px; font-weight: bold; color: black">◇ {{ item?.conditioningProgramDetail?.name }}</span>
+          <span>数量：{{ item.totalMeasure }} {{ item?.conditioningProgramDetail?.cpFixedPricingRule?.pricingUnit || '次' }}</span>
         </div>
         <div class="mb-1">
           预定频率：每 {{ item.frequencyType }} 天 {{ item.frequencyMeasure }}
-          {{ item?.conditioningProgramDetail?.cpFixedPricingRule?.pricingUnit || '次'}}
+          {{ item?.conditioningProgramDetail?.cpFixedPricingRule?.pricingUnit || '次' }}
         </div>
         <div v-if="item.remark">操作指南：{{ item.remark }}</div>
       </div>
       <!-- 健康评估 -->
-      <div  class="project-section mb-3" v-if="item?.healthAnalysisReports">
+      <div class="project-section mb-3 project-card" v-if="item?.healthAnalysisReports">
         <div class="project-title">
           <span style="font-size: 14px; font-weight: bold">◇ {{ item?.conditioningProgramDetail?.name }}</span>
-          <span class="stat">数量：{{ item?.totalMeasure }}</span>
-          <span class="stat">还剩：{{ item?.remainCount }}</span>
-          <span class="stat">已核销：{{ item?.finishCount }}</span>
+          <span class="stat">数量：{{ item?.totalMeasure }} {{ item?.conditioningProgramDetail?.cpFixedPricingRule?.pricingUnit || '次' }}</span>
+          <span class="stat">还剩：{{ item?.remainCount }} {{ item?.conditioningProgramDetail?.cpFixedPricingRule?.pricingUnit || '次' }}</span>
+          <span class="stat">已核销：{{ item?.finishCount }} {{ item?.conditioningProgramDetail?.cpFixedPricingRule?.pricingUnit || '次' }}</span>
         </div>
         <vxe-table :data="item?.healthAnalysisReports" border>
           <vxe-column type="seq" title="序号" width="80" />
@@ -274,44 +292,44 @@ function open(row: Model) {
         </vxe-table>
         <div class="mt-3">
           <div class="mb-1">
-          预定频率：
-          <span v-if="item?.frequencyType==='不限'">不限</span>
-          <span v-else>每 {{ item?.frequencyType }}天 {{ item?.frequencyMeasure }}
-          {{ item?.conditioningProgramDetail?.cpFixedPricingRule?.pricingUnit }}
-        </span>
-       
-        </div>
-        <div v-if="item?.remark">操作指南：{{ item?.remark }}</div>
+            预定频率：
+            <span v-if="item?.frequencyType === '不限'">不限</span>
+            <span v-else
+              >每 {{ item?.frequencyType }}天 {{ item?.frequencyMeasure }}
+              {{ item?.conditioningProgramDetail?.cpFixedPricingRule?.pricingUnit }}
+            </span>
+          </div>
+          <div v-if="item?.remark">操作指南：{{ item?.remark }}</div>
         </div>
       </div>
-   
       <!-- 健康记录 -->
-      <a-tabs class="panel-wrapper" v-model:activeKey="activePanel" v-if="item?.healthAnalysisReports && item?.healthAnalysisReports.length > 0">
-       
-        <a-tab-pane v-for="panel in panels" :key="panel.id" class="panel-pane">
-          <component :is="panel.component" :patient="patient" :healthAnalysisReports="item?.healthAnalysisReports" :type="type"></component>
-        </a-tab-pane>
-        <template #renderTabBar>
-        <a-radio-group v-model:value="activePanel">
-          <a-radio-button v-for="panel in panels" :key="panel.id" :value="panel.id">
-            {{ panel.title }}
-          </a-radio-button>
-        </a-radio-group>
-      </template>
-      </a-tabs>
-     
-      </div>
-       <!-- 调养效果 -->
-       <div style="margin: 20px 0 10px 0;" v-if="careProcessList?.patientConditioningScores && careProcessList.patientConditioningScores.length > 0">
-        <h3>调养效果</h3>
-        <!-- todo 折线图 -->
-        <v-chart :option="option" style="width: 350px; height: 200px" />
-      </div>
-       <!-- 指标 -->
-       <div v-if="careProcessList?.patientQuotaGroups && careProcessList?.patientQuotaGroups.length > 0">
-        <label>生理指标</label>
-        <a-button type="link" @click="openIndicatorRecordsPreview">更新记录</a-button>
+      <div class="health-records-card">
+        <a-tabs class="panel-wrapper" v-model:activeKey="activePanel" v-if="item?.healthAnalysisReports && item?.healthAnalysisReports.length > 0">
+          <a-tab-pane v-for="panel in panels" :key="panel.id" class="panel-pane">
+            <div>记录</div>
+            <component :is="panel.component" :patient="patient" :healthAnalysisReports="item?.healthAnalysisReports" :type="type"></component>
+          </a-tab-pane>
+          <!-- <template #renderTabBar>
+            <a-radio-group v-model:value="activePanel">
+              <a-radio-button v-for="panel in panels" :key="panel.id" :value="panel.id">
+                {{ panel.title }}
+              </a-radio-button>
+            </a-radio-group>
+          </template> -->
+        </a-tabs>
       </div>
+    </div>
+    <!-- 调养效果 -->
+    <div style="margin: 20px 0 10px 0" v-if="careProcessList?.patientConditioningScores && careProcessList.patientConditioningScores.length > 0">
+      <h3>调养效果</h3>
+      <!-- todo 折线图 -->
+      <v-chart :option="option" style="width: 350px; height: 200px" />
+    </div>
+    <!-- 指标 -->
+    <div v-if="careProcessList?.patientQuotaGroups && careProcessList?.patientQuotaGroups.length > 0">
+      <label>生理指标</label>
+      <a-button type="link" @click="openIndicatorRecordsPreview">更新记录</a-button>
+    </div>
   </div>
 </template>
 
@@ -324,10 +342,9 @@ function open(row: Model) {
     padding-top: 12px;
     height: 600px;
     :deep(.ant-tabs-content) {
-    height: 100%;
-  }
+      height: 100%;
+    }
   }
- 
 }
 .care-progress-card {
   background: #fff;
@@ -396,4 +413,20 @@ function open(row: Model) {
   /* border-radius: 6px; */
   padding: 6px 30px 6px 6px;
 }
+/* .project-card :deep(.vxe-table--header th) {
+  background: #9abde4 !important;
+  color: black !important;
+} */
+/* .health-records-card :deep(.vxe-table--header th) {
+  background: #F8F8F9 !important;
+  color: unset !important;
+}
+.project-card :deep(.vxe-table--border .vxe-body--row > td),
+.project-card :deep(.vxe-table--border .vxe-header--row > th) {
+  border-color: #bfcbd9 !important;
+  border-width: 2px !important;
+}
+.project-card :deep(.vxe-table--border) {
+  border-color: #bfcbd9 !important;
+} */
 </style>