完成70%

2026-07-24 07:56:22 +08:00
parent bb6431b319
commit c7f278fe79
92 changed files with 4741 additions and 14440 deletions
@@ -1,130 +1,47 @@
-<!-- 页面编号：R-04；用途：人情往来详情与不写库的新增、编辑预览。 -->
+<!-- 页面编号：R-04；用途：按 Apifox 已声明字段创建亲友往来记录。 -->
 <template>
-  <view class="gift-editor-page" :class="editorClasses">
+  <view class="gift-editor-page" :class="`relative-editor-state--${editorState}`">
    <ModulePageBackground module="records" />
-    <view class="page-header">
-      <PageHeader
-        :title="
-          mode === 'create'
-            ? '往来预览'
-            : mode === 'view'
-              ? '往来详情'
-              : '编辑预览'
-        "
-        :action="mode === 'view' && editorState === 'ready' ? '制作预览' : ''"
-        custom-back
-        @back="requestBack"
-        @action="enterEdit"
-      />
-    </view>
-    <view v-if="editorState === 'loading'" class="page-loading">
-      <AppLoading
-        text="正在读取往来记录"
-        description="请稍候，正在核对当前家谱与记录身份。"
-      />
-    </view>
-    <view v-else class="page-content">
-      <view v-if="editorState === 'preview'" class="state-card">
-        <text>本地预览，尚未提交服务器</text>
-        <text>这份往来内容只存在于当前页面，不会插入、修改或删除正式记录。</text>
-        <view v-for="item in previewRows" :key="item.label">
-          <text>{{ item.label }}</text><text>{{ item.value }}</text>
-        </view>
-        <AppButton block label="返回贺礼簿" @click="returnToRelatives" />
-      </view>
-      <view v-else-if="mode === 'view' && editorState === 'ready'" class="detail-card">
-        <text>{{ relativeForm.eventName }}</text>
-        <view v-for="item in detailRows" :key="item.label">
-          <text>{{ item.label }}</text>
-          <text>{{ item.value }}</text>
-        </view>
-        <AppButton block label="制作编辑预览" @click="enterEdit" />
-        <AppButton type="secondary" block disabled label="删除暂未开放" />
-      </view>
-      <view v-else-if="editorState === 'ready'" class="form-card">
-        <text>
-          {{ mode === "create" ? "填写一份人情往来预览" : "调整往来记录预览" }}
-        </text>
+    <view class="page-header"><PageHeader title="新建往来记录" custom-back @back="requestBack" /></view>
+    <view class="page-content">
+      <view v-if="editorState === 'form'" class="form-card">
+        <text>记录一份家人往来</text>
+        <text class="form-copy">页面只发送已声明且可映射的字段；媒体需要 `mediaOssIds`，没有上传 owner 时不提交。</text>
        <view v-for="field in fields" :key="field.key" class="field-row">
          <text>{{ field.label }}</text>
-          <input
-            v-model="relativeForm[field.key]"
-            :type="field.key === 'giftAmount' ? 'digit' : 'text'"
-            :placeholder="`请输入${field.label}`"
-          />
-          <text v-if="relativeErrors[field.key]">{{ relativeErrors[field.key] }}</text>
+          <textarea v-if="field.key === 'recordContent'" v-model="form[field.key]" auto-height :placeholder="`请输入${field.label}`" @input="submitError = ''" />
+          <input v-else v-model="form[field.key]" :type="field.key === 'giftAmount' ? 'digit' : 'text'" :placeholder="`请输入${field.label}`" @input="submitError = ''" />
        </view>
-        <AppButton
-          block
-          :disabled="isSubmitting"
-          :label="isSubmitting ? '正在生成预览' : '生成本地预览'"
-          @click="saveRelative"
-        />
-        <AppButton type="secondary" block label="取消填写" @click="requestBack" />
+        <text v-if="submitError" class="save-error">{{ submitError }}</text>
+        <AppButton block :disabled="isSubmitting" :label="isSubmitting ? '正在提交' : '提交往来记录'" @click="saveRelative" />
      </view>
      <view v-else class="state-card">
-        <text>往来记录不可用</text>
-        <text>记录不存在、缺少身份或不属于当前家谱，页面不会回退到其他记录。</text>
-        <AppButton type="secondary" block label="返回贺礼簿" @click="returnToRelatives" />
+        <text>{{ resultCopy.title }}</text>
+        <text>{{ resultCopy.copy }}</text>
+        <AppButton block :label="resultCopy.action" @click="handleResultAction" />
      </view>
    </view>
