elizebeth/src/xt_pages/user/templateSummary.vue

<template>
  <div class="patient-container">
    <patient-sidebar :id="patient_id" defaultActive="1-9"></patient-sidebar>
    <div v-loading="loading">
      <div class="patient-app-container advice-container app-container">

        <div>
                    <span style="margin-left: 10px;float:right;">
                        <el-button type="primary" icon="el-icon-circle-plus-outline" size="small"
                                   @click="show_dialog = true">新增</el-button>

                        <el-button type="primary" icon="el-icon-edit-outline" size="small"
                                   @click="showEdit">修改</el-button>
                      <el-button type="primary" icon="el-icon-printer" size="small"
                                 @click="print">打印</el-button>
                        <el-button size="small" v-show="selectingRows.length > 0" type="danger"
                                   @click="deleteAction">删除</el-button>
                    </span>
        </div>
        <!--<div></div>-->
        <div class="cell clearfix">
          <label class="title"><span class="name">日期查询</span> : </label>
          <el-date-picker v-model="start_time" prefix-icon="el-icon-date" :editable="false" style="width: 196px;"
                          type="date" placeholder="选择日期时间" align="right" format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd" @change="startTimeChange"></el-date-picker>
          <span class="">-</span>
          <el-date-picker v-model="end_time" prefix-icon="el-icon-date" :editable="false" style="width: 196px;"
                          type="date" placeholder="选择日期时间" align="right" format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd" @change="endTimeChange"></el-date-picker>
        </div>
        <div class="record">
          <el-row :gutter="15">
            <el-col :span="10">
              <el-table :header-cell-style="{
                  backgroundColor: 'rgb(245, 247, 250)',
                  color: '#606266'
                }"
                :row-style="{ color: '#303133' }" ref="record_table" :data="records"
                        border highlight-current-row @current-change="didChangeCurrentRecord"
                        @selection-change="didSelectionChange"
                        :row-class-name="tableRow"
                        @row-click="onRowClick"
              >
                <el-table-column type="selection" width="40" align="center"></el-table-column>
                <el-table-column label="阶段小结名称" align="center">
                  <template slot-scope="scope">
                    <!-- {{ scope.row.title}} -->
                  </template>
                </el-table-column>
                <el-table-column label="记录时间" align="center">
                  <template slot-scope="scope">
                    <!-- {{ recordTime(scope.row.record_time) }} -->
                  </template>
                </el-table-column>
                <el-table-column label="记录医生" align="center">
                  <template slot-scope="scope">
                    <!-- {{ doctorName(scope.row.recorder) }} -->
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="14">
              <div class="record_content_panel">
                <div style="background-color:rgb(245, 247, 250)" class="title">病程内容</div>
                <div class="content">
                  <span v-if="current_select_record" v-html="current_select_record.content">{{current_select_record.content }}</span>
                  <span v-else></span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
     
      <el-dialog title="新增阶段小结" width="80%" top="5vh" :visible.sync="show_dialog">
        <div>
          <div class="new_record_form">
            <div class="cell clearfix">
              <el-form>
                <el-row :gutter="24">
                  <el-col :span="20">
                    <el-form-item label="阶段小结名称:">
                      <el-input v-model="form.title"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                 <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="阶段小结时间:">
                        <el-date-picker
                            v-model="form.start_year"
                            type="year"
                            value-format="yyyy-MM-dd"
                            placeholder="选择年">
                        </el-date-picker>
                    </el-form-item> 
                  </el-col>
                  <el-col :span="8">
                    <el-form-item>
                      <el-radio-group v-model="form.radio">
                        <el-radio :label="1" >月份</el-radio>
                        <el-radio :label="2" >季度</el-radio>
                     </el-radio-group>
                    </el-form-item> 
                  </el-col>
                  <el-col :span="8" v-if="form.radio == 1">
                    <el-form-item>
                      <el-date-picker
                        value-format="MM"
                        v-model="form.start_month"
                        type="month"
                        placeholder="选择月">
                      </el-date-picker>
                    </el-form-item> 
                  </el-col>
                  <el-col :span="8" v-if="form.radio == 2">
                    <el-form-item>
                       <el-select v-model="form.quarter" placeholder="请选择">
                        <el-option
                          v-for="item in timeType"
                          :key="item.id"
                          :label="item.name"
                          :value="item.id">
                        </el-option>
                      </el-select>
                    </el-form-item> 
                  </el-col> 
                 </el-row>  
                
              </el-form>
            </div>

            <div class="cell clearfix" style="margin-top: 10px">
              <label class="title"><span class="name">阶段小结摘要</span> : </label>
              <el-form>
                  <el-row :gutter="24">
                    <el-col :span="8">
                     <el-form-item label="干体重">
                      <el-input v-model="form.dry_weight"></el-input>
                     </el-form-item>  
                    </el-col>
                    <el-col :span="8">
                     <el-form-item label="共透析(次)">
                      <el-input v-model="form.dialysis_count"></el-input>
                     </el-form-item>  
                    </el-col>
                    <el-col :span="8">
                     <el-form-item label="HD(次)">
                      <el-input v-model="form.hd_count"></el-input>
                     </el-form-item>  
                    </el-col>
                  </el-row>
                  <el-row :gutter="24">
                    <el-col :span="8">
                     <el-form-item label="HDF(次)">
                      <el-input v-model="form.hdf_count"></el-input>
                     </el-form-item>  
                    </el-col>
                    <el-col :span="8">
                     <el-form-item label="HP(次)">
                      <el-input v-model="form.hp_count"></el-input>
                     </el-form-item>  
                    </el-col>
                    <el-col :span="8">
                     <el-form-item label="其他(次)">
                      <el-input v-model="form.other_count"></el-input>
                     </el-form-item>  
                    </el-col>
                  </el-row>
                   <el-row :gutter="24">
                    <el-col :span="8">
                     <el-form-item label="透析器">
                      <el-input v-model="form.dialzer_apparatus"></el-input>
                     </el-form-item>  
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="灌流器">
                        <el-input v-model="form.perfusion_apparatus"></el-input>
                      </el-form-item>  
                    </el-col>

                    <el-col :span="8">
                     <el-form-item label="抗凝剂">
                      <el-input v-model="form.anticoagulant"></el-input>
                     </el-form-item>  
                    </el-col>
                  </el-row>
                   <div>透析液</div>
                   <el-row :gutter="24">
                    <el-col :span="8">
                     <el-form-item label="钾">
                      <el-input v-model="form.kalium"></el-input>
                     </el-form-item>  
                    </el-col>
                    <el-col :span="8">
                     <el-form-item label="钙">
                      <el-input v-model="form.autunite"></el-input>
                     </el-form-item>  
                    </el-col>
                    <el-col :span="8">
                     <el-form-item label="钠">
                      <el-input v-model="form.natrium"></el-input>
                     </el-form-item>  
                    </el-col>
                  </el-row>
                   <div>透析时长</div>
                   <el-row :gutter="24">
                    <el-col :span="8">
                     <el-form-item label="时">
                      <el-input v-model="form.hour"></el-input>
                     </el-form-item>  
                    </el-col>
                    <el-col :span="8">
                     <el-form-item label="分">
                      <el-input v-model="form.minute"></el-input>
                     </el-form-item>  
                    </el-col>
                  </el-row>
                  <el-row :gutter="24">
                    <el-col :span="8">
                     <el-form-item label="透前体重(kg)">
                      <el-input v-model="form.befor_weight"></el-input>
                     </el-form-item>  
                    </el-col>
                    <el-col :span="8">
                     <el-form-item label="透后体重(kg)">
                      <el-input v-model="form.after_weight"></el-input>
                     </el-form-item>  
                    </el-col>
                  </el-row>
                   <el-row :gutter="24">
                    <el-col :span="8">
                     <el-form-item label="透前血压(mmHg)">
                      <el-input v-model="form.befor_pressure"></el-input>
                     </el-form-item>  
                    </el-col>
                    <el-col :span="8">
                     <el-form-item label="透后血压(mmHg)">
                      <el-input v-model="form.after_pressure"></el-input>
                     </el-form-item>  
                    </el-col>
                  </el-row>
                 
                  <el-row>
                    <label class="title"><span class="name">阶段小结总结</span> : </label>
                     <el-select v-model="form.template_summary_id" placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                     </el-select>
                     <el-input tyep="text" v-model="form.template_summary_content"></el-input>
                  </el-row>
                  <el-row>
                    <label class="title"><span class="name">阶段小结个体化透析方案</span> : </label>
                     <el-select v-model="form.template_plan_id" placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                     </el-select>
                     <el-input tyep="text" v-model="form.template_plan_content"></el-input>
                  </el-row>
                  <el-row>
                    <label class="title"><span class="name">阶段小结化验结果</span> : </label>
                     <el-select v-model="form.template_inspection_id" placeholder="请选择">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                     </el-select>
                     <el-input tyep="text" v-model="form.template_inspection_content"></el-input>
                  </el-row>
                  <el-row>
                    <el-col :span="8">
                      <el-form-item label="记录医生">
                        <el-select v-model="form.admin_user_id" placeholder="请选择">
                            <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="8">
                      <el-form-item label="记录时间">
                         <el-date-picker
                            v-model="form.record_time"
                            type="datetime"
                            placeholder="选择日期时间">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
              </el-form>
            </div>


          
            <div style="text-align: right; padding-right: 0px; padding-top: 10px; padding-bottom: 10px;">
              <el-button @click="show_dialog = false">取消</el-button>
              <el-button type="primary" @click="createAction">保存
              </el-button>
            </div>
          </div>
        </div>
      </el-dialog>


  
    </div>
  </div>

  <!-- </div> -->
