<template> 
 | 
  <TableLayout :permissions="['business:inoutrecord:query']"> 
 | 
    <!-- 搜索表单 --> 
 | 
    <div slot="search-form"> 
 | 
      <el-form ref="searchForm" :model="searchForm" label-width="100px" inline> 
 | 
        <el-form-item label="" prop="inOrOut"> 
 | 
          <el-select v-model="searchForm.type"  style="width: 130px" clearable @change="search" placeholder="事件类型"> 
 | 
            <el-option label="车辆事件" value="0">车辆事件</el-option> 
 | 
            <el-option label="人员事件" value="1">人员事件</el-option> 
 | 
          </el-select> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="" prop="inOrOut"> 
 | 
          <el-select v-model="searchForm.inOrOut"  style="width: 130px" clearable @change="search" placeholder="进出类型"> 
 | 
            <el-option label="进" value="0"></el-option> 
 | 
            <el-option label="出" value="1"></el-option> 
 | 
          </el-select> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="" prop="memberType"> 
 | 
          <el-select v-model="searchForm.memberType" style="width: 130px" clearable @change="search" placeholder="人员类型"> 
 | 
            <el-option label="访客" value="1"></el-option> 
 | 
            <el-option label="内部人员" value="2"></el-option> 
 | 
            <el-option label="相关方人员" value="4"></el-option> 
 | 
            <el-option label="货运司机" value="5"></el-option> 
 | 
          </el-select> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="" prop="memberName"> 
 | 
          <el-input v-model="searchForm.memberName" placeholder="人员名称/手机号" clearable @keypress.enter.native="search"></el-input> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="" prop="companyName"> 
 | 
          <el-input v-model="searchForm.companyName" placeholder="组织名称" clearable @keypress.enter.native="search"></el-input> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="" prop="carCode"> 
 | 
          <el-input v-model="searchForm.carCode" placeholder="车牌号"  clearable @keypress.enter.native="search"></el-input> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="" prop="categoryName"> 
 | 
          <el-input v-model="searchForm.categoryName" placeholder="车辆分类名称" clearable @keypress.enter.native="search"></el-input> 
 | 
        </el-form-item> 
 | 
<!--        <el-form-item label="" prop="carBizType"> 
 | 
          <el-select v-model="searchForm.carBizType" clearable style="width: 180px"   placeholder="车辆业务类型"> 
 | 
            <el-option v-for="op in bizTypeList" :key="op.key" :label="op.name" :value="op.key"  ></el-option> 
 | 
          </el-select> 
 | 
        </el-form-item>--> 
 | 
        <el-form-item label="" prop="deviceName"> 
 | 
          <el-input v-model="searchForm.deviceName" placeholder="出入口名称" clearable @keypress.enter.native="search"></el-input> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="起止时间" prop="startDate"> 
 | 
          <el-date-picker type="datetime" v-model="searchForm.startDate" value-format="yyyy-MM-dd HH:mm:ss" 
 | 
                          placeholder="请选择开始时间" @change="changeRadio" /> 
 | 
          <el-date-picker type="datetime" v-model="searchForm.endDate" value-format="yyyy-MM-dd HH:mm:ss" 
 | 
                          placeholder="请选择结束时间" @change="changeRadio" /> 
 | 
        </el-form-item> 
 | 
        <el-radio-group v-model="searchForm.radio" size="small" @input="changeRadio"> 
 | 
          <el-radio-button label="0">当天</el-radio-button> 
 | 
          <el-radio-button label="1">近7天</el-radio-button> 
 | 
          <el-radio-button label="2">近30天</el-radio-button> 
 | 
        </el-radio-group> 
 | 
        <section> 
 | 
          <el-button type="primary" @click="search">搜索</el-button> 
 | 
          <el-button @click="reset">重置</el-button> 
 | 
        </section> 
 | 
      </el-form> 
 | 
    </div> 
 | 
    <!-- 表格和分页 --> 
 | 
    <template v-slot:table-wrap> 
 | 
      <ul class="toolbar" v-permissions="['business:inoutrecord:exportExcel' ]"> 
 | 
        <li> 
 | 
          <el-button type="primary" :loading="isWorking.export" v-permissions="['business:inoutrecord:exportExcel']" 
 | 
                     @click="exportExcel">导出</el-button> 
 | 
        </li> 
 | 
      </ul> 
 | 
      <el-table :height="tableHeightNew+10" 
 | 
        v-loading="isWorking.search" 
 | 
        :data="tableData.list" 
 | 
        stripe 
 | 
        @selection-change="handleSelectionChange" 
 | 
      > 
 | 
        <el-table-column type="selection" width="55"></el-table-column> 
 | 
        <el-table-column prop="memberName" label="人员名称" min-width="100px"></el-table-column> 
 | 
        <el-table-column prop="memberPhone" label="人员手机号" min-width="100px"></el-table-column> 
 | 
        <el-table-column prop="companyName" label="组织名称" min-width="100px"></el-table-column> 
 | 
        <el-table-column prop="memberType" label="用户类型" min-width="100px"> 
 | 
          <template slot-scope="{row}"> 
 | 
            <span  v-if="row.memberType ==1">访客</span> 
 | 
            <span  v-else-if="row.memberType ==2">内部人员</span> 
 | 
            <span  v-else-if="row.memberType ==4">相关方人员</span> 
 | 
            <span  v-else-if="row.memberType ==5">货运司机</span> 
 | 
            <span  v-else ></span> 
 | 
          </template> 
 | 
        </el-table-column> 
 | 
        <el-table-column prop="carCode" label="车牌号" min-width="100px"></el-table-column> 
 | 
