elizebeth/src/xt_pages/outpatientDoctorStation/components/deskPrescription.vue

<template>
  <div style="height: calc(100% - 36px);display: flex;flex-direction: column;">
    <div style="border-top:1px solid #e5e5e5;margin-top:5px;">
      <div class="mainCell" style="margin-bottom:10px;float:right">
        <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(4)" type="primary">选择模板</el-button>
        <el-button size="small" @click="open(5)" type="primary">存模板</el-button>
      </div>
    </div>
    <div class="backColor"></div>
    <div class="mainCenter">
      <div class="centerLeft">
        <el-form :model="form"  ref="form" label-width="80px">
          <el-form-item label="姓名:" prop="name">
            <el-input v-model="patientInfo.name" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="证件号: " prop="name">
            <el-input v-model="patientInfo.id_card_no" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="挂号类型: " prop="name">
            <el-input v-model="hisPatientInfo.register_type" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="诊断:" prop="name">
            <el-autocomplete
              style="width:100%;"
              class="inline-input"
              v-model="state1"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
            ></el-autocomplete>
          </el-form-item>
          <el-form-item label="大病类别: " prop="name">
            <el-input v-model="form.name" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="处方类型: " prop="name">
            <el-select v-model="value" placeholder="请选择" style="width:100%;">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <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" closable @tab-remove="removeTab"
                   :before-leave="moreState" @tab-click="tabclickEvent">
            <el-tab-pane
              v-for="(item, index) in prescriptions"
              :key="index"
              :label="item.name"
              :name="item.name"
            >

            </el-tab-pane>
            <el-tab-pane name="more" closable><span slot="label"><i class="el-icon-plus" @click="addTab"></i></span>
            </el-tab-pane>
            <div class="RP">Rp</div>
            <prescription-table ref="prescription_tables" :prescription="curPrescriptions" :preDrugs="preDrugs" :activeType="customTabIndex"></prescription-table>
          </el-tabs>

        </div>
        <div class="costBox">
          <span>医生：</span>
          <el-select style="margin-right:5px;" v-model="doctorValue" placeholder="">
            <el-option
              v-for="item in doctorOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <span>科室：</span>
          <el-select style="margin-right:5px;" v-model="departmentValue" placeholder="">
            <el-option
              v-for="item in departmentOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <span>总计：</span>
          <span style="color:red;">{{ total }}</span>元
        </div>
      </div>
      <div class='centerRight'>
        <div class="rightTab">
          <p :class="rightTab == 1 ? 'activeP' : ''" @click="clickTab(1)">药品</p>
          <p :class="rightTab == 2 ? 'activeP' : ''" @click="clickTab(2)">项目</p>
        </div>
        <template>
          <div style="margin-top:5px;">
            <el-input style="width:50%;" v-model="input" placeholder=""></el-input>
            <el-select style="float: right;width: 49%;" v-model="value" placeholder="">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div style="height:84%;overflow-y: auto;margin-bottom: 60px;" v-show="showOne">
            <el-tabs class="rightTabs" v-model="activeName">
              <el-tab-pane label="药品列表" name="1">
                <el-table :data="drugs" border @select='selectDrugs' style="width: 100%;"
                          :row-style="{ color: '#303133' }"
                          :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
                          highlight-current-row>
                  <el-table-column align="center" type="selection" width="40"></el-table-column>
                  <el-table-column align="center" prop="name" label="名称">
                    <template slot-scope="scope">{{ scope.row.drug_name }}</template>
                  </el-table-column>
                  <el-table-column align="center" label="规格" width="60">
                    <template slot-scope="scope">{{ scope.row.drug_spec }}</template>
                  </el-table-column>
                  <el-table-column align="center" label="单价" width="40">
                    <template slot-scope="scope">{{ scope.row.retail_price }}</template>
                  </el-table-column>
                </el-table>

              </el-tab-pane>
              <el-tab-pane label="医嘱模板" name="2">
                <el-table :data="advices_template" border style="width: 100%;" :row-style="{ color: '#303133' }"
                          :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
                          highlight-current-row>
                  <el-table-column align="center" type="selection" width="40"></el-table-column>
                  <el-table-column align="center" prop="name" label="名称">
                    <template slot-scope="scope">{{}}</template>
                  </el-table-column>
                  <el-table-column align="center" label="规格" width="60">
                    <template slot-scope="scope">33</template>
                  </el-table-column>
                  <el-table-column align="center" label="库存" width="60">
                    <template slot-scope="scope">22</template>
                  </el-table-column>
                  <el-table-column align="center" label="单价" width="40">
                    <template slot-scope="scope">12</template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>

         <div style="height:84%;overflow-y: auto;margin-bottom: 60px;" v-show="showTwo">
            <el-tabs class="rightTabs" v-model="activeName">
              <el-tab-pane label="项目列表" name="1">
                 <el-table :data="tabProject" border @select='selectChange' style="width: 100%;"
                          :row-style="{ color: '#303133' }"
                          :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
                          highlight-current-row >
                  <el-table-column align="center" type="selection" width="40"></el-table-column>
                  <el-table-column align="center" prop="name" label="名称">
                    <template slot-scope="scope">{{ scope.row.project_name }}</template>
                  </el-table-column>
                  <el-table-column align="center" label="规格" width="60">
                    <template slot-scope="scope">{{ scope.row.single_dose }}</template>
                  </el-table-column>
                  <el-table-column align="center" label="单价" width="40">
                    <template slot-scope="scope">{{ scope.row.price }}</template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="项目组套" name="2">
                <el-table :data="tabPrjectTeam" border style="width: 100%;" :row-style="{ color: '#303133' }"
                          :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
                          highlight-current-row
                         @select='selectTeam'>
                  <el-table-column align="center" type="selection" width="40"></el-table-column>
                  <el-table-column align="center" prop="name" label="名称">
                    <template slot-scope="scope">{{scope.row.project_team}}</template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>

          <div class="comfirmBox">
            <div>
              <span>药品类型：</span>
              <el-select style="margin-right:5px;width:100px;" v-model="value" placeholder="" @change="changeKind">
                <el-option
                  label="全部"
                  value="0">
                </el-option>
                <el-option
                  v-for="(item,index) in getDictionaryDataConfig('system','drug_type')"
                  :key="index"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </div>
            <el-button type="primary" size="small" @click="comfirm">确定添加</el-button>
          </div>
        </template>
      </div>
    </div>
    <additionalCharges ref='additionalCharges' :paitent_id="paitent_id"></additionalCharges>
    <select-template ref='selectTemplate'></select-template>
    <save-template ref='saveTemplate'></save-template>
  </div>
