李进才
2 years ago
parent
16fa6bb8b9
commit
5f104de493
26 changed files with 2525 additions and 3624 deletions
@ -1,316 +0,0 @@ |
||||
<template> |
||||
<div> |
||||
<div class="msg__wrap"> |
||||
<section class="online__footer" |
||||
ref="footerRef"> |
||||
<section style="margin-bottom: 8px;display: flex;justify-content: space-between;"> |
||||
<div class="online-footer-item" |
||||
style="margin-left: 4px;"> |
||||
<van-icon name="photo-o" |
||||
size="25" |
||||
color="#929292" |
||||
@click="choiceImg" /> |
||||
<div style="margin-top: 2px;">发图片</div> |
||||
</div> |
||||
|
||||
<div class="online-footer-item"> |
||||
<van-popover v-model:show="dialog.showWord" |
||||
placement="top" |
||||
:show-arrow="false" |
||||
style="left: 10px;" |
||||
@open="cancelRevoke"> |
||||
<div style="width: 70vw;min-height: 150px;max-height: 50vh;padding: 10px 16px;overflow-y: auto;overflow-x: hidden;"> |
||||
<div v-for="(item, i) in info.wordList" |
||||
class="word-item" |
||||
@click="clickWord(item)" |
||||
:key="i"> |
||||
<span>{{ i + 1 }}、</span> |
||||
<span>{{ item.content }}</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<template #reference> |
||||
<van-icon name="coupon-o" |
||||
color="#929292" |
||||
size="25" /> |
||||
<div style="margin-top: 2px;">常用语</div> |
||||
</template> |
||||
</van-popover> |
||||
</div> |
||||
|
||||
<div class="online-footer-item" |
||||
@click="dialog.showTreat = true; cancelRevoke()"> |
||||
<van-icon name="records" |
||||
color="#929292" |
||||
size="25" /> |
||||
<div style="margin-top: 2px;">就诊记录</div> |
||||
</div> |
||||
|
||||
<div class="online-footer-item" |
||||
@click="dialog.renderAdvEvent = true; dialog.showAdvEvent = true; cancelRevoke()"> |
||||
<svg t="1677506651832" |
||||
class="icon" |
||||
viewBox="0 0 1024 1024" |
||||
version="1.1" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
p-id="3724" |
||||
width="24" |
||||
height="24"> |
||||
<path d="M928.07 721.416L617.879 153.499c-2.762-5.523-6.445-10.125-9.207-14.727-19.328-34.058-55.227-56.148-94.805-56.148-31.296 0-59.829 13.809-80.079 36.816-10.125 8.286-18.41 18.411-23.933 29.457l-304.668 538.46c-7.363 11.965-12.887 24.852-18.41 37.74-13.805 18.408-20.25 40.5-20.25 63.51-0.918 60.75 47.863 111.375 109.535 113.215h359.895c94.809 0 193.297-0.918 279.816 0h25.773c46.023 0 108.613-11.965 109.535-112.293-0.921-22.093-12.886-48.785-23.011-68.113z m-87.445 124.258H830.5h0.922-24.852c-83.762-0.918-179.488 0-271.531 0-95.73 0-194.214 0.924-280.738 0h-78.238c-30.375-0.918-55.227-25.77-54.309-57.066 0-11.963 3.684-23.928 11.047-34.053l2.762-5.525c4.601-11.965 10.125-23.01 16.566-34.057l305.59-538.462 0.922-1.84c2.763-4.605 5.522-9.207 10.125-11.969l4.603-4.601c11.045-12.887 25.772-20.25 40.499-20.25 19.328 0 37.738 11.046 46.941 28.535l2.762 3.679c1.84 2.762 4.602 6.446 6.445 9.207l310.191 567.917v0.918c10.125 18.412 15.645 34.059 15.645 39.578-1.84 55.231-21.168 57.989-55.227 57.989z m0 0" |
||||
p-id="3725"></path> |
||||
<path d="M508.344 625.689c15.648 0 27.613-11.967 27.613-27.613V303.53c0-15.644-11.965-27.613-27.613-27.613-15.647 0-27.613 11.969-27.613 27.613v294.546c-0.001 15.647 11.965 27.613 27.613 27.613z m0 0M467.844 706.689a36.826 36.826 0 0 0 18.405 31.887 36.826 36.826 0 0 0 36.825 0 36.821 36.821 0 0 0 18.406-31.887 36.826 36.826 0 0 0-18.406-31.891 36.835 36.835 0 0 0-36.825 0 36.827 36.827 0 0 0-18.405 31.891z m0 0" |
||||
p-id="3726"></path> |
||||
</svg> |
||||
<div style="margin-top: 2px;">不良事件</div> |
||||
</div> |
||||
</section> |
||||
<slot></slot> |
||||
</section> |
||||
|
||||
<section class="treat"> |
||||
<van-popup v-model:show="dialog.showTreat" |
||||
position="right" |
||||
:style="{ height: '100%', 'width': '75%' }"> |
||||
<div style="font-size: 15px;font-weight: bolder;color: #606266;padding: 10px;">就诊记录</div> |
||||
<section v-if="dialog.treatList && dialog.treatList.length > 0"> |
||||
<van-cell v-for="(treat, k) in dialog.treatList" |
||||
:key="k"> |
||||
<div class="treat_item_time">{{ treat.registerDate }}</div> |
||||
<div class="treat_item"> |
||||
<div>主诉：</div> |
||||
<div>{{ treat.complaint }}</div> |
||||
</div> |
||||
<div class="treat_item"> |
||||
<div>症状：</div> |
||||
<div>{{ treat.symptom }}</div> |
||||
</div> |
||||
<div class="treat_item"> |
||||
<div>诊断：</div> |
||||
<div>{{ treat.diagnose }}</div> |
||||
</div> |
||||
<div class="treat_item"> |
||||
<div>门诊号：</div> |
||||
<div>{{ treat.mzNum }}</div> |
||||
</div> |
||||
<div class="treat_item"> |
||||
<div>医生：</div> |
||||
<div>{{ treat.doctName }}</div> |
||||
</div> |
||||
</van-cell> |
||||
</section> |
||||
|
||||
<van-empty v-else |
||||
:image-size="[60, 40]" |
||||
description="暂无就诊记录" /> |
||||
</van-popup> |
||||
</section> |
||||
|
||||
<AdverseEvent v-if="dialog.renderAdvEvent" |
||||
v-model:show="dialog.showAdvEvent" |
||||
:user="user" |
||||
:setting="setting" /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { reactive, ref, watch } from 'vue' |
||||
import ImageUtil from '@/utils/image-util.mjs' |
||||
import { axios } from 'axios' |
||||
import AdverseEvent from '@/views/online/components/adverse-event.vue' |
||||
|
||||
export default { |
||||
components: { AdverseEvent }, |
||||
props: { |
||||
user: { |
||||
type: Object, |
||||
default: () => { } |
||||
}, |
||||
setting: { |
||||
type: Object, |
||||
default: () => { } |
||||
}, |
||||
disabled: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
userId: String, |
||||
onSend: Function, |
||||
deptCode: String |
||||
}, |
||||
setup(props, context) { |
||||
const dialog = reactive({ |
||||
test: '1', |
||||
showTreat: false, |
||||
treatList: [], |
||||
showPopover: false, |
||||
showAdvEvent: false, // 显示不良事件上报 |
||||
showNew: false, |
||||
showWord: false, |
||||
showNew: false, |
||||
renderAdvEvent: false |
||||
}) |
||||
|
||||
const info = reactive({ |
||||
avatar: '', |
||||
name: '', |
||||
content: '', |
||||
//----------------- |
||||
index: -1, |
||||
test: '你', |
||||
disabled: false, |
||||
}) |
||||
|
||||
const footerRef = ref() |
||||
|
||||
function choiceImg() { |
||||
cancelRevoke() |
||||
if (props.disabled) return |
||||
const input = document.createElement('input') |
||||
input.type = 'file' |
||||
input.accept = 'image/*' |
||||
input.onchange = async function (e) { |
||||
const files = e.target.files || e.dataTransfer.files |
||||
if (!files || files.length === 0) return vant.Toast('请选择文件') |
||||
|
||||
const resImg = await ImageUtil.compressImage(files[0]) |
||||
|
||||
if (props.onSend instanceof Function) props.onSend({ |
||||
msgType: 'image', |
||||
content: resImg.base64, |
||||
width: resImg.width, |
||||
height: resImg.height, |
||||
}) |
||||
} |
||||
input.click() |
||||
} |
||||
|
||||
watch(() => dialog.showWord, (v) => { |
||||
if (v) { |
||||
setTimeout(() => { |
||||
const dom = document.querySelector(".van-popover") |
||||
if (dom) { |
||||
dom.style.top = '' |
||||
dom.style.bottom = '130px' |
||||
} |
||||
}, 50) |
||||
getWord() |
||||
} |
||||
}) |
||||
|
||||
function getWord() { |
||||
if (!props.userId) return vant.Toast.fail('用户id缺失') |
||||
|
||||
axios.RGet(`/micro/online_common_word/getByUserId`, { |
||||
userId: props.userId, |
||||
deptCode: props.deptCode |
||||
}).then((resp) => { |
||||
if (resp.code === 200) { |
||||
info.wordList = resp.data |
||||
} |
||||
}) |
||||
} |
||||
|
||||
|
||||
watch(() => dialog.showTreat, (v) => { |
||||
if (v) getTreatRecord() |
||||
}) |
||||
|
||||
function getTreatRecord() { |
||||
let patientId, deptCode |
||||
if (props.user) { |
||||
patientId = props.user.fkUserId |
||||
deptCode = props.user.deptCode |
||||
} |
||||
|
||||
if (!patientId || !deptCode) return console.log('查询就诊记录参数缺失-----------'); |
||||
|
||||
axios.RGet(`/wx/treat/getTreatList.do`, { patientId, deptCode }).then((resp) => { |
||||
if (resp.code === 200) { |
||||
dialog.treatList = resp.data |
||||
} |
||||
}) |
||||
} |
||||
|
||||
function clickWord(item) { |
||||
context.emit('text', item.content) |
||||
dialog.showWord = false |
||||
} |
||||
|
||||
function cancelRevoke() { |
||||
context.emit('cancelRevoke') |
||||
} |
||||
|
||||
return { |
||||
dialog, |
||||
info, |
||||
footerRef, |
||||
choiceImg, |
||||
getTreatRecord, |
||||
clickWord, |
||||
cancelRevoke |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.online__footer { |
||||
border-top: 1px solid var(--border-b); |
||||
border-bottom: 1px solid var(--border-b); |
||||
background-color: rgb(246, 246, 246); |
||||
padding: 10px 8px 22px 8px; |
||||
box-shadow: -1px -2px 8px rgba(0, 0, 0, 0.1); |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.online-footer-item { |
||||
text-align: center; |
||||
font-size: 13px; |
||||
color: #929292; |
||||
} |
||||
|
||||
.treat .van-cell { |
||||
width: calc(100% - 8px); |
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%); |
||||
border: 1px solid #ebeef5; |
||||
transition: 0.3 time; |
||||
margin: 5px 4px; |
||||
padding: 10px; |
||||
} |
||||
|
||||
.treat_item_time { |
||||
text-align: left; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.treat_item { |
||||
text-align: left; |
||||
} |
||||
|
||||
.treat_item div:nth-child(1) { |
||||
position: absolute; |
||||
color: #606266; |
||||
font-weight: bold; |
||||
width: 60px; |
||||
overflow-wrap: normal; |
||||
} |
||||
|
||||
.treat_item div:nth-child(2) { |
||||
padding-left: 50px; |
||||
min-height: 24px; |
||||
} |
||||
|
||||
.treat_item:nth-child(5) div:nth-child(1) { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.word-item { |
||||
padding: 8px 5px; |
||||
border-bottom: 1px solid var(--border-c); |
||||
} |
||||
|
||||
.word-item:hover { |
||||
background-color: var(--border-b); |
||||
} |
||||
</style> |
||||
@ -0,0 +1,347 @@ |
||||
<template> |
||||
<div> |
||||
<div class="msg__wrap"> |
||||
<section class="online__footer" |
||||
ref="footerRef"> |
||||
<section style="margin-bottom: 8px;display: flex;justify-content: space-between;"> |
||||
<van-uploader :before-read="onBeforeRead" |
||||
:after-read="onAffterRead"> |
||||
<div class="online-footer-item" |
||||
style="margin-left: 4px;"> |
||||
<van-icon name="photo-o" |
||||
size="25" |
||||
color="#929292" /> |
||||
<div style="margin-top: 2px;">发图片</div> |
||||
<!-- <van-icon name="photo-o" |
||||
size="25" |
||||
color="#929292" |
||||
@click="choiceImg" /> |
||||
<div style="margin-top: 2px;">发图片</div> --> |
||||
</div> |
||||
</van-uploader> |
||||
|
||||
<div class="online-footer-item"> |
||||
<van-popover v-model:show="dialog.showWord" |
||||
placement="top" |
||||
:show-arrow="false" |
||||
style="left: 10px;" |
||||
@open="cancelRevoke"> |
||||
<div style="width: 70vw;min-height: 150px;max-height: 50vh;padding: 10px 16px;overflow-y: auto;overflow-x: hidden;"> |
||||
<div v-for="(item, i) in info.wordList" |
||||
class="word-item" |
||||
@click="clickWord(item)" |
||||
:key="i"> |
||||
<span>{{ i + 1 }}、</span> |
||||
<span>{{ item.content }}</span> |
||||
</div> |
||||
</div> |
||||
|
||||
<template #reference> |
||||
<van-icon name="coupon-o" |
||||
color="#929292" |
||||
size="25" /> |
||||
<div style="margin-top: 2px;">常用语</div> |
||||
</template> |
||||
</van-popover> |
||||
</div> |
||||
|
||||
<div class="online-footer-item" |
||||
@click="dialog.showTreat = true; cancelRevoke()"> |
||||
<van-icon name="records" |
||||
color="#929292" |
||||
size="25" /> |
||||
<div style="margin-top: 2px;">就诊记录</div> |
||||
</div> |
||||
|
||||
<div class="online-footer-item" |
||||
@click="dialog.renderAdvEvent = true; dialog.showAdvEvent = true; cancelRevoke()"> |
||||
<svg t="1677506651832" |
||||
class="icon" |
||||
viewBox="0 0 1024 1024" |
||||
version="1.1" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
p-id="3724" |
||||
width="24" |
||||
height="24"> |
||||
<path d="M928.07 721.416L617.879 153.499c-2.762-5.523-6.445-10.125-9.207-14.727-19.328-34.058-55.227-56.148-94.805-56.148-31.296 0-59.829 13.809-80.079 36.816-10.125 8.286-18.41 18.411-23.933 29.457l-304.668 538.46c-7.363 11.965-12.887 24.852-18.41 37.74-13.805 18.408-20.25 40.5-20.25 63.51-0.918 60.75 47.863 111.375 109.535 113.215h359.895c94.809 0 193.297-0.918 279.816 0h25.773c46.023 0 108.613-11.965 109.535-112.293-0.921-22.093-12.886-48.785-23.011-68.113z m-87.445 124.258H830.5h0.922-24.852c-83.762-0.918-179.488 0-271.531 0-95.73 0-194.214 0.924-280.738 0h-78.238c-30.375-0.918-55.227-25.77-54.309-57.066 0-11.963 3.684-23.928 11.047-34.053l2.762-5.525c4.601-11.965 10.125-23.01 16.566-34.057l305.59-538.462 0.922-1.84c2.763-4.605 5.522-9.207 10.125-11.969l4.603-4.601c11.045-12.887 25.772-20.25 40.499-20.25 19.328 0 37.738 11.046 46.941 28.535l2.762 3.679c1.84 2.762 4.602 6.446 6.445 9.207l310.191 567.917v0.918c10.125 18.412 15.645 34.059 15.645 39.578-1.84 55.231-21.168 57.989-55.227 57.989z m0 0" |
||||
p-id="3725"></path> |
||||
<path d="M508.344 625.689c15.648 0 27.613-11.967 27.613-27.613V303.53c0-15.644-11.965-27.613-27.613-27.613-15.647 0-27.613 11.969-27.613 27.613v294.546c-0.001 15.647 11.965 27.613 27.613 27.613z m0 0M467.844 706.689a36.826 36.826 0 0 0 18.405 31.887 36.826 36.826 0 0 0 36.825 0 36.821 36.821 0 0 0 18.406-31.887 36.826 36.826 0 0 0-18.406-31.891 36.835 36.835 0 0 0-36.825 0 36.827 36.827 0 0 0-18.405 31.891z m0 0" |
||||
p-id="3726"></path> |
||||
</svg> |
||||
<div style="margin-top: 2px;">不良事件</div> |
||||
</div> |
||||
</section> |
||||
<slot></slot> |
||||
</section> |
||||
|
||||
<section class="treat"> |
||||
<van-popup v-model:show="dialog.showTreat" |
||||
position="right" |
||||
:style="{ height: '100%', 'width': '75%' }"> |
||||
<div style="font-size: 15px;font-weight: bolder;color: #606266;padding: 10px;">就诊记录</div> |
||||
<section v-if="dialog.treatList && dialog.treatList.length > 0"> |
||||
<van-cell v-for="(treat, k) in dialog.treatList" |
||||
:key="k"> |
||||
<div class="treat_item_time">{{ treat.registerDate }}</div> |
||||
<div class="treat_item"> |
||||
<div>主诉：</div> |
||||
<div>{{ treat.complaint }}</div> |
||||
</div> |
||||
<div class="treat_item"> |
||||
<div>症状：</div> |
||||
<div>{{ treat.symptom }}</div> |
||||
</div> |
||||
<div class="treat_item"> |
||||
<div>诊断：</div> |
||||
<div>{{ treat.diagnose }}</div> |
||||
</div> |
||||
<div class="treat_item"> |
||||
<div>门诊号：</div> |
||||
<div>{{ treat.mzNum }}</div> |
||||
</div> |
||||
<div class="treat_item"> |
||||
<div>医生：</div> |
||||
<div>{{ treat.doctName }}</div> |
||||
</div> |
||||
</van-cell> |
||||
</section> |
||||
|
||||
<van-empty v-else |
||||
:image-size="[60, 40]" |
||||
description="暂无就诊记录" /> |
||||
</van-popup> |
||||
</section> |
||||
|
||||
<AdverseEvent v-if="dialog.renderAdvEvent" |
||||
v-model:show="dialog.showAdvEvent" |
||||
:user="user" |
||||
:setting="setting" /> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { reactive, ref, watch } from 'vue' |
||||
import ImageUtil from '@/utils/image-util.mjs' |
||||
import { axios } from 'axios' |
||||
import AdverseEvent from '@/views/online/components/adverse-event.vue' |
||||
|
||||
export default { |
||||
components: { AdverseEvent }, |
||||
props: { |
||||
user: { |
||||
type: Object, |
||||
default: () => { } |
||||
}, |
||||
setting: { |
||||
type: Object, |
||||
default: () => { } |
||||
}, |
||||
disabled: { |
||||
type: Boolean, |
||||
default: false, |
||||
}, |
||||
userId: String, |
||||
onSend: Function, |
||||
deptCode: String |
||||
}, |
||||
setup(props, context) { |
||||
const dialog = reactive({ |
||||
test: '1', |
||||
showTreat: false, |
||||
treatList: [], |
||||
showPopover: false, |
||||
showAdvEvent: false, // 显示不良事件上报 |
||||
showNew: false, |
||||
showWord: false, |
||||
showNew: false, |
||||
renderAdvEvent: false |
||||
}) |
||||
|
||||
const info = reactive({ |
||||
avatar: '', |
||||
name: '', |
||||
content: '', |
||||
//----------------- |
||||
index: -1, |
||||
test: '你', |
||||
disabled: false, |
||||
}) |
||||
|
||||
const footerRef = ref() |
||||
|
||||
function choiceImg() { |
||||
cancelRevoke() |
||||
if (props.disabled) return |
||||
const input = document.createElement('input') |
||||
input.type = 'file' |
||||
input.accept = 'image/*' |
||||
input.onchange = async function (e) { |
||||
console.log('e', e) |
||||
const files = e.target.files || e.dataTransfer.files |
||||
if (!files || files.length === 0) return vant.Toast('请选择文件') |
||||
|
||||
const resImg = await ImageUtil.compressImage(files[0]) |
||||
|
||||
if (props.onSend instanceof Function) props.onSend({ |
||||
msgType: 'image', |
||||
content: resImg.base64, |
||||
width: resImg.width, |
||||
height: resImg.height, |
||||
}) |
||||
|
||||
} |
||||
input.click() |
||||
} |
||||
|
||||
watch(() => dialog.showWord, (v) => { |
||||
if (v) { |
||||
setTimeout(() => { |
||||
const dom = document.querySelector(".van-popover") |
||||
if (dom) { |
||||
dom.style.top = '' |
||||
dom.style.bottom = '130px' |
||||
} |
||||
}, 50) |
||||
getWord() |
||||
} |
||||
}) |
||||
|
||||
function getWord() { |
||||
if (!props.userId) return vant.Toast.fail('用户id缺失') |
||||
|
||||
axios.RGet(`/micro/online_common_word/getByUserId`, { |
||||
userId: props.userId, |
||||
deptCode: props.deptCode |
||||
}).then((resp) => { |
||||
if (resp.code === 200) { |
||||
info.wordList = resp.data |
||||
} |
||||
}) |
||||
} |
||||
|
||||
|
||||
watch(() => dialog.showTreat, (v) => { |
||||
if (v) getTreatRecord() |
||||
}) |
||||
|
||||
function getTreatRecord() { |
||||
let patientId, deptCode |
||||
if (props.user) { |
||||
patientId = props.user.fkUserId |
||||
deptCode = props.user.deptCode |
||||
} |
||||
|
||||
if (!patientId || !deptCode) return console.log('查询就诊记录参数缺失-----------'); |
||||
|
||||
axios.RGet(`/wx/treat/getTreatList.do`, { patientId, deptCode }).then((resp) => { |
||||
if (resp.code === 200) { |
||||
dialog.treatList = resp.data |
||||
} |
||||
}) |
||||
} |
||||
|
||||
function clickWord(item) { |
||||
context.emit('text', item.content) |
||||
dialog.showWord = false |
||||
} |
||||
|
||||
function cancelRevoke() { |
||||
context.emit('cancelRevoke') |
||||
} |
||||
|
||||
function onBeforeRead(file) { |
||||
return ImageUtil.compressImage(file) |
||||
} |
||||
|
||||
function onAffterRead(file) { |
||||
if (props.onSend instanceof Function) { |
||||
const img_url = file.content |
||||
const img = new Image() |
||||
img.src = img_url |
||||
img.onload = function () { |
||||
props.onSend({ |
||||
msgType: 'image', |
||||
content: file.content, |
||||
width: img.width, |
||||
height: img.height, |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
|
||||
return { |
||||
dialog, |
||||
info, |
||||
footerRef, |
||||
choiceImg, |
||||
getTreatRecord, |
||||
clickWord, |
||||
cancelRevoke, |
||||
onBeforeRead, |
||||
onAffterRead |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.online__footer { |
||||
border-top: 1px solid var(--border-b); |
||||
border-bottom: 1px solid var(--border-b); |
||||
background-color: rgb(246, 246, 246); |
||||
padding: 10px 8px 22px 8px; |
||||
box-shadow: -1px -2px 8px rgba(0, 0, 0, 0.1); |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.online-footer-item { |
||||
text-align: center; |
||||
font-size: 13px; |
||||
color: #929292; |
||||
} |
||||
|
||||
.treat .van-cell { |
||||
width: calc(100% - 8px); |
||||
box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%); |
||||
border: 1px solid #ebeef5; |
||||
transition: 0.3 time; |
||||
margin: 5px 4px; |
||||
padding: 10px; |
||||
} |
||||
|
||||
.treat_item_time { |
||||
text-align: left; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.treat_item { |
||||
text-align: left; |
||||
} |
||||
|
||||
.treat_item div:nth-child(1) { |
||||
position: absolute; |
||||
color: #606266; |
||||
font-weight: bold; |
||||
width: 60px; |
||||
overflow-wrap: normal; |
||||
} |
||||
|
||||
.treat_item div:nth-child(2) { |
||||
padding-left: 50px; |
||||
min-height: 24px; |
||||
} |
||||
|
||||
.treat_item:nth-child(5) div:nth-child(1) { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.word-item { |
||||
padding: 8px 5px; |
||||
border-bottom: 1px solid var(--border-c); |
||||
} |
||||
|
||||
.word-item:hover { |
||||
background-color: var(--border-b); |
||||
} |
||||
</style> |
||||
@ -0,0 +1,201 @@ |
||||
<template> |
||||
<div> |
||||
<section class="user-list__wrap"> |
||||
<van-search v-model="key" |
||||
placeholder="请输入搜索关键词" /> |
||||
<transition mode="out-in"> |
||||
<div v-if="info.showUsersData"> |
||||
<van-empty v-if="!userList || userList.length === 0" |
||||
image-size="6rem" |
||||
description="暂无聊天信息" /> |
||||
|
||||
<van-swipe-cell v-for="(item, i) in userList.filter(data => !key || data.name.toLowerCase().includes(key.toLowerCase()))" |
||||
:key="i" |
||||
stop-propagation |
||||
@click="$emit('click-user', $event, i, item)"> |
||||
<div style="border-bottom: 1px solid var(--border-a);margin: 0;background-color: @white;"> |
||||
<div class="user-item__box"> |
||||
<van-badge :content="!item.unreadCount ? null : item.unreadCount" |
||||
color="var(--color-danger)"> |
||||
|
||||
<div v-if="!item.avatar && item.name" |
||||
class="user-item--avatar--err">{{ item.name.substring(0, 1) }}</div> |
||||
|
||||
<van-image v-else |
||||
:width="50" |
||||
:height="50" |
||||
class="user-item--avatar" |
||||
:src="item.avatar"> |
||||
<template #error> |
||||
<div v-if="item.name" |
||||
class="user-item--avatar--err">{{ item.name.substring(0, 1) }}</div> |
||||
</template> |
||||
</van-image> |
||||
</van-badge> |
||||
|
||||
<div style="width: 100%;padding: 0px 8px;overflow: hidden;display: flex;flex-direction: column;justify-content: space-evenly;"> |
||||
|
||||
<div style="font-size: 13px;font-weight: bold;color: var(--text-b);">{{ item.name }}</div> |
||||
<div style="width: 100%;height: 22px; line-height: 22px; display: flex; justify-content: space-between;align-items: center;overflow: hidden;"> |
||||
<div class="user-item--msg-content">{{ UserListTipTag(item) }}</div> |
||||
<div class="user-item--msg-time">{{ getShowTime(item.tipTime) }}</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div style="padding: 3px 18px 5px 10px;display: flex;justify-content: space-between;align-items: center;"> |
||||
<div style="color: var(--text-b);font-size: 13px;">{{ DateUtil.format(item.orderTime, 'yyyy-MM-dd HH:mm:ss') }}</div> |
||||
<div style="color: var(--text-b);font-size: 13px;">NO：{{ item.orderId }}</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<template #right> |
||||
<template v-if="item.orderState === 0"> |
||||
<van-button square |
||||
style="height: 100%;width: 90px;" |
||||
icon="stop-circle-o" |
||||
type="danger" |
||||
text="结束订单" |
||||
:disabled="info.closeDisabled" |
||||
@click="$emit('close-order', item.orderId)"> |
||||
<template #icon> |
||||
<svg t="1676513693561" |
||||
class="icon" |
||||
viewBox="0 0 1024 1024" |
||||
version="1.1" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
p-id="2918" |
||||
width="24" |
||||
height="24"> |
||||
<path d="M512 469.35c-15.26 0-27.63-12.37-27.63-27.63V151.83c0-15.26 12.37-27.63 27.63-27.63s27.63 12.37 27.63 27.63v289.89c0 15.26-12.37 27.63-27.63 27.63z" |
||||
p-id="2919"></path> |
||||
<path d="M643.26 215.69c0 10.19 5.54 19.67 14.6 24.33 106 54.54 177.82 166.49 173.92 294.54-4.98 163.38-136.02 299.05-299.15 309.34-185.71 11.7-340.56-136.05-340.56-319.29 0-123.92 70.86-231.53 174.16-284.64 9.03-4.64 14.51-14.16 14.51-24.32 0-20.48-21.65-34.21-39.86-24.84-129.5 66.65-215.46 206.41-202.85 364.41C152.64 738.43 301.58 885.9 484.9 898.85c219.08 15.47 402.3-158.39 402.3-374.23 0-145.17-82.9-271.31-203.82-333.66-18.31-9.44-40.12 4.14-40.12 24.73z" |
||||
p-id="2920"></path> |
||||
</svg> |
||||
</template> |
||||
</van-button> |
||||
</template> |
||||
</template> |
||||
|
||||
</van-swipe-cell> |
||||
</div> |
||||
</transition> |
||||
</section> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { ref } from 'vue' |
||||
import { UserListTipTag } from '@/hooks/hook-websocket.mjs' |
||||
import DateUtil from '@/utils/date-util.mjs' |
||||
|
||||
export default { |
||||
props: { |
||||
userList: { |
||||
type: Array, |
||||
default: () => [] |
||||
}, |
||||
info: Object |
||||
}, |
||||
setup() { |
||||
const key = ref('') |
||||
|
||||
function getShowTime(val) { |
||||
if (!val) return |
||||
return DateUtil.format(val, DateUtil.isToday(val) ? 'HH:mm' : 'yyyy/MM/dd HH:mm') |
||||
} |
||||
|
||||
return { |
||||
UserListTipTag, |
||||
DateUtil, |
||||
getShowTime, |
||||
key, |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.user-list__wrap { |
||||
background: #fff; |
||||
height: calc(100vh - 100px); |
||||
box-sizing: border-box; |
||||
overflow-y: auto; |
||||
overflow-x: hidden; |
||||
width: 100vw; |
||||
max-width: 767px; |
||||
/* padding-bottom: 50px; */ |
||||
} |
||||
|
||||
.user-item__box { |
||||
display: flex; |
||||
border-bottom: 1px solid var(--border-d); |
||||
padding: 9px 10px 0; |
||||
} |
||||
|
||||
.user-item--avatar { |
||||
flex-shrink: 0; |
||||
width: 50px; |
||||
height: 50px; |
||||
box-sizing: border-box; |
||||
border-radius: 5px; |
||||
} |
||||
|
||||
.user-item--avatar--err { |
||||
font-size: 18px; |
||||
font-weight: bold; |
||||
width: 100%; |
||||
height: 100%; |
||||
text-align: center; |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
border-radius: 5px; |
||||
background-color: #409eff; |
||||
border: 1px solid var(--border-c); |
||||
color: #fff; |
||||
box-sizing: border-box; |
||||
height: 50px; |
||||
width: 50px; |
||||
} |
||||
|
||||
.user-item--avatar :deep(img) { |
||||
border-radius: 4px; |
||||
border: 1px solid var(--border-d); |
||||
/* border: 1px solid red; */ |
||||
box-sizing: border-box; |
||||
} |
||||
|
||||
.user-item--msg-time { |
||||
color: var(--text-c); |
||||
font-size: 12px; |
||||
min-width: 110px; |
||||
text-align: right; |
||||
margin-left: 5px; |
||||
} |
||||
|
||||
.user-item--msg-content { |
||||
color: var(--text-c); |
||||
font-size: 13px; |
||||
color: #909399; |
||||
font-size: 13px; |
||||
margin-right: 6px; |
||||
overflow: hidden; |
||||
text-overflow: ellipsis; |
||||
/* display: -webkit-box; */ |
||||
-webkit-line-clamp: 1; |
||||
-webkit-box-orient: vertical; |
||||
height: 30px; |
||||
margin-top: 6px; |
||||
} |
||||
|
||||
.van-swipe-cell__right { |
||||
display: inline-block; |
||||
width: 65px; |
||||
height: 44px; |
||||
font-size: 15px; |
||||
line-height: 44px; |
||||
color: #fff; |
||||
text-align: center; |
||||
background-color: #f44; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,273 @@ |
||||
<template> |
||||
<div> |
||||
<div class="header__wrap"> |
||||
<transition mode="out-in"> |
||||
<section v-if="showUsers" |
||||
class="header__box"> |
||||
<div class="header__btn" |
||||
@click="onBack"> |
||||
<svg t="1618975131673" |
||||
class="icon" |
||||
viewBox="0 0 1024 1024" |
||||
version="1.1" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
p-id="3215" |
||||
width="14" |
||||
height="14"> |
||||
<path d="M778.671 926.323a56.811 56.811 0 1 1-80.33 80.331L243.85 552.165a56.811 56.811 0 0 1 0-80.33l454.49-454.49a56.811 56.811 0 1 1 80.33 80.331L364.348 512 778.67 926.323z" |
||||
p-id="3216" |
||||
fill="#ffffff"></path> |
||||
</svg> |
||||
</div> |
||||
|
||||
<div style="display: flex;"> |
||||
<van-popover v-model:show="setting.show"> |
||||
<section style="width:150px;min-height: 100px;"> |
||||
<div class="setting-line-item" |
||||
style="border-bottom: 1px solid #E6E8EB;"> |
||||
<span>工号：</span> |
||||
<span>{{ setting.doctCode }}</span> |
||||
</div> |
||||
<div class="setting-line-item" |
||||
style="font-size: 12px;padding: 5px 10px 0;"> |
||||
<span style="color: var(--text-c);">执业类别：</span> |
||||
<span>{{ practising.practisingTypeName }}</span> |
||||
</div> |
||||
<div class="setting-line-item" |
||||
style="border-bottom: 1px solid #E6E8EB;font-size: 12px;padding: 5px 10px;"> |
||||
<span><span style="color: var(--text-c);">执业范围：</span>{{ practising.practisingScopeName }}</span> |
||||
</div> |
||||
|
||||
<div class="setting-line-item" |
||||
@click="setOLState(true, 1);"> |
||||
<div style="background-color: #67C23A;border-radius: 50%;width: 14px;height: 14px;"></div> |
||||
<span style="margin-left: 8px;">在线</span> |
||||
</div> |
||||
|
||||
<div class="setting-line-item" |
||||
@click="setOLState(true, 0)"> |
||||
<svg t="1673753531710" |
||||
class="icon" |
||||
viewBox="0 0 1024 1024" |
||||
version="1.1" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
p-id="5550" |
||||
width="14" |
||||
height="14"> |
||||
<path d="M512 51.2c-254.464 0-460.8 206.336-460.8 460.8s206.336 460.8 460.8 460.8 460.8-206.336 460.8-460.8-206.336-460.8-460.8-460.8z m280.064 740.864c-74.24 74.24-175.104 116.224-280.064 115.712-104.96 0-205.824-41.472-280.064-115.712-74.24-74.24-116.224-175.104-116.224-280.064s41.472-205.824 116.224-280.064C306.176 157.696 407.04 115.712 512 116.224c104.96 0 205.824 41.472 280.064 116.224 74.24 74.24 116.224 175.104 115.712 280.064 0.512 104.448-41.472 205.312-115.712 279.552z" |
||||
fill="#d81e06" |
||||
p-id="5551"></path> |
||||
<path d="M837.12 232.448l-604.16 604.16c-12.8 12.8-33.28 12.8-45.568 0-12.8-12.8-12.8-33.28 0-45.568l604.16-604.16c12.8-12.8 33.28-12.8 45.568 0 12.288 12.8 12.288 33.28 0 45.568z" |
||||
fill="#d81e06" |
||||
p-id="5552"></path> |
||||
</svg> |
||||
<span style="margin-left: 8px;">离线</span> |
||||
</div> |
||||
|
||||
<div class="setting-line-item" |
||||
@click="openWorkload"> |
||||
<van-icon name="chart-trending-o" |
||||
size="18" /> |
||||
<span style="margin-left: 6px;">统计</span> |
||||
</div> |
||||
</section> |
||||
|
||||
<template #reference> |
||||
<div style="margin-right: 5px;text-align: right;padding: 0 5px;"> |
||||
<div style="color: #606266;">{{ setting.name }}</div> |
||||
|
||||
<div style="display: flex;align-items: center;margin-top: 6px;"> |
||||
<svg v-if="!setting.onlineState" |
||||
t="1673753531710" |
||||
class="icon" |
||||
viewBox="0 0 1024 1024" |
||||
version="1.1" |
||||
xmlns="http://www.w3.org/2000/svg" |
||||
p-id="5550" |
||||
width="14" |
||||
height="14"> |
||||
<path d="M512 51.2c-254.464 0-460.8 206.336-460.8 460.8s206.336 460.8 460.8 460.8 460.8-206.336 460.8-460.8-206.336-460.8-460.8-460.8z m280.064 740.864c-74.24 74.24-175.104 116.224-280.064 115.712-104.96 0-205.824-41.472-280.064-115.712-74.24-74.24-116.224-175.104-116.224-280.064s41.472-205.824 116.224-280.064C306.176 157.696 407.04 115.712 512 116.224c104.96 0 205.824 41.472 280.064 116.224 74.24 74.24 116.224 175.104 115.712 280.064 0.512 104.448-41.472 205.312-115.712 279.552z" |
||||
fill="#d81e06" |
||||
p-id="5551"></path> |
||||
<path d="M837.12 232.448l-604.16 604.16c-12.8 12.8-33.28 12.8-45.568 0-12.8-12.8-12.8-33.28 0-45.568l604.16-604.16c12.8-12.8 33.28-12.8 45.568 0 12.288 12.8 12.288 33.28 0 45.568z" |
||||
fill="#d81e06" |
||||
p-id="5552"></path> |
||||
</svg> |
||||
|
||||
<div v-else |
||||
style="background-color: #67C23A;border-radius: 50%;width: 14px;height: 14px;"></div> |
||||
<div style="font-size: 14px;margin-left: 5px;color: #909399;">{{ !setting.onlineState ? '离线' : '在线' }}</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
</van-popover> |
||||
|
||||
<van-image :width="42" |
||||
:height="42" |
||||
:radius="5" |
||||
:src="setting.avatar" /> |
||||
</div> |
||||
</section> |
||||
</transition> |
||||
</div> |
||||
|
||||
<DialogWorkload v-model:show="dialog.showWorkload" |
||||
:doct-code="setting.doctCode"></DialogWorkload> |
||||
|
||||
<van-dialog v-model:show="dialog.show" |
||||
title="提示" |
||||
width="266px" |
||||
:close-on-click-modal="false"> |
||||
<div style="padding: 10px 16px;min-height: 60px;font-size: 14px;">{{ dialog.title }}</div> |
||||
<template #footer> |
||||
<span class="dialog-footer"> |
||||
<van-button @click="dialog.show = false" |
||||
style="width: 50%;">否</van-button> |
||||
<van-button type="primary" |
||||
:loading="retry.dialog.btnLoading" |
||||
@click="confirm()" |
||||
style="width: 50%;"> |
||||
<span>是<span v-if="dialog.second > 0">（{{ dialog.second }} s）</span></span> |
||||
</van-button> |
||||
</span> |
||||
</template> |
||||
</van-dialog> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { reactive, watch, ref } from 'vue' |
||||
import { Back } from '@/utils/common-util.mjs' |
||||
import DialogWorkload from './dialog-workload.vue' |
||||
|
||||
export default { |
||||
components: { DialogWorkload }, |
||||
props: { |
||||
show: Boolean, |
||||
showUsers: Boolean, |
||||
isTipErr: Boolean, |
||||
setting: Object, |
||||
retry: Object, |
||||
setOLState: Function, |
||||
HDisConnect: Function, |
||||
practising: Object // 执业信息 |
||||
}, |
||||
setup(props, context) { |
||||
watch(() => props.show, (v) => { |
||||
if (v) { |
||||
showDialog() |
||||
} else { |
||||
dialog.show = false |
||||
} |
||||
}) |
||||
|
||||
// 执业信息 |
||||
const practising = ref(null) |
||||
practising.value = props.practising |
||||
|
||||
const dialog = reactive({ |
||||
show: false, |
||||
title: '', // 标题, |
||||
loading: false, // “是”按钮加载状态 |
||||
timeInterval: null, |
||||
cacheSecond: 30, // 等待多少s重连（重置） |
||||
cacheRetryNum: 3, // 断线重连次数（重置） |
||||
second: 0, // 断线重连s |
||||
retryNum: 3, // 断线重连次数 |
||||
closeTitle: '检测到和服务器的连接已断开，是否重新连接？', // 检测到服务器主动断开提示 |
||||
errorTitle: '建立连接失败，是否重试？', // 检测到连接失败时提示 |
||||
showWorkload: false, // 统计弹框 |
||||
}) |
||||
|
||||
function showDialog() { |
||||
if (dialog.timeInterval) return |
||||
dialog.show = true |
||||
dialog.second = dialog.cacheSecond |
||||
dialog.title = props.isTipErr ? dialog.errorTitle : dialog.closeTitle |
||||
|
||||
if (dialog.retryNum > 0) { |
||||
dialog.timeInterval = setInterval(() => { |
||||
dialog.second-- |
||||
if (!dialog.second) { |
||||
clearInterval(dialog.timeInterval) |
||||
dialog.timeInterval = null |
||||
confirm() |
||||
dialog.show = false |
||||
dialog.retryNum-- |
||||
} |
||||
}, 1000); |
||||
} else { |
||||
dialog.second = 0 |
||||
} |
||||
} |
||||
|
||||
function confirm() { |
||||
dialog.second = dialog.cacheSecond |
||||
context.emit('dialogConfirm') |
||||
} |
||||
|
||||
/** |
||||
* 打开统计弹框 |
||||
*/ |
||||
function openWorkload() { |
||||
dialog.showWorkload = true |
||||
props.setting.show = false |
||||
} |
||||
|
||||
// 返回退出 |
||||
function onBack() { |
||||
if (props.HDisConnect) props.HDisConnect() |
||||
Back(true) |
||||
} |
||||
|
||||
return { |
||||
dialog, |
||||
practising, |
||||
onBack, |
||||
confirm, |
||||
openWorkload, |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
.header__wrap { |
||||
background-color: #fff; |
||||
width: 100%; |
||||
} |
||||
|
||||
.header__box { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
padding: 5px 16px 3px 16px; |
||||
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1); |
||||
border-bottom: 1px solid var(--border-d); |
||||
box-sizing: border-box; |
||||
height: 50px; |
||||
width: 100%; |
||||
} |
||||
|
||||
.header__btn { |
||||
width: 20px; |
||||
height: 20px; |
||||
display: flex; |
||||
justify-content: center; |
||||
align-items: center; |
||||
padding: 4px; |
||||
border-radius: 9px; |
||||
background: rgba(0, 0, 0, 0.15); |
||||
} |
||||
|
||||
.setting-line-item { |
||||
padding: 8px 10px; |
||||
display: flex; |
||||
align-items: center; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.setting-line-item:hover { |
||||
background-color: var(--border-c); |
||||
} |
||||
</style> |
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue