cga_v2/web_client/src/views/evaluation/index.vue

<template>
  <div class="box">
    <!-- 现病史 -->
    <div style="padding-bottom: 20px" v-if="bodyArray.length">
      <div
        style="
          padding-bottom: 20px;
          text-align: left;
          font-size: 16px;
          line-height: 40px;
        "
        :key="index"
        v-for="(people, index) in bodyArray"
      >
        <div class="div-car">
          <div class="title">就诊信息</div>
          <div class="div-ul">
            <div class="div-li" style="text-align: left">
              <span>就诊号</span>
              <a-input v-model="people.outpatientNo" type="number" />
              <span class="required" style="color: red">*</span>
            </div>
            <div class="div-li" style="text-align: left">
              <span>年龄</span>
              <a-input v-model="people.age" type="number" />
            </div>
            <div class="div-li" style="text-align: left">
              <span>就诊科室</span>
              <a-input v-model="people.department" />
            </div>
          </div>
          <div style="height: 30px"></div>
          <div class="div-ul">
            <div class="div-li" style="text-align: left">
              <span>就诊/主治医生</span>
              <a-input v-model="people.doctor" />
            </div>
            <div class="div-li" style="text-align: left">
              <span>就诊/入院日期</span>
              <el-date-picker
                v-model="people.admissionDate"
                type="date"
                placeholder="仅住院填写"
              >
              </el-date-picker>
            </div>
            <div class="div-li" style="text-align: left">
              <span>住院次数</span>
              <a-input v-model="people.admissionCount" type="number" />
            </div>
          </div>
          <div style="height: 30px"></div>
          <div class="div-ul">
            <div class="div-li" style="text-align: left">
              <span>入院途径</span>
              <a-select
                :class="{
                  'w-full1': people.admissionMethod,
                  'w-full': !people.admissionMethod,
                }"
                v-model="people.admissionMethod"
                placeholder="仅住院填写"
              >
                <a-select-option
                  :key="index"
                  :value="status.id"
                  v-for="(status, index) in admissionMethods"
                >
                  {{ status.name }}
                </a-select-option>
              </a-select>
            </div>
            <div
              class="div-li"
              style="text-align: left"
              v-if="people.admissionMethod == 4"
            >
              <span>入院途径（其他）</span>
              <a-input v-model="people.admissionMethodOther" />
            </div>

            <div class="div-li" style="text-align: left">
              <span>床位号</span>
              <a-input
                v-model="people.bedNumber"
                placeholder="仅住院填写"
                type="number"
              />
            </div>
            <div class="div-li" v-if="people.admissionMethod != 4"></div>
          </div>
          <div style="height: 30px"></div>
          <div class="div-ul">
            <div class="div-li" style="text-align: left">
              <span>出院日期</span>
              <el-date-picker
                v-model="people.dischargeDate"
                type="date"
                placeholder="仅住院填写"
              >
              </el-date-picker>
            </div>
            <div class="div-li" style="text-align: left">
              <span>离院方式</span>
              <a-select
                :class="{
                  'w-full1': people.admissionMethod,
                  'w-full': !people.admissionMethod,
                }"
                v-model="people.dischargeMethod"
                placeholder="仅住院填写"
              >
                <a-select-option
                  :key="index"
                  :value="status.id"
                  v-for="(status, index) in dischargeMethods"
                >
                  {{ status.name }}
                </a-select-option>
              </a-select>
            </div>
            <div class="div-li"></div>
          </div>
        </div>
        <!-- <div style="height: 30px"></div> -->

        <div class="div-car">
          <div class="title">检查信息</div>
          <div class="div-ul">
            <div class="div-li" style="text-align: left">
              <span>身高</span>
              <a-input v-model="people.height" type="number" />
              <span>cm</span>
            </div>
            <div class="div-li" style="text-align: left">
              <span>体重</span>
              <a-input v-model="people.weight" type="number" />
              <span>kg</span>
            </div>

            <div class="div-li" style="text-align: left">
              <span>T值</span>
              <a-input v-model="people.tz" />
            </div>
          </div>
          <div style="height: 30px"></div>
          <div class="div-ul">
            <div class="div-li" style="text-align: left">
              <span>体温</span>
              <a-input v-model="people.temperature" type="number" />
              <span>℃</span>
            </div>
            <div class="div-li" style="text-align: left">
              <span>收缩压</span>
              <a-input v-model="people.systolicPressure" type="number" />
              <span>mmHg</span>
            </div>
            <div class="div-li" style="text-align: left">
              <span>舒张压</span>
              <a-input v-model="people.diastolicPressure" />
            </div>
            <span>mmHg</span>
          </div>
          <div style="height: 30px"></div>
          <div class="div-ul">
            <div class="div-li" style="text-align: left">
              <span>脉搏</span>
              <a-input v-model="people.pulse" type="number" />
              <span>次</span>
            </div>

            <div class="div-li" style="text-align: left">
              <span>肌酐</span>
              <a-input v-model="people.creatinine" type="number" />
              <span>umol/L</span>
            </div>
            <div class="div-li" style="text-align: left">
              <span>血氧饱和度</span>
              <a-input v-model="people.oxygenSaturation" />
            </div>
          </div>
          <div style="height: 30px"></div>
          <div class="div-ul">
            <div class="div-li" style="text-align: left">
              <span>白蛋白</span>
              <a-input v-model="people.albumin" type="number" />
            </div>
            <div class="div-li" style="text-align: left">
              <span>总蛋白</span>
              <a-input v-model="people.totalProtein" type="number" />
            </div>
            <div class="div-li" style="text-align: left">
              <span>维生素D3测定</span>
              <a-input v-model="people.vitaminD3" />
            </div>
          </div>
          <div style="height: 30px"></div>
          <div class="div-ul">
            <div class="div-li" style="text-align: left">
              <span>凝血酶原时间</span>
              <a-input v-model="people.hematocrit" type="number" />
              <span>秒</span>
            </div>
            <div class="div-li" style="text-align: left">
              <span>D-二聚体</span>
              <a-input v-model="people.dimer" type="number" />
            </div>
            <div class="div-li"></div>
          </div>
        </div>
        <!-- <div style="height: 30px"></div> -->

        <div class="div-car">
          <div class="title">诊断信息</div>
          <div class="div-ul">
            <div class="div-li" style="text-align: left">
              <span>诊断类型</span>
              <a-select class="w-full" v-model="people.diagnosisType">
                <a-select-option value="1"> 出院诊断 </a-select-option>
                <a-select-option value="2"> 入院诊断 </a-select-option>
                <a-select-option value="3"> 门诊诊断 </a-select-option>
              </a-select>
            </div>
            <div class="div-li" style="text-align: left">
              <span style="margin-right: 10px">是否主要诊断</span>
              <a-radio-group
                class="w-full text-left"
                v-model="people.isMainDiagnosis"
              >
                <a-radio value="1">是</a-radio>
                <a-radio value="0">否</a-radio>
              </a-radio-group>
            </div>
            <div class="div-li" style="text-align: left">
              <span>诊断名称</span>
              <a-select
                :class="{
                  'w-full1': people.diagnosisName,
                  'w-full': !people.diagnosisName,
                }"
                v-model="people.diagnosisName"
                show-search
                :disabled="people.patientId && flat ? true : false"
                @change="handleChange(people, people.diagnosisName)"
              >
                <a-select-option
                  :key="status.id"
                  :value="status.icdName"
                  v-for="(status, index) in icdList"
                >
                  {{ status.icdName }}
                </a-select-option>
              </a-select>
              <!-- <a-input v-model="people.diagnosisName" type="number" /> -->
            </div>
          </div>
          <div style="height: 30px"></div>
          <div class="div-ul">
            <div class="div-li" style="text-align: left">
              <span>诊断编码</span>
              <a-input v-model="people.diagnosisCode" :disabled="true" />
            </div>
            <div class="div-li" style="text-align: left">
              <span>诊断日期</span>
              <el-date-picker v-model="people.diagnosisDate" type="date">
              </el-date-picker>
            </div>
            <div class="div-li"></div>
          </div>
        </div>
        <div style="height: 20px"></div>
      </div>
    </div>
    <div v-else>
      <el-empty description="暂无病史信息"></el-empty>
    </div>
    <div>
      <p @click="handleEvaluation('PatientList')" class="div-step">下一步</p>
    </div>

    <el-dialog
      title="选择评估版本"
      :visible.sync="open"
      width="80%"
      append-to-body
      class="popup"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div>
        <a-radio-group class="w-full text-left" v-model="version">
          <a-radio :value="item.id" v-for="item in dictList" :key="item.id">
            <span>{{ item.version }}</span>
          </a-radio>
        </a-radio-group>
      </div>

      <div style="text-align: right; margin-top: 16px">
        <el-button type="primary" @click="handleStep">下一步</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import {
  patientParentIllness,
  body,
  dischargeMethods,
  admissionMethods,
} from "@/views/Patient/config";
import {
  illnessHistory,
  queryPatientIllnessHistory,
  editPatientOtherMsg,
  bindPatient,
  dictList,
  icdQuery,
} from "api/ams";
export default {
  name: "Family",
  props: {
    isEvaluation: {
      type: Boolean,
      default: false,
    },
    base: {
      type: Object,
      default: () => body,
    },
    source: {
      type: String,
      default: "normal",
    },
  },
  data() {
    return {
      open: false,
      collapse: true,
      name: "PmsPatientBody",
      // 现病史
      patientParentIllness, // 现病史
      previousSurgicalHistory: 1, // 既往手术史（1：有0：无）
      generalAnesthesiaSurgery: 1, // 全麻手术史次数
      body,
      dischargeMethods, // 离院方式
      admissionMethods, // 入院途径
      visible: false, // 弹框
      flat: false,
      dictList: [],
      version: "0",
      icdList: [],
    };
  },
  computed: {
    ...mapState("user", ["route", "query", "userInfo"]),
    ...mapState("ht", [
      "createId",
      "patientData",
      "doctorName",
      "reportId",
      "bodyArray",
      "recordPatientData",
    ]),
  },
  beforeRouteEnter(to, from, next) {
    next(async (vm) => {
      const { reportId } = vm;
      vm.body = Object.assign({}, body);
      if (reportId) {
        // let res = await queryPatientIllnessHistory({
        // 	reportId,
        // });
        // const { code, msg, data } = res;
        // if (code === 200) {
        // 	if (data[0]) {
        // 		vm.body = vm.util.filterJsonWithFields(
        // 			data[0],
        // 			vm.body
        // 		);
        // 	}
        // }
      }
    });
  },

  created() {
    this.flat = this.isEvaluation;
    if (!this.bodyArray.length) {
      this.handleNewly();
    }
    this.getDictList();
    this.geticdQuery();
    if (this.bodyArray.length) {
      this.bodyArray.forEach((item) => {
        if (!item.department) {
          item.department = this.userInfo.deptName || "";
        }
      });
    }
    this.setEvaluationPath({
      name: "evaluation",
      createId: this.createId,
      code: "",
      num: "",
      patientData: this.patientData,
      status: 1,
    });
  },
  methods: {
    ...mapMutations("ht", ["addBodyArray", "setEvaluationPath"]),
    handleChange(people, drugName) {
      this.icdList.forEach((item) => {
        if (item.icdName === drugName) {
          people.diagnosisCode = item.icdNo;
        }
      });
    },
    // 诊断信息
    async geticdQuery() {
      console.log("icdQuery");
      let res = await icdQuery();
      const { code, msg, data } = res;
      if (code === 200) {
        this.icdList = data;
      }
    },
    // 查字典表数据
    async getDictList() {
      const res = await dictList({
        pageNum: -1,
        param: {},
      });
      const { code, msg, data } = res;
      if (code === 200) {
        this.dictList = data;
        this.version = "1982749726432432128";
      }
    },
    // 开始评估
    async handleEvaluation(name) {
      await this.handleSubmit();
    },
    // 下一步 - 选择量表
    async handleStep() {
      const res = await bindPatient({
        evaluationId: this.createId,
        patientId: this.patientData.patientId,
        version: this.version,
      });
      const { code, msg, data } = res;
      if (code === 200) {
        localStorage.setItem("version", this.version);
        this.$router.push({
          path: "chooseSetMeal",
          query: {
            patientId: this.patientData.patientId,
          },
        });
      } else {
        this.$message.error(msg);
      }
      console.log("下一步");
    },
    handleNewly() {
      this.addBodyArray({
        id: "",
        outpatientNo: "", // 门诊号
        age: "", // 年龄
        department: "", // 科室
        doctor: "", // 医生
        admissionDate: "", // 入院日期
        admissionCount: "", // 入院次数
        admissionMethod: "", // 入院途径
        admissionMethodOther: "", // 入院途径其他
        bedNumber: "", // 床位号
        dischargeDate: "", // 出院日期
        dischargeMethod: "", // 离院方式

        height: "", // 身高
        weight: "", // 体重
        tz: "", // T值
        temperature: "", // 体温
        systolicPressure: "", // 收缩压
        diastolicPressure: "", // 舒张压
        pulse: "", // 脉搏
        creatinine: "", // 肌酐（umol/L）
        oxygenSaturation: "", // 血氧饱和度
        albumin: "", // 白蛋白
        totalProtein: "", // 总蛋白
        vitaminD3: "", // 维生素D3测定
        hematocrit: "", // 凝血酶原时间
        dimer: "", // D-二聚体

        diagnosisType: "", // 诊断类型
        isMainDiagnosis: "", // 是否主要诊断
        diagnosisCode: "", // 诊断编码
        diagnosisName: "", // 诊断名称
        diagnosisDate: "", // 诊断日期
      });
    },
    async handleSubmit() {
      let that = this;
      let flat = false;
      if (!that.recordPatientData?.patientId) {
        this.$message.error("请先填写基本信息并提交");
        return;
      }
      // 判断是否填写就诊号
      this.bodyArray.forEach((item) => {
        if (!item.outpatientNo) {
          flat = true;
        }
      });
      if (flat) {
        this.$message.error("请填写就诊号");
        return;
      }
      let data = JSON.parse(JSON.stringify(this.bodyArray));
      await data.forEach(async (item, index) => {
        if (!item.patientId) {
          item.patientId = this.recordPatientData.patientId;
        }
        let params = {
          param: {
            editType: "PmsPatientBody",
            model: item,
          },
        };
        const res = await editPatientOtherMsg(params);
        const { code, msg } = res;
        if (code === 200) {
          this.bodyArray.forEach((item, index) => {
            item.patientId = this.recordPatientData.patientId;
          });
          this.$message.success("提交成功");
          this.open = true;
        } else {
          this.$message.error(msg);
        }
      });
    },
    async next(save) {
      const { body } = this;
      const params = {
        param: {
          ...body,
          reportId: this.reportId,
        },
      };
      const res = await illnessHistory(params);
      const { code, msg, data } = res;
      if (code === 200) {
        let target = this.source;
        if (this.source === "normal") {
          target = save;
        }
        if (this.source === "mobile") await this.home.getFinishKey("body");
        this.$message.success(`${save === "save" ? "保存成功" : "提交成功"}`);
        this.home.submitReport(this.reportId, "", target);
      } else {
        this.$message.error(msg);
      }
    },
  },
  beforeDestroy() {
    this.body = Object.assign({}, body);
  },
};
</script>
<style scoped>
.w-full,
.w-full1 {
  width: 100%;
}
>>> .w-full .ant-select-selection__placeholder,
>>> .w-full .ant-select-search__field__placeholder {
  display: block !important;
}
>>> .ant-select-selection {
  border: none;
  border-bottom: 1px solid #888888;
}
>>> .ant-select-disabled {
  background-color: #ffffff !important;
}
>>> .ant-select-disabled .ant-select-selection {
  border-bottom: 1px dashed #888888;
}
.ant-radio-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
>>> .ant-radio-wrapper {
  display: flex;
  align-items: center;
  font-size: 18px !important;
  margin-bottom: 10px;
}
>>> .el-dialog__body {
  padding: 20px 20px 20px 20px !important;
}

