<template> 
 | 
  <div class="main_app"> 
 | 
    <QueryForm 
 | 
      v-model="filters" 
 | 
      :query-form-config="queryFormConfig" 
 | 
      @handleQuery="getList(1)" 
 | 
      @clear="clear" 
 | 
    /> 
 | 
    <div class="query_btns" style="margin: 16px 0 0" v-permissions="['business:visits:create', 'business:visits:exportExcel']"> 
 | 
      <el-button type="primary" @click="handleEdit()" icon="el-icon-plus" v-permissions="['business:visits:create']">新建</el-button> 
 | 
      <el-button type="primary" :loading="exLoading" @click="exportExcel" v-permissions="['business:visits:exportExcel']">导出</el-button> 
 | 
    </div> 
 | 
    <el-table 
 | 
      v-loading="loading" 
 | 
      :data="dataList" 
 | 
      stripe 
 | 
      row-key="id" 
 | 
      default-expand-all 
 | 
    > 
 | 
      <el-table-column type="selection" width="55" align="center"></el-table-column> 
 | 
      <el-table-column 
 | 
        prop="carNos" 
 | 
        label="入园车辆" 
 | 
        min-width="100px" 
 | 
      ></el-table-column> 
 | 
      <el-table-column 
 | 
        prop="companyName" 
 | 
        label="公司名称" 
 | 
        min-width="100px" 
 | 
      ></el-table-column> 
 | 
      <el-table-column 
 | 
        prop="name" 
 | 
        label="联系人信息" 
 | 
        min-width="100px" 
 | 
      ></el-table-column> 
 | 
      <el-table-column 
 | 
        prop="phone" 
 | 
        label="手机号" 
 | 
        min-width="100px" 
 | 
      ></el-table-column> 
 | 
      <el-table-column 
 | 
        prop="receptMemberName" 
 | 
        label="被访人" 
 | 
        min-width="100px" 
 | 
      ></el-table-column> 
 | 
      <el-table-column label="拜访时间" min-width="160px"> 
 | 
        <template slot-scope="{ row }"> 
 | 
          <span>起:{{ row.starttime }}</span 
 | 
          ><br /> 
 | 
          <span>止:{{ row.endtime }}</span> 
 | 
        </template> 
 | 
      </el-table-column> 
 | 
      <el-table-column 
 | 
        prop="reason" 
 | 
        label="拜访事由" 
 | 
        min-width="100" 
 | 
      ></el-table-column> 
 | 
      <el-table-column 
 | 
        prop="status" 
 | 
        fixed="right" 
 | 
        label="状态" 
 | 
        align="center" 
 | 
        min-width="100" 
 | 
      > 
 | 
        <template slot-scope="{ row }"> 
 | 
          <span style="color: rgba(245, 154, 35, 0.996)" v-if="row.status === 0" 
 | 
            >待提交审批</span 
 | 
          > 
 | 
          <span v-if="row.status === 1" style="color: rgba(245, 154, 35, 0.996)" 
 | 
            >处理中</span 
 | 
          > 
 | 
          <span v-if="row.status === 2" style="color: rgba(245, 154, 35, 0.996)" 
 | 
            >已同意</span 
 | 
          > 
 | 
          <span style="color: gray" v-if="row.status === 3">已拒绝</span> 
 | 
          <span v-if="row.status === 4" style="color: gray">取消</span> 
 | 
          <span v-if="row.status === 5" style="color: green">下发成功</span> 
 | 
          <span v-if="row.status === 6" style="color: gray">下发失败</span> 
 | 
          <span v-if="row.status === 7" style="color: green">拜访中</span> 
 | 
          <span v-if="row.status === 8" style="color: red">已签离</span> 
 | 
          <span v-if="row.status === 9" style="color: gray">已失效</span> 
 | 
        </template> 
 | 
      </el-table-column> 
 | 
      <el-table-column label="操作" align="center" width="100" fixed="right"> 
 | 
        <template slot-scope="{ row }"> 
 | 
          <el-button 
 | 
            type="text" 
 | 
            @click="handleDetail(row)" 
 | 
            v-permissions="['business:company:update']" 
 | 
            >查看详情</el-button 
 | 
          > 
 | 
        </template> 
 | 
      </el-table-column> 
 | 
    </el-table> 
 | 
    <pagination 
 | 
      @size-change="handleSizeChange" 
 | 
      @current-change="getList" 
 | 
      :pagination="pagination" 
 | 
    /> 
 | 
    <ReportDetail v-if="isShowReport" ref="VisReportDetailRef" /> 
 | 
    <OperaVisitsReportWindow @close="isShowEdit = false" @success="getList"  v-if="isShowEdit" ref="operaVisitsWindowRef" /> 
 | 
  </div> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import Pagination from '@/components/common/Pagination' 
 | 
