Vue_New/src/xt_pages/user/rescueRecord.vue

<template>
  <div class="patient-container">
    <patient-sidebar :id="patient_id" defaultActive="1-5"></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
              size="small"
              icon="el-icon-circle-plus-outline"
              type="primary"
              @click="show_dialog = true"
              >新增</el-button
            >
            <el-button
              size="small"
              icon="el-icon-circle-plus-outline"
              type="primary"
              v-if="id>0"
              @click="UpdateRecord"
              >修改</el-button
            >
            <el-button
              size="small"
              icon="el-icon-delete"
              v-show="selectingRows.length > 0"
              type="danger"
              @click="deleteAction"
              >删除</el-button
            >
            <el-button
              size="small"
              type="primary"
              v-if="id>0"
              @click="printAction"
              >打印</el-button
            >
            
          </span>
          <!--<span class="filter_title">日期查询</span>-->
          <!--<el-date-picker size="small" v-model="date" type="daterange" range-separator="至" start-placeholde="开始日期" end-placeholde="结束日期" value-format="timestamp" :clearable="false" @change="requestRescueRecords()"></el-date-picker>-->
        </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"
              >
              <el-table-column
                type="selection"
                width="55">
              </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 class="title">抢救内容</div>
                <div class="content" style="word-break: break-all;word-wrap: break-word">
                  {{
                    current_select_record == null
                      ? ""
                      : current_select_record.content
                  }}
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>

      <el-dialog
        title="新增抢救记录"
        width="40%"
        top="5vh"
        :visible.sync="show_dialog"
      >
        <div>
          <div class="new_record_form">
            <diV>
              <span class="filter_title">日常抢救:</span>
              <el-select
                v-model="select_template"
                placeholder="可选择抢救模板"
                @change="didSelectTemplate"
              >
                <el-option
                  v-for="(option, index) in templates"
                  :key="index"
                  :label="option.title"
                  :value="option.content"
                ></el-option>
              </el-select>
            </diV>
            <div class="textarea_panel">
              <el-input
                v-model="new_content"
                type="textarea"
                rows="6"
                resize="none"
              ></el-input>
            </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
                :disabled="
                  $store.getters.xt_user.subscibe.state == 3 ? true : false
                "
                type="primary"
                @click="createAction"
                :loading="uploading_new_record"
                >确定
              </el-button>
            </div>
          </div>
        </div>
      </el-dialog>


      <el-dialog
        title="修改抢救记录"
        width="40%"
        top="5vh"
        :visible.sync="edit_show_dialog"
      >
        <div>
          <div class="new_record_form">
            <diV>
              <span class="filter_title">日常抢救:</span>
              <el-select
                v-model="select_template"
                placeholder="可选择抢救模板"
                @change="didSelectTemplate"
              >
                <el-option
                  v-for="(option, index) in templates"
                  :key="index"
                  :label="option.title"
                  :value="option.content"
                ></el-option>
              </el-select>
            </diV>
            <div class="textarea_panel">
              <el-input
                v-model="new_content"
                type="textarea"
                rows="6"
                resize="none"
              ></el-input>
            </div>

            <div
              style="text-align: right; padding-right: 0px; padding-top: 10px; padding-bottom: 10px;"
            >
              <el-button @click="edit_show_dialog = false">取消</el-button>
              <el-button
                :disabled="
                  $store.getters.xt_user.subscibe.state == 3 ? true : false
                "
                type="primary"
                @click="updateAction"
                :loading="uploading_new_record"
                >确定
              </el-button>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import PatientSidebar from "./components/PatientSidebar";
