Vue_New/src/xt_pages/upload/fast/treatInfo.vue

<template>
    <div class="page_treatInfo">
        <div class="cell clearfix" style="margin-top:40px;margin-left:70px;">
            <!-- <label class="title">
                <span class="name">治疗日期</span> :
            </label>
            <div class="time">
                <ul class>
                <li
                    :class="item.state == dayType ? 'active' : ''"
                    @click="chooseDay(item.state)"
                    v-for="item in day"
                    :key="item.value"
                >{{ item.label }}</li>
                </ul>
            </div>
            <el-date-picker
                v-model="time"
                prefix-icon="el-icon-date"
                @change="changeTime"
                :editable="false"
                style="width: 150px;"
                type="date"
                placeholder="选择日期时间"
                align="right"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
            ></el-date-picker> -->
            <label class="title" style="margin-left:10px;">
                <span class="name">患者信息</span> :
            </label>
            <div class="infoBox">
                <span>姓名：{{ patient.name }}</span>&nbsp;|&nbsp;<span>透析编号：{{ patient.dialysis_no }}</span>
            </div>
        </div>
        <div class="cell clearfix" style="margin-left:70px;">
            <div class="commonTitle">透析方案</div>
        </div>
        <div class="treatInfoMain">
            <div class="basicOne">
                <p class="basicLable">治疗日期:</p>
                <el-input placeholder="请输入内容" v-model="form.date" :disabled="true"></el-input>
            </div>
            <div class="basicOne">
                <p class="basicLable">治疗方式:</p>
                <el-input placeholder="请输入内容" v-model="form.mode_id" :disabled="true"></el-input>
            </div>
            <div class="basicOne">
                <p class="basicLable">治疗时间(小时):</p>
                <el-input placeholder="请输入内容" v-model="form.actual_treatment_hour" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="form.actual_treatment_hour" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
            <div class="basicOne">
                <p class="basicLable">治疗次数:</p>
                <el-input placeholder="请输入内容" v-model="form.total" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="form.total" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
            <div class="basicOne">
                <p class="basicLable">透析器:</p>
                <el-input placeholder="请输入内容" v-model="form.dialyzer_perfusion_apparatus" :disabled="true"></el-input>
            </div>
            <div class="basicOne">
                <p class="basicLable">透析机:</p>
                <el-input placeholder="请输入内容" v-model="form.machine_type" :disabled="true"></el-input>
            </div>
            <div class="basicOne">
                <p class="basicLable">透析膜:</p>
                <el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input>
            </div>
            <div class="basicOne">
                <p class="basicLable">膜面积(㎡):</p>
                <el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="input" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
            <div class="basicOne">
                <p class="basicLable">血管通路:</p>
                <el-input placeholder="请输入内容" v-model="form.blood_access_part_opera_id" :disabled="true"></el-input>
            </div>
            <div class="basicOne">
                <p class="basicLable">血流量(ml/min):</p>
                <el-input placeholder="请输入内容" v-model="form.blood_flow_volume" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="form.blood_flow_volume" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
            <div class="basicOne">
                <p class="basicLable">抗凝剂:</p>
                <el-input placeholder="请输入内容" v-model="form.anticoagulant" :disabled="true"></el-input>
            </div>
            <div class="basicOne">
                <p class="basicLable">首量:</p>
                <el-input placeholder="请输入内容" v-model="form.anticoagulant_shouji" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="form.anticoagulant_shouji" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
            <div class="basicOne">
                <p class="basicLable">追加:</p>
                <el-input placeholder="请输入内容" v-model="form.anticoagulant_weichi" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="form.anticoagulant_weichi" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
            
        </div>
        <div class="cell clearfix" style="margin-left:70px;">
            <div class="commonTitle">透析记录与透后评估</div>
        </div>
        <div class="treatInfoMain">
            <div class="basicOne">
                <p class="basicLable">置换液总量(L):</p>
                <el-input placeholder="请输入内容" v-model="form.displace_liqui_value" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="form.displace_liqui_value" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
            <div class="basicOne">
                <p class="basicLable">滤出液实际值(L):</p>
                <el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="input" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
            <div class="basicOne">
                <p class="basicLable">透析中血浆总量(L):</p>
                <el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="input" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
            <div class="basicOne">
                <p class="basicLable">滤出血浆总量(L):</p>
                <el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="input" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
            <div class="basicOne">
                <p class="basicLable">干体重(kg):</p>
                <el-input placeholder="请输入内容" v-model="form.dry_weight" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="form.dry_weight" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
            <div class="basicOne">
                <p class="basicLable">干体重备注:</p>
                <el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input>
            </div>
            <div class="basicOne">
                <p class="basicLable">透前体重(kg):</p>
                <el-input placeholder="请输入内容" v-model="form.weight_before" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="form.weight_before" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
            <div class="basicOne">
                <p class="basicLable">透前体重备注:</p>
                <el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input>
            </div>
            <div class="basicOne">
                <p class="basicLable">透后体重(kg):</p>
                <el-input placeholder="请输入内容" v-model="form.weight_after" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="form.weight_after" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
            <div class="basicOne">
                <p class="basicLable">预计脱水(kg):</p>
                <el-input placeholder="请输入内容" v-model="form.target_ultrafiltration" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="form.target_ultrafiltration" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
            <div class="basicOne">
                <p class="basicLable">实际脱水(kg):</p>
                <el-input placeholder="请输入内容" v-model="form.actual_ultrafiltration" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="form.actual_ultrafiltration" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
            <div class="basicOne">
                <p class="basicLable">其他方式:</p>
                <el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input>
            </div>
            <div class="basicTwo">
                <p class="basicTwoLable">抗凝剂使用:</p>
                <el-input type="textarea" style="width:550px;" :disabled="true" :rows="3" placeholder="请输入内容" v-model="textarea"></el-input>
            </div>
            <div class="basicTwo">
                <p class="basicTwoLable">特殊交代事项:</p>
                <el-input type="textarea" style="width:550px;" :disabled="true" :rows="3" placeholder="请输入内容" v-model="textarea"></el-input>
            </div>
            <div class="basicTwo">
                <p class="basicTwoLable">医生记录及医嘱:</p>
                <el-input type="textarea" style="width:550px;" :disabled="true" :rows="3" placeholder="请输入内容" v-model="textarea"></el-input>
            </div>
            
        </div>
        <div class="cell clearfix" style="margin-left:70px;">
            <div class="commonTitle">责任签名</div>
        </div>
        <div class="treatInfoMain">
            <div class="basicOne">
                <p class="basicLable">责任医生:</p>
                <el-input placeholder="请输入内容" v-model="form.doctor" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="form.doctor" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
            <div class="basicOne">
                <p class="basicLable">责任护士:</p>
                <el-input placeholder="请输入内容" v-model="form.responsibleNurse" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="form.responsibleNurse" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
            <div class="basicOne">
                <p class="basicLable">核对护士:</p>
                <el-input placeholder="请输入内容" v-model="form.checkNurse" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="form.checkNurse" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { parseTime } from "@/utils";
