elizebeth/src/xt_pages/outpatientDoctorStation/prescriptionTemplate.vue

<template>
    <div class="main-contain new-main-contain">
        <div class="position">
            <bread-crumb :crumbs='crumbs'></bread-crumb>
            <el-button type="primary" @click="add">新增</el-button>

        </div>
        <div class="app-container" style="display:flex;flex: 1;padding: 10px 20px 0px 20px;">
            <div class="mainLeft">
                <div class="mainCell" style="margin-bottom:10px;">
                    <el-input size="small" placeholder="请输入姓名" @input="searchAction"
                              @keyup.enter.native='searchAction'
                              v-model="search_input" class="filter-item"/>
                    <el-button size="small" style="margin-left:10px;" class="filter-item" type="primary"
                               @click="searchAction">
                        搜索
                    </el-button>
                </div>
                <div>
                    <el-table :data="data" :height="tableHeight" @row-click='choosePatient'
                              @current-change='currentChange' border style="width: 100%;"
                              :row-style="{ color: '#303133' }"
                              :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
                              highlight-current-row
                              ref="tab">
                        <el-table-column prop="name" label="姓名">
                            <template slot-scope="scope">{{scope.row.name}}</template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="mainRight">
                <el-table :data="templates" :height="tableHeight" @row-click='choosePatient'
                          @current-change='currentChange' border style="width: 100%;"
                          :row-style="{ color: '#303133' }"
                          :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
                          highlight-current-row
                          ref="tab"
                >
                    <el-table-column prop="name" label="模版名称" >
                        <template slot-scope="scope">{{scope.row.name}}</template>
                    </el-table-column>
                    <el-table-column prop="name" label="透析模式" >
                        <template slot-scope="scope">{{getMode(scope.row.mode)}}</template>
                    </el-table-column>
                    <el-table-column prop="name" label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="jumpDetail(scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="deleteTemplate(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>


                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :page-sizes="[10, 50, 100]"
                        :page-size="10"
                        background
                        align="right"
                        style="margin-top:20px;"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total"
                >
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
  import BreadCrumb from '@/xt_pages/components/bread-crumb'
  import { getPatientList, getPrescriptiontemplateList,delHisPrescriptionTemplate } from '@/api/his/his_config'
  import { uParseTime } from '@/utils/tools'

  const moment = require('moment')
  export default {
    components: {
      BreadCrumb
    },
    data() {
      return {
        templates: [],
        tableHeight: '',
        fullHeight: document.documentElement.clientHeight,
        isloading: false,
        data: [],
        page: 1,
        limit: 10,
        patient_id: 0
      }
    },
    methods: {
      jumpDetail(row){
        this.$router.push("/outpatientDoctorStation/prescriptionTemplatedetail?id="+row.id+"&patient_id="+this.patient_id)
      },
      deleteTemplate(row){
        this.$confirm('处方模版删除后不可恢复，是否确认删除', '删除', {
          confirmButtonText: '确 定',
          cancelButtonText: '取 消',
          type: 'warning'
        }).then(() => {
          let params = {
            id:row.id
          }
          delHisPrescriptionTemplate(params).then(response => {
            if (response.data.state == 1) {
              this.GetPrescriptiontemplateList()
            }
          })

        }).catch(() => {

        })


      },
      getMode(id){
        let name = ''
        this.treatment_mode = Object.values(this.$store.getters.treatment_mode)
        this.treatment_mode.map(item => {
          if(item.id == id){
            name = item.name
          }
        })
        return name
      },
      handleSizeChange(val) {
        this.limit = val
        this.GetPrescriptiontemplateList()
      },
      handleCurrentChange(val) {
        this.page = val
        this.GetPrescriptiontemplateList()
      },
      GetPrescriptiontemplateList() {
        let params = {
          patient_id: this.patient_id,
          page: this.page,
          limit: this.limit
        }
        getPrescriptiontemplateList(params).then(response => {
          if (response.data.state == 1) {
            this.templates = response.data.data.list
            this.total = response.data.data.total
          }
        })

      },
      searchAction() {

      },choosePatient(val) {
         this.page = 1,
         this.limit = 10
        let params = {
          patient_id: val.id,
          page: this.page,
          limit: this.limit
        }
        getPrescriptiontemplateList(params).then(response => {
          if (response.data.state == 1) {
            this.templates = response.data.data.list
            this.total = response.data.data.total
          }
        })
      },
      getList(id) {
        getPatientList().then(response => {
          if (response.data.state == 1) {
            this.data = response.data.data.list
            this.$refs.tab.setCurrentRow(this.data[0])
            this.patient_id = this.data[0].id
            this.GetPrescriptiontemplateList()

          }
        })
      },
      getTime(val, temp) {
        if (val != 0) {
          return uParseTime(val, temp)
        } else {
          return ''
        }
      },add(){
        if(this.patient_id == 0){
          this.$message.error("请选择病人")
          return
        }
        this.$router.push("/outpatientDoctorStation/prescriptionTemplatedetail?id="+0+"&patient_id="+this.patient_id)

      }
    },
    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.getList()
      let tableHeight = document.body.clientHeight - 263
      this.tableHeight = tableHeight

    },

    mounted() {
      const that = this
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight
          that.fullHeight = window.fullHeight
        })()
      }
    },
    watch: {
      fullHeight(val) {
        if (!this.timer) {
          this.fullHeight = val
          let tableHeight = val - 263
          this.tableHeight = tableHeight
          this.timer = true
          let that = this
          setTimeout(function() {
            that.timer = false
          }, 400)
        }
      }

    }
  }
</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: 10px;
        flex: 1;
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow-y: auto;

    .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;
    }

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

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

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

    .el-tabs__content {
        flex: 1;
        overflow-y: auto;
    }

    }

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

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

    .centerRight {
        width: 300px;
        margin-left: 10px;
        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;
    }

    .mainHeader {
        width: 100%;
        background: #fff;
        position: fixed;
        z-index: 100;
        height: 36px;
    }

    .titleBox {
        position: fixed;
        z-index: 99;
        background: #fff;
    }

    .fixedCell {
        position: fixed;
        z-index: 99;
        right: 30px;
        background: #fff;
        width: 300px;
        display: flex;
        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 {

    }

    }
    .centerDialog {

    .el-dialog__body {
        max-height: calc(100vh - 100px) !important;
        padding: 0 20px;
    }

    }
</style>