elizebeth/src/xt_pages/hospitalStation/11.vue

<template>
  <div class="main-contain outpatientChargesManagement">
    <div class="position">
      <bread-crumb :crumbs='crumbs'></bread-crumb>
    </div>
    <div class="app-container" style="display:flex;flex: 1;padding: 20px 20px 0px 20px;">
      <div class="mainLeft">
        <!--<div class="mainCell" style="justify-content: space-between;">-->
        <!--<p>未就诊：<span>1</span>人</p>-->
        <!--<p>已就诊：<span>0</span>人</p>-->
        <!--</div>-->
        <!--<div class="mainCell">-->
        <!--<el-radio-group v-model="radio" @change="changeRadio">-->
        <!--<el-radio :label=1>未就诊</el-radio>-->
        <!--<el-radio :label=2>已就诊</el-radio>-->
        <!--<el-radio :label=3>全部</el-radio>-->
        <!--</el-radio-group>-->
        <!--</div>-->
        <div class="mainCell" style="margin-bottom:10px;">
          <el-input size="small" @keyup.enter.native='searchAction' v-model.trim="search_input" class="filter-item"/>
          <el-button size="small" style="margin-left:10px;" class="filter-item" type="primary" @click="searchAction">
            搜索
          </el-button>
        </div>
        <div style="flex:1;overflow-y:auto;">
          <el-table :data="patientTableData" border style="width: 100%;" :row-style="{ color: '#303133' }"
                    :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
                    highlight-current-row ref="tab"
                    @current-change="handleCurrentChange">
            <el-table-column align="center" prop="name" label="患者姓名">
              <template slot-scope="scope">{{ scope.row.patients.name }}</template>
            </el-table-column>
            <el-table-column align="center" prop="name" label="就诊号" width="90">
              <template slot-scope="scope">{{ scope.row.his_patient.number }}</template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="mainRight">
        <div class="mainCell" style="margin-bottom:10px;flex-direction: row-reverse;">
          <el-button size="small" @click="open(1)" type="primary" style="margin-left:10px;">打印处置单</el-button>
          <el-button size="small" @click="open(2)" type="primary">打印治疗单</el-button>
          <el-button size="small" @click="open(3)" type="primary">打印</el-button>
          <el-button v-loading="loadingone" v-if="hisPatientInfo == null || hisPatientInfo.id == 0 " size="small" @click="open(6)"
                     type="primary">挂号
          </el-button>
          <el-button v-loading="loadingtwo" v-if="hisPatientInfo != null && hisPatientInfo.id > 0 " size="small" @click="open(4)"
                     type="primary">收费
          </el-button>
          <el-button size="small" @click="open(5)" type="primary">退费</el-button>
        </div>
        <div class="mainCenter">
          <div class="centerLeft">
            <div class="tabsBox">
              <!--<el-button type="text" class="addTab" @click="addCharges" icon="el-icon-circle-plus">附加收费</el-button>-->
              <el-tabs class="preTabs" v-model="editableTabsValue" type="card" @tab-click="tabclickEvent">
                <el-tab-pane
                  v-for="(item, index) in prescriptions"
                  :key="index"
                  :label="item.name"
                  :name="item.name"
                >
                </el-tab-pane>
                <div class="RP">Rp</div>
                <prescription-table ref="prescription_tables" :prescription="curPrescriptions"></prescription-table>
              </el-tabs>

            </div>
            <div class="costBox">
              <span>当前处方总费用：<span style="color:red;">{{ getTotal() }}元</span></span>
              <span>{{ state }}</span>
            </div>
          </div>
          <div class="centerRight">
            <p class="centerRightTitle">人员信息</p>
            <div style="display:flex;justify-content: space-between;line-height:30px;">
              <span style="font-size:14px;">人员编码:</span>
              <span style="font-size:14px;">日期:{{record_date}}</span>
            </div>
            <ul class="basicUl">
              <li style="width:50%;">姓名：{{patientInfo.name}}</li>
              <li style="width:50%;">性别：{{patientInfo.gender == 1 ? '男' : '女' }}</li>
              <li style="width:50%;">年龄：{{patientInfo.age }}</li>
              <li style="width:50%;">身高：{{patientInfo.height}}</li>
              <li style="width:50%;">体重：{{patientInfo.weight}}</li>
              <li style="width:50%;">电话：{{patientInfo.phone}}</li>
              <li style="width:100%;">地址：{{patientInfo.home_address}}</li>
            </ul>
            <p class="centerRightTitle">诊断信息</p>
            <div style="display:flex;justify-content: space-between;line-height:30px;">
              <span style="font-size:14px;">门诊编号:676273816287361</span>
            </div>
            <ul class="basicUl">
              <li style="width:50%;">医生：{{ }}</li>
              <li style="width:50%;">科室：{{ }}</li>
              <li style="width:100%;">费用：{{ }}元</li>
              <li style="width:100%;">判断结果：</li>
              <li style="width:100%;">是否有传染病：</li>
              <li style="width:100%;">血压：</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!--<additionalCharges ref='additionalCharges'></additionalCharges>-->
  </div>
