从去年七月底入职开始就接手了公卫项目，大约是十一月开始测试一直到年前才结束，中间各种奇怪的bug和问题，据我的不完全统计大约有3500个bug，当前其中肯定有重复提出的。

今年三月初项目上线，目前也正在趋于稳定，打算简单的总结下我都干了什么，遇到了哪些问题。

项目简单的背景

公卫项目是两个项目的总称：基本公共卫生服务+家庭医生签约服务。

这里简单说下基本公卫服务就是将你的信息录入系统建立健康档案，同时对于不同的人群：老年人、儿童、孕产妇、高血压等等人群会进行定期的随访和检查。家庭医生签约则是居民可以跟医生或者医生团队进行签约，医生可以提供个性化的服务，例如体检、定期随访等等，总之两个是相辅相成的关系。

我们开发的公卫算是重构，没有设计图只是参考老的项目来开发，老项目应该是PHP开发的据说是几百人的团队开发的，领导对我的要求是八个月，二五年七月开始开发截止到二六年的三月上线，前后端全部重做，除了公卫项目还有一个运营后台（公卫的运营后台管理）、政府后台（主要是大屏）、公众号（同样二开直接在原有代码基础修改）、一体机、巡诊车。其实东西挺多的，我记得刚去的第二星期也就是八月份就开始实行强制加班了，周一到周五晚上加班三天，周六周日加班一天，当时有一个跟我一块来的小伙子看到消息第二天就跑路了......

负责模块

我负责的主要是公卫和公众号，其中公众号全权由我修改，公卫中负责了部分模块：居民添加编辑、居民列表、居民的死亡迁出、家人管理、签约服务、健康档案、慢病管理、高危孕产妇登记、体弱儿登记、省增随访，其中省增随访是另一个同事开发的，做完之后后面的bug都是我处理的。

模块看着不多其实一点也不少，基本主要的操作流程都开发了，添加居民-完善信息-绑定家人关系-建立档案-进行签约。这算是一条主线，其中对于高血压、糖尿病这种慢病的信息登记、随访可以看做是支线。

这里面的逻辑其实很复杂，当然这块的bug也不少，那段时间改bug真的改的崩溃，我认为这么多问题的原因很简单：

自己的水平菜，这一点我确实需要承认，在编写代码的时候没有考虑那么多才会导致后面出现一个bug，其中主要是集中在表单上，毕竟整个系统就是你在填写表单，那么问题显而易见那就是表单的校验，对于很多输入框都没做限制用户随便输入了，当然这也不是我自己的问题，我注意到其他新来的同事也是的，可能是接触这种项目不多。
领导问题，是的没听错，虽然现在上线已经趋于稳定了但是之前会出现那么多问题绝对不会只是开发的问题。正如我之前提到的这个是重构的，但不是在老项目基础上开发的，而是单开新的项目，我们来后没人讲项目逻辑、没有具体的文档，开发时候就是后端给你个接口前端按照页面写好后调用就行了，后来测试的时候才知道里面有很多细节性的东西，比如这一块的逻辑不是单纯的直接添加，还需要校验手机号是自己的还是家人的，是自己的还要看手机号之前有没有被签约过等等这种细节上的问题，因为这种你在老系统不详细测试你是不知道的，至于后来为什么知道了，那是我们测试一点点测试出来的，真的就是测试成了产品，产品成了小透明（其实就没有产品）唯一熟悉老系统的一个后端在元旦前还离职了......我们每周的周会领导也都会问为什么那么多bug，同时他也知道我们不太熟悉产品但是就是没有单独的召开过一次培训会让大家好好了解老项目。

吐槽

为什么那么多BUG？

之前我提到省增随访是另一个开发的但是后续的bug都是我修改的，虽然同事但是我真的不想吐槽他的代码。我真的不理解

为什么不用小菠萝？

最近因为签约相关的地方有改动我又开始修改之前我编写的签约模块，当我开始编写我注意到一个很恶心的点，TMD为什么不用小菠萝保存状态而是使用注入？？？？虽然代码是我写的但是我还是想说句：真**。

签约是一共有四步，每一个都是一个单独的模块，在index中使用动态组件。当时想的可能是不是父子就使用注入来写了，但是现在想想还是用小菠萝最好了。

<template>
  <div class="app-container bg-[#fff]">
    <div class="pb-4 border-b-2 border-solid border-[var(--el-color-primary)]">
      <PageTitle>签约用户</PageTitle>
    </div>
    <div class="flex justify-center items-center py-[20px]">
      <el-steps :active="stepIndex" class="w-9/10" finish-status="success" align-center>
        <el-step title="填写签约人信息" />
        <el-step title="选择签约医生" />
        <el-step title="生成签约协议" />
        <el-step title="完成签约" />
      </el-steps>
    </div>
    <!-- 第一步 -->
    <keep-alive>
      <component :is="currentStepComponent" :key="stepIndex" v-model:stepIndex="stepIndex" />
    </keep-alive>
  </div>
