<template>
<div class="label-title mt-2">{{ firstText }}</div>
<div class="bg-fa">
<div class="label-title" required style="font-size: 14px; color: #262626; line-height: 24px">{{ secondText }}</div>
<van-field :rules="[{ required: true, message: '请选择' }]" style="padding: 0" class="mt-2">
<template #input>
<van-radio-group
v-model="form.adjustTreat"
shape="dot"
direction="horizontal"
class="doc-radio-group-now"
>
<van-radio
v-for="item in store.getDict('DC00001')"
:key="item.value"
:name="item.value"
label-position="left"
>
{{ item.name }}
</van-radio>
</van-radio-group>
</template>
</van-field>
</div>
<div v-if="form.adjustTreat === 1" class="bg-fa mt-2">
<div v-for="(item, index) in medicateCase" :key="index" style="background-color: #fff; padding: 8px" class="mb-2">
<DocDrug
v-model:value="item.drugId"
placeholder="拼音码查询药品"
:valueName="item.pinyinCode"
@change="drugChange($event, item)">
</DocDrug>
<div class="flex items-center justify-between w-full mt-2">
<van-field
v-model="item.dose"
placeholder="请输入"
label="剂量："
class="form-input"
style="flex: 0.6"
/>
<van-field
v-model="item.unitName"
isLink
readonly
placeholder="请选择"
@click="item.showUnit = true"
class="form-input"
style="flex: 0.4"
/>
</div>
<van-popup v-model:show="item.showUnit" position="bottom">
<div class="p-4" style="height: 100%">
<div class="flex justify-between items-center mb-4 pop-title">
<div class="greyColor" @click="item.showUnit = false">取消</div>
<div>单位（单选）</div>
<div></div>
</div>
<div style="height: 80%; overflow: auto">
<CheckBtn
clearable
column-1
:options="store.getDict('CP00081')"
v-model:value="item.unit"
:fieldNames="{ text: 'name', value: 'value' }"
@change="unitChange(item)"
/>
</div>
</div>
</van-popup>
<!-- 频次 -->
<van-field
label="频次："
v-model="item.frequencyName"
isLink
readonly
placeholder="请选择"
@click="item.showFrequency = true"
class="form-input mt-2"
/>
<van-popup v-model:show="item.showFrequency" position="bottom">
<div class="p-4" style="height: 100%">
<div class="flex justify-between items-center mb-4 pop-title">
<div class="greyColor" @click="item.showFrequency = false">取消</div>
<div>频次（单选）</div>
<div></div>
</div>
<div style="height: 80%; overflow: auto">
<CheckBtn
clearable
column-2
:options="store.getDict('CP00084')"
v-model:value="item.frequency"
:fieldNames="{ text: 'name', value: 'value' }"
@change="frequencyChange(item)"
/>
</div>
</div>
</van-popup>
<!-- 用法 -->
<van-field
label="用法："
v-model="item.usageName"
isLink
readonly
placeholder="请选择"
@click="item.showUsage = true"
class="form-input mt-2"
/>
<van-popup v-model:show="item.showUsage" position="bottom">
<div class="p-4" style="height: 100%">
<div class="flex justify-between items-center mb-4 pop-title">
<div class="greyColor" @click="item.showUsage = false">取消</div>
<div>用法（单选）</div>
<div></div>
</div>
<div style="height: 80%; overflow: auto">
<CheckBtn
clearable
column-1
:options="store.getDict('CP00083')"
v-model:value="item.usage"
:fieldNames="{ text: 'name', value: 'value' }"
@change="usageChange(item)"
/>
</div>
</div>
</van-popup>
<div @click="onDel(index)" class="del-btn">删除</div>
</div>
<van-button type="primary" plain block size="small" @click="onPlus">增加服用药物</van-button>
</div>
</template>
<script>
import { useStore } from '@/doctor/store'
import DocDrug from '@/doctor/components/docDrug/DocDrug.vue'
import CheckBtn from '@/doctor/components/checkBtn/CheckBtn.vue'
export default {
components: { DocDrug, CheckBtn },
props: {
form: {
type: Object,
default: () => {}
},
diseaseInfo: {
type: Object,
default: () => {}
}
},
data() {
return {
store: useStore(),
showUnit: false,
showFrequency: false,
showUsage: false,
medicateCase: [{}]
}
},
computed: {
firstText() {
let { diseaseType } = this.diseaseInfo
if (diseaseType === 1) {
return `药物治疗`
} else {
return `治疗方案`
}
},
secondText() {
let { diseaseType } = this.diseaseInfo
if (diseaseType === 1) {
return `本次就诊后的药物治疗方案（仅录入降压、降脂及抗血小板药物，在目前用药列表中进行增删）`
} else {
return `是否调整治疗方案`
}
}
},
methods: {
drugChange(option, item) {
item.drugName = option.chemicalName
item.pinyinCode = option.helpCode
},
unitChange(item) {
this.store.getDict('CP00081').forEach(e => {
if (e.value === item.unit) {
item.unitName = e.name
}
})
item.showUnit = false
},
frequencyChange(item) {
this.store.getDict('CP00084').forEach(e => {
if (e.value === item.frequency) {
item.frequencyName = e.name
}
})
item.showFrequency = false
},
usageChange(item) {
this.store.getDict('CP00083').forEach(e => {
if (e.value === item.usage) {
item.usageName = e.name
}
})
item.showUsage = false
},
onPlus() {
this.medicateCase.push({})
},
onDel(index) {
this.medicateCase.splice(index, 1)
},
submit() {
return new Promise((resolve, reject) => {
resolve(this.medicateCase)
})
}
},
watch: {
'form.medicateCase': {
handler() {
this.medicateCase = JSON.parse(this.form.medicateCase)
console.log(123, this.medicateCase)
}
}
}
}
</script>
<style lang="less" scoped>
.label-title {
font-size: 13px;
color: #595959;
font-weight: 500;
margin-bottom: 8px;
&[required] {
&::after {
content: '*';
color: #FF4D4F;
font-weight: bold;
margin-left: 4px;
}
}
}
.bg-fa {
background-color: #FAFAFA;
padding: 8px;
border-radius: 8px;
}
.doc-radio-group-now {
column-gap: 10px;
row-gap: 8px;
background-color: #FAFAFA;
width: 100%;
.van-radio {
background-color: #FFF;
padding: 8px 12px;
border-radius: 8px;
justify-content: space-between;
margin-right: 0;
flex-grow: 1;
}
}
.form-input {
background-color: #FAFAFA;
padding: 8px 12px;
border-radius: 8px;
}
:deep(.van-field) {
border-radius: .08rem;
.van-field__label {
width: auto;
}
}
.pop-title {
color: #262626;
font-size: 16px;
font-weight: 600;
}
.greyColor {
color: var(--van-text-color-2);
font-weight: 400;
}
.del-btn {
text-align: center;
margin: 8px auto;
padding: 4px 8px;
border-radius: 38px;
border: 1px solid #BFBFBF;
width: 112px;
color: #8C8C8C;
font-size: 13px;
}
</style>