elizebeth/src/xt_pages/outpatientDoctorStation/modeTemplate.vue

<template>
    <div class="main-contain new-main-contain">
        <div class="position">
            <bread-crumb :crumbs='crumbs'></bread-crumb>
            <div style="float:right">
              <el-button type="primary" @click="add">新增</el-button>
              <!-- <el-button type="primary" @click="batchAdd">批量新增</el-button> -->
            </div>
        </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="请输入姓名或者透析号"
                              v-model="search_input" class="filter-item" @input="searchAction"
                              @keyup.enter.native='searchAction'/>
                </div> -->
                <div>
                    <el-table :data="tablelist" :height="tableHeight"
                               border style="width: 100%;"
                              :row-style="{ color: '#303133' }"
                              :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
                              highlight-current-row
                              ref="singleTable"
                              @current-change="handleCurrentChange"
                             >
                        <el-table-column prop="name" label="透析模式" align="center">
                            <template slot-scope="scope">{{scope.row.name}}</template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="mainRight">
                <el-table :data="templates" :height="tableHeight"
                           border style="width: 100%;"
                          :row-style="{ color: '#303133' }"
                          :header-cell-style="{backgroundColor: 'rgb(245, 247, 250)',color: '#606266'}"
                          highlight-current-row
                >
                    <el-table-column prop="name" label="模版名称" align="center">
                        <template slot-scope="scope" >
                            {{scope.row.name}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="透析模式" align="center">
                        <template slot-scope="scope">
                            {{getModeName(scope.row.mode)}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="jumpDetail(scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="deleteModeTemplate(scope.row,scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

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

  const moment = require('moment')
  export default {
    components: {
      BreadCrumb
    },
    data() {
      return {
        crumbs: [
          { path: false, name: '门诊医生站' },
          { path: false, name: '透析处方模版' }
        ],
        tablelist:[],
        templates:[],
        total:0,
        id:0,
        patient_id:0,
        patient_name:"",
        modes:"",
        mode_id:0,
        modeTeplate:{}
      }
    },
    methods: {
      searchAction() {

      },
      handleSizeChange(val) {
        this.limit = val

      },
      getTime(val, temp) {
        if (val != 0) {
          return uParseTime(val, temp)
        } else {
          return ''
        }
      },
      add() {
        this.$router.push('/hisTool/modeTemplateDetail?id='+this.id+"patient_name="+this.patient_name+"&modes="+this.modes)
      },
      getList(){
        var params = {
          mode_id:this.mode_id,
        }
       getModeTempaleteName(params).then(response=>{
         if(response.data.state == 1){
           var modeTeplate = response.data.data.modeTeplate
           console.log("modeTeplate",modeTeplate)

           this.templates = modeTeplate
         }
       })
      },
      handleCurrentChange(row){
        this.mode_id = row.id
        this.getList()
      },
      getModeName(id){
        var mode_name = ""
        for(let i=0;i<this.tablelist.length;i++){
          if(id == this.tablelist[i].id){
            mode_name = this.tablelist[i].name
          }
        }
        return mode_name
      },
      deleteModeTemplate(row,index) {
        this.$confirm('处方模版删除后不可恢复，是否确认删除', '删除', {
          confirmButtonText: '确 定',
          cancelButtonText: '取 消',
          type: 'warning'
        }).then(() => {
          let params = {
            id: row.id
          }
          delHisModePrescriptionTemplate(params).then(response => {
            if (response.data.state == 1) {
              this.$message.success("删除成功!")
              this.templates.splice(index,1)
            }
          })

        }).catch(() => {

        })
      },
       jumpDetail(row) {
        this.$router.push('/hisTool/modeTemplateDetail?id=' + row.id + '&patient_id=' + this.patient_id + '&patient_name=' + this.patient_name +"&modes="+this.mode_str)
      },
      // batchAdd(){
      //   this.$router.push("/hisTool/batchTemplate")
      // }
    },
    created() {
      this.tablelist =  Object.values(this.$store.getters.treatment_mode)
      this.mode_id = this.tablelist[0].id
      this.getList()
      let tableHeight = document.body.clientHeight - 263
      this.tableHeight = tableHeight

    },
    mounted() {
     this.$refs.singleTable.setCurrentRow(this.tablelist[0])
      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>