<!--    <el-table-column prop="carBizType" label="车辆业务类型" min-width="100px"> 
 | 
          <template slot-scope="{row}"> 
 | 
            <template v-if="row.carCode"> 
 | 
              <span  v-if="row.carBizType ==0">访客车辆</span> 
 | 
              <span  v-else-if="row.carBizType ==1">外协运输车辆</span> 
 | 
              <span  v-else-if="row.carBizType ==2">市公司卸货车辆</span> 
 | 
              <span  v-else-if="row.carBizType ==3">加工烟卸货车辆</span> 
 | 
              <span  v-else-if="row.carBizType ==4">安泰物流公务用车</span> 
 | 
              <span  v-else-if="row.carBizType ==5">安泰物流货运车辆</span> 
 | 
              <span  v-else >未知车辆</span> 
 | 
            </template> 
 | 
          </template> 
 | 
        </el-table-column>--> 
 | 
        <el-table-column prop="categoryName" label="车辆分类" min-width="100px"> 
 | 
          <template slot-scope="{row}"> 
 | 
<!-- 
 | 
            <span  v-if="row.categoryParentName!= row.categoryName">  {{(row.categoryParentName || '') +row.categoryName}}</span> 
 | 
--> 
 | 
            <span  v-if="row.carCode"  >{{ row.categoryName }}</span> 
 | 
          </template> 
 | 
        </el-table-column> 
 | 
        <el-table-column prop="inOrOut" label="进出类型" min-width="100px"> 
 | 
          <template slot-scope="{row}"> 
 | 
            <span  v-if="row.inOrOut ==1">出</span> 
 | 
            <span  v-else >进</span> 
 | 
          </template> 
 | 
        </el-table-column> 
 | 
        <el-table-column prop="deviceName" label="进出口名称" min-width="100px"></el-table-column> 
 | 
        <el-table-column prop="createDate" label="创建时间" min-width="100px"></el-table-column> 
 | 
        <el-table-column prop="remark" label="备注" min-width="100px"></el-table-column> 
 | 
      </el-table> 
 | 
      <pagination 
 | 
        @size-change="handleSizeChange" 
 | 
        @current-change="handlePageChange" 
 | 
        :pagination="tableData.pagination" 
 | 
      > 
 | 
      </pagination> 
 | 
    </template> 
 | 
    <!-- 新建/修改 --> 
 | 
    <OperaInoutRecordWindow ref="operaInoutRecordWindow" @success="handlePageChange"/> 
 | 
  </TableLayout> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import BaseTable from '@/components/base/BaseTable' 
 | 
