继续开发部分电子合同功能

src/views/elderly/contracts/components/ContractBody.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { reactive, computed, ref, watch } from 'vue'
+import { reactive, computed, ref, watch, onMounted } from 'vue'
 import { formatBackendDateTime } from '@/utils/formatTime'
 import { DICT_TYPE, getDictLabel } from '@/utils/dict'
-import {getCheckInDetailByElderId} from '@/api/elderly/apply/check-in'
+import { getTenantId } from '@/utils/auth'
+import { getCheckInDetailByElderId } from '@/api/elderly/apply/check-in'
+import { getOverheadListByType } from '@/api/elderly/fee/overheadCharge'
 import FieldItem from './FieldItem.vue'
 import SignatureItem from './SignatureItem.vue'
 
@@ -475,26 +477,25 @@ const displayExpenseName = (item: any): string => {
   return category || name || ''
 }
 
-// 房间类型映射：优先根据月度费用中 type=1 的床位项目，再回退 bedType
-const selectedRoomType = computed(() => {
-  const bedItem = monthlyExpensesList.value.find((item: any) => item.type === 1)
-  const bedType = bedItem?.itemName || contractForm.roomType || detailData.value?.bedType || ''
-  const map: Record<string, string> = {
-    '单人间': '单间',
-    '双人间': '双人间',
-    '三人间': '三人间',
-    '多人间': '多人间'
+const bedList = ref<{ chargeName: string; id: string; price: number }[]>([])
+
+const loadBedTypes = async () => {
+  try {
+    const tenantId = getTenantId()
+    const res = await getOverheadListByType(1, tenantId)
+    bedList.value = res || []
+  } catch (e) {
+    bedList.value = []
   }
-  return map[bedType] || '其他'
+}
+
+const roomTypeOptions = computed(() => {
+  return bedList.value.map((item) => ({ label: item.chargeName, value: item.chargeName }))
 })
 
-const roomTypeOptions = [
-  { label: '单间', value: '单人间' },
-  { label: '双人间', value: '双人间' },
-  { label: '三人间', value: '三人间' },
-  { label: '多人间', value: '多人间' },
-  { label: '其他', value: '其他' }
-]
+onMounted(() => {
+  loadBedTypes()
+})
 
 // 月度费用总额随明细自动汇总
 watch(
@@ -606,18 +607,18 @@ watch(
         </p>
 
         <h3 class="subsection-title" style="margin-top: 16px;">乙方（入住老年人）</h3>
-        <p class="content-text">
+        <div class="content-text">
           姓名：
           <FieldItem v-model="contractForm.elderName" :is-text-mode="isTextMode" width="140px" placeholder="请输入" />
           &nbsp;&nbsp;性别：
           <FieldItem v-model="contractForm.elderGenderText" :is-text-mode="isTextMode" width="60px" placeholder="男/女" />
           &nbsp;&nbsp;出生年月日：
           <FieldItem v-model="contractForm.elderBirth" :is-text-mode="isTextMode" type="date" width="200px" placeholder="请选择日期" />
-        </p>
-        <p class="content-text">
+        </div>
+        <div class="content-text">
           证件类型：
           <FieldItem v-model="contractForm.elderPapersType" :is-text-mode="isTextMode" type="dict" dictType="PAPERS_TYPE" width="200px" placeholder="请选择证件类型" />
-        </p>
+        </div>
         <p class="content-text">
           证件号码：
           <FieldItem v-model="contractForm.elderIdCard" :is-text-mode="isTextMode" width="220px" placeholder="请输入" />
@@ -634,22 +635,22 @@ watch(
         </p>
 
         <h3 class="subsection-title" style="margin-top: 16px;">丙方（老年人家属/监护人/担保人/委托代理人的个人或组织）</h3>
-        <p class="content-text">
+        <div class="content-text">
           姓名：
           <FieldItem v-model="contractForm.partyCName" :is-text-mode="isTextMode" width="140px" placeholder="请输入" />
           &nbsp;&nbsp;性别：
           <FieldItem v-model="contractForm.partyCGenderText" :is-text-mode="isTextMode" width="60px" placeholder="男/女" />
           &nbsp;&nbsp;出生年月：
           <FieldItem v-model="contractForm.partyCBirth" :is-text-mode="isTextMode" type="date" width="200px" placeholder="请选择日期" />
-        </p>
+        </div>
         <p class="content-text">
           与乙方关系：
           <FieldItem v-model="contractForm.partyCRelation" :is-text-mode="isTextMode" width="140px" placeholder="请输入" />
         </p>
-        <p class="content-text">
+        <div class="content-text">
           证件类型：
           <FieldItem v-model="contractForm.partyCPapersType" :is-text-mode="isTextMode" type="dict" dictType="PAPERS_TYPE" width="200px" placeholder="请选择证件类型" />
-        </p>
+        </div>
         <p class="content-text">
           证件号码：
           <FieldItem v-model="contractForm.partyCIdCard" :is-text-mode="isTextMode" width="220px" placeholder="请输入" />
@@ -742,7 +743,7 @@ watch(
       </div>
       <div class="page-content">
         <h2 class="section-title">第二条&nbsp;&nbsp;服务地点及设施</h2>
-        <p class="content-text">
+        <div class="content-text">
           1.经协商，确定本合同期限为
           <FieldItem v-model="contractForm.contractMonths" :is-text-mode="isTextMode" width="60px" placeholder="12" />
           个月，自
@@ -750,21 +751,19 @@ watch(
           起至
           <FieldItem v-model="contractForm.endDate" :is-text-mode="isTextMode" type="date" width="180px" placeholder="请选择日期" />
           止。
-        </p>
+        </div>
         <p class="content-text">
           2.甲方为乙方提供养老服务的地点为：
           <FieldItem v-model="contractForm.servicePlace" :is-text-mode="isTextMode" width="260px" placeholder="请输入" />
         </p>
         <div class="content-text">
           3.乙方或丙方为乙方选择入住的房间类型为：
-          <template v-if="!isTextMode">
+          <span v-if="!isTextMode" style="display: inline-block; vertical-align: middle;">
             <el-select v-model="contractForm.roomType" placeholder="请选择" style="width: 180px">
               <el-option v-for="item in roomTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
-          </template>
-          <template v-else>
-            <span class="fill-text">{{ contractForm.roomType || detailData.value?.bedType || '' }}</span>
-          </template>
+          </span>
+          <span v-else class="fill-text">{{ contractForm.roomType || '' }}</span>
         </div>
         <p class="content-text">
           4.乙方或丙方为乙方选择的具体房间为：
@@ -880,15 +879,25 @@ watch(
         <p class="content-text">
           4.乙方应支付的阶段性费用及支付方式如下：
         </p>
-        <p v-for="item in stageExpensesList" :key="item.id" class="content-text">
-          &nbsp;&nbsp;&nbsp;&nbsp;{{ displayExpenseName(item) }}：费用总额
-          <FieldItem v-model="item.totalAmount" :is-text-mode="isTextMode" width="100px" placeholder="0" />
-          元，分
-          <FieldItem v-model="item.hirePurchaseNumber" :is-text-mode="isTextMode" width="60px" placeholder="0" />
-          期支付，每期
-          <FieldItem v-model="item.hirePurchaseAmount" :is-text-mode="isTextMode" width="100px" placeholder="0" />
-          元；
-        </p>
+        <div v-for="item in stageExpensesList" :key="item.id" class="content-text">
+          &nbsp;&nbsp;&nbsp;&nbsp;{{ displayExpenseName(item) }}：
+          <template v-if="item.isFreeGift == 1">
+            赠送开始时间
+            <FieldItem v-model="item.freeStartTime" :is-text-mode="isTextMode" type="date" width="160px" placeholder="请选择日期" />
+            ，赠送结束时间
+            <FieldItem v-model="item.freeEndTime" :is-text-mode="isTextMode" type="date" width="160px" placeholder="请选择日期" />
+            ；
+          </template>
+          <template v-else>
+            费用总额
+            <FieldItem v-model="item.totalAmount" :is-text-mode="isTextMode" width="100px" placeholder="0" />
+            元，分
+            <FieldItem v-model="item.hirePurchaseNumber" :is-text-mode="isTextMode" width="60px" placeholder="0" />
+            期支付，每期
+            <FieldItem v-model="item.hirePurchaseAmount" :is-text-mode="isTextMode" width="100px" placeholder="0" />
+            元；
+          </template>
+        </div>
         <p v-if="!stageExpensesList.length" class="content-text">
           &nbsp;&nbsp;&nbsp;&nbsp;无。
         </p>
@@ -1668,30 +1677,30 @@ watch(
             甲方（盖章）：
             <FieldItem v-model="contractForm.partyASign" :is-text-mode="isTextMode" width="260px" placeholder="（盖章处）" />
           </p>
-          <p>
+          <div>
             法定代表人（签字）：
-            <SignatureItem :elder-id="props.recordRow.elderId" v-model="contractForm.partyALegalSign" :is-text-mode="isTextMode" width="260" height="80" placeholder="（签字处）" title="法定代表人签字" />
-          </p>
-          <p>
+            <SignatureItem :elder-id="props.recordRow.elderId" v-model="contractForm.partyALegalSign" :is-text-mode="isTextMode" :width="260" :height="80" placeholder="（签字处）" title="法定代表人签字" />
+          </div>
+          <div>
             日期：
             <FieldItem v-model="contractForm.partyADate" :is-text-mode="isTextMode" type="date" width="200px" placeholder="请选择日期" />
-          </p>
-          <p style="margin-top: 20px;">
+          </div>
+          <div style="margin-top: 20px;">
             乙方（签字）：
-            <SignatureItem :elder-id="props.recordRow.elderId" v-model="contractForm.partyBSign" :is-text-mode="isTextMode" width="260" height="80" placeholder="（签字处）" title="乙方签字" />
-          </p>
-          <p>
+            <SignatureItem :elder-id="props.recordRow.elderId" v-model="contractForm.partyBSign" :is-text-mode="isTextMode" :width="260" :height="80" placeholder="（签字处）" title="乙方签字" />
+          </div>
+          <div>
             日期：
             <FieldItem v-model="contractForm.partyBDate" :is-text-mode="isTextMode" type="date" width="200px" placeholder="请选择日期" />
-          </p>
-          <p style="margin-top: 20px;">
+          </div>
+          <div style="margin-top: 20px;">
             丙方（签字/盖章）：
-            <SignatureItem :elder-id="props.recordRow.elderId" v-model="contractForm.partyCSign" :is-text-mode="isTextMode" width="260" height="80" placeholder="（签字/盖章处）" title="丙方签字"  />
-          </p>
-          <p>
+            <SignatureItem :elder-id="props.recordRow.elderId" v-model="contractForm.partyCSign" :is-text-mode="isTextMode" :width="260" :height="80" placeholder="（签字/盖章处）" title="丙方签字"  />
+          </div>
+          <div>
             日期：
             <FieldItem v-model="contractForm.partyCDate" :is-text-mode="isTextMode" type="date" width="200px" placeholder="请选择日期" />
-          </p>
+          </div>
         </div>
       </div>
     </div>