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

<template>
        <div class="page_basicInfo">
            <div class="basicOne">
                <p class="basicLable">患者姓名:</p>
                <el-input placeholder="请输入内容" v-model="form.name" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="form.name" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
            <div class="basicOne">
                <p class="basicLable">透析编号:</p>
                <el-input placeholder="请输入内容" v-model="form.dialysis_no" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="form.dialysis_no" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
            <div class="basicOne">
                <p class="basicLable">证件类型:</p>
                <el-input placeholder="请输入内容" v-model="form.type" :disabled="true"></el-input>
            </div>
            <div class="basicOne">
                <p class="basicLable">证件号码:</p>
                <el-input style="width:170px;" placeholder="请输入内容" v-model="form.id_card_no" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="form.id_card_no" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
            <div class="basicOne">
                <p class="basicLable">首次透析时间:</p>
                <el-input placeholder="请输入内容" v-model="form.first_dialysis_date" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="form.first_dialysis_date" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
            <div class="basicOne">
                <p class="basicLable">性别:</p>
                <el-input placeholder="请输入内容" v-model="form.gender" :disabled="true"></el-input>
            </div>
            <div class="basicOne">
                <p class="basicLable">生日:</p>
                <el-input placeholder="请输入内容" v-model="form.birthday" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="form.birthday" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
            <div class="basicOne">
                <p class="basicLable">工作:</p>
                <el-input placeholder="请输入内容" v-model="form.work_unit" :disabled="true"></el-input>
            </div>
            <div class="basicOne">
                <p class="basicLable">婚姻:</p>
                <el-input placeholder="请输入内容" v-model="form.marital_status" :disabled="true"></el-input>
            </div>
            <div class="basicOne">
                <p class="basicLable">学历:</p>
                <el-input placeholder="请输入内容" v-model="form.education_level" :disabled="true"></el-input>
            </div>
            <div class="basicOne">
                <p class="basicLable">民族:</p>
                <el-input placeholder="请输入内容" v-model="form.nation" :disabled="true"></el-input>
            </div>
            <div class="basicOne">
                <p class="basicLable">工作电话:</p>
                <el-input placeholder="请输入内容" v-model="form.relative_phone" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="form.relative_phone" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
            <div class="basicOne">
                <p class="basicLable">家庭地址:</p>
                <el-input placeholder="请输入内容" v-model="form.home_address" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="form.home_address" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
            <div class="basicOne">
                <p class="basicLable">医保类型:</p>
                <el-input placeholder="请输入内容" v-model="form.reimbursement_way_id" :disabled="true"></el-input>
            </div>
            <div class="basicOne">
                <p class="basicLable">联系电话:</p>
                <el-input placeholder="请输入内容" v-model="form.phone" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="form.phone" 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">随访号:</p>
                <el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input>
            </div>
            <div class="basicOne">
                <p class="basicLable">传染病检查结果:</p>
                <el-input placeholder="请输入内容" v-model="form.is_infectious" :disabled="true"></el-input>
                <el-button type="primary" v-clipboard:copy="form.is_infectious" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            </div>
        </div>
</template>

<script>
import { parseTime } from "@/utils";
import { getDataConfig } from "@/utils/data";
import { isNumber } from 'util';
export default {
    props:{
        patient:Object
    },
    data(){
      return{
        input:'',
        form:{
            name:'',
            dialysis_no:'',
            type:'身份证',
            id_card_no:'',
            first_dialysis_date:'',
            gender:'',
            birthday:'',
            work_unit:'',
            marital_status:'',
            education_level:'',
            nation:'',
            relative_phone:'',
            home_address:'',
            reimbursement_way_id:'',
            phone:'',
            is_infectious:''
        },
        educationOptions:[],
        wayOptions:[]
      }
    },
    created(){
        console.log('patient',this.patient)
        this.form = this.patient
        this.getUpdate()
    },
    methods:{
        getEducation(id){
            this.educationOptions = getDataConfig("patient", "education_types")
            let name = ''
            this.educationOptions.map(item => {
                if(item.id == id){
                    name = item.name
                }
            })
           
            return name
        },
        getReimbursement(id){
            this.wayOptions = getDataConfig("patient", "reimbursement_ways")
            let name = ''
            this.wayOptions.map(item => {
                if(item.id == id){
                    name = item.name
                     
                }
            })
            return name
        },
        getUpdate(){
            this.$set(this.form, 'type', '身份证')
            this.$forceUpdate()
            if(isNumber(this.form.first_dialysis_date)){
                this.form.first_dialysis_date = parseTime(this.form.first_dialysis_date, '{y}-{m}-{d}')
            }
            
            if(this.form.gender == 1){
                this.form.gender = '男'
            }else if(this.form.gender == 2){
                this.form.gender = '女'
            }else if(this.form.gender == 0){
                this.form.gender = ''
            }
            if(isNumber(this.form.birthday)){
                this.form.birthday = parseTime(this.form.birthday, '{y}-{m}-{d}')
            }
            
            if(this.form.marital_status == 1){
                this.form.marital_status = '未婚'
            }else if(this.form.marital_status == 2){
                this.form.marital_status = '已婚'
            }else if(this.form.marital_status == 3){
                this.form.marital_status = '离异'
            }else if(this.form.marital_status == 0){
                this.form.marital_status = ''
            }
            if(isNumber(this.form.education_level)){
                if(this.form.education_level == 0){
                    this.form.education_level = ''
                }else{
                    this.form.education_level = this.getEducation(this.form.education_level)
                }
            }
            if(isNumber(this.form.reimbursement_way_id)){
                if(this.form.reimbursement_way_id == 0){
                    this.form.reimbursement_way_id = ''
                }else{
                    this.form.reimbursement_way_id = this.getReimbursement(this.form.reimbursement_way_id)
                }
            }
            
        },
        onCopy() {
            this.$message.success("复制成功");
        },
        onError() {
            this.$message.success("复制失败,请重试");
        }
    },
    watch:{
        patient:{
            handler:function(val) {
                console.log(1111111111111,val)
                Object.keys(val).map((item,index) => {
                    this.$set(this.form, item, val[item])
                    this.$forceUpdate()
                })
                this.getUpdate()
            }
        },
        // immediate:true,
        deep:true,
    }
}
</script>

<style lang="scss" scoped>

.page_basicInfo{
    width: 100%;
    padding-right: 20px;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    .basicOne{
        width: 380px;
        margin-right: 10px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        font-size: 14px;
        color:rgb(48, 49, 51);
        .basicLable{
            width: 120px;
            text-align: right;
            margin-right: 10px;
        }
    }
}
</style>
<style lang="scss">

.page_basicInfo{
    .el-input{
        width: 150px;
        margin-right: 10px;
    }
}
.el-input.is-disabled .el-input__inner{
    color:#909399;
}
.el-textarea.is-disabled .el-textarea__inner{
    color:#909399;
}
</style>