</template>


<script>
  import { getPatientInfo, getSchedulePatientList, getInitData } from '@/api/his/his'
  import { getDictionaryDataConfig} from "@/utils/data";
  import prescriptionTable from './prescriptionTable'
  import selectTemplate from './selectTemplate'
  import saveTemplate from './saveTemplate'
  import additionalCharges from './additionalCharges'
  import { getHisProject,addProjectTeam,getAllProjectTeam,getPojectListById } from '@/api/project/project'
  // import { getPatientInfo, getSchedulePatientList } from '@/api/his/his'

  export default {
    props: {
      patientInfo: Object,
      hisPatientInfo: Object,
      prescriptions: Array,
    },
    components: {
      selectTemplate,
      saveTemplate,
      prescriptionTable,
      additionalCharges
    },
    data() {
      return {
        value:"",
        form: {
          name: ''
        },
        drugs:[],
        allDrugs:[],
        advices_template:[],

        editableTabsValue: '处方1',
        editableTabs: [{
          title: '处方1',
          name: '1'
        }],
        tabIndex: 1,
        currenet_inedx:0,
        rightTab: 1,
        activeName: '1',
        curPrescriptions: this.prescriptions[0],
        drugTableData: [],
        preDrugs: [],
        curDrugs: [],
        doctorOptions: [],
        doctorValue: '',
        departmentOptions: [],
        departmentValue: '',
        total: 0,
        showOne:true,
        showTwo:false,
        state1:"",
        customTabIndex:1,
        options:[],
        tabProject:[],
        strids:"",
        showOne:true,
        showTwo:false,
        tableData:[],
        tabPrjectTeam:[],
        teamList:[],
      }
    },
    methods: {
      changeKind(val){
        this.drugs = []

        if(val == 0){
          this.drugs = this.allDrugs
        }else{
          for (let i = 0; i < this.allDrugs.length; i++){
            if (this.allDrugs[i].drug_type == val){
              this.drugs.push(this.allDrugs[i])
            }
          }
        }
      },
      getDictionaryDataConfig(module, filed_name) {
        return getDictionaryDataConfig(module, filed_name)

      },
      getInitData(){
        getInitData().then(response => {
          if (response.data.state == 0) {
            this.$message.error(response.data.msg)
            return false
          } else {
            this.drugs = response.data.data.drugs
            this.allDrugs = response.data.data.drugs
            this.advices_template = response.data.data.advices_template
          }
        })

      },
      tabclickEvent(val){
        for (let i= 0; i<this.prescriptions.length; i++){
          console.log(this.prescriptions[i].name)
            if(this.prescriptions[i].name == val.name){
              this.curPrescriptions = this.prescriptions[i]

              //用来区分处方属于项目还是药品
              if(this.curPrescriptions.advices.length > 0 && this.curPrescriptions.projects.length == 0){
                this.customTabIndex = 1
              }
              if(this.curPrescriptions.advices.length == 0 && this.curPrescriptions.projects.length > 0){
               
                this.customTabIndex = 2
              }

              if(this.curPrescriptions.advices.length == 0 && this.curPrescriptions.projects.length == 0){
                this.customTabIndex = this.rightTab
              }

            }


        }
      },
      setData(data){
        this.prescriptions = data
        console.log(this.$refs)
        this.$nextTick(() => {
         this.$refs.prescription_tables.setNewData(this.prescriptions[0])
        });
      },
      moreState(tab, event) {
        if (tab == 'more') {
          return false
        }
      },
      open(index) {
        if (index == 1) {
          localStorage.setItem('drugs', JSON.stringify(this.preDrugs))
          this.$message({ message: '保存成功', type: 'success' })
        } else if (index == 2) {
          this.$router.push('/outpatientDoctorStation/print')
        } else if (index == 4) {
          this.$refs.selectTemplate.show()
        } else if (index == 5) {
          this.$refs.saveTemplate.show()
        }

      },
      addTab(targetName) {
        ++this.tabIndex
        let newTabName = '处方' + this.tabIndex
        this.prescriptions.push({
          name: newTabName,
          advices: [],
          projects: []

        })
        this.editableTabsValue = newTabName
        this.curPrescriptions = this.prescriptions[this.prescriptions.length-1]
      },
      removeTab(targetName) {

        let tabs = this.prescriptions
        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.prescriptions = tabs.filter(tab => tab.name !== targetName)
        console.log(this.prescriptions)
      },
      clickTab(index) {
        if(index == 1){
          this.showOne = true
          this.showTwo = false
          this.$nextTick(() => {
            this.$refs.prescription_tables.setNewData(this.prescriptions[this.prescriptions.length-1])
          });
         this.customTabIndex = 1
        }
        if(index == 2){
          this.showTwo = true
          this.showOne = false
           this.$nextTick(() => {
            this.$refs.prescription_tables.setNewData(this.prescriptions[this.prescriptions.length-1])
          });
         this.customTabIndex = 2
        }
        this.rightTab = index


        //用来区分处方属于项目还是药品
        if(this.curPrescriptions.advices.length > 0 && this.curPrescriptions.projects.length == 0){
        
          this.customTabIndex = 1
        }
        if(this.curPrescriptions.advices.length == 0 && this.curPrescriptions.projects.length > 0){
         
          this.customTabIndex = 2
        }
        if(this.curPrescriptions.advices.length == 0 && this.curPrescriptions.projects.length == 0){
          // this.customTabIndex = this.rightTab
          this.customTabIndex = index
        }




      },
      addCharges() {
        this.$refs.additionalCharges.show()
      },
      selectDrugs(selection, row) {
        this.curDrugs = selection
      },
      comfirm() {
        this.preDrugs = this.curDrugs
        
        for (let i = 0; i < this.prescriptions.length; i++){
          console.log("名称",this.prescriptions[i].name)
          console.log("名称2",this.editableTabsValue)
          if(this.prescriptions[i].name == this.editableTabsValue){
            this.prescriptions[i].advices = this.preDrugs
            this.prescriptions[i].project = this.teamList
            this.curPrescriptions = this.prescriptions[i]
            // this.$refs.prescription_tables.setNewData(this.prescriptions[i])
          }
        }
        console.log("222222",this.prescriptions)
      },
      selectChange(row){
        this.teamList = row
      },
      getlist(){
        getHisProject().then(response=>{
          if(response.data.state == 1){
            var project = response.data.data.project
            console.log("project",project)
            this.tabProject = project
          }
        })
      },
      querySearch(){

      },
      getAllProjectTeam(){
        getAllProjectTeam().then(response=>{
          if(response.data.state == 1){
            var team =  response.data.data.team
            console.log("team",team)
            this.tabPrjectTeam = team
          }
        })  
      },
      selectTeam(row){
          var arr = []
          for(let i=0;i<row.length;i++){
             arr.push(row[i].project_id)
          }
        var ids =  arr.join(",")
        console.log("ids",ids)
        var strArr = ids.split(",")
        var res = [];//接收不重复的数据
      
        for (var i = 0; i<strArr.length; i++){
        var flag = true;
       
        for (var j = 0; j<i; j++){
          if(strArr[i]===strArr[j]){
            flag = false;
            break;
           }
         }
        if(flag){
          res.push(strArr[i])
         }
        }
        console.log("res",res)
      
        var idstr =  res.join(",")
        console.log("idstr",idstr)
        const params = {
           project_id:idstr
        }
        getPojectListById(params).then(response=>{
           if(response.data.state == 1){
             var project =  response.data.data.project
             console.log("project222",project)
             this.teamList = []
             this.teamList = project
           }
        })
      }
    },
    created(){
      this.getInitData()
      //获取所有项目
      this.getlist()
      //获取所以项目组套
      this.getAllProjectTeam()
    },
    watch:{
      hisPatientInfo:function(val){
        console.log("333333333",this.hisPatientInfo)
        deep:true
      }
    }
  }
