ykt-wxapp/pages/case/visit-record-detail.vue

<template>
  <view class="page">
    <!-- Mobile 来源: ykt-management-mobile/src/pages/customer/visit-record-detail/visit-record-detail.vue -->
    <view class="body">
      <scroll-view scroll-y class="scroll">
        <view class="header">
          <view class="header-title">{{ template?.templateName || '健康档案' }}</view>
        </view>

        <view class="form-wrap">
          <FormTemplate v-if="template" ref="formRef" :items="showItems" :form="forms" @change="onChange" />
        </view>

        <view style="height: 120px;"></view>
      </scroll-view>

      <view class="footer">
        <button class="btn plain" @click="cancel">取消</button>
        <button class="btn primary" @click="save">保存</button>
      </view>
    </view>

    <view v-if="recordId" class="delete-fab" @click="remove">
      <uni-icons type="trash" size="22" color="#ff4d4f" />
    </view>
  </view>
</template>

<script setup>
import { computed, reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import dayjs from 'dayjs';
import FormTemplate from '@/components/form-template/index.vue';
import { ensureSeed, getVisitRecord, getVisitRecordTemplate, removeVisitRecord, upsertVisitRecord } from '@/components/archive-detail/mock';

const archiveId = ref('');
const recordId = ref('');
const templateType = ref('');

const template = computed(() => getVisitRecordTemplate(templateType.value));
const detail = ref({});
const form = reactive({});
const forms = computed(() => ({ ...detail.value, ...form }));
const showItems = computed(() => {
  const list = template.value?.templateList || [];
  // referenceField 兼容（与 mobile 一致）
  return list.filter((i) => {
    if (i && typeof i.referenceField === 'string') {
      return forms.value[i.referenceField] === i.referenceValue;
    }
    return true;
  });
});

const formRef = ref(null);

onLoad((options) => {
  archiveId.value = options?.archiveId ? String(options.archiveId) : '';
  recordId.value = options?.id ? String(options.id) : '';
  templateType.value = options?.type ? String(options.type) : '';

  ensureSeed(archiveId.value, { name: options?.name ? String(options.name) : '' });

  if (recordId.value) {
    const record = getVisitRecord({ archiveId: archiveId.value, id: recordId.value });
    if (record) {
      templateType.value = record.templateType || record.medicalType || templateType.value;
      detail.value = record;
      return;
    }
  }

  if (!templateType.value) templateType.value = 'outpatient';
});

function onChange({ title, value }) {
  form[title] = value;
  const item = showItems.value.find((i) => i.title === title);
  if (!item) return;
  // 关联字段变化时清理被关联字段（与 mobile 行为一致）
  const relat = (template.value?.templateList || []).filter((i) => i.referenceField === title);
  relat.forEach((i) => (form[i.title] = ''));
}

function cancel() {
  uni.navigateBack();
}

function save() {
  if (!archiveId.value) {
    uni.showToast({ title: '缺少 archiveId', icon: 'none' });
    return;
  }
  if (formRef.value?.verify && !formRef.value.verify()) return;

  // sortTime：尽量用模板中的日期字段
  const timeTitle =
    templateType.value === 'outpatient'
      ? 'visitTime'
      : templateType.value === 'inhospital'
        ? 'inhospitalDate'
        : templateType.value === 'physicalExaminationTemplate'
          ? 'inspectDate'
          : '';
  const timeValue = timeTitle ? forms.value[timeTitle] : '';
  const sortTime = timeValue && dayjs(timeValue).isValid() ? dayjs(timeValue).valueOf() : Date.now();

  upsertVisitRecord({
    archiveId: archiveId.value,
    record: {
      _id: recordId.value || '',
      medicalType: templateType.value,
      templateType: templateType.value,
      tempName: template.value?.templateName || '健康档案',
      sortTime,
      ...form,
      createTime: detail.value?.createTime || Date.now(),
      creatorName: detail.value?.creatorName || '我',
    },
  });
  uni.$emit('archive-detail:visit-record-changed');
  uni.showToast({ title: '保存成功', icon: 'success' });
  setTimeout(() => uni.navigateBack(), 300);
}

function remove() {
  uni.showModal({
    title: '提示',
    content: '确定删除当前记录？',
    success: (res) => {
      if (!res.confirm) return;
      removeVisitRecord({ archiveId: archiveId.value, id: recordId.value });
      uni.$emit('archive-detail:visit-record-changed');
      uni.showToast({ title: '已删除', icon: 'success' });
      setTimeout(() => uni.navigateBack(), 300);
    },
  });
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: #f5f6f8;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}
.body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.scroll {
  flex: 1;
}
.header {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.header-title {
  padding: 14px 14px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}
.form-wrap {
  background: #fff;
  margin-top: 10px;
  padding: 4px 0;
}
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  gap: 12px;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
}
.btn {
  flex: 1;
  height: 44px;
  line-height: 44px;
  border-radius: 6px;
  font-size: 15px;
}
.btn::after {
  border: none;
}
.btn.plain {
  background: #fff;
  color: #4f6ef7;
  border: 1px solid #4f6ef7;
}
.btn.primary {
  background: #4f6ef7;
  color: #fff;
}

.delete-fab {
  position: fixed;
  right: 16px;
  bottom: calc(96px + env(safe-area-inset-bottom));
  width: 52px;
  height: 52px;
  border-radius: 26px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
  z-index: 30;
}
</style>