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

<template>
  <div style="padding: 0 20px">
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="拜访记录" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <slot>
          <div style="display: flex;align-items: center;" class="selector">
            <div style="margin-right: 10px;">关键词</div>

            <el-input size="mini" placeholder="请输入关键词" v-model="select.keyword"
              style="width: 160px;margin-right: 10px;"></el-input>
            <div style="margin-right: 10px;">状态</div>
            <el-select v-model="select.audit_status" clearable placeholder="请选择">
              <el-option v-for="item in statusList" :key="item.id" :label="item.value" :value="item.id">
              </el-option>
            </el-select>
            <div style="margin:0 10px;">起始时间</div>
            <el-date-picker v-model="selectRange" @change="selectRangeM" value-format="yyyy-MM-dd" type="daterange"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
            <el-button @click="getList" slot="reference" size="medium" type="primary" style="margin-left: 10px">查询
            </el-button>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table :table-item="table" :list="data" :total="total" @tableHeight="tableHeight" :height="tableHeights"
      @pageSizeChange="e => {select.rows = e;select.page = 1;getList()}"
      @pageIndexChange="e => {select.page = e;getList()}">
      <template v-slot:btns>
        <el-table-column fixed="right" label="操作" width="220" header-align="center">
          <template slot-scope="scope">
            <i-button v-if="scope.row.audit_status==1" style="margin-right:6px" type="primary" size="small" @click="showVisitForm(scope.row)"
              >
              进入核验扫码
            </i-button>
            <i-button v-if="scope.row.audit_status==3" style="margin-right:6px" type="primary" size="small" onClick=""
              >
              离开核验扫码
            </i-button>
          </template>
        </el-table-column>
      </template>
    </xy-table>
    <showVisit ref="showVisit"></showVisit>
  </div>
</template>
<script>
  import showVisit from '@/views/visit/component/showVisit'
  import {
    getList
  } from '@/api/gate'
  export default {
    components: {
      showVisit
      },
    data() {
      return {
        visible: false,
        tableHeights: 0,
        select: {
          page: 1,
          rows: 10,
          keyword: "",
          audit_status: "",
          start_date: "",
          end_date: "",
          is_export: 0
        },
        selectRange: [],
        statusList: [{
            id: -1,
            value: '待学习'
          },
          {
            id: 0,
            value: '待审核'
          },
          {
            id: 1,
            value: '通过(待进厂)'
          },
          {
            id: 2,
            value: '驳回'
          },
          {
            id: 3,
            value: '已进厂'
          },
          {
            id: 4,
            value: '已离厂'
          }
        ],
        total: 0,
        data: [],
        table: [{
            label: '序号',
            type: "index",
            fixed: "left",
            width: 80
          },
          {
            label: '姓名',
            sortable: false,
            prop: 'name',
            fixed: "left",
            width: 120
          },
          {
            label: '类型',
            sortable: false,
            prop: 'type_text',
            width: 120
          },
          {
            label: '状态',
            sortable: false,
            prop: 'audit_status_text',
            width: 120
          },
          {
            label: '是否随访',
            sortable: false,
            prop: 'follw_people',
            width: 80,
            formatter: (cell, data, value) => {
              return value ? '是' : '否'
            }
          },
          {
            label: '预约时间',
            sortable: false,
            prop: 'date',
            width: 120
          },
          {
            label: '证件类型',
            sortable: false,
            prop: 'credent',
            width: 120,
            formatter: (cell, data, value) => {
              return value == 1 ? '身份证' : '护照'
            },
          },
          {
            label: '证件号',
            sortable: false,
            prop: 'idcard',
            width: 180
          },
          {
            label: '手机号',
            sortable: false,
            prop: 'mobile',
            width: 120
          },
          {
            label: '单位名称',
            sortable: false,
            prop: 'company_name',
            width: 180
          },

          {
            label: '开始时间',
            sortable: false,
            prop: 'start_date',
            width: 180
          },
          {
            label: '结束时间',
            sortable: false,
            prop: 'end_date',
            width: 180
          },
          {
            label: '创建时间',
            sortable: false,
            prop: 'created_at',
            width: 180

          },
          {
            label: '创建人',
            sortable: false,
            prop: 'admin_id',
            width: 120
          }
        ]
      }
    },
    computed: {},
    mounted() {

    },
    created() {
      this.getToday()
      this.getList()
    },
    methods: {
      getToday() {
        let now = new Date()
        let nowDay = this.$moment(now).format("YYYY-MM-DD")
        this.select.start_date = nowDay
        this.select.end_date = nowDay
        this.selectRange = [nowDay, nowDay]
      },
      async getList() {
        let res = await getList(this.select)
        this.data = res.data
        this.total = res.total
      },
      selectRangeM(val) {
        console.log(val)
        if (val) {
          this.select.start_date = val[0]
          this.select.end_date = val[1]
        } else {
          this.select.start_date = ""
          this.select.end_date = ""
        }
      },
      tableHeight(val) {
        this.$nextTick(function() {
          this.tableHeights = val + 25 + 50
        })
      },
      showVisitForm(row) {
        // let addWhat = row.type == 1 ? "addCommon" : (row.type == 2 ? "addBuild" : (row.type == 3 ? "addPark" : ""))
        this.$refs['showVisit'].form = row
        this.$refs['showVisit'].formDataType = 'coderecord'
        this.$refs['showVisit'].isShow = true
      }


    },
  }
</script>

<style scoped lang="scss">
  //::v-deep .el-button + .el-button{
  //  margin-left: 0 !important;
  //}
  ::v-deep .el-button {
    padding: 5px 8px !important;
  }

  .selector {
    ::v-deep .el-input--suffix .el-input__inner {
      height: 28px;
    }

    ::v-deep .el-select .el-input .el-select__caret {
      line-height: 28px;
    }

    ::v-deep .el-range-editor.el-input__inner {
      height: 28px;
      width: 250px
    }

    ::v-deep .el-date-editor .el-range__icon {
      line-height: 21px;
    }

    ::v-deep .el-date-editor .el-range-separator {
      line-height: 21px;
    }

    ::v-deep .el-date-editor .el-range__close-icon {
      line-height: 21px;
    }
  }
</style>