</script>

<style lang="scss" scoped>
  .new-main-contain {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .app-container {
    height: 100%;
  }

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

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

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

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

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

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

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

  .el-form-item {
    width: 32%;
    margin-right: 1%;
    float: left;
  }

  .el-form-item__label {
    text-align: left;
  }

  }
  .backColor {
    background: #f6f8f9;
    height: 5px;
    margin-bottom: 5px;
  }

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

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

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

  }
  .preTabs {
    height: 100%;
  }

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

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

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

  .rightTab {
    height: 40px;
    width: 100%;
    border: 1px solid #d2d2d2;
    box-sizing: border-box;

  p {
    width: 50%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #eee;
    float: left;
  }

  > p:last-child {
    border-left: 1px solid #d2d2d2;
    float: right;
  }

  .activeP {
    background: #409EFF;
    color: #fff;
  }

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

<style lang="scss">
  .centerLeft {

  .el-form-item__label {
    text-align: left;
  }

  }
  .tabsBox {

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

  .el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:nth-child(2), .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:nth-child(2) {
    padding: 0 10px;
  }

  .el-tabs--bottom .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom .el-tabs--right > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--bottom.el-tabs--card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--left > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top .el-tabs--right > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--border-card > .el-tabs__header .el-tabs__item:last-child, .el-tabs--top.el-tabs--card > .el-tabs__header .el-tabs__item:last-child {
    padding: 0 10px;
  }

  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable {
    padding: 0 10px;
  }

  }
  .centerRight {

  .el-tabs__nav-scroll {
    display: flex;
  }

  .el-tabs__nav {
    margin: 0 auto;
  }

  .el-table th .cell, .el-table td .cell {
    padding: 0 2px;
  }

  }
  .preTabs {

  .el-tabs__content {

  }

  }
  .rightTabs {
    height: 100%;


  .el-tabs__content {

  }

  }
  #tab-more {

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

  }
</style>