material-pc-admin/src/views/business/settlement/index.vue

<template>
  <div class="pdl">
    <!-- 选项卡 -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待处理" name="0" />
      <el-tab-pane label="已通过" name="1" />
      <el-tab-pane label="已拒绝" name="2" />
    </el-tabs>
    <!-- 搜索 -->
    <div class="formSearch">
      <el-form :inline="true" :model="formInline">
        <el-form-item label="商家名称">
          <el-input v-model="formInline.shopName" maxlength="20" placeholder="请输入商家名称" />
        </el-form-item>
        <el-form-item label="注册手机号">
          <el-input v-model="formInline.shopPhone" maxlength="11" placeholder="请输入注册手机号" />
        </el-form-item>
        <el-form-item label="店铺类型">
          <el-select v-model="formInline.authenType" clearable placeholder="请选择">
            <el-option label="个人" value="1" />
            <el-option label="个体工商户" value="2" />
            <el-option label="企业" value="3" />
            <el-option label="其他组织" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="申请时间">
          <el-date-picker
            v-model="formInline.dates" type="datetimerange" value-format="yyyy-MM-dd" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="tableBox">
      <el-table
        ref="multipleTable" :data="tableData" border
        :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark" style="width: 100%"
      >
        <el-table-column label="商家名称" width="220">
          <template slot-scope="scope">{{ scope.row.shopName }}</template>
        </el-table-column>
        <el-table-column label="店铺类型">
          <template slot-scope="scope">
            <span v-if="scope.row.authenType == 1">个人</span>
            <span v-if="scope.row.authenType == 2">个体工商户</span>
            <span v-if="scope.row.authenType == 3">企业</span>
            <span v-if="scope.row.authenType == 4">其他组织</span>
          </template>
        </el-table-column>
        <el-table-column prop="shopPhone" label="注册手机号" />
        <el-table-column prop="createTime" label="申请时间" />
        <el-table-column label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <div class="btnList">
              <el-button v-if="activeName == 0" type="text" @click="handleDel(scope.row)">
                处理
              </el-button>
              <el-button v-if="activeName == 1 || activeName == 2" type="text" @click="handleDel(scope.row)">
                查看
              </el-button>
              <el-button v-if="activeName == 1 || activeName == 2" type="text" @click="delet(scope.row)">
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="fenye">
        <el-pagination
          :current-page="formInline.page" :page-sizes="[10, 20, 50, 100]" :page-size="10"
          layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <el-dialog
      :title="'商家入驻审核'" :visible.sync="addVisible" top="5vh" width="70%"
      center :show-close="false"
      :close-on-click-modal="false"
    >
      <AddSettlement v-loading="loading" :business-data="form" @cancel="cleanForm" @search="search" />
    </el-dialog>
  </div>
</template>

<script>
import AddSettlement from '@/views/business/settlement/addSettlement'

import {
  settlementGetAll,
  settlementDelete
} from '@/api/business'
import {
  settlementGetById
} from '@/api/business'

export default {
  components: {
    AddSettlement
  },
  data() {
    // 这里存放数据
    return {
      activeName: '0',
      formInline: {
        shopName: '', // 商家名称
        shopPhone: '', // 注册手机号
        authenType: '', // 店铺类型 1-个人 2-个体工商户 3-企业 4-其他组织
        dates: [], // 时间数组
        checkState: '0', // 入驻处理状态 0-未处理 1-通过 2-拒绝
        page: 1,
        pageSize: 10,
        shopType: 1
      },
      total: 10,
      tableData: [],
      addVisible: false,
      loading: false,
      form: {}
    }
  },
  mounted() {
    this.getAll(this.formInline)
  },
  // 方法集合
  methods: {
    handleSizeChange(val) {
      this.formInline.pageSize = val
      this.getAll(this.formInline)
    },
    handleCurrentChange(val) {
      this.formInline.page = val
      this.getAll(this.formInline)
    },
    handleClick(tab, event) {
      this.formInline.checkState = tab.index
      this.getAll(this.formInline)
    },
    // 查询
    search() {
      this.total = 1
      this.formInline.page = 1
      this.getAll(this.formInline)
    },
    // 处理
    handleDel(row) {
      this.addVisible = true
      this.getFormData(row.shopId)
    },
    getFormData(shopId) {
      this.loading = true
      // 查询店铺详情
      settlementGetById({ shopId })
        .then((res) => {
          this.loading = false
          this.form = res.data
        })
        .catch((err) => {
          this.loading = false
          console.log(err)
        })
    },
    cleanForm() {
      this.addVisible = false
    },
    // 删除
    async delet(row) {
      const res = await settlementDelete({ checkId: row.checkId })
      if (res.code === '') {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.getAll(this.formInline)
      }
    },
    // 初始化查询所有数据
    async getAll(formInline) {
      const res = await settlementGetAll(formInline)
      this.tableData = res.data.list
      this.total = res.data.total
    }
  }
}
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
@import url("../../../styles/elDialog.scss");

.pdl {
	padding-left: 20px;
}
</style>