import {
  createRescueRecord,
  deleteRescueRecords,
  getRescueRecords,
  getPatientRescueRecord,
  modifyCoursePrint
} from "@/api/patient";
import { parseTime } from "@/utils";
const moment = require('moment')
export default {
  name: "RescueRecord",
  components: {
    PatientSidebar
  },
  data() {
    return {
      loading: false,
      edit_show_dialog:false,
      patient_id: 0,
      date: [],
      start_time: "",
      end_time: "",
      records: [],
      doctors: [],
      current_select_record: null,

      show_dialog: false,
      uploading_new_record: false,
      templates: this.$store.getters.configlist.rescue_record,
      select_template: [],
      new_content: "",

      selectingRows: [],
      id:0,
    };
  },
  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 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()-1;
    // nowMonth = nowDate.getMonth() + 1;
    // nowDay = nowDate.getDate();
    // this.start_time =
    //   nowYear +
    //   "-" +
    //   (nowMonth < 10 ? "0" + nowMonth : nowMonth) +
    //   "-" +
    //   (nowDay < 10 ? "0" + nowDay : nowDay);
    this.start_time = moment().month(moment().month() - 1).startOf('month').format('YYYY-MM-DD');
    console.log("start_time",this.start_time)
    this.end_time = moment().endOf('month').format('YYYY-MM-DD');
    console.log("end_time",this.end_time)

    this.requestRescueRecords();
  },
  methods: {
    requestRescueRecords: function() {
      var startTime = new Date(this.date[0]);
      var endTime = new Date(this.date[1]);
      this.loading = true;
      getRescueRecords(this.patient_id, this.start_time, this.end_time)
        .then(rs => {
          this.loading = false;
          var resp = rs.data;
          if (resp.state == 1) {
            this.current_select_record = null;
            this.records = resp.data.records;
            this.doctors = resp.data.doctors;
           
          } else {
            this.$message.error(resp.msg);
          }
        })
        .catch(error => {
          this.loading = false;
          this.$message.error(error);
        });
    },

    didChangeCurrentRecord: function(record) {
      this.current_select_record = record;
      this.id = record.id
    },
    recordTime: function(timestamp) {
      var time = new Date(timestamp * 1000);
      return parseTime(time, "{y}-{m}-{d}");
    },
    doctorName: function(doctor_id) {
      for (let index = 0; index < this.doctors.length; index++) {
        const doctor = this.doctors[index];
        if (doctor.id == doctor_id) {
          return doctor.name;
        }
      }
      return "";
    },

    createAction: function() {
      if (this.new_content.length == 0) {
        this.$message.error("请填写抢救内容");
        return;
      }
      this.uploading_new_record = true;
      createRescueRecord(this.patient_id, this.new_content)
        .then(rs => {
          this.uploading_new_record = false;
          var resp = rs.data;
          if (resp.state == 1) {
            this.records.unshift(resp.data.record);
            // this.$refs.record_table.setCurrentRow()
            this.$refs.record_table.setCurrentRow(this.records[0]);
            // this.current_select_record = this.records[0]
            this.show_dialog = false;
            this.new_content = "";
          } else {
            this.$message.error(resp.msg);
          }
        })
        .catch(error => {
          this.uploading_new_record = false;
          this.$message.error(error);
        });
    },
    UpdateRecord(){
      getPatientRescueRecord(this.id).then(response=>{
         if(response.data.state == 1){
            var rescueRecord =  response.data.data.rescueRecord
            console.log("rescueRecord",rescueRecord)
            this.new_content = rescueRecord.content
            this.edit_show_dialog = true
         }
      })
    },
    didSelectTemplate: function(templateContent) {
      this.new_content =
        this.new_content.length > 0
          ? this.new_content + templateContent
          : templateContent;
    },

    didSelectionChange: function(selectRows) {
      this.selectingRows = selectRows;
    },
    deleteAction: function() {
      if (this.selectingRows.length == 0) {
        return;
      }
      var ids = [];
      for (let index = 0; index < this.selectingRows.length; index++) {
        const row = this.selectingRows[index];
        ids.push(row.id);
      }
      var ids_str = ids.join(",");
      this.loading = true;
      deleteRescueRecords(this.patient_id, ids_str)
        .then(rs => {
          var resp = rs.data;
          if (resp.state == 1) {
            for (let id_index = 0; id_index < ids.length; id_index++) {
              for (
                let record_index = 0;
                record_index < this.records.length;
                record_index++
              ) {
                if (ids[id_index] == this.records[record_index].id) {
                  this.records.splice(record_index, 1);
                  break;
                }
              }
            }
            this.selectingRows = [];
            this.$message.success("已删除");
          } else {
            this.$message.error(resp.msg);
          }
          this.loading = false;
        })
        .catch(err => {
          this.loading = false;
          this.$message.error(err);
        });
    },
    startTimeChange(val) {
      this.requestRescueRecords();
    },
    endTimeChange(val) {
      this.requestRescueRecords();
    },
    updateAction(){
      this.edit_show_dialog = true
      var params = {
        id:this.id,
        content:this.new_content,
      }
      modifyCoursePrint(params).then(response=>{
         if(response.data.state == 1){
           var coursePrint = response.data.data.coursePrint
           this.selectingRows = coursePrint
           this.requestRescueRecords();
           this.$message.success("更新成功!")
           this.edit_show_dialog = false
           
         }
      })
    },
    printAction(){
      if(this.id == 0){
          this.$message.error('请选择要打印的病程')
          return
       }
       this.$router.push({ path: "/rescue/record/print?id="+this.id+"&patient_id="+this.patient_id});
    }

  }
};
</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;
    background-color: rgb(245, 247, 250);
  }
  .content {
    padding: 12px 15px;
    font-size: 15px;
    color: gray;
    line-height: 22px;
  }
}

.new_record_form {
  .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>