Vue_New/src/xt_pages/user/patients.vue

<template>
  <div class="main-contain">

    <el-dialog
      title="提示"
      :visible.sync="exportVisible"
      width="40%"
    >

      <div>
        您提交的患者名单已上传成功，系统正在执行导入，请稍候点击当前页面右上角“下载日志”查看导入结果
      </div>

      <span slot="footer" class="dialog-footer">
    <el-button @click="exportVisible = false">取 消</el-button>
    <el-button type="primary" @click="exportVisible = false">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="40%"
    >
      <span>您提交的文档不是系统标准导入模板，请检查您的文档或重新  <a href="https://kuyi.shengws.com/patient_template.xlsx" style="color: blue" download="template">下载导入模板</a></span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>

    <el-dialog
      title="提示"
      :visible.sync="dialysisVisible"
      width="40%"
    >
      <span>您提交的文档中存在不同病人存在相同的透析号,请检查修改后在提交 </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialysisVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialysisVisible = false">确 定</el-button>
  </span>
    </el-dialog>


    <el-dialog
      title="提示"
      :visible.sync="phoneVisible"
      width="40%"
    >
      <span>您提交的文档中存在不同病人存在相同的手机号,请检查修改后在提交 </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="phoneVisible = false">取 消</el-button>
    <el-button type="primary" @click="phoneVisible = false">确 定</el-button>
  </span>
    </el-dialog>


    <el-dialog
      title="提示"
      :visible.sync="idCardNoVisible"
      width="40%"
    >
      <span>您提交的文档中存在不同病人存在相同的身份证,请检查修改后在提交 </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="idCardNoVisible = false">取 消</el-button>
    <el-button type="primary" @click="idCardNoVisible = false">确 定</el-button>
  </span>
    </el-dialog>


    <el-dialog
      title="提示"
      :visible.sync="exportLogVisible"
      width="40%"
    >

      <div v-for="(item,index) in logs" :key="index">
        <span> {{ item.export_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span>
        <br/>
        <br/>
        <span>{{getContent(item)}}</span>
        <span >点击</span>
        <span style="color:blue" @click="generateTxt(item)">查看详情</span>
        <br/>
        <br/>
      </div>

      <span slot="footer" class="dialog-footer">
    <el-button @click="exportLogVisible = false">取 消</el-button>
    <el-button type="primary" @click="exportLogVisible = false">确 定</el-button>
  </span>
    </el-dialog>


    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>



      <div style="display:flex;align-items:center">
        <el-badge :value=value class="item">
          <el-button size="small" type="primary" @click="toRemind">传染病检查提醒</el-button>
        </el-badge>
        <upload-excel :on-success='handleSuccess' :before-upload="beforeUpload" v-if="isShow"></upload-excel>

        <el-link target="_blank" href="https://kuyi.shengws.com/patient_template.xlsx" :underline="false"
                 style="margin-left:15px">
          <el-button
            class="filter-item"
            type="primary"
            size="small"
          >下载模版
          </el-button>
        </el-link>


        <el-button
          style="margin-left:10px;"
          @click="generateLog()"
          class="filter-item"
          type="primary"
          size="small"
        >下载日志
        </el-button>

        <el-button
          :disabled="$store.getters.xt_user.subscibe.state == 3 ? true : false"
          @click="$router.push({ path: '/patients/create' })"
          class="filter-item"
          type="primary"
          icon="el-icon-circle-plus-outline"
          size="small"
        >新增
        </el-button>
      </div>

      <!-- <el-button  type="primary" plain style="float:right;" icon="el-icon-download" @click="putOnRecord(2,{})" >备案</el-button> -->

    </div>
    <div class="app-container">
      <div class="cell clearfix">
        <!-- <label class="title"><span class="name">病人搜索</span> : </label> -->
        <el-input
          style="width: 400px;"
          v-model.trim="searchKey"
          class="filter-item"
          placeholder="病人姓名/透析号"
          size="small"
          @keyup.enter.native='search'
        />
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="search"
          size="small"
        >搜索
        </el-button
        >
      </div>

      <div class="cell clearfix">
        <label class="title"><span class="name">日期查询</span> : </label>
        <el-date-picker
          size="small"
          clearable
          v-model="listQuery.start_time"
          prefix-icon="el-icon-date"
          @change="changeTimeOne"
          :editable="false"
          style="width: 196px;"
          type="date"
          placeholder="选择日期时间"
          align="right"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
        <span class="cellLine"> - </span>
        <el-date-picker
          size="small"
          clearable
          v-model="listQuery.end_time"
          prefix-icon="el-icon-date"
          @change="changeTime"
          :editable="false"
          style="width: 196px;"
          type="date"
          placeholder="选择日期时间"
          align="right"
          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>
        <el-button type="primary" size="small" style="float:right" @click="toExport">导出</el-button>
      </div>

      <el-table
        ref="multipleTable"
        :row-style="{ color: '#303133' }"
        :header-cell-style="{
          backgroundColor: 'rgb(245, 247, 250)',
          color: '#606266'
        }"
        :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="40px"
          align="center"
        ></el-table-column>
        <el-table-column
          label="透析号"
          min-width="70"
          property="dialysis_no"
          align="center"
          style="color:red"
        ></el-table-column>
        <el-table-column
          label="住院号"
          min-width="70"
          property="admission_number"
          align="center"
        >
        </el-table-column>
        <el-table-column
          property="name"
          label="姓名"
          min-width="70"
          align="center"
        >
          <template slot-scope="scope">
            <router-link
              :to="'/patients/patient/' + scope.row.id"
              style="color:#409eff;width:100%;display:block;"
            >{{ scope.row.name }}
            </router-link
            >
          </template>
        </el-table-column>
        <el-table-column label="性别" min-width="60" 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="60" 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 label="透析次数" min-width="84" align="center">
          <template slot-scope="scope">
            <span>{{ getCount(scope.row) }}</span>
          </template>
        </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="120" 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="转出(死亡)时间" min-width="134" align="center">
          <template slot-scope="scope">
            <span>{{getTime(scope.row.death_time)}}</span>
          </template>
        </el-table-column>
         <el-table-column label="转出(死亡)原因" align="center" min-width="150">
          <template slot-scope="scope">
            <span>{{scope.row.out_reason}}</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.page"
        :page-sizes="[10, 20, 50, 100,200,500,1000,2000]"
        :page-size="listQuery.limit"
        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"
          label-width="140px"
        >
          <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-item label="转出(死亡)原因:" v-if="lapsetoForm.lapseto_type == 2 || lapsetoForm.lapseto_type == 3">
              <el-input v-model="lapsetoForm.out_reason"></el-input>
          </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>

     <el-dialog title="传染病检查提醒通知" :visible.sync="dialogTableVisible">
        <el-table :data="gridData">
          <el-table-column property="date" align="center" label="姓名" width="150">
            <template slot-scope="scope">{{scope.row.name}}</template>
          </el-table-column>
          <el-table-column property="name"  align="center" label="检查日期" width="200">
             <template slot-scope="scope">
                <span
                  v-if="dateCompare(scope.row.infectious_next_record_time) == 1"
                >{{ scope.row.infectious_next_record_time | parseTime('{y}-{m}-{d}')}}</span>
                <span
                  v-if="dateCompare(scope.row.infectious_next_record_time) == 2"
                  style="color: red"
                >{{ scope.row.infectious_next_record_time | parseTime('{y}-{m}-{d}')}}</span>
              </template>
          </el-table-column>
          <el-table-column property="address" align="center" label="操作">
             <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="jump(scope.row.id)">查看</el-button>
              </template>
          </el-table-column>
        </el-table>

         <el-pagination
            @size-change="handleSizeChangeOne"
            @current-change="handleCurrentChangeOne"
            :page-size="5"
            :page-sizes="[10, 20, 50, 100,500,1000,2000]"
            background
            style="margin-top:20px;float: right"
            :total="value"
          ></el-pagination>
    </el-dialog>

  </div>
</template>

<script>
  import { code, EditLapseto, fetchList, getMaxDialysisNo, OpenView, postExportPatients,GetRemind } from '@/api/patient'
  import { generateLog } from '@/api/config'
  import QRCode from 'qrcodejs2'
  import Vue from 'vue'
  import { Base64 } from 'js-base64'
  import { jsGetAge,uParseTime } from '@/utils/tools'
  import { log } from 'util'
  import BreadCrumb from '@/xt_pages/components/bread-crumb'
  import UploadExcel from '@/xt_pages/components/UploadExcel'

  export default {
    name: 'Patient',
    components: {
      UploadExcel,
      BreadCrumb
    },
    data() {
      return {
        logs: [],
        downloadUrl: 'https://kuyi.shengws.com/patient_template.xltx',
        crumbs: [
          { path: false, name: '病人管理' },
          { path: '/patients/patients', name: '病人管理' }
        ],
        lapsetoRules: {
          lapseto_type: [{ required: true, message: '请选择治疗状态' }],
          lapseto_time: [{ required: true, message: '请选择时间' }]
        },
        currentIndex: -1,
        LapsetoDialogVisible: false,
        centerDialogVisible: false,
        checkAll: false,
        isIndeterminate: true,
        dialogVisible: false,
        exportLogVisible: false,
        exportVisible:false,
        phoneVisible:false,
        idCardNoVisible:false,
        wechatbindimg: '',
        isShow:true,
        active: true,
        schedulType: 0,
        lapsetoForm: {
          lapseto_type: 0,
          lapseto_time: '',
          patient_id: 0,
          out_reason:''
        },
        schedulArr: [
          { value: 0, label: '全部' },
          { value: 1, label: '上午' },
          { value: 2, label: '下午' },
          { value: 3, label: '晚上' }
        ],
        lapsetoOptions: [
          { value: 1, label: '留治' },
          { value: 2, label: '转出' },
          { value: 3,  label: "死亡" },
        ],
        systemType: 0,
        systemArr: [
          { value: 0, label: '全部' },
          { value: 1, label: '已绑定' },
          { value: 2, label: '未绑定' }
        ],
        sourceType: 0,
        sourceID: 0,
        lapsetoType: 1,
        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:0,  lapseto: 3 },
          // { 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,
        searchKey: '',
        // value2: '',
        total: 0,
        pageTotal: 0,
        dialysisVisible:false,
        pageSelect: 0,
        max_dialysis_no: '',
        listQuery: {
          page: 1,
          limit: 10,
          schedul_type: 0,
          binding_state: 0,
          lapseto: 1,
          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: '',
        startTime: '',
        export_date: [],
        lapeseto:"",
        value:13,
        dialogTableVisible:false,
        gridData:[],
        totalOne: 0,
        page: 1,
        limit: 5
      }
    },
    created() {
      if(sessionStorage.getItem('patientPageSize')){
        this.listQuery.limit = parseInt(sessionStorage.getItem('patientPageSize'))
      }
      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
      }
      //获取
      this.GetRemindPatientList()
    },

    methods: {
      putOnRecord:function(type,row){
        if(type == 1){


        }else{




        }
      },
      generateTxt: function(log) {
        var content = ''
        var errlog = log.err_logs
        content = this.getContent(log)
        for (let i = 0; i < errlog.length; i++) {
          if (content.length == 0) {
            content = errlog[i].err_msg
          } else {
            content = content + '\n' + errlog[i].err_msg
          }
        }

        var url = new Blob(['\ufeff' + content], { type: 'text/txt,charset=UTF-8' })
        if (typeof url === 'object' && url instanceof Blob) {
          url = URL.createObjectURL(url) // 创建blob地址
        }
        const aLink = document.createElement('a')
        aLink.href = url
        aLink.download = this.timestampToTime(log.export_time) + '患者导入日志' + '.txt'
        aLink.click()

      },
      getContent(log) {
        return '您导入的文档共' + log.total_num + '条患者数据' + '，' + '已成功导入' + log.success_num + '条，导入失败' + log.fail_num + '条,'
      },
      timestampToTime(timestamp) {
        var date = new Date(timestamp * 1000)//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '年'
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '月'
        var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + '日 '
        var h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + '时'
        var m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + '分'
        var s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds()) + '秒'
        return Y + M + D + h + m + s
      },
      generateLog() {
        let params = {
          'log_type': 1
        }
        generateLog(params).then(
          response => {
            if (response.data.state === 1) {
              this.logs = response.data.data.logs
              this.exportLogVisible = true
            } else {
              this.$message.error(response.data.msg)
            }
          }
        )

      },
      handleSuccess({ results, header }) {
       
        if (header != undefined && header.length > 0) {
          var isHasName = header.includes('*姓名')
          var isHasGender = header.includes('*性别')
          var isHasPhone = header.includes('*手机号')
          var isHasIdCard = header.includes('*身份证号')
          var isHasDate = header.includes('*首次肾脏治疗时间')
          var isHasSource = header.includes('*患者来源')
          var isHasLapseto = header.includes('*治疗状态')
          var isHasInfectious = header.includes('*传染病')
          var isHasDiagnose = header.includes('诊断')
          var isHasDialysisNo = header.includes('透析号')

          var isHasDryWeight = header.includes('干体重(kg)')
          var isHasHeight = header.includes('身高(cm)')
          var isHasHomeAddress = header.includes('家庭住址')
         
          if (!(isHasName && isHasGender && isHasPhone && isHasIdCard && isHasDate && isHasSource && isHasLapseto && isHasInfectious && isHasDiagnose && isHasDialysisNo && isHasDryWeight && isHasHeight && isHasHomeAddress)) {
            this.dialogVisible = true
            return
          }
        } else {
          this.dialogVisible = true
          return
        }
        getMaxDialysisNo().then(response => {
            if (response.data.state === 1) {
              this.max_dialysis_no = response.data.data.dialysis_no
              if (this.max_dialysis_no == 0) {
                this.max_dialysis_no = 1
              } else {
                this.max_dialysis_no++
              }


              this.export_date = []
              for (let i = 1; i < results.length; i++) {
                let obj = {}
                for (var key in results[i]) {
                  if (results[i]['*姓名'] === undefined) {
                    obj['name'] = ''
                  } else {
                    if (key == '*姓名') {
                      obj['name'] = results[i][key].replace(/\s/g,"")

                    }
                  }

                  if (results[i]['*性别'] === undefined) {
                    obj['gender'] = '0'
                  } else {
                    if (key == '*性别') {
                      if (results[i][key] == '男') {
                        obj['gender'] = '1'
                      } else if (results[i][key] == '女') {
                        obj['gender'] = '2'
                      } else {
                        obj['gender'] = '0'
                      }
                    }
                  }

                  if (results[i]['*手机号'] === undefined) {
                    obj['phone'] = ''
                  } else {
                    if (key == '*手机号') {
                      obj['phone'] = results[i][key].replace(/\s/g,"")
                    }
                  }

                  if (results[i]['*身份证号'] === undefined) {
                    obj['id_card_no'] = ''

                  } else {
                    if (key == '*身份证号') {
                      obj['id_card_no'] = results[i][key].replace(/\s/g,"")
                    }
                  }

                  if (results[i]['*首次肾脏治疗时间'] === undefined) {
                    obj['first_treatment_date'] = ''

                  } else {
                    if (key == '*首次肾脏治疗时间') {
                      var month = parseInt(results[i][key].replace(/\s/g,"").split('/')[0])
                      var day = parseInt(results[i][key].replace(/\s/g,"").split('/')[1])
                      var year = parseInt(results[i][key].replace(/\s/g,"").split('/')[2])
                      if (year < 10) {
                        year = '0' + year
                      }

                      if (day < 10) {
                        day = '0' + day
                      }
                      if (month < 10) {
                        month = '0' + month
                      }
                      obj['first_treatment_date'] = '20' + year.toString() + '/' + month.toString() + '/' + day.toString()
                    }
                  }

                  if (results[i]['*患者来源'] === undefined) {
                    obj['source'] = '3'

                  } else {
                    if (key == '*患者来源') {
                      if (results[i][key] == '门诊') {
                        obj['source'] = '1'
                      } else if (results[i][key] == '住院') {
                        obj['source'] = '2'
                      } else {
                        obj['source'] = '0'
                      }
                    }
                  }

                  if (results[i]['*治疗状态'] === undefined) {
                    obj['lapseto'] = '3'

                  } else {
                    if (key == '*治疗状态') {
                      if (results[i][key] == '留治') {
                        obj['lapseto'] = '1'
                      } else if (results[i][key] == '转归') {
                        obj['lapseto'] = '2'
                      } else {
                        obj['lapseto'] = '0'
                      }
                    }
                  }

                  if (results[i]['*传染病'] === undefined) {
                    let contagions = []
                    obj['is_infectious'] = '3'
                    obj['contagions'] = contagions

                  } else {
                    if (key == '*传染病') {
                      if (results[i][key] == '无') {
                        let contagions = []
                        obj['is_infectious'] = '1'
                        obj['contagions'] = contagions

                      } else if (results[i][key] == '乙肝') {
                        let contagions = []
                        contagions.push(2)
                        obj['is_infectious'] = '2'
                        obj['contagions'] = contagions
                      } else if (results[i][key] == '丙肝') {
                        let contagions = []
                        contagions.push(3)
                        obj['is_infectious'] = '2'
                        obj['contagions'] = contagions

                      } else if (results[i][key] == '艾滋病') {
                        let contagions = []
                        contagions.push(4)
                        obj['is_infectious'] = '2'
                        obj['contagions'] = contagions

                      } else if (results[i][key] == '肺结核') {
                        let contagions = []
                        contagions.push(5)
                        obj['is_infectious'] = '2'
                        obj['contagions'] = contagions

                      } else if (results[i][key] == '梅毒') {
                        let contagions = []
                        contagions.push(6)
                        obj['is_infectious'] = '2'
                        obj['contagions'] = contagions
                      } else {
                        let contagions = []
                        obj['is_infectious'] = '0'
                        obj['contagions'] = contagions
                      }
                    }
                  }

                  if (results[i]['诊断'] === undefined) {
                    obj['diagnose'] = ''
                  } else {
                    if (key == '诊断') {
                      obj['diagnose'] = results[i][key]
                    }
                  }
                  // console.log(obj)

                  if (results[i]['透析号'] === undefined) {
                    obj['dialysis_no'] = ''
                  } else {
                    if (key == '透析号') {
                      obj['dialysis_no'] = results[i][key].replace(/\s/g,"")
                    }
                  }

                  // console.log(obj)

                  if (results[i]['干体重(kg)'] === undefined) {
                    obj['dry_weight'] = ''
                  } else {
                    if (key == '干体重(kg)') {
                      obj['dry_weight'] = results[i][key].replace(/\s/g,"")
                    }
                  }

                  // console.log(obj)

                  if (results[i]['身高(cm)'] === undefined) {
                    obj['height'] = ''
                  } else {
                    if (key == '身高(cm)') {
                      obj['height'] = results[i][key].replace(/\s/g,"")
                    }
                  }

                  console.log("2222222",obj)

                  if (results[i]['家庭住址'] === undefined) {
                    obj['home_address'] = ''
                  } else {
                    if (key == '家庭住址') {
                      obj['home_address'] = results[i][key]
                    }
                  }
                }
               
                this.export_date.push(obj)
              }

              let index = 0
             
              for (let i = 0; i < this.export_date.length; i++) {
                if (this.export_date[i].dialysis_no == '') {
                  let new_dialysis_no = this.max_dialysis_no + index
                  // console.log(new_dialysis_no)
                  index++
                  let no = new_dialysis_no.toString()
                  // console.log(no)
                  let rep = 3 - no.length
                  // console.log(rep)
                  let tempNo = ""
                  if (rep == 1){
                    tempNo = "0"
                  }

                  if (rep == 2){
                    tempNo = "00"
                  }


                  // console.log(tempNo)
                  if (rep > 0) {
                    no = tempNo + no
                  }
                  this.export_date[i].dialysis_no = no
                }
              }


              // console.log(this.export_date)

              var tempExportDate = this.export_date
              var tempExportDateOne = this.export_date
              var tempExportDateTwo = this.export_date



              const obj2 = {}
              tempExportDate = tempExportDate.reduce((cur, next) => {
                obj2[next.dialysis_no] ? '' : obj2[next.dialysis_no] = true && cur.push(next)
                return cur
              }, []) // 设置cur默认类型为数组，并且初始值为空的数组



              if (tempExportDate.length < this.export_date.length){
                this.dialysisVisible = true
                return
              }



              const obj3 = {}
              tempExportDateOne = tempExportDateOne.reduce((cur, next) => {
                obj3[next.phone] ? '' : obj3[next.phone] = true && cur.push(next)
                return cur
              }, []) // 设置cur默认类型为数组，并且初始值为空的数组



              if (tempExportDateOne.length < this.export_date.length){

                this.phoneVisible = true
                return
              }




              const obj4 = {}
              tempExportDateTwo = tempExportDateTwo.reduce((cur, next) => {
                obj4[next.id_card_no] ? '' : obj4[next.id_card_no] = true && cur.push(next)
                return cur
              }, []) // 设置cur默认类型为数组，并且初始值为空的数组

              if (tempExportDateTwo.length < this.export_date.length){
                this.idCardNoVisible = true
                return
              }

              // this.exportVisible = true
              this.$alert('您提交的患者名单已上传成功，系统正在执行导入，请稍候点击当前页面右上角“下载日志”查看导入结果', '上传成功', {
                confirmButtonText: '确定',
                callback: action => {

                }
              });
              this.isShow = false
              let params = {
                'patients': this.export_date
              }
              console.log("export2222",this.export_date)
              
              postExportPatients(params).then(
                response => {
                  if (response.data.state === 1) {

                    this.getList()
                    this.isShow = true

                  } else {
                    this.isShow = true

                    this.$message.error(response.data.msg)
                  }
                }
              )

            }
          }
        )

      },
      getCount(row) {

        return row.total_dialysis + row.user_sys_before_count
      },
      EditLapseto() {
        if (this.lapsetoForm.lapseto_time == '') {
          this.$message.error('请选择时间')
          return
        }
        //  if(this.lapeseto == "留治"){
        //    this.lapsetoForm.lapseto_type = 1
        //  }
        //  if(this.lapeseto == "转出"){
        //    this.lapsetoForm.lapseto_type = 2
        //  }
        //  if(this.lapeseto == "死亡"){
        //   this.lapsetoForm.lapseto_type = 3
        //  }
        console.log("22222",this.lapsetoForm)
        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.tableData[this.currentIndex].out_reason = this.lapsetoForm.out_reason
              this.currentIndex = -1
              this.LapsetoDialogVisible = false
            } else {
              this.$message.error(response.data.msg)
            }
          }
        )
      },
      OpenSetLapseto(row, index) {
        // if(row.lapseto == 1){
        //   this.lapeseto = "转出"
        // }
        // if(row.lapseto == 2){
        //   this.lapeseto = "留治"
        // }
        // if(row.lapeseto == 3){
        //   this.lapeseto = "死亡"
        // }
        this.patient = row
        this.currentIndex = index
        this.lapsetoForm.lapseto_time = ''
        this.lapsetoForm.lapseto_type = row.lapseto
        this.lapsetoForm.patient_id = row.id
        this.lapsetoForm.out_reason = row.out_reason
        this.LapsetoDialogVisible = true
      },
      LapsetoInfo(row) {
        console.log("row",row)
        if (typeof row.lapseto === 'undefined' ||(row.lapseto !== 1 && row.lapseto !== 2 && row.lapseto !==3)) {
          return '未设置'
        } else if (row.lapseto === 1) {
          return '留治'
        } else if(row.lapseto === 2) {
          return '转出'
        }else if(row.lapseto === 3){
          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) {
        sessionStorage.setItem('patientPageSize',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()
      },
      changeTimeOne(val) {
        var time = this.getTimestamp(val) - this.end_time
        if (time > 0) {
          this.$message.error('结束时间不能小于开始时间')
          this.listQuery.start_time = ''
        } else {
          this.getList()
          this.startTime = this.getTimestamp(val)
        }
      },
      changeTime(val) {
        var time = this.getTimestamp(val) - this.startTime
        if (time < 0) {
          this.$message.error('结束时间不能小于开始时间')
          this.listQuery.end_time = ''
        } else {
          this.getList()
          this.end_time = this.getTimestamp(val)
        }
      },
      getTimestamp(time) {
        // 把时间日期转成时间戳
        return new Date(time).getTime() / 1000
      },
      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
            console.log('二维码病人信息', 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(
          id,
          name,
          gender,
          idcardno,
          phone,
          healthcareno,
          dialysisno
        )
      },
      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
        })
      },

      toRemind(){
        this.dialogTableVisible = true
      },
      GetRemindPatientList(){
          const params = {
             page: this.page,
             limit: this.limit
          }
        GetRemind(params).then(response=>{
           if(response.data.state == 1){
             this.gridData = response.data.data.patients;
             this.totalOne = response.data.data.total;
             var  value = response.data.data.total
             if(value == 0){
               this.value = ""
             }
             if(value != 0){
               this.value = value
             }
           }
        })
      },

      jump(id) {
          // this.$router.replace({ path: "/patients/inspection?id=" + id });
          this.$router.replace({path:"/patients/patients/"+id +"/inspectionInfectious"})
      },
      dateCompare(date) {
        var date1 = Date.parse(new Date()) / 1000;
        if (date > date1) {
          return 1;
        } else {
          return 2;
        }
     },
      handleSizeChangeOne(val) {
        this.limit = val
        this.GetRemindPatientList();
      },
      handleCurrentChangeOne(val) {
        this.page = val;
        this.GetRemindPatientList();
      },
      getTime(val) {
        if(val < 0){
          return ""
        }
        if(val == ""){
         return ""
        }else {
          return uParseTime(val, '{y}-{m}-{d}')
        }

      },
     toExport(){
      import('@/vendor/Export2Excel').then(excel => {
      
        console.log("hhhh323223",this.tableData)
        for(let i=0;i<this.tableData.length;i++){
          if(this.tableData[i].gender == 1){
            this.tableData[i].genders = "男"
          }
          if(this.tableData[i].gender == 2){
            this.tableData[i].genders = "女"
          }
          this.tableData[i].age_year = this.tranAge(this.tableData[i])
          this.tableData[i].first_dialysis_date = this.getTime(this.tableData[i].first_dialysis_date)
          if(this.tableData[i].lapseto == 0){
            this.tableData[i].lapesetos = ""
          }
          if(this.tableData[i].lapseto == 1){
            this.tableData[i].lapesetos = "留治"
          }
          if(this.tableData[i].lapseto == 2){
            this.tableData[i].lapesetos = "转归"
          }
           if(this.tableData[i].source == 0){
             this.tableData[i].sources = ""
          }
          if(this.tableData[i].source == 1){
             this.tableData[i].sources = "门诊"
          }
           if(this.tableData[i].source == 2){
             this.tableData[i].sources = "住院"
          }
         if(this.tableData[i].is_infectious == 0){
             this.tableData[i].is_infectiouss = ""
          }
          if(this.tableData[i].is_infectious == 1){
             this.tableData[i].is_infectiouss = "阴性"
          }
          if(this.tableData[i].is_infectious == 2){
             this.tableData[i].is_infectiouss = "阳性"
          }
        }
       
        const tHeader = ['姓名', '性别', '身份证号码','年龄','透析号','首次治疗时间','本人电话','患者来源','治疗状态','传染病']
        const filterVal = ['name', 'genders', 'id_card_no','age_year','dialysis_no','first_dialysis_date','phone','sources','lapesetos','is_infectiouss']
        console.log("table",this.tableData)
      
        const data = this.formatJson(filterVal, this.tableData)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '患者名单'
        })
        this.downloadLoading = false
     })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    tranAge(val) {
      if(val.birthday){
        var birth = uParseTime(val.birthday, '{y}-{m}-{d}');
        return jsGetAge(birth, '-');
      }
    },
    }
  }
  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)
    var eid = id
    var ename = name
    var egender = gender
    var eidcardno = idcardno
    var ephone = phone
    var ehealthcareno = healthcareno
    var edialysisno = 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">
  .app-container {
    /*margin: 20 px;*/
    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;
  }

  }
  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #d0d3da;
  }

  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    background-color: #d0d3da;
  }

  .el-select--small {
    width: 196px;
  }

  .el-checkbox__inner::after {
    height: 10px;
    left: 7px;
  }

  .el-checkbox__inner {
    width: 20px;
    height: 20px;
  }
</style>