-    <AppDialog
-      :visible="discardVisible"
-      :close-on-mask="false"
-      eyebrow="放弃确认"
-      title="放弃当前填写？"
-      message="尚未提交的预览内容将从当前页面清除。"
-      confirm-text="确认放弃"
-      cancel-text="继续填写"
-      show-cancel
-      @confirm="confirmDiscard"
-      @cancel="cancelDiscard"
-    />
+    <AppDialog :visible="discardVisible" :close-on-mask="false" eyebrow="放弃确认" title="放弃当前填写？" message="尚未提交的内容将从当前页面清除。" confirm-text="确认放弃" cancel-text="继续填写" show-cancel @confirm="confirmDiscard" @cancel="cancelDiscard" />
  </view>
 </template>
+
 <script setup>
 import { computed, onUnmounted, reactive, ref } from "vue";
 import { onBackPress, onLoad } from "@dcloudio/uni-app";
 import AppButton from "@/components/AppButton.vue";
 import AppDialog from "@/components/AppDialog.vue";
-import AppLoading from "@/components/AppLoading.vue";
 import ModulePageBackground from "@/components/ModulePageBackground.vue";
 import PageHeader from "@/components/PageHeader.vue";
-import {
-  findRelativeRecordFixture,
-  getGenealogyFixtureAccess,
-} from "@/data/mock.js";
+import { appApi, createRequestController, isRequestCancelled } from "@/utils/api.js";
 import { createDiscardConfirmation } from "@/utils/discard-confirmation.js";
-import {
-  goBack,
-  handleBackPress,
-  returnTo,
-  runBackGuard,
-} from "@/utils/navigation.js";
+import { goBack, handleBackPress, returnTo, runBackGuard } from "@/utils/navigation.js";

 const genealogyId = ref("");
-const relativeId = ref("");
-const mode = ref("");
-const editorState = ref("loading");
+const editorState = ref("form");
 const isSubmitting = ref(false);
 const discardVisible = ref(false);
