management/src/views/home/data_credit.vue

<template>
  <div class="app-container">
    <div class="head-container filtration">
      <div class="l">
        <el-button type="primary" icon="el-icon-plus" @click="openDialog(null,'add')">
          创建挂账人
        </el-button>
      </div>
      <div class="r">
        <el-input v-model="tableData.keywords" placeholder="按挂账人或手机号" style="width: 138px;" />
        <el-select v-model="tableData.status" placeholder="全部状态" clearable style="width: 123px;">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-button type="primary" @click="search">
          查询
        </el-button>
      </div>
    </div>
    <div class="head-container content">
      <el-table v-loading="tableData.loading" :data="tableData.data">
        <el-table-column label="挂账编码" prop="id" />
        <el-table-column label="状态">
          <template v-slot="scope">
            {{ scope.row.status == '1' ? '启用' : '停用' }}
          </template>
        </el-table-column>
        <el-table-column label="挂账人" prop="debtor" />
        <el-table-column label="手机号" prop="mobile" />
        <el-table-column label="挂账额度(元)" prop="creditAmount" />
        <el-table-column label="已挂账金额(元)" prop="owedAmount" />
        <el-table-column label="剩余挂账额度(元)" prop="remainingAmount" />
        <el-table-column label="账户余额" prop="accountBalance" />
        <el-table-column label="适用门店" prop="shopName" />
        <el-table-column label="操作" width="250">
          <template v-slot="scope">
            <el-button type="text" @click="$router.push({name: 'data_creditDetail', query: {id: scope.row.id, repaymentMethod: scope.row.repaymentMethod}} )">查看明细</el-button>
            <el-button type="text" @click="openDialog(scope.row,'edit')">编辑</el-button>
            <el-button :style="{ color: scope.row.repaymentMethod == 'order' ? '#999' :''}" type="text" @click="openDialog(scope.row,'repayment')">还款</el-button>
            <el-button type="text" @click="openDialog(scope.row,'rePaymentRecord')">还款记录</el-button>
            <el-popconfirm title="确定删除吗？" @confirm="delTableHandle([scope.row.id])">
              <el-button
                slot="reference"
                type="text"
              >删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="head-container">
      <el-pagination
        :total="tableData.total"
        :current-page="tableData.page"
        :page-size="tableData.size"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="paginationChange"
        @size-change="sizeChange"
      />
    </div>

    <!-- 创建挂账人 -->
    <creditAdd ref="creditAdd" @success="resetHandle" />

    <!-- 还款 -->
    <creditRepayment ref="creditRepayment" @success="resetHandle" />

    <!-- 还款记录 -->
    <creditRepaymentRecord ref="creditRepaymentRecord" @success="resetHandle" />

  </div>
</template>

<script>
import creditAdd from './components/credit_add.vue'
import creditRepayment from './components/credit_repayment.vue'
import creditRepaymentRecord from './components/credit_RePaymentRecord.vue'
import { getCreditBuyerList, delCreditBuyer } from '@/api/credit'
export default {
  // eslint-disable-next-line vue/no-unused-components
  components: { creditAdd, creditRepayment, creditRepaymentRecord },
  filters: {

    typeFilter(value) {
      // eslint-disable-next-line eqeqeq
    },
    effectTypeFilter(value) {
      // eslint-disable-next-line eqeqeq
    }
  },
  data() {
    return {
      options: [
        {
          value: '1',
          label: '启用'
        },
        {
          value: '0',
          label: '停用'
        }
      ],
      tableData: {
        keywords: '',
        status: '',
        data: [],
        page: 1,
        size: 10,
        loading: false,
        total: 0
      }
    }
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    search() {
      this.tableData.page = 1
      this.getTableData()
    },
    /**
     * 获取挂账人列表
     */
    async getTableData() {
      this.tableData.loading = true
      try {
        const res = await getCreditBuyerList({
          page: this.tableData.page,
          size: this.tableData.size,
          keywords: this.tableData.keywords,
          status: this.tableData.status,
          shopId: localStorage.getItem('shopId')
        })
        this.tableData.loading = false
        this.tableData.data = res.content
        this.tableData.total = res.totalElements
      } catch (error) {
        console.log(error)
      }
    },

    /**
     * 删除挂账人
     * @param id
     */
    async delTableHandle(id) {
      // eslint-disable-next-line no-unused-vars
      const res = await delCreditBuyer(id)
      this.getTableData()
    },

    /**
     * 操作
     */
    openDialog(row, type) {
      if (type === 'add') {
        this.$refs.creditAdd.show()
      } else if (type === 'edit') {
        this.$refs.creditAdd.show(row)
      } else if (type === 'repayment' && row.repaymentMethod === 'total') {
        this.$refs.creditRepayment.show(row)
      } else if (type === 'rePaymentRecord') {
        this.$refs.creditRepaymentRecord.show(row)
      }
    },

    // 重置查询
    resetHandle() {
      this.page = 1
      this.getTableData()
    },
    // 分页大小改变
    sizeChange(e) {
      this.tableData.size = e
      this.getTableData()
    },
    // 分页回调
    paginationChange(e) {
      this.tableData.page = e
      this.getTableData()
    }
  }
}
</script>
<style scoped lang="scss">
  .title{
    font-weight: bold;
    font-size: 16px;
    color: #333333;
  }
  .filtration{
    overflow: hidden;
    .l{
      float: left;
    }
    .r{
      float: right;
    }
  }
</style>