mkw-visit-web/src/views/visit/blacklist.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;">
            <div style="margin-right: 10px;">关键词</div>

            <el-input size="mini" placeholder="请输入关键词" v-model="select.keyword"
              style="width: 160px;margin-right: 10px;"></el-input>
            <el-button @click="getList" slot="reference" size="medium" type="primary" style="margin-left: 10px">查询
            </el-button>
            <el-button @click="visible=false,$refs['addBlack'].isShow = true,$refs['addBlack'].type = 'add'"
              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="deleteRow" @editor="editorRow">
    </xy-table>
    <addBlack ref="addBlack" @refresh="getList"></addBlack>
  </div>
</template>

<script>
  import {
    getList,
    destroy
  } from '@/api/visit/blacklist.js'
  import addBlack from '@/views/visit/component/addBlack'
  export default {
    components: {
      addBlack
    },
    data() {
      return {
        select: {
          page: 1,
          rows: 10,
          keyword: ""
        },
        total: 0,
        data: [],
        table: [{
            label: '序号',
            type: "index",
            fixed: "left",
          },
          {
            label: '姓名',
            sortable: false,
            prop: 'name',
            fixed: "left",
            align: "left",
            width: 180
          },
          {
            label: '联系号码',
            sortable: false,
            prop: 'mobile',
            width: 180
          },
          {
            label: '证件类型',
            sortable: false,
            prop: 'credent',
            width: 180,
            customFn: (row) => {
              return row.credent == 1 ? '身份证' : "护照"
            }
          },
          {
            label: '证件号',
            sortable: false,
            prop: 'idcard',
            width: 180
          },
          {
            label: '状态',
            sortable: false,
            prop: 'status',
            width: 120,
            customFn: (row) => {
              if (row.status == 1) {
                return ( < div style = "color: green" > 启用 </div>)
                }
                else {
                  return ( < div style = "color: red" > 禁用 </div>)
                  }
                }
              }, {
                label: '单位名称',
                sortable: false,
                prop: 'company_name',
                align: "left",
                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',
                width: 180
              }
            ]
          }
        },
        computed: {},
        mounted() {
          this.getList()
        },
        methods: {
          async getList() {
            let res = await getList(this.select)
            console.log(res)
            this.data = res.data
            this.total = res.total
          },
          deleteRow(row) {
            destroy({
              id: row.id
            }).then(res => {
              this.$successMessage('destroy', '黑名单')
              this.getList()
            })
          },
          editorRow(row) {
            this.$refs['addBlack'].id = row.id
            this.$refs['addBlack'].type = 'editor'
            this.$refs['addBlack'].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;
  }
</style>