</template>

<script>
  import PatientSidebar from './components/PatientSidebar'
  import Editor from '@/components/Editor'

  import { getInitDataList } from '@/api/patient'
  import { parseTime } from '@/utils'
  import BreadCrumb from '@/xt_pages/components/bread-crumb'
  import { uParseTime } from '@/utils/tools'
  const moment = require('moment')
  export default {
    name: 'templateSummary',
    components: {
      PatientSidebar,
      BreadCrumb,
      Editor
    },
    data() {
      return {
        loading: false,
        title: '',
        patient_id: 0,
        date: [],
        start_time: '',
        end_time: '',
        course_of_disease_time: '',
        records: [],
        doctors: [],
        current_select_record: null,
        show_dialog: false,
        show_edit_dialog: false,
        uploading_new_record: false,
        templates: this.$store.getters.configlist.course_disease,
        select_template: '',
        new_content: '',
        edit_new_content: '',
        edit_course_of_disease_time: '',
        selectingRows: [],
        table_current_index: -1,
        edit_current_id: 0,
        edit_title: '',
        value:'',
        form:{
          title:"",
          start_year:new Date(),
          start_month:new Date(),
          radio:1,
          quarter:1,
          dry_weight:"",
          dialysis_count:"",
          hd_count:"",
          hdf_count:"",
          hp_count:"",
          other_count:"",
          dialzer_apparatus:"",
          perfusion_apparatus:"",
          anticoagulant:"",
          kalium:"",
          autunite:"",
          natrium:"",
          houer:"",
          minute:"",
          befor_weight:"",
          after_weight:"",
          befor_pressure:"",
          after_pressure:"",
          template_summary_id:"",
          template_summary_content:"",
          template_plan_id:"",
          template_summary_content:"",
          template_inspection_id:"",
          template_inspection_content:"",
          admin_user_id:"",
          record_time:"",
          patient_id:"",
          start_time:"",
          end_time:"",
        },
        timeType:[
          {id:1,name:"第一季度"},
          {id:2,name:"第二季度"},
          {id:3,name:"第三季度"},
          {id:4,name:"第四季度"},
        ],
        options:[],
      }
    },
    created() {
    //   this.patient_id = parseInt(this.$route.query.id)
    //   if (isNaN(this.patient_id) || this.patient_id <= 0) {
    //     this.$notify.error({
    //       title: '错误',
    //       message: '无效的id'
    //     })
    //     this.$router.push('/patients/patients')
    //     return
    //   }
      var now = new Date()
      this.date = [now.getTime() - (7 * 24 * 60 * 60 * 1000), now.getTime()]

      var nowDate = new Date()
      var nowYear = nowDate.getFullYear()
      var nowMonth = nowDate.getMonth() + 1
      var nowDay = nowDate.getDate()
      this.end_time =
        nowYear +
        '-' +
        (nowMonth < 10 ? '0' + nowMonth : nowMonth) +
        '-' +
        (nowDay < 10 ? '0' + nowDay : nowDay)
      nowDate.setMonth(nowDate.getMonth() - 1)
      nowYear = nowDate.getFullYear()
      nowMonth = nowDate.getMonth() + 1
      nowDay = nowDate.getDate()
      this.start_time =
        nowYear +
        '-' +
        (nowMonth < 10 ? '0' + nowMonth : nowMonth) +
        '-' +
        (nowDay < 10 ? '0' + nowDay : nowDay)
      this.getlist()
    },
    methods: {
      getTime(val) {
         if(val < 0){
           return ""
         }
         if(val == ""){
          return ""
         }else {
          return uParseTime(val, '{y}-{m}-{d}')
         }
      },
      showEdit(){

      },
      deleteAction(){

      },
      onRowClick(){

      },
      createAction(){

      },
      didChangeCurrentRecord(){

      },
      startTimeChange(){

      },
      endTimeChange(){

      },
      print(){

      },
      getQuarter(year,quarter){
        var start_time = ""
        if(quarter == 1){
           
        }

        // DateTime dt = new DateTime();
        // switch (quarter)
        // {
        //     case "第一季度":
        //         dt = new DateTime(year, 1, 1);
        //         break;
        //     case "第二季度":
        //         dt = new DateTime(year, 4, 1);         
        //         break;
        //     case "第三季度":
        //         dt = new DateTime(year, 7, 1);           
        //         break;
        //     case "第四季度":
        //         dt = new DateTime(year, 10, 1);             
        //         break;

        // }

      },
      getlist(){
        var params={
        start_year:this.getTime(this.form.start_year),
        start_month:this.getTime(this.form.start_month),
        quarter:this.form.quarter,
        }
        console.log("param222222",params)
        console.log(moment(moment(2020 + '-01-01').toDate()).quarter(2).format("YYYY-MM-DD"))
      getInitDataList(params).then(response=>{

      })
      }
    }
  }
</script>

<style rel="stylesheet/css" lang="scss" scoped>
  .container {
    margin-left: 180px;
    padding: 20px;
    background: #fff;
    min-height: calc(100vh - 173px);
    margin-bottom: 15px;

  .record {
    padding-top: 20px;
  }

  }
  .record_content_panel {
    border-width: 1px;
    border-style: solid;
    border-color: #ebeef5;
    min-height: 200px;

  .title {
    font-size: 14px;
    font-weight: 500;
    color: #909399;
    line-height: 44px;
    height: 44px;
    text-align: center;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #ebeef5;
  }

  .content {
    padding: 12px 15px;
    font-size: 15px;
    color: gray;
    line-height: 22px;
  }

  }

  .new_record_form {

  /*/ / padding: 10 px, 25 px;*/

  .textarea_panel {
    margin-top: 10px;
  }

  }
</style>
<style>
.el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group {
  border-color: #d0d3da;
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: #d0d3da;
}
</style>