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>姓名：前蛮子</span>&nbsp;|&nbsp;<span>透析编号：001</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="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="input" :disabled="true"></el-input>
                    <el-button type="primary">复制</el-button>
                </div>
                <div class="basicOne">
                    <p class="basicLable">治疗次数:</p>
                    <el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input>
                    <el-button type="primary">复制</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="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">复制</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">血流量(ml/min):</p>
                    <el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input>
                    <el-button type="primary">复制</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>
                    <el-button type="primary">复制</el-button>
                </div>
                <div class="basicOne">
                    <p class="basicLable">追加:</p>
                    <el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input>
                    <el-button type="primary">复制</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="input" :disabled="true"></el-input>
                    <el-button type="primary">复制</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">复制</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">复制</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">复制</el-button>
                </div>
                <div class="basicOne">
                    <p class="basicLable">干体重(kg):</p>
                    <el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input>
                    <el-button type="primary">复制</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="input" :disabled="true"></el-input>
                    <el-button type="primary">复制</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="input" :disabled="true"></el-input>
                    <el-button type="primary">复制</el-button>
                </div>
                <div class="basicOne">
                    <p class="basicLable">预计脱水(kg):</p>
                    <el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input>
                    <el-button type="primary">复制</el-button>
                </div>
                <div class="basicOne">
                    <p class="basicLable">实际脱水(kg):</p>
                    <el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input>
                    <el-button type="primary">复制</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="input" :disabled="true"></el-input>
                    <el-button type="primary">复制</el-button>
                </div>
                <div class="basicOne">
                    <p class="basicLable">责任护士:</p>
                    <el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input>
                    <el-button type="primary">复制</el-button>
                </div>
                <div class="basicOne">
                    <p class="basicLable">核对护士:</p>
                    <el-input placeholder="请输入内容" v-model="input" :disabled="true"></el-input>
                    <el-button type="primary">复制</el-button>
                </div>
            </div>
        </div>
</template>

<script>
export default {
    data(){
      return{
        tableData: [
          {
              date: "2016",
              name: "王小虎"
          },
          {
              date: "2016",
              name: "王小虎"
          },
          {
              date: "2016",
              name: "王小虎"
          },
          {
              date: "2016",
              name: "王小虎"
          },
          {
              date: "2016",
              name: "王小虎"
          },
          {
              date: "2016",
              name: "王小虎"
          },
          {
              date: "2016",
              name: "王小虎"
          },
          {
              date: "2016",
              name: "王小虎"
          },
          {
              date: "2016",
              name: "王小虎"
          },
          {
              date: "2016",
              name: "王小虎"
          },
          {
              date: "2016",
              name: "王小虎"
          },
          {
              date: "2016",
              name: "王小虎"
          }
        ],
        day: [
            { value: 0, label: "今天", state: 0 },
            { value: 1, label: "昨天", state: 1 },
            { value: 2, label: "前天", state: 2 },
        ],
        dayType: 0,
        time:''
      }
    },
    methods:{
        chooseDay(day) {
            this.dayType = day;
        }
    }
}
</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>