import TableLayout from '@/layouts/TableLayout' 
 | 
import Pagination from '@/components/common/Pagination' 
 | 
import OperaInoutRecordWindow from '@/components/business/OperaInoutRecordWindow' 
 | 
import { timeForMat } from '@/utils/util' 
 | 
export default { 
 | 
  name: 'InoutRecord', 
 | 
  extends: BaseTable, 
 | 
  components: { TableLayout, Pagination, OperaInoutRecordWindow }, 
 | 
  data () { 
 | 
    return { 
 | 
      // 搜索 
 | 
      searchForm: { 
 | 
        categoryName: '', 
 | 
        carBizType: '', 
 | 
        memberType: '', 
 | 
        memberName: '', 
 | 
        carCode: '', 
 | 
        inOrOut: '', 
 | 
        companyName: '', 
 | 
        startDate: null, 
 | 
        endDate: null, 
 | 
        radio: '0', 
 | 
        type: null 
 | 
      }, 
 | 
      time: [], 
 | 
      bizTypeList: [{ key: 0, name: '访客车辆' }, 
 | 
        { key: 1, name: '外协运输车辆' }, 
 | 
        { key: 2, name: '市公司卸货车辆' }, 
 | 
        { key: 3, name: '加工烟卸货车辆' }, 
 | 
        { key: 4, name: '自有公务车' }, 
 | 
        { key: 5, name: '自有货运车辆' }, 
 | 
        { key: 6, name: '未知车辆' } 
 | 
      ] 
 | 
    } 
 | 
  }, 
 | 
  created () { 
 | 
    this.config({ 
 | 
      module: '出入场人次车次每日统计表', 
 | 
      api: '/business/inoutRecord', 
 | 
      'field.id': 'id', 
 | 
      'field.main': 'id' 
 | 
    }) 
 | 
    this.search() 
 | 
    this.changeRadio('0') 
 | 
  }, 
 | 
  methods: { 
 | 
    changeRadio (e) { 
 | 
      if (e === '0') { 
 | 
        this.searchForm.startDate = timeForMat(0)[0] 
 | 
        this.searchForm.endDate = timeForMat(0)[1] 
 | 
      } else if (e === '1') { 
 | 
        this.searchForm.startDate = timeForMat(6)[0] 
 | 
        this.searchForm.endDate = timeForMat(6)[1] 
 | 
      } else if (e === '2') { 
 | 
        this.searchForm.startDate = timeForMat(29)[0] 
 | 
        this.searchForm.endDate = timeForMat(29)[1] 
 | 
      } else { 
 | 
        this.searchForm.radio = '' 
 | 
      } 
 | 
      if (this.searchForm.startDate && this.searchForm.endDate && new Date(this.searchForm.startDate).getTime() > new Date(this.searchForm.endDate).getTime()) { 
 | 
        this.$message.error('开始时间不能大于结束时间') 
 | 
        this.searchForm.startDate = '' 
 | 
        return 
 | 
      } 
 | 
      this.search() 
 | 
    }, 
 | 
    seleTime (e) { 
 | 
      this.searchForm.startDate = e[0] 
 | 
      this.searchForm.endDate = e[1] 
 | 
      this.searchForm.radio = null 
 | 
      this.search() 
 | 
    }, 
 | 
    reset () { 
 | 
      this.$refs.searchForm.resetFields() 
 | 
      this.searchForm.startDate = '' 
 | 
      this.searchForm.endDate = '' 
 | 
      this.searchForm.radio = '' 
 | 
      this.time = [] 
 | 
      this.search() 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 |