import { getDataConfig } from "@/utils/data";
import { isNumber } from 'util';
export default {
    props:{
        prescription:Object,
        predialysis_evaluation:Object,
        assessment_after_dislysis:Object,
        patient:Object,
        monitor_records:Array,
        admin_users:Array,
        dialysis_order:Object,
        double_check:Object,
        selected_date:Date
    },
    data(){
      return{
        day: [
            { value: 0, label: "今天", state: 0 },
            { value: 1, label: "昨天", state: 1 },
            { value: 2, label: "前天", state: 2 },
        ],
        dayType: 0,
        time:'',

        input:'',
        textarea:'',
        form:{
            date:'',
            mode_id:'',
            actual_treatment_hour:'',
            total:'',
            dialyzer_perfusion_apparatus:'',
            machine_type:'',
            blood_access_part_opera_id:'',
            blood_flow_volume:'',
            anticoagulant:'',
            anticoagulant_shouji:'',
            anticoagulant_weichi:'',
            displace_liqui_value:'',
            dry_weight:'',
            weight_before:'',
            weight_after:'',
            target_ultrafiltration:'',
            actual_ultrafiltration:'',
            doctor:'',
            responsibleNurse:'',
            checkNurse:''
        }
      }
    },
    created(){
        this.prescription = this.prescription
        this.predialysis_evaluation = this.predialysis_evaluation
        this.assessment_after_dislysis = this.assessment_after_dislysis
        this.patient = this.patient
        this.monitor_records = this.monitor_records
        this.admin_users = this.admin_users
        this.dialysis_order = this.dialysis_order
        this.double_check = this.double_check
        this.getUpdate()
    },
    methods:{
        chooseDay(day) {
            this.dayType = day;
        },
        getMode(id){
            let name = ''
            this.treatment_mode = Object.values(this.$store.getters.treatment_mode)
            this.treatment_mode.map(item => {
                if(item.id == id){
                    name = item.name
                }
            })
            return name
        },
        getAnticoagulant(id){
            let name = ''
            this.anticoagulants_confit = Object.values(this.$store.getters.anticoagulants_confit)
            this.anticoagulants_confit.map(item => {
                if(item.id == id){
                    name = item.name
                }
            })
            return name
        },
        getBloodAccessPartOpera(id){
            let name = ''
            this.blood_access_part_opera = getDataConfig('hemodialysis', 'vascular_access_desc')
            this.blood_access_part_opera.map(item => {
                if(item.id == id){
                    name = item.name
                }
            })
            return name
        },
        getAdminUser(id) {
            this.adminUser = this.admin_users
            if (id == 0) {
                return "";
            }
            if (id == undefined) {
                return "";
            }
            for (let i = 0; i < this.adminUser.length; i++) {
                if (this.adminUser[i].id == id) {
                return this.adminUser[i].name;
                }
            }
        },
        getUpdate(){
            this.form.date = parseTime(parseInt(this.selected_date.getTime() / 1000), '{y}-{m}-{d}')
            this.form.mode_id = this.prescription.mode_id
            this.form.actual_treatment_hour = this.assessment_after_dislysis.actual_treatment_hour
            this.form.total = this.patient.total_dialysis + this.patient.user_sys_before_count
            this.form.dialyzer_perfusion_apparatus = this.prescription.dialyzer_perfusion_apparatus
            this.form.machine_type = this.predialysis_evaluation.machine_type
            this.form.blood_access_part_opera_id = this.predialysis_evaluation.blood_access_part_opera_id
            if(this.monitor_records.length > 0){
                this.form.blood_flow_volume = this.monitor_records[0].blood_flow_volume
            }else{
                this.form.blood_flow_volume = ''
            }
            
            this.form.anticoagulant = this.getAnticoagulant(this.prescription.anticoagulant)
            this.form.anticoagulant_shouji = this.prescription.anticoagulant_shouji
            this.form.anticoagulant_weichi = this.prescription.anticoagulant_weichi
            this.form.mode_id = this.getMode(this.form.mode_id)
            this.form.blood_access_part_opera_id = this.getBloodAccessPartOpera(this.form.blood_access_part_opera_id)

            this.form.displace_liqui_value = this.prescription.displace_liqui_value
            this.form.dry_weight = this.predialysis_evaluation.dry_weight
            this.form.weight_before = this.predialysis_evaluation.weight_before
            this.form.weight_after = this.assessment_after_dislysis.weight_after
            this.form.target_ultrafiltration = this.prescription.target_ultrafiltration
            this.form.actual_ultrafiltration = this.assessment_after_dislysis.actual_ultrafiltration
            this.form.doctor = this.getAdminUser(this.prescription.creater) 
            this.form.responsibleNurse = this.getAdminUser(this.dialysis_order.start_nurse) 
            if(this.double_check.creater == this.dialysis_order.start_nurse){
                this.form.checkNurse = this.getAdminUser(this.double_check.modifier)
            }else{
                this.form.checkNurse = this.getAdminUser(this.double_check.creater)
            }
        },
        onCopy() {
            this.$message.success("复制成功");
        },
        onError() {
            this.$message.success("复制失败,请重试");
        }
    },
    watch:{
        prescription:{
            handler:function(val) {
                this.getUpdate()
            }
        },
        predialysis_evaluation:{
           handler:function(val) {
                this.getUpdate()
            } 
        },
        assessment_after_dislysis:{
           handler:function(val) {
                this.getUpdate()
            }  
        },
        patient:{
           handler:function(val) {
                this.getUpdate()
            }  
        },
        monitor_records:{
           handler:function(val) {
                this.getUpdate()
            }  
        },
        admin_users:{
           handler:function(val) {
                this.getUpdate()
            }  
        },
        dialysis_order:{
           handler:function(val) {
                this.getUpdate()
            }  
        },
        double_check:{
           handler:function(val) {
                this.getUpdate()
            }  
        },


        // immediate:true,
        deep:true,
    }
}
</script>

<style lang="scss" scoped>
.tableTitle {
    font-size: 16px;
    color: #000;
    font-weight: bold;
    line-height: 40px;
}
.page_treatInfo{
    width: 100%;
    padding-right: 10px;
    .infoBox{
        padding: 10px 20px;
        border-radius: 20px;
        border:1px solid #DCDFE6;
        font-size: 14px;
        color: #606266;
        display: flex;
        align-items: center;
    }
    .commonTitle{
        color:#000;
        font-weight: bold;
    }
    .treatInfoMain{
        display: flex;
        flex-wrap: wrap;
        padding-left: 18px;
        .basicOne{
            width: 380px;
            margin-right: 20px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            .basicLable{
                width: 120px;
                text-align: right;
                margin-right: 10px;
            }
        }
        .basicTwo{
            width: 680px;
            margin-right: 20px;
            margin-bottom: 20px;
            display: flex; 
            .basicTwoLable{
                width: 120px;
                text-align: right;
                margin-right: 10px;
            }  
        }
    }
    
}
</style>
<style lang="scss">
.page_treatInfo{
    .treatInfoMain{
        .el-input{
            width: 150px;
            margin-right: 10px;
        }
    }
}
</style>