import QueryForm from '@/components/common/QueryForm' 
 | 
// import ReportDetail from './page-components/ReportDetail.vue' 
 | 
import ReportDetail from '@/views/task/visReportDetail.vue' 
 | 
import OperaVisitsReportWindow from '@/components/business/operaVisitsReportWindow.vue' 
 | 
import { fetchList, exportExcel } from '@/api/business/visits' 
 | 
export default { 
 | 
  components: { 
 | 
    ReportDetail, 
 | 
    QueryForm, 
 | 
    Pagination, 
 | 
    OperaVisitsReportWindow 
 | 
  }, 
 | 
  data () { 
 | 
    return { 
 | 
      isShowEdit: false, 
 | 
      exLoading: false, 
 | 
  
 | 
      isShowReport: false, 
 | 
      activeTab: '0', 
 | 
      filters: { 
 | 
        type: 2 
 | 
      }, 
 | 
      dataList: [], 
 | 
      queryFormConfig: { 
 | 
        formItems: [ 
 | 
          { 
 | 
            filed: 'carNos', 
 | 
            type: 'input', 
 | 
            label: '车牌号' 
 | 
          }, 
 | 
          { 
 | 
            filed: 'companyName', 
 | 
            type: 'input', 
 | 
            label: '公司名称' 
 | 
          } 
 | 
        ], 
 | 
        online: true 
 | 
      }, 
 | 
      loading: false, 
 | 
      sorting: false, 
 | 
      searchForm: { 
 | 
        // type: 1 
 | 
      }, 
 | 
      pagination: { 
 | 
        capacity: 10, 
 | 
        page: 1 
 | 
      }, 
 | 
      total: 0 
 | 
    } 
 | 
  }, 
 | 
  created () { 
 | 
    this.getList() 
 | 
  }, 
 | 
  methods: { 
 | 
    exportExcel () { 
 | 
      this.$dialog.exportConfirm('确认导出吗?') 
 | 
        .then(() => { 
 | 
          this.exLoading = true 
 | 
          exportExcel({ 
 | 
            page: this.pagination.page, 
 | 
            capacity: 1000000, 
 | 
            model: this.filters 
 | 
          }) 
 | 
            .then(response => { 
 | 
              this.download(response) 
 | 
            }) 
 | 
            .catch(e => { 
 | 
              this.$tip.apiFailed(e) 
 | 
            }) 
 | 
            .finally(() => { 
 | 
              this.exLoading = false 
 | 
            }) 
 | 
        }) 
 | 
    }, 
 | 
    handleEdit () { 
 | 
      this.isShowEdit = true 
 | 
      this.$nextTick(() => { 
 | 
        this.$refs.operaVisitsWindowRef.isShowModal = true 
 | 
      }) 
 | 
    }, 
 | 
    handleDetail (row) { 
 | 
      this.isShowReport = true 
 | 
      this.$nextTick(() => { 
 | 
        this.$nextTick(() => { 
 | 
          this.$refs.VisReportDetailRef.id = row.id 
 | 
          this.$refs.VisReportDetailRef.type = 1 
 | 
          this.$refs.VisReportDetailRef.getDetail() 
 | 
          this.$refs.VisReportDetailRef.isShowModal = true 
 | 
        }) 
 | 
      }) 
 | 
    }, 
 | 
    getList (page) { 
 | 
      const { pagination, filters } = this 
 | 
      pagination.page = page || pagination.page 
 | 
      fetchList({ 
 | 
        model: { ...filters }, 
 | 
        ...pagination 
 | 
      }).then(res => { 
 | 
        this.dataList = res.records || [] 
 | 
      }) 
 | 
    }, 
 | 
    clear () { 
 | 
      this.filters = { 
 | 
        type: 2 
 | 
      } 
 | 
      this.getList(0) 
 | 
    }, 
 | 
    handleSizeChange (capacity) { 
 | 
      this.pagination.capacity = capacity 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 | 
  
 | 
<style lang="scss" scoped> 
 | 
</style> 
 |