From 0d9583387e729001c30668ca851564ef3675bc62 Mon Sep 17 00:00:00 2001
From: WXL <1785969728@qq.com>
Date: 星期一, 04 十二月 2023 10:20:41 +0800
Subject: [PATCH] 提交信息
---
src/views/patient/patient/profile/index.vue | 368 +++++++++++++++++++++++++++++++++------------------
1 files changed, 237 insertions(+), 131 deletions(-)
diff --git a/src/views/patient/patient/profile/index.vue b/src/views/patient/patient/profile/index.vue
index cd3849d..3475bfd 100644
--- a/src/views/patient/patient/profile/index.vue
+++ b/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;
}
--
Gitblit v1.9.3