</template>

<script setup>
import { provide } from "vue";
import PageTitle from "@/components/PageTitle/index.vue";
import SignOne from "./signOne.vue";
import SignTwo from "./signTwo.vue";
import SignThree from "./signThree.vue";
import SignFour from "./signFour.vue";
const stepIndex = ref(0);
const stepComponents = {
  0: SignOne,
  1: SignTwo,
  2: SignThree,
  3: SignFour,
};

const signPopulationInfoForms = ref({}); // 签约家庭成员的信息
const userInfo = ref({}); // 用户的信息
const doctorInfo = ref({}); // 医生的信息
const teamInfo = ref({}); // 团队的信息
const ultimateData = ref({}); //第二步获取的医生id以及团队id
const signData = ref(null); // 第三步签约成功后的数据
const signatureImg = ref(""); // 签名服务器 URL
const previewImg = ref(""); // 签名本地预览 base64

const currentStepComponent = computed(() => {
  return stepComponents[stepIndex.value] || null;
});
// 第一步的数据
const oneDataFn = (data, user) => {
  signPopulationInfoForms.value = data;
  userInfo.value = user;
  console.log(userInfo.value);

  // console.log(signPopulationInfoForms.value, "父组件获取的data信息-第一步");
};
// 第二步的数据
const twoDataFn = (data, doctor, team) => {
  ultimateData.value = data;
  doctorInfo.value = doctor;
  teamInfo.value = team;
  // console.log(ultimateData.value, "父组件获取的data信息-第二步");
  // console.log(doctorInfo.value, "父组件获取的医生的信息-第二步");
  // console.log(teamInfo.value, "父组件获取的团队的信息-第二步");
};
// 第三步的数据
const threeDataFn = (data) => {
  signData.value = data;
  console.log(signData.value, "父组件获取的签约成功数据-第三步");
};

//注入函数
provide("oneDataFn", oneDataFn);
provide("twoDataFn", twoDataFn);
provide("threeDataFn", threeDataFn);
// 注入数据
provide("signPopulationInfoForms", signPopulationInfoForms);
provide("userInfo", userInfo);
provide("doctorInfo", doctorInfo);
provide("teamInfo", teamInfo);
provide("ultimateData", ultimateData);
provide("signData", signData);
provide("signatureImg", signatureImg);
provide("previewImg", previewImg);
</script>

<style lang="scss" scoped></style>

很奇怪的字段

在我开发健康档案的过程中，有一个选项是记录居民有没有过敏史，是一个多选例如无、青霉素、磺胺、其他，当我们选择其他的时候会有一个输入框让医生输入。在我看来这不就是两个字段一个记录选择的什么另一个记录其他的具体值，但是后端给我三个参数！！！一个是有无一个是记录选择另一个是其他的输入。字段这样其实很正常进行分开保存，但是结合到页面就不正常了，无和青霉素这些选项在一起是一个复选框，我们选择无的时候需要进行去除其他选项的选择......同时后端规定的有无是1/2，然后我们渲染时候复选框的选项中无是null但是后端接收的时候如果选无那么应该为空的，也就是说我们选择无的时候需要去除其他选项然后给这个数据保存成空数组再给有无字段保存为[1]，没错是数组？！！

// 字典
  aAllergyHistory: [
    { label: "无", value: "null", id: 11, isSingle: true },
    { label: "青霉素", value: "2", id: 2 },
    { label: "磺胺", value: "3", id: 3 },
    { label: "链霉素", value: "4", id: 4 },
    { label: "其他", value: "5", id: 5 },
  ],
// 后端接收的字段
infoForm: {
    allergyHistory: ["null"], //过敏史【1.有,2.无】 字典显示无的是“null”
    allergyObject: [], //过敏物（复选用,号分割）【-100.未填写,2.青霉素,3.磺胺,4.链霉素,5.其他】
    allergyObjectOther: "", //过敏物的其他名称【-100.未填写】
}

最后

写到这里已经累了，其实还有很多地方有问题。虽然问题很多但是也都走过来了，这个项目对我来说算是一个大型的项目让我也学到了很多、成长了很多，剩余的改天在写。

文章列表

公卫项目重构总结：Vue 前端开发、签约流程与 Bug 排查

阿里云边缘加速ESA配置教程

解决谷歌无法抓取Robots.txt的问题

今天，被Gemini的一句话整破防了

元气骑士存档修改教程

ChatGPT Plus一个月Plus或一年Go订阅

宝塔服务器安全设置、SSH隧道连数据库与SEO优化

Git多仓库同步教程：一行命令同时推送到 Gitee 和 GitHub

Node.js 版本管理神器：NVM 安装教程及常用命令速查