elizebeth/src/xt_pages/outpatientRegistration/registrationHistory.vue

<template>
    <div class="main-contain">
        <div class="position">
            <bread-crumb :crumbs='crumbs'></bread-crumb>
        </div>
        <div class="app-container">
            <div class="cell clearfix">
                <!-- <el-input style="width: 180px;" v-model.trim="search_input" class="filter-item"/> -->
                <el-autocomplete
                  style="margin:16px 5px"
                  popper-class="my-autocomplete"
                  v-model.trim="search_input"
                  :fetch-suggestions="querySearchAsync"
                  :trigger-on-focus="false"
                  placeholder="病人名字或者透析号"
                  @select="handleSelect"
                >
                  <i class="el-icon-search el-input__icon" slot="suffix"> </i>
                  <template slot-scope="{ item }">
                    <div class="name">{{ item.name }}</div>
                  </template>
                </el-autocomplete>
                <el-button style="margin-right:10px;" class="filter-item" type="primary" icon="el-icon-search" @click="searchAction">搜索</el-button>
                <!-- <el-date-picker
                v-model="value1"
                @change="changeTime"
                style="margin-right:10px;"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
                </el-date-picker> -->
                <el-date-picker type="datetime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                    placeholder="选择时间" v-model="start_time" style="width:200px"
                    @change="changeStart"
                 >
                </el-date-picker> -
                <el-date-picker type="datetime" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                    placeholder="选择时间" v-model="end_time" style="width:200px"
                    @change="changeEnd"
                 >
                </el-date-picker>
                <label class="title"><span class="name">挂号类型</span> : </label>
                <el-select v-model="register_type" placeholder="请选择" style="width:150px;" @change="changeRegister">
                    <el-option
                    v-for="item in register"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <el-table :data="tableData" 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="index" label="序号" width="60">
                </el-table-column>
                <el-table-column align="center" prop="name" label="时间" width="100">
                    <template slot-scope="scope">{{getTime(scope.row.record_date,"{y}-{m}-{d}")}}</template>
                </el-table-column>
                <el-table-column align="center" prop="dialysis_no" label="姓名" width="80">
                    <template slot-scope="scope">{{scope.row.name }}</template>
                </el-table-column>
                <el-table-column align="center" prop="name" label="科室" width="80">
                    <template slot-scope="scope">{{getDepartMent(scope.row.departments)}}</template>
                </el-table-column>
                <el-table-column align="center" prop="name" label="挂号类型" width="90">
                    <template slot-scope="scope">
                        <span v-if="scope.row.register_type == 1">普通</span>
                        <span v-if="scope.row.register_type == 2">主治</span>
                        <span v-if="scope.row.register_type == 3">主任</span>
                        <span v-if="scope.row.register_type == 4">免收诊金</span>
                        <span v-if="scope.row.register_type == 5">专家</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="name" label="就诊号" width="80">
                    <template slot-scope="scope">
                        {{scope.row.number}}
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="name" label="证件号" width='180'>
                    <template slot-scope="scope">{{ scope.row.id_card_no }}</template>
                </el-table-column>
                <el-table-column align="center" label="患者保险类型">
                    <template slot-scope="scope">{{getMedicalTreatment(scope.row.medical_treatment_type)}}</template>
                </el-table-column>
                <el-table-column align="center" prop="name" label="医生" width="80">
                    <template slot-scope="scope">{{getDoctor(scope.row.doctor) }}</template>
                </el-table-column>
                <el-table-column align="center" prop="name" label="挂号费" width="70">
                    <template slot-scope="scope">{{ scope.row.register_cost }}</template>
                </el-table-column>
                <el-table-column align="center" prop="name" label="诊疗费" width="70">
                    <template slot-scope="scope">{{ scope.row.treatment_cost }}</template>
                </el-table-column>
                <el-table-column align="center" prop="name" label="工本费" width="70">
                    <template slot-scope="scope">{{ scope.row.cost_of_production }}</template>
                </el-table-column>
                <el-table-column align="center" prop="name" label="操作人" width="70">
                    <template slot-scope="scope">{{getDoctor(scope.row.admin_user_id) }}</template>
                </el-table-column>
                <el-table-column align="center" prop="name" label="操作" width="80">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" v-if="scope.row.is_return == 1" @click ="toReturnPatient(scope.row.id)">退号</el-button> 
                        <el-button size="mini" type="primary" v-if="scope.row.is_return == 2" :disabled="true">已退号</el-button>
                        <el-button size="mini" type="primary" v-if="scope.row.is_return == 3" :disabled="true">已就诊</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
                style="margin-top:20px;float: right"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