.popup-p-icon {
  color: #e6a23c;
  font-size: 24px;
  margin-right: 10px;
}
>>> .el-button {
  padding: 8px 11px !important;
}
.popup-p {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-bottom: 0;
}
.div-step {
  position: fixed;
  left: 0;
  right: 0;
  margin: auto;
  bottom: 20px;
  z-index: 999;
  font-size: 18px;
  width: 300px;
  line-height: 48px;
  background: #5cc0be;
  border-radius: 6px 6px 6px 6px;
  text-align: center;
  color: #fff;
}
.div-car {
  padding: 16px;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 16px;
}
.lighten-5 {
  border-bottom: 1px solid #d9d9d9;
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.lighten-5:last-child {
  border-bottom: none !important;
}
.title {
  font-size: 16px;
  border-bottom: 1px solid #d9d9d9;
  margin-bottom: 16px;
  line-height: 20px;
  padding-bottom: 14px;
}
>>> .el-input__icon {
  display: none;
}
>>> .el-date-editor.el-input {
  width: 74%;
}
>>> .el-input--prefix .el-input__inner {
  padding: 4px 11px;
}
>>> .el-input__inner {
  font-size: 16px;
  color: #222222;
  height: 32px !important;
  line-height: 32px !important;
  border: none;
  color: rgba(0, 0, 0, 0.65);
  border-bottom: 1px solid #888888;
  border-radius: 4px;
  font-size: 14px;
}
>>> .el-input__inner::placeholder {
  color: #bfbfbf;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.5;
}

.div-title {
  flex-shrink: 0;
}
.div-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.userInfo {
  display: flex;
}
/deep/.ant-btn-success {
  color: #fff;
  background-color: #00825a;
  border-color: #00825a;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
}

.btn {
  width: 120px;
  height: 42px;
  font-size: 16px;
  margin: 10px 0;
}

.box-width {
  min-width: 84px;
  width: 84px;
  text-align: right;
  line-height: 32px;
}

.add-new-box {
  width: 100%;
  position: relative;
  height: 0px;
}

.add-new {
  position: absolute;
  right: 0;
  top: -8px;
}

.red--text-box {
  text-align: left;
  margin-bottom: 4px;
  font-size: 16px;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
}

.w-full,
.w-full1 {
  width: 100%;
}
</style>
<style lang="less" scoped>
/deep/.ant-input[disabled] {
  background-color: #ffffff !important;
}
/deep/.w-full .ant-select-selection__placeholder,
/deep/ .w-full .ant-select-search__field__placeholder {
  display: block !important;
}
/deep/.ant-select-selection {
  border: none;
  border-bottom: 1px solid #888888;
}
/deep/ .ant-card-body {
  padding-bottom: 0 !important;
}
.div-ul {
  width: 100%;
  display: flex;
  .div-li {
    font-size: 16px;
    flex: 1;
    display: flex;
    align-items: center;
    margin-right: 20px;
    position: relative;
    span {
      line-height: 32px;
      flex-shrink: 0;
    }
    .required {
      color: red;
      position: absolute;
      top: -5px;
      left: -5px;
    }
  }
}

/deep/.ant-input {
  border: none;
  border-bottom: 1px solid #888888;
}
/deep/.ant-input:focus {
  box-shadow: none !important;
}
</style>