yunyubang-web/src/views/userManage/memberManage.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">
        <div slot="content"></div>
        <slot>
          <div class="selector">
            <div class="selector-item">
              <div class="selector-item__label">关键词：</div>
              <Input v-model="select.keywords" clearable style="width: 200px;" placeholder="关键字搜索" />
            </div>
            <div class="selector-item">
              <div class="selector-item__label">区域：</div>
              <Select clearable v-model="select.area" style="width: 130px;" placeholder="选择区域搜索">
                <Option v-for="item in areas" :value="item">{{item}}</Option>
              </Select>
            </div>
            <div class="selector-item">
              <div class="selector-item__label">建卡医院：</div>
              <Input clearable v-model="select.hospital" style="width: 200px;" placeholder="建卡医院搜索"/>
            </div>

            <div class="selector-item">
              <Button type="primary" @click="getMembers">查询</Button>
            </div>
            <div class="selector-item">
              <Button type="primary" @click="$refs['addMember'].isShow = true,$refs['addMember'].type = 'add'">新增会员</Button>
            </div>
            <div class="selector-item">
              <Button type="primary" @click="exportExel">导出</Button>
            </div>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table :total="total" @pageSizeChange="e => select.pageSize = e" @pageIndexChange="pageChange" :list="list" :table-item="table" @editor="editorShow" @delete="deleteMember"></xy-table>

    <addMember ref="addMember" @refresh="getMembers"></addMember>
  </div>
</template>

<script>
import {index,destroy} from '@/api/member'
import {parseTime} from "@/utils"
import {download} from '@/utils/downloadRequest'

import addMember from './component/addMember'
import { Message } from 'element-ui'
export default {
  components:{
    addMember
  },
  data() {
    return {
      select:{
        pageSize:10,
        pageIndex:1,
        keywords:"",
        area:"",
        hospital:""
      },
      areas:["吴中区", "吴江区", "姑苏区", "工业园区", "高新区", "相城区", "昆山", "常熟", "张家港", "太仓"],

      total:0,
      list:[],
      table:[
        {
          prop:'name',
          label:'姓名',
          width:180,
          sortable:false
        },
        {
          prop:'phone',
          label:'电话',
          width:200
        },
        {
          prop:'due_date',
          label:'预产期',
          width: 200
        },
        {
          prop:'area',
          label:'所属区域',
          width: 160,
        },
        {
          prop:'address',
          label:'住址',
          align:'left',
          width: 300
        },
        {
          prop:'hospital',
          label:'建卡医院',
          width: 200
        },
        {
          prop:'promotion',
          label:'推广人员',
          width:140,
          customFn:(row)=>{
            return (<Tag color={row.promotion == 1 ? 'success' : 'error'}>{row.promotion == 1 ? '是' : '否'}</Tag>)
          }
        },
        {
          prop:'created_at',
          label:'注册日期',
          width:200,
          formatter:(cell,data,value)=>{
            return parseTime(new Date(value),'{y}-{m}-{d}')
          }
        }
      ]
    }
  },
  methods: {
    pageChange(e){
      this.select.pageIndex = e
      this.getMembers()
    },

    async getMembers(){
      const res = await index({
        page_size:this.select.pageSize,
        page:this.select.pageIndex,
        keyword:this.select.keywords,
        hospital:this.select.hospital,
        area:this.select.area
      })
      this.total = res.total
      this.list = res.data
    },

    editorShow(row){
      this.$refs['addMember'].id = row.id
      this.$refs['addMember'].type = 'editor'
      this.$refs['addMember'].isShow = true
    },
    deleteMember(row){
      destroy({
        id:row.id
      }).then(res => {
        Message({
          type:'success',
          message:'删除会员成功'
        })
        this.getMembers()
      })
    },

    exportExel(){
      download('/api/admin/member/index','get',{is_export:1},'用户列表.xlsx')
    }
  },
  mounted() {
    this.getMembers()
  }

}
</script>

<style scoped lang="scss">
.selector{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  &-item{
    display: flex;
    align-items: center;
    align-content: center;

    margin-top: 6px;
    margin-right: 10px;

    &__label{
      word-break: keep-all;
    }
  }
}
</style>