mkw-visit-web/src/views/visit/record.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="selectRanges" 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>
            <template>
              <el-popover placement="right" width="250" v-model="visible" trigger='click'>
                <p style="margin-bottom:10px">选择访客类型:</p>
                <div style="display: flex;align-items: center;">
                  <el-button size="mini" type="primary"
                    @click="visible=false,$refs['addCommon'].isShow = true,$refs['addCommon'].type = 'add',$refs['addCommon'].visitType = 1">普通访客
                  </el-button>
                  <el-button type="primary" size="mini"
                    @click="visible=false,$refs['addCommon'].isShow = true,$refs['addCommon'].type = 'add',$refs['addCommon'].visitType = 2">施工访客
                  </el-button>
                  <el-button type="primary" size="mini"
                    @click="visible=false,$refs['addCommon'].isShow = true,$refs['addCommon'].type = 'add',$refs['addCommon'].visitType = 3">物流车辆</el-button>
                </div>
                <el-button slot="reference" size="medium" type="primary" style="margin-left: 10px">新增</el-button>
              </el-popover>
            </template>
            <el-button @click="downloadExel" 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"
      :auths="['edit','delete']"
      @pageSizeChange="e => {select.rows = e;select.page = 1;getList()}"
      @pageIndexChange="e => {select.page = e;getList()}" @delete="deleteStudy" @editor="editorStudy">
    </xy-table>
    <addCommon ref="addCommon" @refresh="getList"></addCommon>
    <!-- <addBuild ref="addBuild" @refresh="getList"></addBuild>
    <addPark ref="addPark" @refresh="getList"></addPark> -->
  </div>
</template>

<script>
  import {
    getList,
    destroy
  } from '@/api/visit/record.js'
  import addCommon from '@/views/visit/component/addCommon'
  import {
    download
  } from '@/utils/downloadRequest'
  export default {
    components: {
      addCommon
    },
    data() {
      return {
        visible: false,
        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: '已离厂'
          },{
            id: 5,
            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() {
      this.getList()
    },
    methods: {
      async getList() {
        let res = await getList(this.select)
        console.log(res)
        this.data = res.data
        this.total = res.total
      },
      selectRanges(val){
        if(val){
          this.select.start_date = val[0]
          this.select.end_date = val[1]
        }else{
          this.select.start_date = ''
          this.select.end_date = ''
        }
      },
      downloadExel() {
        this.select.is_export = 1
        download(
          '/api/admin/visit/index',
          'get', {
            ...this.select
          },
          '拜访记录列表.xlsx')
          this.select.is_export = 0
      },
      deleteStudy(row) {
        destroy({
          id: row.id
        }).then(res => {
          this.$successMessage('destroy', '拜访记录')
          this.getList()
        })
      },
      editorStudy(row) {
        // let addWhat = row.type == 1 ? "addCommon" : (row.type == 2 ? "addBuild" : (row.type == 3 ? "addPark" : ""))
        let addWhat = "addCommon"
        this.$refs[addWhat].id = row.id
        this.$refs[addWhat].visitType=row.type
        this.$refs[addWhat].type = 'editor'
        this.$refs[addWhat].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>