share-fun-web/src/views/systemManagement/accountManagement/index.vue

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

    <div class="m-10 bg-w p-20 br-10">
      <!--  <el-button type="primary" icon="el-icon-plus" @click="handleSubmit"
        >新增</el-button
      > -->
      <base-table
        :columns="columns"
        :items="items"
        :pagination="pagination"
        :page-change="pageChange"
      />
    </div>
  </div>
</template>

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

export default {
  name: 'AccountManagement',

  components: { toolbar },

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

  data() {
    return {
      columns: [
        {
          key: 'id',
          name: '标题',
          minWidth: '240'
        },
        {
          key: 'mobileNumber',
          name: '手机号码',
          width: '160'
        },
        {
          key: 'nickname',
          name: '昵称',
          width: '140'
        },
        {
          key: 'avatarUrl',
          name: '头像',
          width: '120',
          render: (h, { row }) => {
            if (!row.avatarUrl) {
              return h('span', '图片正在处理中请稍等...');
            }
            return h('img', {
              style: {
                width: '160px',
                height: '90px'
              },
              class: 'pre-img',
              attrs: {
                src: row.avatarUrl
              },
              on: {
                click: () =>
                  this.$AdvanceViewImageModal({
                    items: [{ src: row.avatarUrl }]
                  })
              }
            });
          }
        },
        {
          key: 'gender',
          name: '性别',
          width: '120',
          type: 'tag',
          fetchTagType: val => 'info',
          tagName: row =>
            row.gender === '0' ? '未知' : row.gender === '1' ? '男' : '女'
        },
        {
          key: 'isLocked',
          name: '封锁状态',
          width: '80',
          type: 'tag',
          fetchTagType: val => (val ? 'error' : 'info'),
          tagName: row => (row.isLocked ? '是' : '否')
        }
        // {
        //   key: 'action',
        //   name: '操作',
        //   width: '120'
        // }
      ]
    };
  }
};
</script>

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