mkw-visit-web/src/views/gate/visitlist.vue

<template>
  <div>
    <div :style="{height:clientHeight+'px'}" class="gatewrap">
      <div class="gatecode">
        核销码：<el-input clearable ref='codeInput' size="mini" placeholder="请输入核销码或扫码" v-model="select.code"
          style="width: 160px;margin-right: 10px;"></el-input>
          <el-button type="primary" @click='getList'>查询</el-button>
      </div>
    </div>

    <showVisit ref="showVisit" @refresh='clearCode'></showVisit>

    <!-- 选择门岗人员 -->
    <el-dialog
      title="请先选择门岗人员"
      :visible.sync="gateShow"
      width="60%"
      :close-on-click-modal='false'
      :show-close='false'	>
        <el-radio-group v-model="gateAdminId">
            <el-radio v-for="item in gateData" :label="item.id" border>{{item.name}}</el-radio>
        </el-radio-group>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmGate">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
  import showVisit from '@/views/visit/component/showVisit'
  import {
    getList,
    getUserList
  } from '@/api/gate'
  export default {
    components: {
      showVisit
      },
    data() {
      return {
        clientHeight:0,
        gateShow:false,
        gateAdminId:'',
        gateData:[],
        select: {
          page: 1,
          rows: 10,
          keyword: "",
          audit_status: "",
          start_date: "",
          end_date: "",
          is_export: 0,
          code:""
        },
        data: [],

      }
    },
    computed: {},
    mounted() {

    },
    created() {
      this.init()
      this.getUserList()
      // this.getList()
    },
    methods: {
      init(){
        let clientHeight = document.documentElement.clientHeight;
        this.clientHeight = clientHeight
        this.$nextTick(() => {
          this.$refs.codeInput.focus()
        })
      },
      clearCode(){
        this.select.code = ''
        this.$nextTick(() => {
          this.$refs.codeInput.focus()
        })
      },
      async getList() {
        let res = await getList(this.select)
        this.data = res.data
        if(this.data.length>0){
            this.$refs['showVisit'].form = this.data[0]
            this.$refs['showVisit'].formDataType = 'coderecord'
            this.$refs['showVisit'].gateAdminId=this.gateAdminId
            this.$refs['showVisit'].isShow = true
        }else{
            this.$successMessage("未查询到记录",'','warning')
        }
      },
      async getUserList() {
        let res = await getUserList()
        this.gateData = res
        this.gateShow = true
      },
      confirmGate(){
          if(!this.gateAdminId){
            this.$successMessage("请先选择门岗",'','warning')
            return
          }
          this.gateShow = false
      },
      showVisitForm(row,type) {
        this.$refs['showVisit'].form = row
        this.$refs['showVisit'].formDataType = 'coderecord'
        this.$refs['showVisit'].codeType = type
        this.$refs['showVisit'].gateAdminId=this.gateAdminId
        this.$refs['showVisit'].isShow = true
      }


    },
  }
</script>

<style scoped>
  .gatewrap{
    background-color: #fff;
    position: relative;
  }
  .gatecode{
    font-size: 32px;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
  }
  /deep/ .el-input{
    width: 350px!important;
  }
  /deep/ .el-input__inner{
        font-size: 32px;
        height: 45px;
        width: 350px;
  }
  /deep/ .el-button{
        vertical-align: top;
        height: 45px;
        width: 90px;
        border: none;
  }
</style>