yxh
2023-12-01 02aa4d157d800650f1dc2fa2b7fbee52837df074
src/views/patient/patient/profile/index.vue
@@ -1,108 +1,127 @@
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="4" :xs="24">
        <el-card class="box-card">
          <!-- <div slot="header" class="clearfix">
            <span>个人信息</span>
          </div> -->
          <div class="personage">
    <!-- 头部盒子 -->
    <div class="personages">
      <el-row :gutter="20">
        <el-col :span="4"
          ><div class="headportrait">
            <div class="text-center">
              <img v-imgError="require('@/assets/common/head.jpg')" src="" />
            </div>
            <div class="information">
              <div class="info-xx">
                吴龙
                <div class="xinz-inf">+新增标签</div>
              </div>
              <div class="info-xx">男<span>66岁</span></div>
              <div class="info-xx">13803963330</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="18" :xs="24">
        <el-tabs
          type="border-card"
          v-model="activeName"
          @tab-click="handleClick"
            <div>吴大龙</div>
          </div></el-col
        >
          <el-tab-pane name="health">
            <span class="mulsz" slot="label"
              ><i class="el-icon-date"></i> 健康档案</span
        <el-col :span="8"
          ><div class="xinz-inf">
            <el-tag
              :key="tag"
              v-for="tag in dynamicTags"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
            基本信息
          </el-tab-pane>
          <el-tab-pane name="medical">
            <span class="mulsz" slot="label"
              ><i class="el-icon-s-management"></i> 医疗档案</span
              {{ tag }}
            </el-tag>
            <el-input
              class="input-new-tag"
              v-if="inputVisible"
              v-model="inputValue"
              ref="saveTagInput"
              size="small"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            >
            <el-tabs v-model="sonactiveName" @tab-click="handleClick">
              <el-tab-pane name="outpatient"
                ><span class="mulsz" slot="label"
                  >门诊({{ mznumber }})</span
                ></el-tab-pane
              >
              <el-tab-pane name="inhospital"
                ><span class="mulsz" slot="label"
                  >住院({{ zynumber }})
                </span></el-tab-pane
              >
              <el-tab-pane name="checkout"
                ><span class="mulsz" slot="label"
                  >检验({{ jynumber }})
                </span></el-tab-pane
              >
              <el-tab-pane name="examine"
                ><span class="mulsz" slot="label"
                  >检查({{ jcnumber }})
                </span></el-tab-pane
              >
              <el-tab-pane name="physical"
                ><span class="mulsz" slot="label">
                  体检({{ tjnumber }})</span
                ></el-tab-pane
              >
              <el-tab-pane name="pharmacy"
                ><span class="mulsz" slot="label"
                  >用药({{ yynumber }})
                </span></el-tab-pane
              >
            </el-tabs>
          </el-tab-pane>
          <el-tab-pane name="monitor">
            <span class="mulsz" slot="label"
              ><i class="el-icon-s-data"></i> 健康监测</span
            </el-input>
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput"
              >+ 新增标签</el-button
            >
          </div></el-col
        >
        <el-col :span="4"
          ><div class="info-xx">男<span>66岁</span></div></el-col
        >
        <el-col :span="4"><div class="info-xx">13803963330</div></el-col>
      </el-row>
    </div>
            <el-tabs v-model="sontwoactiveName" @tab-click="handleClick">
              <el-tab-pane name="blood"
                ><span class="mulsz" slot="label"
                  ><i class="el-icon-s-operation"></i> 血压</span
                ></el-tab-pane
              >
              <el-tab-pane name="glucose"
                ><span class="mulsz" slot="label"
                  ><i class="el-icon-odometer"></i>血糖
                </span></el-tab-pane
              >
              <el-tab-pane name="weight"
                ><span class="mulsz" slot="label"
                  ><i class="el-icon-s-data"></i>体重
                </span></el-tab-pane
              >
            </el-tabs></el-tab-pane
    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane name="health">
        <span class="mulsz" slot="label"
          ><i class="el-icon-date"></i> 健康档案</span
        >
        基本信息
      </el-tab-pane>
      <el-tab-pane name="medical">
        <span class="mulsz" slot="label"
          ><i class="el-icon-s-management"></i> 医疗档案</span
        >
        <el-tabs v-model="sonactiveName" @tab-click="handleClick">
          <el-tab-pane name="outpatient"
            ><span class="mulsz" slot="label"
              >门诊({{ mznumber }})</span
            ></el-tab-pane
          >
          <el-tab-pane name="serve">
            <span class="mulsz" slot="label"
              ><i class="el-icon-s-custom"></i> 服务记录</span
            >
            定时任务补偿</el-tab-pane
          <el-tab-pane name="inhospital"
            ><span class="mulsz" slot="label"
              >住院({{ zynumber }})
            </span></el-tab-pane
          >
          <el-tab-pane name="checkout"
            ><span class="mulsz" slot="label"
              >检验({{ jynumber }})
            </span></el-tab-pane
          >
          <el-tab-pane name="examine"
            ><span class="mulsz" slot="label"
              >检查({{ jcnumber }})
            </span></el-tab-pane
          >
          <el-tab-pane name="physical"
            ><span class="mulsz" slot="label">
              体检({{ tjnumber }})</span
            ></el-tab-pane
          >
          <el-tab-pane name="pharmacy"
            ><span class="mulsz" slot="label"
              >用药({{ yynumber }})
            </span></el-tab-pane
          >
        </el-tabs>
      </el-col>
    </el-row>
      </el-tab-pane>
      <el-tab-pane name="monitor">
        <span class="mulsz" slot="label"
          ><i class="el-icon-s-data"></i> 健康监测</span
        >
        <el-tabs v-model="sontwoactiveName" @tab-click="handleClick">
          <el-tab-pane name="blood"
            ><span class="mulsz" slot="label"
              ><i class="el-icon-s-operation"></i> 血压</span
            ></el-tab-pane
          >
          <el-tab-pane name="glucose"
            ><span class="mulsz" slot="label"
              ><i class="el-icon-odometer"></i>血糖
            </span></el-tab-pane
          >
          <el-tab-pane name="weight"
            ><span class="mulsz" slot="label"
              ><i class="el-icon-s-data"></i>体重
            </span></el-tab-pane
          >
        </el-tabs></el-tab-pane
      >
      <el-tab-pane name="serve">
        <span class="mulsz" slot="label"
          ><i class="el-icon-s-custom"></i> 服务记录</span
        >
      </el-tab-pane>
    </el-tabs>
    <!-- 健康档案模块 -->
    <div class="information-content" v-if="activeName == 'health'">
      <div class="top-message">