const moment = require('moment')
import BreadCrumb from '@/xt_pages/components/bread-crumb'
import { getHisPatientHistory,changePatient,getHisPatient } from "@/api/project/project"
import { uParseTime } from "@/utils/tools";
export default {
    components:{
        BreadCrumb
    },
    data(){
        return{
            crumbs: [
                { path: false, name: '门诊挂号' },
                { path: false, name: '挂号历史' }
            ],
            register_type:0,
            search_input:'',
            value1:'',
            tableData: [],
            register: [
                {value: 0,label:"全部"},
                {value: 1,label: '普通'},
                {value: 2,label: "主治"},
                {value: 3,label: "主任"},
                {value: 4,label: "免收诊金"},
                {value: 5,label: "专家"}
            ],
            start_time:"",
            end_time:"",
            limit:20,
            page:1,
            total:0,
            departMent:[],
            doctorList:[],
            medicalCare: [{
                id: 1,
                name: '职工基本医疗保险'
                }, {
                id: 2,
                name: "公务员医疗补助"
                },{
                id: 3,
                name: "大额医疗费用补助"
                },{
                id: 4,
                name: "离休人员医疗"
                },{
                id: 5,
                name: "城乡居民基本医疗保险"
                },{
                id: 6,
                name: "城乡居民大病医疗保险"
                },
                {
                id: 7,
                name: "生育保险"
            }],
            tablePatient:[]
        }
    },
    created(){
        // let a = JSON.parse(localStorage.getItem("temp"))
        // let arr = []
        // a.map(item => {
        //     if(item.org_id == this.$store.getters.xt_user.org_id){
        //         item.create_time = moment(item.create_time * 1000).format('YYYY-MM-DD')
        //         arr.push(item)
        //     }
            
        // })
        // this.tableData = arr
       //获取所有挂号号的患者
       this.getlist()
    },
    methods:{
        searchAction(){
           this.getlist()
        },
        // changeTime(val){
        //     let arr = JSON.parse(localStorage.getItem("temp"))
        //     arr.map(item => {
        //         item.create_time = moment(item.create_time * 1000).format('YYYY-MM-DD')
        //     })
        //     this.tableData = arr
        //     console.log(new Date(val[0]).getTime() / 1000)
        //     console.log(new Date(val[1]).getTime() / 1000)
        //     let arr1 = this.tableData
        //     let a = []
        //     arr1.map(item => {
        //      if(new Date(item.create_time).getTime() / 1000 > new Date(val[0]).getTime() / 1000 && new Date(item.create_time).getTime() / 1000 < new Date(val[1]).getTime() / 1000 && item.org_id == this.$store.getters.xt_user.org_id){
        //         a.push(item)
        //       }
        //     })
        //     this.tableData = a
        // },
        changeStart(val){
          this.start_time = val
          this.getlist()
        },
        changeEnd(val){
          this.end_time = val
          this.getlist()
        },
        changeRegister(val){
          this.getlist()
        },
       handleSizeChange(val) {
          this.limit = val
          this.getList()
       },
        handleCurrentChange(val) {
        this.page = val
        this.getList()
        },
        getlist(){
          var params = {
               keyword:this.search_input,
               start_time:this.start_time,
               end_time:this.end_time,
               register_type:this.register_type,
               limit:this.limit,
               page:this.page,
            }
           console.log("params",params)
          getHisPatientHistory(params).then(response=>{
             if(response.data.state == 1){
                var history = response.data.data.history
                console.log("history",history)
                this.tableData = history
                var total =  response.data.data.total
                console.log("total",total)
                this.total = total
                var department =  response.data.data.department
                console.log("department",department)
                this.departMent = department
                var doctor = response.data.data.doctor
                console.log("doctor",doctor)
                this.doctorList = doctor
             }
          })
 
        },
        getDepartMent(id){
          var name = ""
          for(let i=0;i<this.departMent.length;i++){
            if(id == this.departMent[i].id){
                name = this.departMent[i].name
            }
          }
          return name
        },
        getDoctor(id){
          var user_name = ""
          for(let i=0;i<this.doctorList.length;i++){
            if(id == this.doctorList[i].admin_user_id){
               user_name = this.doctorList[i].user_name 
            }
          }
          return user_name
        },
        getMedicalTreatment(id){
          var name = ""
          for(let i=0;i<this.medicalCare.length;i++){
             if(this.medicalCare[i].id == id){
               name = this.medicalCare[i].name
             }
          }
          return name
        },
        getTime(value, temp) {
         if (value != undefined) {
                return uParseTime(value, temp);
            }
            return "";
        },
        toReturnPatient(id){
          this.$confirm("确认退号吗?", "退号", {
          confirmButtonText: "确 定",
          cancelButtonText: "取 消",
          type: "warning"
        }).then(() => {
          changePatient(id).then(response => {
            if (response.data.state == 1) {
              var msg = response.data.data.msg
              this.$message.success("退号成功");
              this.getlist()
            } else {
               this.$message.error("患者已就诊,退号失败")
            }
          });
        })
        .catch(() => {});
        },

     querySearchAsync(keyword, cb) {
        let key = ''
        if (keyword != undefined) {
          key = keyword
        }
        let searchArray = []
       
        var params = {
           keyword:key
        }
        console.log("params",params)
        getHisPatient(params).then(response => {
          if (response.data.state == 1) {
            searchArray = response.data.data.patient
            console.log("searcharrya",searchArray)
            cb(searchArray)
          }
        })
        return searchArray
      },

      handleSelect(val){   
          this.search_input = val.name
          this.getlist()
        },

    }
}
</script>

<style lang="scss" scoped>
</style>