mkw-visit-web/src/views/visit/check.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-switch
              v-model="select.my_accept_admin"
              active-color="#004593"
              inactive-color="#ddd"
              :active-value="1"
              :inactive-value="0"
              >
            </el-switch>
            <div style="margin:0 10px;">只看自己审核记录</div>
            <el-switch
              v-model="select.my_audit"
              active-color="#004593"
              inactive-color="#ddd"
              :active-value="1"
              :inactive-value="0"
              >
            </el-switch>
            <div style="margin:0 10px;">只看自己创建</div>
            <el-switch
              v-model="select.my_self"
              active-color="#004593"
              inactive-color="#ddd"
              :active-value="1"
              :inactive-value="0"
              >
            </el-switch>
            <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"
      @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="180" header-align="center">
          <template slot-scope="scope">
            <i-button
              style="margin-right:6px"
              type="primary"
              size="small"
              @click="checkRecords(scope.row)"
            >
              审核
            </i-button>
            <Poptip
              confirm
              :transfer="true"
              title="确认要删除吗"
              @on-ok="deleteStudy(scope.row)"
            >
              <i-button
                style="margin-right:6px"
                type="error"
                size="small"
              >
                删除
              </i-button>
            </Poptip>
          </template>
        </el-table-column>
      </template>
    </xy-table>    
    <showVisit ref="showVisit" @refresh="getList"></showVisit>
  </div>
</template>

<script>
  import {
    getList,
    destroy
  } from '@/api/visit/record.js'
  import showVisit from '@/views/visit/component/showVisit'
  export default {
    components: {
      showVisit
    },
    data() {
      return {
        visible: false,
        select: {
          page: 1,
          rows: 10,
          keyword: "",
          audit_status: 0,
          my_accept_admin: 0,
          my_audit: 0,
          my_self: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
      },
      deleteStudy(row) {
        console.log(row)
        destroy({
          id: row.id
        }).then(res => {
          this.$successMessage('destroy', '拜访记录')
          this.getList()
        })
      },
      checkRecords(row){
          this.$refs['showVisit'].form = row
          this.$refs['showVisit'].formDataType='checkrecord'
          this.$refs['showVisit'].isShow = true
          // this.$refs['checkRecord'].id = row.id
          // this.$refs['checkRecord'].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>