@@ -257,7 +276,62 @@
    </div>
    <!-- 服务记录 -->
    <div class="medical-record" v-else-if="activeName == 'serve'">sdaad</div>
    <div
      class="medical-recordc"
      style="margin-top: 20px; font-size: 20px !important"
      v-else-if="activeName == 'serve'"
    >
      <el-tabs type="border-card">
        <el-tab-pane label="首次随访">
          <div style="margin-top: 10px">
            随访状态:已终止<span style="color: #2775b6"
              >(终止原因:患者痊愈回访结束,终止时间:2023-12-18 12:00)</span
            >
          </div>
          <div style="margin-top: 10px">
            随访发送时间:<span style="color: #2775b6">2023-11-23 12:00</span>
          </div>
          <div style="margin-top: 10px">
            随访完成时间:<span style="color: #2775b6">2023-12-18 12:00</span>
          </div>
          <div style="margin-top: 10px">
            疼痛程度:<span style="color: #2775b6">中度</span>
          </div>
          <div
            style="
              font-size: 22px;
              padding-left: 5px;
              margin: 15px 0;
              border-left: 4px solid rgb(65, 161, 190);
            "
          >
            人工随访记录
          </div>
          <div style="margin-top: 10px">
            <el-row :gutter="20">
              <el-col :span="6"
                >随访日期:
                <span style="color: #2775b6">2023-11-22 11:22</span></el-col
              >
              <el-col :span="6"
                >随访人: <span style="color: #2775b6">吴小龙</span></el-col
              >
              <el-col :span="6"
                >患者配合度: <span style="color: #2775b6">高</span></el-col
              >
            </el-row>
          </div>
          <div style="margin-top: 10px">
            随访结果: <span style="color: #2775b6">患者痊愈,身体倍棒</span>
          </div>
          <div style="margin-top: 10px">
            随访备注: <span style="color: #2775b6">提醒注意饮食健康</span>
          </div>
        </el-tab-pane>
        <el-tab-pane label="二次随访">二次随访</el-tab-pane>
        <el-tab-pane label="三次随访">三次随访</el-tab-pane>
      </el-tabs>
    </div>
    <!-- 健康监测 -->
    <div class="medical-record" v-show="activeName == 'monitor'">
      <!-- 血压图标 -->
@@ -318,6 +392,9 @@
      activeName: "health", //一类导航
      sonactiveName: "outpatient", //健康监测导航
      sontwoactiveName: "blood", //医疗档案导航
      dynamicTags: ["标签一", "标签二", "标签三"],
      inputVisible: false,
      inputValue: "",
      // 查询参数
      queryParams: {
        pageNum: 1,
@@ -388,15 +465,27 @@
        this.loading = false;
      });
    },
    // getUser() {
    //   getUserProfile().then((response) => {
    //     this.user = response.data;
    //     this.roleGroup = response.roleGroup;
    //     this.postGroup = response.postGroup;
    //   });
    // },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    // 血压图表部分
@@ -658,42 +747,57 @@
</script>
<style lang="scss" scoped>
.personage {
  display: flex;
  .text-center {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    img {
      width: 100%;
.personages {
  height: 88px;
  width: 100%;
  background-color: #2486b9;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 10px;
  line-height: 48px;
  font-size: 25px;
  font-weight: 600;
  color: #ffffff;
  .headportrait {
    display: flex;
    .text-center {
      width: 55px;
      height: 55px;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }
  .information {
    font-size: 25px;
    .info-xx {
      margin-top: 15px;
      border-bottom: 2px solid rgb(65, 161, 190);
      display: flex;
      span {
        margin-left: 30px;
      }
      .xinz-inf {
        cursor: pointer;
        margin-left: 20px;
        height: 23px;
        line-height: 23px;
        padding: 2px;
        align-items: center;
        font-size: 16px;
        color: rgb(85, 151, 250);
        border: 1px solid #439fff;
        border-radius: 9px;
      }
  .xinz-inf {
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 48px;
    .el-tag + .el-tag {
      margin-left: 10px;
    }
    .button-new-tag {
      margin-left: 10px;
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
    }
    .input-new-tag {
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
    }
  }
}
.el-tabs--border-card {
  font-size: 25px;
  // font-size: 25px;
  .mulsz {
    font-size: 25px;
    margin-top: 20px;
@@ -710,6 +814,7 @@
    margin-left: 100px;
    .detailed {
      width: 70%;
      border-radius: 8px;
      padding: 30px;
      margin-bottom: 30px;
      background-color: #ddf0f8;
@@ -741,9 +846,10 @@
    margin-bottom: 25px;
    margin-left: 100px;
    .Table-screen {
      width: 70%;
      width: 88%;
      padding: 30px;
      margin-bottom: 30px;
      border-radius: 8px;
      background-color: #ddf0f8;
      font-size: 20px !important;
    }