share-fun-web/src/views/sceneManagement/sceneVerify/index.vue

<template>
  <div class="">
    <toolbar @on-filter="filterData" @on-reset="filterData" />

    <base-table
      class="m-10 bg-w p-20 br-10"
      :columns="columns"
      :items="items"
      :pagination="pagination"
      :page-change="pageChange"
    />
  </div>
</template>

<script>
import toolbar from './toolbar';
import mxFilterList from '@/mixins/filterList';
import { getPage } from '@/api/scene';

export default {
  name: 'SceneVerify',

  components: { toolbar },

  mixins: [
    mxFilterList({
      fetchList: getPage // 在下方data再声明一个 fetchList: iGetList 同等效果
    })
  ],

  data() {
    return {
      columns: [
        {
          key: 'name',
          name: '机构名称',
          width: this.$col.b
        },
        {
          key: 'logo',
          name: 'Logo',
          width: this.$col.b,
          render: (h, { row }) =>
            h('img', {
              style: {
                width: '120px',
                height: '90px'
              },
              class: 'pre-img',
              attrs: {
                src: row.logo
              },
              on: {
                click: () =>
                  this.$AdvanceViewImageModal({
                    items: [{ src: row.logo }]
                  })
              }
            })
        },
        {
          key: 'previewLogo',
          name: '预览Logo',
          width: this.$col.b,
          render: (h, { row }) =>
            h('img', {
              style: {
                width: '120px',
                height: '90px'
              },
              class: 'pre-img',
              attrs: {
                src: row.previewLogo
              },
              on: {
                click: () =>
                  this.$AdvanceViewImageModal({
                    items: [{ src: row.previewLogo }]
                  })
              }
            })
        },
        {
          key: 'region',
          name: '所在地区',
          minWidth: this.$col.auto(200),
          render: (h, { row }) =>
            h('span', `${row.province}/${row.city}/${row.area}`)
        },
        {
          key: 'type',
          name: '机构类型',
          width: this.$col.b
        },
        {
          key: 'realName',
          name: '申请人',
          width: this.$col.m
        },
        {
          key: 'personPhonenumber',
          name: '手机号码',
          width: this.$col.b
        },
        {
          key: 'auditStatus',
          name: '状态',
          width: this.$col.s,
          type: 'tag',
          fetchTagType: val => {
            switch (val) {
              case 1:
                return 'success';
              case 0:
                return 'info';
              case -1:
                return 'error';
              default:
                return 'info';
            }
          },
          tagName: row => {
            switch (row.auditStatus) {
              case 1:
                return '通过';
              case 0:
                return '待审核';
              case -1:
                return '拒绝';
              default:
                return '-';
            }
          }
        },
        {
          key: 'action',
          name: '操作',
          width: '120',
          render: (h, { row }) => {
            const action = [];
            action.push(
              h(
                'el-button',
                {
                  props: {
                    type: 'text'
                  },
                  on: {
                    click: () =>
                      this.$SceneVerifyItemModal({
                        id: row.id,
                        auditStatus: row.auditStatus
                      })
                  }
                },
                '审核'
              )
            );

            return h('div', action);
          }
        }
      ]
    };
  },

  created() {
    this.$g_on('scene_reload', this.reload);
  },

  beforeDestroy() {
    this.$g_off('scene_reload', this.reload);
  }
};
</script>

<style type="scss" scoped></style>