TreatmentPlan.vue

<template>
    <div class="label-title mt-2">治疗方案</div>
    <div class="bg-fa">
        <div style="font-size: 14px">是否调整治疗方案</div>
        <van-field 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: () => {}
        }
    },
    data() {
        return {
            store: useStore(),
            showUnit: false,
            showFrequency: false,
            showUsage: false,
            medicateCase: [{}]
        }
    },
    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>