</template>


<script>
  import BreadCrumb from '@/xt_pages/components/bread-crumb'
  import noCharge from './components/noCharge'
  import charged from './components/charged'
  import medicalInsuranceRefund from './components/medicalInsuranceRefund'
  import prescriptionTable from './components/prescriptionTable'
  import additionalCharges from './components/additionalCharges'
  import { getPatientInformation, getPatientList } from '@/api/project/project'
  import { getPatientInfo, getSchedulePatientList, register,upload } from '@/api/his/his'

  const moment = require('moment');
  export default {
    components: {
      BreadCrumb,
      noCharge,
      charged,
      medicalInsuranceRefund,
      prescriptionTable,
      additionalCharges
    },
    data() {
      return {
        crumbs: [
          { path: false, name: '门诊收费' },
          { path: false, name: '门诊收费管理' }
        ],
        curPrescriptions: {},
        prescriptions: [],
        record_date: '',
        tableData: [],
        editableTabsValue: '1',
        loadingone:false,
        editableTabs: [{
          title: '处方1',
          name: '1'
        }],
        tabIndex: 1,
        hisPatientInfo: {},
        loadingtwo:false,
        patientTableData: [{
          name: '杨美英',
          mdtrt_id: '1709946'
        }],
        patientInfo: { id: 0 },
        doctor: {},
        total: 0,
        state: '未收费',
        radio: 1,
        radioStatus: 1,
        search_input: '',
        start_time: moment().locale('zh-cn').format('YYYY-MM-DD')
      }
    },
    created() {
      var nowDate = new Date();
      var nowYear = nowDate.getFullYear();
      var nowMonth = nowDate.getMonth() + 1;
      var nowDay = nowDate.getDate();
      this.record_date =
        nowYear +
        '-' +
        (nowMonth < 10 ? '0' + nowMonth : nowMonth) +
        '-' +
        (nowDay < 10 ? '0' + nowDay : nowDay);

      //获取患者信息
      this.getPatientList()
    },
    methods: {
      tabclickEvent(val) {
        for (let i = 0; i < this.prescriptions.length; i++) {
          if (this.prescriptions[i].name == val.name) {
            this.curPrescriptions = {};
            var temp = this.deepClone(this.prescriptions[i]);
            this.curPrescriptions = temp;
            console.log(this.curPrescriptions)
          }
        }
      }, deepClone(source) {
        if (!source && typeof source !== 'object') {
          throw new Error('error arguments', 'shallowClone')
        }
        const targetObj = source.constructor === Array ? [] : {};
        Object.keys(source).forEach((keys) => {
          if (source[keys] && typeof source[keys] === 'object') {
            targetObj[keys] = this.deepClone(source[keys])
          } else {
            targetObj[keys] = source[keys]
          }
        });
        return targetObj
      },
      getTotal() {
        var total = 0;
        console.log(this.prescriptions);
        for (let i = 0; i < this.prescriptions.length; i++) {
          if (this.prescriptions[i].advices != null) {
            for (let a = 0; a < this.prescriptions[i].advices.length; a++) {
              total = total + this.prescriptions[i].advices[a].price * this.prescriptions[i].advices[a].prescribing_number
            }
          }
          if (this.prescriptions[i].project != null) {
            for (let b = 0; b < this.prescriptions[i].project.length; b++) {
              total = total + this.prescriptions[i].project[b].price * this.prescriptions[i].project[b].count
            }
          }
        }
        return total
      },
      moreState(tab, event) {
        if (tab == 'more') {
          return false
        }
      },
      open(index) {
        if (index == 1) {
        } else if (index == 2) {

        } else if (index == 4) {

          let params = {
            'id': this.patientInfo.id,
            'record_time': this.record_date
          };
          this.loadingtwo = true;
          upload(params).then(response => {
            if (response.data.state == 0) {
              this.$message.error(response.data.msg);
              this.loadingtwo = false;

              return false

            } else {
              this.loadingtwo = false

            }
          });

          this.state = '已收费';
          this.$message({ message: '收费成功', type: 'success' })
        } else if (index == 5) {
          this.$message({ message: '退费成功', type: 'success' })
        } else if (index == 6) {

          if (this.patientInfo.id == 0) {
            this.$message.error('请先选择要挂号的病人');
            return
          }
          let params = {
            'id': this.patientInfo.id,
            'record_time': this.record_date
          };
          this.loadingone = true;
          register(params).then(response => {
            if (response.data.state == 0) {
              this.$message.error(response.data.msg);
              this.loadingone = false;

              return false

            } else {
              this.loadingone = false;
              var his_info = response.data.data.his_info;
              this.hisPatientInfo = his_info
            }
          })
        }
      },
      addTab(targetName) {
        let newTabName = ++this.tabIndex + '';
        this.editableTabs.push({
          title: '处方' + this.tabIndex,
          name: newTabName
        });
        this.editableTabsValue = newTabName
      },
      removeTab(targetName) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name
              }
            }
          })
        }

        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter(tab => tab.name !== targetName)
      },
      addCharges() {
        this.$refs.additionalCharges.show()
      },
      choosePatient() {

      },
      changeRadio(id) {
        console.log(id);
        this.radioStatus = id;
        this.getPatientList()
      },

      //患者列表
      getPatientList() {
        let params = {
          'record_date': this.record_date
        };
        getSchedulePatientList(params).then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg);
            return false
          } else {
            this.patientTableData = [];
            // let cal_one = 0
            // let cal_two = 0
            for (let i = 0; i < response.data.data.list.length; i++) {
              // if (response.data.data.list[i].prescription == null || response.data.data.list[i].prescription.length == 0) {
              //   // cal_one = cal_one + 1
              // }
              if (response.data.data.list[i].prescription != null && response.data.data.list[i].prescription.length > 0) {
                // cal_two = cal_two + 1
                this.patientTableData.push(response.data.data.list[i])
              }
            }

            // this.cal_one = cal_one
            // this.cal_two = cal_two
          }
        })
      },

      unique(arr) {
        const res = new Map();
        return arr.filter((arr) => !res.has(arr.id_card_no) && res.set(arr.id_card_no, 1))
      },
      handleCurrentChange(val) {
        this.getPatientInformation(val.patients.id)
      }, //获取患者的基本信息
      getPatientInformation(id) {
        let params = {
          'record_date': this.record_date,
          'patient_id': id
        };
        getPatientInfo(params).then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg);
            return false
          } else {
            this.patientInfo = response.data.data.xt_info;
            this.hisPatientInfo = response.data.data.his_info;
            this.prescriptions = [];
            for (let i = 0; i < response.data.data.prescription.length; i++) {
              var prescription = response.data.data.prescription[i];
              let index = i + 1;
              let obj = {
                name: '处方' + index,
                advices: prescription.advices,
                project: prescription.project,
                type: response.data.data.prescription[i].type
              };
              this.prescriptions.push(obj);
              this.curPrescriptions = this.prescriptions[0]

            }
            // this.$refs.prescriptions.setData(this.prescriptions)
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .app-container {
    height: 100%;
  }

  .outpatientChargesManagement {
    height: 100%;
    display: flex;
    flex-direction: column;

  .mainLeft {
    width: 200px;
    height: 100%;
    display: flex;
    flex-direction: column;

  .el-radio {
    margin-right: 5px;
  }

  }
  .mainCell {
    height: 36px;
    display: flex;
    align-items: center;
  }

  .mainRight {
    margin-left: 20px;
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;

  .cellSpan {
    min-width: 80px;
    display: inline-block;
    margin-right: 10px;
  }

  }
  .tabsBox {
    position: relative;
    height: 90%;
    overflow-y: auto;
    margin-bottom: 60px;

  .el-tabs__item {
    padding: 0 10px;
  }

  }
  .addTab {
    position: absolute;
    right: 0;
    top: 6px;
    z-index: 20;
  }

  .mainCenter {
    display: flex;
    flex: 1;
  }

  .costBox {
    width: 100%;
    height: 60px;
    background: #fff;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .centerLeft {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .centerRight {
    width: 300px;
    margin-left: 5px;
    display: flex;
    flex-direction: column;
  }

  .RP {
    color: #409EFF;
    font-size: 20px;
    margin-bottom: 5px;
  }

  .centerRightTitle {
    color: #409EFF;
    padding-top: 10px;;
  }

  .basicUl {
    border-top: 1px solid #e5e5e5;
    border-left: 1px solid #e5e5e5;
    display: flex;
    flex-wrap: wrap;

  li {
    border-bottom: 1px solid #e5e5e5;
    border-right: 1px solid #e5e5e5;
    width: 100%;
    height: 38px;
    line-height: 38px;
    text-indent: 5px;
    font-size: 14px;
  }

  }
  }
</style>

<style lang="scss">
  #tab-more {

  .el-icon-close {
    display: none;
  }

  }
</style>