-const localRelativePreview = ref(null);
-const relativeForm = reactive({
-  relativeName: "",
-  relationName: "",
-  eventName: "",
-  eventTime: "",
-  giftAmount: "",
-  recordContent: "",
-});
-const relativeErrors = reactive({
-  relativeName: "",
-  relationName: "",
-  eventName: "",
-  eventTime: "",
-  giftAmount: "",
-  recordContent: "",
-});
+const submitError = ref("");
+const form = reactive({ relativeName: "", relationName: "", eventName: "", eventTime: "", giftAmount: "", recordContent: "" });
 const fields = [
  { key: "relativeName", label: "亲友姓名" },
  { key: "relationName", label: "关系称谓" },
@@ -133,221 +50,82 @@ const fields = [
  { key: "giftAmount", label: "礼金金额" },
  { key: "recordContent", label: "往来备注" },
 ];
-const baseline = ref("");
-let submitTimer = null;
-const editorClasses = computed(() => ({
-  "relative-editor-state--preview": editorState.value === "preview",
-  "relative-editor-state--invalid": editorState.value === "invalid",
-}));
-const formSnapshot = computed(() => JSON.stringify({ ...relativeForm }));
-const isDirty = computed(() =>
-  editorState.value === "preview" ||
-  (["create", "edit"].includes(mode.value) && formSnapshot.value !== baseline.value),
-);
-const displayValue = (value) =>
-  value === "" || value === null || value === undefined ? "未填写" : String(value);
-const detailRows = computed(() =>
-  fields
-    .slice(1)
-    .map((field) => ({ label: field.label, value: displayValue(relativeForm[field.key]) })),
-);
-const previewRows = computed(() =>
-  fields.map((field) => ({
-    label: field.label,
-    value: displayValue(localRelativePreview.value?.[field.key]),
-  })),
-);
-const copyRecordToForm = (record) => {
-  Object.assign(relativeForm, {
-    relativeName: record.relativeName,
-    relationName: record.relationName,
-    eventName: record.eventName,
-    eventTime: record.eventTime,
-    giftAmount: String(record.giftAmount ?? ""),
-    recordContent: record.recordContent,
-  });
-  baseline.value = formSnapshot.value;
-};
-onLoad((query) => {
-  genealogyId.value = String(query.genealogyId || "");
-  relativeId.value = String(query.relativeId || "");
-  mode.value = String(query.mode || "");
-  if (query.state === "loading") return;
-  const access = getGenealogyFixtureAccess(genealogyId.value);
-  const hasValidGenealogy = ["owner", "member"].includes(access.accessRole);
-  const isCreateContract = mode.value === "create" && !relativeId.value;
-  const isEntityContract = ["view", "edit"].includes(mode.value) && Boolean(relativeId.value);
-  if (!hasValidGenealogy || (!isCreateContract && !isEntityContract)) {
-    editorState.value = "invalid";
-    return;
-  }
-  if (isCreateContract) {
-    baseline.value = formSnapshot.value;
-    editorState.value = "ready";
-    return;
-  }
-  const selected = findRelativeRecordFixture(genealogyId.value, relativeId.value);
-  if (!selected) {
-    editorState.value = "invalid";
-    return;
-  }
-  copyRecordToForm(selected);
-  editorState.value = "ready";
-});
-const enterEdit = () => {
-  if (mode.value !== "view" || editorState.value !== "ready") return false;
-  mode.value = "edit";
-  baseline.value = formSnapshot.value;
-  return true;
-};
-const validateRelative = () => {
-  relativeErrors.relativeName = relativeForm.relativeName.trim() ? "" : "请填写亲友姓名";
-  relativeErrors.relationName = "";
-  relativeErrors.eventName = "";
-  relativeErrors.eventTime = "";
-  relativeErrors.recordContent = "";
-  const amountInput = relativeForm.giftAmount.trim();
-  relativeErrors.giftAmount =
-    !amountInput || Number.isFinite(Number(amountInput))
-      ? ""
-      : "礼金金额必须是数字";
-  return !relativeErrors.relativeName && !relativeErrors.giftAmount;
-};
-const saveRelative = () => {
-  if (isSubmitting.value || !validateRelative()) return false;
-  isSubmitting.value = true;
-  const snapshot = Object.freeze({
-    relativeName: relativeForm.relativeName.trim(),
-    relationName: relativeForm.relationName.trim(),
-    eventName: relativeForm.eventName.trim(),
-    eventTime: relativeForm.eventTime.trim(),
-    giftAmount: relativeForm.giftAmount.trim()
-      ? Number(relativeForm.giftAmount)
-      : null,
-    recordContent: relativeForm.recordContent.trim(),
-  });
-  const timer = setTimeout(() => {
-    if (submitTimer !== timer) return;
-    localRelativePreview.value = snapshot;
-    editorState.value = "preview";
-    isSubmitting.value = false;
-    submitTimer = null;
-  }, 240);
-  submitTimer = timer;
-  return true;
-};
-const discardConfirmation = createDiscardConfirmation(
-  (visible) => { discardVisible.value = visible; },
+const requestController = createRequestController();
+const isDirty = computed(() => Object.values(form).some((value) => String(value).trim()));
+const hasValidContext = computed(() => /^[1-9]\d*$/.test(genealogyId.value));
+const resultCopy = computed(() => editorState.value === "success"
+  ? { title: "往来记录已提交服务端", copy: "服务端已返回成功信封。列表仍缺条目 DTO，返回后不会生成本地记录。", action: "返回贺礼簿" }
+  : { title: "往来记录入口无效", copy: "当前只有新建请求可映射；详情和修改缺可靠条目 DTO/记录 ID 来源，页面不从 fixture 进入。", action: "返回上一页" },
 );
+const discardConfirmation = createDiscardConfirmation((visible) => { discardVisible.value = visible; });
+const requestDiscardConfirmation = discardConfirmation.request;
 const confirmDiscard = discardConfirmation.confirm;
 const cancelDiscard = discardConfirmation.cancel;
-const requestBack = () =>
-  runBackGuard({
-    transientOpen: discardVisible.value,
-    dirty: isDirty.value,
-    submitting: isSubmitting.value,
-    "close-transient": cancelDiscard,
-    "block-submitting": () => true,
-    "confirm-discard": discardConfirmation.request,
-  });
-const returnToRelatives = () =>
-  genealogyId.value
-    ? returnTo("R03", { genealogyId: genealogyId.value })
-    : goBack();
-onBackPress((event) => handleBackPress(event, requestBack));
-onUnmounted(() => {
-  if (submitTimer) clearTimeout(submitTimer);
-  discardConfirmation.dispose();
+onLoad((query) => {
+  genealogyId.value = String(query?.genealogyId || "");
+  if (!hasValidContext.value || query?.mode !== "create") editorState.value = "invalid";
 });
+const saveRelative = async () => {
+  if (isSubmitting.value || !hasValidContext.value) return;
+  const relativeName = form.relativeName.trim();
+  const giftAmountText = form.giftAmount.trim();
+  if (!relativeName) {
+    submitError.value = "请填写亲友姓名";
+    return;
+  }
+  if (giftAmountText && !Number.isFinite(Number(giftAmountText))) {
+    submitError.value = "礼金金额必须是数字";
+    return;
+  }
+  isSubmitting.value = true;
+  submitError.value = "";
+  try {
+    await appApi.createRelativeRecord(genealogyId.value, {
+      relativeName,
+      relationName: form.relationName,
+      eventName: form.eventName,
+      eventTime: form.eventTime,
+      ...(giftAmountText ? { giftAmount: Number(giftAmountText) } : {}),
+      recordContent: form.recordContent,
+    }, { requestController });
+    Object.keys(form).forEach((key) => { form[key] = ""; });
+    editorState.value = "success";
+  } catch (error) {
+    if (!isRequestCancelled(error)) submitError.value = error?.message || "往来记录提交失败，请稍后重试。";
+  } finally {
+    isSubmitting.value = false;
+  }
+};
+const requestBack = () => runBackGuard({
+  transientOpen: discardVisible.value,
+  dirty: isDirty.value,
+  submitting: isSubmitting.value,
+  "close-transient": cancelDiscard,
+  "block-submitting": () => true,
+  "confirm-discard": requestDiscardConfirmation,
+});
+const handleResultAction = () => editorState.value === "success"
+  ? returnTo("R03", { genealogyId: genealogyId.value })
+  : goBack();
+onBackPress((event) => handleBackPress(event, requestBack));
+onUnmounted(() => { requestController.abort(); discardConfirmation.dispose(); });
 </script>
+
 <style scoped lang="scss">
@use "../../styles/adaptive-frame-profiles.scss" as adaptive;
-
-.gift-editor-page {
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
-  background: $paper;
-}
-.page-header,
-.page-loading,
-.page-content {
-  z-index: 1;
-}
-.page-loading {
-  min-height: calc(100vh - 100rpx);
-}
-.page-content {
-  padding: 18rpx 24rpx 72rpx;
-}
-.form-card,
-.detail-card,
-.state-card {
-  box-sizing: border-box;
-  padding: 46rpx;
-  @include adaptive.adaptive-records-content;
-}
-.form-card > text:first-child,
-.detail-card > text:first-child,
-.state-card > text:first-child {
-  display: block;
-  color: $ink;
-  font-size: 34rpx;
-  font-weight: 700;
-}
-.field-row,
-.detail-card > view {
-  display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
-  align-items: center;
-  gap: 12rpx 20rpx;
-  min-height: 82rpx;
-  margin-top: 14rpx;
-  padding: 14rpx 24rpx;
-  box-sizing: border-box;
-  @include adaptive.adaptive-records-field;
-}
-.field-row > text:first-child,
-.detail-card > view > text:first-child {
-  color: $ink;
-  font-size: 23rpx;
-  font-weight: 700;
-}
-.field-row input,
-.detail-card > view > text:last-child {
-  min-width: 0;
-  color: $ink;
-  font-size: 23rpx;
-  text-align: right;
-}
-.field-row > text:last-child {
-  grid-column: 1/-1;
-  color: $brand-red;
-  font-size: 20rpx;
-  text-align: right;
-}
-.form-card .app-button,
-.detail-card .app-button {
-  margin-top: 18rpx;
-}
-.save-error {
-  display: block;
-  margin-top: 14rpx;
-  color: $brand-red;
-  font-size: 22rpx;
-}
-.state-card {
-  min-height: 340rpx;
-  padding-top: 80rpx;
-  text-align: center;
-}
-.state-card > text:nth-child(2) {
-  display: block;
-  margin-top: 18rpx;
-  color: $ink-muted;
-  font-size: 24rpx;
-}
-.state-card .app-button {
-  margin-top: 28rpx;
-}
+.gift-editor-page { display: flex; min-height: 100vh; flex-direction: column; background: $paper; }
+.page-header, .page-content { z-index: 1; }
+.page-content { padding: 18rpx 24rpx 72rpx; }
+.form-card, .state-card { box-sizing: border-box; padding: 46rpx; @include adaptive.adaptive-records-content; }
+.form-card > text:first-child, .state-card > text:first-child { display: block; color: $ink; font-size: 34rpx; font-weight: 700; }
+.form-copy { display: block; margin-top: 12rpx; color: $ink-muted; font-size: 22rpx; line-height: 1.55; }
+.field-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12rpx 20rpx; min-height: 82rpx; margin-top: 14rpx; padding: 14rpx 24rpx; box-sizing: border-box; @include adaptive.adaptive-records-field; }
+.field-row > text { color: $ink; font-size: 23rpx; font-weight: 700; }
+.field-row input, .field-row textarea { min-width: 0; color: $ink; font-size: 23rpx; text-align: right; }
+.field-row textarea { min-height: 72rpx; text-align: left; }
+.save-error { display: block; margin-top: 14rpx; color: $brand-red; font-size: 22rpx; }
+.form-card .app-button { margin-top: 18rpx; }
+.state-card { min-height: 340rpx; padding-top: 80rpx; text-align: center; }
+.state-card > text:nth-child(2) { display: block; margin-top: 18rpx; color: $ink-muted; font-size: 24rpx; line-height: 1.65; }
+.state-card .app-button { margin-top: 28rpx; }
 </style>