yunyubang-web/src/views/business/merchantManage.vue

<template>
  <div style="padding: 0px 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>
            <Input clearable style="width: 200px; margin-right: 10px" v-model="select.keywords" placeholder="关键字搜索" />
            <Button type="primary" @click="getMerchant">查询</Button>
            <Button type="primary" style="margin-left: 10px" @click="$refs['addMerchant'].type = 'add',$refs['addMerchant'].isShow = true">新增商户</Button>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table
      :list="list"
      :table-item="tableItem"
      :total="total"
      @pageSizeChange="select.pageSize = $event"
      @pageIndexChange="pageChange"
      @editor="editorShow"
      @delete="deleteMerchant">
    </xy-table>

<!--    新增商户-->
    <add-merchant ref="addMerchant" @refresh="getMerchant"></add-merchant>
  </div>
</template>

<script>
import {index,destroy} from "@/api/merchant"

import addMerchant from './component/addMerchant'
import { Message } from 'element-ui'
export default {
  components:{
    addMerchant
  },
  data() {
    return {
      select:{
        pageSize:10,
        pageIndex:1,
        keywords:''
      },

      total:0,
      list:[],
      tableItem:[
        {
          prop:'username',
          label:'简称/用户名',
          width:190,
          sortable:false,
          align:'left',
          fixed:"left"
        },
        {
          prop:'name',
          label:'全名',
          width: 280,
          sortable:false,
          align:'left',
          fixed:"left"
        },
        {
          prop:'business_number',
          label:'营业执照号码',
          width: 200
        },
        {
          prop:"address",
          label:"地址",
          minWidth: 320,
          align:'left'
        },
        {
          prop:"boss",
          label:"法人/老板",
          width:120
        },
        {
          prop:"boss_phone",
          label:"法人/老板电话",
          width:160
        },
        {
          prop:"contact",
          label:"联系人",
          width: 110
        },
        {
          prop:"phone",
          label:"联系电话",
          width: 150
        },
        {
          prop:"shops_num",
          label:"门店数",
          width: 100,
          formatter:(cell,data,value)=>{
            if(value){
              return value
            }else{
              return 0
            }
          }
        },
        {
          prop:"state",
          label: "状态",
          customFn:(row)=>{
            if(row.state == 1 || row.state === 'active'){
              return (<div style={{'color':'green'}}>启用</div>)
            }else{
              return (<div style={{'color':'red'}}>禁用</div>)
            }
          }
        }
      ]

    }
  },
  methods: {
    pageChange(e){
      this.select.pageIndex = e
      this.getMerchant()
    },

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

    deleteMerchant(row){
      console.log(row.id)
      destroy({ id: row.id }).then(res => {
        Message({
          type:'success',
          message:'删除成功'
        })
        this.getMerchant()
      })
    },

    editorShow(row){
      this.$refs['addMerchant'].id = row.id
      this.$refs['addMerchant'].type = 'editor'
      this.$refs['addMerchant'].isShow = true
    }
  },
  mounted() {
    this.getMerchant()
  }

}
</script>

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