From 02aa4d157d800650f1dc2fa2b7fbee52837df074 Mon Sep 17 00:00:00 2001 From: yxh <172933527@qq.com> Date: 星期五, 01 十二月 2023 13:46:07 +0800 Subject: [PATCH] Merge branch 'wulong' of http://116.62.18.175:6699/r/~yxh/smartor-web into yxh01 --- 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> 鍋ュ悍妗f</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> 鍖荤枟妗f</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> 鍋ュ悍妗f</span + > + 鍩烘湰淇℃伅 + </el-tab-pane> + <el-tab-pane name="medical"> + <span class="mulsz" slot="label" + ><i class="el-icon-s-management"></i> 鍖荤枟妗f</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> + <!-- 鍋ュ悍妗f妯″潡 --> <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" + >锛堢粓姝㈠師鍥狅細鎮h�呯棅鎰堝洖璁跨粨鏉燂紝缁堟鏃堕棿锛�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" + >鎮h�呴厤鍚堝害锛� <span style="color: #2775b6">楂�</span></el-col + > + </el-row> + </div> + <div style="margin-top: 10px"> + 闅忚缁撴灉锛� <span style="color: #2775b6">鎮h�呯棅鎰堬紝韬綋鍊嶆</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", //鍖荤枟妗f瀵艰埅 + 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