xt_vue/src/xt_pages/user/patients.vue

<template>
<div class="main-contain">
  <div class="position">
    <bread-crumb></bread-crumb>
    <el-button :disabled="$store.getters.xt_user.subscibe.state==3?true:false" @click="$router.push({path:'/patients/create'})" class="filter-item" style="float:right;" type="primary" icon="el-icon-circle-plus-outline" size="small">新增</el-button>
  </div>
  <div class="app-container">
    <div class="cell">
      <label class="title"><span class="name">病人搜索</span> : </label>
      <el-input   style="width: 400px;" v-model="searchKey" class="filter-item" placeholder="病人姓名/透析号" size="small"/>
      <el-button  class="filter-item" type="primary" icon="el-icon-search" @click="search" size="small" >搜索</el-button>
    </div>
   
    <div class="cell">
      <label class="title"><span class="name">日期查询</span> : </label>
      <el-date-picker v-model="listQuery.start_time" size="small"  prefix-icon="el-icon-date" @change="changeTime" :editable="false" style="width: 196px;" type="date" placeholder="选择日期时间" align="right" :picker-options="pickerOptions1"  format="yyyy-MM-dd" value-format="yyyy-MM-dd" > </el-date-picker>
      <span class="">-</span>
      <el-date-picker v-model="listQuery.end_time" size="small"  prefix-icon="el-icon-date" @change="changeTime" :editable="false" style="width: 196px;" type="date" placeholder="选择日期时间" align="right" :picker-options="pickerOptions1"  format="yyyy-MM-dd" value-format="yyyy-MM-dd"> </el-date-picker>
    </div>
    <div class="cell clearfix">
      <label class="title"><span class="name">排班班次</span> : </label>
      <div class="time ">
        <ul class="">
          <li :class="item.value==schedulType?'active':''" @click='selectSchedulType(item.value)' v-for="item in schedulArr" :key="item.value" >{{item.label}}</li>
        </ul>
      </div>
    </div>
    <div class="cell clearfix">
      <label class="title"><span class="name">状态</span> : </label>
      <div class="time ">
        <ul class="">
          <li :class="item.value==systemType?'active':''" @click="selectSystemType(item.value)" v-for="item in systemArr" :key="item.value" >{{item.label}}</li>
        </ul>
      </div>
    </div>
    <div class="cell clearfix">
      <label class="title"><span class="name">转归情况</span> : </label>
      <div class="time ">
        <ul class="">
          <li :class="item.lapseto==lapsetoType?'active':''"  @click="selectLapseTo( item.lapseto)" v-for="item in lapsetoArr" :key="item.value" >{{item.label}}</li>
        </ul>
      </div>
    </div>
    <div class="cell clearfix">
      <label class="title"><span class="name">病人来源</span> : </label>
      <div class="time ">
        <ul class="">
          <li :class="item.source==sourceType?'active':''" @click="selectSource(item.source)" v-for="item in sourceArr" :key="item.value" >{{item.label}}</li>
        </ul>
      </div>
    </div>
    <div class="cell clearfix">
      <label class="title"><span class="name">其它查询</span> : </label>
      <el-select v-model="listQuery.contagion" size="small" clearable  placeholder="传染病" @change="changeOtherSearch">
        <el-option
          v-for="item in contagionList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-select style="margin-left: 10px;" v-model="listQuery.reimbursement_way"  size="small" clearable  placeholder="付费方式"  @change="changeOtherSearch">
        <el-option
          v-for="item in reimbursement_ways"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-select
        v-model="listQuery.isscheduling"
        collapse-tags
        style="margin-left: 10px;"
        clearable
        placeholder="排班情况" size="small"  @change="changeOtherSearch">
        <el-option
          v-for="item in scheduling"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-select
        v-model="listQuery.isprescription"
        collapse-tags
        style="margin-left:10px;"
        clearable
        placeholder="透析处方" size="small"  @change="changeOtherSearch">
        <el-option
          v-for="item in prescription"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>

    <el-table
      ref="multipleTable" :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}" :data="tableData" border fit highlight-current-row  style="width: 100%;margin-top: 10px;" @selection-change="handleSelectionChange">
      <el-table-column align="center" label="全选" width="60px" type="selection" ></el-table-column>
      <el-table-column type="index" label="序号" width="60px" align="center"></el-table-column>
      <el-table-column  label="透析号" min-width="80" property="dialysis_no" align="center"></el-table-column>
      <el-table-column  label="住院号" min-width="80"  property="admission_number" align="center"> </el-table-column>
      <el-table-column property="name" label="姓名" min-width="80" align="center">
        <template slot-scope="scope" >
          <router-link :to="'/patients/patient/'+scope.row.id" style="color:#409eff" >{{scope.row.name}}</router-link>
        </template>
      </el-table-column>
      <el-table-column label="性别" min-width="80" align="center">
        <template slot-scope="scope" >
          <span v-if="scope.row.gender==1">男</span>
          <span v-else-if="scope.row.gender==2">女</span>
          <span v-else>未知</span>
        </template>
      </el-table-column>
      <el-table-column label="来源" min-width="80" align="center">
        <template slot-scope="scope" >
          <span v-if="scope.row.source==1">门诊</span>
          <span v-else-if="scope.row.source==2">住院</span>
          <span v-else>未知</span>
        </template>
      </el-table-column>
      <el-table-column property="total_dialysis" label="透析次数" min-width="94" align="center"> </el-table-column>
      <!-- <el-table-column min-width="150" label="二维码" align="center">
        <template slot-scope="scope"  type="text">
          <a style="color:#409eff"  v-if="scope.row.binding_state==1" @click="openWechatBindDialog">已绑定</a>
          <a style="color:#409eff"  v-else @click="openWechatBindDialog">生成</a>
        </template>
      </el-table-column> -->
      <el-table-column  label="日期"  min-width="144" align="center">
        <template slot-scope="scope">
          <span>{{scope.row.created_time | parseTime('{y}-{m}-{d}')}}</span>
        </template>
      </el-table-column>
      <el-table-column  label="转归" align="center">
        <template slot-scope="scope">
          <span>{{LapsetoInfo(scope.row)}}</span>
        </template>
      </el-table-column>
      <el-table-column  label="操作" align="center" min-width="140">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="转归" placement="top">
            <el-button type="primary" icon="el-icon-edit" size="small" @click="OpenSetLapseto(scope.row, scope.$index)"></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="预览" placement="top">          
            <el-button type="danger" icon="el-icon-tickets" size="small" @click="OpenView(scope.row.name,scope.row.dialysis_no,scope.row.id)"></el-button>
          </el-tooltip>
          
        </template>
      </el-table-column>
    </el-table>
    <!-- <pagi-nation title="分页"></pagi-nation> -->

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


    <el-dialog
      title="微信绑定"
      :visible.sync="bindWechatDialog"
      width="30%"
      center>
      <img :src="wechatbindimg" width="100%" alt="" v-if="wechatbindimg" >
      <i class="el-icon-loading" v-else></i>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="bindWechatDialog = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="转归" :visible.sync="LapsetoDialogVisible">
      <el-form :model="lapsetoForm" :rules="lapsetoRules" ref="lapsetoForm" >
        <el-form-item label="治疗状态（转归）" prop="lapseto_type" required>
          <el-radio-group v-model="lapsetoForm.lapseto_type">
            <el-radio v-for="item in lapsetoOptions" :key="item.value" :label="item.value" :value="item.value" >{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="转归时间" prop="lapseto_time" required>
          <el-date-picker
            v-model="lapsetoForm.lapseto_time"
            type="datetime"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
            default-time="12:00:00">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="LapsetoDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="EditLapseto()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="签到卡"
      :visible.sync="centerDialogVisible"
      :close-on-click-modal="false"
      @opened="ShowQRCode()"
      width="30%"
      center>
      <div align="center" style="margin-bottom:6px;font-size:20px">
        <!-- 姓名:<el-input v-model="name" size="small" style="width:200px"></el-input><br>    -->
        姓名:<span>{{this.name}}</span>
      </div>
      <div align="center" style="margin-bottom:10px;font-size:20px">
        <!-- 透析号:<el-input v-model="dialysis_no" size="small" style="width:200px"></el-input><br> -->
        透析号:<span>{{this.dialysis_no}}</span>
      </div>
      <div id="qrcode" align="center">

      </div>
      <span slot="footer" class="dialog-footer">
      <!-- <el-button  type="primary"  @click="download()">下载</el-button> -->
      <el-button type="primary" @click="print()">打印</el-button>
      </span>
    </el-dialog>
    <div hidden="hidden">
      <div id="print-card-info">
        <div class="order_title"  align="center" style="margin-bottom:20px;font-size:35px">
          签到卡
        </div>
        <div align="center" style="margin-bottom:4px;font-size:25px">
          姓名:<span>&nbsp;&nbsp;{{this.name}}</span><br>
        </div>
        <div align="center" style="margin-bottom:20px;font-size:25px">
          透析号:<span>&nbsp;&nbsp;{{this.dialysis_no}}</span>
        </div>
        <div>
          <div id="code" align="center"></div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script>
  import { fetchList, EditLapseto, OpenView, code } from '@/api/patient'
  import QRCode from 'qrcodejs2'
  import Vue from 'vue'
  import  print from 'print-js'
  import { Base64 } from 'js-base64'
  import { uParseTime} from '@/utils/tools'
  import { log } from 'util'
  import BreadCrumb from "@/xt_pages/components/bread-crumb";
  export default {
    name: 'Patient',
    components:{
      BreadCrumb
    },
    data() {
      return {
        lapsetoRules: {
          lapseto_type: [
            { required: true, message: '请选择治疗状态' }
          ],
          lapseto_time: [
            { required: true, message: '请选择转归时间' }
          ]
        },
        currentIndex: -1,
        LapsetoDialogVisible: false,
        centerDialogVisible: false,
        checkAll: false,
        isIndeterminate: true,
        wechatbindimg: '',
        active: true,
        schedulType: 0,
        lapsetoForm: {
          lapseto_type: 0,
          lapseto_time: '',
          patient_id: 0
        },
        schedulArr: [
          { value: 0, label: '全部' },
          { value: 1, label: '上午' },
          { value: 2, label: '下午' },
          { value: 3, label: '晚上' }
        ],
        lapsetoOptions: [{ value: 1, label: '留治' }, { value: 2, label: '转出' }],
        systemType: 0,
        systemArr: [
          { value: 0, label: '全部' },
          { value: 1, label: '已绑定' },
          { value: 2, label: '未绑定' }
        ],
        sourceType: 0,
        sourceID: 0,
        lapsetoType: 0,
        sourceArr: [
          { value: 0, label: '全部', source: 0, lapseto: 0 },
          // { value: 1, label: "转出", source: 0, lapseto: 2 },
          // { value: 2, label: "留治", source: 0, lapseto: 1 },
          { value: 3, label: '门诊', source: 1, lapseto: 1 },
          { value: 4, label: '住院', source: 2, lapseto: 1 }
        ],
        lapsetoArr: [
          { value: 0, label: '全部', source: 0, lapseto: 0 },
          { value: 1, label: '转出', source: 0, lapseto: 2 },
          { value: 2, label: '留治', source: 0, lapseto: 1 }
          // { value: 3, label: "门诊", source: 1, lapseto: 1 },
          // { value: 4, label: "住院", source: 2, lapseto: 1 }
        ],
        scheduling: [
          {
            value: 1,
            label: '已排班'
          },
          {
            value: 2,
            label: '未排班'
          }
        ],
        prescription: [
          {
            value: 1,
            label: '有处方'
          },
          {
            value: 2,
            label: '无处方'
          }
        ],
        tableData: null,
        pickerOptions1: {
          shortcuts: [
            {
              text: '今天',
              onClick(picker) {
                picker.$emit('pick', new Date())
              }
            },
            {
              text: '昨天',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24)
                picker.$emit('pick', date)
              }
            },
            {
              text: '一周前',
              onClick(picker) {
                const date = new Date()
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
                picker.$emit('pick', date)
              }
            },
            {
              text: '清空',
              onClick(picker) {
                picker.$emit('pick')
              }
            }
          ]
        },
        searchKey: '',
        // value2: '',
        total: 0,
        pageTotal: 0,
        pageSelect: 0,
        listQuery: {
          page: 1,
          limit: 10,
          schedul_type: 0,
          binding_state: 0,
          lapseto: 0,
          source: 0,
          start_time: '',
          end_time: '',
          keywords: '',
          contagion: '',
          reimbursement_way: '',
          isscheduling: '',
          isprescription: ''
        },
        multipleSelection: [],
        bindWechatDialog: false,
        contagionList: [],
        reimbursement_ways: [],
        patient: null,
        id: '',
        name: '',
        dialysis_no: '',
        patientPrint: {},
        patient_id: '',
        gender: '',
        idcardno: '',
        phone: '',
        healthcareno: ''
      }
    },
    created() {
      this.getList()
      this.contagionList = this.$store.getters.contagions
      this.reimbursement_ways = this.$store.getters.reimbursement_ways

      const keyword = this.$route.query && this.$route.query.keyword
      if (typeof (keyword) === 'string' && keyword.length > 0) {
        this.listQuery.keywords = keyword
        this.searchKey = keyword
      }
    },

    methods: {
      EditLapseto() {
        EditLapseto(this.lapsetoForm.patient_id, this.lapsetoForm).then(response => {
          if (response.data.state === 1) {
            this.$notify({
              title: '成功',
              message: '转归设置完成',
              type: 'success',
              duration: 2000
            })
            this.tableData[this.currentIndex].lapseto = this.lapsetoForm.lapseto_type
            this.currentIndex = -1
            this.LapsetoDialogVisible = false
          } else {
            this.$message.error(response.data.msg)
          }
        })
      },
      OpenSetLapseto(row, index) {
        this.patient = row
        this.currentIndex = index
        this.lapsetoForm.lapseto_time = ''
        this.lapsetoForm.lapseto_type = row.lapseto
        this.lapsetoForm.patient_id = row.id
        this.LapsetoDialogVisible = true
      },
      LapsetoInfo(row) {
        if (typeof (row.lapseto) === 'undefined' || (row.lapseto !== 1 && row.lapseto !== 2)) {
          return '未设置'
        } else if (row.lapseto === 1) {
          return '留治'
        } else {
          return '转出'
        }
      },
      openWechatBindDialog() {
        this.bindWechatDialog = true
      },
      handleCheckAllChange(val) {
        console.log(val)
        console.log(this.checkAll)
        console.log(this.isIndeterminate)
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
        this.pageSelect = this.multipleSelection.length
      },

      handleCheckedCitiesChange(value) {
        const checkedCount = value.length
        this.checkAll = checkedCount === this.cities.length
        this.isIndeterminate =
          checkedCount > 0 && checkedCount < this.cities.length
      },
      handleSizeChange(val) {
        this.listQuery.limit = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.page = val
        this.getList()
      },
      changeCategoryId(categoryId) {
        this.categoryId = categoryId
      },
      selectSchedulType(scheduleType) {
        // alert(scheduleType);/
        this.schedulType = scheduleType
        this.listQuery.schedul_type = scheduleType
        this.getList()
      },
      selectSystemType(systemType) {
        this.systemType = systemType
        this.listQuery.binding_state = systemType
        this.getList()
      },
      selectLapseTo(lapseto) {
        this.lapsetoType = lapseto
        this.listQuery.lapseto = lapseto
        this.getList()
      },
      selectSource(source) {
        this.sourceType = source
        this.listQuery.source = source
        this.getList()
      },
      changeTime() {
        this.getList()
      },
      search() {
        this.listQuery.keywords = this.searchKey
        this.getList()
      },
      changeOtherSearch() {
        this.getList()
      },
      getList() {
        fetchList(this.listQuery).then(response => {
          if (response.data.state === 0) {
            this.$message.error(response.data.msg)
            return false
          } else {
            this.tableData = response.data.data.patients
            this.pageTotal = this.tableData.length
            this.total = response.data.data.total
          }
        })
      },

      OpenView(name, number, id) {
        this.name = name
        this.dialysis_no = number
        this.centerDialogVisible = true
        OpenView(id).then(response => {
          if (response.data.state === 0) {
            this.$message.error(response.data.msg)
            return false
          } else {
            var patient = response.data.data.patient
            this.id = patient.id
            this.name = patient.name
            this.gender = patient.gender
            this.idcardno = patient.id_card_no
            this.phone = patient.phone
            this.healthcareno = patient.health_care_no
          }
        })
      },
      ShowQRCode() {
        document.getElementById('qrcode').innerHTML = ''
        this.qrcode = this.$QRCode()
      },
      download() {
        alert('aaaa')
      },
      print() {
        var ptime = Math.round(new Date().getTime() / 1000)
        this.print_time = uParseTime(ptime, '{y}年{m}月{d}日')
        const style = '@media print { .print_main_content { background-color: white; width:960px; margin:0 auto; padding: 0 0 20px 0; } .print_main_content .order_title { text-align: center; font-size: 23px; line-height: 50px; font-weight: 500; } .print_main_content table { width: 100%; border: 1px solid; border-collapse: collapse; padding: 2px; } .print_main_content table tbody tr td { border: 1px solid; text-align: center; padding: 10px 8px; } .td_proj_title { font-size: 18px; line-height: 25px; font-weight: 500; } .td_proj_content { font-size: 18px; line-height: 25px; } .td_align_left { text-align: left; } .print_footnote_panel { font-size: 17px; line-height: 40px; } .print_footnote_panel .proj { display: inline-block; width: 49%; } .print_footnote_panel .proj .proj_title { font-weight: 500;} }'
        setTimeout(() => {
          printJS({
            printable: 'print-card-info',
            type: 'html',
            style: style,
            scanStyles: false
          })
        }, 1)

        var id = this.id
        var name = this.name
        var gender = this.gender
        if (gender === 1) {
          gender = '男'
        }
        if (gender === 2) {
          gender = '女'
        }
        var idcardno = this.idcardno
        var phone = this.phone
        var healthcareno = this.healthcareno
        var dialysisno = this.dialysis_no

        // Base64位加密
        var aid = this.Base64.encode(id)
        var aname = this.Base64.encode(name)
        var agender = this.Base64.encode(gender)
        var aidcardno = this.Base64.encode(idcardno)
        var aphone = this.Base64.encode(phone)
        var ahealthcareno = this.Base64.encode(healthcareno)
        var adialysisno = this.Base64.encode(dialysisno)
        // 调用生成二维码的方法
        this.$options.methods.qrcode(aid, aname, agender, aidcardno, aphone, ahealthcareno, adialysisno)
      },
      qrcode(id, name, gender, idcardno, phone, healthcareno, dialysisno) {
        document.getElementById('code').innerHTML = ''
        const qrcode = new QRCode('code', {
          width: 200,
          height: 200,
          text: 'user_id:' + id + ',' + 'name:' + name + ',' + 'dialysis_no:' + dialysisno + ',' + 'gender:' + gender + ',' + 'idcard_no:' + idcardno + ',' + 'phone:' + phone + ',' + 'healthcare_no:' + healthcareno
        })
      }
      //  components:{
      //    pagiNation
      //  }
    }
  }
  Vue.prototype.$QRCode = function() {
    var name = this.name
    var dialysis_no = this.dialysis_no
    var id = this.id
    var gender = this.gender
    if (gender === 1) {
      gender = '男'
    }
    if (gender === 2) {
      gender = '女'
    }
    var idcardno = this.idcardno
    var phone = this.phone
    var healthcareno = this.healthcareno

    // BASE64加密
    var eid = this.Base64.encode(id)
    var ename = this.Base64.encode(name)
    var egender = this.Base64.encode(gender)
    var eidcardno = this.Base64.encode(idcardno)
    var ephone = this.Base64.encode(phone)
    var ehealthcareno = this.Base64.encode(healthcareno)
    var edialysisno = this.Base64.encode(dialysis_no)
    console.log('user_id' + eid, 'name:' + ename, 'gender:' + egender, 'idcard_no:' + eidcardno, 'phone:' + ephone, 'healthcare_no:' + ehealthcareno, 'edialysis_no:' + edialysisno)
    const salting = 'admin-authority'
    new QRCode('qrcode', {
      width: 150, // 设置宽度
      height: 150, // 设置高度
      text: 'user_id:' + eid + ',' + 'name:' + ename + ',' + 'dialysis_no:' + edialysisno + ',' + 'gender:' + egender + ',' + 'idcard_no:' + eidcardno + ',' + 'phone:' + ephone + ',' + 'healthcare_no:' + ehealthcareno
    })
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .app-container {
    // margin: 20px;
    font-size: 15px;
    .filter-container {
      padding-bottom: 5px;
    }
    .search-component {
      width: 500px;
      .searchBox {
        width: 300px;
        height: 36px;
        line-height: 36px;
        padding-left: 15px;
        border: 1px #dcdfe6 solid;
        border-right: none;
        outline: none;
        float: left;
        border-radius: 6px 0 0 6px;
        font-size: 14px;
        color: #333;
        background: #fff;
        box-shadow: 3px 3px 4px rgba(135, 135, 135, 0.05);
      }
      .searchBtn {
        background-color: #409eff;
        color: #fff;
        font-size: 15px;
        text-align: center;
        height: 36px;
        line-height: 36px;
        float: left;
        outline: none;
        width: 70px;
        border: none;
        border-radius: 0 6px 6px 0;
        font-family: "Microsoft Yahei";
        cursor: pointer;
      }
    }
    .amount {
      font-weight: normal;
      padding: 10px 0 0 0;
      color: #606266;
      font-size: 14px;
      span {
        color: #ef2525;
        font-family: "Arial";
        padding: 0 2px;
      }
    }




    .print_main_content {
      background-color: white;
      width:960px;
      margin:0 auto;
      padding: 0 0 20px 0;
    }
    .print_main_content .order_title {
      text-align: center;
      font-size: 23px;
      line-height: 50px;
      font-weight: 500px;
    }
    .print_main_content table {
      width: 100%;
      border: 1px solid;
      border-collapse: collapse;
      padding: 2px;
    }
    .print_main_content table tbody tr td {
      border: 1px solid;
      text-align: center;
      /* font-size: 17px; */
      padding: 10px 8px;
    }
    .td_proj_title {
      font-size: 18px;
      line-height: 25px;
      font-weight: 500;
    }
    .td_proj_content {
      font-size: 18px;
      line-height: 25px;
    }
    .td_align_left {
      text-align: left;
    }
    .print_footnote_panel {
      font-size: 17px;
      line-height: 40px;
    }
    .print_footnote_panel .proj {
      display: inline-block;
      width: 49%;
    }
    .print_footnote_panel .proj .proj_title {
      font-weight: 500;
    }
  }
</style>